@fuzo/soccer-board 0.1.0-alpha.2 → 0.2.0-alpha.2

package/fesm2022/fuzo-soccer-board.mjs

@@ -1,6 +1,6 @@
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, output, signal, computed, effect, HostListener, Component, PLATFORM_ID, viewChild, HostBinding } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
 import html2canvas from 'html2canvas-pro';
 
 /**
@@ -201,6 +201,10 @@ class SoccerBoardPlayerComponent {
     // Inputs using signals
     player = input.required(...(ngDevMode ? [{ debugName: "player" }] : []));
     size = input(SoccerBoardPlayerSize.Medium, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    // Position inputs - when provided, the component positions itself
+    // These are percentage values (0-100) relative to parent container
+    positionLeft = input(null, ...(ngDevMode ? [{ debugName: "positionLeft" }] : []));
+    positionTop = input(null, ...(ngDevMode ? [{ debugName: "positionTop" }] : []));
     // Outputs
     dragStart = output();
     dragging = output();
@@ -211,21 +215,14 @@ class SoccerBoardPlayerComponent {
     isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     dragOffsetX = signal(0, ...(ngDevMode ? [{ debugName: "dragOffsetX" }] : []));
     dragOffsetY = signal(0, ...(ngDevMode ? [{ debugName: "dragOffsetY" }] : []));
-    // Computed drag styles
-    dragStyles = computed(() => {
-        if (this.isDragging()) {
-            return {
-                opacity: '0.7',
-                cursor: 'grabbing',
-                zIndex: '1000',
-            };
-        }
-        return {
-            opacity: '1',
-            cursor: 'grab',
-            zIndex: '',
-        };
-    }, ...(ngDevMode ? [{ debugName: "dragStyles" }] : []));
+    // Track if we're waiting for position update after drag
+    waitingForPositionUpdate = signal(false, ...(ngDevMode ? [{ debugName: "waitingForPositionUpdate" }] : []));
+    lastDragEndPosition = signal(null, ...(ngDevMode ? [{ debugName: "lastDragEndPosition" }] : []));
+    // Track if drag has actually started (mouse moved after mousedown)
+    isPotentialDrag = signal(false, ...(ngDevMode ? [{ debugName: "isPotentialDrag" }] : []));
+    dragStartX = signal(0, ...(ngDevMode ? [{ debugName: "dragStartX" }] : []));
+    dragStartY = signal(0, ...(ngDevMode ? [{ debugName: "dragStartY" }] : []));
+    DRAG_THRESHOLD = 5;
     // Computed values
     playerPhoto = computed(() => {
         const photo = this.player()?.photo;
@@ -238,6 +235,10 @@ class SoccerBoardPlayerComponent {
         const player = this.player();
         return player?.fieldX !== undefined && player?.fieldY !== undefined;
     }, ...(ngDevMode ? [{ debugName: "isOnField" }] : []));
+    // Determine if this component should position itself (has position inputs)
+    hasPosition = computed(() => {
+        return this.positionLeft() !== null && this.positionTop() !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasPosition" }] : []));
     // Show fieldPosition if on field, otherwise show preferredPosition
     playerPosition = computed(() => {
         const player = this.player();
@@ -259,62 +260,151 @@ class SoccerBoardPlayerComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
     constructor() {
-        // Effect to apply drag styles
+        // Effect to apply position styles when not dragging
+        effect(() => {
+            const element = this.hostElement.nativeElement;
+            const dragging = this.isDragging();
+            const waiting = this.waitingForPositionUpdate();
+            const left = this.positionLeft();
+            const top = this.positionTop();
+            const hasPos = this.hasPosition();
+            const lastPos = this.lastDragEndPosition();
+            // Don't update position styles while dragging
+            if (dragging) {
+                return;
+            }
+            // If we're waiting for position update after drag ended
+            if (waiting && lastPos !== null) {
+                // Check if position has changed from what it was at drag end
+                // If position changed, we received the update and can apply the new position
+                if (left !== lastPos.left || top !== lastPos.top) {
+                    this.waitingForPositionUpdate.set(false);
+                    this.lastDragEndPosition.set(null);
+                    // Continue to apply the new position below
+                }
+                else {
+                    // Still waiting for position update, keep the element in its current visual position
+                    return;
+                }
+            }
+            if (hasPos && left !== null && top !== null) {
+                // Player is on the field - apply absolute positioning
+                element.style.position = 'absolute';
+                element.style.left = `${left}%`;
+                element.style.top = `${top}%`;
+                element.style.transform = 'translate(-50%, -50%)';
+            }
+            else {
+                // Player is in sidebar - clear positioning styles
+                element.style.position = '';
+                element.style.left = '';
+                element.style.top = '';
+                element.style.transform = '';
+            }
+        });
+        // Effect to apply drag visual styles (opacity, cursor, zIndex)
         effect(() => {
-            const styles = this.dragStyles();
+            const dragging = this.isDragging();
             const element = this.hostElement.nativeElement;
-            element.style.opacity = styles.opacity;
-            element.style.cursor = styles.cursor;
-            element.style.zIndex = styles.zIndex;
+            if (dragging) {
+                element.style.opacity = '0.8';
+                element.style.cursor = 'grabbing';
+                element.style.zIndex = '1000';
+            }
+            else {
+                element.style.opacity = '';
+                element.style.cursor = '';
+                element.style.zIndex = '';
+            }
         });
     }
     onMouseDown(event) {
+        const target = event.target;
+        if (target.closest('.remove-badge')) {
+            return;
+        }
         event.preventDefault();
-        this.startDrag(event.clientX, event.clientY);
+        this.preparePotentialDrag(event.clientX, event.clientY);
     }
     onTouchStart(event) {
         if (event.touches.length !== 1)
             return;
+        const target = event.target;
+        if (target.closest('.remove-badge')) {
+            return;
+        }
         event.preventDefault();
         const touch = event.touches[0];
-        this.startDrag(touch.clientX, touch.clientY);
+        this.preparePotentialDrag(touch.clientX, touch.clientY);
     }
-    startDrag(clientX, clientY) {
-        console.log('[Player] Start drag');
+    preparePotentialDrag(clientX, clientY) {
+        this.dragStartX.set(clientX);
+        this.dragStartY.set(clientY);
+        this.isPotentialDrag.set(true);
         const element = this.hostElement.nativeElement;
         const rect = element.getBoundingClientRect();
         this.dragOffsetX.set(clientX - rect.left);
         this.dragOffsetY.set(clientY - rect.top);
+    }
+    startDrag(clientX, clientY) {
+        const element = this.hostElement.nativeElement;
+        const rect = element.getBoundingClientRect();
+        // IMPORTANT: Set dragging state FIRST
         this.isDragging.set(true);
+        // Apply fixed position for smooth dragging
+        // Use exact current visual position to prevent any jump
+        element.style.position = 'fixed';
+        element.style.left = `${rect.left}px`;
+        element.style.top = `${rect.top}px`;
+        element.style.width = `${rect.width}px`;
+        element.style.height = `${rect.height}px`;
+        element.style.transform = 'none'; // Remove translate during drag
+        element.style.margin = '0';
+        element.style.pointerEvents = 'none';
         const player = this.player();
-        console.log('[Player] Emitting dragStart', { playerId: player.id, playerName: player.name });
         this.dragStart.emit({
             playerId: player.id,
             playerName: player.name,
         });
     }
     onMouseMove(event) {
+        if (this.isPotentialDrag() && !this.isDragging()) {
+            const deltaX = Math.abs(event.clientX - this.dragStartX());
+            const deltaY = Math.abs(event.clientY - this.dragStartY());
+            if (deltaX > this.DRAG_THRESHOLD || deltaY > this.DRAG_THRESHOLD) {
+                this.startDrag(event.clientX, event.clientY);
+            }
+            return;
+        }
         if (!this.isDragging())
             return;
         event.preventDefault();
         this.handleDrag(event.clientX, event.clientY);
     }
     onTouchMove(event) {
-        if (!this.isDragging() || event.touches.length !== 1)
+        if (event.touches.length !== 1)
             return;
-        event.preventDefault();
         const touch = event.touches[0];
+        if (this.isPotentialDrag() && !this.isDragging()) {
+            const deltaX = Math.abs(touch.clientX - this.dragStartX());
+            const deltaY = Math.abs(touch.clientY - this.dragStartY());
+            if (deltaX > this.DRAG_THRESHOLD || deltaY > this.DRAG_THRESHOLD) {
+                this.startDrag(touch.clientX, touch.clientY);
+            }
+            return;
+        }
+        if (!this.isDragging())
+            return;
+        event.preventDefault();
         this.handleDrag(touch.clientX, touch.clientY);
     }
     handleDrag(clientX, clientY) {
         const element = this.hostElement.nativeElement;
         const offsetX = this.dragOffsetX();
         const offsetY = this.dragOffsetY();
-        // Move visually during drag
-        element.style.position = 'fixed';
+        // Update position during drag
         element.style.left = `${clientX - offsetX}px`;
         element.style.top = `${clientY - offsetY}px`;
-        element.style.pointerEvents = 'none';
         const player = this.player();
         this.dragging.emit({
             playerId: player.id,
@@ -325,59 +415,100 @@ class SoccerBoardPlayerComponent {
         });
     }
     onMouseUp(event) {
+        if (this.isPotentialDrag() && !this.isDragging()) {
+            this.isPotentialDrag.set(false);
+            return;
+        }
         if (!this.isDragging())
             return;
         this.endDrag(event.clientX, event.clientY);
     }
     onTouchEnd(event) {
+        if (this.isPotentialDrag() && !this.isDragging()) {
+            this.isPotentialDrag.set(false);
+            return;
+        }
         if (!this.isDragging())
             return;
         const touch = event.changedTouches[0];
         this.endDrag(touch.clientX, touch.clientY);
     }
     endDrag(clientX, clientY) {
-        console.log('[Player] End drag', { clientX, clientY });
-        this.isDragging.set(false);
         const element = this.hostElement.nativeElement;
-        element.style.pointerEvents = '';
-        element.style.position = '';
-        element.style.left = '';
-        element.style.top = '';
         const player = this.player();
+        const rect = element.getBoundingClientRect();
+        // Store current position inputs to detect when they change
+        const currentLeft = this.positionLeft();
+        const currentTop = this.positionTop();
+        // Emit event with all necessary information
         const dragEndEvent = {
             playerId: player.id,
             clientX,
             clientY,
             offsetX: this.dragOffsetX(),
             offsetY: this.dragOffsetY(),
+            elementWidth: rect.width,
+            elementHeight: rect.height,
         };
-        console.log('[Player] Emitting dragEnd', dragEndEvent);
         this.dragEnd.emit(dragEndEvent);
+        // Mark that we're waiting for position update
+        // Store the current position so we can detect when it changes
+        if (currentLeft !== null && currentTop !== null) {
+            this.waitingForPositionUpdate.set(true);
+            this.lastDragEndPosition.set({ left: currentLeft, top: currentTop });
+        }
+        // Clear drag state
+        this.isDragging.set(false);
+        this.isPotentialDrag.set(false);
+        // Clear drag-specific styles except position-related ones
+        // Position will be handled by the effect when new position arrives
+        element.style.width = '';
+        element.style.height = '';
+        element.style.margin = '';
+        element.style.pointerEvents = '';
+        // If we're waiting for position update, keep fixed position temporarily
+        // Otherwise, clear it and let effect handle positioning
+        if (!this.waitingForPositionUpdate()) {
+            element.style.position = '';
+            element.style.left = '';
+            element.style.top = '';
+            element.style.transform = '';
+        }
+        // Fallback: if position doesn't update within 500ms, clear waiting state
+        // This handles edge cases where the drop was outside the field
+        setTimeout(() => {
+            if (this.waitingForPositionUpdate()) {
+                this.waitingForPositionUpdate.set(false);
+                this.lastDragEndPosition.set(null);
+                // Clear fixed position and revert to input-based position
+                element.style.position = '';
+                element.style.left = '';
+                element.style.top = '';
+                element.style.transform = '';
+            }
+        }, 500);
     }
     onRemoveClick(event) {
         event.stopPropagation();
         event.preventDefault();
         const player = this.player();
-        console.log('[Player] Remove from field clicked', player.id);
         this.removeFromField.emit({ playerId: player.id });
     }
     onPlayerClick(event) {
-        // Don't emit click if we're dragging or if the click was on the remove button
-        if (this.isDragging()) {
+        if (this.isDragging() || this.isPotentialDrag()) {
             return;
         }
         event.stopPropagation();
         const player = this.player();
-        console.log('[Player] Player clicked', player.id);
         this.playerClicked.emit({ playerId: player.id, player });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SoccerBoardPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SoccerBoardPlayerComponent, isStandalone: true, selector: "lib-soccer-board-player", inputs: { player: { classPropertyName: "player", publicName: "player", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragging: "dragging", dragEnd: "dragEnd", removeFromField: "removeFromField", playerClicked: "playerClicked" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)", "document:mouseup": "onMouseUp($event)", "document:touchend": "onTouchEnd($event)" } }, ngImport: i0, template: "<div\n  class=\"player-card group select-none cursor-pointer\"\n  [class]=\"sizeClasses()\"\n  (click)=\"onPlayerClick($event)\"\n>\n  <!-- Golden Border Wrapper -->\n  <div class=\"player-border-wrapper\">\n    <!-- Main Content Container -->\n    <div class=\"player-content relative w-full h-full overflow-hidden rounded-md shadow-lg\">\n      <!-- Top Left: Number and Position - Above the photo -->\n      <div class=\"player-info-top-left absolute left-0.5 top-1 flex flex-col gap-0.5 z-30\">\n        <!-- Player Number -->\n        @if (playerNumber()) {\n          <div class=\"player-number-badge text-white text-xs font-bold\">\n            {{ playerNumber() }}\n          </div>\n        }\n\n        <!-- Position -->\n        @if (playerPosition()) {\n          <div class=\"player-position-badge text-white text-[10px] font-bold\">\n            {{ playerPosition() }}\n          </div>\n        }\n      </div>\n\n      <!-- Right Side: Player Photo -->\n      <div class=\"player-photo-container absolute right-0 bottom-0 w-4/5 overflow-visible\">\n        @if (playerPhoto()) {\n          <img\n            [src]=\"playerPhoto()!\"\n            [alt]=\"playerName()\"\n            class=\"player-photo-image\"\n          />\n        } @else {\n          <!-- Placeholder -->\n          <div class=\"w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-400 to-gray-600\">\n            <svg class=\"w-8 h-8 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n              <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n        }\n      </div>\n\n      <!-- Hover Effect Overlay -->\n      <div class=\"absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-all duration-200 rounded-md pointer-events-none\"></div>\n    </div>\n  </div>\n\n  <!-- Remove Button (only when on field) - Outside the card -->\n  @if (isOnField()) {\n    <button\n      class=\"remove-badge absolute bg-red-500 hover:bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-lg transition-colors z-30 border-2 border-white\"\n      (click)=\"onRemoveClick($event)\"\n      type=\"button\"\n      aria-label=\"Remove from field\"\n    >\n      \u00D7\n    </button>\n  }\n\n  <!-- Player Name (outside the card, below) -->\n  <div class=\"player-name-outside text-white text-[10px] font-semibold truncate text-center leading-tight mt-0.5\">\n    {{ playerName() }}\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}.player-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}.player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.player-card:active{transform:scale(.95)}.player-border-wrapper{position:relative;width:100%;height:100%;padding:2px;border-radius:8px;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37,#f4d03f,#d4af37);background-size:200% 200%;animation:shimmer 3s ease-in-out infinite;box-shadow:0 0 8px #d4af3780}.player-content{position:relative;width:100%;height:100%;border-radius:6px;background:repeating-linear-gradient(45deg,#16a34a 0px 2px,#22c55e 2px 4px,#16a34a 4px 6px,#15803d 6px 8px),linear-gradient(135deg,#15803d,#16a34a,#22c55e,#16a34a,#15803d);background-size:20px 20px,100% 100%;background-blend-mode:overlay}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.player-info-top-left{z-index:30;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);background:linear-gradient(to right,rgba(0,0,0,.3) 0%,transparent 50%);padding-right:.5rem;border-radius:0 .25rem .25rem 0}.player-number-badge{font-size:12px;font-weight:900;line-height:1;letter-spacing:-.5px}.player-position-badge{font-size:9px;font-weight:700;line-height:1;letter-spacing:.5px}.remove-badge{box-shadow:0 2px 8px #0006;top:-6px;right:-6px}.player-photo-container{height:100%;width:85%;display:flex;align-items:flex-end;justify-content:flex-start;z-index:1;overflow:visible}.player-photo-image{width:100%;height:auto;max-height:140%;object-fit:contain;object-position:center bottom;display:block}.player-name-outside{width:100%;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5)}:host-context(.w-12) .player-info-top-left{left:.125rem;top:.25rem;gap:.125rem}:host-context(.w-12) .player-number-badge{font-size:9px}:host-context(.w-12) .player-position-badge{font-size:7px}:host-context(.w-12) .player-name-outside{font-size:8px}:host-context(.w-12) .remove-badge{width:18px;height:18px;font-size:10px;top:-2px;right:-2px}:host-context(.w-20) .player-info-top-left{left:.375rem;top:.5rem;gap:.25rem}:host-context(.w-20) .player-number-badge{font-size:16px}:host-context(.w-20) .player-position-badge{font-size:11px}:host-context(.w-20) .player-name-outside{font-size:12px}:host-context(.w-20) .remove-badge{width:24px;height:24px;font-size:14px;top:-3px;right:-3px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SoccerBoardPlayerComponent, isStandalone: true, selector: "lib-soccer-board-player", inputs: { player: { classPropertyName: "player", publicName: "player", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, positionLeft: { classPropertyName: "positionLeft", publicName: "positionLeft", isSignal: true, isRequired: false, transformFunction: null }, positionTop: { classPropertyName: "positionTop", publicName: "positionTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragging: "dragging", dragEnd: "dragEnd", removeFromField: "removeFromField", playerClicked: "playerClicked" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)", "document:mouseup": "onMouseUp($event)", "document:touchend": "onTouchEnd($event)" } }, ngImport: i0, template: "<div\n  class=\"player-card group select-none cursor-pointer\"\n  [class]=\"sizeClasses()\"\n  (click)=\"onPlayerClick($event)\"\n>\n  <!-- Golden Border Wrapper -->\n  <div class=\"player-border-wrapper\">\n    <!-- Main Content Container -->\n    <div class=\"player-content relative w-full h-full overflow-hidden rounded-md shadow-lg\">\n      <!-- Top Left: Number and Position - Above the photo -->\n      <div class=\"player-info-top-left absolute left-0.5 top-1 flex flex-col gap-0.5 z-30\">\n        <!-- Player Number -->\n        @if (playerNumber()) {\n          <div class=\"player-number-badge text-white text-xs font-bold\">\n            {{ playerNumber() }}\n          </div>\n        }\n\n        <!-- Position -->\n        @if (playerPosition()) {\n          <div class=\"player-position-badge text-white text-[10px] font-bold\">\n            {{ playerPosition() }}\n          </div>\n        }\n      </div>\n\n      <!-- Right Side: Player Photo -->\n      <div class=\"player-photo-container absolute right-0 bottom-0 w-4/5 overflow-visible\">\n        @if (playerPhoto()) {\n          <img\n            [src]=\"playerPhoto()!\"\n            [alt]=\"playerName()\"\n            class=\"player-photo-image\"\n          />\n        } @else {\n          <!-- Placeholder -->\n          <div class=\"w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-400 to-gray-600\">\n            <svg class=\"w-8 h-8 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n              <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n        }\n      </div>\n\n      <!-- Hover Effect Overlay -->\n      <div class=\"absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-all duration-200 rounded-md pointer-events-none\"></div>\n    </div>\n  </div>\n\n  <!-- Remove Button (only when on field) - Outside the card -->\n  @if (isOnField()) {\n    <button\n      class=\"remove-badge absolute text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-lg transition-colors z-30 border-2 border-white\"\n      (click)=\"onRemoveClick($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (touchstart)=\"$event.stopPropagation()\"\n      type=\"button\"\n      aria-label=\"Remove from field\"\n    >\n      \u00D7\n    </button>\n  }\n\n  <!-- Player Name (outside the card, below) -->\n  <div class=\"player-name-outside text-white text-[10px] font-semibold truncate text-center leading-tight mt-0.5\">\n    {{ playerName() }}\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}.player-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}.player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.player-card:active{transform:scale(.95)}.player-border-wrapper{position:relative;width:100%;height:100%;padding:2px;border-radius:8px;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37,#f4d03f,#d4af37);background-size:200% 200%;animation:shimmer 3s ease-in-out infinite;box-shadow:0 0 8px #d4af3780}.player-content{position:relative;width:100%;height:100%;border-radius:6px;background:repeating-linear-gradient(45deg,#16a34a 0px 2px,#22c55e 2px 4px,#16a34a 4px 6px,#15803d 6px 8px),linear-gradient(135deg,#15803d,#16a34a,#22c55e,#16a34a,#15803d);background-size:20px 20px,100% 100%;background-blend-mode:overlay}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.player-info-top-left{z-index:30;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);background:linear-gradient(to right,rgba(0,0,0,.3) 0%,transparent 50%);padding-right:.5rem;border-radius:0 .25rem .25rem 0}.player-number-badge{font-size:12px;font-weight:900;line-height:1;letter-spacing:-.5px}.player-position-badge{font-size:9px;font-weight:700;line-height:1;letter-spacing:.5px}.remove-badge{background-color:#ef4444!important;color:#fff!important;border-color:#fff!important;box-shadow:0 2px 8px #0006;cursor:pointer!important;top:-6px;right:-6px;pointer-events:auto!important;user-select:none;-webkit-user-select:none}.remove-badge:hover{background-color:#dc2626!important}.remove-badge:active{background-color:#b91c1c!important;transform:scale(.95)}.remove-badge:before,.remove-badge:after{pointer-events:none}.player-photo-container{height:100%;width:85%;display:flex;align-items:flex-end;justify-content:flex-start;z-index:1;overflow:visible}.player-photo-image{width:100%;height:auto;max-height:140%;object-fit:contain;object-position:center bottom;display:block}.player-name-outside{width:100%;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5)}:host-context(.w-12) .player-info-top-left{left:.125rem;top:.25rem;gap:.125rem}:host-context(.w-12) .player-number-badge{font-size:9px}:host-context(.w-12) .player-position-badge{font-size:7px}:host-context(.w-12) .player-name-outside{font-size:8px}:host-context(.w-12) .remove-badge{width:18px;height:18px;font-size:10px;top:-2px;right:-2px}:host-context(.w-20) .player-info-top-left{left:.375rem;top:.5rem;gap:.25rem}:host-context(.w-20) .player-number-badge{font-size:16px}:host-context(.w-20) .player-position-badge{font-size:11px}:host-context(.w-20) .player-name-outside{font-size:12px}:host-context(.w-20) .remove-badge{width:24px;height:24px;font-size:14px;top:-3px;right:-3px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SoccerBoardPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-soccer-board-player', standalone: true, imports: [], template: "<div\n  class=\"player-card group select-none cursor-pointer\"\n  [class]=\"sizeClasses()\"\n  (click)=\"onPlayerClick($event)\"\n>\n  <!-- Golden Border Wrapper -->\n  <div class=\"player-border-wrapper\">\n    <!-- Main Content Container -->\n    <div class=\"player-content relative w-full h-full overflow-hidden rounded-md shadow-lg\">\n      <!-- Top Left: Number and Position - Above the photo -->\n      <div class=\"player-info-top-left absolute left-0.5 top-1 flex flex-col gap-0.5 z-30\">\n        <!-- Player Number -->\n        @if (playerNumber()) {\n          <div class=\"player-number-badge text-white text-xs font-bold\">\n            {{ playerNumber() }}\n          </div>\n        }\n\n        <!-- Position -->\n        @if (playerPosition()) {\n          <div class=\"player-position-badge text-white text-[10px] font-bold\">\n            {{ playerPosition() }}\n          </div>\n        }\n      </div>\n\n      <!-- Right Side: Player Photo -->\n      <div class=\"player-photo-container absolute right-0 bottom-0 w-4/5 overflow-visible\">\n        @if (playerPhoto()) {\n          <img\n            [src]=\"playerPhoto()!\"\n            [alt]=\"playerName()\"\n            class=\"player-photo-image\"\n          />\n        } @else {\n          <!-- Placeholder -->\n          <div class=\"w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-400 to-gray-600\">\n            <svg class=\"w-8 h-8 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n              <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n        }\n      </div>\n\n      <!-- Hover Effect Overlay -->\n      <div class=\"absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-all duration-200 rounded-md pointer-events-none\"></div>\n    </div>\n  </div>\n\n  <!-- Remove Button (only when on field) - Outside the card -->\n  @if (isOnField()) {\n    <button\n      class=\"remove-badge absolute bg-red-500 hover:bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-lg transition-colors z-30 border-2 border-white\"\n      (click)=\"onRemoveClick($event)\"\n      type=\"button\"\n      aria-label=\"Remove from field\"\n    >\n      \u00D7\n    </button>\n  }\n\n  <!-- Player Name (outside the card, below) -->\n  <div class=\"player-name-outside text-white text-[10px] font-semibold truncate text-center leading-tight mt-0.5\">\n    {{ playerName() }}\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}.player-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}.player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.player-card:active{transform:scale(.95)}.player-border-wrapper{position:relative;width:100%;height:100%;padding:2px;border-radius:8px;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37,#f4d03f,#d4af37);background-size:200% 200%;animation:shimmer 3s ease-in-out infinite;box-shadow:0 0 8px #d4af3780}.player-content{position:relative;width:100%;height:100%;border-radius:6px;background:repeating-linear-gradient(45deg,#16a34a 0px 2px,#22c55e 2px 4px,#16a34a 4px 6px,#15803d 6px 8px),linear-gradient(135deg,#15803d,#16a34a,#22c55e,#16a34a,#15803d);background-size:20px 20px,100% 100%;background-blend-mode:overlay}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.player-info-top-left{z-index:30;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);background:linear-gradient(to right,rgba(0,0,0,.3) 0%,transparent 50%);padding-right:.5rem;border-radius:0 .25rem .25rem 0}.player-number-badge{font-size:12px;font-weight:900;line-height:1;letter-spacing:-.5px}.player-position-badge{font-size:9px;font-weight:700;line-height:1;letter-spacing:.5px}.remove-badge{box-shadow:0 2px 8px #0006;top:-6px;right:-6px}.player-photo-container{height:100%;width:85%;display:flex;align-items:flex-end;justify-content:flex-start;z-index:1;overflow:visible}.player-photo-image{width:100%;height:auto;max-height:140%;object-fit:contain;object-position:center bottom;display:block}.player-name-outside{width:100%;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5)}:host-context(.w-12) .player-info-top-left{left:.125rem;top:.25rem;gap:.125rem}:host-context(.w-12) .player-number-badge{font-size:9px}:host-context(.w-12) .player-position-badge{font-size:7px}:host-context(.w-12) .player-name-outside{font-size:8px}:host-context(.w-12) .remove-badge{width:18px;height:18px;font-size:10px;top:-2px;right:-2px}:host-context(.w-20) .player-info-top-left{left:.375rem;top:.5rem;gap:.25rem}:host-context(.w-20) .player-number-badge{font-size:16px}:host-context(.w-20) .player-position-badge{font-size:11px}:host-context(.w-20) .player-name-outside{font-size:12px}:host-context(.w-20) .remove-badge{width:24px;height:24px;font-size:14px;top:-3px;right:-3px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { player: [{ type: i0.Input, args: [{ isSignal: true, alias: "player", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragging: [{ type: i0.Output, args: ["dragging"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], removeFromField: [{ type: i0.Output, args: ["removeFromField"] }], playerClicked: [{ type: i0.Output, args: ["playerClicked"] }], onMouseDown: [{
+            args: [{ selector: 'lib-soccer-board-player', standalone: true, imports: [], template: "<div\n  class=\"player-card group select-none cursor-pointer\"\n  [class]=\"sizeClasses()\"\n  (click)=\"onPlayerClick($event)\"\n>\n  <!-- Golden Border Wrapper -->\n  <div class=\"player-border-wrapper\">\n    <!-- Main Content Container -->\n    <div class=\"player-content relative w-full h-full overflow-hidden rounded-md shadow-lg\">\n      <!-- Top Left: Number and Position - Above the photo -->\n      <div class=\"player-info-top-left absolute left-0.5 top-1 flex flex-col gap-0.5 z-30\">\n        <!-- Player Number -->\n        @if (playerNumber()) {\n          <div class=\"player-number-badge text-white text-xs font-bold\">\n            {{ playerNumber() }}\n          </div>\n        }\n\n        <!-- Position -->\n        @if (playerPosition()) {\n          <div class=\"player-position-badge text-white text-[10px] font-bold\">\n            {{ playerPosition() }}\n          </div>\n        }\n      </div>\n\n      <!-- Right Side: Player Photo -->\n      <div class=\"player-photo-container absolute right-0 bottom-0 w-4/5 overflow-visible\">\n        @if (playerPhoto()) {\n          <img\n            [src]=\"playerPhoto()!\"\n            [alt]=\"playerName()\"\n            class=\"player-photo-image\"\n          />\n        } @else {\n          <!-- Placeholder -->\n          <div class=\"w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-400 to-gray-600\">\n            <svg class=\"w-8 h-8 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n              <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n        }\n      </div>\n\n      <!-- Hover Effect Overlay -->\n      <div class=\"absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-all duration-200 rounded-md pointer-events-none\"></div>\n    </div>\n  </div>\n\n  <!-- Remove Button (only when on field) - Outside the card -->\n  @if (isOnField()) {\n    <button\n      class=\"remove-badge absolute text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-lg transition-colors z-30 border-2 border-white\"\n      (click)=\"onRemoveClick($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (touchstart)=\"$event.stopPropagation()\"\n      type=\"button\"\n      aria-label=\"Remove from field\"\n    >\n      \u00D7\n    </button>\n  }\n\n  <!-- Player Name (outside the card, below) -->\n  <div class=\"player-name-outside text-white text-[10px] font-semibold truncate text-center leading-tight mt-0.5\">\n    {{ playerName() }}\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}.player-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}.player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.player-card:active{transform:scale(.95)}.player-border-wrapper{position:relative;width:100%;height:100%;padding:2px;border-radius:8px;background:linear-gradient(135deg,#d4af37,#f4d03f,#d4af37,#f4d03f,#d4af37);background-size:200% 200%;animation:shimmer 3s ease-in-out infinite;box-shadow:0 0 8px #d4af3780}.player-content{position:relative;width:100%;height:100%;border-radius:6px;background:repeating-linear-gradient(45deg,#16a34a 0px 2px,#22c55e 2px 4px,#16a34a 4px 6px,#15803d 6px 8px),linear-gradient(135deg,#15803d,#16a34a,#22c55e,#16a34a,#15803d);background-size:20px 20px,100% 100%;background-blend-mode:overlay}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.player-info-top-left{z-index:30;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);background:linear-gradient(to right,rgba(0,0,0,.3) 0%,transparent 50%);padding-right:.5rem;border-radius:0 .25rem .25rem 0}.player-number-badge{font-size:12px;font-weight:900;line-height:1;letter-spacing:-.5px}.player-position-badge{font-size:9px;font-weight:700;line-height:1;letter-spacing:.5px}.remove-badge{background-color:#ef4444!important;color:#fff!important;border-color:#fff!important;box-shadow:0 2px 8px #0006;cursor:pointer!important;top:-6px;right:-6px;pointer-events:auto!important;user-select:none;-webkit-user-select:none}.remove-badge:hover{background-color:#dc2626!important}.remove-badge:active{background-color:#b91c1c!important;transform:scale(.95)}.remove-badge:before,.remove-badge:after{pointer-events:none}.player-photo-container{height:100%;width:85%;display:flex;align-items:flex-end;justify-content:flex-start;z-index:1;overflow:visible}.player-photo-image{width:100%;height:auto;max-height:140%;object-fit:contain;object-position:center bottom;display:block}.player-name-outside{width:100%;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5)}:host-context(.w-12) .player-info-top-left{left:.125rem;top:.25rem;gap:.125rem}:host-context(.w-12) .player-number-badge{font-size:9px}:host-context(.w-12) .player-position-badge{font-size:7px}:host-context(.w-12) .player-name-outside{font-size:8px}:host-context(.w-12) .remove-badge{width:18px;height:18px;font-size:10px;top:-2px;right:-2px}:host-context(.w-20) .player-info-top-left{left:.375rem;top:.5rem;gap:.25rem}:host-context(.w-20) .player-number-badge{font-size:16px}:host-context(.w-20) .player-position-badge{font-size:11px}:host-context(.w-20) .player-name-outside{font-size:12px}:host-context(.w-20) .remove-badge{width:24px;height:24px;font-size:14px;top:-3px;right:-3px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { player: [{ type: i0.Input, args: [{ isSignal: true, alias: "player", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], positionLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionLeft", required: false }] }], positionTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionTop", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragging: [{ type: i0.Output, args: ["dragging"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], removeFromField: [{ type: i0.Output, args: ["removeFromField"] }], playerClicked: [{ type: i0.Output, args: ["playerClicked"] }], onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
             }], onTouchStart: [{
@@ -430,6 +561,12 @@ class SoccerBoardComponent {
     playerRemovedFromField = output();
     imageExported = output();
     playerClicked = output();
+    // Method to handle player drag start (called from template)
+    onPlayerDragStart(event) {
+        // Player component handles its own drag positioning
+        // This is just for logging/debugging
+        console.log('[SoccerBoard] Drag started', event.playerId);
+    }
     // Method to handle player drag end (called from template)
     onPlayerDragEnd(event) {
         this.handlePlayerDrop(event);
@@ -503,11 +640,22 @@ class SoccerBoardComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "awayZones" }] : []));
     // Computed players by side
+    // These computed signals automatically cache results when dependencies haven't changed
+    // The @for loop uses trackBy with player.id to only re-render changed players
+    // NOTE: Even if a new array is returned, trackBy ensures only changed items re-render
     homePlayers = computed(() => {
-        return this.players().filter((player) => player.side === SoccerBoardTeamSide.Home && player.fieldX !== undefined && player.fieldY !== undefined);
+        return this.players().filter((player) => player.side === SoccerBoardTeamSide.Home &&
+            player.fieldX !== undefined &&
+            player.fieldY !== undefined &&
+            !isNaN(player.fieldX) &&
+            !isNaN(player.fieldY));
     }, ...(ngDevMode ? [{ debugName: "homePlayers" }] : []));
     awayPlayers = computed(() => {
-        return this.players().filter((player) => player.side === SoccerBoardTeamSide.Away && player.fieldX !== undefined && player.fieldY !== undefined);
+        return this.players().filter((player) => player.side === SoccerBoardTeamSide.Away &&
+            player.fieldX !== undefined &&
+            player.fieldY !== undefined &&
+            !isNaN(player.fieldX) &&
+            !isNaN(player.fieldY));
     }, ...(ngDevMode ? [{ debugName: "awayPlayers" }] : []));
     // Computed: players available (not on field)
     availablePlayers = computed(() => {
@@ -534,12 +682,51 @@ class SoccerBoardComponent {
     playersGridColumns = computed(() => {
         return `repeat(${this.playersColumns()}, minmax(0, 1fr))`;
     }, ...(ngDevMode ? [{ debugName: "playersGridColumns" }] : []));
+    // Computed: Map of player positions for stable rendering
+    // This ensures positions are only recalculated when players() or orientation() change
+    // Using a Map allows efficient lookups
+    playerPositions = computed(() => {
+        const positions = new Map();
+        const players = this.players();
+        // Track orientation dependency - fieldToHalfCoordinates uses it internally
+        this.orientation();
+        // Process all players with valid coordinates
+        for (const player of players) {
+            if (player.fieldX !== undefined &&
+                player.fieldY !== undefined &&
+                player.side !== undefined &&
+                !isNaN(player.fieldX) &&
+                !isNaN(player.fieldY)) {
+                // Validate coordinates are within bounds (0-100)
+                const fieldX = Math.max(0, Math.min(100, player.fieldX));
+                const fieldY = Math.max(0, Math.min(100, player.fieldY));
+                // Calculate position using validated coordinates
+                const position = this.fieldToHalfCoordinates(fieldX, fieldY, player.side);
+                positions.set(player.id, position);
+            }
+        }
+        return positions;
+    }, ...(ngDevMode ? [{ debugName: "playerPositions" }] : []));
     // Helper method to get visual position for a player (public for template)
+    // Now uses the computed positions map instead of calculating on the fly
     getPlayerPosition(player) {
-        if (player.fieldX === undefined || player.fieldY === undefined || !player.side) {
-            return { left: 0, top: 0 };
+        const positions = this.playerPositions();
+        const position = positions.get(player.id);
+        if (position) {
+            return position;
         }
-        return this.fieldToHalfCoordinates(player.fieldX, player.fieldY, player.side);
+        // Fallback: if position is not in cache but player has coordinates, calculate it
+        // This should rarely happen, but handles edge cases
+        if (player.fieldX !== undefined &&
+            player.fieldY !== undefined &&
+            player.side !== undefined &&
+            !isNaN(player.fieldX) &&
+            !isNaN(player.fieldY)) {
+            const fieldX = Math.max(0, Math.min(100, player.fieldX));
+            const fieldY = Math.max(0, Math.min(100, player.fieldY));
+            return this.fieldToHalfCoordinates(fieldX, fieldY, player.side);
+        }
+        return { left: 0, top: 0 };
     }
     resizeObserver = null;
     constructor() {
@@ -572,57 +759,106 @@ class SoccerBoardComponent {
      */
     handlePlayerDrop(event) {
         console.log('[SoccerBoard] handlePlayerDrop called', event);
-        const position = this.calculateFieldPosition(event.clientX, event.clientY);
+        // Calculate position immediately (don't use requestAnimationFrame as it causes timing issues)
+        // The coordinates are already correct from the drag end event
+        // clientX/clientY represent where the mouse/touch was when released
+        // offsetX/offsetY represent the offset from element's top-left to click point
+        // elementWidth/elementHeight are the dimensions of the dragged element
+        const position = this.calculateFieldPosition(event.clientX, event.clientY, event.offsetX, event.offsetY, event.elementWidth, event.elementHeight);
         console.log('[SoccerBoard] Calculated position', position);
-        if (position) {
-            // Check if player is already on the field (moving to a different position)
-            const currentPlayer = this.players().find((p) => p.id === event.playerId);
-            const isMovingPlayer = currentPlayer?.fieldX !== undefined && currentPlayer?.fieldY !== undefined;
-            // Check maximum players per side (only for new players, not when moving)
-            if (!isMovingPlayer) {
-                const playersOnSide = this.players().filter((p) => p.side === position.side && p.fieldX !== undefined && p.fieldY !== undefined).length;
-                if (playersOnSide >= this.maxPlayersPerSide()) {
-                    console.warn(`[SoccerBoard] Maximum players (${this.maxPlayersPerSide()}) reached for ${position.side} side`);
-                    return; // Don't allow drop if max players reached
-                }
-            }
-            const tacticalPosition = this.detectTacticalPosition(position.fieldX, position.fieldY, position.side);
-            console.log('🎯 Player dropped:', {
-                playerId: event.playerId,
-                position: tacticalPosition,
-                coordinates: {
-                    fieldX: position.fieldX,
-                    fieldY: position.fieldY,
-                    side: position.side,
-                },
-            });
-            // Emit event with position information
-            this.playerPositioned.emit({
-                playerId: event.playerId,
-                fieldX: position.fieldX,
-                fieldY: position.fieldY,
-                side: position.side,
-                position: tacticalPosition,
-            });
-        }
-        else {
+        if (!position) {
             console.warn('[SoccerBoard] Position is null - player not dropped on field');
+            return;
         }
+        // Get current player state BEFORE validation to avoid race conditions
+        // Use the current players() signal value to get the latest state
+        const currentPlayers = this.players();
+        const currentPlayer = currentPlayers.find((p) => p.id === event.playerId);
+        if (!currentPlayer) {
+            console.warn('[SoccerBoard] Player not found', event.playerId);
+            return;
+        }
+        const isMovingPlayer = currentPlayer.fieldX !== undefined && currentPlayer.fieldY !== undefined;
+        const isMovingToDifferentSide = isMovingPlayer && currentPlayer.side !== position.side;
+        // Check maximum players per side:
+        // - For new players: always check
+        // - For moving players: only check if moving to a DIFFERENT side
+        // - When moving within the same side, allow it (no limit check needed)
+        if (!isMovingPlayer || isMovingToDifferentSide) {
+            // Count players on the target side (excluding the current player if moving)
+            const playersOnTargetSide = currentPlayers.filter((p) => p.id !== event.playerId && // Exclude the player being moved
+                p.side === position.side &&
+                p.fieldX !== undefined &&
+                p.fieldY !== undefined &&
+                !isNaN(p.fieldX) &&
+                !isNaN(p.fieldY)).length;
+            if (playersOnTargetSide >= this.maxPlayersPerSide()) {
+                console.warn(`[SoccerBoard] Maximum players (${this.maxPlayersPerSide()}) reached for ${position.side} side. Cannot ${isMovingPlayer ? 'move' : 'add'} player.`);
+                return; // Don't allow drop if max players reached on target side
+            }
+        }
+        // Validate coordinates are within bounds
+        const fieldX = Math.max(0, Math.min(100, position.fieldX));
+        const fieldY = Math.max(0, Math.min(100, position.fieldY));
+        const tacticalPosition = this.detectTacticalPosition(fieldX, fieldY, position.side);
+        console.log('🎯 Player dropped:', {
+            playerId: event.playerId,
+            isMovingPlayer,
+            isMovingToDifferentSide,
+            position: tacticalPosition,
+            coordinates: {
+                fieldX,
+                fieldY,
+                side: position.side,
+            },
+        });
+        // Emit event with position information (using validated coordinates)
+        // Emit immediately - the parent component handles the update
+        this.playerPositioned.emit({
+            playerId: event.playerId,
+            fieldX,
+            fieldY,
+            side: position.side,
+            position: tacticalPosition,
+        });
     }
     /**
      * Calculates field position from client coordinates
+     * @param clientX - X coordinate of the mouse/touch event
+     * @param clientY - Y coordinate of the mouse/touch event
+     * @param offsetX - Optional: X offset from element's left edge to click point (used to calculate center)
+     * @param offsetY - Optional: Y offset from element's top edge to click point (used to calculate center)
+     * @param elementWidth - Optional: Width of the dragged element
+     * @param elementHeight - Optional: Height of the dragged element
      */
-    calculateFieldPosition(clientX, clientY) {
+    calculateFieldPosition(clientX, clientY, offsetX, offsetY, elementWidth, elementHeight) {
         const homeHalfEl = this.homeHalf()?.nativeElement;
         const awayHalfEl = this.awayHalf()?.nativeElement;
         if (!homeHalfEl || !awayHalfEl) {
             return null;
         }
-        // Get the center point of the dragged element
-        // Use clientX/clientY directly as they represent where the mouse/touch is
-        // The offset is already accounted for in the drag handling
-        const centerX = clientX;
-        const centerY = clientY;
+        // Calculate the center of the dragged element
+        // clientX/clientY is where the cursor is
+        // offsetX/offsetY is the offset from the element's top-left to where the user clicked
+        // elementWidth/elementHeight are the actual dimensions of the element
+        //
+        // The element's top-left corner is at:
+        //   elementLeft = clientX - offsetX
+        //   elementTop = clientY - offsetY
+        //
+        // The element's center is at:
+        //   centerX = elementLeft + elementWidth / 2 = clientX - offsetX + elementWidth / 2
+        //   centerY = elementTop + elementHeight / 2 = clientY - offsetY + elementHeight / 2
+        let centerX = clientX;
+        let centerY = clientY;
+        if (offsetX !== undefined &&
+            offsetY !== undefined &&
+            elementWidth !== undefined &&
+            elementHeight !== undefined) {
+            // Calculate the actual center of the element
+            centerX = clientX - offsetX + elementWidth / 2;
+            centerY = clientY - offsetY + elementHeight / 2;
+        }
         // Check HOME half
         const homeRect = homeHalfEl.getBoundingClientRect();
         const isInHome = centerX >= homeRect.left &&
@@ -937,85 +1173,19 @@ class SoccerBoardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SoccerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SoccerBoardComponent, isStandalone: true, selector: "fuzo-soccer-board", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, teamSide: { classPropertyName: "teamSide", publicName: "teamSide", isSignal: true, isRequired: false, transformFunction: null }, showPositions: { classPropertyName: "showPositions", publicName: "showPositions", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, players: { classPropertyName: "players", publicName: "players", isSignal: true, isRequired: false, transformFunction: null }, showPlayersSidebar: { classPropertyName: "showPlayersSidebar", publicName: "showPlayersSidebar", isSignal: true, isRequired: false, transformFunction: null }, playersPosition: { classPropertyName: "playersPosition", publicName: "playersPosition", isSignal: true, isRequired: false, transformFunction: null }, playersColumns: { classPropertyName: "playersColumns", publicName: "playersColumns", isSignal: true, isRequired: false, transformFunction: null }, maxPlayersPerSide: { classPropertyName: "maxPlayersPerSide", publicName: "maxPlayersPerSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playerPositioned: "playerPositioned", playerRemovedFromField: "playerRemovedFromField", imageExported: "imageExported", playerClicked: "playerClicked" }, host: { properties: { "style.width": "this.hostWidthStyle" } }, viewQueries: [{ propertyName: "fieldContainer", first: true, predicate: ["fieldContainer"], descendants: true, isSignal: true }, { propertyName: "homeHalf", first: true, predicate: ["homeHalf"], descendants: true, isSignal: true }, { propertyName: "awayHalf", first: true, predicate: ["awayHalf"], descendants: true, isSignal: true }, { propertyName: "soccerBoardContainer", first: true, predicate: ["soccerBoardContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"soccer-board-wrapper\" [class]=\"layoutClasses()\">\n  <!-- Players Sidebar -->\n  @if (showPlayersSidebar()) {\n    <div class=\"players-sidebar\">\n      <div\n        class=\"players-grid\"\n        [style.grid-template-columns]=\"playersGridColumns()\"\n      >\n          @for (player of availablePlayers(); track player.id) {\n          <lib-soccer-board-player\n            [player]=\"player\"\n            [size]=\"PlayerSize.Medium\"\n            (dragEnd)=\"onPlayerDragEnd($event)\"\n            (playerClicked)=\"onPlayerClick($event)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Soccer Board Container -->\n  <div #soccerBoardContainer class=\"soccer-board-container\">\n    <div\n      #fieldContainer\n      class=\"field-container\"\n      [class.landscape]=\"isLandscape()\"\n    >\n      <!-- AWAY half -->\n      <div #awayHalf class=\"field-half away\" [class.hidden]=\"!showAway()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of awayZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-away\">\n          @for (player of awayPlayers(); track player.id) {\n            @if (player.fieldX !== undefined && player.fieldY !== undefined) {\n              <lib-soccer-board-player\n                [player]=\"player\"\n                [size]=\"PlayerSize.Small\"\n                [style.position]=\"'absolute'\"\n                [style.left.%]=\"getPlayerPosition(player).left\"\n                [style.top.%]=\"getPlayerPosition(player).top\"\n                [style.transform]=\"'translate(-50%, -50%)'\"\n                (dragEnd)=\"onPlayerDragEnd($event)\"\n                (removeFromField)=\"onPlayerRemoveFromField($event)\"\n                (playerClicked)=\"onPlayerClick($event)\"\n              />\n            }\n          }\n        </div>\n      </div>\n\n      <!-- HOME half -->\n      <div #homeHalf class=\"field-half home\" [class.hidden]=\"!showHome()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of homeZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-home\">\n          @for (player of homePlayers(); track player.id) {\n            @if (player.fieldX !== undefined && player.fieldY !== undefined) {\n              <lib-soccer-board-player\n                [player]=\"player\"\n                [size]=\"PlayerSize.Small\"\n                [style.position]=\"'absolute'\"\n                [style.left.%]=\"getPlayerPosition(player).left\"\n                [style.top.%]=\"getPlayerPosition(player).top\"\n                [style.transform]=\"'translate(-50%, -50%)'\"\n                (dragEnd)=\"onPlayerDragEnd($event)\"\n                (removeFromField)=\"onPlayerRemoveFromField($event)\"\n                (playerClicked)=\"onPlayerClick($event)\"\n              />\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%}*{box-sizing:border-box}.soccer-board-wrapper{display:flex;width:100%;height:100%;gap:1.5rem}.layout-players-left{flex-direction:row}.layout-players-left .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-left .soccer-board-container{flex:1;min-width:0}.layout-players-right{flex-direction:row-reverse}.layout-players-right .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-right .soccer-board-container{flex:1;min-width:0}.layout-players-top{flex-direction:column}.layout-players-top .players-sidebar{width:100%;max-height:300px}.layout-players-top .soccer-board-container{flex:1;min-height:0}.layout-players-bottom{flex-direction:column-reverse}.layout-players-bottom .players-sidebar{width:100%;max-height:300px}.layout-players-bottom .soccer-board-container{flex:1;min-height:0}.layout-no-sidebar .soccer-board-container{width:100%;height:100%}.players-sidebar{display:flex;flex-direction:column;background:transparent;padding:0;overflow-y:auto}.players-grid{display:grid;gap:.5rem;align-content:start}.soccer-board-container{width:100%;display:flex;justify-content:center;align-items:center;padding:var(--soccer-board-padding, 0);max-width:var(--soccer-board-max-width, none);width:var(--soccer-board-width, 100%);aspect-ratio:105/68}.field-container{display:flex;flex-direction:column;gap:0;width:100%;min-width:300px;height:auto}.field-container.landscape{flex-direction:row}.field-container.landscape .field-half{width:50%;aspect-ratio:52.5/68;background:repeating-linear-gradient(90deg,#2d5016 0px 10px,#3a6b1f 10px 20px)}.field-container.landscape .field-half.home{border-radius:0 10px 10px 0;box-shadow:10px 0 30px #0000004d}.field-container.landscape .field-half.away{border-radius:10px 0 0 10px;box-shadow:-5px 0 20px #0003}.field-container.landscape .field-half.home .center-border{inset:0 auto 0 0;width:3px;height:auto}.field-container.landscape .field-half.away .center-border{inset:0 0 0 auto;width:3px;height:auto}.field-container.landscape .field-half.home .half-circle{top:50%;left:0;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-left:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:0 999px 999px 0}.field-container.landscape .field-half.away .half-circle{inset:50% 0 auto auto;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-right:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:999px 0 0 999px}.field-container.landscape .field-half.home .penalty-area{inset:50% 0 auto auto;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .penalty-area{inset:50% auto auto 0;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-container.landscape .field-half.home .goal-area{inset:50% 0 auto auto;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .goal-area{inset:50% auto auto 0;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-half{position:relative;width:100%;aspect-ratio:68/52.5;background:repeating-linear-gradient(0deg,#2d5016 0px 10px,#3a6b1f 10px 20px);overflow:hidden}.field-half.home{border-radius:0 0 10px 10px;box-shadow:0 10px 30px #0000004d}.field-half.away{border-radius:10px 10px 0 0;box-shadow:0 -5px 20px #0003}.field-half.hidden{display:none}.field-lines{position:absolute;inset:0;pointer-events:none}.field-half.home .center-border{position:absolute;background:#fffc;z-index:10;top:0;left:0;right:0;height:3px}.field-half.away .center-border{position:absolute;background:#fffc;z-index:10;bottom:0;left:0;right:0;height:3px}.field-half.home .half-circle{position:absolute;z-index:5;top:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-top:none;border-radius:0 0 999px 999px;background:transparent}.field-half.away .half-circle{position:absolute;z-index:5;bottom:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-bottom:none;border-radius:999px 999px 0 0;background:transparent}.field-half.home .penalty-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .penalty-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-top:none}.field-half.home .goal-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .goal-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-top:none}.position-zones{position:absolute;inset:0;pointer-events:none;z-index:15}.position-zones.hidden{display:none}.position-zone{position:absolute;border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);opacity:.85;transition:all .3s ease}.position-zone:hover{opacity:1;z-index:100;transform:scale(1.05)}.players-container{position:absolute;inset:0;pointer-events:none;z-index:20}.players-container>*{pointer-events:auto}\n"], dependencies: [{ kind: "component", type: SoccerBoardPlayerComponent, selector: "lib-soccer-board-player", inputs: ["player", "size"], outputs: ["dragStart", "dragging", "dragEnd", "removeFromField", "playerClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SoccerBoardComponent, isStandalone: true, selector: "fuzo-soccer-board", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, teamSide: { classPropertyName: "teamSide", publicName: "teamSide", isSignal: true, isRequired: false, transformFunction: null }, showPositions: { classPropertyName: "showPositions", publicName: "showPositions", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, players: { classPropertyName: "players", publicName: "players", isSignal: true, isRequired: false, transformFunction: null }, showPlayersSidebar: { classPropertyName: "showPlayersSidebar", publicName: "showPlayersSidebar", isSignal: true, isRequired: false, transformFunction: null }, playersPosition: { classPropertyName: "playersPosition", publicName: "playersPosition", isSignal: true, isRequired: false, transformFunction: null }, playersColumns: { classPropertyName: "playersColumns", publicName: "playersColumns", isSignal: true, isRequired: false, transformFunction: null }, maxPlayersPerSide: { classPropertyName: "maxPlayersPerSide", publicName: "maxPlayersPerSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playerPositioned: "playerPositioned", playerRemovedFromField: "playerRemovedFromField", imageExported: "imageExported", playerClicked: "playerClicked" }, host: { properties: { "style.width": "this.hostWidthStyle" } }, viewQueries: [{ propertyName: "fieldContainer", first: true, predicate: ["fieldContainer"], descendants: true, isSignal: true }, { propertyName: "homeHalf", first: true, predicate: ["homeHalf"], descendants: true, isSignal: true }, { propertyName: "awayHalf", first: true, predicate: ["awayHalf"], descendants: true, isSignal: true }, { propertyName: "soccerBoardContainer", first: true, predicate: ["soccerBoardContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"soccer-board-wrapper\" [class]=\"layoutClasses()\">\n  <!-- Players Sidebar -->\n  @if (showPlayersSidebar()) {\n    <div class=\"players-sidebar\">\n      <div\n        class=\"players-grid\"\n        [style.grid-template-columns]=\"playersGridColumns()\"\n      >\n        @for (player of availablePlayers(); track player.id) {\n          <lib-soccer-board-player\n            [player]=\"player\"\n            [size]=\"PlayerSize.Medium\"\n            (dragStart)=\"onPlayerDragStart($event)\"\n            (dragEnd)=\"onPlayerDragEnd($event)\"\n            (playerClicked)=\"onPlayerClick($event)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Soccer Board Container -->\n  <div #soccerBoardContainer class=\"soccer-board-container\">\n    <div\n      #fieldContainer\n      class=\"field-container\"\n      [class.landscape]=\"isLandscape()\"\n    >\n      <!-- AWAY half -->\n      <div #awayHalf class=\"field-half away\" [class.hidden]=\"!showAway()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of awayZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-away\">\n          @for (player of awayPlayers(); track player.id) {\n            <lib-soccer-board-player\n              [player]=\"player\"\n              [size]=\"PlayerSize.Small\"\n              [positionLeft]=\"getPlayerPosition(player).left\"\n              [positionTop]=\"getPlayerPosition(player).top\"\n              (dragStart)=\"onPlayerDragStart($event)\"\n              (dragEnd)=\"onPlayerDragEnd($event)\"\n              (removeFromField)=\"onPlayerRemoveFromField($event)\"\n              (playerClicked)=\"onPlayerClick($event)\"\n            />\n          }\n        </div>\n      </div>\n\n      <!-- HOME half -->\n      <div #homeHalf class=\"field-half home\" [class.hidden]=\"!showHome()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of homeZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-home\">\n          @for (player of homePlayers(); track player.id) {\n            <lib-soccer-board-player\n              [player]=\"player\"\n              [size]=\"PlayerSize.Small\"\n              [positionLeft]=\"getPlayerPosition(player).left\"\n              [positionTop]=\"getPlayerPosition(player).top\"\n              (dragStart)=\"onPlayerDragStart($event)\"\n              (dragEnd)=\"onPlayerDragEnd($event)\"\n              (removeFromField)=\"onPlayerRemoveFromField($event)\"\n              (playerClicked)=\"onPlayerClick($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%}*{box-sizing:border-box}.soccer-board-wrapper{display:flex;width:100%;height:100%;gap:1.5rem}.layout-players-left{flex-direction:row}.layout-players-left .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-left .soccer-board-container{flex:1;min-width:0}.layout-players-right{flex-direction:row-reverse}.layout-players-right .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-right .soccer-board-container{flex:1;min-width:0}.layout-players-top{flex-direction:column}.layout-players-top .players-sidebar{width:100%;max-height:300px}.layout-players-top .soccer-board-container{flex:1;min-height:0}.layout-players-bottom{flex-direction:column-reverse}.layout-players-bottom .players-sidebar{width:100%;max-height:300px}.layout-players-bottom .soccer-board-container{flex:1;min-height:0}.layout-no-sidebar .soccer-board-container{width:100%;height:100%}.players-sidebar{display:flex;flex-direction:column;background:transparent;padding:0;overflow-y:auto}.players-grid{display:grid;gap:.5rem;align-content:start}.soccer-board-container{width:100%;display:flex;justify-content:center;align-items:center;padding:var(--soccer-board-padding, 0);max-width:var(--soccer-board-max-width, none);width:var(--soccer-board-width, 100%);aspect-ratio:105/68}.field-container{display:flex;flex-direction:column;gap:0;width:100%;min-width:300px;height:auto}.field-container.landscape{flex-direction:row}.field-container.landscape .field-half{width:50%;aspect-ratio:52.5/68;background:repeating-linear-gradient(90deg,#2d5016 0px 10px,#3a6b1f 10px 20px)}.field-container.landscape .field-half.home{border-radius:0 10px 10px 0;box-shadow:10px 0 30px #0000004d}.field-container.landscape .field-half.away{border-radius:10px 0 0 10px;box-shadow:-5px 0 20px #0003}.field-container.landscape .field-half.home .center-border{inset:0 auto 0 0;width:3px;height:auto}.field-container.landscape .field-half.away .center-border{inset:0 0 0 auto;width:3px;height:auto}.field-container.landscape .field-half.home .half-circle{top:50%;left:0;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-left:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:0 999px 999px 0}.field-container.landscape .field-half.away .half-circle{inset:50% 0 auto auto;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-right:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:999px 0 0 999px}.field-container.landscape .field-half.home .penalty-area{inset:50% 0 auto auto;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .penalty-area{inset:50% auto auto 0;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-container.landscape .field-half.home .goal-area{inset:50% 0 auto auto;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .goal-area{inset:50% auto auto 0;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-half{position:relative;width:100%;aspect-ratio:68/52.5;background:repeating-linear-gradient(0deg,#2d5016 0px 10px,#3a6b1f 10px 20px);overflow:hidden}.field-half.home{border-radius:0 0 10px 10px;box-shadow:0 10px 30px #0000004d}.field-half.away{border-radius:10px 10px 0 0;box-shadow:0 -5px 20px #0003}.field-half.hidden{display:none}.field-lines{position:absolute;inset:0;pointer-events:none}.field-half.home .center-border{position:absolute;background:#fffc;z-index:10;top:0;left:0;right:0;height:3px}.field-half.away .center-border{position:absolute;background:#fffc;z-index:10;bottom:0;left:0;right:0;height:3px}.field-half.home .half-circle{position:absolute;z-index:5;top:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-top:none;border-radius:0 0 999px 999px;background:transparent}.field-half.away .half-circle{position:absolute;z-index:5;bottom:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-bottom:none;border-radius:999px 999px 0 0;background:transparent}.field-half.home .penalty-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .penalty-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-top:none}.field-half.home .goal-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .goal-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-top:none}.position-zones{position:absolute;inset:0;pointer-events:none;z-index:15}.position-zones.hidden{display:none}.position-zone{position:absolute;border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);opacity:.85;transition:all .3s ease}.position-zone:hover{opacity:1;z-index:100;transform:scale(1.05)}.players-container{position:absolute;inset:0;pointer-events:none;z-index:20}.players-container>*{pointer-events:auto}\n"], dependencies: [{ kind: "component", type: SoccerBoardPlayerComponent, selector: "lib-soccer-board-player", inputs: ["player", "size", "positionLeft", "positionTop"], outputs: ["dragStart", "dragging", "dragEnd", "removeFromField", "playerClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SoccerBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fuzo-soccer-board', standalone: true, imports: [SoccerBoardPlayerComponent], template: "<div class=\"soccer-board-wrapper\" [class]=\"layoutClasses()\">\n  <!-- Players Sidebar -->\n  @if (showPlayersSidebar()) {\n    <div class=\"players-sidebar\">\n      <div\n        class=\"players-grid\"\n        [style.grid-template-columns]=\"playersGridColumns()\"\n      >\n          @for (player of availablePlayers(); track player.id) {\n          <lib-soccer-board-player\n            [player]=\"player\"\n            [size]=\"PlayerSize.Medium\"\n            (dragEnd)=\"onPlayerDragEnd($event)\"\n            (playerClicked)=\"onPlayerClick($event)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Soccer Board Container -->\n  <div #soccerBoardContainer class=\"soccer-board-container\">\n    <div\n      #fieldContainer\n      class=\"field-container\"\n      [class.landscape]=\"isLandscape()\"\n    >\n      <!-- AWAY half -->\n      <div #awayHalf class=\"field-half away\" [class.hidden]=\"!showAway()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of awayZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-away\">\n          @for (player of awayPlayers(); track player.id) {\n            @if (player.fieldX !== undefined && player.fieldY !== undefined) {\n              <lib-soccer-board-player\n                [player]=\"player\"\n                [size]=\"PlayerSize.Small\"\n                [style.position]=\"'absolute'\"\n                [style.left.%]=\"getPlayerPosition(player).left\"\n                [style.top.%]=\"getPlayerPosition(player).top\"\n                [style.transform]=\"'translate(-50%, -50%)'\"\n                (dragEnd)=\"onPlayerDragEnd($event)\"\n                (removeFromField)=\"onPlayerRemoveFromField($event)\"\n                (playerClicked)=\"onPlayerClick($event)\"\n              />\n            }\n          }\n        </div>\n      </div>\n\n      <!-- HOME half -->\n      <div #homeHalf class=\"field-half home\" [class.hidden]=\"!showHome()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of homeZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-home\">\n          @for (player of homePlayers(); track player.id) {\n            @if (player.fieldX !== undefined && player.fieldY !== undefined) {\n              <lib-soccer-board-player\n                [player]=\"player\"\n                [size]=\"PlayerSize.Small\"\n                [style.position]=\"'absolute'\"\n                [style.left.%]=\"getPlayerPosition(player).left\"\n                [style.top.%]=\"getPlayerPosition(player).top\"\n                [style.transform]=\"'translate(-50%, -50%)'\"\n                (dragEnd)=\"onPlayerDragEnd($event)\"\n                (removeFromField)=\"onPlayerRemoveFromField($event)\"\n                (playerClicked)=\"onPlayerClick($event)\"\n              />\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%}*{box-sizing:border-box}.soccer-board-wrapper{display:flex;width:100%;height:100%;gap:1.5rem}.layout-players-left{flex-direction:row}.layout-players-left .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-left .soccer-board-container{flex:1;min-width:0}.layout-players-right{flex-direction:row-reverse}.layout-players-right .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-right .soccer-board-container{flex:1;min-width:0}.layout-players-top{flex-direction:column}.layout-players-top .players-sidebar{width:100%;max-height:300px}.layout-players-top .soccer-board-container{flex:1;min-height:0}.layout-players-bottom{flex-direction:column-reverse}.layout-players-bottom .players-sidebar{width:100%;max-height:300px}.layout-players-bottom .soccer-board-container{flex:1;min-height:0}.layout-no-sidebar .soccer-board-container{width:100%;height:100%}.players-sidebar{display:flex;flex-direction:column;background:transparent;padding:0;overflow-y:auto}.players-grid{display:grid;gap:.5rem;align-content:start}.soccer-board-container{width:100%;display:flex;justify-content:center;align-items:center;padding:var(--soccer-board-padding, 0);max-width:var(--soccer-board-max-width, none);width:var(--soccer-board-width, 100%);aspect-ratio:105/68}.field-container{display:flex;flex-direction:column;gap:0;width:100%;min-width:300px;height:auto}.field-container.landscape{flex-direction:row}.field-container.landscape .field-half{width:50%;aspect-ratio:52.5/68;background:repeating-linear-gradient(90deg,#2d5016 0px 10px,#3a6b1f 10px 20px)}.field-container.landscape .field-half.home{border-radius:0 10px 10px 0;box-shadow:10px 0 30px #0000004d}.field-container.landscape .field-half.away{border-radius:10px 0 0 10px;box-shadow:-5px 0 20px #0003}.field-container.landscape .field-half.home .center-border{inset:0 auto 0 0;width:3px;height:auto}.field-container.landscape .field-half.away .center-border{inset:0 0 0 auto;width:3px;height:auto}.field-container.landscape .field-half.home .half-circle{top:50%;left:0;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-left:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:0 999px 999px 0}.field-container.landscape .field-half.away .half-circle{inset:50% 0 auto auto;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-right:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:999px 0 0 999px}.field-container.landscape .field-half.home .penalty-area{inset:50% 0 auto auto;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .penalty-area{inset:50% auto auto 0;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-container.landscape .field-half.home .goal-area{inset:50% 0 auto auto;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .goal-area{inset:50% auto auto 0;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-half{position:relative;width:100%;aspect-ratio:68/52.5;background:repeating-linear-gradient(0deg,#2d5016 0px 10px,#3a6b1f 10px 20px);overflow:hidden}.field-half.home{border-radius:0 0 10px 10px;box-shadow:0 10px 30px #0000004d}.field-half.away{border-radius:10px 10px 0 0;box-shadow:0 -5px 20px #0003}.field-half.hidden{display:none}.field-lines{position:absolute;inset:0;pointer-events:none}.field-half.home .center-border{position:absolute;background:#fffc;z-index:10;top:0;left:0;right:0;height:3px}.field-half.away .center-border{position:absolute;background:#fffc;z-index:10;bottom:0;left:0;right:0;height:3px}.field-half.home .half-circle{position:absolute;z-index:5;top:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-top:none;border-radius:0 0 999px 999px;background:transparent}.field-half.away .half-circle{position:absolute;z-index:5;bottom:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-bottom:none;border-radius:999px 999px 0 0;background:transparent}.field-half.home .penalty-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .penalty-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-top:none}.field-half.home .goal-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .goal-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-top:none}.position-zones{position:absolute;inset:0;pointer-events:none;z-index:15}.position-zones.hidden{display:none}.position-zone{position:absolute;border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);opacity:.85;transition:all .3s ease}.position-zone:hover{opacity:1;z-index:100;transform:scale(1.05)}.players-container{position:absolute;inset:0;pointer-events:none;z-index:20}.players-container>*{pointer-events:auto}\n"] }]
+            args: [{ selector: 'fuzo-soccer-board', standalone: true, imports: [SoccerBoardPlayerComponent], template: "<div class=\"soccer-board-wrapper\" [class]=\"layoutClasses()\">\n  <!-- Players Sidebar -->\n  @if (showPlayersSidebar()) {\n    <div class=\"players-sidebar\">\n      <div\n        class=\"players-grid\"\n        [style.grid-template-columns]=\"playersGridColumns()\"\n      >\n        @for (player of availablePlayers(); track player.id) {\n          <lib-soccer-board-player\n            [player]=\"player\"\n            [size]=\"PlayerSize.Medium\"\n            (dragStart)=\"onPlayerDragStart($event)\"\n            (dragEnd)=\"onPlayerDragEnd($event)\"\n            (playerClicked)=\"onPlayerClick($event)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Soccer Board Container -->\n  <div #soccerBoardContainer class=\"soccer-board-container\">\n    <div\n      #fieldContainer\n      class=\"field-container\"\n      [class.landscape]=\"isLandscape()\"\n    >\n      <!-- AWAY half -->\n      <div #awayHalf class=\"field-half away\" [class.hidden]=\"!showAway()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of awayZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-away\">\n          @for (player of awayPlayers(); track player.id) {\n            <lib-soccer-board-player\n              [player]=\"player\"\n              [size]=\"PlayerSize.Small\"\n              [positionLeft]=\"getPlayerPosition(player).left\"\n              [positionTop]=\"getPlayerPosition(player).top\"\n              (dragStart)=\"onPlayerDragStart($event)\"\n              (dragEnd)=\"onPlayerDragEnd($event)\"\n              (removeFromField)=\"onPlayerRemoveFromField($event)\"\n              (playerClicked)=\"onPlayerClick($event)\"\n            />\n          }\n        </div>\n      </div>\n\n      <!-- HOME half -->\n      <div #homeHalf class=\"field-half home\" [class.hidden]=\"!showHome()\">\n        <div class=\"field-lines\">\n          <div class=\"center-border\"></div>\n          <div class=\"half-circle\"></div>\n          <div class=\"penalty-area\"></div>\n          <div class=\"goal-area\"></div>\n        </div>\n\n        <!-- Position zones -->\n        @if (showPositions()) {\n          <div class=\"position-zones\">\n            @for (\n              zone of homeZones();\n              track zone.id + zone.coords.x + zone.coords.y\n            ) {\n              <div\n                class=\"position-zone\"\n                [style.left.%]=\"zone.coords.x\"\n                [style.top.%]=\"zone.coords.y\"\n                [style.width.%]=\"zone.coords.width\"\n                [style.height.%]=\"zone.coords.height\"\n                [style.background]=\"zone.color\"\n              >\n                {{ zone.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Players container -->\n        <div class=\"players-container\" id=\"players-home\">\n          @for (player of homePlayers(); track player.id) {\n            <lib-soccer-board-player\n              [player]=\"player\"\n              [size]=\"PlayerSize.Small\"\n              [positionLeft]=\"getPlayerPosition(player).left\"\n              [positionTop]=\"getPlayerPosition(player).top\"\n              (dragStart)=\"onPlayerDragStart($event)\"\n              (dragEnd)=\"onPlayerDragEnd($event)\"\n              (removeFromField)=\"onPlayerRemoveFromField($event)\"\n              (playerClicked)=\"onPlayerClick($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%}*{box-sizing:border-box}.soccer-board-wrapper{display:flex;width:100%;height:100%;gap:1.5rem}.layout-players-left{flex-direction:row}.layout-players-left .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-left .soccer-board-container{flex:1;min-width:0}.layout-players-right{flex-direction:row-reverse}.layout-players-right .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-right .soccer-board-container{flex:1;min-width:0}.layout-players-top{flex-direction:column}.layout-players-top .players-sidebar{width:100%;max-height:300px}.layout-players-top .soccer-board-container{flex:1;min-height:0}.layout-players-bottom{flex-direction:column-reverse}.layout-players-bottom .players-sidebar{width:100%;max-height:300px}.layout-players-bottom .soccer-board-container{flex:1;min-height:0}.layout-no-sidebar .soccer-board-container{width:100%;height:100%}.players-sidebar{display:flex;flex-direction:column;background:transparent;padding:0;overflow-y:auto}.players-grid{display:grid;gap:.5rem;align-content:start}.soccer-board-container{width:100%;display:flex;justify-content:center;align-items:center;padding:var(--soccer-board-padding, 0);max-width:var(--soccer-board-max-width, none);width:var(--soccer-board-width, 100%);aspect-ratio:105/68}.field-container{display:flex;flex-direction:column;gap:0;width:100%;min-width:300px;height:auto}.field-container.landscape{flex-direction:row}.field-container.landscape .field-half{width:50%;aspect-ratio:52.5/68;background:repeating-linear-gradient(90deg,#2d5016 0px 10px,#3a6b1f 10px 20px)}.field-container.landscape .field-half.home{border-radius:0 10px 10px 0;box-shadow:10px 0 30px #0000004d}.field-container.landscape .field-half.away{border-radius:10px 0 0 10px;box-shadow:-5px 0 20px #0003}.field-container.landscape .field-half.home .center-border{inset:0 auto 0 0;width:3px;height:auto}.field-container.landscape .field-half.away .center-border{inset:0 0 0 auto;width:3px;height:auto}.field-container.landscape .field-half.home .half-circle{top:50%;left:0;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-left:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:0 999px 999px 0}.field-container.landscape .field-half.away .half-circle{inset:50% 0 auto auto;width:17.4%;height:26.9%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.5);border-right:none;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);border-radius:999px 0 0 999px}.field-container.landscape .field-half.home .penalty-area{inset:50% 0 auto auto;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .penalty-area{inset:50% auto auto 0;transform:translateY(-50%);height:59.3%;width:31.4%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-container.landscape .field-half.home .goal-area{inset:50% 0 auto auto;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-right:none}.field-container.landscape .field-half.away .goal-area{inset:50% auto auto 0;transform:translateY(-50%);height:26.9%;width:10.5%;border:2px solid rgba(255,255,255,.5);border-left:none}.field-half{position:relative;width:100%;aspect-ratio:68/52.5;background:repeating-linear-gradient(0deg,#2d5016 0px 10px,#3a6b1f 10px 20px);overflow:hidden}.field-half.home{border-radius:0 0 10px 10px;box-shadow:0 10px 30px #0000004d}.field-half.away{border-radius:10px 10px 0 0;box-shadow:0 -5px 20px #0003}.field-half.hidden{display:none}.field-lines{position:absolute;inset:0;pointer-events:none}.field-half.home .center-border{position:absolute;background:#fffc;z-index:10;top:0;left:0;right:0;height:3px}.field-half.away .center-border{position:absolute;background:#fffc;z-index:10;bottom:0;left:0;right:0;height:3px}.field-half.home .half-circle{position:absolute;z-index:5;top:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-top:none;border-radius:0 0 999px 999px;background:transparent}.field-half.away .half-circle{position:absolute;z-index:5;bottom:0;left:50%;width:26.9%;height:17.4%;transform:translate(-50%);border:2px solid rgba(255,255,255,.5);border-bottom:none;border-radius:999px 999px 0 0;background:transparent}.field-half.home .penalty-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .penalty-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:59.3%;height:31.4%;border:2px solid rgba(255,255,255,.5);border-top:none}.field-half.home .goal-area{position:absolute;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-bottom:none}.field-half.away .goal-area{position:absolute;z-index:5;top:0;left:50%;transform:translate(-50%);width:26.9%;height:10.5%;border:2px solid rgba(255,255,255,.5);border-top:none}.position-zones{position:absolute;inset:0;pointer-events:none;z-index:15}.position-zones.hidden{display:none}.position-zone{position:absolute;border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);opacity:.85;transition:all .3s ease}.position-zone:hover{opacity:1;z-index:100;transform:scale(1.05)}.players-container{position:absolute;inset:0;pointer-events:none;z-index:20}.players-container>*{pointer-events:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], teamSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "teamSide", required: false }] }], showPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPositions", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], players: [{ type: i0.Input, args: [{ isSignal: true, alias: "players", required: false }] }], showPlayersSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlayersSidebar", required: false }] }], playersPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "playersPosition", required: false }] }], playersColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "playersColumns", required: false }] }], maxPlayersPerSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPlayersPerSide", required: false }] }], fieldContainer: [{ type: i0.ViewChild, args: ['fieldContainer', { isSignal: true }] }], homeHalf: [{ type: i0.ViewChild, args: ['homeHalf', { isSignal: true }] }], awayHalf: [{ type: i0.ViewChild, args: ['awayHalf', { isSignal: true }] }], soccerBoardContainer: [{ type: i0.ViewChild, args: ['soccerBoardContainer', { isSignal: true }] }], playerPositioned: [{ type: i0.Output, args: ["playerPositioned"] }], playerRemovedFromField: [{ type: i0.Output, args: ["playerRemovedFromField"] }], imageExported: [{ type: i0.Output, args: ["imageExported"] }], playerClicked: [{ type: i0.Output, args: ["playerClicked"] }], hostWidthStyle: [{
                 type: HostBinding,
                 args: ['style.width']
             }] } });
 
-var PlayersPosition;
-(function (PlayersPosition) {
-    PlayersPosition["Left"] = "left";
-    PlayersPosition["Right"] = "right";
-    PlayersPosition["Top"] = "top";
-    PlayersPosition["Bottom"] = "bottom";
-})(PlayersPosition || (PlayersPosition = {}));
-class SoccerBoardLayoutComponent {
-    // Expose enums to template
-    PlayersPosition = PlayersPosition;
-    PlayerSize = SoccerBoardPlayerSize;
-    // Inputs
-    players = input.required(...(ngDevMode ? [{ debugName: "players" }] : []));
-    orientation = input(SoccerBoardOrientation.Portrait, ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-    teamSide = input(null, ...(ngDevMode ? [{ debugName: "teamSide" }] : []));
-    showPositions = input(false, ...(ngDevMode ? [{ debugName: "showPositions" }] : []));
-    fit = input(null, ...(ngDevMode ? [{ debugName: "fit" }] : []));
-    playersPosition = input(PlayersPosition.Left, ...(ngDevMode ? [{ debugName: "playersPosition" }] : []));
-    playersColumns = input(2, ...(ngDevMode ? [{ debugName: "playersColumns" }] : [])); // Number of columns for players grid
-    // ViewChild reference to soccer board
-    soccerBoard = viewChild.required('soccerBoard');
-    // Outputs
-    playerPositioned = output();
-    playerRemovedFromField = output();
-    // Computed: players available (not on field)
-    availablePlayers = computed(() => {
-        return this.players().filter((player) => player.fieldX === undefined || player.fieldY === undefined);
-    }, ...(ngDevMode ? [{ debugName: "availablePlayers" }] : []));
-    // Computed: layout classes based on players position
-    layoutClasses = computed(() => {
-        const position = this.playersPosition();
-        switch (position) {
-            case PlayersPosition.Right:
-                return 'layout-players-right';
-            case PlayersPosition.Top:
-                return 'layout-players-top';
-            case PlayersPosition.Bottom:
-                return 'layout-players-bottom';
-            default:
-                return 'layout-players-left';
-        }
-    }, ...(ngDevMode ? [{ debugName: "layoutClasses" }] : []));
-    // Computed: players grid columns
-    playersGridColumns = computed(() => {
-        return `repeat(${this.playersColumns()}, minmax(0, 1fr))`;
-    }, ...(ngDevMode ? [{ debugName: "playersGridColumns" }] : []));
-    onPlayerDragEnd(event) {
-        const board = this.soccerBoard();
-        if (board) {
-            board.handlePlayerDrop(event);
-        }
-    }
-    onPlayerPositioned(event) {
-        this.playerPositioned.emit(event);
-    }
-    onPlayerRemoveFromField(event) {
-        this.playerRemovedFromField.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SoccerBoardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SoccerBoardLayoutComponent, isStandalone: true, selector: "lib-soccer-board-layout", inputs: { players: { classPropertyName: "players", publicName: "players", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, teamSide: { classPropertyName: "teamSide", publicName: "teamSide", isSignal: true, isRequired: false, transformFunction: null }, showPositions: { classPropertyName: "showPositions", publicName: "showPositions", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, playersPosition: { classPropertyName: "playersPosition", publicName: "playersPosition", isSignal: true, isRequired: false, transformFunction: null }, playersColumns: { classPropertyName: "playersColumns", publicName: "playersColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playerPositioned: "playerPositioned", playerRemovedFromField: "playerRemovedFromField" }, viewQueries: [{ propertyName: "soccerBoard", first: true, predicate: ["soccerBoard"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"soccer-board-layout\" [class]=\"layoutClasses()\">\n  <!-- Players Sidebar -->\n  <div class=\"players-sidebar\">\n    <div class=\"players-header\">\n      <h3 class=\"players-title\">Available Players</h3>\n      <span class=\"players-count\">{{ availablePlayers().length }}</span>\n    </div>\n    <div class=\"players-grid\" [style.grid-template-columns]=\"playersGridColumns()\">\n      @for (player of availablePlayers(); track player.id) {\n        <lib-soccer-board-player\n          [player]=\"player\"\n          [size]=\"PlayerSize.Medium\"\n          (dragEnd)=\"onPlayerDragEnd($event)\"\n        />\n      }\n    </div>\n  </div>\n\n  <!-- Soccer Board Area -->\n  <div class=\"board-area\">\n    <fuzo-soccer-board\n      #soccerBoard\n      [orientation]=\"orientation()\"\n      [teamSide]=\"teamSide()\"\n      [showPositions]=\"showPositions()\"\n      [fit]=\"fit()\"\n      [players]=\"players()\"\n      (playerPositioned)=\"onPlayerPositioned($event)\"\n      (playerRemovedFromField)=\"onPlayerRemoveFromField($event)\"\n    />\n  </div>\n</div>\n", styles: [".soccer-board-layout{display:flex;width:100%;height:100%;gap:1.5rem}.layout-players-left{flex-direction:row}.layout-players-left .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-left .board-area{flex:1;min-width:0}.layout-players-right{flex-direction:row-reverse}.layout-players-right .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-right .board-area{flex:1;min-width:0}.layout-players-top{flex-direction:column}.layout-players-top .players-sidebar{width:100%;max-height:300px}.layout-players-top .board-area{flex:1;min-height:0}.layout-players-bottom{flex-direction:column-reverse}.layout-players-bottom .players-sidebar{width:100%;max-height:300px}.layout-players-bottom .board-area{flex:1;min-height:0}.players-sidebar{display:flex;flex-direction:column;background:#f5f5f5;border-radius:8px;padding:1rem;overflow-y:auto;box-shadow:0 2px 8px #0000001a}.players-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #e5e5e5}.players-title{font-size:1.125rem;font-weight:600;color:#333;margin:0}.players-count{font-size:.875rem;color:#666;background:#e5e5e5;padding:.25rem .5rem;border-radius:12px;font-weight:500}.players-grid{display:grid;gap:1rem;align-content:start}\n"], dependencies: [{ kind: "component", type: SoccerBoardComponent, selector: "fuzo-soccer-board", inputs: ["orientation", "teamSide", "showPositions", "fit", "players", "showPlayersSidebar", "playersPosition", "playersColumns", "maxPlayersPerSide"], outputs: ["playerPositioned", "playerRemovedFromField", "imageExported", "playerClicked"] }, { kind: "component", type: SoccerBoardPlayerComponent, selector: "lib-soccer-board-player", inputs: ["player", "size"], outputs: ["dragStart", "dragging", "dragEnd", "removeFromField", "playerClicked"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SoccerBoardLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-soccer-board-layout', standalone: true, imports: [SoccerBoardComponent, SoccerBoardPlayerComponent], template: "<div class=\"soccer-board-layout\" [class]=\"layoutClasses()\">\n  <!-- Players Sidebar -->\n  <div class=\"players-sidebar\">\n    <div class=\"players-header\">\n      <h3 class=\"players-title\">Available Players</h3>\n      <span class=\"players-count\">{{ availablePlayers().length }}</span>\n    </div>\n    <div class=\"players-grid\" [style.grid-template-columns]=\"playersGridColumns()\">\n      @for (player of availablePlayers(); track player.id) {\n        <lib-soccer-board-player\n          [player]=\"player\"\n          [size]=\"PlayerSize.Medium\"\n          (dragEnd)=\"onPlayerDragEnd($event)\"\n        />\n      }\n    </div>\n  </div>\n\n  <!-- Soccer Board Area -->\n  <div class=\"board-area\">\n    <fuzo-soccer-board\n      #soccerBoard\n      [orientation]=\"orientation()\"\n      [teamSide]=\"teamSide()\"\n      [showPositions]=\"showPositions()\"\n      [fit]=\"fit()\"\n      [players]=\"players()\"\n      (playerPositioned)=\"onPlayerPositioned($event)\"\n      (playerRemovedFromField)=\"onPlayerRemoveFromField($event)\"\n    />\n  </div>\n</div>\n", styles: [".soccer-board-layout{display:flex;width:100%;height:100%;gap:1.5rem}.layout-players-left{flex-direction:row}.layout-players-left .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-left .board-area{flex:1;min-width:0}.layout-players-right{flex-direction:row-reverse}.layout-players-right .players-sidebar{width:300px;min-width:300px;flex-shrink:0}.layout-players-right .board-area{flex:1;min-width:0}.layout-players-top{flex-direction:column}.layout-players-top .players-sidebar{width:100%;max-height:300px}.layout-players-top .board-area{flex:1;min-height:0}.layout-players-bottom{flex-direction:column-reverse}.layout-players-bottom .players-sidebar{width:100%;max-height:300px}.layout-players-bottom .board-area{flex:1;min-height:0}.players-sidebar{display:flex;flex-direction:column;background:#f5f5f5;border-radius:8px;padding:1rem;overflow-y:auto;box-shadow:0 2px 8px #0000001a}.players-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #e5e5e5}.players-title{font-size:1.125rem;font-weight:600;color:#333;margin:0}.players-count{font-size:.875rem;color:#666;background:#e5e5e5;padding:.25rem .5rem;border-radius:12px;font-weight:500}.players-grid{display:grid;gap:1rem;align-content:start}\n"] }]
-        }], propDecorators: { players: [{ type: i0.Input, args: [{ isSignal: true, alias: "players", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], teamSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "teamSide", required: false }] }], showPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPositions", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], playersPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "playersPosition", required: false }] }], playersColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "playersColumns", required: false }] }], soccerBoard: [{ type: i0.ViewChild, args: ['soccerBoard', { isSignal: true }] }], playerPositioned: [{ type: i0.Output, args: ["playerPositioned"] }], playerRemovedFromField: [{ type: i0.Output, args: ["playerRemovedFromField"] }] } });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { PlayersPosition, SoccerBoardComponent, SoccerBoardFieldConstants, SoccerBoardFitMode, SoccerBoardLayoutComponent, SoccerBoardOrientation, SoccerBoardPlayerComponent, SoccerBoardPlayerSize, SoccerBoardTeamSide };
+export { SoccerBoardComponent, SoccerBoardFieldConstants, SoccerBoardFitMode, SoccerBoardOrientation, SoccerBoardPlayerComponent, SoccerBoardPlayerSize, SoccerBoardTeamSide };
 //# sourceMappingURL=fuzo-soccer-board.mjs.map