@maestro_io/maestro-web-sdk 2.1.3 → 2.2.0

package/dist/modules/stats/utils.js

@@ -1,62 +0,0 @@
-/**
- * Utility functions for stats module
- */
-/**
- * Convert polar coordinates to cartesian coordinates
- * @param centerX - Center X coordinate
- * @param centerY - Center Y coordinate
- * @param radius - Radius from center
- * @param angleInDegrees - Angle in degrees (0 degrees is at the top)
- * @returns Point with x,y coordinates
- */
-export const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
-    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-    };
-};
-/**
- * Create an SVG arc path string
- * @param centerX - Center X coordinate
- * @param centerY - Center Y coordinate
- * @param radius - Arc radius
- * @param startAngle - Start angle in degrees
- * @param endAngle - End angle in degrees
- * @returns SVG path string for the arc
- */
-export const createArcPath = (centerX, centerY, radius, startAngle, endAngle) => {
-    const start = polarToCartesian(centerX, centerY, radius, endAngle);
-    const end = polarToCartesian(centerX, centerY, radius, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    return [
-        'M',
-        start.x,
-        start.y,
-        'A',
-        radius,
-        radius,
-        0,
-        largeArcFlag,
-        0,
-        end.x,
-        end.y,
-    ].join(' ');
-};
-/**
- * Convert percentage to angle in degrees
- * @param percentage - Percentage value (0-100)
- * @returns Angle in degrees (0-360)
- */
-export const percentageToAngle = (percentage) => {
-    return (percentage / 100) * 360;
-};
-/**
- * Get team color with fallback
- * @param teamColor - Team color from API (without #)
- * @param fallbackColor - Fallback color (with #)
- * @returns Color string with # prefix
- */
-export const getTeamColor = (teamColor, fallbackColor = '#666666') => {
-    return teamColor ? `#${teamColor}` : fallbackColor;
-};

package/dist/modules/stats/view/ActiveAthletes/ActiveAthletes.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import './ActiveAthletes.styles.css';
-import Icon from '@/components/atoms/SvgIcon';
-import { withFocusable, } from '@/external/spatial-navigation';
-import CollapsedAthletes from './CollapsedAthletes/CollapsedAthletes';
-import ExpandedAthletes from './ExpandedAthletes/ExpandedAthletes';
-import SDK from '@/index';
-class ActiveAthletes extends React.Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "onAthletesStatisticsArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (index) => (d) => {
-                if (d === 'up' && index === 0) {
-                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
-                    this.setState({
-                        expanded: false,
-                    });
-                    return false;
-                }
-                return true;
-            }
-        });
-        Object.defineProperty(this, "onAthletesStatisticsBackPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.setState({
-                    expanded: false,
-                }, () => {
-                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
-                });
-            }
-        });
-        this.state = {
-            expanded: false,
-        };
-    }
-    onEnterPress() {
-        const newValue = !this.state.expanded;
-        this.setState({
-            expanded: newValue,
-        }, () => {
-            if (newValue) {
-                const firstAthlete = this.props.item.athletes[0];
-                SDK.getMaestroEventViewModel().navigation.setFocus(`${firstAthlete.awayAthlete.id}-${firstAthlete.homeAthlete.id}-${firstAthlete.displayName}-statistics`);
-            }
-        });
-    }
-    get cardFocusKey() {
-        return this.props.item.displayText
-            .trim()
-            .toLowerCase()
-            .replace(/\s+/g, '-');
-    }
-    renderContent() {
-        if (this.state.expanded) {
-            return (React.createElement(ExpandedAthletes, { item: this.props.item, onArrowPress: this.onAthletesStatisticsArrowPress, onBackPress: this.onAthletesStatisticsBackPress }));
-        }
-        return React.createElement(CollapsedAthletes, { item: this.props.item });
-    }
-    render() {
-        return (React.createElement(FocusableWrapper, { displayText: this.props.item.displayText, onEnterPress: this.onEnterPress.bind(this), expanded: this.state.expanded, focusKey: this.cardFocusKey }, this.renderContent()));
-    }
-}
-const Wrapper = (props) => {
-    return (React.createElement("section", { className: "active-athletes focus-ring", "data-focused": props.focused },
-        React.createElement("div", { className: "header" },
-            React.createElement("h5", { className: "T05_ALT" }, props.displayText),
-            React.createElement("div", { className: "icon-container", "data-focused": props.focused },
-                React.createElement(Icon, { iconName: props.expanded ? 'collapse' : 'expand', height: 48, width: 48 }))),
-        props.children));
-};
-const FocusableWrapper = withFocusable()(Wrapper);
-export default ActiveAthletes;

