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

package/dist/src/modules/stats/view/DriveSummary/MainStat/MainStat.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import './MainStat.styles.css';
+const MainStat = (props) => {
+    const { playsQuantity, yards, time, lastPlayMarquee, focused } = props;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "drive-summary-stats-container" },
+            React.createElement("div", { className: "drive-summary-stat-left" },
+                React.createElement("div", { className: "drive-summary-stat-number T30 FONT_BOLD" }, playsQuantity),
+                React.createElement("div", { className: "drive-summary-stat-label T10" }, "PLAYS")),
+            React.createElement("div", { className: "drive-summary-stat-center" },
+                React.createElement("div", { className: "drive-summary-stat-number T30 FONT_BOLD" }, yards),
+                React.createElement("div", { className: "drive-summary-stat-label T10" }, "YARDS")),
+            React.createElement("div", { className: "drive-summary-stat-right" },
+                React.createElement("div", { className: "drive-summary-stat-number T30 FONT_BOLD" }, time))),
+        lastPlayMarquee && (React.createElement("div", { className: "drive-summary-marquee", "data-focused": focused },
+            React.createElement("div", { className: "drive-summary-marquee-background" }),
+            React.createElement("div", { className: "drive-summary-marquee-indicator" }),
+            React.createElement("table", { className: "drive-summary-marquee-content" },
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("div", { className: `drive-summary-marquee-text T01 ${focused ? 'drive-summary-marquee-text-animate' : ''}` }, lastPlayMarquee)))))))));
+};
+export default MainStat;

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

