{"version":3,"file":"js/react/mls-players-hub-roster-app.js?_t=60fcb1255005807c0596","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;AACA;AAAA;AAEA;AAEA;AAEA;AACA;AAOA;AACA;AAAA;AAEA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AACA;AAEA;AAAA;AACA;AACA;AAGA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAEA;AAOA;AACA;AAAA;AACA;AACA;AAEA;AAaA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAcA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAiBA;AACA;AACA;AAcA;AACA;AACA;AAUA;AACA;AACA;AAUA;AACA;AACA;AAcA;AACA;AACA;AAaA;AACA;AACA;AASA;AACA;AACA;AAMA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AASA;;;;;;;;;;;;;;;;AC5PA;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAgBA;AAEA;;;;;;;;;;;;;;;;AC9DA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AAAA;AAGA;AAAA;AACA;AACA;AAGA;AAIA;AAAA;AAAA;AACA;AACA;AAEA;AAAA;AAQA;AAEA;;;;;;;;;;;;;;;;ACzCA;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AAGA;AAqBA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;AC7EA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AAAA;AAGA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AAGA;AAMA;AAAA;AAEA;AACA;AAGA;AAcA;AAEA;;;;;;;;;;;;;;;;ACrGA;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AAAA;AAEA;AAOA;AAEA;;;;;;;;;;;;;;;;ACdA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAMA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAEA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAIA;AAEA;AAEA;AAOA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAGA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AACA;AAGA;AAUA;AAGA;AAEA;;;;;;;;;;;;;;;;ACxGA;;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AAAA;AACA;AAEA;AAEA;;;;;;;;;;;;;;;;;;;;;;ACfA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AAAA;AACA;AAEA;AAAA;AAGA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AACA;AAEA;AASA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAiBA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAEA;AAGA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAYA;AAMA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAOA","sources":["webpack://@mlssoccer/netcore/./scripts/libraries/_modules/tracking/helpers.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-hub-roster/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-hub-roster/components/PlayersRosterTable/PlayersRosterTable.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-hub-roster/components/PlayersRosterTable/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-hub-roster/components/PlayersRosterTableWrapper/PlayersRosterTableWrapper.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-hub-roster/components/PlayersRosterTableWrapper/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-hub-roster/main.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Dropdown/Dropdown.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Dropdown/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/ErrorDisplay.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Table/Table.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Table/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useResize.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/Svg.js"],"sourcesContent":["/**\n * @private\n * Push somethig in dataLayer\n * @param obj object to push\n */\nconst dataLayerPush = (obj) => {\n  if (!obj) return;\n\n  window.dataLayer = window.dataLayer ?? [];\n\n  obj = cleanupNull(obj);\n\n  window.dataLayer.push(obj);\n};\n\n/**\n * @private\n * cleanup inner props\n * @param {object} obj\n */\nconst cleanupNull = (obj) => {\n  if (obj === null) return undefined;\n\n  if (typeof obj === 'string') return obj;\n\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      if (Array.isArray(obj[key])) {\n        for (let index = 0; index < obj[key].length; index++) {\n          obj[key][index] = cleanupNull(obj[key][index]);\n        }\n      } else {\n        obj[key] = cleanupNull(obj[key]);\n      }\n    }\n  }\n\n  return obj;\n};\n\n/**\n * Push new Core dataLayer info\n * @param data the meta data\n */\nexport const addCoreDataLayer = (data) => {\n  dataLayerPush({\n    'event': 'dataLayer-initialized',\n    ...data,\n  });\n};\n\n/**\n * Track generic event\n * @param {string} eventName event name\n * @param {any} data event data\n */\nexport const trackEvent = (eventName, data = {}) => {\n  dataLayerPush({\n    'event': eventName,\n    ...data\n  });\n};\n\n/**\n * track block impression\n * @param {string} bucketName\n * @param {string} blockType\n * @param {{\n * id: string,\n * name: string,\n * creative: string,\n * position: string,\n * }[]} promotions\n */\nexport const trackBlockImpression = (bucketName, blockType, promotions) => {\n  const impressionData = {\n    bucketName,\n    blockType,\n    'ecommerce': promotions?.length ? {\n      'promoView': {\n        promotions,\n      },\n    } : undefined,\n  };\n\n  trackEvent('block-impression', impressionData);\n};\n\n/**\n * track block click\n * @param {string} bucketName\n * @param {string} blockType\n * @param {object} data\n * @param {{\n  * id: string,\n  * name: string,\n  * creative: string,\n  * position: string,\n  * }} promotion\n  */\nexport const trackBlockClick = (bucketName, blockType, layoutName, blockLayout, blockStyle, data, promotion) => {\n  const clickData = {\n    bucketName,\n    blockType,\n    layoutName,\n    blockLayout,\n    blockStyle,\n    ...data,\n    'ecommerce': promotion ? {\n      'promoClick': {\n        promotions: [promotion],\n      },\n    } : undefined,\n  };\n\n  trackEvent('block-click', clickData);\n};\n\n/**\n * Track MatchHub click event\n * @param {{\n * clickType: string,\n * clickItem: string,\n * match: string,\n * matchState: string,\n * clubName: string,\n * playerName: string,\n * competition: string,\n * cardType: string,\n * optaEventType: string,\n * toggle: string\n * }} clickData\n */\nexport const trackMatchHubClick = (clickData) => {\n  trackEvent('match-hub-click', clickData);\n};\n\n/**\n * Track Match interaction event\n * @param {{\n  * clickType: string,\n  * clickItem: string,\n  * clickPosition: string,\n  * matchState: string,\n  * match: string,\n  * competition: string,\n  * travelType: string\n  * }} clickData\n  */\nexport const trackMatchInteraction = (clickData) => {\n  trackEvent('match-interaction', clickData);\n};\n\n/**\n * Track Week Selector event\n * @param {{\n  * selectorLocation: 'top' | 'bottom',\n  * direction: 'forward' | 'back',\n  * selection: string\n  * }} clickData\n  */\nexport const trackWeekSelector = (clickData) => {\n  trackEvent('week-selector-click', clickData);\n};\n\n/**\n * Track Filter interaction event\n * @param {{\n  * statsCategory: string,\n  * filterType: string,\n  * clickItem: string\n  * }} clickData\n  */\nexport const trackFilterClick = (clickData) => {\n  trackEvent('filter-click', clickData);\n};\n\n/**\n * Track FeaturedMatch click event\n * @param {{\n* clickType: string,\n* clickItem: string,\n* match: string,\n* matchState: string,\n* playerName: string,\n* competition: string,\n* toggle: string\n* }} clickData\n*/\nexport const trackFeaturedMatchClick = (clickData) => {\n trackEvent('featured-match-click', clickData);\n};\n\n/**\n * Track HorizontalScoreboardMatch click event\n * @param {{\n* clickType: string,\n* clickItem: string,\n* match: string,\n* matchState: string,\n* competition: string,\n* clickPosition: string,\n* }} clickData\n*/\nexport const trackHorizontalScoreboardMatch = (clickData) => {\n trackEvent('horizontal-scoreboard-match-click', clickData);\n};\n\n/**\n * Track user successful login event\n * @param {{\n* userId: string,\n* method: string,\n* }} eventData\n*/\nexport const trackUserLogin = (eventData) => {\n  trackEvent('successful-login-freemium', eventData);\n};\n\n\n/**\n * Track user login freemium login wall event\n*/\nexport const trackUserFreemiumLoginWall = (eventData) => {\n  trackEvent('freemium-login-wall', eventData);\n};\n\nexport const trackUserFreemiumLoginWallViewed = (eventData) => {\n  trackEvent('freemium-login-wall_viewed', eventData);\n};\n\nexport const trackUserFreemiumLoginWallCtaClicked = (eventData) => {\n  trackEvent('freemium-cta-click', eventData);\n};\n\nexport const trackUserFreemiumSuccessfulSignup = (eventData) => {\n  trackEvent('successful-signup', eventData);\n};\n\nexport const trackUserFreemiumSuccessfulLogin = (eventData) => {\n  trackEvent('successful-login-freemium', eventData);\n};\n\nexport const trackUserLogged = (userId) => {\n  // const dataLayerInitialized = window.dataLayer.find((e) => e.event == 'dataLayer-initialized');\n\n  // if (dataLayerInitialized) {\n  //   dataLayerPush({\n  //     ...dataLayerInitialized,\n  //     'userId': userId,\n  //   });\n  // }\n};\n","export { default } from './main';\n","import React from 'react';\nimport { useSortBy, useTable } from \"react-table\";\nimport { useColumns } from \"../../../shared/components/Table/utils\";\nimport Table from \"../../../shared/components/Table\";\nimport { NoResults } from \"../../../shared/svg/Svg\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nconst PlayersRosterTable = ({ baseClass, emptyResultsComponent, playersData }) => {\n  const { t } = useReactAppState();\n  const columns = useColumns(\"PLAYERS_HUB_ROSTER\", playersData);\n\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups,\n    rows,\n    prepareRow,\n    state: { sortBy },\n  } = useTable(\n    {\n      columns,\n      data: playersData && playersData.length > 0\n        ? playersData\n        : [],\n      autoResetPage: true,\n      autoResetSortBy: false,\n      disableMultiSort: true,\n      disableSortRemove: true,\n      initialState: {\n        sortBy: [{ id: \"player\", desc: false }]\n      }\n    },\n    useSortBy\n  );\n\n  return (\n    <>\n      <Table\n        baseClass={baseClass}\n        getTableBodyProps={getTableBodyProps}\n        getTableProps={getTableProps}\n        rows={rows}\n        headerGroups={headerGroups}\n        state={sortBy}\n        prepareRow={prepareRow} />\n      {\n        rows.length < 1\n          ? (\n            <div className=\"mls-c-stats__no-results\">\n              <NoResults size=\"large\" />\n              <div className=\"mls-c-stats__no-results-text\">{t(\"no_players_found\")}</div>\n              {\n                emptyResultsComponent ? emptyResultsComponent : null\n              }\n            </div>\n          )\n          : <></>\n      }\n    </>\n  );\n};\n\nexport default PlayersRosterTable;\n","export { default } from './PlayersRosterTable';\n","import React from 'react';\nimport PlayersRosterTable from '../PlayersRosterTable';\nimport { apiURL, d3PlayersByClubAPI } from \"../../../shared/api/variables\";\nimport { useQuery } from 'react-query';\nimport { fetchClient } from '../../../shared/api/fetching';\n\nconst PlayersRosterTableWrapper = ({ linkRulePath, clubOptaId }) => {\n  const { data: players } = useQuery({\n    queryKey: [`mls-clubs-players-hub-roster`, { clubOptaId }],\n    queryFn: () => fetchClient({ endpoint: d3PlayersByClubAPI({ clubOptaId }), apiURL: apiURL.d3SportsAPI }),\n    select: (playersData) => {\n      return playersData.map((playerData) => {\n        if (playerData.playerSlug && linkRulePath) {\n          playerData.playerUrl = linkRulePath.replace(\"{slug}\", playerData.playerSlug);\n        } else {\n          playerData.playerUrl = null;\n        }\n\n        return playerData;\n      });\n    }\n  });\n\n  return (\n    <>\n      {players ?\n        <div role=\"region\" className=\"mls-c-active-roster\">\n          <PlayersRosterTable\n            baseClass={\"mls-c-active-roster\"}\n            playersData={players}\n            emptyResultsComponent={\n              <></>\n            }\n          />\n        </div>\n        : <></>\n      }\n    </>\n  );\n};\n\nexport default PlayersRosterTableWrapper;\n","export { default } from './PlayersRosterTableWrapper';\n","import React, { useState, useEffect } from 'react';\nimport { useQuery } from 'react-query';\nimport { fetchClient } from '../shared/api/fetching';\nimport Dropdown from \"../shared/components/Dropdown\";\nimport ErrorDisplay from \"../shared/components/ErrorDisplay\";\nimport {\n  getPureClubsData,\n} from \"../shared/utils\";\nimport { apiURL, mlsClubsAPI } from \"../shared/api/variables\";\nimport PlayersRosterTableWrapper from './components/PlayersRosterTableWrapper';\nimport { useReactAppState } from \"../shared/containers/utils\";\n\nfunction PlayersHubRoster({ options }) {\n  const { t } = useReactAppState();\n  const competitionOptaId = options?.competitionOptaId;\n  const season = options?.competitionSeason;\n  const [currentClub, setCurrentClub] = useState(\"\");\n  const [clubOptaId, setClubOptaId] = useState(0);\n  const playerClub = options?.playerClub;\n\n  const clubsEndpoint = mlsClubsAPI({ competitionOptaId, season });\n\n  const {\n    isLoading: isLoadingClubs,\n    isError: isErrorClubs,\n    data: clubsData,\n    error: clubsError,\n    isIdle: isIdleClubs\n  } = useQuery({\n    queryKey: [`mls-clubs`, { competitionOptaId, season }],\n    queryFn: () => fetchClient({ ...options, endpoint: clubsEndpoint, apiURL: apiURL.statsAPI }),\n    notifyOnChangeProps: ['data', 'error'],\n  });\n\n  if (clubsData && playerClub && !currentClub) {\n    const preSelectedClub = clubsData?.find((club) => club?.abbreviation === playerClub?.abbreviation);\n    if (preSelectedClub && preSelectedClub?.abbreviation) {\n      setCurrentClub(preSelectedClub?.abbreviation);\n    }\n  }\n\n  useEffect(() => {\n    if (currentClub) {\n      const clubId = clubsData?.find((club) => currentClub === club.abbreviation)?.opta_id;\n\n      if (clubId) {\n        setClubOptaId(clubId);\n      }\n    }\n  }, [currentClub]);\n\n  return (\n    <div role=\"region\" className=\"mls-c-players-hub-roster\">\n      <div className=\"mls-c-stats__dropdown-group\">\n        {\n          clubsData?.length && currentClub && playerClub ?\n            <Dropdown onChangeFn={(val) => setCurrentClub(val)} items={getPureClubsData(clubsData)} currentValue={currentClub} />\n            : isLoadingClubs || isIdleClubs ?\n              <label className=\"mls-o-buttons__dropdown-button mls-o-buttons__dropdown-button--label mls-o-buttons__dropdown-button--right \">\n                <span className=\"mls-o-buttons__dropdown-label\">{t(\"club\")}</span>\n                <select>\n                  <option className=\"mls-o-buttons__dropdown-item\" value=\"loading\">{t(\"loading\")}</option>\n                </select>\n              </label>\n              : isErrorClubs ? <ErrorDisplay error={clubsError} /> : <></>\n        }\n      </div>\n      {clubOptaId ?\n        <PlayersRosterTableWrapper linkRulePath={options?.linkRulePath} clubOptaId={clubOptaId} /> : <></>\n      }\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nPlayersHubRoster = React.memo(PlayersHubRoster);\n\nexport default PlayersHubRoster;\n","import React, { useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { checkIfObject } from \"../../../../libraries/_helpers\";\nimport useResize from \"../../hooks/useResize\";\nimport { trackFilterClick } from '../../../../libraries/_modules/tracking/helpers';\nimport { translateTypes } from \"../../utils\";\nimport { useReactAppState } from \"../../containers/utils\";\n\nfunction findOption({ items, value, valueKey }) {\n  if (!value || !items || items.length === 0) {\n    return;\n  }\n\n  const matchedOption = (items || []).find((item) => {\n    if ((valueKey && item[valueKey] && item[valueKey].toString() === value?.toString()) || item?.toString() === value?.toString()) {\n      return item;\n    }\n  });\n\n  return matchedOption ? matchedOption : items[0];\n}\n\nconst trackClick = (statsCategory, filterType, clickItem) => {\n  trackFilterClick({ statsCategory, filterType, clickItem });\n};\n\nconst Dropdown = ({ extraClass, onChangeFn, items, type, currentValue, valueKey, displayKey, autoWidth = true, disabled = false, ariaLabel = \"\", title = \"\" }) => {\n  const optionFound = useMemo(() => findOption({ items, value: currentValue, valueKey }), [items, currentValue, valueKey]);\n\n  const ref = useRef(null);\n  const { t } = useReactAppState() || {};\n\n  function handleResize() {\n    if (ref?.current && autoWidth) {\n      setWidth(ref.current.offsetWidth + 48);\n    }\n  }\n\n  const [width, setWidth] = useState(\"auto\");\n  const [selectedOption, setSelectedOption] = useState(optionFound);\n\n  useLayoutEffect(() => {\n    setSelectedOption(optionFound);\n  }, [items, currentValue]);\n\n  useLayoutEffect(() => {\n    handleResize();\n  }, [items, selectedOption]);\n\n  useResize(handleResize, 1000);\n\n  const handleChange = React.useCallback((e) => {\n    onChangeFn(e.target.value);\n    trackClick('schedule', type, e.target.options[e.target.selectedIndex].innerText);\n  }, [onChangeFn], []);\n\n  return (\n    <>\n      <select\n        onChange={handleChange}\n        value={currentValue}\n        style={{ width }}\n        aria-label={ariaLabel}\n        title={title}\n        className={`mls-o-buttons__dropdown-button mls-o-buttons__dropdown-button--right ${extraClass ? extraClass : \"\"}`} disabled={disabled}  >\n        {\n          items\n            ? items.map((item, index) => {\n              const isObject = checkIfObject(item);\n              return (\n                <option\n                  className=\"mls-o-buttons__dropdown-item\"\n                  value={isObject && valueKey != null\n                    ? item[valueKey]\n                    : item}\n                  key={`${isObject && valueKey != null\n                    ? item[valueKey]\n                    : isObject\n                      ? JSON.stringify(item)\n                      : item\n                    }${index}`}\n                >\n                  {isObject ? translateTypes(t, item[displayKey]) : translateTypes(t, item)}\n                </option>\n              );\n            })\n            : null\n        }\n      </select>\n      <div className=\"mls-o-buttons__dropdown-hidden\">\n        <span ref={ref} style={{ visibility: \"hidden\" }}>\n          {\n            displayKey && selectedOption && selectedOption[displayKey]\n              ? translateTypes(t, selectedOption[displayKey])\n              : translateTypes(t, selectedOption)\n          }\n        </span>\n      </div>\n    </>\n  );\n};\n\nexport default Dropdown;\n","export { default } from './Dropdown';\n","import React from 'react';\n\nconst ErrorDisplay = ({ error }) => {\n  if (!error || !error.message) return null;\n\n  return (\n    <div className={\"mls-o-error\"}>\n      <p>\n        {error.message}\n      </p>\n    </div>\n  );\n};\n\nexport default ErrorDisplay;\n","export { default } from './ErrorDisplay';\n","import React from 'react';\nimport { getMinimumCount, getStandingsConfig, useHorizontalScrollSpy, getPlayoffCounter } from \"./utils\";\n\nfunction Table({\n  baseClass,\n  getTableProps,\n  getTableBodyProps,\n  headerGroups,\n  rows,\n  prepareRow,\n  tableConfig,\n  extraClasses,\n  tableIsGrouped,\n  tableReferences,\n  headerPure,\n  isGroupedByDivision\n}) {\n  const [ref, isOriginalPosition] = useHorizontalScrollSpy(headerGroups);\n  const emptyRows = !rows || rows.length < 1;\n  const { homeAdvantage, topClubsLegend, playoffQualifiedEastConference, playoffQualifiedWestConference, playoffQualifiedCentralConference, homeAdvantageLegend, topClubs } = tableConfig || {};\n  const header = headerGroups?.[0]?.headers?.[0]?.Header;\n\n  let topClubsCounter = topClubsLegend ? getMinimumCount(topClubs, homeAdvantage, 1) : null;\n  const playoffQualified = Math.max(Number.isInteger(playoffQualifiedEastConference) ? playoffQualifiedEastConference : 0, Number.isInteger(playoffQualifiedWestConference) ? playoffQualifiedWestConference : 0, Number.isInteger(playoffQualifiedCentralConference) ? playoffQualifiedCentralConference : 0);\n  let homeAdvantageCounter = homeAdvantageLegend && header && !header.includes('none') ? getMinimumCount(homeAdvantage, playoffQualified, 4) : null;\n  let playoffQualifiedCounter = !isGroupedByDivision ? getPlayoffCounter(headerPure, playoffQualifiedEastConference, playoffQualifiedWestConference, playoffQualifiedCentralConference) : null;\n\n  return (\n    <>\n      <div ref={ref} className={`${baseClass}__table`}>\n        <table className={`mls-o-table ${extraClasses ? extraClasses : \"\"} ${emptyRows ? `mls-o-table--empty` : \"\"} ${topClubs ? `mls-o-table--top-clubs-${topClubs}` : \"\"} ${playoffQualified ? `mls-o-table--playoff-qualified-${playoffQualified}` : \"\"} ${homeAdvantage ? `mls-o-table--home-advantage-${homeAdvantage}` : \"\"}`}  {...getTableProps()}>\n          <thead className=\"mls-o-table__header\">\n            {headerGroups.map((headerGroup, headerGroupIndex) => (\n              <tr key={`tr_${headerGroupIndex}`}\n                className={`mls-o-table__header-group ${headerGroupIndex === 0 ? 'mls-o-table__header-group--main' : ''}`} {...headerGroup.getHeaderGroupProps()}>\n                {headerGroup.headers.map((column, tableHeaderIndex) => (\n                  <th key={`th_${tableHeaderIndex}`}\n                    className={`mls-o-table__header ${tableHeaderIndex === 0 && !isOriginalPosition ? \"shadow\" : \"\"} ${column.isSorted ? \"mls-o-table__header--sorted\" : \"\"} ${column.originalId ? column.originalId : column.id}`} tabIndex=\"0\" role=\"button\"\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        column.toggleSortBy(!column.isSortedDesc);\n                      }\n                    }}\n                    {...column.getHeaderProps(column.getSortByToggleProps({ title: undefined }))}>\n                    <div\n                      className={`mls-o-table__header-title ${column.isSorted && !column.isSortedDesc ? \"mls-o-table__header-title--asc\" : \"\"} ${column.isSorted && column.isSortedDesc ? \"mls-o-table__header-title--desc\" : \"\"}`}>\n                      <span className={`mls-o-table__header-text-wrapper`}>\n                        <span\n                          className={`mls-o-table__header-text ${column.isSorted || !column.canSort ? \"\" : 'mls-o-table__header-text--unsorted'}`}>{column.render(\"Header\")}</span>\n                      </span>\n                      {\n                        column.canSort\n                          ? <div role=\"button\" className={`mls-o-table__header-icon`} />\n                          : null\n                      }\n                    </div>\n                  </th>\n                ))}\n              </tr>\n            ))}\n          </thead>\n          <tbody className=\"mls-o-table__body\" {...getTableBodyProps()}>\n            {!emptyRows\n              ? rows.map((row, rowIndex) => {\n                prepareRow(row);\n\n                if (rowIndex !== 0 && topClubsCounter > 0) {\n                  topClubsCounter--;\n                }\n\n                if (rowIndex !== 0 && playoffQualifiedCounter > 0) {\n                  playoffQualifiedCounter--;\n                }\n\n                if (rowIndex !== 0 && homeAdvantageCounter > 0) {\n                  homeAdvantageCounter--;\n                }\n\n                return (\n                  <tr key={`row_${rowIndex}`} className={`mls-o-table__row mls-o-table__row--${rowIndex + 1} ${tableConfig ? getStandingsConfig(topClubsCounter, homeAdvantageCounter, playoffQualifiedCounter, tableIsGrouped) : \"\"}`} {...row.getRowProps()}>\n                    {row.cells.map((cell, index) => {\n                      return (\n                        <td key={`col_${index}`}\n                          className={`mls-o-table__cell ${index === 0 && !isOriginalPosition ? \"shadow\" : \"\"} ${cell.column.isSorted ? 'mls-o-table__cell--sorted' : ''} ${cell.column.id}`}\n                          {...cell.getCellProps()}>\n                          {cell.render(\"Cell\")}\n                        </td>\n                      );\n                    })}\n                  </tr>\n                );\n              }) : null\n            }\n          </tbody>\n        </table>\n        <div className=\"mls-o-table__overlay\" />\n      </div>\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nTable = React.memo(Table);\n\nexport default Table;\n","export { default } from './Table';\n","import { useEffect } from 'react';\nimport { debounce } from \"lodash\";\n\nfunction useResize(fn, delay = 1000) {\n  useEffect(() => {\n    const debouncedHandleResize = debounce(fn, delay);\n\n    window.addEventListener('resize', debouncedHandleResize);\n\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize);\n    };\n  });\n}\n\nexport default useResize;\n","import React from \"react\";\n\nexport const chevronDirection = {\n  down: \"down\",\n  up: \"up\",\n  left: \"left\",\n  right: \"right\",\n};\n\nexport const Chevron = ({\n  useEmptyClasses = false,\n  extraClasses,\n  direction = chevronDirection.down,\n  size = \"small\",\n}) =>\n  !useEmptyClasses ? (\n    <div\n      role=\"img\"\n      className={`mls-o-buttons__svg transform ${\n        extraClasses ? extraClasses : \"\"\n      }`}\n    >\n      <span\n        className={`oc-o-icon--chevron-${direction} fa-icon-svg fa-icon-svg--${size}`}\n      >\n        <svg\n          className=\"fa-icon-svg fa-icon-svg--chevron-down\"\n          viewBox=\"0 0 30 30\"\n        >\n          <use xlinkHref=\"#chevron-down\" />\n        </svg>\n      </span>\n    </div>\n  ) : (\n    <div role=\"img\" className={extraClasses ? extraClasses : \"\"}>\n      <svg viewBox=\"0 0 30 30\">\n        <use xlinkHref=\"#chevron-down\" />\n      </svg>\n    </div>\n  );\n\nexport const Filters = ({ extraClasses, size = \"small\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--filters fa-icon-svg fa-icon-svg--${size}`}>\n      <svg className=\"fa-icon-svg fa-icon-svg--filters\" viewBox=\"0 0 23 23\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path d=\"M.6.6h21.6v21.6H.6z\" />\n          <g stroke=\"#000\" transform=\"translate(4.2 4.2)\">\n            <path strokeLinecap=\"square\" d=\"M1.8.2v3m0 2.4v8.3\" />\n            <circle cx={1.8} cy={4.4} r={1} />\n            <path strokeLinecap=\"square\" d=\"M7.2 11.2v2.7M7.2.2v7.9\" />\n            <circle cx={7.2} cy={9.7} r={1} />\n            <path strokeLinecap=\"square\" d=\"M12.7.2v3m0 2.4v8.3\" />\n            <circle cx={12.7} cy={4.4} r={1} />\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const NoResults = ({ extraClasses, size = \"large\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--no-results fa-icon-svg fa-icon-svg--${size}`}>\n      <svg className=\"fa-icon-svg fa-icon-svg--no-results\" viewBox=\"0 0 159 87\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path\n            className=\"fa-icon-svg__ball\"\n            stroke=\"#000\"\n            strokeWidth={5}\n            d=\"M156.2 20a14.6 14.6 0 11-29.2 0 14.6 14.6 0 0129.2 0zm-34 17.5L74.9 85m47.5-27.5L94.8 85\"\n          />\n          <path\n            className=\"fa-icon-svg__goal\"\n            fill=\"#000\"\n            d=\"M6 0L0 6v50.8h.2L5 52V5h83.3v51.8h.1l4.9-4.9V0z\"\n          />\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const MediaPlayingSVG = ({ extraClasses, size = \"large\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span\n      className={`oc-o-icon--media-playing fa-icon-svg fa-icon-svg--${size}`}\n    >\n      <svg viewBox=\"0 0 8 8\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path d=\"M-6-6h20v20H-6z\" />\n          <path\n            fill=\"#FFF\"\n            d=\"M.67 2H2v6H.67zM3.33 0h1.34v8H3.33zM6 4h1.33v4H6z\"\n          />\n          <g>\n            <path d=\"M-6-6h20v20H-6z\" />\n            <path\n              fill=\"#FFF\"\n              d=\"M.67 2H2v6H.67zM3.33 0h1.34v8H3.33zM6 4h1.33v4H6z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const CardBackground = ({ extraClasses }) => (\n  <div className={extraClasses}>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMinYMin slice\"\n      viewBox=\"0 0 329 218\"\n    >\n      <defs>\n        <linearGradient id=\"b\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor=\"#FBFBFB\" />\n          <stop offset=\"100%\" stopColor=\"#F5F6F6\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id=\"d\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor=\"#F5F6F6\" stopOpacity=\"0\" />\n          <stop offset=\"100%\" stopColor=\"#FBFBFB\" />\n        </linearGradient>\n        <path id=\"a\" d=\"M0 0h327v218H0z\" />\n      </defs>\n      <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(1)\">\n        <mask id=\"c\" fill=\"#fff\">\n          <use xlinkHref=\"#a\" />\n        </mask>\n        <use fill=\"#E5E6E6\" fillRule=\"nonzero\" xlinkHref=\"#a\" />\n        <path\n          fill=\"url(#b)\"\n          d=\"M0-1h246l-60 214H0z\"\n          mask=\"url(#c)\"\n          opacity=\".7\"\n        />\n        <path fill=\"url(#d)\" d=\"M-2 109h84L22 323H-2z\" mask=\"url(#c)\" />\n      </g>\n    </svg>\n  </div>\n);\n\nexport const TriangleSVG = ({ extraClasses, size = \"small\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--triangle fa-icon-svg fa-icon-svg--${size}`}>\n      <svg viewBox=\"0 0 4 6\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0 0v6.04l3.5-3.02z\" fill=\"#FFF\" fillRule=\"evenodd\" />\n      </svg>\n    </span>\n  </div>\n);\n"],"names":[],"sourceRoot":""}