@maestro_io/maestro-web-sdk 3.3.1 → 4.0.0-beta.2

package/dist/src/modules/stats/view/StatsItemView.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import Teams from './Teams';
+import ActiveAthletes from './ActiveAthletes';
+import GameLeaders from './GameLeaders';
+import RecentGames from './RecentGames';
+import WinProbability from './WinProbability';
+import StatsQRCodeView from './StatsQRCode/StatsQRCodeView';
+import MatchPredictorView from './MatchPredictor';
+import TeamStats from './TeamStats';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import DriveSummary from './DriveSummary';
+import SDK from '@/index';
+import ScoringSummary from './ScoringSummary';
+import Penalties from './Penalties';
+class StatsItemView extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => () => {
+                this.props.onEnterPress(item);
+            }
+        });
+    }
+    renderItem() {
+        const item = this.props.item;
+        switch (item.type) {
+            case 'penalties':
+                return (React.createElement(Penalties, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'scoringSummary':
+                return (React.createElement(ScoringSummary, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'driveSummary':
+                return (React.createElement(DriveSummary, { onBecameFocused: this.onBecameFocused, onItemEnterPress: this.onEnterPress(item), onArrowPress: this.onArrowPress, focusKey: `drive-summary-${item.id}`, item: item }));
+            case 'headerTeam':
+                return (React.createElement(Teams, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'activeAthletes':
+                return (React.createElement(ActiveAthletes, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'gameLeaders':
+                return (React.createElement(GameLeaders, { item: item, onEnterPress: this.onEnterPress(item) }));
+            case 'recentGames':
+                return (React.createElement(RecentGames, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'winProbability':
+                return (React.createElement(WinProbability, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'promotion':
+                return (React.createElement(StatsQRCodeView, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), onArrowPress: this.onArrowPress, promotion: item }));
+            case 'matchPredictor':
+                return (React.createElement(MatchPredictorView, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), onArrowPress: this.onArrowPress, item: item }));
+            case 'teamStats':
+                return (React.createElement(TeamStats, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            default:
+                console.warn('Unknown stats item type:', JSON.stringify(item));
+                return null;
+        }
+    }
+    render() {
+        return React.createElement(FocusableItem, null, this.renderItem());
+    }
+}
+Object.defineProperty(StatsItemView, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default StatsItemView;

package/dist/src/modules/stats/view/StatsQRCode/StatsQRCodeView.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+const StatsQRCodeView = (props) => {
+    const { focused, promotion } = props;
+    return (React.createElement("div", { className: "stats-qr-code-view focus-ring", "data-focused": focused, style: {
+            backgroundImage: `url(${promotion.backgroundImage})`,
+        } },
+        React.createElement("table", { className: "stats-qr-table" },
+            React.createElement("tbody", null,
+                React.createElement("tr", null,
+                    React.createElement("td", { className: "stats-qr-header-cell" },
+                        React.createElement("table", { className: "stats-qr-logo-table" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-logo-cell" },
+                                        React.createElement(Image, { src: promotion.logo, alt: "ESPN Logo", crossOrigin: "anonymous", className: "stats-qr-logo" }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-tagline-cell" },
+                                        React.createElement("div", { className: "stats-qr-tagline" },
+                                            React.createElement("p", { className: "T20" }, promotion.title)))))))),
+                React.createElement("tr", null,
+                    React.createElement("td", { className: "stats-qr-content-cell" },
+                        React.createElement("table", { className: "stats-qr-content-table" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-code-cell" },
+                                        React.createElement("div", { className: "stats-qr-code-container" },
+                                            React.createElement(Image, { src: promotion.qrCode, alt: "QR Code", crossOrigin: "anonymous", className: "stats-qr-code" })))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-description-cell" },
+                                        React.createElement("div", { className: "stats-qr-description" },
+                                            React.createElement("p", { className: "T20" }, promotion.description))))))))))));
+};
+export default withFocusable()(StatsQRCodeView);

package/dist/src/modules/stats/view/StatsQRCode/index.js

@@ -0,0 +1 @@
+export { default } from './StatsQRCodeView';

package/dist/src/modules/stats/view/StatsView.js

@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import './StatsView.styles.css';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+import StatsItemView from './StatsItemView';
+import TabLoadErrorView from '@/components/molecules/TabLoadError';
+import { captureException } from '@/sentry';
+const STICKY_HEADER_HEIGHT = 32; // Match KeyPlaysView
+class StatsView extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statsDataUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isDataLoadingUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "errorStateListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "clearTabLoadFailure", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.viewModel.clearTabLoadFailure();
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "renderItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { statsItems } = this.state;
+                if (this.state.errorState === 'tabLoadFailure') {
+                    return (React.createElement(TabLoadErrorView, { onEnterPress: this.clearTabLoadFailure, onArrowPress: this.onArrowPress }));
+                }
+                try {
+                    return statsItems.map((item) => (React.createElement(StatsItemView, { key: item.type, item: item, onEnterPress: this.onEnterPress })));
+                }
+                catch (error) {
+                    captureException(error, { statsItems });
+                    console.error('Error rendering stats components:', error);
+                    return null;
+                }
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => {
+                this.viewModel.onEngage(item.type);
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().statsViewModel;
+        this.state = {
+            container: null,
+            isDataLoading: this.viewModel.isDataLoading.value,
+            statsItems: this.viewModel.statsItems.value,
+            errorState: this.viewModel.errorState.value,
+        };
+    }
+    get viewModel() {
+        if (!this.vm) {
+            throw new Error('StatsViewModel is not initialized');
+        }
+        return this.vm;
+    }
+    componentDidMount() {
+        this.setState({
+            container: this.container,
+        });
+        this.statsDataUnsub = this.viewModel.statsItems.subscribe((value) => {
+            this.setState({ statsItems: value });
+        });
+        this.isDataLoadingUnsub = this.viewModel.isDataLoading.subscribe((value) => {
+            this.setState({ isDataLoading: value });
+        });
+        this.errorStateListener = this.viewModel.errorState.subscribe((value) => {
+            this.setState({ errorState: value });
+        });
+        this.setState({
+            container: this.container,
+        });
+        // Initialize the view model
+        this.viewModel.init();
+    }
+    componentWillUnmount() {
+        this.statsDataUnsub && this.statsDataUnsub();
+        this.isDataLoadingUnsub && this.isDataLoadingUnsub();
+        this.errorStateListener && this.errorStateListener();
+        // Clean up the view model
+        this.viewModel.cleanup();
+    }
+    render() {
+        const { container } = this.state;
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: container, containerTopOffset: STICKY_HEADER_HEIGHT },
+            React.createElement("div", { ref: (el) => {
+                    this.container = el;
+                }, className: "stats-view" },
+                this.renderItems(),
+                React.createElement("div", { className: "stats-bottom-padding" }))));
+    }
+}
+export default StatsView;

package/dist/src/modules/stats/view/TeamStats/TeamStatsView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import './TeamStatsView.styles.css';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { renderTeamStatistic } from '../../utils/renderTeamStatistic';
+const TeamStatsView = (props) => {
+    const { item } = props;
+    const { homeTeam, awayTeam, statistics } = item;
+    return (React.createElement("section", { className: "team-stats-view focus-ring", "data-focused": props.focused, style: {
+            '--home-team': `#${homeTeam.color}`,
+            '--away-team': `#${awayTeam.color}`,
+        } },
+        React.createElement("div", { className: "team-stats-header" },
+            React.createElement("div", { className: "team-stats-team away-team" },
+                React.createElement("div", { className: "team-stats-team-inner" },
+                    awayTeam.logo && (React.createElement(Image, { src: awayTeam.logo, alt: awayTeam.displayName, crossOrigin: "anonymous", className: "team-logo" })),
+                    React.createElement("div", { className: "team-swatch away-swatch" }),
+                    React.createElement("span", { className: "team-abbreviation" }, awayTeam.abbreviation))),
+            React.createElement("h2", { className: "stats-title T05_ALT" }, "Team Stats"),
+            React.createElement("div", { className: "team-stats-team home-team" },
+                React.createElement("div", { className: "team-stats-team-inner" },
+                    React.createElement("span", { className: "team-abbreviation" }, homeTeam.abbreviation),
+                    React.createElement("div", { className: "team-swatch home-swatch" }),
+                    homeTeam.logo && (React.createElement(Image, { src: homeTeam.logo, alt: homeTeam.displayName, crossOrigin: "anonymous", className: "team-logo" }))))),
+        React.createElement("div", { className: "team-stats-content" }, statistics.map((statistic) => {
+            return renderTeamStatistic({
+                statisticName: statistic.displayName,
+                firstDisplayValue: statistic.awayTeamDisplayValue,
+                secondDisplayValue: statistic.homeTeamDisplayValue,
+                awayProgressValue: statistic.awayTeamValue,
+                homeProgressValue: statistic.homeTeamValue,
+                key: statistic.displayName,
+                classNames: {
+                    container: 'team-stat-item',
+                    header: 'stat-header',
+                    firstValue: 'stat-value T30 away-value FONT_BOLD',
+                    secondValue: 'stat-value T30 home-value FONT_BOLD',
+                    statisticName: 'stat-name T02',
+                },
+            });
+        }))));
+};
+export default withFocusable()(TeamStatsView);

package/dist/src/modules/stats/view/TeamStats/index.js

@@ -0,0 +1 @@
+export { default } from './TeamStatsView';

package/dist/src/modules/stats/view/Teams/StatsCarousel.js

@@ -0,0 +1,83 @@
+import React, { Children } from 'react';
+class StatsCarousel extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "interval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "trackRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.state = {
+            currentIndex: 0,
+            isTransitioning: true,
+        };
+        this.setTrackRef = this.setTrackRef.bind(this);
+    }
+    setTrackRef(el) {
+        this.trackRef = el;
+    }
+    componentDidMount() {
+        this.startInterval();
+    }
+    componentWillUnmount() {
+        this.clearInterval();
+    }
+    componentDidUpdate(_prevProps, prevState) {
+        // If we just jumped to the clone, reset to the real first slide (no transition)
+        if (prevState.currentIndex !== this.state.currentIndex &&
+            this.state.currentIndex === this.props.itemsLength) {
+            this.setState({ isTransitioning: false, currentIndex: 0 }, () => {
+                // Use requestAnimationFrame to re-enable transition after DOM update
+                if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+                    window.requestAnimationFrame(() => {
+                        this.setState({ isTransitioning: true });
+                    });
+                }
+                else {
+                    // Fallback for environments without requestAnimationFrame
+                    setTimeout(() => {
+                        this.setState({ isTransitioning: true });
+                    }, 0);
+                }
+            });
+        }
+    }
+    startInterval() {
+        this.clearInterval();
+        this.interval = window.setInterval(() => {
+            this.setState((state) => ({ currentIndex: state.currentIndex + 1 }));
+        }, 6000);
+    }
+    clearInterval() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+    render() {
+        const { children } = this.props;
+        const { currentIndex, isTransitioning } = this.state;
+        const childrenArray = Children.toArray(children);
+        return (React.createElement("div", { className: "carousel", style: { overflow: 'hidden', width: '100%' } },
+            React.createElement("div", { className: "carousel-track", ref: this.setTrackRef, style: {
+                    whiteSpace: 'nowrap',
+                    transition: isTransitioning ? 'transform 0.5s ease' : 'none',
+                    transform: 'translateX(-' + currentIndex * 100 + '%)',
+                } }, childrenArray.map((child) => child))));
+    }
+}
+const CarouselSlider = (props) => {
+    return (React.createElement("div", { className: "carousel-slide", style: {
+            width: '100%',
+            display: 'inline-block',
+            verticalAlign: 'top',
+        } }, props.children));
+};
+export { StatsCarousel, CarouselSlider };