@@ -0,0 +1,2 @@
+export { default } from './DriveSummary';
+export { default as DrivePlayCard } from './DrivePlayCard';

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import './GameLeaders.styles.css';
+import AthletesStatistics from '../components/AthletesStatistics';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+class GameLeaders 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, {
+                    offsetTop: 40,
+                });
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    render() {
+        return (React.createElement("section", { className: "game-leaders" },
+            React.createElement("h5", { className: "T05_ALT" }, this.props.item.displayText),
+            this.props.item.items.map((item, index) => (React.createElement(AthletesStatistics, { key: `${index}-${item.awayAthlete.id}`, item: item, focusKey: String(index), onBecameFocused: this.onBecameFocused, onArrowPress: this.onArrowPress, onEnterPress: this.props.onEnterPress })))));
+    }
+}
+Object.defineProperty(GameLeaders, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default GameLeaders;

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

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

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

@@ -0,0 +1,55 @@
+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/src/modules/stats/view/MatchPredictor/DonutChart/index.js

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

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

@@ -0,0 +1,60 @@
+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.item.imageUrl),
+            }
+        });
+        Object.defineProperty(this, "handleImageError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ shouldRenderPredictorImage: false });
+            }
+        });
+    }
+    render() {
+        const { item } = this.props;
+        const { shouldRenderPredictorImage } = this.state;
+        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" }, item.header)),
+            React.createElement("div", { className: "match-predictor-percentages" },
+                React.createElement("div", { className: "team-percentage away-team" },
+                    React.createElement("span", { className: "percentage-value T70" },
+                        item.awayTeam.percentage,
+                        "%"),
+                    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" }, item.awayTeam.abbreviation)))),
+                React.createElement("div", { className: "team-percentage home-team" },
+                    React.createElement("span", { className: "percentage-value T70" },
+                        item.homeTeam.percentage,
+                        "%"),
+                    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" }, item.homeTeam.abbreviation))))),
+            React.createElement("div", { className: "donut-chart-container" }, shouldRenderPredictorImage && item.imageUrl ? (React.createElement("div", { className: "actual-chart" },
+                React.createElement(Image, { src: item.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: item.awayTeam.percentage, homePercentage: item.homeTeam.percentage }),
+                    React.createElement("div", { className: "donut-center" },
+                        React.createElement("div", { className: "center-team-logos" },
+                            React.createElement("div", { className: "center-logo away-center-logo" }, item.awayTeam.logo ? (React.createElement(Image, { src: item.awayTeam.logo, alt: item.awayTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, item.awayTeam.abbreviation))),
+                            React.createElement("div", { className: "center-divider" }),
+                            React.createElement("div", { className: "center-logo home-center-logo" }, item.homeTeam.logo ? (React.createElement(Image, { src: item.homeTeam.logo, alt: item.homeTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, item.homeTeam.abbreviation)))))))))));
+    }
+}
+export default withFocusable()(MatchPredictorView);

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import ScoringSummary from '../ScoringSummary';
+const Penalties = (props) => {
+    return (React.createElement(ScoringSummary, { item: props.item, noScoresText: "No Penalties", onBecameFocused: props.onBecameFocused, onEnterPress: props.onEnterPress }));
+};
+export default Penalties;

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

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

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

@@ -0,0 +1,23 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import './RecentGames.styles.css';
+import Image from '@/components/atoms/Image';
+const RecentGames = (props) => {
+    const item = props.item;
+    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" }, [item.awayTeam, item.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" }, [item.awayTeam, item.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/src/modules/stats/view/RecentGames/index.js

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

package/dist/src/modules/stats/view/ScoringSummary/ExpandedScores/ExpandedScores.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import ScoreItem from '../ScoreItem';
+import './ExpandedScores.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+const NoScoresComponent = (props) => (React.createElement("div", { className: "no-scores T10 focus-ring", "data-focused": props.focused }, props.children));
+const NoScores = withFocusable()(NoScoresComponent);
+const SECTION_TITLE_HEIGHT = 60;
+const MAX_SCORES_PER_SECTION = 10;
+class ExpandedScores extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "refsArray", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "titleRefsArray", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "wrapperRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                maxHeight: '0',
+                scrolled: false,
+            }
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (sectionIndex, scoreFocusedIndex) => () => {
+                this.updateMaxHeight(sectionIndex, scoreFocusedIndex);
+                // set timeout to account for max-height animation transition
+                if (this.wrapperRef) {
+                    const handleTransitionEnd = () => {
+                        this.scrollToElement(scoreFocusedIndex);
+                        this.wrapperRef?.removeEventListener('transitionend', handleTransitionEnd);
+                        this.titleRefsArray.forEach((ref, i) => {
+                            ref.dataset.sectionFocused = String(i === sectionIndex);
+                        });
+                    };
+                    this.wrapperRef.addEventListener('transitionend', handleTransitionEnd);
+                }
+            }
+        });
+    }
+    updateMaxHeight(sectionIndex, scoreFocusedIndex) {
+        const items = this.refsArray.slice(scoreFocusedIndex);
+        const itemsMaxHeight = items.reduce((prev, curr) => {
+            if (!curr) {
+                return prev;
+            }
+            return prev + curr.clientHeight;
+        }, 0);
+        const titles = this.titleRefsArray.slice(sectionIndex);
+        const titlesHeight = titles.reduce((prev, curr) => {
+            if (!curr) {
+                return prev;
+            }
+            return prev + curr.clientHeight;
+        }, 0);
+        const totalMaxHeight = itemsMaxHeight + titlesHeight;
+        this.setState({ maxHeight: `${totalMaxHeight}px` });
+    }
+    scrollToElement(focusedIndex) {
+        const element = this.refsArray[focusedIndex];
+        if (!element) {
+            return;
+        }
+        if (this.wrapperRef) {
+            const wrapperRect = this.wrapperRef.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            const scrollTop = elementRect.top -
+                wrapperRect.top +
+                this.wrapperRef.scrollTop -
+                SECTION_TITLE_HEIGHT;
+            this.wrapperRef.scrollTo({
+                top: scrollTop,
+                behavior: 'smooth',
+            });
+            const hasScrolled = scrollTop > SECTION_TITLE_HEIGHT;
+            if (hasScrolled !== this.state.scrolled) {
+                this.setState({ scrolled: hasScrolled });
+            }
+        }
+    }
+    render() {
+        const { onArrowPress, onBackPress, onEnterPress } = this.props;
+        return (React.createElement("div", { className: "expanded-scores", style: {
+                maxHeight: this.state.maxHeight,
+            }, ref: (ref) => {
+                this.wrapperRef = ref;
+            }, "data-scrolled": this.state.scrolled }, this.props.item.map((item, i) => (React.createElement("div", { key: item.title, className: "expanded-score" },
+            React.createElement("div", { className: "title T05_ALT", ref: (ref) => {
+                    this.titleRefsArray[i] = ref;
+                } }, item.title),
+            !item.scores.length ? (React.createElement("div", { ref: (ref) => {
+                    this.refsArray[i * MAX_SCORES_PER_SECTION] = ref;
+                }, className: "score-item-wrapper" },
+                React.createElement(NoScores, { focusKey: `expanded-${this.props.type}-${i}-0`, parentFocusKey: this.props.parentFocusKey, onBackPress: onBackPress, onEnterPress: onEnterPress, onBecameFocused: this.onBecameFocused(i, i * MAX_SCORES_PER_SECTION), onArrowPress: onArrowPress({ index: i, scoreIndex: 0 }) }, this.props.noScoresText))) : (item.scores.map((score, scoreIndex) => (React.createElement("div", { ref: (ref) => {
+                    this.refsArray[scoreIndex + i * MAX_SCORES_PER_SECTION] = ref;
+                }, key: score.description, className: "score-item-wrapper" },
+                React.createElement(ScoreItem, { key: score.description, item: score, focusKey: `expanded-${this.props.type}-${i}-${scoreIndex}`, parentFocusKey: this.props.parentFocusKey, onArrowPress: onArrowPress({
+                        index: i,
+                        scoreIndex,
+                    }), onBackPress: onBackPress, onBecameFocused: this.onBecameFocused(i, scoreIndex + i * MAX_SCORES_PER_SECTION), onEnterPress: onEnterPress }))))))))));
+    }
+}
+export default ExpandedScores;

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

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

