npm - @maestro_io/maestro-web-sdk - Versions diffs - 5.0.0 → 5.1.1 - Mend

@maestro_io/maestro-web-sdk 5.0.0 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (627) hide show

package/dist/6.maestro-web-sdk.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["webpack:///./src/components/atoms/Image/index.tsx","webpack:///./src/components/core/ScrollableContainer/index.ts","webpack:///./src/components/atoms/BaseButton/index.ts","webpack:///./src/components/molecules/ActionButton/ActionButton.styles.css?ed9b","webpack:///./src/components/molecules/ActionButton/ActionButton.tsx","webpack:///./src/components/molecules/ActionButton/index.ts","webpack:///./src/components/atoms/SvgIcon/index.ts","webpack:///./src/hooks/useMaxHeightToBottom.ts","webpack:///./src/components/molecules/TabLoadError/TabLoadError.styles.css","webpack:///./src/components/molecules/ActionButton/ActionButton.styles.css","webpack:///./src/components/molecules/TabLoadError/TabLoadError.styles.css?59a9","webpack:///./src/components/molecules/TabLoadError/TabLoadError.tsx","webpack:///./src/components/molecules/TabLoadError/index.ts","webpack:///./src/modules/espn/key-plays/constants.ts","webpack:///./src/modules/espn/key-plays/view/KeyPlaysView.styles.css","webpack:///./src/modules/espn/key-plays/view/KeyPlayCardView.styles.css","webpack:///./src/modules/espn/key-plays/view/KeyPlayErrorStateView.styles.css","webpack:///./src/modules/espn/key-plays/view/KeyPlayCardView.styles.css?c352","webpack:///./src/modules/espn/key-plays/view/KeyPlayCardScoreTagView.tsx","webpack:///./src/modules/espn/key-plays/view/KeyPlayCardView.tsx","webpack:///./src/modules/espn/key-plays/view/KeyPlaysView.styles.css?eaad","webpack:///./src/modules/espn/key-plays/view/KeyPlayErrorStateView.styles.css?d22f","webpack:///./src/modules/espn/key-plays/view/KeyPlayErrorStateView.tsx","webpack:///./src/modules/espn/key-plays/view/KeyPlaysView.tsx"],"names":["Image","React","Component","constructor","props","super","_defineProperty","failed","this","setState","render","state","console","warn","src","createElement","_extends","alt","onError","handleError","ScrollableContainer","BaseButton","options","locals","ActionButton","children","focused","_focused","focusKey","_focusKey","parentFocusKey","_parentFocusKey","preferredChildFocusKey","_preferredChildFocusKey","forgetLastFocusedChild","_forgetLastFocusedChild","trackChildren","_trackChildren","autoRestoreFocus","_autoRestoreFocus","blockNavigationOut","_blockNavigationOut","hasFocusedChild","_hasFocusedChild","focusable","_focusable","onEnterPress","_onEnterPress","onEnterRelease","_onEnterRelease","onBackPress","_onBackPress","onArrowPress","_onArrowPress","onBecameFocused","_onBecameFocused","onBecameBlurred","_onBecameBlurred","realFocusKey","_realFocusKey","setFocus","_setFocus","navigateByDirection","_navigateByDirection","stealFocus","_stealFocus","onUpdateFocus","_onUpdateFocus","onUpdateHasFocusedChild","_onUpdateHasFocusedChild","buttonProps","className","withFocusable","Icon","calculateMaxHeight","element","rect","getBoundingClientRect","style","maxHeight","window","innerHeight","top","useMaxHeightToBottom","elementRef","useRef","handleResize","useCallback","current","useEffect","addEventListener","removeEventListener","setupMaxHeightToBottom","getElement","___CSS_LOADER_EXPORT___","push","module","i","TabLoadErrorView","data-focused","BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK","ScoreCard","awayTeamScore","homeTeamScore","homeTeamName","awayTeamName","KeyPlayCardView","imageLoaded","playerImageUrl","teamImageUrl","thumbnailImageUrl","isScoring","crossOrigin","onLoad","display","data-has-score","vm","SDK","getMaestroEventViewModel","keyPlaysViewModel","failedClip","viewModel","failedClips","value","clipID","Error","componentDidMount","failedClipListener","subscribe","componentWillUnmount","description","isPlaying","playbackProgress","id","renderImage","max","iconName","width","height","FocusableKeyPlayCard","KeyPlayCard","scrollToFocusedElement","useScrollableContainer","handleLeftPressed","d","deliverFocus","layout","FocusableItem","UnpopulatedEvent","maxHeightRef","ref","Array","from","length","map","_","key","UnsupportedEvent","viewBox","fill","xmlns","opacity","x","y","transform","KeyPlayErrorStateView","args","errorState","onRetry","KeyPlays","_this$viewModel$curre","_this$viewModel$curre2","_this$viewModel$filte","index","async","playKeyPlay","e","container","maxHeightCleanup","scrollableContainer","currentClipPlaybackProgress","playbackIndex","currentlyPlayingClipIndex","items","filteredItems","playbackProgressUnsub","playbackIndexUnsub","itemsUnsub","scrollableContainerRef","containerTopOffset","setContainerRef","section","sectionIndex","title","item","_this$vm$allItems$fin","_this$vm","absoluteIndex","allItems","findIndex","vmItem","isCurrentlyPlaying","Boolean","handlePlayClip","KeyPlaysWithErrorState","userRequestedNewKeyPlaysData","errorStateUnsub","init","handleRetry"],"mappings":"kwBAKA,MAAMA,UAAcC,IAAMC,UAKxBC,YAAYC,GACVC,MAAMD,GAAOE,EAAA,aALP,CACNC,QAAQ,IACTD,EAAA,mBAMa,KACZE,KAAKC,SAAS,CAAEF,QAAQ,MAG1BG,SACE,OAAIF,KAAKG,MAAMJ,QACbK,QAAQC,KAAK,wBAAyBL,KAAKJ,MAAMU,KAC1C,MAGJN,KAAKJ,MAAMU,IAMdb,IAAAc,cAAA,MAAAC,EAAA,CACEC,IAAKT,KAAKJ,MAAMa,KAAO,SACnBT,KAAKJ,MAAK,CACdc,QAASV,KAAKW,gBARhBP,QAAQC,KAAK,yBACN,OAaEb,O,iCCvCf,YAMeoB,MAAmB,G,qCCJnBC,E,MAAU,E,yBCCrBC,EAAU,CAEd,OAAiB,OACjB,WAAoB,G,GAEP,IAAI,IAASA,GAIX,IAAQC,O,8OCWvB,MAAMC,UAAqBvB,IAAMC,UAC/BQ,SACE,MAAM,SACJe,EAEAC,QAASC,EACTC,SAAUC,EACVC,eAAgBC,EAChBC,uBAAwBC,EACxBC,uBAAwBC,EACxBC,cAAeC,EACfC,iBAAkBC,EAClBC,mBAAoBC,EACpBC,gBAAiBC,EACjBC,UAAWC,EACXC,aAAcC,EACdC,eAAgBC,EAChBC,YAAaC,EACbC,aAAcC,EACdC,gBAAiBC,EACjBC,gBAAiBC,EAEjBC,aAAcC,EACdC,SAAUC,EACVC,oBAAqBC,EACrBC,WAAYC,EACZC,cAAeC,EACfC,wBAAyBC,KACtBC,GACD9D,KAAKJ,MAET,OACEH,IAAAc,cAACM,EAAUL,EAAA,CAACuD,UAAU,yBAA4BD,GAC/C7C,IAMM+C,oBAAgBhD,GC5DhBA,O,iCCFf,YAEeiD,MAAI,G,iCCFnB,+EAMA,SAASC,EAAmBC,GAC1B,IAAKA,EAAS,OACd,MAAMC,EAAOD,EAAQE,wBACrBF,EAAQG,MAAMC,UAAeC,OAAOC,YAAcL,EAAKM,IAA7B,KAOrB,SAASC,IAGd,MAAMC,EAAaC,iBAA8B,MAE3CC,EAAeC,sBAAY,KAC/Bb,EAAmBU,EAAWI,UAC7B,IAEHC,oBAAU,KACRT,OAAOU,iBAAiB,SAAUJ,GAC3B,KACLN,OAAOW,oBAAoB,SAAUL,KAEtC,CAACA,IAOJ,OALoBC,sBAAaZ,IAC/BS,EAAWI,QAAUb,EACrBD,EAAmBC,IAClB,IASE,SAASiB,EACdC,GAEA,MAAMP,EAAeA,KACnBZ,EAAmBmB,MAQrB,OAJAP,IAEAN,OAAOU,iBAAiB,SAAUJ,GAE3B,KACLN,OAAOW,oBAAoB,SAAUL,M,iCCzDzC,2BAGIQ,EAHJ,MAG8B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACC,EAAOC,EAAI,yPAA0P,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,6EAA6E,MAAQ,GAAG,SAAW,8GAA8G,eAAiB,CAAC,0PAA0P,WAAa,MAEzxB,O,iCCPf,2BAGIH,EAHJ,MAG8B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACC,EAAOC,EAAI,oQAAqQ,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,6EAA6E,MAAQ,GAAG,SAAW,sFAAsF,eAAiB,CAAC,qQAAqQ,WAAa,MAEvxB,O,+FCJX3E,EAAU,CAEd,OAAiB,OACjB,WAAoB,GAEP,IAAI,IAASA,GAIX,IAAQC,OCJvB,MAAM2E,UAAyBjG,IAAMC,UACnCQ,SACE,MAAM,QAAEgB,GAAYlB,KAAKJ,MAEzB,OACEH,IAAAc,cAAA,OAAKoF,eAAczE,EAAS6C,UAAU,6BACpCtE,IAAAc,cAAA,MAAIwD,UAAU,OAAM,wBACpBtE,IAAAc,cAAA,KAAGwD,UAAU,OACV,gEAEHtE,IAAAc,cAACS,IAAY,CACX2E,eAAczE,EACdoB,aAActC,KAAKJ,MAAM0C,cAC1B,eAQM0B,oBAAgB0B,GC3BhBA,O,iCCAf,kCAAO,MAoUME,EACX,+yO,iCCvUF,2BAGIN,EAHJ,MAG8B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACC,EAAOC,EAAI,y6BAA06B,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,uEAAuE,MAAQ,GAAG,SAAW,saAAsa,eAAiB,CAAC,06BAA06B,WAAa,MAE36E,O,iCCPf,2BAGIH,EAHJ,MAG8B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACC,EAAOC,EAAI,6tFAA8tF,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,0EAA0E,MAAQ,GAAG,SAAW,6mCAA6mC,eAAiB,CAAC,8tFAA8tF,WAAa,MAE7tN,O,iCCPf,2BAGIH,EAHJ,MAG8B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACC,EAAOC,EAAI,w1GAAy1G,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,gFAAgF,MAAQ,GAAG,SAAW,whCAAwhC,eAAiB,CAAC,y1GAAy1G,WAAa,MAEp4P,O,wLCJX3E,EAAU,CAEd,OAAiB,OACjB,WAAoB,G,GAEP,IAAI,IAASA,GAIX,IAAQC,O,uBCVR,MAAM8E,UAAkBpG,IAAMC,UAS3CQ,SACE,MAAM,cACJ4F,EAAa,cACbC,EAAa,aACbC,EAAY,aACZC,GACEjG,KAAKJ,MAET,OAAKkG,GAAkBC,GAAkBC,GAAiBC,EAKxDxG,IAAAc,cAAA,OAAKwD,UAAU,SACbtE,IAAAc,cAAA,OAAKwD,UAAU,sBACbtE,IAAAc,cAAA,YAAOyF,GACPvG,IAAAc,cAAA,QAAMwD,UAAU,6BAA6BgC,IAE/CtG,IAAAc,cAAA,OAAKwD,UAAU,sBACbtE,IAAAc,cAAA,QAAMwD,UAAU,6BAA6B+B,GAC7CrG,IAAAc,cAAA,YAAO0F,KAXJ,M,wqBCQN,MAAMC,UAAwBzG,IAAMC,UAOzCC,YAAYC,GACVC,MAAMD,GAAOE,EAAA,0BAJ0B,QAAQA,EAAA,kBAAAA,EAAA,cAmCxC,KACPE,KAAKC,SAAS,CAAEkG,aAAa,MAC9BrG,EAAA,mBAEa,KACZ,MAAM,eACJsG,EAAc,aACdC,EAAY,kBACZC,EAAiB,UACjBC,GACEvG,KAAKJ,MACT,OAAIwG,EAEA3G,IAAAc,cAACf,IAAK,CACJc,IAAK8F,EACLI,YAAY,YACZ/F,IAAI,wBACJsD,UAAU,YACV0C,OAAQzG,KAAKyG,OACbnC,MAAO,CACLoC,QAAS1G,KAAKG,MAAMgG,YAAc,QAAU,QAE9CQ,iBAAgBJ,IAKlBF,EAEA5G,IAAAc,cAACf,IAAK,CACJc,IAAK+F,EACLG,YAAY,YACZ/F,IAAI,sBACJsD,UAAU,YACV0C,OAAQzG,KAAKyG,OACbnC,MAAO,CACLoC,QAAS1G,KAAKG,MAAMgG,YAAc,QAAU,QAE9CQ,iBAAgBJ,IAKlBD,EAEA7G,IAAAc,cAACf,IAAK,CACJc,IAAKgG,EACLE,YAAY,YACZ/F,IAAI,2BACJsD,UAAU,YACV0C,OAAQzG,KAAKyG,OACbnC,MAAO,CACLoC,QAAS1G,KAAKG,MAAMgG,YAAc,QAAU,UAM7C,OAxFPnG,KAAK4G,GAAKC,UAAIC,2BACXC,kBACH/G,KAAKG,MAAQ,CACX6G,WAAYhH,KAAKiH,UAAUC,YAAYC,MAAMvH,EAAMwH,SAAW,KAC9DjB,aAAa,GAIjB,gBACE,IAAKnG,KAAK4G,GACR,MAAM,IAAIS,MAAM,wCAGlB,OAAOrH,KAAK4G,GAGdU,oBACEtH,KAAKuH,mBAAqBvH,KAAKiH,UAAUC,YAAYM,UAClDN,IACClH,KAAKC,SAAS,CAAE+G,WAAYE,EAAYlH,KAAKJ,MAAMwH,YAKzDK,uBACMzH,KAAKuH,oBACPvH,KAAKuH,qBAiETrH,SACE,MAAM,OACJkH,EAAM,YACNM,EAAW,UACXC,EAAS,iBACTC,EAAgB,UAChBrB,EAAS,QACTrF,EAAO,cACP4E,EAAa,cACbC,EAAa,aACbC,EAAY,aACZC,GACEjG,KAAKJ,OACH,WAAEoH,GAAehH,KAAKG,MAE5B,OACEV,IAAAc,cAAA,OACEwD,UAAU,2BACV8D,GAAIT,EACJzB,eAAczE,GAEdzB,IAAAc,cAAA,OAAKwD,UAAU,0BACX/D,KAAKG,MAAMgG,aACX1G,IAAAc,cAACf,IAAK,CACJc,IAAKsF,IACLY,YAAY,YACZ/F,IAAI,2BACJsD,UAAU,cAGb/D,KAAK8H,cACNrI,IAAAc,cAAA,OAAKwD,UAAU,wBACbtE,IAAAc,cAAA,OAAKwD,UAAU,cAAc2D,KAGhCC,GAAkC,OAArBC,GACZnI,IAAAc,cAAA,YAAU4G,MAAOS,EAAkBG,IAAI,MAExCxB,GACC9G,IAAAc,cAACsF,EAAS,CACRC,cAAeA,EACfC,cAAeA,EACfC,aAAcA,EACdC,aAAcA,IAIF,kBAAfe,GACCvH,IAAAc,cAAA,OAAKwD,UAAU,eACbtE,IAAAc,cAAA,OAAKwD,UAAU,qBACbtE,IAAAc,cAAA,OAAKwD,UAAU,oBACbtE,IAAAc,cAAC0D,IAAI,CAAC+D,SAAS,UAAUC,MAAO,KAAMC,OAAQ,OAC9CzI,IAAAc,cAAA,QAAMwD,UAAU,WAAU,iCAKlB,qBAAfiD,GACCvH,IAAAc,cAAA,OAAKwD,UAAU,0BACbtE,IAAAc,cAAC0D,IAAI,CAAC+D,SAAS,UAAUC,MAAO,KAAMC,OAAQ,UAQ1D,MAAMC,EAAuBnE,cAC3BkC,GAgCakC,MA3BVxI,IACH,MAAM,uBAAEyI,GAA2BC,cAE7BC,EAAoBxD,sBAAayD,IAC3B,SAANA,GACF3B,UAAIC,2BAA2B2B,gBAEhC,IAEG3F,EAAkBiC,sBACrB2D,IACCL,EAAuBK,IAEzB,CAACL,IAGH,OACE5I,IAAAc,cAACoI,IAAa,KACZlJ,IAAAc,cAAC4H,EAAoB3H,EAAA,GACfZ,EAAK,CACTgD,aAAc2F,EACdzF,gBAAiBA,O,SC3NrB,EAAU,CAEd,OAAiB,OACjB,WAAoB,G,GAEP,IAAI,IAAS,GAIX,IAAQ/B,O,QCTnB,EAAU,CAEd,OAAiB,OACjB,WAAoB,G,GAEP,IAAI,IAAS,GAIX,IAAQA,O,8cCCvB,MAAM6H,EAAmBA,KACvB,MAAMC,EAAelE,cAErB,OACElF,IAAAc,cAAA,OACEuI,IAAKD,EACL9E,UAAU,8CAEVtE,IAAAc,cAAA,OAAKwD,UAAU,gBACbtE,IAAAc,cAAA,MAAIwD,UAAU,OAAM,uCACpBtE,IAAAc,cAAA,KAAGwD,UAAU,OAAM,+DAIrBtE,IAAAc,cAAA,OAAKwD,UAAU,6BACZgF,MAAMC,KAAK,CAAEC,OAAQ,IAAKC,IAAI,CAACC,EAAG1D,IACjChG,IAAAc,cAAA,OAAK6I,IAAK3D,EAAG1B,UAAU,WACrBtE,IAAAc,cAAA,OAAKwD,UAAU,UACftE,IAAAc,cAAA,OAAKwD,UAAU,WACbtE,IAAAc,cAAA,OAAKwD,UAAU,aACftE,IAAAc,cAAA,OAAKwD,UAAU,eAS7B,MAAMsF,UAAyB5J,IAAMC,UACnCQ,SACE,OACET,IAAAc,cAAA,OAAKwD,UAAU,8CACbtE,IAAAc,cAAA,MAAIwD,UAAU,OAAM,0BACpBtE,IAAAc,cAAA,OACE+I,QAAQ,cACRC,KAAK,OACLC,MAAM,8BAEN/J,IAAAc,cAAA,KAAGkJ,QAAQ,QACThK,IAAAc,cAAA,QACEiI,EAAE,4FACFe,KAAK,YAEP9J,IAAAc,cAAA,QACEmJ,EAAE,UACFC,EAAE,UACF1B,MAAM,UACNC,OAAO,SACPqB,KAAK,YAEP9J,IAAAc,cAAA,QACEmJ,EAAE,UACFC,EAAE,UACF1B,MAAM,UACNC,OAAO,UACPqB,KAAK,YAEP9J,IAAAc,cAAA,QACEiI,EAAE,oEACFe,KAAK,YAEP9J,IAAAc,cAAA,QACEiI,EAAE,wFACFe,KAAK,YAEP9J,IAAAc,cAAA,QACE0H,MAAM,UACNC,OAAO,SACP0B,UAAU,mCACVL,KAAK,YAEP9J,IAAAc,cAAA,QACE0H,MAAM,UACNC,OAAO,UACP0B,UAAU,mCACVL,KAAK,YAEP9J,IAAAc,cAAA,QACEiI,EAAE,oEACFe,KAAK,YAEP9J,IAAAc,cAAA,QACEiI,EAAE,oEACFe,KAAK,YAEP9J,IAAAc,cAAA,QACEmJ,EAAE,UACFC,EAAE,UACF1B,MAAM,UACNC,OAAO,UACPqB,KAAK,YAEP9J,IAAAc,cAAA,QACEmJ,EAAE,UACFC,EAAE,UACF1B,MAAM,UACNC,OAAO,UACPqB,KAAK,gBASnB,MAAMM,UAA8BpK,IAAMC,UAAqBC,eAAAmK,GAAA,SAAAA,GAAAhK,EAAA,oBAC7C0I,IACJ,SAANA,GACF3B,UAAIC,2BAA2B2B,iBAInCvI,SACE,MAAM,WAAE6J,EAAU,QAAEC,GAAYhK,KAAKJ,MAErC,MAAmB,qBAAfmK,EACKtK,IAAAc,cAAC8I,EAAgB,MAGP,qBAAfU,EACKtK,IAAAc,cAACqI,EAAgB,MAGP,mBAAfmB,EAEAtK,IAAAc,cAACmF,IAAgB,CACfpD,aAAc0H,EACdpH,aAAc5C,KAAK4C,eAKlB,MAIIiH,Q,scChIR,MAAMI,UAAiBvK,YAQ5BC,YAAYC,GAAW,IAAAsK,EAAAC,EAAAC,EACrBvK,MAAMD,GAAOE,EAAA,iBAR4B,MAAIA,EAAA,6BACK,MAAIA,EAAA,0BACP,MAAIA,EAAA,kBACZ,MAAIA,EAAA,wBACE,MAAIA,EAAA,kBAAAA,EAAA,sBAuDzBuK,GAAkBC,gBACpCtK,KAAKiH,UAAUsD,YAAYF,KAClCvK,EAAA,uBAEkB0K,IACbA,IAAMxK,KAAKyK,YACbzK,KAAKyK,UAAYD,GAGfxK,KAAKyK,YAAcD,IACrBxK,KAAKyK,UAAYD,EACbxK,KAAK0K,kBACP1K,KAAK0K,mBAEH1K,KAAKyK,YACPzK,KAAK0K,iBAAmBtF,YAAuB,IAAMpF,KAAKyK,eAjE9DzK,KAAK4G,GAAKC,UAAIC,2BACXC,kBACH/G,KAAKG,MAAQ,CACXwK,oBAAqB,KACrB/C,iBACkD,QADlCsC,EACdlK,KAAKiH,UAAU2D,4BAA4BzD,aAAK,IAAA+C,IAAI,KACtDW,cAA6D,QAAhDV,EAAEnK,KAAKiH,UAAU6D,0BAA0B3D,aAAK,IAAAgD,IAAI,KACjEY,MAAyC,QAApCX,EAAEpK,KAAKiH,UAAU+D,cAAc7D,aAAK,IAAAiD,IAAI,IAIjD,gBACE,IAAKpK,KAAK4G,GACR,MAAM,IAAIS,MAAM,wCAGlB,OAAOrH,KAAK4G,GAGdU,oBACEtH,KAAKiL,sBAAwBjL,KAAKiH,UAAU2D,4BAA4BpD,UACrEL,IACCnH,KAAKC,SAAS,CAAE2H,iBAAkBT,UAAS,SAG/CnH,KAAKkL,mBAAqBlL,KAAKiH,UAAU6D,0BAA0BtD,UAChEL,IACCnH,KAAKC,SAAS,CAAE4K,cAAe1D,UAAS,SAG5CnH,KAAKmL,WAAanL,KAAKiH,UAAU+D,cAAcxD,UAAWuD,IACxD/K,KAAKC,SAAS,CACZ8K,YAIJ/K,KAAKC,SAAS,CACZ0K,oBAAqB3K,KAAKyK,YAG5BzK,KAAK0K,iBAAmBtF,YAAuB,IAAMpF,KAAKyK,WAG5DhD,uBACEzH,KAAKiL,uBAAyBjL,KAAKiL,wBACnCjL,KAAKkL,oBAAsBlL,KAAKkL,qBAChClL,KAAKmL,YAAcnL,KAAKmL,aACxBnL,KAAK0K,kBAAoB1K,KAAK0K,mBAuBhCxK,SACE,MAAM,iBACJ0H,EAAgB,cAChBiD,EAAa,MACbE,EAAK,oBACLJ,GACE3K,KAAKG,MAET,OACEV,IAAAc,cAACK,IAAmB,CAClBwK,uBAAwBT,EACxBU,mBAtGqB,IAwGrB5L,IAAAc,cAAA,OAAKuI,IAAK9I,KAAKsL,gBAAiBvH,UAAU,kBACvCgH,EAAM7B,IAAI,CAACqC,EAASC,IACnB/L,IAAAc,cAAA,OAAK6I,IAAK,WAAWoC,EAAgBzH,UAAU,qBAC5CwH,EAAQE,OACPhM,IAAAc,cAAA,MAAIwD,UAAU,+BAA+BwH,EAAQE,OAEvDhM,IAAAc,cAAA,OAAKwD,UAAU,2BACZwH,EAAQR,MAAM7B,IAAKwC,IAAS,IAAAC,EAAAC,EAC3B,MAAMC,EAGH,QAHgBF,EACV,QADUC,EACjB5L,KAAK4G,UAAE,IAAAgF,OAAA,EAAPA,EAASE,SAASC,UACfC,GAAWA,EAAOnE,KAAO6D,EAAK7D,WAChC,IAAA8D,KAAK,EACR,OACElM,IAAAc,cAAC2F,EAAe,CACdkD,IAAKsC,EAAK7D,GACVA,GAAI6D,EAAK7D,GACTT,OAAQsE,EAAKtE,OACbM,YAAagE,EAAKhE,YAClBzB,aAAcyF,EAAKzF,aACnBD,aAAc0F,EAAK1F,aACnBF,cAAe4F,EAAK5F,cACpBC,cAAe2F,EAAK3F,cACpBK,eAAgBsF,EAAKtF,eACrBC,aAAcqF,EAAKrF,aACnBC,kBAAmBoF,EAAKpF,kBACxBqB,UAAW3H,KAAKiH,UAAUgF,mBACxBJ,GAEFtF,UAAW2F,QACTR,EAAK5F,eAAiB4F,EAAK3F,eAE7B6B,iBACEiE,IAAkBhB,EACdjD,EACA,KAENtF,aAActC,KAAKmM,eAAeN,UAO9CpM,IAAAc,cAAA,OAAKwD,UAAU,gCAWV,MAAMqI,UAA+B1M,YAOlDC,YAAYC,GACVC,MAAMD,GAAOE,EAAA,uBAJ+B,MAAIA,EAAA,kBAAAA,EAAA,mBA+B5BwK,gBACdtK,KAAKiH,UAAUoF,iCA3BrBrM,KAAK4G,GAAKC,UAAIC,2BACXC,kBACH/G,KAAKG,MAAQ,CACX4J,WAAY/J,KAAKiH,UAAU8C,WAAW5C,OAI1C,gBACE,IAAKnH,KAAK4G,GACR,MAAM,IAAIS,MAAM,wCAGlB,OAAOrH,KAAK4G,GAGdU,oBACEtH,KAAKsM,gBAAkBtM,KAAKiH,UAAU8C,WAAWvC,UAAWL,IAC1DnH,KAAKC,SAAS,CAAE8J,WAAY5C,MAE9BnH,KAAKiH,UAAUsF,OAGjB9E,uBACEzH,KAAKsM,iBAAmBtM,KAAKsM,kBAO/BpM,SACE,MAAM,WAAE6J,GAAe/J,KAAKG,MAC5B,OAAI4J,EAEAtK,IAAAc,cAACsJ,EAAqB,CACpBE,WAAYA,EACZC,QAAShK,KAAKwM,cAKb/M,IAAAc,cAAC0J,EAAQ","file":"6.maestro-web-sdk.esm.js","sourcesContent":["import React from 'react';\nimport { ImgHTMLAttributes } from 'react';\n\ninterface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {}\n\nclass Image extends React.Component<ImageProps> {\n state = {\n failed: false,\n };\n\n constructor(props: ImageProps) {\n super(props);\n }\n\n handleError = () => {\n this.setState({ failed: true });\n };\n\n render() {\n if (this.state.failed) {\n console.warn('Image failed to load:', this.props.src);\n return null;\n }\n\n if (!this.props.src) {\n console.warn('Image source is empty');\n return null;\n }\n\n return (\n <img\n alt={this.props.alt || 'Image'}\n {...this.props}\n onError={this.handleError}\n />\n );\n }\n}\n\nexport default Image;\n","import ScrollableContainer from './ScrollableContainer';\n\nexport { ScrollableContainerContext } from './ScrollableContainer';\nexport { useScrollableContainer } from './useScrollableContainer';\nexport { default as FocusableItem } from './FocusableItem';\nexport type { ScrollableContainerContextType } from './ScrollableContainer';\nexport default ScrollableContainer;\n","import BaseButton from './BaseButton';\n\nexport default BaseButton;\n","import api from \"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./ActionButton.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import BaseButton from '@/components/atoms/BaseButton';\nimport './ActionButton.styles.css';\nimport {\n withFocusable,\n WithFocusableProps,\n} from '@/external/spatial-navigation';\nimport React from 'react';\n\ntype SpatialNavigationInjectedProps = {\n realFocusKey?: string;\n setFocus?: (focusKey: string) => void;\n navigateByDirection?: (...args: any[]) => any;\n stealFocus?: () => void;\n onUpdateFocus?: (focused: boolean) => void;\n onUpdateHasFocusedChild?: (hasFocusedChild: boolean) => void;\n};\n\ntype Props = React.PropsWithChildren<\n React.ButtonHTMLAttributes<HTMLButtonElement> &\n WithFocusableProps &\n SpatialNavigationInjectedProps\n>;\n\nclass ActionButton extends React.Component<Props, {}> {\n render() {\n const {\n children,\n // spatial-navigation props (must not hit DOM)\n focused: _focused,\n focusKey: _focusKey,\n parentFocusKey: _parentFocusKey,\n preferredChildFocusKey: _preferredChildFocusKey,\n forgetLastFocusedChild: _forgetLastFocusedChild,\n trackChildren: _trackChildren,\n autoRestoreFocus: _autoRestoreFocus,\n blockNavigationOut: _blockNavigationOut,\n hasFocusedChild: _hasFocusedChild,\n focusable: _focusable,\n onEnterPress: _onEnterPress,\n onEnterRelease: _onEnterRelease,\n onBackPress: _onBackPress,\n onArrowPress: _onArrowPress,\n onBecameFocused: _onBecameFocused,\n onBecameBlurred: _onBecameBlurred,\n // injected/internal props (also must not hit DOM)\n realFocusKey: _realFocusKey,\n setFocus: _setFocus,\n navigateByDirection: _navigateByDirection,\n stealFocus: _stealFocus,\n onUpdateFocus: _onUpdateFocus,\n onUpdateHasFocusedChild: _onUpdateHasFocusedChild,\n ...buttonProps\n } = this.props;\n\n return (\n <BaseButton className=\"action-button T05_ALT\" {...buttonProps}>\n {children}\n </BaseButton>\n );\n }\n}\n\nexport default withFocusable()(ActionButton);\n","import ActionButton from './ActionButton';\n\nexport default ActionButton;\n","import Icon from './Icon';\n\nexport default Icon;\n","import { useCallback, useEffect, useRef } from 'react';\n\n/**\n * Calculates and sets maxHeight on an element to fill remaining viewport height.\n * Updates on window resize.\n */\nfunction calculateMaxHeight(element: HTMLElement | null): void {\n if (!element) return;\n const rect = element.getBoundingClientRect();\n element.style.maxHeight = `${window.innerHeight - rect.top}px`;\n}\n\n/**\n * Hook for functional components.\n * Returns a ref callback that sets up maxHeight calculation with resize listener.\n */\nexport function useMaxHeightToBottom(): (\n element: HTMLDivElement | null\n) => void {\n const elementRef = useRef<HTMLDivElement | null>(null);\n\n const handleResize = useCallback(() => {\n calculateMaxHeight(elementRef.current);\n }, []);\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [handleResize]);\n\n const refCallback = useCallback((element: HTMLDivElement | null) => {\n elementRef.current = element;\n calculateMaxHeight(element);\n }, []);\n\n return refCallback;\n}\n\n/**\n * Utility for class components.\n * Call in componentDidMount, returns cleanup function for componentWillUnmount.\n */\nexport function setupMaxHeightToBottom(\n getElement: () => HTMLElement | null\n): () => void {\n const handleResize = () => {\n calculateMaxHeight(getElement());\n };\n\n // Initial calculation\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n}\n\nexport default useMaxHeightToBottom;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".tab-load-error {\\n display: block;\\n padding: 24px;\\n background-color: var(--sdk-surface4);\\n}\\n\\n.tab-load-error h3 {\\n margin: 0;\\n font-family: var(--sdk-font-headline);\\n}\\n\\n.tab-load-error p {\\n margin: 16px 0;\\n height: 86px;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/molecules/TabLoadError/TabLoadError.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,cAAc;EACd,aAAa;EACb,qCAAqC;AACvC;;AAEA;EACE,SAAS;EACT,qCAAqC;AACvC;;AAEA;EACE,cAAc;EACd,YAAY;AACd\",\"sourcesContent\":[\".tab-load-error {\\n display: block;\\n padding: 24px;\\n background-color: var(--sdk-surface4);\\n}\\n\\n.tab-load-error h3 {\\n margin: 0;\\n font-family: var(--sdk-font-headline);\\n}\\n\\n.tab-load-error p {\\n margin: 16px 0;\\n height: 86px;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".action-button {\\n padding: 23px 0;\\n background-color: var(--sdk-surface5);\\n color: var(--sdk-text100);\\n}\\n\\n.action-button:hover,\\n.action-button[data-focused='true'] {\\n background-color: var(--sdk-accentPrimary);\\n color: var(--sdk-text500);\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/molecules/ActionButton/ActionButton.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,eAAe;EACf,qCAAqC;EACrC,yBAAyB;AAC3B;;AAEA;;EAEE,0CAA0C;EAC1C,yBAAyB;AAC3B\",\"sourcesContent\":[\".action-button {\\n padding: 23px 0;\\n background-color: var(--sdk-surface5);\\n color: var(--sdk-text100);\\n}\\n\\n.action-button:hover,\\n.action-button[data-focused='true'] {\\n background-color: var(--sdk-accentPrimary);\\n color: var(--sdk-text500);\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","import api from \"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./TabLoadError.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import {\n withFocusable,\n WithFocusableProps,\n} from '@/external/spatial-navigation';\nimport React from 'react';\nimport ActionButton from '../ActionButton';\nimport './TabLoadError.styles.css';\n\nclass TabLoadErrorView extends React.Component<WithFocusableProps> {\n render() {\n const { focused } = this.props;\n\n return (\n <div data-focused={focused} className=\"tab-load-error focus-ring\">\n <h3 className=\"T70\">We dropped the ball.</h3>\n <p className=\"T20\">\n {\"We're having trouble loading that for you. Please try again.\"}\n </p>\n <ActionButton\n data-focused={focused}\n onEnterPress={this.props.onEnterPress}\n >\n Try Again\n </ActionButton>\n </div>\n );\n }\n}\n\nexport default withFocusable()(TabLoadErrorView);\n","import TabLoadErrorView from './TabLoadError';\n\nexport default TabLoadErrorView;\n","import IMaestroKeyPlaysResponse from './interfaces/IKeyPlaysResponse';\n\nexport const KEY_PLAYS_RESPONSE_MOCK_DATA: IMaestroKeyPlaysResponse = {\n entities: {\n team: {\n '251': {\n id: '251',\n displayName: 'Texas Longhorns',\n color: 'c15d26',\n alternateColor: 'ffffff',\n shortName: 'Texas',\n homeAway: 'away',\n displayOrder: '1',\n logoRef:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/teams/251.jpg?w=184&h=144',\n logoDarkRef: 'https://a.espncdn.com/i/teamlogos/ncaa/500-dark/251.png',\n },\n '264': {\n id: '264',\n displayName: 'Washington Huskies',\n color: '33006f',\n alternateColor: 'e8d3a2',\n shortName: 'Washington',\n homeAway: 'home',\n displayOrder: '0',\n logoRef:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/teams/264.jpg?w=184&h=144',\n logoDarkRef: 'https://a.espncdn.com/i/teamlogos/ncaa/500-dark/264.png',\n },\n },\n athlete: {\n '4360423': {\n id: '4360423',\n shortName: 'M. Penix Jr.',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4360423.jpg?w=184&h=144',\n },\n '4430637': {\n id: '4430637',\n shortName: 'J. Polk',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4430637.jpg?w=184&h=144',\n },\n '4430834': {\n id: '4430834',\n shortName: 'J. McMillan',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4430834.jpg?w=184&h=144',\n },\n '4569337': {\n id: '4569337',\n shortName: 'R. Sanborn',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4569337.jpg?w=184&h=144',\n },\n '4570040': {\n id: '4570040',\n shortName: 'B. Murphy II',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4570040.jpg?w=184&h=144',\n },\n '4597500': {\n id: '4597500',\n shortName: 'A. Mitchell',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4597500.jpg?w=184&h=144',\n },\n '4689338': {\n id: '4689338',\n shortName: 'D. Johnson',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4689338.jpg?w=184&h=144',\n },\n '4870609': {\n id: '4870609',\n shortName: 'C. Baxter',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4870609.jpg?w=184&h=144',\n },\n '4889929': {\n id: '4889929',\n shortName: 'Q. Ewers',\n headshot:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4889929.jpg?w=184&h=144',\n },\n },\n },\n sections: [\n {\n title: '1st Quarter',\n items: [\n {\n description: \"Ja'Lynn Polk's 77-yard catch sets up Washington TD\",\n team: '264',\n awayScore: '0',\n homeScore: '7',\n wallClock: '2024-01-02T02:11:05Z',\n displayClock: '11:04',\n shortPeriod: 'Q1',\n scoringPlay: true,\n athlete: '4689338',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4689338.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225214',\n },\n {\n description: 'Germie Bernard makes leaping grab for Washington',\n team: '264',\n wallClock: '2024-01-02T02:38:54Z',\n displayClock: '1:30',\n shortPeriod: 'Q1',\n scoringPlay: false,\n athlete: '4360423',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4360423.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225401',\n },\n ],\n },\n {\n title: '2nd Quarter',\n items: [\n {\n description: 'Dillon Johnson scores 2nd TD of game for the Huskies',\n team: '264',\n awayScore: '7',\n homeScore: '14',\n wallClock: '2024-01-02T02:47:33Z',\n displayClock: '13:08',\n shortPeriod: 'Q2',\n scoringPlay: true,\n athlete: '4689338',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4689338.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225442',\n },\n {\n description: 'Texas takes over after Washington muffs punt',\n team: '251',\n wallClock: '2024-01-02T02:54:50Z',\n displayClock: '11:45',\n shortPeriod: 'Q2',\n scoringPlay: false,\n athlete: '4569337',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4569337.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225487',\n },\n {\n description: 'Big man TD! Byron Murphy II punches it in for Texas',\n team: '251',\n awayScore: '14',\n homeScore: '14',\n wallClock: '2024-01-02T02:57:22Z',\n displayClock: '10:08',\n shortPeriod: 'Q2',\n scoringPlay: true,\n athlete: '4570040',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4570040.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225513',\n },\n {\n description:\n 'Rome Odunze makes over-the-shoulder grab for Washington',\n team: '264',\n wallClock: '2024-01-02T03:02:27Z',\n displayClock: '9:31',\n shortPeriod: 'Q2',\n scoringPlay: false,\n athlete: '4360423',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4360423.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225518',\n },\n {\n description: \"Texas stops Washington's attempt on 4th down\",\n team: '251',\n wallClock: '2024-01-02T03:06:28Z',\n displayClock: '6:59',\n shortPeriod: 'Q2',\n scoringPlay: false,\n athlete: '4689338',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4689338.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225559',\n },\n {\n description:\n \"Ja'Lynn Polk makes bobbling TD catch and Washington goes ahead\",\n team: '264',\n awayScore: '14',\n homeScore: '21',\n wallClock: '2024-01-02T03:27:56Z',\n displayClock: '1:27',\n shortPeriod: 'Q2',\n scoringPlay: true,\n athlete: '4430637',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4430637.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225686',\n },\n {\n description: \"Texas ties the score after CJ Baxter's TD run\",\n team: '251',\n awayScore: '21',\n homeScore: '21',\n wallClock: '2024-01-02T03:38:42Z',\n displayClock: '0:17',\n shortPeriod: 'Q2',\n scoringPlay: true,\n athlete: '4870609',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4870609.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39225762',\n },\n ],\n },\n {\n title: '3rd Quarter',\n items: [\n {\n description:\n 'Penix threads the needle to McMillan for Washington score',\n team: '264',\n awayScore: '21',\n homeScore: '28',\n wallClock: '2024-01-02T04:11:00Z',\n displayClock: '10:30',\n shortPeriod: 'Q3',\n scoringPlay: true,\n athlete: '4430834',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4430834.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39226021',\n },\n {\n description: 'Texas commits their first turnover of the game',\n team: '264',\n wallClock: '2024-01-02T04:16:16Z',\n displayClock: '10:14',\n shortPeriod: 'Q3',\n scoringPlay: false,\n athlete: '4870609',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4870609.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39226030',\n },\n ],\n },\n {\n title: '4th Quarter',\n items: [\n {\n description:\n 'Hang time! Adonai Mitchell makes incredible TD grab for Texas',\n team: '251',\n awayScore: '28',\n homeScore: '34',\n wallClock: '2024-01-01T05:08:14Z',\n displayClock: '7:23',\n shortPeriod: 'Q4',\n scoringPlay: true,\n athlete: '4597500',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4597500.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39226360',\n },\n {\n description: 'How did Penix drop this pass in to Odunze?',\n team: '264',\n wallClock: '2024-01-01T05:17:15Z',\n displayClock: '3:48',\n shortPeriod: 'Q4',\n scoringPlay: false,\n athlete: '4360423',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4360423.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39226394',\n },\n {\n description:\n \"Jordan Whittington's big catch gives Texas good field position\",\n team: '251',\n wallClock: '2024-01-01T05:41:48Z',\n displayClock: '0:28',\n shortPeriod: 'Q4',\n scoringPlay: false,\n athlete: '4889929',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4889929.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39226506',\n },\n {\n description:\n \"Washington survives Texas' final drive to win Sugar Bowl\",\n team: '264',\n wallClock: '2024-01-02T04:43:41Z',\n displayClock: '0:00',\n shortPeriod: 'Q4',\n scoringPlay: false,\n athlete: '4889929',\n thumbnail:\n 'https://stitcher.espn.com/ctv/sports/football/leagues/college-football/athletes/4889929.jpg?w=184&h=144',\n thumbnailType: 'headshot',\n clipID: '39226585',\n },\n ],\n },\n ],\n};\n\nexport const BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK =\n 'data:image/jpeg;base64,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';\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".key-plays-view {\\n display: block;\\n overflow-y: auto;\\n scrollbar-width: none;\\n scroll-behavior: smooth;\\n overscroll-behavior: contain;\\n margin-top: 60px;\\n}\\n\\n.key-plays-view::-webkit-scrollbar {\\n display: none;\\n}\\n\\n.key-plays-view > * {\\n margin-bottom: 16px;\\n}\\n\\n.key-plays-view > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.key-plays-section {\\n display: block;\\n position: relative;\\n}\\n\\n.key-plays-section > * {\\n margin-bottom: 16px;\\n}\\n\\n.key-plays-section > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.key-plays-section-items {\\n display: block;\\n}\\n\\n.key-plays-section-items > * {\\n margin-bottom: 20px;\\n}\\n\\n.key-plays-section-items > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.key-plays-section-title {\\n position: sticky;\\n top: 0;\\n z-index: 1;\\n margin: 0;\\n margin-bottom: 16px;\\n}\\n\\n.key-plays-bottom-padding {\\n height: calc(100vh - 240px);\\n min-height: 400px;\\n width: 100%;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/espn/key-plays/view/KeyPlaysView.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,cAAc;EACd,gBAAgB;EAChB,qBAAqB;EACrB,uBAAuB;EACvB,4BAA4B;EAC5B,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,kBAAkB;AACpB;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,gBAAgB;EAChB,MAAM;EACN,UAAU;EACV,SAAS;EACT,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;EAC3B,iBAAiB;EACjB,WAAW;AACb\",\"sourcesContent\":[\".key-plays-view {\\n display: block;\\n overflow-y: auto;\\n scrollbar-width: none;\\n scroll-behavior: smooth;\\n overscroll-behavior: contain;\\n margin-top: 60px;\\n}\\n\\n.key-plays-view::-webkit-scrollbar {\\n display: none;\\n}\\n\\n.key-plays-view > * {\\n margin-bottom: 16px;\\n}\\n\\n.key-plays-view > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.key-plays-section {\\n display: block;\\n position: relative;\\n}\\n\\n.key-plays-section > * {\\n margin-bottom: 16px;\\n}\\n\\n.key-plays-section > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.key-plays-section-items {\\n display: block;\\n}\\n\\n.key-plays-section-items > * {\\n margin-bottom: 20px;\\n}\\n\\n.key-plays-section-items > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.key-plays-section-title {\\n position: sticky;\\n top: 0;\\n z-index: 1;\\n margin: 0;\\n margin-bottom: 16px;\\n}\\n\\n.key-plays-bottom-padding {\\n height: calc(100vh - 240px);\\n min-height: 400px;\\n width: 100%;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".key-play-card {\\n display: block;\\n background-color: var(--sdk-surface2);\\n position: relative;\\n}\\n\\n.key-play-card-content {\\n display: block;\\n width: 100%;\\n position: relative;\\n}\\n\\n.key-play-card-content .cardImage {\\n display: inline-block;\\n width: 33.33%;\\n vertical-align: top;\\n object-fit: cover;\\n border-top-left-radius: 10px;\\n border-bottom-left-radius: 10px;\\n}\\n\\n.key-play-card-content .cardImage[data-has-score='true'] {\\n border-bottom-left-radius: 0;\\n}\\n\\n.key-play-card-content .text-content {\\n position: absolute;\\n top: 50%;\\n left: 33.33%;\\n transform: translateY(-50%);\\n width: 66.67%;\\n padding: 44px 36px 44px 24px;\\n text-align: center;\\n box-sizing: border-box;\\n}\\n\\n.key-play-card-content .multi-line {\\n display: -webkit-box;\\n -webkit-box-orient: vertical;\\n -webkit-line-clamp: 3;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n text-align: left;\\n}\\n\\n.key-play-card progress {\\n -webkit-appearance: none;\\n -moz-appearance: none;\\n appearance: none;\\n width: 100%;\\n height: 8px;\\n border-radius: 15px;\\n background-color: var(--sdk-surface6);\\n box-shadow: 0px 1px 3px 0px #10111366 inset;\\n overflow: hidden;\\n border-radius: 0;\\n position: absolute;\\n bottom: 0;\\n}\\n\\n.key-play-card progress::-webkit-progress-bar,\\n.key-play-card progress::-moz-progress-bar {\\n background-color: var(--sdk-surface6);\\n}\\n\\n.key-play-card progress::-webkit-progress-value {\\n background-color: var(--sdk-highlightPrimary);\\n}\\n\\n.key-play-card .score {\\n display: block;\\n text-align: center;\\n padding: 10px;\\n background-color: var(--sdk-surface4);\\n border-bottom-left-radius: 10px;\\n border-bottom-right-radius: 10px;\\n}\\n\\n.key-play-card .score-team {\\n display: inline-block;\\n vertical-align: middle;\\n margin: 0 32px;\\n}\\n\\n.key-play-card .score-team > div {\\n display: inline-block;\\n vertical-align: middle;\\n}\\n\\n.key-play-card .score > *:last-child .score-value {\\n margin-left: 0;\\n margin-right: 16px;\\n}\\n\\n.key-play-card .score-team .score-value {\\n margin-left: 16px;\\n}\\n\\n.key-play-card .error-state {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n display: block;\\n text-align: center;\\n background-color: var(--sdk-surface2);\\n}\\n\\n.key-play-card .error-state-text {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.key-play-card .error-state-text > * {\\n margin: 8px;\\n vertical-align: middle;\\n}\\n\\n.key-play-card .error-state .error-state-inner {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.key-play-card .error-state path {\\n fill: var(--sdk-alertWarning);\\n}\\n\\n.key-play-card .non-recent-error-state {\\n position: absolute;\\n top: 18px;\\n right: 18px;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/espn/key-plays/view/KeyPlayCardView.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,cAAc;EACd,qCAAqC;EACrC,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,WAAW;EACX,kBAAkB;AACpB;;AAEA;EACE,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,iBAAiB;EACjB,4BAA4B;EAC5B,+BAA+B;AACjC;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,YAAY;EACZ,2BAA2B;EAC3B,aAAa;EACb,4BAA4B;EAC5B,kBAAkB;EAClB,sBAAsB;AACxB;;AAEA;EACE,oBAAoB;EACpB,4BAA4B;EAC5B,qBAAqB;EACrB,gBAAgB;EAChB,uBAAuB;EACvB,gBAAgB;AAClB;;AAEA;EACE,wBAAwB;EACxB,qBAAqB;EACrB,gBAAgB;EAChB,WAAW;EACX,WAAW;EACX,mBAAmB;EACnB,qCAAqC;EACrC,2CAA2C;EAC3C,gBAAgB;EAChB,gBAAgB;EAChB,kBAAkB;EAClB,SAAS;AACX;;AAEA;;EAEE,qCAAqC;AACvC;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,cAAc;EACd,kBAAkB;EAClB,aAAa;EACb,qCAAqC;EACrC,+BAA+B;EAC/B,gCAAgC;AAClC;;AAEA;EACE,qBAAqB;EACrB,sBAAsB;EACtB,cAAc;AAChB;;AAEA;EACE,qBAAqB;EACrB,sBAAsB;AACxB;;AAEA;EACE,cAAc;EACd,kBAAkB;AACpB;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,cAAc;EACd,kBAAkB;EAClB,qCAAqC;AACvC;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;;AAEA;EACE,6BAA6B;AAC/B;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,WAAW;AACb\",\"sourcesContent\":[\".key-play-card {\\n display: block;\\n background-color: var(--sdk-surface2);\\n position: relative;\\n}\\n\\n.key-play-card-content {\\n display: block;\\n width: 100%;\\n position: relative;\\n}\\n\\n.key-play-card-content .cardImage {\\n display: inline-block;\\n width: 33.33%;\\n vertical-align: top;\\n object-fit: cover;\\n border-top-left-radius: 10px;\\n border-bottom-left-radius: 10px;\\n}\\n\\n.key-play-card-content .cardImage[data-has-score='true'] {\\n border-bottom-left-radius: 0;\\n}\\n\\n.key-play-card-content .text-content {\\n position: absolute;\\n top: 50%;\\n left: 33.33%;\\n transform: translateY(-50%);\\n width: 66.67%;\\n padding: 44px 36px 44px 24px;\\n text-align: center;\\n box-sizing: border-box;\\n}\\n\\n.key-play-card-content .multi-line {\\n display: -webkit-box;\\n -webkit-box-orient: vertical;\\n -webkit-line-clamp: 3;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n text-align: left;\\n}\\n\\n.key-play-card progress {\\n -webkit-appearance: none;\\n -moz-appearance: none;\\n appearance: none;\\n width: 100%;\\n height: 8px;\\n border-radius: 15px;\\n background-color: var(--sdk-surface6);\\n box-shadow: 0px 1px 3px 0px #10111366 inset;\\n overflow: hidden;\\n border-radius: 0;\\n position: absolute;\\n bottom: 0;\\n}\\n\\n.key-play-card progress::-webkit-progress-bar,\\n.key-play-card progress::-moz-progress-bar {\\n background-color: var(--sdk-surface6);\\n}\\n\\n.key-play-card progress::-webkit-progress-value {\\n background-color: var(--sdk-highlightPrimary);\\n}\\n\\n.key-play-card .score {\\n display: block;\\n text-align: center;\\n padding: 10px;\\n background-color: var(--sdk-surface4);\\n border-bottom-left-radius: 10px;\\n border-bottom-right-radius: 10px;\\n}\\n\\n.key-play-card .score-team {\\n display: inline-block;\\n vertical-align: middle;\\n margin: 0 32px;\\n}\\n\\n.key-play-card .score-team > div {\\n display: inline-block;\\n vertical-align: middle;\\n}\\n\\n.key-play-card .score > *:last-child .score-value {\\n margin-left: 0;\\n margin-right: 16px;\\n}\\n\\n.key-play-card .score-team .score-value {\\n margin-left: 16px;\\n}\\n\\n.key-play-card .error-state {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n display: block;\\n text-align: center;\\n background-color: var(--sdk-surface2);\\n}\\n\\n.key-play-card .error-state-text {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.key-play-card .error-state-text > * {\\n margin: 8px;\\n vertical-align: middle;\\n}\\n\\n.key-play-card .error-state .error-state-inner {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.key-play-card .error-state path {\\n fill: var(--sdk-alertWarning);\\n}\\n\\n.key-play-card .non-recent-error-state {\\n position: absolute;\\n top: 18px;\\n right: 18px;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".sdk--key-play-error-state-unsupportedEvent {\\n padding: 32px 24px 0 24px;\\n display: block;\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent::after {\\n background: linear-gradient(\\n 180deg,\\n rgba(0, 0, 0, 0) 0%,\\n rgba(255, 255, 255, 0.08) 100%\\n );\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent h3 {\\n margin: 0;\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent p {\\n margin: 0;\\n color: var(--sdk-text200);\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent > * {\\n margin-bottom: 16px;\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent {\\n overflow-y: hidden;\\n max-height: calc(100vh - 86px - 60px - 60px);\\n scrollbar-width: none;\\n display: block;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent h3 {\\n margin: 0;\\n font-family: var(--sdk-font-headline);\\n text-align: left;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent p {\\n margin: 0;\\n color: var(--sdk-text200);\\n text-align: left;\\n margin-top: 16px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .main-content {\\n display: block;\\n text-align: center;\\n padding: 32px 6px 32px 6px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples {\\n display: block;\\n position: relative;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples > * {\\n margin-bottom: 16px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples::after {\\n content: '';\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n bottom: 0;\\n background: linear-gradient(\\n 0deg,\\n var(--sdk-surface1) 0%,\\n rgba(0, 0, 0, 0) 30%\\n );\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example {\\n display: block;\\n padding: 28px 24px;\\n border-radius: 10px;\\n background-color: var(--sdk-surface3);\\n height: 128px;\\n box-sizing: border-box;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .image {\\n width: 72px;\\n height: 72px;\\n border-radius: 50%;\\n background-color: var(--sdk-surface4);\\n margin-right: 16px;\\n display: inline-block;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .content {\\n display: inline-block;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .headline {\\n width: 180px;\\n height: 26px;\\n border-radius: 10px;\\n background-color: var(--sdk-surface4);\\n display: block;\\n margin-bottom: 23px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .body {\\n width: 107px;\\n height: 23px;\\n border-radius: 10px;\\n background-color: var(--sdk-surface4);\\n display: block;\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure {\\n display: block;\\n padding: 24px;\\n background-color: var(--sdk-surface4);\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure h3 {\\n margin: 0;\\n font-family: var(--sdk-font-headline);\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure p {\\n margin: 16px 0;\\n height: 86px;\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure > *:last-child {\\n margin-bottom: 0;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/espn/key-plays/view/KeyPlayErrorStateView.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,yBAAyB;EACzB,cAAc;AAChB;;AAEA;EACE;;;;GAIC;AACH;;AAEA;EACE,SAAS;AACX;;AAEA;EACE,SAAS;EACT,yBAAyB;AAC3B;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,4CAA4C;EAC5C,qBAAqB;EACrB,cAAc;AAChB;;AAEA;EACE,SAAS;EACT,qCAAqC;EACrC,gBAAgB;AAClB;;AAEA;EACE,SAAS;EACT,yBAAyB;EACzB,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,kBAAkB;EAClB,0BAA0B;AAC5B;;AAEA;EACE,cAAc;EACd,kBAAkB;AACpB;;AAEA;EACE,mBAAmB;AACrB;;AAEA;;;EAGE,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,SAAS;EACT;;;;GAIC;AACH;;AAEA;;;EAGE,cAAc;EACd,kBAAkB;EAClB,mBAAmB;EACnB,qCAAqC;EACrC,aAAa;EACb,sBAAsB;AACxB;;AAEA;;;;EAIE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,qCAAqC;EACrC,kBAAkB;EAClB,qBAAqB;AACvB;;AAEA;;;;EAIE,qBAAqB;AACvB;;AAEA;;;;EAIE,YAAY;EACZ,YAAY;EACZ,mBAAmB;EACnB,qCAAqC;EACrC,cAAc;EACd,mBAAmB;AACrB;;AAEA;;;;EAIE,YAAY;EACZ,YAAY;EACZ,mBAAmB;EACnB,qCAAqC;EACrC,cAAc;AAChB;;AAEA;EACE,cAAc;EACd,aAAa;EACb,qCAAqC;AACvC;;AAEA;EACE,SAAS;EACT,qCAAqC;AACvC;;AAEA;EACE,cAAc;EACd,YAAY;AACd;;AAEA;EACE,gBAAgB;AAClB\",\"sourcesContent\":[\".sdk--key-play-error-state-unsupportedEvent {\\n padding: 32px 24px 0 24px;\\n display: block;\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent::after {\\n background: linear-gradient(\\n 180deg,\\n rgba(0, 0, 0, 0) 0%,\\n rgba(255, 255, 255, 0.08) 100%\\n );\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent h3 {\\n margin: 0;\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent p {\\n margin: 0;\\n color: var(--sdk-text200);\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent > * {\\n margin-bottom: 16px;\\n}\\n\\n.sdk--key-play-error-state-unsupportedEvent > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent {\\n overflow-y: hidden;\\n max-height: calc(100vh - 86px - 60px - 60px);\\n scrollbar-width: none;\\n display: block;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent h3 {\\n margin: 0;\\n font-family: var(--sdk-font-headline);\\n text-align: left;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent p {\\n margin: 0;\\n color: var(--sdk-text200);\\n text-align: left;\\n margin-top: 16px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .main-content {\\n display: block;\\n text-align: center;\\n padding: 32px 6px 32px 6px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples {\\n display: block;\\n position: relative;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples > * {\\n margin-bottom: 16px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n > *:last-child {\\n margin-bottom: 0;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples::after {\\n content: '';\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n bottom: 0;\\n background: linear-gradient(\\n 0deg,\\n var(--sdk-surface1) 0%,\\n rgba(0, 0, 0, 0) 30%\\n );\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example {\\n display: block;\\n padding: 28px 24px;\\n border-radius: 10px;\\n background-color: var(--sdk-surface3);\\n height: 128px;\\n box-sizing: border-box;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .image {\\n width: 72px;\\n height: 72px;\\n border-radius: 50%;\\n background-color: var(--sdk-surface4);\\n margin-right: 16px;\\n display: inline-block;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .content {\\n display: inline-block;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .headline {\\n width: 180px;\\n height: 26px;\\n border-radius: 10px;\\n background-color: var(--sdk-surface4);\\n display: block;\\n margin-bottom: 23px;\\n}\\n\\n.sdk--key-play-error-state-unpopulatedEvent\\n .unpopulatedEvent-examples\\n .example\\n .body {\\n width: 107px;\\n height: 23px;\\n border-radius: 10px;\\n background-color: var(--sdk-surface4);\\n display: block;\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure {\\n display: block;\\n padding: 24px;\\n background-color: var(--sdk-surface4);\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure h3 {\\n margin: 0;\\n font-family: var(--sdk-font-headline);\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure p {\\n margin: 16px 0;\\n height: 86px;\\n}\\n\\n.sdk--key-play-error-state-tabLoadFailure > *:last-child {\\n margin-bottom: 0;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./KeyPlayCardView.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import React from 'react';\n\nexport default class ScoreCard extends React.Component<\n {\n awayTeamScore?: number;\n homeTeamScore?: number;\n homeTeamName: string;\n awayTeamName: string;\n },\n {}\n> {\n render() {\n const {\n awayTeamScore,\n homeTeamScore,\n homeTeamName,\n awayTeamName,\n } = this.props;\n\n if (!awayTeamScore || !homeTeamScore || !homeTeamName || !awayTeamName) {\n return null;\n }\n\n return (\n <div className=\"score\">\n <div className=\"score-team T05_ALT\">\n <span>{homeTeamName}</span>\n <span className=\"T30 score-value FONT_BOLD\">{homeTeamScore}</span>\n </div>\n <div className=\"score-team T05_ALT\">\n <span className=\"T30 score-value FONT_BOLD\">{awayTeamScore}</span>\n <span>{awayTeamName}</span>\n </div>\n </div>\n );\n }\n}\n","import Image from '@/components/atoms/Image';\nimport { BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK } from '../constants';\nimport IKeyPlay, { KeyPlayLoadFailureStatus } from '../interfaces/IKeyPlays';\nimport './KeyPlayCardView.styles.css';\nimport SDK from '@/index';\nimport Icon from '@/components/atoms/SvgIcon';\nimport React, { useCallback } from 'react';\nimport {\n withFocusable,\n WithFocusableProps,\n} from '@/external/spatial-navigation';\nimport ScoreCard from './KeyPlayCardScoreTagView';\nimport KeyPlaysViewModel from '../view-model/KeyPlaysViewModel';\nimport { Direction, Layout } from '@/external/spatial-navigation/utils';\nimport FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';\nimport { useScrollableContainer } from '@/components/core/ScrollableContainer';\n\ntype KeyPlayCardViewProps = IKeyPlay & {\n isPlaying: boolean;\n playbackProgress: number | null;\n isScoring: boolean;\n};\n\ntype KeyPlaysCardViewState = {\n failedClip: KeyPlayLoadFailureStatus | null;\n imageLoaded: boolean;\n};\n\nexport class KeyPlayCardView extends React.Component<\n KeyPlayCardViewProps & WithFocusableProps,\n KeyPlaysCardViewState\n> {\n private failedClipListener: () => void = () => {};\n private vm: KeyPlaysViewModel | null;\n\n constructor(props: KeyPlayCardViewProps) {\n super(props);\n this.vm = SDK.getMaestroEventViewModel()\n .keyPlaysViewModel as KeyPlaysViewModel | null;\n this.state = {\n failedClip: this.viewModel.failedClips.value[props.clipID] || null,\n imageLoaded: false,\n };\n }\n\n get viewModel() {\n if (!this.vm) {\n throw new Error('KeyPlaysViewModel is not initialized');\n }\n\n return this.vm;\n }\n\n componentDidMount() {\n this.failedClipListener = this.viewModel.failedClips.subscribe(\n (failedClips) => {\n this.setState({ failedClip: failedClips[this.props.clipID] });\n }\n );\n }\n\n componentWillUnmount() {\n if (this.failedClipListener) {\n this.failedClipListener();\n }\n }\n\n onLoad = () => {\n this.setState({ imageLoaded: true });\n };\n\n renderImage = () => {\n const {\n playerImageUrl,\n teamImageUrl,\n thumbnailImageUrl,\n isScoring,\n } = this.props;\n if (playerImageUrl) {\n return (\n <Image\n src={playerImageUrl}\n crossOrigin=\"anonymous\"\n alt=\"Key Play Player Image\"\n className=\"cardImage\"\n onLoad={this.onLoad}\n style={{\n display: this.state.imageLoaded ? 'block' : 'none',\n }}\n data-has-score={isScoring}\n />\n );\n }\n\n if (teamImageUrl) {\n return (\n <Image\n src={teamImageUrl}\n crossOrigin=\"anonymous\"\n alt=\"Key Play Team Image\"\n className=\"cardImage\"\n onLoad={this.onLoad}\n style={{\n display: this.state.imageLoaded ? 'block' : 'none',\n }}\n data-has-score={isScoring}\n />\n );\n }\n\n if (thumbnailImageUrl) {\n return (\n <Image\n src={thumbnailImageUrl}\n crossOrigin=\"anonymous\"\n alt=\"Key Play Thumbnail Image\"\n className=\"cardImage\"\n onLoad={this.onLoad}\n style={{\n display: this.state.imageLoaded ? 'block' : 'none',\n }}\n />\n );\n }\n\n return null;\n };\n\n render() {\n const {\n clipID,\n description,\n isPlaying,\n playbackProgress,\n isScoring,\n focused,\n awayTeamScore,\n homeTeamScore,\n homeTeamName,\n awayTeamName,\n } = this.props;\n const { failedClip } = this.state;\n\n return (\n <div\n className=\"key-play-card focus-ring\"\n id={clipID}\n data-focused={focused}\n >\n <div className=\"key-play-card-content\">\n {!this.state.imageLoaded && (\n <Image\n src={BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK}\n crossOrigin=\"anonymous\"\n alt=\"Key Play Thumbnail Image\"\n className=\"cardImage\"\n />\n )}\n {this.renderImage()}\n <div className=\"text-content T05_ALT\">\n <div className=\"multi-line\">{description}</div>\n </div>\n </div>\n {isPlaying && playbackProgress !== null && (\n <progress value={playbackProgress} max=\"1\" />\n )}\n {isScoring && (\n <ScoreCard\n awayTeamScore={awayTeamScore}\n homeTeamScore={homeTeamScore}\n homeTeamName={homeTeamName}\n awayTeamName={awayTeamName}\n />\n )}\n\n {failedClip === 'recentFailure' && (\n <div className=\"error-state\">\n <div className=\"error-state-inner\">\n <div className=\"error-state-text\">\n <Icon iconName=\"warning\" width={21.6} height={18.7} />\n <span className=\"T05_ALT\">Could not play this clip. </span>\n </div>\n </div>\n </div>\n )}\n {failedClip === 'nonRecentFailure' && (\n <div className=\"non-recent-error-state\">\n <Icon iconName=\"warning\" width={21.6} height={18.7} />\n </div>\n )}\n </div>\n );\n }\n}\n\nconst FocusableKeyPlayCard = withFocusable<KeyPlayCardViewProps>()(\n KeyPlayCardView as React.ComponentType<KeyPlayCardViewProps>\n);\n\nconst KeyPlayCard: React.FC<\n Omit<KeyPlayCardViewProps, 'setRef'> & WithFocusableProps\n> = (props) => {\n const { scrollToFocusedElement } = useScrollableContainer();\n\n const handleLeftPressed = useCallback((d: Direction) => {\n if (d === 'left') {\n SDK.getMaestroEventViewModel().deliverFocus();\n }\n }, []);\n\n const onBecameFocused = useCallback(\n (layout: Layout) => {\n scrollToFocusedElement(layout);\n },\n [scrollToFocusedElement]\n );\n\n return (\n <FocusableItem>\n <FocusableKeyPlayCard\n {...props}\n onArrowPress={handleLeftPressed}\n onBecameFocused={onBecameFocused}\n />\n </FocusableItem>\n );\n};\n\nexport default KeyPlayCard;\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./KeyPlaysView.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./KeyPlayErrorStateView.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import { KeyPlaysErrorState } from '../interfaces/IKeyPlays';\nimport './KeyPlayErrorStateView.styles.css';\nimport React from 'react';\nimport { Direction } from '@/external/spatial-navigation/utils';\nimport SDK from '@/index';\nimport TabLoadErrorView from '@/components/molecules/TabLoadError';\nimport { useMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';\n\ntype Props = {\n errorState: KeyPlaysErrorState;\n onRetry: () => void;\n};\n\nconst UnpopulatedEvent = () => {\n const maxHeightRef = useMaxHeightToBottom();\n\n return (\n <div\n ref={maxHeightRef}\n className=\"sdk--key-play-error-state-unpopulatedEvent\"\n >\n <div className=\"main-content\">\n <h3 className=\"T70\">Good things come to those who wait!</h3>\n <p className=\"T20\">\n When a key play occurs we will serve them up for you here.\n </p>\n </div>\n <div className=\"unpopulatedEvent-examples\">\n {Array.from({ length: 4 }).map((_, i) => (\n <div key={i} className=\"example\">\n <div className=\"image\" />\n <div className=\"content\">\n <div className=\"headline\" />\n <div className=\"body\" />\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nclass UnsupportedEvent extends React.Component {\n render() {\n return (\n <div className=\"sdk--key-play-error-state-unsupportedEvent\">\n <h3 className=\"T70\">No Key Plays Available</h3>\n <svg\n viewBox=\"0 0 520 359\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g opacity=\"0.16\">\n <path\n d=\"M146.334 219.427V244.686L168.723 198.187V38.0215L165.279 40.3178V188.427L146.334 219.427Z\"\n fill=\"#6D6D6D\"\n />\n <rect\n x=\"94.6687\"\n y=\"219.427\"\n width=\"51.6662\"\n height=\"25.259\"\n fill=\"#777777\"\n />\n <rect\n x=\"145.187\"\n y=\"39.1694\"\n width=\"20.6665\"\n height=\"149.258\"\n fill=\"#666666\"\n />\n <path\n d=\"M146.335 219.427H94.6687L143.465 187.279H167.001L146.335 219.427Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M375.389 219.427V244.686L353 198.187V38.0215L356.445 40.3178V188.427L375.389 219.427Z\"\n fill=\"#6D6D6D\"\n />\n <rect\n width=\"51.6662\"\n height=\"25.259\"\n transform=\"matrix(-1 0 0 1 427.055 219.427)\"\n fill=\"#777777\"\n />\n <rect\n width=\"20.6665\"\n height=\"149.258\"\n transform=\"matrix(-1 0 0 1 376.537 39.1694)\"\n fill=\"#666666\"\n />\n <path\n d=\"M375.389 219.427H427.055L378.259 187.279H354.722L375.389 219.427Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M23.4844 141.354H496.517L410.981 121.835H93.5208L23.4844 141.354Z\"\n fill=\"#B1B1B1\"\n />\n <rect\n x=\"23.4844\"\n y=\"141.354\"\n width=\"473.033\"\n height=\"19.5183\"\n fill=\"#777777\"\n />\n <rect\n x=\"72.8545\"\n y=\"51.7993\"\n width=\"374.293\"\n height=\"45.9255\"\n fill=\"#CDCDCD\"\n />\n </g>\n </svg>\n </div>\n );\n }\n}\n\nclass KeyPlayErrorStateView extends React.Component<Props, {}> {\n onArrowPress = (d: Direction) => {\n if (d === 'left') {\n SDK.getMaestroEventViewModel().deliverFocus();\n }\n };\n\n render() {\n const { errorState, onRetry } = this.props;\n\n if (errorState === 'unsupportedEvent') {\n return <UnsupportedEvent />;\n }\n\n if (errorState === 'unpopulatedEvent') {\n return <UnpopulatedEvent />;\n }\n\n if (errorState === 'tabLoadFailure') {\n return (\n <TabLoadErrorView\n onEnterPress={onRetry}\n onArrowPress={this.onArrowPress}\n />\n );\n }\n\n return null;\n }\n}\n\nexport default KeyPlayErrorStateView;\n","import React, { Component } from 'react';\nimport KeyPlayCardView from './KeyPlayCardView';\nimport './KeyPlaysView.styles.css';\nimport KeyPlayErrorStateView from './KeyPlayErrorStateView';\nimport SDK from '@/index';\nimport { KeyPlaysErrorState } from '../interfaces/IKeyPlays';\nimport KeyPlaysViewModel, {\n KeyPlayItem,\n} from '../view-model/KeyPlaysViewModel';\nimport ScrollableContainer from '@/components/core/ScrollableContainer';\nimport { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';\n\nconst STICKY_HEADER_HEIGHT = 32;\n\ntype Unsubscribe = () => void;\n\ninterface IKeyPlaysState {\n playbackProgress: number | null;\n playbackIndex: number | null;\n items: KeyPlayItem[];\n scrollableContainer: HTMLDivElement | null;\n}\n\nexport class KeyPlays extends Component<{}, IKeyPlaysState> {\n private container: HTMLDivElement | null = null;\n private playbackProgressUnsub: Unsubscribe | null = null;\n private playbackIndexUnsub: Unsubscribe | null = null;\n private itemsUnsub: Unsubscribe | null = null;\n private maxHeightCleanup: Unsubscribe | null = null;\n private vm: KeyPlaysViewModel | null;\n\n constructor(props: {}) {\n super(props);\n this.vm = SDK.getMaestroEventViewModel()\n .keyPlaysViewModel as KeyPlaysViewModel | null;\n this.state = {\n scrollableContainer: null,\n playbackProgress:\n this.viewModel.currentClipPlaybackProgress.value ?? null,\n playbackIndex: this.viewModel.currentlyPlayingClipIndex.value ?? null,\n items: this.viewModel.filteredItems.value ?? [],\n };\n }\n\n get viewModel() {\n if (!this.vm) {\n throw new Error('KeyPlaysViewModel is not initialized');\n }\n\n return this.vm;\n }\n\n componentDidMount() {\n this.playbackProgressUnsub = this.viewModel.currentClipPlaybackProgress.subscribe(\n (value) => {\n this.setState({ playbackProgress: value ?? null });\n }\n );\n this.playbackIndexUnsub = this.viewModel.currentlyPlayingClipIndex.subscribe(\n (value) => {\n this.setState({ playbackIndex: value ?? null });\n }\n );\n this.itemsUnsub = this.viewModel.filteredItems.subscribe((items) => {\n this.setState({\n items,\n });\n });\n\n this.setState({\n scrollableContainer: this.container,\n });\n\n this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);\n }\n\n componentWillUnmount() {\n this.playbackProgressUnsub && this.playbackProgressUnsub();\n this.playbackIndexUnsub && this.playbackIndexUnsub();\n this.itemsUnsub && this.itemsUnsub();\n this.maxHeightCleanup && this.maxHeightCleanup();\n }\n\n private handlePlayClip = (index: number) => async () => {\n await this.viewModel.playKeyPlay(index);\n };\n\n setContainerRef = (e: HTMLDivElement | null) => {\n if (e && !this.container) {\n this.container = e;\n }\n\n if (this.container !== e) {\n this.container = e;\n if (this.maxHeightCleanup) {\n this.maxHeightCleanup();\n }\n if (this.container) {\n this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);\n }\n }\n };\n\n render() {\n const {\n playbackProgress,\n playbackIndex,\n items,\n scrollableContainer,\n } = this.state;\n\n return (\n <ScrollableContainer\n scrollableContainerRef={scrollableContainer}\n containerTopOffset={STICKY_HEADER_HEIGHT}\n >\n <div ref={this.setContainerRef} className=\"key-plays-view\">\n {items.map((section, sectionIndex) => (\n <div key={`section-${sectionIndex}`} className=\"key-plays-section\">\n {section.title && (\n <h3 className=\"key-plays-section-title T10\">{section.title}</h3>\n )}\n <div className=\"key-plays-section-items\">\n {section.items.map((item) => {\n const absoluteIndex =\n this.vm?.allItems.findIndex(\n (vmItem) => vmItem.id === item.id\n ) ?? -1;\n return (\n <KeyPlayCardView\n key={item.id}\n id={item.id}\n clipID={item.clipID}\n description={item.description}\n awayTeamName={item.awayTeamName}\n homeTeamName={item.homeTeamName}\n awayTeamScore={item.awayTeamScore}\n homeTeamScore={item.homeTeamScore}\n playerImageUrl={item.playerImageUrl}\n teamImageUrl={item.teamImageUrl}\n thumbnailImageUrl={item.thumbnailImageUrl}\n isPlaying={this.viewModel.isCurrentlyPlaying(\n absoluteIndex\n )}\n isScoring={Boolean(\n item.awayTeamScore && item.homeTeamScore\n )}\n playbackProgress={\n absoluteIndex === playbackIndex\n ? playbackProgress\n : null\n }\n onEnterPress={this.handlePlayClip(absoluteIndex)}\n />\n );\n })}\n </div>\n </div>\n ))}\n <div className=\"key-plays-bottom-padding\" />\n </div>\n </ScrollableContainer>\n );\n }\n}\n\ninterface KeyPlaysWithErrorStateState {\n errorState: KeyPlaysErrorState;\n}\n\nexport default class KeyPlaysWithErrorState extends Component<\n {},\n KeyPlaysWithErrorStateState\n> {\n private errorStateUnsub: Unsubscribe | null = null;\n private vm: KeyPlaysViewModel | null;\n\n constructor(props: {}) {\n super(props);\n this.vm = SDK.getMaestroEventViewModel()\n .keyPlaysViewModel as KeyPlaysViewModel | null;\n this.state = {\n errorState: this.viewModel.errorState.value as KeyPlaysErrorState,\n };\n }\n\n get viewModel() {\n if (!this.vm) {\n throw new Error('KeyPlaysViewModel is not initialized');\n }\n\n return this.vm;\n }\n\n componentDidMount() {\n this.errorStateUnsub = this.viewModel.errorState.subscribe((value) => {\n this.setState({ errorState: value as KeyPlaysErrorState });\n });\n this.viewModel.init();\n }\n\n componentWillUnmount() {\n this.errorStateUnsub && this.errorStateUnsub();\n }\n\n private handleRetry = async () => {\n await this.viewModel.userRequestedNewKeyPlaysData();\n };\n\n render() {\n const { errorState } = this.state;\n if (errorState) {\n return (\n <KeyPlayErrorStateView\n errorState={errorState}\n onRetry={this.handleRetry}\n />\n );\n }\n\n return <KeyPlays />;\n }\n}\n"],"sourceRoot":""}

package/dist/7.maestro-web-sdk.esm.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ (window.webpackJsonp=window.webpackJsonp\|\|[]).push([[7,13],{100:function(e,n,a){"use strict";var t=a(0),i=a.n(t);function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];for(var t in a)({}).hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e}).apply(null,arguments)}function l(e,n,a){return(n=function(e){var n=function(e,n){if("object"!=typeof e\|\|!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var t=a.call(e,n\|\|"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}class d extends i.a.Component{constructor(e){super(e),l(this,"state",{failed:!1}),l(this,"handleError",()=>{this.setState({failed:!0})})}render(){return this.state.failed?(console.warn("Image failed to load:",this.props.src),null):this.props.src?i.a.createElement("img",r({alt:this.props.alt\|\|"Image"},this.props,{onError:this.handleError})):(console.warn("Image source is empty"),null)}}n.a=d},101:function(e,n,a){"use strict";var t=a(29);n.a=t.b},102:function(e,n,a){"use strict";a.d(n,"a",(function(){return t})),a.d(n,"b",(function(){return i}));const t=e=>e.toLowerCase().trim().replace(/[\s\W-]+/g,"-").replace(/^-+\|-+$/g,"");function i(e){let n=0;for(let a=0;a<e.length;a++){n=(n<<5)-n+e.charCodeAt(a),n&=n}return n}},123:function(e,n,a){"use strict";a.r(n),a.d(n,"BuilderPanelViewModel",(function(){return s}));var t=a(3),i=a(33),r=a(4),l=a(102);function d(e,n,a){return(n=function(e){var n=function(e,n){if("object"!=typeof e\|\|!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var t=a.call(e,n\|\|"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}class s extends i.a{constructor(e,n){super(),d(this,"sections",new t.a([])),d(this,"expandedCardIds",new t.a(new Set)),d(this,"isDataLoading",new t.a(!1)),d(this,"hasEverSuccessfullyLoaded",new t.a(!1)),d(this,"analyticsService",null),d(this,"lastResponseHash",null),d(this,"initialized",!1),this.analyticsService=n\|\|null,e&&this.parseBlockData(e)}async init(e){this.analyticsService&&await this.trackPanelView(),this.parseBlockData(e),this.initialized=!0}cleanup(){this.sections.value=[],this.expandedCardIds.value=new Set,this.lastResponseHash=null,this.initialized=!1}updatePanelConfig(e){this.parseBlockData(e)}async trackPanelView(){try{this.analyticsService}catch(e){Object(r.a)(e,{tags:{component:"BuilderPanelViewModel",method:"trackPanelView"}})}}parseBlockData(e){try{if(this.isDataLoading.value=!0,this.setError(null),!e)throw new Error("Panel config is required");if(!e.block_data)throw new Error("block_data is missing from panel config");const n=e.block_data;if(!n.sections)throw new Error("sections array is missing from block_data");if(!Array.isArray(n.sections))throw new Error("sections must be an array");const a=Object(l.b)(JSON.stringify(n.sections));if(a===this.lastResponseHash)return void(this.isDataLoading.value=!1);this.sections.value=this.parseSections(n.sections),this.lastResponseHash=a,this.hasEverSuccessfullyLoaded.value=!0,this.isDataLoading.value=!1}catch(n){const a=n instanceof Error?n.message:"Failed to parse block data";this.setError(a),this.isDataLoading.value=!1,Object(r.a)(n,{tags:{component:"BuilderPanelViewModel",method:"parseBlockData"},extra:{panelConfig:e}})}}toggleCardExpanded(e){const n=new Set(this.expandedCardIds.value);n.has(e)?n.delete(e):n.add(e),this.expandedCardIds.value=n}collapseAllCards(){this.expandedCardIds.value=new Set}parsePadding(e){var n,a,t,i;const r=8,l=8,d=8,s=8;return{top:null!==(n=null==e?void 0:e.top)&&void 0!==n?n:r,right:null!==(a=null==e?void 0:e.right)&&void 0!==a?a:l,bottom:null!==(t=null==e?void 0:e.bottom)&&void 0!==t?t:d,left:null!==(i=null==e?void 0:e.left)&&void 0!==i?i:s}}parseHeader(e){var n,a,t;return{content:null!==(n=null==e?void 0:e.content)&&void 0!==n?n:"",enabled:null!==(a=null==e?void 0:e.enabled)&&void 0!==a&&a,type:null!==(t=null==e?void 0:e.type)&&void 0!==t?t:"text",alt:null==e?void 0:e.alt}}parseSectionSettings(e){var n,a,t,i;return{backgroundColor:null!==(n=null==e?void 0:e.background_color)&&void 0!==n?n:"transparent",header:this.parseHeader(null==e?void 0:e.header),padding:this.parsePadding(null==e?void 0:e.padding),spacing:null!==(a=null==e?void 0:e.spacing)&&void 0!==a?a:8,sticky:null!==(t=null==e?void 0:e.sticky)&&void 0!==t&&t,textAlignment:null!==(i=null==e?void 0:e.text_alignment)&&void 0!==i?i:"left"}}parseSimpleCard(e){var n,a,t,i;return{id:e.id,type:"simple",title:null!==(n=e.title)&&void 0!==n?n:"",image:{url:null!==(a=null===(t=e.image)\|\|void 0===t?void 0:t.url)&&void 0!==a?a:"",alt:null===(i=e.image)\|\|void 0===i?void 0:i.alt}}}parseExpandableCard(e){var n,a,t;return{id:e.id,type:"expandable",title:null!==(n=e.title)&&void 0!==n?n:"",collapsedState:{cards:Array.isArray(null===(a=e.collapsed_state)\|\|void 0===a?void 0:a.cards)?e.collapsed_state.cards.map(e=>this.parseSimpleCard(e)):[]},expandedState:{cards:Array.isArray(null===(t=e.expanded_state)\|\|void 0===t?void 0:t.cards)?e.expanded_state.cards.map(e=>this.parseSimpleCard(e)):[]},settings:e.settings?this.parseSectionSettings(e.settings):void 0}}parseCard(e){if(!e\|\|!e.id)throw new Error("Card must have an id");return"expandable"===e.type?this.parseExpandableCard(e):this.parseSimpleCard(e)}parseSection(e){var n;if(!e\|\|!e.id)throw new Error("Section must have an id");return{id:e.id,title:null!==(n=e.title)&&void 0!==n?n:"",cards:Array.isArray(e.cards)?e.cards.map(e=>this.parseCard(e)):[],settings:this.parseSectionSettings(e.settings)}}parseSections(e){if(!Array.isArray(e))throw new Error("Sections must be an array");return e.map(e=>this.parseSection(e))}}},209:function(e,n,a){"use strict";var t=a(6),i=a.n(t),r=a(7),l=a.n(r)()(i.a);l.push([e.i,"/* Builder Panel View /\n.builder-panel-view {\n width: 100%;\n min-height: 100%;\n background-color: var(--sdk-surface4);\n}\n\n/ Empty State /\n.builder-panel-empty-state {\n width: 100%;\n height: 100%;\n position: relative;\n background-color: var(--sdk-surface4);\n}\n\n.builder-panel-empty-state-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n width: 80%;\n max-width: 400px;\n}\n\n.builder-panel-empty-state-title {\n margin-bottom: 12px;\n}\n\n.builder-panel-empty-state-description {\n color: var(--sdk-text200);\n margin: 0;\n}\n\n/ Loading State /\n.builder-panel-loading {\n width: 100%;\n height: 100%;\n background-color: var(--sdk-surface4);\n}\n\n/ Bottom Padding /\n.builder-panel-bottom-padding {\n height: 32px;\n}\n","",{version:3,sources:["webpack://./src/modules/maestro/builder/view/BuilderPanelView.styles.css"],names:[],mappings:"AAAA,uBAAuB;AACvB;EACE,WAAW;EACX,gBAAgB;EAChB,qCAAqC;AACvC;;AAEA,gBAAgB;AAChB;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,qCAAqC;AACvC;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;EAChC,kBAAkB;EAClB,UAAU;EACV,gBAAgB;AAClB;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,yBAAyB;EACzB,SAAS;AACX;;AAEA,kBAAkB;AAClB;EACE,WAAW;EACX,YAAY;EACZ,qCAAqC;AACvC;;AAEA,mBAAmB;AACnB;EACE,YAAY;AACd",sourcesContent:["/ Builder Panel View /\n.builder-panel-view {\n width: 100%;\n min-height: 100%;\n background-color: var(--sdk-surface4);\n}\n\n/ Empty State /\n.builder-panel-empty-state {\n width: 100%;\n height: 100%;\n position: relative;\n background-color: var(--sdk-surface4);\n}\n\n.builder-panel-empty-state-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n width: 80%;\n max-width: 400px;\n}\n\n.builder-panel-empty-state-title {\n margin-bottom: 12px;\n}\n\n.builder-panel-empty-state-description {\n color: var(--sdk-text200);\n margin: 0;\n}\n\n/ Loading State /\n.builder-panel-loading {\n width: 100%;\n height: 100%;\n background-color: var(--sdk-surface4);\n}\n\n/ Bottom Padding /\n.builder-panel-bottom-padding {\n height: 32px;\n}\n"],sourceRoot:""}]),n.a=l},210:function(e,n,a){"use strict";var t=a(6),i=a.n(t),r=a(7),l=a.n(r)()(i.a);l.push([e.i,".builder-section {\n width: 100%;\n display: block;\n}\n\n.builder-section-header {\n width: 100%;\n z-index: 10;\n display: block;\n}\n\n.builder-section-header.sticky {\n position: sticky;\n top: 0;\n}\n\n.builder-section-header-image {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n.builder-section-header-text {\n color: var(--sdk-text100);\n}\n\n.builder-section-cards {\n width: 100%;\n}\n\n.builder-section-cards > {\n display: inline-block;\n}\n","",{version:3,sources:["webpack://./src/modules/maestro/builder/components/BuilderSection/BuilderSection.styles.css"],names:[],mappings:"AAAA;EACE,WAAW;EACX,cAAc;AAChB;;AAEA;EACE,WAAW;EACX,WAAW;EACX,cAAc;AAChB;;AAEA;EACE,gBAAgB;EAChB,MAAM;AACR;;AAEA;EACE,eAAe;EACf,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,qBAAqB;AACvB",sourcesContent:[".builder-section {\n width: 100%;\n display: block;\n}\n\n.builder-section-header {\n width: 100%;\n z-index: 10;\n display: block;\n}\n\n.builder-section-header.sticky {\n position: sticky;\n top: 0;\n}\n\n.builder-section-header-image {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n.builder-section-header-text {\n color: var(--sdk-text100);\n}\n\n.builder-section-cards {\n width: 100%;\n}\n\n.builder-section-cards > * {\n display: inline-block;\n}\n"],sourceRoot:""}]),n.a=l},211:function(e,n,a){"use strict";var t=a(6),i=a.n(t),r=a(7),l=a.n(r)()(i.a);l.push([e.i,".simple-card {\n position: relative;\n display: block;\n background-color: var(--sdk-surface4);\n padding: 16px;\n}\n\n.simple-card-image-wrapper {\n position: relative;\n width: 100%;\n overflow: hidden;\n background-color: var(--sdk-surface2);\n}\n\n.simple-card-image-wrapper::before {\n content: '';\n display: block;\n}\n\n.simple-card-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n/* Desktop hover state /\n@media (hover: hover) {\n .simple-card:hover {\n border-color: var(--sdk-highlightPrimary);\n }\n\n .simple-card:hover .simple-card-image {\n opacity: 0.8;\n }\n}\n\n.simple-card-title {\n margin-bottom: 12px;\n text-align: center;\n color: var(--sdk-text100);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","",{version:3,sources:["webpack://./src/modules/maestro/builder/components/SimpleCard/SimpleCard.styles.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,cAAc;EACd,qCAAqC;EACrC,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,gBAAgB;EAChB,qCAAqC;AACvC;;AAEA;EACE,WAAW;EACX,cAAc;AAChB;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;AACd;;AAEA,wBAAwB;AACxB;EACE;IACE,yCAAyC;EAC3C;;EAEA;IACE,YAAY;EACd;AACF;;AAEA;EACE,mBAAmB;EACnB,kBAAkB;EAClB,yBAAyB;EACzB,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;AACrB",sourcesContent:[".simple-card {\n position: relative;\n display: block;\n background-color: var(--sdk-surface4);\n padding: 16px;\n}\n\n.simple-card-image-wrapper {\n position: relative;\n width: 100%;\n overflow: hidden;\n background-color: var(--sdk-surface2);\n}\n\n.simple-card-image-wrapper::before {\n content: '';\n display: block;\n}\n\n.simple-card-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n/ Desktop hover state /\n@media (hover: hover) {\n .simple-card:hover {\n border-color: var(--sdk-highlightPrimary);\n }\n\n .simple-card:hover .simple-card-image {\n opacity: 0.8;\n }\n}\n\n.simple-card-title {\n margin-bottom: 12px;\n text-align: center;\n color: var(--sdk-text100);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n"],sourceRoot:""}]),n.a=l},212:function(e,n,a){"use strict";var t=a(6),i=a.n(t),r=a(7),l=a.n(r)()(i.a);l.push([e.i,".expandable-card {\n position: relative;\n display: block;\n background-color: var(--sdk-surface4);\n padding: 16px;\n transition: all 0.3s ease-in-out;\n}\n\n.expandable-card[data-expanded='true'] {\n padding: 24px;\n}\n\n.expandable-card-title {\n margin-bottom: 16px;\n text-align: center;\n color: var(--sdk-text100);\n}\n\n.expandable-card-cards-container {\n position: relative;\n width: 100%;\n}\n\n/ Collapsed state - horizontal layout /\n.expandable-card[data-expanded='false'] .expandable-card-cards-container {\n white-space: nowrap;\n overflow: hidden;\n}\n\n.expandable-card[data-expanded='false'] .expandable-card-cards-container > {\n display: inline-block;\n vertical-align: top;\n width: 30%;\n margin-right: 2%;\n}\n\n.expandable-card[data-expanded='false']\n .expandable-card-cards-container\n > :last-child {\n margin-right: 0;\n}\n\n/ Expanded state - grid layout using inline-block (TV-compatible) /\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\n font-size: 0; / Remove whitespace between inline-block elements /\n}\n\n.expandable-card[data-expanded='true'] .expandable-card-cards-container > {\n display: inline-block;\n vertical-align: top;\n width: 23%;\n margin-right: 2.66%;\n margin-bottom: 16px;\n font-size: 1rem; /* Reset font size /\n}\n\n/ Create 4-column grid effect /\n.expandable-card[data-expanded='true']\n .expandable-card-cards-container\n > :nth-child(4n) {\n margin-right: 0;\n}\n\n/* Animation for expand/collapse /\n.expandable-card-cards-container {\n transition: all 0.3s ease-in-out;\n max-height: 300px;\n overflow: hidden;\n}\n\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\n max-height: 2000px;\n}\n","",{version:3,sources:["webpack://./src/modules/maestro/builder/components/ExpandableCard/ExpandableCard.styles.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,cAAc;EACd,qCAAqC;EACrC,aAAa;EACb,gCAAgC;AAClC;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,mBAAmB;EACnB,kBAAkB;EAClB,yBAAyB;AAC3B;;AAEA;EACE,kBAAkB;EAClB,WAAW;AACb;;AAEA,wCAAwC;AACxC;EACE,mBAAmB;EACnB,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,UAAU;EACV,gBAAgB;AAClB;;AAEA;;;EAGE,eAAe;AACjB;;AAEA,oEAAoE;AACpE;EACE,YAAY,EAAE,oDAAoD;AACpE;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,UAAU;EACV,mBAAmB;EACnB,mBAAmB;EACnB,eAAe,EAAE,oBAAoB;AACvC;;AAEA,gCAAgC;AAChC;;;EAGE,eAAe;AACjB;;AAEA,kCAAkC;AAClC;EACE,gCAAgC;EAChC,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;AACpB",sourcesContent:[".expandable-card {\n position: relative;\n display: block;\n background-color: var(--sdk-surface4);\n padding: 16px;\n transition: all 0.3s ease-in-out;\n}\n\n.expandable-card[data-expanded='true'] {\n padding: 24px;\n}\n\n.expandable-card-title {\n margin-bottom: 16px;\n text-align: center;\n color: var(--sdk-text100);\n}\n\n.expandable-card-cards-container {\n position: relative;\n width: 100%;\n}\n\n/ Collapsed state - horizontal layout /\n.expandable-card[data-expanded='false'] .expandable-card-cards-container {\n white-space: nowrap;\n overflow: hidden;\n}\n\n.expandable-card[data-expanded='false'] .expandable-card-cards-container > {\n display: inline-block;\n vertical-align: top;\n width: 30%;\n margin-right: 2%;\n}\n\n.expandable-card[data-expanded='false']\n .expandable-card-cards-container\n > :last-child {\n margin-right: 0;\n}\n\n/ Expanded state - grid layout using inline-block (TV-compatible) /\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\n font-size: 0; / Remove whitespace between inline-block elements /\n}\n\n.expandable-card[data-expanded='true'] .expandable-card-cards-container > {\n display: inline-block;\n vertical-align: top;\n width: 23%;\n margin-right: 2.66%;\n margin-bottom: 16px;\n font-size: 1rem; /* Reset font size /\n}\n\n/ Create 4-column grid effect /\n.expandable-card[data-expanded='true']\n .expandable-card-cards-container\n > :nth-child(4n) {\n margin-right: 0;\n}\n\n/* Animation for expand/collapse */\n.expandable-card-cards-container {\n transition: all 0.3s ease-in-out;\n max-height: 300px;\n overflow: hidden;\n}\n\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\n max-height: 2000px;\n}\n"],sourceRoot:""}]),n.a=l},234:function(e,n,a){"use strict";a.r(n),a.d(n,"BuilderPanelViewModel",(function(){return t.BuilderPanelViewModel})),a.d(n,"default",(function(){return y}));var t=a(123),i=a(0),r=a.n(i),l=a(5),d=a.n(l),s=a(209),o={insert:"head",singleton:!1},c=(d()(s.a,o),s.a.locals,a(8)),A=a(100),p=a(211),u={insert:"head",singleton:!1},m=(d()(p.a,u),p.a.locals,a(98));var g=Object(m.a)()(e=>{const{title:n,image:a,focused:t}=e;return r.a.createElement("div",{className:"simple-card focus-ring","data-focused":t},n&&r.a.createElement("div",{className:"simple-card-title T05_ALT"},n),r.a.createElement("div",{className:"simple-card-image-wrapper"},r.a.createElement(A.a,{src:a.url,alt:a.alt\|\|n,className:"simple-card-image"})))}),b=a(212),h={insert:"head",singleton:!1};d()(b.a,h),b.a.locals;function E(){return(E=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];for(var t in a)({}).hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e}).apply(null,arguments)}const C=Object(m.a)()(({children:e,focused:n,expanded:a,settings:t})=>{const i={};return null!=t&&t.backgroundColor&&(i.backgroundColor=t.backgroundColor),null!=t&&t.padding&&(i.padding=`${t.padding.top}px ${t.padding.right}px ${t.padding.bottom}px ${t.padding.left}px`),r.a.createElement("div",{className:"expandable-card focus-ring","data-focused":n,"data-expanded":a,role:"button",tabIndex:0,style:i},e)});var v=Object(m.a)()(e=>{const{id:n,title:a,settings:t,collapsedState:l,expandedState:d}=e,[s,o]=Object(i.useState)(!1),c="expandable-card-"+n,A=Object(i.useCallback)(()=>{o(e=>!e)},[]),p=Object(i.useCallback)(()=>!s\|\|(o(!1),!1),[s]);return r.a.createElement(C,E({},e,{focusKey:c,onEnterPress:A,onClickPress:A,onBackPress:p,expanded:s,settings:t}),s?r.a.createElement(r.a.Fragment,null,a&&r.a.createElement("div",{className:"expandable-card-title T10 FONT_BOLD"},a),r.a.createElement("div",{className:"expandable-card-cards-container"},d.cards.map(e=>r.a.createElement(g,{key:e.id,id:e.id,title:e.title,image:e.image,focusKey:`${c}-expanded-${e.id}`})))):r.a.createElement(r.a.Fragment,null,a&&r.a.createElement("div",{className:"expandable-card-title T10 FONT_BOLD"},a),r.a.createElement("div",{className:"expandable-card-cards-container"},l.cards.map(e=>r.a.createElement(g,{key:e.id,id:e.id,title:e.title,image:e.image,focusKey:`${c}-collapsed-${e.id}`})))))}),B=a(210),x={insert:"head",singleton:!1};d()(B.a,x),B.a.locals;var f=({title:e,settings:n,cards:a})=>{const{header:t,sticky:i,textAlignment:l,spacing:d,padding:s,backgroundColor:o}=n,c={backgroundColor:o,paddingTop:null==s?void 0:s.top,paddingRight:null==s?void 0:s.right,paddingBottom:null==s?void 0:s.bottom,paddingLeft:null==s?void 0:s.left,textAlign:l},p={backgroundColor:i?o:"transparent",marginBottom:d},u={marginLeft:d?-d/2:0,marginRight:d?-d/2:0},m={padding:d?d/2:0,boxSizing:"border-box"};return r.a.createElement("div",{className:"builder-section",style:c},(()=>{if(!t.enabled)return null;const n="builder-section-header"+(i?" sticky":"");return r.a.createElement("div",{className:n,style:p},"image"===t.type?r.a.createElement(A.a,{src:t.content,alt:e,className:"builder-section-header-image"}):r.a.createElement("div",{className:"builder-section-header-text T14 FONT_BOLD"},t.content))})(),r.a.createElement("div",{className:"builder-section-cards",style:u},a.map(e=>{let a;switch(e.type){case"simple":a=r.a.createElement(g,{key:e.id,id:e.id,title:e.title,image:e.image,focusKey:"simple-card-"+e.id});break;case"expandable":a=r.a.createElement(v,{key:e.id,id:e.id,title:e.title,collapsedState:e.collapsedState,expandedState:e.expandedState,settings:n});break;default:return null}return r.a.createElement("div",{key:e.id,style:m},a)})))},k=a(101);var y=()=>{var e,n;const a=Object(i.useRef)(null),t=Object(i.useRef)(c.default.getMaestroEventViewModel().builderPanelViewModel),l=(()=>{if(!t.current)throw new Error("BuilderPanelViewModel is not initialized");return t.current})(),[d,s]=Object(i.useState)(null!==(e=l.sections.value)&&void 0!==e?e:[]),[o,A]=Object(i.useState)(null!==(n=l.isDataLoading.value)&&void 0!==n&&n),[p,u]=Object(i.useState)(null);Object(i.useEffect)(()=>{const e=l.sections.subscribe(e=>{s(e)}),n=l.isDataLoading.subscribe(e=>{A(e)});return u(a.current),()=>{e&&e(),n&&n()}},[l]);return o?r.a.createElement("div",{className:"builder-panel-loading"}):d&&0!==d.length?r.a.createElement(k.a,{scrollableContainerRef:p},r.a.createElement("div",{ref:a,className:"builder-panel-view"},d.map(e=>r.a.createElement(f,{key:e.id,id:e.id,title:e.title,settings:e.settings,cards:e.cards})),r.a.createElement("div",{className:"builder-panel-bottom-padding"}))):r.a.createElement("div",{className:"builder-panel-empty-state"},r.a.createElement("div",{className:"builder-panel-empty-state-content"},r.a.createElement("div",{className:"T20 FONT_BOLD builder-panel-empty-state-title"},"No Content Available"),r.a.createElement("p",{className:"T14 builder-panel-empty-state-description"},"This panel doesn't have any sections to display.")))}}}]);
2	+ //# sourceMappingURL=7.maestro-web-sdk.esm.js.map

package/dist/7.maestro-web-sdk.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["webpack:///./src/components/atoms/Image/index.tsx","webpack:///./src/components/core/ScrollableContainer/index.ts","webpack:///./src/helpers/strings.ts","webpack:///./src/modules/maestro/builder/view-model/BuilderPanelViewModel.ts","webpack:///./src/modules/maestro/builder/view/BuilderPanelView.styles.css","webpack:///./src/modules/maestro/builder/components/BuilderSection/BuilderSection.styles.css","webpack:///./src/modules/maestro/builder/components/SimpleCard/SimpleCard.styles.css","webpack:///./src/modules/maestro/builder/components/ExpandableCard/ExpandableCard.styles.css","webpack:///./src/modules/maestro/builder/view/BuilderPanelView.styles.css?8480","webpack:///./src/modules/maestro/builder/components/SimpleCard/SimpleCard.styles.css?1daa","webpack:///./src/modules/maestro/builder/components/SimpleCard/SimpleCard.tsx","webpack:///./src/modules/maestro/builder/components/ExpandableCard/ExpandableCard.styles.css?766b","webpack:///./src/modules/maestro/builder/components/ExpandableCard/ExpandableCard.tsx","webpack:///./src/modules/maestro/builder/components/BuilderSection/BuilderSection.styles.css?3827","webpack:///./src/modules/maestro/builder/components/BuilderSection/BuilderSection.tsx","webpack:///./src/modules/maestro/builder/components/BuilderSection/index.ts","webpack:///./src/modules/maestro/builder/view/BuilderPanelView.tsx"],"names":["Image","React","Component","constructor","props","super","_defineProperty","failed","this","setState","render","state","console","warn","src","createElement","_extends","alt","onError","handleError","ScrollableContainer","slugify","str","toLowerCase","trim","replace","stringHashCode","hash","i","length","charCodeAt","BuilderPanelViewModel","ViewModel","panelConfig","analyticsService","Observable","Set","parseBlockData","trackPanelView","initialized","cleanup","sections","value","expandedCardIds","lastResponseHash","updatePanelConfig","error","captureException","tags","component","method","isDataLoading","setError","Error","block_data","blockData","Array","isArray","responseHash","JSON","stringify","parseSections","hasEverSuccessfullyLoaded","errorMessage","message","extra","toggleCardExpanded","cardId","currentExpandedIds","has","delete","add","collapseAllCards","parsePadding","raw","_raw$top","_raw$right","_raw$bottom","_raw$left","DEFAULT_PADDING","top","right","bottom","left","parseHeader","_raw$content","_raw$enabled","_raw$type","content","enabled","type","parseSectionSettings","_raw$background_color","_raw$spacing","_raw$sticky","_raw$text_alignment","backgroundColor","background_color","header","padding","spacing","sticky","textAlignment","text_alignment","parseSimpleCard","_raw$title","_raw$image$url","_raw$image","_raw$image2","id","title","image","url","parseExpandableCard","_raw$title2","_raw$collapsed_state","_raw$expanded_state","collapsedState","cards","collapsed_state","map","card","expandedState","expanded_state","settings","undefined","parseCard","parseSection","_raw$title3","rawSections","section","___CSS_LOADER_EXPORT___","push","module","options","locals","withFocusable","focused","className","data-focused","FocusableWrapper","children","expanded","style","data-expanded","role","tabIndex","setExpanded","useState","focusKey","onEnterPress","useCallback","prev","onBackPress","onClickPress","Fragment","SimpleCard","key","BuilderSection","sectionStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","textAlign","headerStyle","marginBottom","cardsContainerStyle","marginLeft","marginRight","cardWrapperStyle","boxSizing","renderHeader","headerClassName","cardContent","ExpandableCard","BuilderPanelView","_viewModel$sections$v","_viewModel$isDataLoad","container","useRef","vm","SDK","getMaestroEventViewModel","builderPanelViewModel","viewModel","current","setSections","isLoading","setIsLoading","scrollableContainer","setScrollableContainer","useEffect","sectionsUnsub","subscribe","loadingUnsub","scrollableContainerRef","ref"],"mappings":"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","file":"7.maestro-web-sdk.esm.js","sourcesContent":["import React from 'react';\nimport { ImgHTMLAttributes } from 'react';\n\ninterface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {}\n\nclass Image extends React.Component<ImageProps> {\n state = {\n failed: false,\n };\n\n constructor(props: ImageProps) {\n super(props);\n }\n\n handleError = () => {\n this.setState({ failed: true });\n };\n\n render() {\n if (this.state.failed) {\n console.warn('Image failed to load:', this.props.src);\n return null;\n }\n\n if (!this.props.src) {\n console.warn('Image source is empty');\n return null;\n }\n\n return (\n <img\n alt={this.props.alt || 'Image'}\n {...this.props}\n onError={this.handleError}\n />\n );\n }\n}\n\nexport default Image;\n","import ScrollableContainer from './ScrollableContainer';\n\nexport { ScrollableContainerContext } from './ScrollableContainer';\nexport { useScrollableContainer } from './useScrollableContainer';\nexport { default as FocusableItem } from './FocusableItem';\nexport type { ScrollableContainerContextType } from './ScrollableContainer';\nexport default ScrollableContainer;\n","export const slugify = (str: string) =>\n str\n .toLowerCase()\n .trim()\n .replace(/[\\s\\W-]+/g, '-')\n .replace(/^-+|-+$/g, '');\n\nexport function stringHashCode(str: string): number {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n hash = (hash << 5) - hash + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return hash;\n}\n","import { Observable } from '../../../../helpers/Observable';\nimport { ViewModel } from '../../../../view-models/ViewModel';\nimport { captureException } from '@/sentry';\nimport AnalyticsService from '@/services/AnalyticsService/AnalyticsService';\nimport { stringHashCode } from '@/helpers/strings';\nimport {\n ICard,\n IExpandableCard,\n ISection,\n ISectionSettings,\n ISimpleCard,\n} from '../types';\n\ninterface IBlockData {\n sections: any[];\n}\n\ninterface IPanelConfig {\n block_data?: IBlockData;\n id: string;\n panel_name: string;\n panel_type: string;\n icon_name?: string;\n}\n\nexport class BuilderPanelViewModel extends ViewModel {\n public sections = new Observable<ISection[]>([]);\n public expandedCardIds = new Observable<Set<string>>(new Set());\n public isDataLoading = new Observable<boolean>(false);\n public hasEverSuccessfullyLoaded = new Observable<boolean>(false);\n\n private analyticsService: AnalyticsService | null = null;\n private lastResponseHash: number | null = null;\n initialized = false;\n\n constructor(panelConfig?: IPanelConfig, analyticsService?: AnalyticsService) {\n super();\n this.analyticsService = analyticsService || null;\n\n if (panelConfig) {\n this.parseBlockData(panelConfig);\n }\n }\n\n async init(panelConfig: IPanelConfig): Promise<void> {\n if (this.analyticsService) {\n await this.trackPanelView();\n }\n this.parseBlockData(panelConfig);\n this.initialized = true;\n }\n\n cleanup(): void {\n this.sections.value = [];\n this.expandedCardIds.value = new Set();\n this.lastResponseHash = null;\n this.initialized = false;\n }\n\n updatePanelConfig(panelConfig: IPanelConfig): void {\n this.parseBlockData(panelConfig);\n }\n\n private async trackPanelView(): Promise<void> {\n try {\n if (this.analyticsService) {\n // TODO: Add builder to MaestroPanelType analytics before enabling\n // await this.analyticsService.panelView('builderBlockPanel');\n }\n } catch (error) {\n captureException(error, {\n tags: {\n component: 'BuilderPanelViewModel',\n method: 'trackPanelView',\n },\n });\n }\n }\n\n private parseBlockData(panelConfig: IPanelConfig): void {\n try {\n this.isDataLoading.value = true;\n this.setError(null);\n\n if (!panelConfig) {\n throw new Error('Panel config is required');\n }\n\n if (!panelConfig.block_data) {\n throw new Error('block_data is missing from panel config');\n }\n\n const blockData = panelConfig.block_data;\n\n if (!blockData.sections) {\n throw new Error('sections array is missing from block_data');\n }\n\n if (!Array.isArray(blockData.sections)) {\n throw new Error('sections must be an array');\n }\n\n const responseHash = stringHashCode(JSON.stringify(blockData.sections));\n if (responseHash === this.lastResponseHash) {\n this.isDataLoading.value = false;\n return;\n }\n\n // Parse the raw config into properly typed sections with camelCase\n this.sections.value = this.parseSections(blockData.sections);\n this.lastResponseHash = responseHash;\n this.hasEverSuccessfullyLoaded.value = true;\n this.isDataLoading.value = false;\n } catch (error) {\n const errorMessage =\n error instanceof Error ? error.message : 'Failed to parse block data';\n this.setError(errorMessage);\n this.isDataLoading.value = false;\n\n captureException(error, {\n tags: {\n component: 'BuilderPanelViewModel',\n method: 'parseBlockData',\n },\n extra: {\n panelConfig,\n },\n });\n }\n }\n\n toggleCardExpanded(cardId: string): void {\n const currentExpandedIds = new Set(this.expandedCardIds.value);\n\n if (currentExpandedIds.has(cardId)) {\n currentExpandedIds.delete(cardId);\n } else {\n currentExpandedIds.add(cardId);\n }\n\n this.expandedCardIds.value = currentExpandedIds;\n }\n\n collapseAllCards(): void {\n this.expandedCardIds.value = new Set();\n }\n\n private parsePadding(raw: any) {\n const DEFAULT_PADDING = { top: 8, right: 8, bottom: 8, left: 8 };\n return {\n top: raw?.top ?? DEFAULT_PADDING.top,\n right: raw?.right ?? DEFAULT_PADDING.right,\n bottom: raw?.bottom ?? DEFAULT_PADDING.bottom,\n left: raw?.left ?? DEFAULT_PADDING.left,\n };\n }\n\n private parseHeader(raw: any) {\n return {\n content: raw?.content ?? '',\n enabled: raw?.enabled ?? false,\n type: (raw?.type ?? 'text') as 'text' | 'image',\n alt: raw?.alt,\n };\n }\n\n private parseSectionSettings(raw: any): ISectionSettings {\n return {\n backgroundColor: raw?.background_color ?? 'transparent',\n header: this.parseHeader(raw?.header),\n padding: this.parsePadding(raw?.padding),\n spacing: raw?.spacing ?? 8,\n sticky: raw?.sticky ?? false,\n textAlignment: raw?.text_alignment ?? 'left',\n };\n }\n\n private parseSimpleCard(raw: any): ISimpleCard {\n return {\n id: raw.id,\n type: 'simple',\n title: raw.title ?? '',\n image: {\n url: raw.image?.url ?? '',\n alt: raw.image?.alt,\n },\n };\n }\n\n private parseExpandableCard(raw: any): IExpandableCard {\n return {\n id: raw.id,\n type: 'expandable',\n title: raw.title ?? '',\n collapsedState: {\n cards: Array.isArray(raw.collapsed_state?.cards)\n ? raw.collapsed_state.cards.map((card: any) =>\n this.parseSimpleCard(card)\n )\n : [],\n },\n expandedState: {\n cards: Array.isArray(raw.expanded_state?.cards)\n ? raw.expanded_state.cards.map((card: any) =>\n this.parseSimpleCard(card)\n )\n : [],\n },\n settings: raw.settings\n ? this.parseSectionSettings(raw.settings)\n : undefined,\n };\n }\n\n private parseCard(raw: any): ICard {\n if (!raw || !raw.id) {\n throw new Error('Card must have an id');\n }\n\n if (raw.type === 'expandable') {\n return this.parseExpandableCard(raw);\n }\n\n return this.parseSimpleCard(raw);\n }\n\n private parseSection(raw: any): ISection {\n if (!raw || !raw.id) {\n throw new Error('Section must have an id');\n }\n\n return {\n id: raw.id,\n title: raw.title ?? '',\n cards: Array.isArray(raw.cards)\n ? raw.cards.map((card: any) => this.parseCard(card))\n : [],\n settings: this.parseSectionSettings(raw.settings),\n };\n }\n\n private parseSections(rawSections: any[]): ISection[] {\n if (!Array.isArray(rawSections)) {\n throw new Error('Sections must be an array');\n }\n\n return rawSections.map((section: any) => this.parseSection(section));\n }\n}\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* Builder Panel View */\\n.builder-panel-view {\\n width: 100%;\\n min-height: 100%;\\n background-color: var(--sdk-surface4);\\n}\\n\\n/* Empty State */\\n.builder-panel-empty-state {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n background-color: var(--sdk-surface4);\\n}\\n\\n.builder-panel-empty-state-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n width: 80%;\\n max-width: 400px;\\n}\\n\\n.builder-panel-empty-state-title {\\n margin-bottom: 12px;\\n}\\n\\n.builder-panel-empty-state-description {\\n color: var(--sdk-text200);\\n margin: 0;\\n}\\n\\n/* Loading State */\\n.builder-panel-loading {\\n width: 100%;\\n height: 100%;\\n background-color: var(--sdk-surface4);\\n}\\n\\n/* Bottom Padding */\\n.builder-panel-bottom-padding {\\n height: 32px;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/maestro/builder/view/BuilderPanelView.styles.css\"],\"names\":[],\"mappings\":\"AAAA,uBAAuB;AACvB;EACE,WAAW;EACX,gBAAgB;EAChB,qCAAqC;AACvC;;AAEA,gBAAgB;AAChB;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,qCAAqC;AACvC;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;EAChC,kBAAkB;EAClB,UAAU;EACV,gBAAgB;AAClB;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,yBAAyB;EACzB,SAAS;AACX;;AAEA,kBAAkB;AAClB;EACE,WAAW;EACX,YAAY;EACZ,qCAAqC;AACvC;;AAEA,mBAAmB;AACnB;EACE,YAAY;AACd\",\"sourcesContent\":[\"/* Builder Panel View */\\n.builder-panel-view {\\n width: 100%;\\n min-height: 100%;\\n background-color: var(--sdk-surface4);\\n}\\n\\n/* Empty State */\\n.builder-panel-empty-state {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n background-color: var(--sdk-surface4);\\n}\\n\\n.builder-panel-empty-state-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n width: 80%;\\n max-width: 400px;\\n}\\n\\n.builder-panel-empty-state-title {\\n margin-bottom: 12px;\\n}\\n\\n.builder-panel-empty-state-description {\\n color: var(--sdk-text200);\\n margin: 0;\\n}\\n\\n/* Loading State */\\n.builder-panel-loading {\\n width: 100%;\\n height: 100%;\\n background-color: var(--sdk-surface4);\\n}\\n\\n/* Bottom Padding */\\n.builder-panel-bottom-padding {\\n height: 32px;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".builder-section {\\n width: 100%;\\n display: block;\\n}\\n\\n.builder-section-header {\\n width: 100%;\\n z-index: 10;\\n display: block;\\n}\\n\\n.builder-section-header.sticky {\\n position: sticky;\\n top: 0;\\n}\\n\\n.builder-section-header-image {\\n max-width: 100%;\\n height: auto;\\n display: block;\\n}\\n\\n.builder-section-header-text {\\n color: var(--sdk-text100);\\n}\\n\\n.builder-section-cards {\\n width: 100%;\\n}\\n\\n.builder-section-cards > * {\\n display: inline-block;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/maestro/builder/components/BuilderSection/BuilderSection.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,WAAW;EACX,cAAc;AAChB;;AAEA;EACE,WAAW;EACX,WAAW;EACX,cAAc;AAChB;;AAEA;EACE,gBAAgB;EAChB,MAAM;AACR;;AAEA;EACE,eAAe;EACf,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,qBAAqB;AACvB\",\"sourcesContent\":[\".builder-section {\\n width: 100%;\\n display: block;\\n}\\n\\n.builder-section-header {\\n width: 100%;\\n z-index: 10;\\n display: block;\\n}\\n\\n.builder-section-header.sticky {\\n position: sticky;\\n top: 0;\\n}\\n\\n.builder-section-header-image {\\n max-width: 100%;\\n height: auto;\\n display: block;\\n}\\n\\n.builder-section-header-text {\\n color: var(--sdk-text100);\\n}\\n\\n.builder-section-cards {\\n width: 100%;\\n}\\n\\n.builder-section-cards > * {\\n display: inline-block;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".simple-card {\\n position: relative;\\n display: block;\\n background-color: var(--sdk-surface4);\\n padding: 16px;\\n}\\n\\n.simple-card-image-wrapper {\\n position: relative;\\n width: 100%;\\n overflow: hidden;\\n background-color: var(--sdk-surface2);\\n}\\n\\n.simple-card-image-wrapper::before {\\n content: '';\\n display: block;\\n}\\n\\n.simple-card-image {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Desktop hover state */\\n@media (hover: hover) {\\n .simple-card:hover {\\n border-color: var(--sdk-highlightPrimary);\\n }\\n\\n .simple-card:hover .simple-card-image {\\n opacity: 0.8;\\n }\\n}\\n\\n.simple-card-title {\\n margin-bottom: 12px;\\n text-align: center;\\n color: var(--sdk-text100);\\n overflow: hidden;\\n text-overflow: ellipsis;\\n white-space: nowrap;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/maestro/builder/components/SimpleCard/SimpleCard.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,kBAAkB;EAClB,cAAc;EACd,qCAAqC;EACrC,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,gBAAgB;EAChB,qCAAqC;AACvC;;AAEA;EACE,WAAW;EACX,cAAc;AAChB;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;AACd;;AAEA,wBAAwB;AACxB;EACE;IACE,yCAAyC;EAC3C;;EAEA;IACE,YAAY;EACd;AACF;;AAEA;EACE,mBAAmB;EACnB,kBAAkB;EAClB,yBAAyB;EACzB,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;AACrB\",\"sourcesContent\":[\".simple-card {\\n position: relative;\\n display: block;\\n background-color: var(--sdk-surface4);\\n padding: 16px;\\n}\\n\\n.simple-card-image-wrapper {\\n position: relative;\\n width: 100%;\\n overflow: hidden;\\n background-color: var(--sdk-surface2);\\n}\\n\\n.simple-card-image-wrapper::before {\\n content: '';\\n display: block;\\n}\\n\\n.simple-card-image {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Desktop hover state */\\n@media (hover: hover) {\\n .simple-card:hover {\\n border-color: var(--sdk-highlightPrimary);\\n }\\n\\n .simple-card:hover .simple-card-image {\\n opacity: 0.8;\\n }\\n}\\n\\n.simple-card-title {\\n margin-bottom: 12px;\\n text-align: center;\\n color: var(--sdk-text100);\\n overflow: hidden;\\n text-overflow: ellipsis;\\n white-space: nowrap;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".expandable-card {\\n position: relative;\\n display: block;\\n background-color: var(--sdk-surface4);\\n padding: 16px;\\n transition: all 0.3s ease-in-out;\\n}\\n\\n.expandable-card[data-expanded='true'] {\\n padding: 24px;\\n}\\n\\n.expandable-card-title {\\n margin-bottom: 16px;\\n text-align: center;\\n color: var(--sdk-text100);\\n}\\n\\n.expandable-card-cards-container {\\n position: relative;\\n width: 100%;\\n}\\n\\n/* Collapsed state - horizontal layout */\\n.expandable-card[data-expanded='false'] .expandable-card-cards-container {\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.expandable-card[data-expanded='false'] .expandable-card-cards-container > * {\\n display: inline-block;\\n vertical-align: top;\\n width: 30%;\\n margin-right: 2%;\\n}\\n\\n.expandable-card[data-expanded='false']\\n .expandable-card-cards-container\\n > *:last-child {\\n margin-right: 0;\\n}\\n\\n/* Expanded state - grid layout using inline-block (TV-compatible) */\\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\\n font-size: 0; /* Remove whitespace between inline-block elements */\\n}\\n\\n.expandable-card[data-expanded='true'] .expandable-card-cards-container > * {\\n display: inline-block;\\n vertical-align: top;\\n width: 23%;\\n margin-right: 2.66%;\\n margin-bottom: 16px;\\n font-size: 1rem; /* Reset font size */\\n}\\n\\n/* Create 4-column grid effect */\\n.expandable-card[data-expanded='true']\\n .expandable-card-cards-container\\n > *:nth-child(4n) {\\n margin-right: 0;\\n}\\n\\n/* Animation for expand/collapse */\\n.expandable-card-cards-container {\\n transition: all 0.3s ease-in-out;\\n max-height: 300px;\\n overflow: hidden;\\n}\\n\\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\\n max-height: 2000px;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/maestro/builder/components/ExpandableCard/ExpandableCard.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,kBAAkB;EAClB,cAAc;EACd,qCAAqC;EACrC,aAAa;EACb,gCAAgC;AAClC;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,mBAAmB;EACnB,kBAAkB;EAClB,yBAAyB;AAC3B;;AAEA;EACE,kBAAkB;EAClB,WAAW;AACb;;AAEA,wCAAwC;AACxC;EACE,mBAAmB;EACnB,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,UAAU;EACV,gBAAgB;AAClB;;AAEA;;;EAGE,eAAe;AACjB;;AAEA,oEAAoE;AACpE;EACE,YAAY,EAAE,oDAAoD;AACpE;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,UAAU;EACV,mBAAmB;EACnB,mBAAmB;EACnB,eAAe,EAAE,oBAAoB;AACvC;;AAEA,gCAAgC;AAChC;;;EAGE,eAAe;AACjB;;AAEA,kCAAkC;AAClC;EACE,gCAAgC;EAChC,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;AACpB\",\"sourcesContent\":[\".expandable-card {\\n position: relative;\\n display: block;\\n background-color: var(--sdk-surface4);\\n padding: 16px;\\n transition: all 0.3s ease-in-out;\\n}\\n\\n.expandable-card[data-expanded='true'] {\\n padding: 24px;\\n}\\n\\n.expandable-card-title {\\n margin-bottom: 16px;\\n text-align: center;\\n color: var(--sdk-text100);\\n}\\n\\n.expandable-card-cards-container {\\n position: relative;\\n width: 100%;\\n}\\n\\n/* Collapsed state - horizontal layout */\\n.expandable-card[data-expanded='false'] .expandable-card-cards-container {\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.expandable-card[data-expanded='false'] .expandable-card-cards-container > * {\\n display: inline-block;\\n vertical-align: top;\\n width: 30%;\\n margin-right: 2%;\\n}\\n\\n.expandable-card[data-expanded='false']\\n .expandable-card-cards-container\\n > *:last-child {\\n margin-right: 0;\\n}\\n\\n/* Expanded state - grid layout using inline-block (TV-compatible) */\\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\\n font-size: 0; /* Remove whitespace between inline-block elements */\\n}\\n\\n.expandable-card[data-expanded='true'] .expandable-card-cards-container > * {\\n display: inline-block;\\n vertical-align: top;\\n width: 23%;\\n margin-right: 2.66%;\\n margin-bottom: 16px;\\n font-size: 1rem; /* Reset font size */\\n}\\n\\n/* Create 4-column grid effect */\\n.expandable-card[data-expanded='true']\\n .expandable-card-cards-container\\n > *:nth-child(4n) {\\n margin-right: 0;\\n}\\n\\n/* Animation for expand/collapse */\\n.expandable-card-cards-container {\\n transition: all 0.3s ease-in-out;\\n max-height: 300px;\\n overflow: hidden;\\n}\\n\\n.expandable-card[data-expanded='true'] .expandable-card-cards-container {\\n max-height: 2000px;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./BuilderPanelView.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import api from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./SimpleCard.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import React from 'react';\nimport './SimpleCard.styles.css';\nimport {\n withFocusable,\n WithFocusableProps,\n} from '@/external/spatial-navigation';\nimport Image from '@/components/atoms/Image';\n\nexport interface SimpleCardProps {\n id: string;\n title: string;\n image: {\n url: string;\n alt?: string;\n };\n}\n\nconst SimpleCard = (props: SimpleCardProps & WithFocusableProps) => {\n const { title, image, focused } = props;\n\n return (\n <div className=\"simple-card focus-ring\" data-focused={focused}>\n {title && <div className=\"simple-card-title T05_ALT\">{title}</div>}\n <div className=\"simple-card-image-wrapper\">\n <Image\n src={image.url}\n alt={image.alt || title}\n className=\"simple-card-image\"\n />\n </div>\n </div>\n );\n};\n\nexport default withFocusable<SimpleCardProps>()(SimpleCard);\n","import api from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./ExpandableCard.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import React, { useState, useCallback } from 'react';\nimport {\n withFocusable,\n WithFocusableProps,\n} from '@/external/spatial-navigation';\nimport { Layout } from '@/external/spatial-navigation/utils';\nimport { ISimpleCard, ISectionSettings } from '../../types';\nimport SimpleCard from '../SimpleCard';\nimport './ExpandableCard.styles.css';\n\nexport interface ExpandableCardProps {\n id: string;\n title: string;\n settings?: ISectionSettings;\n collapsedState: { cards: ISimpleCard[] };\n expandedState: { cards: ISimpleCard[] };\n onBecameFocused?: (layout: Layout) => void;\n}\n\ntype WrapperProps = {\n children: React.ReactNode;\n focused?: boolean;\n expanded: boolean;\n settings?: ISectionSettings;\n};\n\nconst FocusableWrapper = withFocusable<WrapperProps>()(\n ({\n children,\n focused,\n expanded,\n settings,\n }: WrapperProps & WithFocusableProps) => {\n const style: React.CSSProperties = {};\n if (settings?.backgroundColor) {\n style.backgroundColor = settings.backgroundColor;\n }\n if (settings?.padding) {\n style.padding = `${settings.padding.top}px ${settings.padding.right}px ${settings.padding.bottom}px ${settings.padding.left}px`;\n }\n\n return (\n <div\n className=\"expandable-card focus-ring\"\n data-focused={focused}\n data-expanded={expanded}\n role=\"button\"\n tabIndex={0}\n style={style}\n >\n {children}\n </div>\n );\n }\n);\n\nconst ExpandableCard: React.FC<ExpandableCardProps & WithFocusableProps> = (\n props\n) => {\n const { id, title, settings, collapsedState, expandedState } = props;\n const [expanded, setExpanded] = useState(false);\n\n const focusKey = `expandable-card-${id}`;\n\n const onEnterPress = useCallback(() => {\n setExpanded((prev) => !prev);\n }, []);\n\n const onBackPress = useCallback((): boolean => {\n if (expanded) {\n setExpanded(false);\n return false;\n }\n return true;\n }, [expanded]);\n\n const renderCollapsedView = () => (\n <>\n {title && (\n <div className=\"expandable-card-title T10 FONT_BOLD\">{title}</div>\n )}\n <div className=\"expandable-card-cards-container\">\n {collapsedState.cards.map((card) => (\n <SimpleCard\n key={card.id}\n id={card.id}\n title={card.title}\n image={card.image}\n focusKey={`${focusKey}-collapsed-${card.id}`}\n />\n ))}\n </div>\n </>\n );\n\n const renderExpandedView = () => (\n <>\n {title && (\n <div className=\"expandable-card-title T10 FONT_BOLD\">{title}</div>\n )}\n <div className=\"expandable-card-cards-container\">\n {expandedState.cards.map((card) => (\n <SimpleCard\n key={card.id}\n id={card.id}\n title={card.title}\n image={card.image}\n focusKey={`${focusKey}-expanded-${card.id}`}\n />\n ))}\n </div>\n </>\n );\n\n return (\n <FocusableWrapper\n {...props}\n focusKey={focusKey}\n onEnterPress={onEnterPress}\n onClickPress={onEnterPress}\n onBackPress={onBackPress}\n expanded={expanded}\n settings={settings}\n >\n {expanded ? renderExpandedView() : renderCollapsedView()}\n </FocusableWrapper>\n );\n};\n\nexport default withFocusable<ExpandableCardProps>()(ExpandableCard);\n","import api from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./BuilderSection.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import React from 'react';\nimport Image from '@/components/atoms/Image';\nimport { ICard, ISectionSettings } from '../../types';\nimport SimpleCard from '../SimpleCard';\nimport ExpandableCard from '../ExpandableCard';\nimport './BuilderSection.styles.css';\n\nexport interface BuilderSectionProps {\n id: string;\n title: string;\n settings: ISectionSettings;\n cards: ICard[];\n}\n\nconst BuilderSection: React.FC<BuilderSectionProps> = ({\n title,\n settings,\n cards,\n}) => {\n const {\n header,\n sticky,\n textAlignment,\n spacing,\n padding,\n backgroundColor,\n } = settings;\n\n const sectionStyle: React.CSSProperties = {\n backgroundColor,\n paddingTop: padding?.top,\n paddingRight: padding?.right,\n paddingBottom: padding?.bottom,\n paddingLeft: padding?.left,\n textAlign: textAlignment,\n };\n\n const headerStyle: React.CSSProperties = {\n backgroundColor: sticky ? backgroundColor : 'transparent',\n marginBottom: spacing,\n };\n\n const cardsContainerStyle: React.CSSProperties = {\n marginLeft: spacing ? -spacing / 2 : 0,\n marginRight: spacing ? -spacing / 2 : 0,\n };\n\n const cardWrapperStyle: React.CSSProperties = {\n padding: spacing ? spacing / 2 : 0,\n boxSizing: 'border-box',\n };\n\n const renderHeader = () => {\n if (!header.enabled) return null;\n\n const headerClassName = `builder-section-header${sticky ? ' sticky' : ''}`;\n\n return (\n <div className={headerClassName} style={headerStyle}>\n {header.type === 'image' ? (\n <Image\n src={header.content}\n alt={title}\n className=\"builder-section-header-image\"\n />\n ) : (\n <div className=\"builder-section-header-text T14 FONT_BOLD\">\n {header.content}\n </div>\n )}\n </div>\n );\n };\n\n const renderCard = (card: ICard) => {\n let cardContent;\n switch (card.type) {\n case 'simple':\n cardContent = (\n <SimpleCard\n key={card.id}\n id={card.id}\n title={card.title}\n image={card.image}\n focusKey={`simple-card-${card.id}`}\n />\n );\n break;\n case 'expandable':\n cardContent = (\n <ExpandableCard\n key={card.id}\n id={card.id}\n title={card.title}\n collapsedState={card.collapsedState}\n expandedState={card.expandedState}\n settings={settings}\n />\n );\n break;\n default:\n return null;\n }\n\n return (\n <div key={card.id} style={cardWrapperStyle}>\n {cardContent}\n </div>\n );\n };\n\n return (\n <div className=\"builder-section\" style={sectionStyle}>\n {renderHeader()}\n <div className=\"builder-section-cards\" style={cardsContainerStyle}>\n {cards.map(renderCard)}\n </div>\n </div>\n );\n};\n\nexport default BuilderSection;\n","import BuilderSection from './BuilderSection';\n\nexport default BuilderSection;\n","import React, { useState, useEffect, useRef } from 'react';\nimport './BuilderPanelView.styles.css';\nimport SDK from '@/index';\nimport { BuilderPanelViewModel } from '../view-model/BuilderPanelViewModel';\nimport { ISection } from '../types';\nimport BuilderSection from '../components/BuilderSection';\nimport ScrollableContainer from '@/components/core/ScrollableContainer';\n\nconst BuilderPanelView: React.FC = () => {\n const container = useRef<HTMLDivElement | null>(null);\n const vm = useRef<BuilderPanelViewModel | null>(\n SDK.getMaestroEventViewModel()\n .builderPanelViewModel as BuilderPanelViewModel | null\n );\n\n const viewModel = (() => {\n if (!vm.current) {\n throw new Error('BuilderPanelViewModel is not initialized');\n }\n return vm.current;\n })();\n\n const [sections, setSections] = useState<ISection[]>(\n viewModel.sections.value ?? []\n );\n const [isLoading, setIsLoading] = useState<boolean>(\n viewModel.isDataLoading.value ?? false\n );\n const [\n scrollableContainer,\n setScrollableContainer,\n ] = useState<HTMLDivElement | null>(null);\n\n useEffect(() => {\n const sectionsUnsub = viewModel.sections.subscribe((sections) => {\n setSections(sections);\n });\n\n const loadingUnsub = viewModel.isDataLoading.subscribe((isLoading) => {\n setIsLoading(isLoading);\n });\n\n setScrollableContainer(container.current);\n\n return () => {\n sectionsUnsub && sectionsUnsub();\n loadingUnsub && loadingUnsub();\n };\n }, [viewModel]);\n\n const renderEmptyState = () => {\n return (\n <div className=\"builder-panel-empty-state\">\n <div className=\"builder-panel-empty-state-content\">\n <div className=\"T20 FONT_BOLD builder-panel-empty-state-title\">\n No Content Available\n </div>\n <p className=\"T14 builder-panel-empty-state-description\">\n This panel doesn't have any sections to display.\n </p>\n </div>\n </div>\n );\n };\n\n const renderLoadingState = () => {\n return <div className=\"builder-panel-loading\" />;\n };\n\n if (isLoading) {\n return renderLoadingState();\n }\n\n if (!sections || sections.length === 0) {\n return renderEmptyState();\n }\n\n return (\n <ScrollableContainer scrollableContainerRef={scrollableContainer}>\n <div ref={container} className=\"builder-panel-view\">\n {sections.map((section) => (\n <BuilderSection\n key={section.id}\n id={section.id}\n title={section.title}\n settings={section.settings}\n cards={section.cards}\n />\n ))}\n <div className=\"builder-panel-bottom-padding\" />\n </div>\n </ScrollableContainer>\n );\n};\n\nexport default BuilderPanelView;\n"],"sourceRoot":""}

package/dist/8.maestro-web-sdk.esm.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ (window.webpackJsonp=window.webpackJsonp\|\|[]).push([[8],{105:function(e,t,n){"use strict";var l=n(31);t.a=l.a},208:function(e,t,n){"use strict";var l=n(6),a=n.n(l),r=n(7),i=n.n(r)()(a.a);i.push([e.i,".hello-world-view {\n text-align: center;\n background: transparent;\n margin-top: 60px;\n}\n\n.hello-world-view[data-has-unlisted='false'] {\n padding: 191px 80px 0 80px;\n}\n\n.hello-world-view .hello-world-image {\n margin-bottom: 32px;\n}\n\n.hello-world-view .title {\n font-weight: 700;\n font-size: 48px;\n line-height: 56px;\n font-family: var(--sdk-font-headline);\n color: var(--sdk-text100);\n text-align: center;\n}\n\n.hello-world-view .subtitle {\n font-weight: 400;\n font-size: 27px;\n line-height: 36px;\n text-align: center;\n margin: 10px 0 16px 0;\n font-family: var(--sdk-font-title);\n color: var(--sdk-text100);\n}\n\n.hello-world-view .unsupported-panels {\n position: relative;\n}\n\n.hello-world-view .unsupported-text {\n font-family: var(--sdk-font-body);\n font-size: 21px;\n line-height: 26px;\n text-align: center;\n color: var(--sdk-text200);\n margin: 0;\n}\n\n.hello-world-view .unsupported-list {\n list-style: none;\n padding: 0;\n margin: 0;\n margin-top: 24px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.hello-world-view .unsupported-list li {\n padding: 8px 0;\n color: var(--sdk-text100);\n text-align: left;\n}\n\n.hello-world-view .unsupported-list .panel-icon {\n vertical-align: middle;\n display: inline-block;\n margin-right: 8px;\n border-radius: 50%;\n background-color: var(--sdk-surface5);\n width: 40px;\n height: 40px;\n color: var(--sdk-text200);\n position: relative;\n}\n\n.hello-world-view .unsupported-list .panel-icon > svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.hello-world-view .unsupported-list .panel-title {\n vertical-align: middle;\n display: inline-block;\n color: var(--sdk-text200);\n}\n","",{version:3,sources:["webpack://./src/modules/maestro/hello-world/HelloWorldView.styles.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,uBAAuB;EACvB,gBAAgB;AAClB;;AAEA;EACE,0BAA0B;AAC5B;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,iBAAiB;EACjB,qCAAqC;EACrC,yBAAyB;EACzB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB;EACrB,kCAAkC;EAClC,yBAAyB;AAC3B;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,iCAAiC;EACjC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,yBAAyB;EACzB,SAAS;AACX;;AAEA;EACE,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,gBAAgB;EAChB,kBAAkB;EAClB,SAAS;EACT,2BAA2B;AAC7B;;AAEA;EACE,cAAc;EACd,yBAAyB;EACzB,gBAAgB;AAClB;;AAEA;EACE,sBAAsB;EACtB,qBAAqB;EACrB,iBAAiB;EACjB,kBAAkB;EAClB,qCAAqC;EACrC,WAAW;EACX,YAAY;EACZ,yBAAyB;EACzB,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;AAClC;;AAEA;EACE,sBAAsB;EACtB,qBAAqB;EACrB,yBAAyB;AAC3B",sourcesContent:[".hello-world-view {\n text-align: center;\n background: transparent;\n margin-top: 60px;\n}\n\n.hello-world-view[data-has-unlisted='false'] {\n padding: 191px 80px 0 80px;\n}\n\n.hello-world-view .hello-world-image {\n margin-bottom: 32px;\n}\n\n.hello-world-view .title {\n font-weight: 700;\n font-size: 48px;\n line-height: 56px;\n font-family: var(--sdk-font-headline);\n color: var(--sdk-text100);\n text-align: center;\n}\n\n.hello-world-view .subtitle {\n font-weight: 400;\n font-size: 27px;\n line-height: 36px;\n text-align: center;\n margin: 10px 0 16px 0;\n font-family: var(--sdk-font-title);\n color: var(--sdk-text100);\n}\n\n.hello-world-view .unsupported-panels {\n position: relative;\n}\n\n.hello-world-view .unsupported-text {\n font-family: var(--sdk-font-body);\n font-size: 21px;\n line-height: 26px;\n text-align: center;\n color: var(--sdk-text200);\n margin: 0;\n}\n\n.hello-world-view .unsupported-list {\n list-style: none;\n padding: 0;\n margin: 0;\n margin-top: 24px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.hello-world-view .unsupported-list li {\n padding: 8px 0;\n color: var(--sdk-text100);\n text-align: left;\n}\n\n.hello-world-view .unsupported-list .panel-icon {\n vertical-align: middle;\n display: inline-block;\n margin-right: 8px;\n border-radius: 50%;\n background-color: var(--sdk-surface5);\n width: 40px;\n height: 40px;\n color: var(--sdk-text200);\n position: relative;\n}\n\n.hello-world-view .unsupported-list .panel-icon > svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.hello-world-view .unsupported-list .panel-title {\n vertical-align: middle;\n display: inline-block;\n color: var(--sdk-text200);\n}\n"],sourceRoot:""}]),t.a=i},239:function(e,t,n){"use strict";n.r(t);var l=n(0),a=n.n(l),r=n(5),i=n.n(r),o=n(208),s={insert:"head",singleton:!1},A=(i()(o.a,s),o.a.locals,n(8));var d=()=>a.a.createElement("div",{className:"hello-world-image"},a.a.createElement("svg",{width:"376",height:"236",viewBox:"0 0 376 236",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a.a.createElement("path",{d:"M255.234 212.541H232.178V235.597H255.234V212.541ZM116.898 235.597H139.954V212.541H116.898V235.597ZM197.594 108.789H220.65V154.901H197.594V108.789ZM174.538 154.901H151.482V108.789H174.538V154.901ZM255.234 91.4965H243.706V79.9685H232.178V68.4404H214.886V45.3843H203.358V68.4404H168.774V45.3843H157.246V68.4404H139.954V79.9685H128.426V91.4965H116.898V131.845H93.8414V143.373H116.898V183.721H139.954V212.541H168.774V183.721H203.358V212.541H232.178V183.721H255.234V143.373H278.29V131.845H255.234V91.4965ZM278.29 131.845H289.818V68.4404H278.29V131.845ZM82.3134 131.845H93.8414V68.4404H82.3134V131.845Z",fill:"#2D2D2D"}),a.a.createElement("path",{d:"M262.396 50.3333L246.908 65.8205H262.396V80.7546H346.469V5.53113H262.396V50.3333Z",fill:"#101113",stroke:"#2D2D2D",strokeWidth:"6.63736"}),a.a.createElement("path",{d:"M278.746 57.5037V29.5141H286.311V39.9156H295.616V29.5141H303.18V57.5037H295.616V46.1944H286.311V57.5037H278.746ZM308.634 57.5037V29.5141H316.199V57.5037H308.634ZM323.408 48.1612L321.593 29.5141H331.011L329.195 48.1612H323.408ZM322.387 57.5037V51.0737H330.216V57.5037H322.387Z",fill:"#2D2D2D"}),a.a.createElement("rect",{x:"61.0623",y:"56.4176",width:"8.84982",height:"8.84982",transform:"rotate(-90 61.0623 56.4176)",fill:"#2D2D2D"}),a.a.createElement("rect",{x:"50",y:"42.0366",width:"8.84982",height:"8.84982",transform:"rotate(-90 50 42.0366)",fill:"#2D2D2D"}),a.a.createElement("rect",{x:"69.9121",y:"47.5674",width:"8.84982",height:"8.84982",transform:"rotate(-90 69.9121 47.5674)",fill:"#2D2D2D"}),a.a.createElement("g",{filter:"url(#filter0_d_193_43290)"},a.a.createElement("rect",{width:"8",height:"12",transform:"matrix(4.37114e-08 1 1 -4.37114e-08 82 67)",fill:"#21EFA3"})),a.a.createElement("rect",{x:"58.8499",y:"33.1868",width:"8.84982",height:"8.84982",transform:"rotate(-90 58.8499 33.1868)",fill:"#2D2D2D"}),a.a.createElement("rect",{x:"78.762",y:"47.5677",width:"8.84982",height:"8.84982",transform:"rotate(-90 78.762 47.5677)",fill:"#2D2D2D"}),a.a.createElement("rect",{x:"67.6997",y:"33.1868",width:"8.84982",height:"8.84982",transform:"rotate(-90 67.6997 33.1868)",fill:"#2D2D2D"}),a.a.createElement("rect",{x:"256.865",y:"8.84982",width:"8.84982",height:"8.84982",transform:"rotate(-90 256.865 8.84982)",fill:"#101113"}),a.a.createElement("rect",{x:"343.15",y:"8.84982",width:"8.84982",height:"8.84982",transform:"rotate(-90 343.15 8.84982)",fill:"#101113"}),a.a.createElement("rect",{x:"343.15",y:"86.2857",width:"8.84982",height:"8.84982",transform:"rotate(-90 343.15 86.2857)",fill:"#101113"}),a.a.createElement("rect",{x:"256.865",y:"86.2857",width:"8.84982",height:"8.84982",transform:"rotate(-90 256.865 86.2857)",fill:"#101113"}),a.a.createElement("defs",null,a.a.createElement("filter",{id:"filter0_d_193_43290",x:"64",y:"50",width:"48",height:"44",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},a.a.createElement("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),a.a.createElement("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),a.a.createElement("feMorphology",{radius:"3",operator:"dilate",in:"SourceAlpha",result:"effect1_dropShadow_193_43290"}),a.a.createElement("feOffset",{dy:"1"}),a.a.createElement("feGaussianBlur",{stdDeviation:"7.5"}),a.a.createElement("feComposite",{in2:"hardAlpha",operator:"out"}),a.a.createElement("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.129412 0 0 0 0 0.937255 0 0 0 0 0.639216 0 0 0 0.25 0"}),a.a.createElement("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_193_43290"}),a.a.createElement("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow_193_43290",result:"shape"}))))),p=n(105);const c={chat:"Chat",shopifyBlockPanel:"Shopify"};class h extends l.Component{constructor(e){super(e);const t=A.default.getMaestroEventViewModel().panelManagerViewModel;this.state={unlistedPanels:t.getUnlistedPanels()}}render(){const{unlistedPanels:e}=this.state;return a.a.createElement("div",{className:"hello-world-view","data-has-unlisted":e.length>0},a.a.createElement(d,null),a.a.createElement("div",{className:"title"},"HELLO, WORLD!"),a.a.createElement("p",{className:"T20 subtitle"},"Panel component has been",a.a.createElement("br",null),"installed correctly."),e.length>0&&a.a.createElement("div",{className:"unsupported-panels"},a.a.createElement("p",{className:"T10 unsupported-text"},"However, some panels currently active on this",a.a.createElement("br",null),"channel aren't supported on this device:"),a.a.createElement("ul",{className:"unsupported-list"},e.filter(e=>e.type in c).map(e=>a.a.createElement("li",{key:e.type,className:"T10"},a.a.createElement("div",{className:"panel-icon"},a.a.createElement(p.a,{iconName:e.type,width:24,height:24})),a.a.createElement("div",{className:"panel-title"},c[e.type]))))))}}var E=h;t.default=E}}]);
2	+ //# sourceMappingURL=8.maestro-web-sdk.esm.js.map

package/dist/8.maestro-web-sdk.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["webpack:///./src/components/atoms/SvgIcon/index.ts","webpack:///./src/modules/maestro/hello-world/HelloWorldView.styles.css","webpack:///./src/modules/maestro/hello-world/HelloWorldView.styles.css?6c30","webpack:///./src/modules/maestro/hello-world/HelloWorldImage.tsx","webpack:///./src/modules/maestro/hello-world/HelloWorldView.tsx","webpack:///./src/modules/maestro/hello-world/index.ts"],"names":["Icon","___CSS_LOADER_EXPORT___","push","module","i","options","locals","HelloWorldImage","React","createElement","className","width","height","viewBox","fill","xmlns","d","stroke","strokeWidth","x","y","transform","filter","id","filterUnits","colorInterpolationFilters","floodOpacity","result","in","type","values","radius","operator","dy","stdDeviation","in2","mode","PANEL_TYPE_NAME_MAP","chat","shopifyBlockPanel","HelloWorldView","Component","constructor","props","super","vm","SDK","getMaestroEventViewModel","panelManagerViewModel","this","state","unlistedPanels","getUnlistedPanels","render","data-has-unlisted","length","p","map","panel","key","iconName"],"mappings":"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","file":"8.maestro-web-sdk.esm.js","sourcesContent":["import Icon from './Icon';\n\nexport default Icon;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".hello-world-view {\\n text-align: center;\\n background: transparent;\\n margin-top: 60px;\\n}\\n\\n.hello-world-view[data-has-unlisted='false'] {\\n padding: 191px 80px 0 80px;\\n}\\n\\n.hello-world-view .hello-world-image {\\n margin-bottom: 32px;\\n}\\n\\n.hello-world-view .title {\\n font-weight: 700;\\n font-size: 48px;\\n line-height: 56px;\\n font-family: var(--sdk-font-headline);\\n color: var(--sdk-text100);\\n text-align: center;\\n}\\n\\n.hello-world-view .subtitle {\\n font-weight: 400;\\n font-size: 27px;\\n line-height: 36px;\\n text-align: center;\\n margin: 10px 0 16px 0;\\n font-family: var(--sdk-font-title);\\n color: var(--sdk-text100);\\n}\\n\\n.hello-world-view .unsupported-panels {\\n position: relative;\\n}\\n\\n.hello-world-view .unsupported-text {\\n font-family: var(--sdk-font-body);\\n font-size: 21px;\\n line-height: 26px;\\n text-align: center;\\n color: var(--sdk-text200);\\n margin: 0;\\n}\\n\\n.hello-world-view .unsupported-list {\\n list-style: none;\\n padding: 0;\\n margin: 0;\\n margin-top: 24px;\\n position: absolute;\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n\\n.hello-world-view .unsupported-list li {\\n padding: 8px 0;\\n color: var(--sdk-text100);\\n text-align: left;\\n}\\n\\n.hello-world-view .unsupported-list .panel-icon {\\n vertical-align: middle;\\n display: inline-block;\\n margin-right: 8px;\\n border-radius: 50%;\\n background-color: var(--sdk-surface5);\\n width: 40px;\\n height: 40px;\\n color: var(--sdk-text200);\\n position: relative;\\n}\\n\\n.hello-world-view .unsupported-list .panel-icon > svg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.hello-world-view .unsupported-list .panel-title {\\n vertical-align: middle;\\n display: inline-block;\\n color: var(--sdk-text200);\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/modules/maestro/hello-world/HelloWorldView.styles.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,kBAAkB;EAClB,uBAAuB;EACvB,gBAAgB;AAClB;;AAEA;EACE,0BAA0B;AAC5B;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,iBAAiB;EACjB,qCAAqC;EACrC,yBAAyB;EACzB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB;EACrB,kCAAkC;EAClC,yBAAyB;AAC3B;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,iCAAiC;EACjC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,yBAAyB;EACzB,SAAS;AACX;;AAEA;EACE,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,gBAAgB;EAChB,kBAAkB;EAClB,SAAS;EACT,2BAA2B;AAC7B;;AAEA;EACE,cAAc;EACd,yBAAyB;EACzB,gBAAgB;AAClB;;AAEA;EACE,sBAAsB;EACtB,qBAAqB;EACrB,iBAAiB;EACjB,kBAAkB;EAClB,qCAAqC;EACrC,WAAW;EACX,YAAY;EACZ,yBAAyB;EACzB,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;AAClC;;AAEA;EACE,sBAAsB;EACtB,qBAAqB;EACrB,yBAAyB;AAC3B\",\"sourcesContent\":[\".hello-world-view {\\n text-align: center;\\n background: transparent;\\n margin-top: 60px;\\n}\\n\\n.hello-world-view[data-has-unlisted='false'] {\\n padding: 191px 80px 0 80px;\\n}\\n\\n.hello-world-view .hello-world-image {\\n margin-bottom: 32px;\\n}\\n\\n.hello-world-view .title {\\n font-weight: 700;\\n font-size: 48px;\\n line-height: 56px;\\n font-family: var(--sdk-font-headline);\\n color: var(--sdk-text100);\\n text-align: center;\\n}\\n\\n.hello-world-view .subtitle {\\n font-weight: 400;\\n font-size: 27px;\\n line-height: 36px;\\n text-align: center;\\n margin: 10px 0 16px 0;\\n font-family: var(--sdk-font-title);\\n color: var(--sdk-text100);\\n}\\n\\n.hello-world-view .unsupported-panels {\\n position: relative;\\n}\\n\\n.hello-world-view .unsupported-text {\\n font-family: var(--sdk-font-body);\\n font-size: 21px;\\n line-height: 26px;\\n text-align: center;\\n color: var(--sdk-text200);\\n margin: 0;\\n}\\n\\n.hello-world-view .unsupported-list {\\n list-style: none;\\n padding: 0;\\n margin: 0;\\n margin-top: 24px;\\n position: absolute;\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n\\n.hello-world-view .unsupported-list li {\\n padding: 8px 0;\\n color: var(--sdk-text100);\\n text-align: left;\\n}\\n\\n.hello-world-view .unsupported-list .panel-icon {\\n vertical-align: middle;\\n display: inline-block;\\n margin-right: 8px;\\n border-radius: 50%;\\n background-color: var(--sdk-surface5);\\n width: 40px;\\n height: 40px;\\n color: var(--sdk-text200);\\n position: relative;\\n}\\n\\n.hello-world-view .unsupported-list .panel-icon > svg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.hello-world-view .unsupported-list .panel-title {\\n vertical-align: middle;\\n display: inline-block;\\n color: var(--sdk-text200);\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","import api from \"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--6-1!./HelloWorldView.styles.css\";\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import React from 'react';\n\nconst HelloWorldImage = () => {\n return (\n <div className=\"hello-world-image\">\n <svg\n width=\"376\"\n height=\"236\"\n viewBox=\"0 0 376 236\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M255.234 212.541H232.178V235.597H255.234V212.541ZM116.898 235.597H139.954V212.541H116.898V235.597ZM197.594 108.789H220.65V154.901H197.594V108.789ZM174.538 154.901H151.482V108.789H174.538V154.901ZM255.234 91.4965H243.706V79.9685H232.178V68.4404H214.886V45.3843H203.358V68.4404H168.774V45.3843H157.246V68.4404H139.954V79.9685H128.426V91.4965H116.898V131.845H93.8414V143.373H116.898V183.721H139.954V212.541H168.774V183.721H203.358V212.541H232.178V183.721H255.234V143.373H278.29V131.845H255.234V91.4965ZM278.29 131.845H289.818V68.4404H278.29V131.845ZM82.3134 131.845H93.8414V68.4404H82.3134V131.845Z\"\n fill=\"#2D2D2D\"\n />\n <path\n d=\"M262.396 50.3333L246.908 65.8205H262.396V80.7546H346.469V5.53113H262.396V50.3333Z\"\n fill=\"#101113\"\n stroke=\"#2D2D2D\"\n strokeWidth=\"6.63736\"\n />\n <path\n d=\"M278.746 57.5037V29.5141H286.311V39.9156H295.616V29.5141H303.18V57.5037H295.616V46.1944H286.311V57.5037H278.746ZM308.634 57.5037V29.5141H316.199V57.5037H308.634ZM323.408 48.1612L321.593 29.5141H331.011L329.195 48.1612H323.408ZM322.387 57.5037V51.0737H330.216V57.5037H322.387Z\"\n fill=\"#2D2D2D\"\n />\n <rect\n x=\"61.0623\"\n y=\"56.4176\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 61.0623 56.4176)\"\n fill=\"#2D2D2D\"\n />\n <rect\n x=\"50\"\n y=\"42.0366\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 50 42.0366)\"\n fill=\"#2D2D2D\"\n />\n <rect\n x=\"69.9121\"\n y=\"47.5674\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 69.9121 47.5674)\"\n fill=\"#2D2D2D\"\n />\n <g filter=\"url(#filter0_d_193_43290)\">\n <rect\n width=\"8\"\n height=\"12\"\n transform=\"matrix(4.37114e-08 1 1 -4.37114e-08 82 67)\"\n fill=\"#21EFA3\"\n />\n </g>\n <rect\n x=\"58.8499\"\n y=\"33.1868\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 58.8499 33.1868)\"\n fill=\"#2D2D2D\"\n />\n <rect\n x=\"78.762\"\n y=\"47.5677\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 78.762 47.5677)\"\n fill=\"#2D2D2D\"\n />\n <rect\n x=\"67.6997\"\n y=\"33.1868\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 67.6997 33.1868)\"\n fill=\"#2D2D2D\"\n />\n <rect\n x=\"256.865\"\n y=\"8.84982\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 256.865 8.84982)\"\n fill=\"#101113\"\n />\n <rect\n x=\"343.15\"\n y=\"8.84982\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 343.15 8.84982)\"\n fill=\"#101113\"\n />\n <rect\n x=\"343.15\"\n y=\"86.2857\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 343.15 86.2857)\"\n fill=\"#101113\"\n />\n <rect\n x=\"256.865\"\n y=\"86.2857\"\n width=\"8.84982\"\n height=\"8.84982\"\n transform=\"rotate(-90 256.865 86.2857)\"\n fill=\"#101113\"\n />\n <defs>\n <filter\n id=\"filter0_d_193_43290\"\n x=\"64\"\n y=\"50\"\n width=\"48\"\n height=\"44\"\n filterUnits=\"userSpaceOnUse\"\n colorInterpolationFilters=\"sRGB\"\n >\n <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"3\"\n operator=\"dilate\"\n in=\"SourceAlpha\"\n result=\"effect1_dropShadow_193_43290\"\n />\n <feOffset dy=\"1\" />\n <feGaussianBlur stdDeviation=\"7.5\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.129412 0 0 0 0 0.937255 0 0 0 0 0.639216 0 0 0 0.25 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"BackgroundImageFix\"\n result=\"effect1_dropShadow_193_43290\"\n />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"effect1_dropShadow_193_43290\"\n result=\"shape\"\n />\n </filter>\n </defs>\n </svg>\n </div>\n );\n};\n\nexport default HelloWorldImage;\n","import React, { Component } from 'react';\nimport './HelloWorldView.styles.css';\nimport SDK from '@/index';\nimport { PanelInfo } from '@/view-models/PanelManagerViewModel';\nimport HelloWorldImage from './HelloWorldImage';\nimport Icon from '@/components/atoms/SvgIcon';\n\ntype State = {\n unlistedPanels: PanelInfo[];\n};\n\nconst PANEL_TYPE_NAME_MAP = {\n chat: 'Chat',\n shopifyBlockPanel: 'Shopify',\n} as const;\n\nclass HelloWorldView extends Component<{}, State> {\n constructor(props: {}) {\n super(props);\n const vm = SDK.getMaestroEventViewModel().panelManagerViewModel;\n this.state = {\n unlistedPanels: vm.getUnlistedPanels(),\n };\n }\n\n render() {\n const { unlistedPanels } = this.state;\n\n return (\n <div\n className=\"hello-world-view\"\n data-has-unlisted={unlistedPanels.length > 0}\n >\n <HelloWorldImage />\n <div className=\"title\">HELLO, WORLD!</div>\n <p className=\"T20 subtitle\">\n Panel component has been\n <br />\n installed correctly.\n </p>\n\n {unlistedPanels.length > 0 && (\n <div className=\"unsupported-panels\">\n <p className=\"T10 unsupported-text\">\n However, some panels currently active on this\n <br />\n {\"channel aren't supported on this device:\"}\n </p>\n <ul className=\"unsupported-list\">\n {unlistedPanels\n .filter((p) => p.type in PANEL_TYPE_NAME_MAP)\n .map((panel) => (\n <li key={panel.type} className=\"T10\">\n <div className=\"panel-icon\">\n <Icon iconName={panel.type} width={24} height={24} />\n </div>\n <div className=\"panel-title\">\n {\n PANEL_TYPE_NAME_MAP[\n panel.type as keyof typeof PANEL_TYPE_NAME_MAP\n ]\n }\n </div>\n </li>\n ))}\n </ul>\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default HelloWorldView;\n","import HelloWorldView from './HelloWorldView';\n\nexport default HelloWorldView;\n"],"sourceRoot":""}