package/dist/src/modules/stats/view/Teams/StatsProgressBar.js

@@ -0,0 +1,19 @@
+import React from 'react';
+const StatsProgressBar = (props) => {
+    const total = props.homeTeamValue + props.awayTeamValue;
+    const awayTeamPercentage = total === 0 ? 0 : Math.round((props.awayTeamValue / total) * 100);
+    return (React.createElement("div", { className: "progress-bar" },
+        React.createElement("div", { className: "progress-fill" },
+            React.createElement("div", { className: "progress-solid", style: {
+                    width: `${awayTeamPercentage}%`,
+                } }),
+            React.createElement("div", { className: "progress-stripes", style: {
+                    left: `${awayTeamPercentage}%`,
+                    width: `${100 - awayTeamPercentage}%`,
+                } }),
+            React.createElement("div", { className: "progress-divider", style: {
+                    left: `${awayTeamPercentage}%`,
+                    display: awayTeamPercentage === 0 ? 'none' : 'block',
+                } }))));
+};
+export default StatsProgressBar;

package/dist/src/modules/stats/view/Teams/Teams.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './TeamsView.styles.css';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+const Teams = (props) => {
+    const item = props.item;
+    const teams = [item.awayTeam, item.homeTeam];
+    return (React.createElement("section", { className: "stats-teams-view focus-ring", "data-focused": props.focused, style: {
+            '--home-team': `#${item.homeTeam.color}`,
+            '--away-team': `#${item.awayTeam.color}`,
+        }, "data-live": item.isLive },
+        React.createElement("div", { className: "stats-teams-view-header" }, teams.map((team) => (React.createElement("div", { key: team.id, className: "stats-team" },
+            React.createElement(Image, { src: team.logo, alt: team.name, crossOrigin: "anonymous" }),
+            React.createElement("div", null,
+                React.createElement("span", { className: item.isLive ? 'T05_ALT FONT_BOLD' : 'T30 FONT_BOLD' }, team.abbreviation),
+                React.createElement("p", { className: "T02" }, team.record)))))),
+        item.isLive && (React.createElement("div", { className: "statistics" },
+            React.createElement("table", { className: "statistics-table" },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", { className: "T10" }),
+                        item.linescoresHeader.map((header) => (React.createElement("th", { key: header, className: "T10" }, header))))),
+                React.createElement("tbody", null, teams.map((team) => (React.createElement("tr", { key: team.id },
+                    React.createElement("td", { className: "T30 FONT_BOLD" }, team.name),
+                    team.linescores.map((lineScore, index) => (React.createElement("td", { key: `${lineScore}-${index}`, className: "T10" }, lineScore))))))))))));
+};
+export default withFocusable()(Teams);