package/dist/modules/stats/view/ActiveAthletes/CollapsedAthletes/CollapsedAthletes.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import './CollapsedAthletes.styles.css';
-import Image from '@/components/atoms/Image';
-const CollapsedAthletes = (props) => {
-    const { awayTeam, homeTeam, athletes } = props.item;
-    return (React.createElement("div", { className: "minified-content" },
-        React.createElement("div", { className: "teams-header" }, [awayTeam, homeTeam].map((team) => {
-            return (React.createElement("div", { className: "team-header", key: team.id },
-                React.createElement(Image, { src: team.logo, crossOrigin: "anonymous", alt: team.name }),
-                React.createElement("span", { className: "T05_ALT" }, team.name)));
-        })),
-        athletes.map((item, index) => {
-            return (React.createElement("div", { className: "minified-athletes", key: item.awayAthlete.id + item.homeAthlete.id },
-                React.createElement("div", { className: "athletes-jersey-row" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
-                    return (React.createElement("div", { className: "T05_ALT", key: athlete.id + index + '-jersey' },
-                        React.createElement("span", null,
-                            "#",
-                            athlete.jersey),
-                        " ",
-                        athlete.shortName));
-                })),
-                React.createElement("div", { className: "athletes-statistics-row" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
-                    return (React.createElement("span", { key: athlete.id + index + '-statistic', className: "T02" }, athlete.minifiedStatistics || ''));
-                }))));
-        })));
-};
-export default CollapsedAthletes;

package/dist/modules/stats/view/ActiveAthletes/ExpandedAthletes/ExpandedAthletes.js

@@ -1,15 +0,0 @@
-import Image from '@/components/atoms/Image';
-import React from 'react';
-import './ExpandedAthletes.styles.css';
-import AthletesStatistics from '../../components/AthletesStatistics';
-const ExpandedAthletes = (props) => {
-    const { awayTeam, homeTeam, athletes } = props.item;
-    const { onArrowPress, onBackPress } = props;
-    return (React.createElement("div", { className: "active-athletes-statistics" },
-        React.createElement("div", { className: "divider" }),
-        React.createElement("div", { className: "active-athletes-statistics-header" }, [awayTeam, homeTeam].map((team) => (React.createElement("div", { className: "team-header", key: team.id },
-            React.createElement(Image, { src: team.logo, crossOrigin: "anonymous", alt: team.name }),
-            React.createElement("span", { className: "T05_ALT" }, team.name))))),
-        athletes.map((item, index) => (React.createElement(AthletesStatistics, { key: item.awayAthlete.id + item.homeAthlete.id + item.displayName, focusKey: `${item.awayAthlete.id}-${item.homeAthlete.id}-${item.displayName}-statistics`, item: item, onArrowPress: onArrowPress(index), onBackPress: onBackPress })))));
-};
-export default ExpandedAthletes;

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

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

package/dist/modules/stats/view/GameLeaders/GameLeaders.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import './GameLeaders.styles.css';
-import AthletesStatistics from '../components/AthletesStatistics';
-const GameLeaders = (props) => {
-    return (React.createElement("section", { className: "game-leaders" },
-        React.createElement("h5", { className: "T05_ALT" }, "Game Leaders"),
-        props.items.map((item, index) => (React.createElement(AthletesStatistics, { key: `${index}-${item.awayAthlete.id}`, item: item, focusKey: String(index) })))));
-};
-export default GameLeaders;

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

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

