@fuzo/soccer-board 0.2.0-alpha.1 → 0.2.0-alpha.3

package/fesm2022/fuzo-soccer-board.mjs

@@ -1,971 +0,0 @@
-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();
-        // Calculate offset relative to the click point
-        // This maintains the relative position between cursor and element during drag
-        const offsetX = clientX - rect.left;
-        const offsetY = clientY - rect.top;
-        // Apply fixed position first to maintain visual position
-        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.margin = '0';
-        // Store offset after fixing position
-        this.dragOffsetX.set(offsetX);
-        this.dragOffsetY.set(offsetY);
-        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
-        // Position is already fixed from startDrag, just update coordinates
-        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;
-        // Restore original styles
-        element.style.pointerEvents = '';
-        element.style.position = '';
-        element.style.left = '';
-        element.style.top = '';
-        element.style.width = '';
-        element.style.height = '';
-        element.style.margin = '';
-        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']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SoccerBoardComponent, SoccerBoardFieldConstants, SoccerBoardFitMode, SoccerBoardOrientation, SoccerBoardPlayerComponent, SoccerBoardPlayerSize, SoccerBoardTeamSide };
-//# sourceMappingURL=fuzo-soccer-board.mjs.map