package/dist/src/modules/stats/view/Teams/index.js

@@ -0,0 +1,2 @@
+import Teams from './Teams';
+export default Teams;

package/dist/src/modules/stats/view/WinProbability/WinProbability.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './WinProbability.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+const WinProbability = (props) => {
+    const item = props.item;
+    return (React.createElement("section", { className: "win-probability focus-ring", "data-focused": props.focused },
+        React.createElement("h5", { className: "T05_ALT" }, "Win Probability"),
+        React.createElement("div", { className: "win-probability-card" }, [item.awayTeam, item.homeTeam].map((team, index) => {
+            return (React.createElement("div", { className: "team", key: team.id },
+                React.createElement(Image, { src: team.logo, alt: `${team.abbreviation} logo`, crossOrigin: "anonymous" }),
+                React.createElement("div", { className: "info" },
+                    React.createElement("span", { className: "T60" }, team.winPercentage ? `${team.winPercentage}%` : '–'),
+                    React.createElement("div", { className: "name T01" },
+                        index === 0 ? React.createElement(AwayTeamChartLine, null) : React.createElement(HomeTeamChartLine, null),
+                        React.createElement("span", null, team.abbreviation)))));
+        })),
+        React.createElement(Image, { src: item.chartImageUrl, alt: "Win Probability Chart", crossOrigin: "anonymous" })));
+};
+const AwayTeamChartLine = () => {
+    return (React.createElement("svg", { width: "25", height: "4", viewBox: "0 0 25 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M2.33337 2H22.3334", stroke: "white", strokeWidth: "4", strokeLinecap: "round" })));
+};
+const HomeTeamChartLine = () => {
+    return (React.createElement("svg", { width: "25", height: "4", viewBox: "0 0 25 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M2.66992 2H22.6699", stroke: "white", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: "2 7" })));
+};
+export default withFocusable()(WinProbability);