package/dist/modules/stats/view/MatchPredictor/DonutChart/DonutChart.js

@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import { createArcPath, percentageToAngle } from '../../../utils';
-class DonutChart extends Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "patternId", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.patternId = `homeStripes-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    render() {
-        const { awayPercentage, size = 280, strokeWidth = 32 } = this.props;
-        const radius = (size - strokeWidth) / 2;
-        const centerX = size / 2;
-        const centerY = size / 2;
-        // Calculate angles with equal gaps between sections
-        const awayAngle = percentageToAngle(awayPercentage);
-        const homeAngle = percentageToAngle(100 - awayPercentage);
-        const gapAngle = 3; // 3 degree gap between sections
-        const totalGaps = gapAngle * 2; // Two gaps total
-        // Adjust angles to account for gaps
-        const adjustedAwayAngle = (awayAngle * (360 - totalGaps)) / 360;
-        const adjustedHomeAngle = (homeAngle * (360 - totalGaps)) / 360;
-        const startAngle = 270; // Start from top
-        const awayEndAngle = startAngle + adjustedAwayAngle; // Away team section
-        const homeStartAngle = awayEndAngle + gapAngle; // Gap after away team
-        const homeEndAngle = homeStartAngle + adjustedHomeAngle; // Home team section
-        // Use consistent text-100 color for both teams
-        const chartColor = 'var(--sdk-text100)';
-        return (React.createElement("svg", { width: size, height: size, className: "donut-svg" },
-            React.createElement("defs", null,
-                React.createElement("pattern", { id: this.patternId, patternUnits: "userSpaceOnUse", width: "6", height: "6", patternTransform: "rotate(45)" },
-                    React.createElement("rect", { width: "1", height: "6", fill: chartColor }),
-                    React.createElement("rect", { x: "1", width: "2", height: "6", fill: "transparent" }),
-                    React.createElement("rect", { x: "3", width: "1", height: "6", fill: chartColor }),
-                    React.createElement("rect", { x: "4", width: "2", height: "6", fill: "transparent" }))),
-            React.createElement("path", { d: createArcPath(centerX, centerY, radius, startAngle, awayEndAngle), fill: "transparent", stroke: chartColor, strokeWidth: strokeWidth, strokeLinecap: "butt" }),
-            React.createElement("path", { d: createArcPath(centerX, centerY, radius, homeStartAngle, homeEndAngle), fill: "transparent", stroke: `url(#${this.patternId})`, strokeWidth: strokeWidth, strokeLinecap: "butt" }),
-            React.createElement("path", { d: createArcPath(centerX, centerY, radius, awayEndAngle, homeStartAngle), fill: "transparent", stroke: "var(--sdk-surface4)", strokeWidth: strokeWidth, strokeLinecap: "butt" }),
-            React.createElement("path", { d: createArcPath(centerX, centerY, radius, homeEndAngle, startAngle + 360), fill: "transparent", stroke: "var(--sdk-surface4)", strokeWidth: strokeWidth, strokeLinecap: "butt" })));
-    }
-}
-Object.defineProperty(DonutChart, "defaultProps", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        size: 280,
-        strokeWidth: 32,
-    }
-});
-export default DonutChart;

package/dist/modules/stats/view/MatchPredictor/DonutChart/index.js

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

package/dist/modules/stats/view/MatchPredictor/MatchPredictorView.js