package/dist/src/modules/stats/view/ScoringSummary/ScoreItem/ScoreItem.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+import './ScoreItem.styles.css';
+import { BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK } from '@/modules/key-plays/constants';
+class ScoreItem extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "mounted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "onLoad", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.mounted)
+                    return;
+                this.setState({ imageLoaded: true });
+            }
+        });
+        Object.defineProperty(this, "renderImage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return (React.createElement("div", { className: "image-wrapper" },
+                    !this.state.imageLoaded && (React.createElement(Image, { src: BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK, crossOrigin: "anonymous", alt: "Player Headshot Loading" })),
+                    this.props.item.athleteThumbnail && (React.createElement(Image, { src: this.props.item.athleteThumbnail, crossOrigin: "anonymous", onLoad: this.onLoad, alt: "Athlete Thumbnail", style: {
+                            display: this.state.imageLoaded ? 'block' : 'none',
+                        } })),
+                    React.createElement("div", { className: "athlete-position-badge T02" },
+                        ' ',
+                        React.createElement("span", null, this.props.item.athletePosition))));
+            }
+        });
+        this.state = {
+            imageLoaded: false,
+        };
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        return (React.createElement("div", { className: "score-item focus-ring", "data-focused": this.props.focused },
+            React.createElement("div", { className: "content-wrapper" },
+                this.renderImage(),
+                React.createElement("div", { className: "content-info T02" },
+                    React.createElement("div", { className: "time" },
+                        React.createElement("span", { className: "T10" }, this.props.item.clock),
+                        React.createElement("div", null, this.props.item.teamName)),
+                    React.createElement("div", { className: "description T05_ALT" },
+                        React.createElement("span", null, this.props.item.athleteNumber),
+                        React.createElement("span", { className: "name" }, this.props.item.athleteName),
+                        React.createElement("span", null, this.props.item.athleteAssists)),
+                    React.createElement("div", { className: "assist" }, this.props.item.description)))));
+    }
+}
+export default withFocusable()(ScoreItem);

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

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

package/dist/src/modules/stats/view/ScoringSummary/ScoresSection/ScoresSection.js