package/dist/src/modules/stats/view/WinProbability/index.js

@@ -0,0 +1,2 @@
+import WinProbability from './WinProbability';
+export default WinProbability;

package/dist/src/modules/stats/view/components/AthletesStatistics/AthletesStatistics.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import StatisticsTable from './StatisticTable';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import './AthleteStatistics.styles.css';
+import { BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK } from '@/modules/key-plays/constants';
+class AthletesStatistics extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "mounted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "onAwayAthleteImageLoad", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.mounted)
+                    return;
+                this.setState({ awayAthleteImageLoaded: true });
+            }
+        });
+        Object.defineProperty(this, "onHomeAthleteImageLoad", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.mounted)
+                    return;
+                this.setState({ homeAthleteImageLoaded: true });
+            }
+        });
+        Object.defineProperty(this, "renderAthleteImage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (athlete, isAway) => {
+                const imageLoaded = isAway
+                    ? this.state.awayAthleteImageLoaded
+                    : this.state.homeAthleteImageLoaded;
+                const onLoad = isAway
+                    ? this.onAwayAthleteImageLoad
+                    : this.onHomeAthleteImageLoad;
+                return (React.createElement("div", { className: "image-wrapper T02" },
+                    !imageLoaded && (React.createElement(Image, { src: BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK, crossOrigin: "anonymous", alt: "Player Headshot Loading", className: "cardImage" })),
+                    React.createElement(Image, { src: athlete.headshot, alt: `${this.props.item.displayName} ${athlete.displayName} Headshot Image`, crossOrigin: "anonymous", onLoad: onLoad, className: "cardImage", style: {
+                            display: imageLoaded ? 'block' : 'none',
+                        } }),
+                    React.createElement("div", { className: "athlete-position-badge" },
+                        ' ',
+                        React.createElement("span", null, athlete.position))));
+            }
+        });
+        this.state = {
+            awayAthleteImageLoaded: false,
+            homeAthleteImageLoaded: false,
+        };
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        const { item, focused } = this.props;
+        return (React.createElement("div", { className: "athletes-statistics focus-ring", "data-focused": focused },
+            !!item.displayName && (React.createElement("span", { className: "T05_ALT" }, item.displayName)),
+            React.createElement("div", { className: "leaders-wrapper" }, [item.awayAthlete, item.homeAthlete].map((athlete, index) => {
+                const isAway = index === 0;
+                return (React.createElement("div", { className: "leader", key: athlete.id + item.displayName },
+                    this.renderAthleteImage(athlete, isAway),
+                    React.createElement("div", { className: "leader-info" },
+                        React.createElement("div", { className: "main-statistic T05_ALT" },
+                            athlete.shortName,
+                            ' ',
+                            React.createElement("span", { className: "athlete-number T02" },
+                                "#",
+                                athlete.jersey)),
+                        Array.isArray(athlete.statistics) &&
+                            !!athlete.statistics.length && (React.createElement("div", { className: "main-statistic T30 FONT_BOLD" },
+                            athlete.statistics[0].displayValue,
+                            ' ',
+                            React.createElement("span", { className: "athlete-points T02" }, athlete.statistics[0].abbreviation))))));
+            })),
+            React.createElement(StatisticsTable, { item: item })));
+    }
+}
+export default withFocusable()(AthletesStatistics);

