{"version":3,"file":"js/react/mls-players-roster-composition-app.js?_t=eb553f60fe8c0d1edbec","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;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;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AAAA;AAGA;AAAA;AAEA;AAGA;AAmBA;AAAA;AAAA;AACA;AACA;AAEA;AAAA;AAMA;AAGA;AAEA;;;;;;;;;;;;;;;;;ACzDA;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;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/react/mls-players-roster-composition/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-roster-composition/components/PlayersRosterTable/PlayersRosterTable.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-roster-composition/components/PlayersRosterTable/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-players-roster-composition/main.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/svg/Svg.js"],"sourcesContent":["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(\"ACTIVE_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 \"./components/PlayersRosterTable\";\nimport { useReactAppState } from \"../shared/containers/utils\";\n\nfunction PlayersRosterComposition({ options }) {\n  const { t } = useReactAppState();\n  let rosterData = options?.playersData ? options?.playersData : [];\n\n  if (rosterData?.length && options?.filterType) {\n    const filterType = options?.filterType;\n    rosterData = rosterData\n      .map((playerData) => {\n        if (playerData.playerSlug && options?.linkRulePath) {\n          playerData.playerUrl = options.linkRulePath.replace(\"{slug}\", playerData.playerSlug);\n        } else {\n          playerData.playerUrl = null;\n        }\n\n        return playerData;\n      })\n      .filter((player) => player?.playerCategories.includes(filterType) || player?.rosterCategory === filterType || player?.playerStatusList.includes(filterType));\n  }\n\n  return (\n    rosterData?.length ?\n      <>\n        {options?.title ?\n          <>\n            <div className=\"mls-o-block-header\">\n              <div className=\"mls-o-block-header__title\">\n                {`${t(options?.title)} ${options?.maxSlots ? `(${options?.maxSlots} ${t(\"max\")})` : \"\"}`}\n              </div>\n            </div>\n            <div className=\"mls-o-block-header mls-o-block-header--sm\">\n              <div className=\"mls-o-block-header__title\">\n                {`${t(options?.title)} ${options?.maxSlots ? `(${options?.maxSlots} ${t(\"max\")})` : \"\"}`}\n              </div>\n            </div>\n          </>\n          : null\n        }\n        <div role=\"region\" className=\"mls-c-players-roster-composition\">\n          <PlayersRosterTable\n            baseClass={\"mls-c-players-roster-composition\"}\n            playersData={rosterData}\n            emptyResultsComponent={\n              <></>\n            }\n          />\n        </div>\n      </> : null\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nPlayersRosterComposition = React.memo(PlayersRosterComposition);\n\nexport default PlayersRosterComposition;\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 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":""}