@@ -1,66 +0,0 @@
-import React, { Component } from 'react';
-import './MatchPredictorView.styles.css';
-import { withFocusable, } from '@/external/spatial-navigation';
-import DonutChart from './DonutChart/DonutChart';
-import Image from '@/components/atoms/Image';
-class MatchPredictorView extends Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                shouldRenderPredictorImage: Boolean(this.props.predictor.imageUrl),
-            }
-        });
-        Object.defineProperty(this, "handleImageError", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.setState({ shouldRenderPredictorImage: false });
-            }
-        });
-    }
-    render() {
-        const { predictor, teams } = this.props;
-        const { shouldRenderPredictorImage } = this.state;
-        // Get team data
-        const homeTeam = teams[predictor.homeTeam.team.$key];
-        const awayTeam = teams[predictor.awayTeam.team.$key];
-        // Parse percentages
-        const homePercentage = parseFloat(predictor.homeTeam.gameProjection);
-        const awayPercentage = parseFloat(predictor.awayTeam.gameProjection);
-        return (React.createElement("section", { className: "match-predictor-view focus-ring", "data-focused": this.props.focused },
-            React.createElement("div", { className: "match-predictor-header" },
-                React.createElement("h2", { className: "T05_ALT" }, predictor.header)),
-            React.createElement("div", { className: "match-predictor-percentages" },
-                React.createElement("div", { className: "team-percentage away-team" },
-                    React.createElement("span", { className: "percentage-value T70" },
-                        awayPercentage,
-                        "%"),
-                    React.createElement("div", { className: "team-info" },
-                        React.createElement("div", { className: "legend-item away" },
-                            React.createElement("div", { className: "legend-pattern away-pattern" }),
-                            React.createElement("span", { className: "T02" }, awayTeam?.abbreviation)))),
-                React.createElement("div", { className: "team-percentage home-team" },
-                    React.createElement("span", { className: "percentage-value T70" },
-                        homePercentage,
-                        "%"),
-                    React.createElement("div", { className: "team-info" },
-                        React.createElement("div", { className: "legend-item home" },
-                            React.createElement("div", { className: "legend-pattern home-pattern" }),
-                            React.createElement("span", { className: "T02" }, homeTeam?.abbreviation))))),
-            React.createElement("div", { className: "donut-chart-container" }, shouldRenderPredictorImage && predictor.imageUrl ? (React.createElement("div", { className: "actual-chart" },
-                React.createElement(Image, { src: predictor.imageUrl, alt: "Match Predictor Chart", className: "predictor-chart-image", onError: this.handleImageError }))) : (React.createElement("div", { className: "svg-chart-fallback" },
-                React.createElement("div", { className: "svg-donut-container" },
-                    React.createElement(DonutChart, { awayPercentage: awayPercentage, homePercentage: homePercentage }),
-                    React.createElement("div", { className: "donut-center" },
-                        React.createElement("div", { className: "center-team-logos" },
-                            React.createElement("div", { className: "center-logo away-center-logo" }, awayTeam?.logo ? (React.createElement(Image, { src: awayTeam.logo, alt: awayTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, awayTeam?.abbreviation))),
-                            React.createElement("div", { className: "center-divider" }),
-                            React.createElement("div", { className: "center-logo home-center-logo" }, homeTeam?.logo ? (React.createElement(Image, { src: homeTeam.logo, alt: homeTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, homeTeam?.abbreviation)))))))))));
-    }
-}
-export default withFocusable()(MatchPredictorView);

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

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

package/dist/modules/stats/view/RecentGames/RecentGames.js

@@ -1,22 +0,0 @@
-import { withFocusable, } from '@/external/spatial-navigation';
-import React from 'react';
-import './RecentGames.styles.css';
-import Image from '@/components/atoms/Image';
-const RecentGames = (props) => {
-    return (React.createElement("section", { className: "recent-games focus-ring", "data-focused": props.focused },
-        React.createElement("h5", { className: "T05_ALT" }, "Recent Games"),
-        React.createElement("div", { className: "recent-games-teams" }, [props.awayTeam, props.homeTeam].map((team, index) => (React.createElement("div", { className: "team-container", key: team.name || team.logo || index },
-            React.createElement(Image, { src: team.logo, alt: team.name || '', crossOrigin: "anonymous" }),
-            React.createElement("span", { className: "T05_ALT" }, team.name))))),
-        React.createElement("div", { className: "recent-games-list-group" }, [props.awayTeam, props.homeTeam].map((team, index) => (React.createElement("div", { className: "recent-games-list", key: team.name || team.logo || index }, team.events.map((event) => (React.createElement("div", { className: "recent-game-item T10", key: event.teamLogo +
-                event.score +
-                event.gameResult +
-                event.homeAway },
-            React.createElement("div", { className: "recent-game-item-team" },
-                React.createElement("span", null, event.homeAway === 'home' ? 'VS' : '@'),
-                React.createElement(Image, { src: event.teamLogo, alt: `${team.name} event ${event.score}`, crossOrigin: "anonymous" })),
-            React.createElement("div", { className: "recent-game-item-result" },
-                React.createElement("span", { "data-result": event.gameResult }, event.gameResult),
-                event.score))))))))));
-};
-export default withFocusable()(RecentGames);

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

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

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import './StatsQRCodeView.styles.css';
-import { withFocusable, } from '@/external/spatial-navigation';
-import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
-import Image from '@/components/atoms/Image';
-const StatsQRCodeView = (props) => {
-    const { focused, promotion } = props;
-    return (React.createElement(FocusableItem, null,
-        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: "T02" }, promotion.description)))))))))))));
-};
-export default withFocusable()(StatsQRCodeView);

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

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

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