package/dist/src/modules/stats/view/components/AthletesStatistics/StatisticTable.js

@@ -0,0 +1,12 @@
+import React from 'react';
+const StatisticsTable = (props) => {
+    return (React.createElement("table", { className: "athletes-statistics-table T10" },
+        React.createElement("tbody", null, props.item.awayAthlete.statistics.slice(1).map((statistic, index) => {
+            return (React.createElement("tr", { key: statistic.abbreviation },
+                React.createElement("td", null, statistic.displayValue),
+                React.createElement("td", null, statistic.abbreviation),
+                React.createElement("td", null, props.item.homeAthlete.statistics[index + 1].displayValue ||
+                    '0')));
+        }))));
+};
+export default StatisticsTable;

package/dist/src/modules/stats/view/components/AthletesStatistics/index.js

@@ -0,0 +1,2 @@
+import AthletesStatistics from './AthletesStatistics';
+export default AthletesStatistics;

package/dist/src/modules/stats/view/index.js

@@ -0,0 +1,2 @@
+export { default } from './StatsView';
+export { default as TeamStatsView } from './TeamStats';

package/dist/src/modules/stats/view-model/StatsViewModel.d.ts

@@ -152,6 +152,11 @@ export declare class StatsViewModel extends ViewModel {
     constructor(eventId: string, delegate: IMaestroEventDelegate, options?: {
         useMockData?: boolean;
     });
+    /**
+     * Sets panel-specific data configuration
+     * @param panelData - Object containing panel configuration
+     */
+    setPanelData(panelData: Record<string, any>): void;
     /**
      * Initialize the ViewModel and start data fetching
      */