@fuzo/soccer-board 0.1.0-alpha.2

package/fesm2022/fuzo-soccer-board.mjs

@@ -0,0 +1,1021 @@
+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';
+
+/**
+ * Soccer Board Field dimension constants
+ * Based on FIFA regulations: 105m x 68m
+ */
+const SoccerBoardFieldConstants = {
+    /**
+     * Field aspect ratio (width / height)
+     * FIFA standard: 105m / 68m ≈ 1.544
+     */
+    RATIO: 105 / 68,
+};
+
+/**
+ * Soccer Board Fit Mode types for responsive field sizing
+ */
+var SoccerBoardFitMode;
+(function (SoccerBoardFitMode) {
+    SoccerBoardFitMode["Contain"] = "contain";
+})(SoccerBoardFitMode || (SoccerBoardFitMode = {}));
+
+/**
+ * Soccer Board Field Orientation types
+ */
+var SoccerBoardOrientation;
+(function (SoccerBoardOrientation) {
+    SoccerBoardOrientation["Portrait"] = "portrait";
+    SoccerBoardOrientation["Landscape"] = "landscape";
+})(SoccerBoardOrientation || (SoccerBoardOrientation = {}));
+
+/**
+ * Soccer Board Player Card Size types
+ */
+var SoccerBoardPlayerSize;
+(function (SoccerBoardPlayerSize) {
+    SoccerBoardPlayerSize["Small"] = "small";
+    SoccerBoardPlayerSize["Medium"] = "medium";
+    SoccerBoardPlayerSize["Large"] = "large";
+})(SoccerBoardPlayerSize || (SoccerBoardPlayerSize = {}));
+
+/**
+ * Soccer Board Team Side types
+ */
+var SoccerBoardTeamSide;
+(function (SoccerBoardTeamSide) {
+    SoccerBoardTeamSide["Home"] = "home";
+    SoccerBoardTeamSide["Away"] = "away";
+})(SoccerBoardTeamSide || (SoccerBoardTeamSide = {}));
+
+/**
+ * Get tactical position zones data
+ * All tactical positions with coordinates for each orientation
+ * Portrait: x=left-right, y=center(0)-goal(100)
+ * Landscape: x=center(0)-goal(100), y=top(0)-bottom(100)
+ */
+function getPositionsData() {
+    // Colors by position type
+    const colors = {
+        goalkeeper: 'rgba(255, 200, 0, 0.5)', // Yellow
+        defense: 'rgba(70, 130, 255, 0.5)', // Blue
+        defensiveMid: 'rgba(100, 180, 255, 0.5)', // Light blue
+        midfield: 'rgba(50, 200, 100, 0.5)', // Green
+        attackingMid: 'rgba(150, 220, 100, 0.5)', // Light green
+        forward: 'rgba(255, 100, 100, 0.5)', // Red
+        striker: 'rgba(255, 50, 50, 0.5)', // Dark red
+    };
+    return [
+        // ============ DEFENSE ZONE ============
+        {
+            id: 'LB',
+            label: 'LB',
+            color: colors.defense,
+            portrait: { x: 0, y: 70, width: 20, height: 30 },
+            landscape: { x: 70, y: 0, width: 30, height: 20 },
+        },
+        {
+            id: 'CB',
+            label: 'CB',
+            color: colors.defense,
+            portrait: { x: 20, y: 70, width: 60, height: 19.5 },
+            landscape: { x: 70, y: 20, width: 19.5, height: 60 },
+        },
+        {
+            id: 'CB',
+            label: '',
+            color: colors.defense,
+            portrait: { x: 20, y: 89.5, width: 16.55, height: 10.5 },
+            landscape: { x: 89.5, y: 20, width: 10.5, height: 16.55 },
+        },
+        {
+            id: 'GK',
+            label: 'GK',
+            color: colors.goalkeeper,
+            portrait: { x: 36.55, y: 89.5, width: 26.9, height: 10.5 },
+            landscape: { x: 89.5, y: 36.55, width: 10.5, height: 26.9 },
+        },
+        {
+            id: 'CB',
+            label: '',
+            color: colors.defense,
+            portrait: { x: 63.45, y: 89.5, width: 16.55, height: 10.5 },
+            landscape: { x: 89.5, y: 63.45, width: 10.5, height: 16.55 },
+        },
+        {
+            id: 'RB',
+            label: 'RB',
+            color: colors.defense,
+            portrait: { x: 80, y: 70, width: 20, height: 30 },
+            landscape: { x: 70, y: 80, width: 30, height: 20 },
+        },
+        // ============ DEFENSIVE MIDFIELD ZONE ============
+        {
+            id: 'LWB',
+            label: 'LWB',
+            color: colors.defensiveMid,
+            portrait: { x: 0, y: 55, width: 25, height: 15 },
+            landscape: { x: 55, y: 0, width: 15, height: 25 },
+        },
+        {
+            id: 'CDM',
+            label: 'CDM',
+            color: colors.defensiveMid,
+            portrait: { x: 25, y: 55, width: 50, height: 15 },
+            landscape: { x: 55, y: 25, width: 15, height: 50 },
+        },
+        {
+            id: 'RWB',
+            label: 'RWB',
+            color: colors.defensiveMid,
+            portrait: { x: 75, y: 55, width: 25, height: 15 },
+            landscape: { x: 55, y: 75, width: 15, height: 25 },
+        },
+        // ============ CENTRAL MIDFIELD ZONE ============
+        {
+            id: 'LM',
+            label: 'LM',
+            color: colors.midfield,
+            portrait: { x: 0, y: 40, width: 25, height: 15 },
+            landscape: { x: 40, y: 0, width: 15, height: 25 },
+        },
+        {
+            id: 'CM',
+            label: 'CM',
+            color: colors.midfield,
+            portrait: { x: 25, y: 40, width: 50, height: 15 },
+            landscape: { x: 40, y: 25, width: 15, height: 50 },
+        },
+        {
+            id: 'RM',
+            label: 'RM',
+            color: colors.midfield,
+            portrait: { x: 75, y: 40, width: 25, height: 15 },
+            landscape: { x: 40, y: 75, width: 15, height: 25 },
+        },
+        // ============ ATTACKING ZONE ============
+        {
+            id: 'LW',
+            label: 'LW',
+            color: colors.forward,
+            portrait: { x: 0, y: 0, width: 25, height: 40 },
+            landscape: { x: 0, y: 0, width: 40, height: 25 },
+        },
+        {
+            id: 'CAM',
+            label: 'CAM',
+            color: colors.attackingMid,
+            portrait: { x: 25, y: 25, width: 50, height: 15 },
+            landscape: { x: 25, y: 25, width: 15, height: 50 },
+        },
+        {
+            id: 'RW',
+            label: 'RW',
+            color: colors.forward,
+            portrait: { x: 75, y: 0, width: 25, height: 40 },
+            landscape: { x: 0, y: 75, width: 40, height: 25 },
+        },
+        {
+            id: 'CF',
+            label: 'CF',
+            color: colors.forward,
+            portrait: { x: 25, y: 10, width: 50, height: 15 },
+            landscape: { x: 10, y: 25, width: 15, height: 50 },
+        },
+        {
+            id: 'ST',
+            label: 'ST',
+            color: colors.striker,
+            portrait: { x: 25, y: 0, width: 50, height: 10 },
+            landscape: { x: 0, y: 25, width: 10, height: 50 },
+        },
+    ];
+}
+
+class SoccerBoardPlayerComponent {
+    // Host element reference
+    hostElement = inject((ElementRef));
+    // Inputs using signals
+    player = input.required(...(ngDevMode ? [{ debugName: "player" }] : []));
+    size = input(SoccerBoardPlayerSize.Medium, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    // Outputs
+    dragStart = output();
+    dragging = output();
+    dragEnd = output();
+    removeFromField = output();
+    playerClicked = output();
+    // Drag state signals
+    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" }] : []));
+    // Computed values
+    playerPhoto = computed(() => {
+        const photo = this.player()?.photo;
+        return photo || null;
+    }, ...(ngDevMode ? [{ debugName: "playerPhoto" }] : []));
+    playerName = computed(() => this.player()?.name || '', ...(ngDevMode ? [{ debugName: "playerName" }] : []));
+    playerNumber = computed(() => this.player()?.number, ...(ngDevMode ? [{ debugName: "playerNumber" }] : []));
+    // Determine if player is on the field (has fieldX and fieldY coordinates)
+    isOnField = computed(() => {
+        const player = this.player();
+        return player?.fieldX !== undefined && player?.fieldY !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "isOnField" }] : []));
+    // Show fieldPosition if on field, otherwise show preferredPosition
+    playerPosition = computed(() => {
+        const player = this.player();
+        if (this.isOnField() && player?.fieldPosition) {
+            return player.fieldPosition;
+        }
+        return player?.preferredPosition;
+    }, ...(ngDevMode ? [{ debugName: "playerPosition" }] : []));
+    // Size classes
+    sizeClasses = computed(() => {
+        const size = this.size();
+        switch (size) {
+            case SoccerBoardPlayerSize.Small:
+                return 'w-12 h-12';
+            case SoccerBoardPlayerSize.Large:
+                return 'w-20 h-20';
+            default:
+                return 'w-16 h-16';
+        }
+    }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
+    constructor() {
+        // Effect to apply drag styles
+        effect(() => {
+            const styles = this.dragStyles();
+            const element = this.hostElement.nativeElement;
+            element.style.opacity = styles.opacity;
+            element.style.cursor = styles.cursor;
+            element.style.zIndex = styles.zIndex;
+        });
+    }
+    onMouseDown(event) {
+        event.preventDefault();
+        this.startDrag(event.clientX, event.clientY);
+    }
+    onTouchStart(event) {
+        if (event.touches.length !== 1)
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        this.startDrag(touch.clientX, touch.clientY);
+    }
+    startDrag(clientX, clientY) {
+        console.log('[Player] Start drag');
+        const element = this.hostElement.nativeElement;
+        const rect = element.getBoundingClientRect();
+        this.dragOffsetX.set(clientX - rect.left);
+        this.dragOffsetY.set(clientY - rect.top);
+        this.isDragging.set(true);
+        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.isDragging())
+            return;
+        event.preventDefault();
+        this.handleDrag(event.clientX, event.clientY);
+    }
+    onTouchMove(event) {
+        if (!this.isDragging() || event.touches.length !== 1)
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        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';
+        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,
+            clientX,
+            clientY,
+            offsetX,
+            offsetY,
+        });
+    }
+    onMouseUp(event) {
+        if (!this.isDragging())
+            return;
+        this.endDrag(event.clientX, event.clientY);
+    }
+    onTouchEnd(event) {
+        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 dragEndEvent = {
+            playerId: player.id,
+            clientX,
+            clientY,
+            offsetX: this.dragOffsetX(),
+            offsetY: this.dragOffsetY(),
+        };
+        console.log('[Player] Emitting dragEnd', dragEndEvent);
+        this.dragEnd.emit(dragEndEvent);
+    }
+    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()) {
+            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"] });
+}
+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: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onTouchMove: [{
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
+            }] } });
+
+/**
+ * Soccer Board Component
+ * Renders a FIFA-compliant soccer field with two halves (HOME and AWAY)
+ * Supports portrait and landscape orientations
+ */
+class SoccerBoardComponent {
+    // Host element reference
+    hostElement = inject((ElementRef));
+    platformId = inject(PLATFORM_ID);
+    // Expose SoccerBoardPlayerSize to template
+    PlayerSize = SoccerBoardPlayerSize;
+    // Inputs using signals
+    orientation = input(SoccerBoardOrientation.Landscape, ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    teamSide = input(null, ...(ngDevMode ? [{ debugName: "teamSide" }] : []));
+    showPositions = input(false, ...(ngDevMode ? [{ debugName: "showPositions" }] : []));
+    fit = input(null, ...(ngDevMode ? [{ debugName: "fit" }] : []));
+    players = input([], ...(ngDevMode ? [{ debugName: "players" }] : []));
+    // Layout configuration
+    showPlayersSidebar = input(true, ...(ngDevMode ? [{ debugName: "showPlayersSidebar" }] : []));
+    playersPosition = input('left', ...(ngDevMode ? [{ debugName: "playersPosition" }] : []));
+    playersColumns = input(2, ...(ngDevMode ? [{ debugName: "playersColumns" }] : []));
+    // Maximum players per side (default: 7)
+    maxPlayersPerSide = input(7, ...(ngDevMode ? [{ debugName: "maxPlayersPerSide" }] : []));
+    // ViewChild references
+    fieldContainer = viewChild('fieldContainer', ...(ngDevMode ? [{ debugName: "fieldContainer" }] : []));
+    homeHalf = viewChild('homeHalf', ...(ngDevMode ? [{ debugName: "homeHalf" }] : []));
+    awayHalf = viewChild('awayHalf', ...(ngDevMode ? [{ debugName: "awayHalf" }] : []));
+    soccerBoardContainer = viewChild('soccerBoardContainer', ...(ngDevMode ? [{ debugName: "soccerBoardContainer" }] : []));
+    // Outputs
+    playerPositioned = output();
+    playerRemovedFromField = output();
+    imageExported = output();
+    playerClicked = output();
+    // Method to handle player drag end (called from template)
+    onPlayerDragEnd(event) {
+        this.handlePlayerDrop(event);
+    }
+    // Method to handle player click (called from template)
+    onPlayerClick(event) {
+        console.log('[SoccerBoard] Player clicked', event.playerId);
+        this.playerClicked.emit(event);
+    }
+    // Method to handle player remove from field (called from template)
+    onPlayerRemoveFromField(event) {
+        // Emit event to parent to handle removal
+        console.log('[SoccerBoard] Player remove requested', event.playerId);
+        this.playerRemovedFromField.emit({ playerId: event.playerId });
+    }
+    // Reactive width signal for host element
+    hostWidth = signal('', ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
+    // Host binding for width (reactive)
+    get hostWidthStyle() {
+        return this.hostWidth();
+    }
+    // Computed values
+    isLandscape = computed(() => this.orientation() === SoccerBoardOrientation.Landscape, ...(ngDevMode ? [{ debugName: "isLandscape" }] : []));
+    showHome = computed(() => {
+        const side = this.teamSide();
+        return side === null || side === SoccerBoardTeamSide.Home;
+    }, ...(ngDevMode ? [{ debugName: "showHome" }] : []));
+    showAway = computed(() => {
+        const side = this.teamSide();
+        return side === null || side === SoccerBoardTeamSide.Away;
+    }, ...(ngDevMode ? [{ debugName: "showAway" }] : []));
+    // Computed position zones
+    homeZones = computed(() => {
+        if (!this.showPositions()) {
+            return [];
+        }
+        const positionsData = getPositionsData();
+        const orientation = this.orientation();
+        return positionsData.map((pos) => ({
+            ...pos,
+            coords: pos[orientation],
+        }));
+    }, ...(ngDevMode ? [{ debugName: "homeZones" }] : []));
+    awayZones = computed(() => {
+        if (!this.showPositions()) {
+            return [];
+        }
+        const positionsData = getPositionsData();
+        const orientation = this.orientation();
+        return positionsData.map((pos) => {
+            const coords = pos[orientation];
+            let awayCoords;
+            if (orientation === SoccerBoardOrientation.Portrait) {
+                // Portrait: invert Y
+                awayCoords = {
+                    ...coords,
+                    y: 100 - coords.y - coords.height,
+                };
+            }
+            else {
+                // Landscape: invert X
+                awayCoords = {
+                    ...coords,
+                    x: 100 - coords.x - coords.width,
+                };
+            }
+            return {
+                ...pos,
+                coords: awayCoords,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "awayZones" }] : []));
+    // Computed players by side
+    homePlayers = computed(() => {
+        return this.players().filter((player) => player.side === SoccerBoardTeamSide.Home && player.fieldX !== undefined && player.fieldY !== undefined);
+    }, ...(ngDevMode ? [{ debugName: "homePlayers" }] : []));
+    awayPlayers = computed(() => {
+        return this.players().filter((player) => player.side === SoccerBoardTeamSide.Away && player.fieldX !== undefined && player.fieldY !== undefined);
+    }, ...(ngDevMode ? [{ debugName: "awayPlayers" }] : []));
+    // 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(() => {
+        if (!this.showPlayersSidebar()) {
+            return 'layout-no-sidebar';
+        }
+        const position = this.playersPosition();
+        switch (position) {
+            case 'right':
+                return 'layout-players-right';
+            case 'top':
+                return 'layout-players-top';
+            case '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" }] : []));
+    // Helper method to get visual position for a player (public for template)
+    getPlayerPosition(player) {
+        if (player.fieldX === undefined || player.fieldY === undefined || !player.side) {
+            return { left: 0, top: 0 };
+        }
+        return this.fieldToHalfCoordinates(player.fieldX, player.fieldY, player.side);
+    }
+    resizeObserver = null;
+    constructor() {
+        // Only run effects in browser (SSR protection)
+        if (isPlatformBrowser(this.platformId)) {
+            // Effect to update field size when fit or orientation changes
+            effect(() => {
+                this.fit();
+                this.orientation();
+                // Use setTimeout to ensure view is initialized
+                setTimeout(() => {
+                    this.setupResizeObserver();
+                    this.updateFieldSize();
+                }, 0);
+            });
+            // Effect to watch for --soccer-board-width CSS custom property changes
+            effect(() => {
+                // Trigger update when orientation changes (affects width calculation)
+                this.orientation();
+                if (this.fit() !== SoccerBoardFitMode.Contain) {
+                    this.updateFieldSizeFromCSS();
+                }
+            });
+        }
+    }
+    /**
+     * Handles player drag end event
+     * Called from parent component when a player is dropped
+     * @public
+     */
+    handlePlayerDrop(event) {
+        console.log('[SoccerBoard] handlePlayerDrop called', event);
+        const position = this.calculateFieldPosition(event.clientX, event.clientY);
+        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 {
+            console.warn('[SoccerBoard] Position is null - player not dropped on field');
+        }
+    }
+    /**
+     * Calculates field position from client coordinates
+     */
+    calculateFieldPosition(clientX, clientY) {
+        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;
+        // Check HOME half
+        const homeRect = homeHalfEl.getBoundingClientRect();
+        const isInHome = centerX >= homeRect.left &&
+            centerX <= homeRect.right &&
+            centerY >= homeRect.top &&
+            centerY <= homeRect.bottom;
+        // Check AWAY half
+        const awayRect = awayHalfEl.getBoundingClientRect();
+        const isInAway = centerX >= awayRect.left &&
+            centerX <= awayRect.right &&
+            centerY >= awayRect.top &&
+            centerY <= awayRect.bottom;
+        if (!isInHome && !isInAway) {
+            return null; // Not over the field
+        }
+        const side = isInHome ? SoccerBoardTeamSide.Home : SoccerBoardTeamSide.Away;
+        const halfRect = isInHome ? homeRect : awayRect;
+        // Calculate position within the half (0-100%)
+        const relativeX = ((centerX - halfRect.left) / halfRect.width) * 100;
+        const relativeY = ((centerY - halfRect.top) / halfRect.height) * 100;
+        // Clamp to 0-100%
+        const clampedX = Math.max(0, Math.min(100, relativeX));
+        const clampedY = Math.max(0, Math.min(100, relativeY));
+        // Convert to field coordinates (normalized)
+        const orientation = this.orientation();
+        let fieldX;
+        let fieldY;
+        if (orientation === SoccerBoardOrientation.Portrait) {
+            // Portrait: X is width, Y is length
+            fieldX = clampedX;
+            if (side === SoccerBoardTeamSide.Home) {
+                // HOME is bottom half (50-100% of field length)
+                fieldY = 50 + clampedY / 2;
+            }
+            else {
+                // AWAY is top half (0-50% of field length)
+                fieldY = clampedY / 2;
+            }
+        }
+        else {
+            // Landscape: X is length, Y is width
+            fieldY = clampedY; // Y is the width (top-bottom in visual space)
+            if (side === SoccerBoardTeamSide.Home) {
+                // HOME is right half (50-100% of field length)
+                fieldX = 50 + clampedX / 2;
+            }
+            else {
+                // AWAY is left half (0-50% of field length)
+                fieldX = clampedX / 2;
+            }
+        }
+        return { fieldX, fieldY, side };
+    }
+    /**
+     * Converts field coordinates to half coordinates
+     */
+    fieldToHalfCoordinates(fieldX, fieldY, side) {
+        const orientation = this.orientation();
+        let left;
+        let top;
+        if (orientation === SoccerBoardOrientation.Portrait) {
+            // Portrait mode
+            left = fieldX;
+            if (side === SoccerBoardTeamSide.Home) {
+                // HOME: fieldY 50-100% maps to top 0-100%
+                top = (fieldY - 50) * 2;
+            }
+            else {
+                // AWAY: fieldY 0-50% maps to top 0-100%
+                top = fieldY * 2;
+            }
+        }
+        else {
+            // Landscape mode
+            top = fieldY;
+            if (side === SoccerBoardTeamSide.Home) {
+                // HOME: fieldX 50-100% maps to left 0-100%
+                left = (fieldX - 50) * 2;
+            }
+            else {
+                // AWAY: fieldX 0-50% maps to left 0-100%
+                left = fieldX * 2;
+            }
+        }
+        return { left, top };
+    }
+    /**
+     * Detects tactical position based on field coordinates
+     */
+    detectTacticalPosition(fieldX, fieldY, side) {
+        // Convert field coordinates to half coordinates
+        const { left: halfX, top: halfY } = this.fieldToHalfCoordinates(fieldX, fieldY, side);
+        // Get position data (same as show-positions)
+        const positionsData = getPositionsData();
+        const orientation = this.orientation();
+        // Find which position zone contains this point
+        let detectedPosition = 'CM'; // Default fallback
+        let smallestArea = Infinity;
+        for (const pos of positionsData) {
+            let coords = pos[orientation];
+            // For AWAY, we need to invert coordinates (same logic as renderPositionZones)
+            if (side === SoccerBoardTeamSide.Away) {
+                if (orientation === SoccerBoardOrientation.Portrait) {
+                    // Portrait: invert Y
+                    coords = {
+                        ...coords,
+                        y: 100 - coords.y - coords.height,
+                    };
+                }
+                else {
+                    // Landscape: invert X
+                    coords = {
+                        ...coords,
+                        x: 100 - coords.x - coords.width,
+                    };
+                }
+            }
+            // Check if point is inside this zone
+            const isInside = halfX >= coords.x &&
+                halfX <= coords.x + coords.width &&
+                halfY >= coords.y &&
+                halfY <= coords.y + coords.height;
+            if (isInside) {
+                // If multiple zones overlap, prefer the smallest one (most specific)
+                const area = coords.width * coords.height;
+                if (area < smallestArea) {
+                    smallestArea = area;
+                    detectedPosition = pos.id;
+                }
+            }
+        }
+        return detectedPosition;
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // Initial setup
+        setTimeout(() => {
+            this.updateFieldSize();
+            this.setupResizeObserver();
+        }, 0);
+    }
+    ngOnDestroy() {
+        this.cleanupResizeObserver();
+    }
+    setupResizeObserver() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.cleanupResizeObserver();
+        if (this.fit() !== SoccerBoardFitMode.Contain) {
+            return;
+        }
+        // Observe the host element's parent (like in the original)
+        const parentElement = this.hostElement.nativeElement.parentElement;
+        if (!parentElement) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateFieldSize();
+        });
+        this.resizeObserver.observe(parentElement);
+    }
+    cleanupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    updateFieldSize() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const hostElement = this.hostElement.nativeElement;
+        // If fit="contain", calculate size based on parent container (like original)
+        if (this.fit() === SoccerBoardFitMode.Contain && hostElement.parentElement) {
+            const parent = hostElement.parentElement;
+            const parentStyle = getComputedStyle(parent);
+            const parentWidth = parent.clientWidth -
+                parseFloat(parentStyle.paddingLeft) -
+                parseFloat(parentStyle.paddingRight);
+            const parentHeight = parent.clientHeight -
+                parseFloat(parentStyle.paddingTop) -
+                parseFloat(parentStyle.paddingBottom);
+            if (parentWidth > 0 && parentHeight > 0) {
+                const fieldAspectRatio = this.orientation() === SoccerBoardOrientation.Landscape
+                    ? SoccerBoardFieldConstants.RATIO
+                    : 1 / SoccerBoardFieldConstants.RATIO;
+                const containerAspectRatio = parentWidth / parentHeight;
+                let width;
+                if (containerAspectRatio > fieldAspectRatio) {
+                    // Container is wider - height is the constraint
+                    const height = parentHeight;
+                    width = height * fieldAspectRatio;
+                }
+                else {
+                    // Container is taller - width is the constraint
+                    width = parentWidth;
+                }
+                // Update width signal reactively
+                this.hostWidth.set(`${width}px`);
+                return;
+            }
+        }
+        // Otherwise, use --soccer-board-width CSS custom property (like original)
+        this.updateFieldSizeFromCSS();
+    }
+    updateFieldSizeFromCSS() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const hostElement = this.hostElement.nativeElement;
+        const computedStyle = getComputedStyle(hostElement);
+        const fieldWidth = computedStyle.getPropertyValue('--soccer-board-width').trim();
+        if (!fieldWidth || fieldWidth === '100%') {
+            // Default behavior: 100% width, let CSS handle it
+            this.hostWidth.set(fieldWidth || '100%');
+            return;
+        }
+        // Parse the width value
+        const match = fieldWidth.match(/^([\d.]+)(px|rem|em|vw|vh|%)?$/);
+        if (!match) {
+            this.hostWidth.set(fieldWidth);
+            return;
+        }
+        const value = parseFloat(match[1]);
+        const unit = match[2] || 'px';
+        if (this.orientation() === SoccerBoardOrientation.Landscape) {
+            // In landscape, the CSS width represents the field length (105m)
+            // So we multiply the physical width (68m) by the ratio to get the CSS width
+            const landscapeWidth = value * SoccerBoardFieldConstants.RATIO;
+            this.hostWidth.set(`${landscapeWidth}${unit}`);
+        }
+        else {
+            // In portrait, the CSS width represents the field width (68m)
+            this.hostWidth.set(`${value}${unit}`);
+        }
+    }
+    /**
+     * Exports the soccer board field (without sidebar) to PNG image
+     * @public
+     */
+    async exportToPNG() {
+        if (!isPlatformBrowser(this.platformId)) {
+            console.warn('[SoccerBoard] Export to PNG is only available in browser');
+            return;
+        }
+        const container = this.fieldContainer()?.nativeElement;
+        if (!container) {
+            console.error('[SoccerBoard] Field container not found for export');
+            return;
+        }
+        try {
+            console.log('[SoccerBoard] Starting PNG export...');
+            // Wait for all images to load before exporting
+            const images = container.querySelectorAll('img');
+            const imagePromises = Array.from(images).map((img) => {
+                if (img.complete) {
+                    return Promise.resolve();
+                }
+                return new Promise((resolve) => {
+                    img.onload = () => resolve();
+                    img.onerror = () => resolve(); // Continue even if image fails to load
+                    // Timeout after 5 seconds
+                    setTimeout(() => resolve(), 5000);
+                });
+            });
+            await Promise.all(imagePromises);
+            console.log('[SoccerBoard] All images loaded, capturing...');
+            // Use html2canvas-pro to capture the field (supports oklab/oklch colors)
+            const canvas = await html2canvas(container, {
+                backgroundColor: null, // Transparent background
+                scale: 2, // Higher quality
+                logging: false,
+                useCORS: true, // Allow cross-origin images
+                allowTaint: false,
+                width: container.offsetWidth,
+                height: container.offsetHeight,
+                ignoreElements: (element) => {
+                    // Ignore remove badges
+                    return element.classList?.contains('remove-badge') || false;
+                },
+            });
+            // Convert canvas to blob and emit event
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    console.error('[SoccerBoard] Failed to create blob');
+                    return;
+                }
+                // Get data URL for the image
+                const dataUrl = canvas.toDataURL('image/png');
+                // Emit event with blob and data URL
+                this.imageExported.emit({
+                    blob,
+                    dataUrl,
+                });
+                // Also trigger automatic download (optional - app can handle it via event)
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = `soccer-board-${Date.now()}.png`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+                console.log('[SoccerBoard] PNG exported successfully');
+            }, 'image/png');
+        }
+        catch (error) {
+            console.error('[SoccerBoard] Error exporting to PNG:', error);
+        }
+    }
+    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"] }] });
+}
+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"] }]
+        }], 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 };
+//# sourceMappingURL=fuzo-soccer-board.mjs.map