@@ -1,107 +0,0 @@
-import React, { Component } from 'react';
-import './StatsView.styles.css';
-import ScrollableContainer from '@/components/core/ScrollableContainer';
-import MatchPredictorView from './MatchPredictor';
-import SDK from '@/index';
-import StatsQRCodeView from './StatsQRCode';
-import TeamStatsView from './TeamStats';
-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, "vm", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "renderStatsComponents", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const { statsData } = this.state;
-                if (!statsData) {
-                    return [];
-                }
-                try {
-                    const teams = statsData.entities.teams;
-                    const homeTeam = Object.values(teams).find((team) => team.homeAway === 'home');
-                    const awayTeam = Object.values(teams).find((team) => team.homeAway === 'away');
-                    const availableStatistics = homeTeam?.statistics || awayTeam?.statistics || [];
-                    const components = [];
-                    if (statsData.predictor) {
-                        components.push(React.createElement(MatchPredictorView, { key: "match-predictor", predictor: statsData.predictor, teams: statsData.entities.teams }));
-                    }
-                    // Add TeamStatsView if available
-                    if (homeTeam && awayTeam && availableStatistics.length > 0) {
-                        components.push(React.createElement(TeamStatsView, { key: "team-stats", homeTeam: homeTeam, awayTeam: awayTeam, statistics: availableStatistics }));
-                    }
-                    // Add StatsQRCodeView if available
-                    if (statsData.promotion) {
-                        components.push(React.createElement(StatsQRCodeView, { key: "stats-qr-code", promotion: statsData.promotion }));
-                    }
-                    return components;
-                }
-                catch (error) {
-                    console.error('Error rendering stats components:', error);
-                    return [];
-                }
-            }
-        });
-        this.vm = SDK.getMaestroEventViewModel().statsViewModel;
-        this.state = {
-            container: null,
-            statsData: this.vm.statsData.value,
-            isDataLoading: this.vm.isDataLoading.value,
-        };
-    }
-    componentDidMount() {
-        this.statsDataUnsub = this.vm.statsData.subscribe((value) => {
-            this.setState({ statsData: value });
-        });
-        this.isDataLoadingUnsub = this.vm.isDataLoading.subscribe((value) => {
-            this.setState({ isDataLoading: value });
-        });
-        this.setState({
-            container: this.container,
-        });
-        // Initialize the view model
-        this.vm.init();
-    }
-    componentWillUnmount() {
-        this.statsDataUnsub && this.statsDataUnsub();
-        this.isDataLoadingUnsub && this.isDataLoadingUnsub();
-        // Clean up the view model
-        this.vm.cleanup();
-    }
-    render() {
-        const { container, statsData } = this.state;
-        const components = this.renderStatsComponents();
-        return (React.createElement(ScrollableContainer, { scrollableContainerRef: container, containerTopOffset: STICKY_HEADER_HEIGHT },
-            React.createElement("div", { ref: (el) => {
-                    this.container = el;
-                }, className: "stats-view" },
-                !statsData ? (React.createElement("div", { className: "stats-loading T02" }, "Loading...")) : components.length > 0 ? (React.createElement("div", { className: "stats-content" }, components.map((component, index) => (React.createElement("div", { key: component.key || index, className: "stats-component" }, component))))) : (React.createElement("div", { className: "stats-loading T02" }, "No stats available")),
-                React.createElement("div", { className: "stats-bottom-padding" }))));
-    }
-}
-export default StatsView;

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