@@ -0,0 +1,23 @@
+import Image from '@/components/atoms/Image';
+import React from 'react';
+import './ScoresSection.styles.css';
+import { slugify } from '@/helpers/strings';
+const ScoresSection = (props) => {
+    const renderItems = () => {
+        if (!props.scores.length) {
+            return React.createElement("div", { className: "T10 FONT_BOLD" }, props.noScoresText);
+        }
+        return props.scores.map((score) => (React.createElement("div", { key: slugify(score.description), className: "scoring-row FONT_BOLD" },
+            React.createElement("div", { className: "clock T10" }, score.clock),
+            React.createElement(Image, { src: score.teamLogo, className: score.teamName + '-logo', width: 48, height: 48 }),
+            React.createElement("div", { className: "athlete-info T05_ALT" },
+                React.createElement("div", { className: "athlete-number" }, score.athleteNumber),
+                React.createElement("div", { className: "athlete-name" }, score.athleteName),
+                React.createElement("div", { className: "athlete-assists" }, score.athleteAssists)))));
+    };
+    return (React.createElement("div", { key: props.title, className: "scoring-section" },
+        React.createElement("span", { className: "T05_ALT" }, props.title),
+        React.createElement("div", { className: "divider" }),
+        renderItems()));
+};
+export default ScoresSection;

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

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

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import Icon from '@/components/atoms/SvgIcon';
+import { withFocusable, } from '@/external/spatial-navigation';
+import SDK from '@/index';
+import './ScoringSummary.styles.css';
+import ScoresSection from './ScoresSection';
+import ExpandedScores from './ExpandedScores';
+import { slugify } from '@/helpers/strings';
+class ScoringSummary extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "onExpandedScoreArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (props) => (d) => {
+                const { index, scoreIndex } = props;
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                    return false;
+                }
+                if (d === 'up' && index === 0 && scoreIndex === 0) {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
+                    this.setState({
+                        expanded: false,
+                    });
+                    return false;
+                }
+                const scoreSection = this.props.item.sections[index];
+                const allScores = scoreSection ? scoreSection.scores : [];
+                const allScoresLength = !allScores.length ? 1 : allScores.length;
+                if (d === 'down' &&
+                    scoreIndex === allScoresLength - 1 &&
+                    index === this.props.item.sections.length - 1) {
+                    this.setState({
+                        expanded: false,
+                    }, () => {
+                        SDK.getMaestroEventViewModel().navigation.navigateByDirection('down');
+                    });
+                    return false;
+                }
+                return true;
+            }
+        });
+        Object.defineProperty(this, "onExpandedScoreBackPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({
+                    expanded: false,
+                }, () => {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
+                });
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        this.state = {
+            expanded: false,
+        };
+    }
+    onEnterPress() {
+        const newValue = !this.state.expanded;
+        this.setState({
+            expanded: newValue,
+        }, () => {
+            if (newValue) {
+                SDK.getMaestroEventViewModel().navigation.setFocus(`expanded-${this.props.item.type}-0-0`);
+            }
+        });
+        this.props.onEnterPress();
+    }
+    get cardFocusKey() {
+        return slugify(this.props.item.title);
+    }
+    renderContent() {
+        const noScoresText = this.props.noScoresText || 'No Goals Scored';
+        if (!this.state.expanded) {
+            return this.props.item.sections.map((section) => (React.createElement(ScoresSection, { key: section.title, scores: section.scores, title: section.title, noScoresText: noScoresText })));
+        }
+        return (React.createElement(ExpandedScores, { item: this.props.item.sections, type: this.props.item.type, noScoresText: noScoresText, onArrowPress: this.onExpandedScoreArrowPress, onBackPress: this.onExpandedScoreBackPress, onEnterPress: this.props.onEnterPress, parentFocusKey: this.cardFocusKey }));
+    }
+    render() {
+        return (React.createElement(FocusableWrapper, { displayText: this.props.item.title, onEnterPress: this.onEnterPress.bind(this), onBecameFocused: this.props.onBecameFocused, onArrowPress: this.onArrowPress, expanded: this.state.expanded, focusKey: this.cardFocusKey }, this.renderContent()));
+    }
+}
+const Wrapper = (props) => {
+    return (React.createElement("section", { className: "scoring-summary 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.expanded && React.createElement("div", { className: "divider" }),
+        props.children));
+};
+const FocusableWrapper = withFocusable()(Wrapper);
+export default ScoringSummary;

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

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