@@ -1,69 +0,0 @@
-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 { homeTeam, awayTeam, statistics } = props;
-    // If no statistics available, don't render the component
-    if (!statistics || statistics.length === 0) {
-        return null;
-    }
-    // Get statistics for both teams and match them by displayName
-    const homeStats = homeTeam.statistics || [];
-    const awayStats = awayTeam.statistics || [];
-    // Create a map of statistics by displayName for easier lookup
-    const createStatsMap = (stats) => {
-        return stats.reduce((map, stat) => {
-            map[stat.displayName] = stat;
-            return map;
-        }, {});
-    };
-    const homeStatsMap = createStatsMap(homeStats);
-    const awayStatsMap = createStatsMap(awayStats);
-    // Filter statistics to only include those that exist for both teams
-    const matchedStatistics = statistics.filter((stat) => homeStatsMap[stat.displayName] && awayStatsMap[stat.displayName]);
-    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" }, "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" }, matchedStatistics.map((statistic) => {
-            const homeStat = homeStatsMap[statistic.displayName];
-            const awayStat = awayStatsMap[statistic.displayName];
-            // Parse values, handle different formats (numbers and strings)
-            const homeValue = homeStat
-                ? parseFloat(homeStat.displayValue) || 0
-                : 0;
-            const awayValue = awayStat
-                ? parseFloat(awayStat.displayValue) || 0
-                : 0;
-            return renderTeamStatistic({
-                statisticName: statistic.displayName,
-                firstDisplayValue: awayStat?.displayValue || '0',
-                secondDisplayValue: homeStat?.displayValue || '0',
-                awayProgressValue: awayValue,
-                homeProgressValue: homeValue,
-                key: statistic.displayName,
-                classNames: {
-                    container: 'team-stat-item',
-                    header: 'stat-header',
-                    firstValue: 'stat-value away-value',
-                    secondValue: 'stat-value home-value',
-                    statisticName: 'stat-name',
-                },
-            });
-        }))));
-};
-export default withFocusable()(TeamStatsView);

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

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

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

@@ -1,14 +0,0 @@
-import React from 'react';
-const StatsCarousel = (props) => {
-    return (React.createElement("div", { className: "carousel" },
-        React.createElement("div", { className: "carousel-track", style: {
-                width: `${props.itemsLength * 100}%`,
-                animation: `carousel-slide ${props.itemsLength * 6}s steps(${props.itemsLength}) infinite`,
-            } }, props.children)));
-};
-const CarouselSlider = (props) => {
-    return (React.createElement("div", { className: "carousel-slide", style: {
-            width: `${100 / props.itemsLength}%`,
-        } }, props.children));
-};
-export { StatsCarousel, CarouselSlider };

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

@@ -1,18 +0,0 @@
-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}%`,
-                } }))));
-};
-export default StatsProgressBar;