@coorpacademy/components 11.32.42-alpha.9 → 11.32.43

package/es/template/my-learning/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","CardsList","Title","style","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","color","transition","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","skillsScore","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","cards","cardsListContainer","type","subtitle","iconColor","borderRadius","tag","label","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div data-name=\"button-explore-wrapper\">\n      <ButtonLink\n        customStyle={{\n          backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n          color: primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        hoverBackgroundColor={primarySkinColor}\n        hoverColor=\"#FFFFFF\"\n        onClick={onClick}\n        label={translate('skills_change_focus')}\n        data-name=\"change-skill-focus-button\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'arrows-rotate',\n            backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n            color: primarySkinColor,\n            size: 16\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills = [],\n    skillsInformation,\n    skillsLocales,\n    learnerFeature = true,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill,\n    learningPriorities\n  } = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);\n  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(skillRef => -getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills)\n  );\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return searchResults.filter(skill =>\n      skillsInformation[skill] ? skillsInformation[skill].availableForReview : false\n    );\n  }, [searchResults, skillsInformation]);\n\n  const graphDatas = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsInformation]\n  );\n\n  const graphLegends = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, skillsLocales[skill]]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsLocales]\n  );\n\n  const filters = useMemo(() => {\n    return {\n      all: searchResults,\n      review: skillsReviewReady\n    };\n  }, [searchResults, skillsReviewReady]);\n\n  const sumKpi = useCallback(\n    kpi => {\n      const skillFocusSelectedOnChartScore = getOr(\n        0,\n        [skillFocusSelectedOnChart, 'stats', `${kpi}`],\n        skillsInformation\n      );\n      return skillFocusSelectedOnChart\n        ? skillFocusSelectedOnChartScore\n        : sumBy(\n            skill => (skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0),\n            selectedSkillsList\n          );\n    },\n    [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n  );\n\n  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);\n\n  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);\n\n  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('skill_scope_specifier', {\n        focusedSkill: skillFocusSelectedOnChart\n          ? skillsLocales[skillFocusSelectedOnChart]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelectedOnChart]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('skill_chart_side_panel_content_completed'),\n      value: `${coursedCompletedData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    }\n  ];\n\n  const skillsScore = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation)]),\n        fromPairs\n      )(skills),\n    [skills, skillsInformation]\n  );\n\n  const handleOnDotClick = useCallback(\n    skillRef => {\n      setSkillFocusSelectedOnChart(skillRef);\n    },\n    [setSkillFocusSelectedOnChart]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));\n    },\n    [skills, skillsLocales, setSearchValue, setSearchResults]\n  );\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(skills);\n  }, [skills, setSearchValue, setSearchResults]);\n\n  const ReviewTooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('review_mode_tooltip_content_part1')}</li>\n          <li>{translate('review_mode_tooltip_content_part2')}</li>\n          <li>{translate('review_mode_tooltip_content_part3')}</li>\n          <li>{translate('review_mode_tooltip_content_part4')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      {isEmpty(learningPriorities?.cards) ? null : (\n        <div className={style.cardsListContainer}>\n          <CardsList\n            {...learningPriorities}\n            title={\n              <Title\n                {...{\n                  type: 'form-group',\n                  title: translate('learning_priorities'),\n                  subtitle: translate('learning_priorities_description'),\n                  icon: {\n                    iconName: 'sign-post',\n                    iconColor: '#A32700',\n                    borderRadius: '12px',\n                    backgroundColor: '#FFDCD1'\n                  },\n                  tag: {\n                    label: `${size(learningPriorities.cards)}`,\n                    type: 'default',\n                    size: 'S'\n                  }\n                }}\n              />\n            }\n          />\n        </div>\n      )}\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          skillsScore={skillsScore}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        {learnerFeature ? (\n          <div data-name=\"skill-focus-container\" className={style.skillFocusContainer}>\n            <header className={style.skillFocusHeader}>\n              <div className={style.skillFocusHeaderWrapper}>\n                <div className={style.skillFocusHeaderIcon}>\n                  <Icon\n                    iconName=\"bullseye-arrow\"\n                    backgroundColor=\"#DDD1FF\"\n                    borderRadius=\"12px\"\n                    size={{faSize: 20, wrapperSize: 48}}\n                  />\n                </div>\n                <div className={style.skillFocusHeaderContent}>\n                  <div data-name=\"skill-focus-title\" className={style.skillFocusHeaderTitle}>\n                    {translate('skills_focus')}\n                  </div>\n                  <div\n                    data-name=\"skill-focus-description\"\n                    className={style.skillFocusHeaderDescription}\n                  >\n                    {translate('skills_focus_description')}\n                  </div>\n                </div>\n              </div>\n              {selectedSkillsList.length >= 3 ? (\n                <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n              ) : null}\n            </header>\n            {selectedSkillsList.length >= 3 ? (\n              <div className={style.skillFocusContent}>\n                <div className={style.radarContainer}>\n                  <ResponsiveLearningProfileRadarChart\n                    totalDataset={1}\n                    height={424}\n                    width={680}\n                    data={graphDatas}\n                    legend={graphLegends}\n                    onClick={handleOnDotClick}\n                    onExploreClick={onExploreSkill}\n                    colors={[\n                      {\n                        gradient: {\n                          fill: ['#0062ffff', '#8000ff85'],\n                          stroke: ['#0062ffff', '#8000FF']\n                        },\n                        percentage: {\n                          color: primarySkinColor,\n                          background: convert(`color(${primarySkinColor} a(0.07))`)\n                        },\n                        label: {\n                          color: '#020202ff'\n                        }\n                      }\n                    ]}\n                  />\n                </div>\n                <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n              </div>\n            ) : (\n              <div className={style.skillFocusEmpty}>\n                <Picture\n                  className={style.img}\n                  src=\"https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg\"\n                  alt=\"demo\"\n                />\n                <div className={style.skillFocusEmptyTitle}>\n                  {translate('skills_focus_empty_title')}\n                </div>\n                <div className={style.skillFocusEmptyDescription}>\n                  {translate('skills_focus_empty_description')}\n                </div>\n                <div>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: primarySkinColor\n                    }}\n                    hoverBackgroundColor={convert(\n                      `hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`\n                    )}\n                    onClick={handleOpenSkillPicker}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ) : null}\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills_section_title')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('skills_section_description')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={ReviewTooltipContent}\n                closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.toolBarContainer}>\n          <div className={style.skillFilterContainer}>\n            {keys(filters).map((filter, index) => {\n              function handleFilterClick() {\n                setActiveFilter(filter);\n              }\n\n              return (\n                <div key={index}>\n                  <FilterButton\n                    active={activeFilter === filter}\n                    filter={\n                      filter === 'all' ? translate('all') : translate('review_mode_available')\n                    }\n                    skillTotal={filters[filter].length}\n                    onClick={handleFilterClick}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <div className={style.searchWrapper}>\n            <SearchForm\n              search={{\n                placeholder: translate('search_place_holder'),\n                value: searchValue,\n                onChange: handleSearch\n              }}\n              onReset={handleSearchReset}\n            />\n          </div>\n        </div>\n        {searchValue && searchResults.length === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.skillListContainer}>\n            {activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? (\n              <div className={style.skillListEmptyContainer}>\n                <ReviewNoSkills\n                  titleNoSkills={translate('review_skill_empty')}\n                  textNoSkills={translate('review_skill_empty_description')}\n                  iconSkillAriaLabel={translate('review_skill_empty')}\n                  imagePosition=\"top\"\n                />\n              </div>\n            ) : (\n              filters[activeFilter].map((skill, index) => {\n                const defaultStats = {\n                  score: 0,\n                  content: 0,\n                  contentCompleted: 0,\n                  questionsToReview: 0\n                };\n\n                function handleReviewSkill() {\n                  onReviewSkill(skill);\n                }\n                function handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview, contentCompleted} = skillsInformation[\n                  skill\n                ]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score: score.toFixed(1),\n                        content,\n                        questionsToReview,\n                        contentCompleted\n                      }}\n                      review={\n                        skillsInformation[skill]\n                          ? skillsInformation[skill].availableForReview\n                          : false\n                      }\n                      onReviewClick={handleReviewSkill}\n                      onExploreClick={handleExploreSkill}\n                    />\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsInformation: PropTypes.objectOf(\n    PropTypes.shape({\n      availableForReview: PropTypes.bool,\n      stats: PropTypes.shape({\n        score: PropTypes.number,\n        content: PropTypes.number,\n        contentCompleted: PropTypes.number,\n        questionsToReview: PropTypes.number,\n        learningTime: PropTypes.number\n      })\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  learnerFeature: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default MyLearning;\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,EAAsCC,OAAtC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AAEA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,cAAP,MAA2B,iCAA3B;AACA,OAAOC,UAAP,MAAuB,4BAAvB;AACA,OAAOC,gBAAP,MAA6B,mCAA7B;AACA,OAAOC,mCAAP,MAAgD,6CAAhD;AACA,OAAOC,+BAAP,MAA4C,oDAA5C;AACA,OAAOC,gBAAP,MAA6B,mCAA7B;AACA,OAAOC,mBAAP,MAAgC,kCAAhC;AACA,SAAQC,aAAR,QAA4B,wBAA5B;AACA,OAAOC,SAAP,MAAsB,qCAAtB;AACA,OAAOC,KAAP,MAAkB,kBAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACjD,MAAM;IAACC;EAAD,IAAYF,KAAlB;EACA,MAAM;IAACG,IAAD;IAAOC;EAAP,IAAoBH,OAA1B;;EACA,MAAMI,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EAEA,oBACE;IAAK,aAAU;EAAf,gBACE,oBAAC,UAAD;IACE,WAAW,EAAE;MACXG,eAAe,EAAExB,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B,CADb;MAEXE,KAAK,EAAEF,gBAFI;MAGXG,UAAU,EAAE;IAHD,CADf;IAME,oBAAoB,EAAEH,gBANxB;IAOE,UAAU,EAAC,SAPb;IAQE,OAAO,EAAEH,OARX;IASE,KAAK,EAAEE,SAAS,CAAC,qBAAD,CATlB;IAUE,aAAU,2BAVZ;IAWE,IAAI,EAAE;MACJK,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,eADA;QAENL,eAAe,EAAExB,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B,CAFlB;QAGNE,KAAK,EAAEF,gBAHD;QAINO,IAAI,EAAE;MAJA;IAFJ;EAXR,EADF,CADF;AAyBD,CA9BD;;AAgCAb,sBAAsB,CAACc,YAAvB,GAAsC;EACpCV,IAAI,EAAEpB,QAAQ,CAAC+B,iBAAT,CAA2BX,IADG;EAEpCC,SAAS,EAAErB,QAAQ,CAAC+B,iBAAT,CAA2BV;AAFF,CAAtC;AAKAL,sBAAsB,CAACgB,SAAvB,2CAAmC;EACjCb,OAAO,EAAErB,SAAS,CAACmC;AADc,CAAnC;;AAIA,MAAMC,YAAY,GAAG,CAACjB,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IAACiB,MAAD;IAASC,MAAT;IAAiBC,UAAjB;IAA6BlB;EAA7B,IAAwCF,KAA9C;EACA,MAAM;IAACG;EAAD,IAASF,OAAf;;EACA,MAAMI,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EAEA,MAAMkB,OAAO,GAAG3C,WAAW,CACzB,mBACE,iCACGyC,MADH,eAEE;IACE,SAAS,EAAED,MAAM,GAAGpB,KAAK,CAACwB,iBAAT,GAA6BxB,KAAK,CAACyB,yBADtD;IAEE,KAAK,EAAE;MACLjB,eAAe,EAAEY,MAAM,GAAGpC,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B,CAAV,GAAmD,SADrE;MAELE,KAAK,EAAEW,MAAM,GAAGb,gBAAH,GAAsB;IAF9B;EAFT,GAOGe,UAPH,CAFF,CAFuB,EAezB,CAACD,MAAD,EAASC,UAAT,EAAqBF,MAArB,EAA6Bb,gBAA7B,CAfyB,CAA3B;EAkBA,MAAMmB,WAAW,GAAG;IAClBC,WAAW,EAAE;MACXnB,eAAe,EAAEY,MAAM,GAAGpC,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B,CAAV,GAAmD,SAD/D;MAEXE,KAAK,EAAEW,MAAM,GAAGb,gBAAH,GAAsB,SAFxB;MAGXG,UAAU,EAAE,6DAHD;MAIXkB,KAAK,EAAE;IAJI,CADK;IAOlBxB,OAPkB;IAQlByB,OAAO,eAAE,oBAAC,OAAD,OARS;IASlB,aAAa;EATK,CAApB;EAYA,oBAAO,oBAAC,UAAD,EAAgBH,WAAhB,CAAP;AACD,CApCD;;AAsCAP,YAAY,CAACJ,YAAb,GAA4B;EAC1BV,IAAI,EAAEpB,QAAQ,CAAC+B,iBAAT,CAA2BX,IADP;EAE1BC,SAAS,EAAErB,QAAQ,CAAC+B,iBAAT,CAA2BV;AAFZ,CAA5B;AAKAa,YAAY,CAACF,SAAb,2CAAyB;EACvBG,MAAM,EAAErC,SAAS,CAAC+C,IADK;EAEvBT,MAAM,EAAEtC,SAAS,CAACgD,MAFK;EAGvBT,UAAU,EAAEvC,SAAS,CAACiD,MAHC;EAIvB5B,OAAO,EAAErB,SAAS,CAACmC;AAJI,CAAzB;;AAOA,MAAMe,UAAU,GAAG,CAAC/B,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJ+B,MADI;IAEJC,cAAc,GAAG,EAFb;IAGJC,iBAHI;IAIJC,aAJI;IAKJC,cAAc,GAAG,IALb;IAMJC,SANI;IAOJC,mBAPI;IAQJC,aARI;IASJC,cATI;IAUJC;EAVI,IAWFzC,KAXJ;EAYA,MAAM;IAACG,IAAD;IAAOC;EAAP,IAAoBH,OAA1B;;EACA,MAAMI,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EACA,MAAM,CAACuC,IAAD,EAAOC,OAAP,IAAkBhE,QAAQ,CAAC,KAAD,CAAhC;EACA,MAAM,CAACiE,kBAAD,EAAqBC,qBAArB,IAA8ClE,QAAQ,CAACsD,cAAD,CAA5D;EACA,MAAM,CAACa,yBAAD,EAA4BC,4BAA5B,IAA4DpE,QAAQ,CAACqE,SAAD,CAA1E;EACA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCvE,QAAQ,CAAC,EAAD,CAA9C;EACA,MAAM,CAACwE,aAAD,EAAgBC,gBAAhB,IAAoCzE,QAAQ,CAChD,QAAO0E,QAAQ,IAAI,CAAC,OAAM,CAAN,EAAS,CAACA,QAAD,EAAW,OAAX,EAAoB,OAApB,CAAT,EAAuCnB,iBAAvC,CAApB,EAA+EF,MAA/E,CADgD,CAAlD;EAGA,MAAM,CAACsB,YAAD,EAAeC,eAAf,IAAkC5E,QAAQ,CAAC,KAAD,CAAhD;EAEA,MAAM6E,iBAAiB,GAAG5E,OAAO,CAAC,MAAM;IACtC,OAAOuE,aAAa,CAAChC,MAAd,CAAqBsC,KAAK,IAC/BvB,iBAAiB,CAACuB,KAAD,CAAjB,GAA2BvB,iBAAiB,CAACuB,KAAD,CAAjB,CAAyBC,kBAApD,GAAyE,KADpE,CAAP;EAGD,CAJgC,EAI9B,CAACP,aAAD,EAAgBjB,iBAAhB,CAJ8B,CAAjC;EAMA,MAAMyB,UAAU,GAAG/E,OAAO,CACxB,MACE,MACE,KAAI6E,KAAK,IAAI,CAACA,KAAD,EAAQ,OAAM,CAAN,EAAS,CAACA,KAAD,EAAQ,OAAR,EAAiB,OAAjB,CAAT,EAAoCvB,iBAApC,EAAuD0B,OAAvD,CAA+D,CAA/D,CAAR,CAAb,CADF,cAGEhB,kBAHF,CAFsB,EAMxB,CAACA,kBAAD,EAAqBV,iBAArB,CANwB,CAA1B;EASA,MAAM2B,YAAY,GAAGjF,OAAO,CAC1B,MACE,MACE,KAAI6E,KAAK,IAAI,CAACA,KAAD,EAAQtB,aAAa,CAACsB,KAAD,CAArB,CAAb,CADF,cAGEb,kBAHF,CAFwB,EAM1B,CAACA,kBAAD,EAAqBT,aAArB,CAN0B,CAA5B;EASA,MAAM2B,OAAO,GAAGlF,OAAO,CAAC,MAAM;IAC5B,OAAO;MACLmF,GAAG,EAAEZ,aADA;MAELa,MAAM,EAAER;IAFH,CAAP;EAID,CALsB,EAKpB,CAACL,aAAD,EAAgBK,iBAAhB,CALoB,CAAvB;EAOA,MAAMS,MAAM,GAAGvF,WAAW,CACxBwF,GAAG,IAAI;IACL,MAAMC,8BAA8B,GAAG,OACrC,CADqC,EAErC,CAACrB,yBAAD,EAA4B,OAA5B,EAAsC,GAAEoB,GAAI,EAA5C,CAFqC,EAGrChC,iBAHqC,CAAvC;;IAKA,OAAOY,yBAAyB,GAC5BqB,8BAD4B,GAE5B,OACEV,KAAK,IAAKvB,iBAAiB,CAACuB,KAAD,CAAjB,GAA2BvB,iBAAiB,CAACuB,KAAD,CAAjB,CAAyBW,KAAzB,CAA+BF,GAA/B,CAA3B,GAAiE,CAD7E,EAEEtB,kBAFF,CAFJ;EAMD,CAbuB,EAcxB,CAACE,yBAAD,EAA4BZ,iBAA5B,EAA+CU,kBAA/C,CAdwB,CAA1B;EAiBA,MAAMyB,oBAAoB,GAAGzF,OAAO,CAAC,MAAMqF,MAAM,CAAC,kBAAD,CAAb,EAAmC,CAACA,MAAD,CAAnC,CAApC;EAEA,MAAMK,qBAAqB,GAAG1F,OAAO,CAAC,MAAMqF,MAAM,CAAC,mBAAD,CAAb,EAAoC,CAACA,MAAD,CAApC,CAArC;EAEA,MAAMM,gBAAgB,GAAG3F,OAAO,CAAC,MAAMqF,MAAM,CAAC,cAAD,CAAb,EAA+B,CAACA,MAAD,CAA/B,CAAhC;EAEA,MAAMO,qBAAqB,GAAG5F,OAAO,CACnC,MACEwB,SAAS,CAAC,uBAAD,EAA0B;IACjCqE,YAAY,EAAE3B,yBAAyB,GACnCX,aAAa,CAACW,yBAAD,CADsB,GAEnC1C,SAAS,CAAC,gBAAD;EAHoB,CAA1B,CAFwB,EAOnC,CAACA,SAAD,EAAY+B,aAAZ,EAA2BW,yBAA3B,CAPmC,CAArC;EASA,MAAM4B,oBAAoB,GAAG,CAC3B;IACEC,KAAK,EAAEvE,SAAS,CAAC,0CAAD,CADlB;IAEEwE,KAAK,EAAG,GAAEP,oBAAqB,EAFjC;IAGEQ,MAAM,EAAEL,qBAHV;IAIEM,IAAI,EAAE;MAACC,QAAQ,EAAE,iBAAX;MAA8BzE,eAAe,EAAE;IAA/C;EAJR,CAD2B,EAO3B;IACEqE,KAAK,EAAEvE,SAAS,CAAC,uCAAD,CADlB;IAEEwE,KAAK,EAAEjF,aAAa,CAAC4E,gBAAD,CAFtB;IAGEM,MAAM,EAAEL,qBAHV;IAIEM,IAAI,EAAE;MAACC,QAAQ,EAAE,OAAX;MAAoBzE,eAAe,EAAE;IAArC;EAJR,CAP2B,EAa3B;IACEqE,KAAK,EAAEvE,SAAS,CAAC,4CAAD,CADlB;IAEEwE,KAAK,EAAG,GAAEN,qBAAsB,EAFlC;IAGEO,MAAM,EAAEL,qBAHV;IAIEM,IAAI,EAAE;MAACC,QAAQ,EAAE,iBAAX;MAA8BzE,eAAe,EAAE;IAA/C;EAJR,CAb2B,CAA7B;EAqBA,MAAM0E,WAAW,GAAGpG,OAAO,CACzB,MACE,MACE,KAAI6E,KAAK,IAAI,CAACA,KAAD,EAAQ,OAAM,CAAN,EAAS,CAACA,KAAD,EAAQ,OAAR,EAAiB,OAAjB,CAAT,EAAoCvB,iBAApC,CAAR,CAAb,CADF,cAGEF,MAHF,CAFuB,EAMzB,CAACA,MAAD,EAASE,iBAAT,CANyB,CAA3B;EASA,MAAM+C,gBAAgB,GAAGvG,WAAW,CAClC2E,QAAQ,IAAI;IACVN,4BAA4B,CAACM,QAAD,CAA5B;EACD,CAHiC,EAIlC,CAACN,4BAAD,CAJkC,CAApC;EAMA,MAAMmC,qBAAqB,GAAGxG,WAAW,CAAC,MAAMiE,OAAO,CAAC,IAAD,CAAd,EAAsB,CAACA,OAAD,CAAtB,CAAzC;EACA,MAAMwC,sBAAsB,GAAGzG,WAAW,CAAC,MAAMiE,OAAO,CAAC,KAAD,CAAd,EAAuB,CAACA,OAAD,CAAvB,CAA1C;EACA,MAAMyC,wBAAwB,GAAG1G,WAAW,CAC1C2G,cAAc,IAAI;IAChBxC,qBAAqB,CAACwC,cAAD,CAArB;IACA/C,mBAAmB,CAAC+C,cAAD,CAAnB;IACA1C,OAAO,CAAC,KAAD,CAAP;EACD,CALyC,EAM1C,CAACL,mBAAD,EAAsBO,qBAAtB,EAA6CF,OAA7C,CAN0C,CAA5C;EAQA,MAAM2C,YAAY,GAAG5G,WAAW,CAC9BkG,KAAK,IAAI;IACP1B,cAAc,CAAC0B,KAAD,CAAd;IACAxB,gBAAgB,CAACpB,MAAM,CAACb,MAAP,CAAcsC,KAAK,IAAI/D,mBAAmB,CAACyC,aAAa,CAACsB,KAAD,CAAd,EAAuBmB,KAAvB,CAA1C,CAAD,CAAhB;EACD,CAJ6B,EAK9B,CAAC5C,MAAD,EAASG,aAAT,EAAwBe,cAAxB,EAAwCE,gBAAxC,CAL8B,CAAhC;EAOA,MAAMmC,iBAAiB,GAAG7G,WAAW,CAAC,MAAM;IAC1CwE,cAAc,CAAC,EAAD,CAAd;IACAE,gBAAgB,CAACpB,MAAD,CAAhB;EACD,CAHoC,EAGlC,CAACA,MAAD,EAASkB,cAAT,EAAyBE,gBAAzB,CAHkC,CAArC;EAKA,MAAMoC,oBAAoB,GAAG9G,WAAW,CACtC,mBACE,8CACE,8CACE,+BAAI0B,SAAS,CAAC,4BAAD,CAAb,CADF,CADF,eAIE,+BAAIA,SAAS,CAAC,6BAAD,CAAb,CAJF,eAKE,6CACE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CADF,eAEE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CAFF,eAGE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CAHF,eAIE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CAJF,CALF,CAFoC,EAetC,CAACA,SAAD,CAfsC,CAAxC;EAkBA,oBACE;IAAK,SAAS,EAAEN,KAAK,CAAC2F;EAAtB,GACG,SAAQhD,kBAAkB,EAAEiD,KAA5B,IAAqC,IAArC,gBACC;IAAK,SAAS,EAAE5F,KAAK,CAAC6F;EAAtB,gBACE,oBAAC,SAAD,eACMlD,kBADN;IAEE,KAAK,eACH,oBAAC,KAAD;MAEImD,IAAI,EAAE,YAFV;MAGIjB,KAAK,EAAEvE,SAAS,CAAC,qBAAD,CAHpB;MAIIyF,QAAQ,EAAEzF,SAAS,CAAC,iCAAD,CAJvB;MAKI0E,IAAI,EAAE;QACJC,QAAQ,EAAE,WADN;QAEJe,SAAS,EAAE,SAFP;QAGJC,YAAY,EAAE,MAHV;QAIJzF,eAAe,EAAE;MAJb,CALV;MAWI0F,GAAG,EAAE;QACHC,KAAK,EAAG,GAAE,MAAKxD,kBAAkB,CAACiD,KAAxB,CAA+B,EADtC;QAEHE,IAAI,EAAE,SAFH;QAGHhF,IAAI,EAAE;MAHH;IAXT;EAHJ,GADF,CAFJ,eA4BE;IAAK,SAAS,EAAEd,KAAK,CAACoG;EAAtB,gBACE,oBAAC,gBAAD;IACE,MAAM,EAAElE,MADV;IAEE,WAAW,EAAEgD,WAFf;IAGE,cAAc,EAAEpC,kBAHlB;IAIE,aAAa,EAAET,aAJjB;IAKE,MAAM,EAAEO,IALV;IAME,SAAS,EAAEL,SANb;IAOE,QAAQ,EAAE8C,sBAPZ;IAQE,SAAS,EAAEC,wBARb;IASE,OAAO,EAAED;EATX,EADF,EAYG/C,cAAc,gBACb;IAAK,aAAU,uBAAf;IAAuC,SAAS,EAAEtC,KAAK,CAACqG;EAAxD,gBACE;IAAQ,SAAS,EAAErG,KAAK,CAACsG;EAAzB,gBACE;IAAK,SAAS,EAAEtG,KAAK,CAACuG;EAAtB,gBACE;IAAK,SAAS,EAAEvG,KAAK,CAACwG;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,YAAY,EAAC,MAHf;IAIE,IAAI,EAAE;MAACC,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAJR,EADF,CADF,eASE;IAAK,SAAS,EAAE1G,KAAK,CAAC2G;EAAtB,gBACE;IAAK,aAAU,mBAAf;IAAmC,SAAS,EAAE3G,KAAK,CAAC4G;EAApD,GACGtG,SAAS,CAAC,cAAD,CADZ,CADF,eAIE;IACE,aAAU,yBADZ;IAEE,SAAS,EAAEN,KAAK,CAAC6G;EAFnB,GAIGvG,SAAS,CAAC,0BAAD,CAJZ,CAJF,CATF,CADF,EAsBGwC,kBAAkB,CAACgE,MAAnB,IAA6B,CAA7B,gBACC,oBAAC,sBAAD;IAAwB,OAAO,EAAE1B;EAAjC,EADD,GAEG,IAxBN,CADF,EA2BGtC,kBAAkB,CAACgE,MAAnB,IAA6B,CAA7B,gBACC;IAAK,SAAS,EAAE9G,KAAK,CAAC+G;EAAtB,gBACE;IAAK,SAAS,EAAE/G,KAAK,CAACgH;EAAtB,gBACE,oBAAC,mCAAD;IACE,YAAY,EAAE,CADhB;IAEE,MAAM,EAAE,GAFV;IAGE,KAAK,EAAE,GAHT;IAIE,IAAI,EAAEnD,UAJR;IAKE,MAAM,EAAEE,YALV;IAME,OAAO,EAAEoB,gBANX;IAOE,cAAc,EAAEzC,cAPlB;IAQE,MAAM,EAAE,CACN;MACEuE,QAAQ,EAAE;QACRC,IAAI,EAAE,CAAC,WAAD,EAAc,WAAd,CADE;QAERC,MAAM,EAAE,CAAC,WAAD,EAAc,SAAd;MAFA,CADZ;MAKEC,UAAU,EAAE;QACV3G,KAAK,EAAEF,gBADG;QAEV8G,UAAU,EAAErI,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B;MAFT,CALd;MASE4F,KAAK,EAAE;QACL1F,KAAK,EAAE;MADF;IATT,CADM;EARV,EADF,CADF,eA2BE,oBAAC,+BAAD;IAAiC,cAAc,EAAEmE;EAAjD,EA3BF,CADD,gBA+BC;IAAK,SAAS,EAAE5E,KAAK,CAACsH;EAAtB,gBACE,oBAAC,OAAD;IACE,SAAS,EAAEtH,KAAK,CAACuH,GADnB;IAEE,GAAG,EAAC,4FAFN;IAGE,GAAG,EAAC;EAHN,EADF,eAME;IAAK,SAAS,EAAEvH,KAAK,CAACwH;EAAtB,GACGlH,SAAS,CAAC,0BAAD,CADZ,CANF,eASE;IAAK,SAAS,EAAEN,KAAK,CAACyH;EAAtB,GACGnH,SAAS,CAAC,gCAAD,CADZ,CATF,eAYE,8CACE,oBAAC,UAAD;IACE,KAAK,EAAEA,SAAS,CAAC,qBAAD,CADlB;IAEE,IAAI,EAAC,SAFP;IAGE,WAAW,EAAE;MACXsB,KAAK,EAAE,aADI;MAEXpB,eAAe,EAAED;IAFN,CAHf;IAOE,oBAAoB,EAAEvB,OAAO,CAC1B,YAAWuB,gBAAiB,0BADF,CAP/B;IAUE,OAAO,EAAE6E;EAVX,EADF,CAZF,CA1DJ,CADa,GAwFX,IApGN,eAqGE;IAAQ,SAAS,EAAEpF,KAAK,CAAC0H;EAAzB,gBACE;IAAK,SAAS,EAAE1H,KAAK,CAAC2H;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,UADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MAAClB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAHR,EADF,CADF,eAQE;IAAK,SAAS,EAAE1G,KAAK,CAAC4H;EAAtB,gBACE;IAAK,SAAS,EAAE5H,KAAK,CAAC6H;EAAtB,GAA6CvH,SAAS,CAAC,sBAAD,CAAtD,CADF,eAEE;IAAK,SAAS,EAAEN,KAAK,CAAC8H;EAAtB,GACGxH,SAAS,CAAC,4BAAD,CADZ,eAEE,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,sBAAsB,EAAEN,KAAK,CAAC+H,eAFhC;IAGE,gBAAgB,EAAE/H,KAAK,CAACgI,OAH1B;IAIE,cAAc,EAAEtC,oBAJlB;IAKE,oCAAoC,EAAEpF,SAAS,CAAC,2BAAD;EALjD,EAFF,CAFF,CARF,CArGF,eA2HE;IAAK,SAAS,EAAEN,KAAK,CAACiI;EAAtB,gBACE;IAAK,SAAS,EAAEjI,KAAK,CAACkI;EAAtB,GACG,MAAKlE,OAAL,EAAcmE,GAAd,CAAkB,CAAC9G,MAAD,EAAS+G,KAAT,KAAmB;IACpC,SAASC,iBAAT,GAA6B;MAC3B5E,eAAe,CAACpC,MAAD,CAAf;IACD;;IAED,oBACE;MAAK,GAAG,EAAE+G;IAAV,gBACE,oBAAC,YAAD;MACE,MAAM,EAAE5E,YAAY,KAAKnC,MAD3B;MAEE,MAAM,EACJA,MAAM,KAAK,KAAX,GAAmBf,SAAS,CAAC,KAAD,CAA5B,GAAsCA,SAAS,CAAC,uBAAD,CAHnD;MAKE,UAAU,EAAE0D,OAAO,CAAC3C,MAAD,CAAP,CAAgByF,MAL9B;MAME,OAAO,EAAEuB;IANX,EADF,CADF;EAYD,CAjBA,CADH,CADF,eAqBE;IAAK,SAAS,EAAErI,KAAK,CAACsI;EAAtB,gBACE,oBAAC,UAAD;IACE,MAAM,EAAE;MACNC,WAAW,EAAEjI,SAAS,CAAC,qBAAD,CADhB;MAENwE,KAAK,EAAE3B,WAFD;MAGNqF,QAAQ,EAAEhD;IAHJ,CADV;IAME,OAAO,EAAEC;EANX,EADF,CArBF,CA3HF,EA2JGtC,WAAW,IAAIE,aAAa,CAACyD,MAAd,KAAyB,CAAxC,gBACC;IAAK,SAAS,EAAE9G,KAAK,CAACyI;EAAtB,gBACE;IAAK,SAAS,EAAEzI,KAAK,CAAC0I;EAAtB,GACGpI,SAAS,CAAC,2BAAD,EAA8B;IAAC6C;EAAD,CAA9B,CADZ,CADF,eAIE;IAAK,SAAS,EAAEnD,KAAK,CAAC2I;EAAtB,GACGrI,SAAS,CAAC,iCAAD,CADZ,CAJF,eAOE;IAAK,SAAS,EAAEN,KAAK,CAAC4I,4BAAtB;IAAoD,OAAO,EAAEnD;EAA7D,GACGnF,SAAS,CAAC,kCAAD,CADZ,CAPF,CADD,gBAaC;IAAK,SAAS,EAAEN,KAAK,CAAC6I;EAAtB,GACGrF,YAAY,KAAK,uBAAjB,IAA4CQ,OAAO,CAACR,YAAD,CAAP,CAAsBsD,MAAtB,KAAiC,CAA7E,gBACC;IAAK,SAAS,EAAE9G,KAAK,CAAC8I;EAAtB,gBACE,oBAAC,cAAD;IACE,aAAa,EAAExI,SAAS,CAAC,oBAAD,CAD1B;IAEE,YAAY,EAAEA,SAAS,CAAC,gCAAD,CAFzB;IAGE,kBAAkB,EAAEA,SAAS,CAAC,oBAAD,CAH/B;IAIE,aAAa,EAAC;EAJhB,EADF,CADD,GAUC0D,OAAO,CAACR,YAAD,CAAP,CAAsB2E,GAAtB,CAA0B,CAACxE,KAAD,EAAQyE,KAAR,KAAkB;IAC1C,MAAMW,YAAY,GAAG;MACnBC,KAAK,EAAE,CADY;MAEnBnH,OAAO,EAAE,CAFU;MAGnBoH,gBAAgB,EAAE,CAHC;MAInBC,iBAAiB,EAAE;IAJA,CAArB;;IAOA,SAASC,iBAAT,GAA6B;MAC3B1G,aAAa,CAACkB,KAAD,CAAb;IACD;;IACD,SAASyF,kBAAT,GAA8B;MAC5B1G,cAAc,CAACiB,KAAD,CAAd;IACD;;IACD,MAAM;MAACqF,KAAD;MAAQnH,OAAR;MAAiBqH,iBAAjB;MAAoCD;IAApC,IAAwD7G,iBAAiB,CAC7EuB,KAD6E,CAAjB,GAG1DvB,iBAAiB,CAACuB,KAAD,CAAjB,CAAyBW,KAHiC,GAI1DyE,YAJJ;IAKA,oBACE;MAAK,GAAG,EAAEX;IAAV,gBACE,oBAAC,gBAAD;MACE,UAAU,EAAE/F,aAAa,CAACsB,KAAD,CAD3B;MAEE,KAAK,EAAExB,cAAc,CAACkH,QAAf,CAAwB1F,KAAxB,CAFT;MAGE,OAAO,EAAE;QACPqF,KAAK,EAAEA,KAAK,CAAClF,OAAN,CAAc,CAAd,CADA;QAEPjC,OAFO;QAGPqH,iBAHO;QAIPD;MAJO,CAHX;MASE,MAAM,EACJ7G,iBAAiB,CAACuB,KAAD,CAAjB,GACIvB,iBAAiB,CAACuB,KAAD,CAAjB,CAAyBC,kBAD7B,GAEI,KAZR;MAcE,aAAa,EAAEuF,iBAdjB;MAeE,cAAc,EAAEC;IAflB,EADF,CADF;EAqBD,CAxCD,CAXJ,CAxKJ,CA5BF,CADF;AA+PD,CAlaD;;AAoaAnH,UAAU,CAAClB,YAAX,GAA0B;EACxBV,IAAI,EAAEpB,QAAQ,CAAC+B,iBAAT,CAA2BX,IADT;EAExBC,SAAS,EAAErB,QAAQ,CAAC+B,iBAAT,CAA2BV;AAFd,CAA1B;AAKA2B,UAAU,CAAChB,SAAX,2CAAuB;EACrBiB,MAAM,EAAEnD,SAAS,CAACuK,OAAV,CAAkBvK,SAAS,CAACgD,MAA5B,CADa;EAErBI,cAAc,EAAEpD,SAAS,CAACuK,OAAV,CAAkBvK,SAAS,CAACgD,MAA5B,CAFK;EAGrBK,iBAAiB,EAAErD,SAAS,CAACwK,QAAV,CACjBxK,SAAS,CAACyK,KAAV,CAAgB;IACd5F,kBAAkB,EAAE7E,SAAS,CAAC+C,IADhB;IAEdwC,KAAK,EAAEvF,SAAS,CAACyK,KAAV,CAAgB;MACrBR,KAAK,EAAEjK,SAAS,CAACiD,MADI;MAErBH,OAAO,EAAE9C,SAAS,CAACiD,MAFE;MAGrBiH,gBAAgB,EAAElK,SAAS,CAACiD,MAHP;MAIrBkH,iBAAiB,EAAEnK,SAAS,CAACiD,MAJR;MAKrByH,YAAY,EAAE1K,SAAS,CAACiD;IALH,CAAhB;EAFO,CAAhB,CADiB,CAHE;EAerBK,aAAa,EAAEtD,SAAS,CAACwK,QAAV,CAAmBxK,SAAS,CAACgD,MAA7B,CAfM;EAgBrBO,cAAc,EAAEvD,SAAS,CAAC+C,IAhBL;EAiBrBS,SAAS,EAAExD,SAAS,CAAC+C,IAjBA;EAkBrBU,mBAAmB,EAAEzD,SAAS,CAACmC,IAlBV;EAmBrBuB,aAAa,EAAE1D,SAAS,CAACmC,IAnBJ;EAoBrBwB,cAAc,EAAE3D,SAAS,CAACmC,IApBL;EAqBrByB,kBAAkB,EAAE5D,SAAS,CAACyK,KAAV,CAAgB1J,SAAS,CAACmB,SAA1B;AArBC,CAAvB;AAwBA,eAAegB,UAAf"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","CardsList","Title","style","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","color","transition","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","skillsScore","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","cards","cardsListContainer","type","subtitle","iconColor","borderRadius","tag","label","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div data-name=\"button-explore-wrapper\">\n      <ButtonLink\n        customStyle={{\n          backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n          color: primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        hoverBackgroundColor={primarySkinColor}\n        hoverColor=\"#FFFFFF\"\n        onClick={onClick}\n        label={translate('skills_change_focus')}\n        data-name=\"change-skill-focus-button\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'arrows-rotate',\n            backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n            color: primarySkinColor,\n            size: 16\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills = [],\n    skillsInformation,\n    skillsLocales,\n    learnerFeature = true,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill,\n    learningPriorities\n  } = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);\n  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(skillRef => -getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills)\n  );\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return searchResults.filter(skill =>\n      skillsInformation[skill] ? skillsInformation[skill].availableForReview : false\n    );\n  }, [searchResults, skillsInformation]);\n\n  const graphDatas = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsInformation]\n  );\n\n  const graphLegends = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, skillsLocales[skill]]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsLocales]\n  );\n\n  const filters = useMemo(() => {\n    return {\n      all: searchResults,\n      review: skillsReviewReady\n    };\n  }, [searchResults, skillsReviewReady]);\n\n  const sumKpi = useCallback(\n    kpi => {\n      const skillFocusSelectedOnChartScore = getOr(\n        0,\n        [skillFocusSelectedOnChart, 'stats', `${kpi}`],\n        skillsInformation\n      );\n      return skillFocusSelectedOnChart\n        ? skillFocusSelectedOnChartScore\n        : sumBy(\n            skill => (skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0),\n            selectedSkillsList\n          );\n    },\n    [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n  );\n\n  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);\n\n  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);\n\n  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('skill_scope_specifier', {\n        focusedSkill: skillFocusSelectedOnChart\n          ? skillsLocales[skillFocusSelectedOnChart]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelectedOnChart]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('skill_chart_side_panel_content_completed'),\n      value: `${coursedCompletedData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    }\n  ];\n\n  const skillsScore = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation)]),\n        fromPairs\n      )(skills),\n    [skills, skillsInformation]\n  );\n\n  const handleOnDotClick = useCallback(\n    skillRef => {\n      setSkillFocusSelectedOnChart(skillRef);\n    },\n    [setSkillFocusSelectedOnChart]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));\n    },\n    [skills, skillsLocales, setSearchValue, setSearchResults]\n  );\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(skills);\n  }, [skills, setSearchValue, setSearchResults]);\n\n  const ReviewTooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('review_mode_tooltip_content_part1')}</li>\n          <li>{translate('review_mode_tooltip_content_part2')}</li>\n          <li>{translate('review_mode_tooltip_content_part3')}</li>\n          <li>{translate('review_mode_tooltip_content_part4')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      {isEmpty(learningPriorities?.cards) ? null : (\n        <div className={style.cardsListContainer}>\n          <CardsList\n            {...learningPriorities}\n            title={\n              <Title\n                {...{\n                  type: 'form-group',\n                  title: translate('learning_priorities'),\n                  subtitle: translate('learning_priorities_description'),\n                  icon: {\n                    iconName: 'sign-post',\n                    iconColor: '#A32700',\n                    borderRadius: '12px',\n                    backgroundColor: '#FFDCD1'\n                  },\n                  tag: {\n                    label: `${size(learningPriorities.cards)}`,\n                    type: 'default',\n                    size: 'S'\n                  }\n                }}\n              />\n            }\n          />\n        </div>\n      )}\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          skillsScore={skillsScore}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        {learnerFeature ? (\n          <div data-name=\"skill-focus-container\" className={style.skillFocusContainer}>\n            <header className={style.skillFocusHeader}>\n              <div className={style.skillFocusHeaderWrapper}>\n                <div className={style.skillFocusHeaderIcon}>\n                  <Icon\n                    iconName=\"bullseye-arrow\"\n                    backgroundColor=\"#DDD1FF\"\n                    borderRadius=\"12px\"\n                    size={{faSize: 20, wrapperSize: 48}}\n                  />\n                </div>\n                <div className={style.skillFocusHeaderContent}>\n                  <div data-name=\"skill-focus-title\" className={style.skillFocusHeaderTitle}>\n                    {translate('skills_focus')}\n                  </div>\n                  <div\n                    data-name=\"skill-focus-description\"\n                    className={style.skillFocusHeaderDescription}\n                  >\n                    {translate('skills_focus_description')}\n                  </div>\n                </div>\n              </div>\n              {selectedSkillsList.length >= 3 ? (\n                <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n              ) : null}\n            </header>\n            {selectedSkillsList.length >= 3 ? (\n              <div className={style.skillFocusContent}>\n                <div className={style.radarContainer}>\n                  <ResponsiveLearningProfileRadarChart\n                    totalDataset={1}\n                    height={424}\n                    width={680}\n                    data={graphDatas}\n                    legend={graphLegends}\n                    onClick={handleOnDotClick}\n                    onExploreClick={onExploreSkill}\n                    colors={[\n                      {\n                        gradient: {\n                          fill: ['#0062ffff', '#8000ff85'],\n                          stroke: ['#0062ffff', '#8000FF']\n                        },\n                        percentage: {\n                          color: primarySkinColor,\n                          background: convert(`color(${primarySkinColor} a(0.07))`)\n                        },\n                        label: {\n                          color: '#020202ff'\n                        }\n                      }\n                    ]}\n                  />\n                </div>\n                <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n              </div>\n            ) : (\n              <div className={style.skillFocusEmpty}>\n                <Picture\n                  className={style.img}\n                  src=\"https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg\"\n                  alt=\"demo\"\n                />\n                <div className={style.skillFocusEmptyTitle}>\n                  {translate('skills_focus_empty_title')}\n                </div>\n                <div className={style.skillFocusEmptyDescription}>\n                  {translate('skills_focus_empty_description')}\n                </div>\n                <div>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: primarySkinColor\n                    }}\n                    hoverBackgroundColor={convert(\n                      `hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`\n                    )}\n                    onClick={handleOpenSkillPicker}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ) : null}\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills_section_title')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('skills_section_description')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={ReviewTooltipContent}\n                closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.toolBarContainer}>\n          <div className={style.skillFilterContainer}>\n            {keys(filters).map((filter, index) => {\n              function handleFilterClick() {\n                setActiveFilter(filter);\n              }\n\n              return (\n                <div key={index}>\n                  <FilterButton\n                    active={activeFilter === filter}\n                    filter={\n                      filter === 'all' ? translate('all') : translate('review_mode_available')\n                    }\n                    skillTotal={filters[filter].length}\n                    onClick={handleFilterClick}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <div className={style.searchWrapper}>\n            <SearchForm\n              search={{\n                placeholder: translate('search_place_holder'),\n                value: searchValue,\n                onChange: handleSearch\n              }}\n              onReset={handleSearchReset}\n            />\n          </div>\n        </div>\n        {searchValue && searchResults.length === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.skillListContainer}>\n            {activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? (\n              <div className={style.skillListEmptyContainer}>\n                <ReviewNoSkills\n                  titleNoSkills={translate('review_skill_empty')}\n                  textNoSkills={translate('review_skill_empty_description')}\n                  iconSkillAriaLabel={translate('review_skill_empty')}\n                  imagePosition=\"top\"\n                />\n              </div>\n            ) : (\n              filters[activeFilter].map((skill, index) => {\n                const defaultStats = {\n                  score: 0,\n                  content: 0,\n                  contentCompleted: 0,\n                  questionsToReview: 0\n                };\n\n                function handleReviewSkill() {\n                  onReviewSkill(skill);\n                }\n                function handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview} = skillsInformation[skill]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score: score.toFixed(1),\n                        content,\n                        questionsToReview\n                      }}\n                      review={\n                        skillsInformation[skill]\n                          ? skillsInformation[skill].availableForReview\n                          : false\n                      }\n                      onReviewClick={handleReviewSkill}\n                      onExploreClick={handleExploreSkill}\n                    />\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsInformation: PropTypes.objectOf(\n    PropTypes.shape({\n      availableForReview: PropTypes.bool,\n      stats: PropTypes.shape({\n        score: PropTypes.number,\n        content: PropTypes.number,\n        contentCompleted: PropTypes.number,\n        questionsToReview: PropTypes.number,\n        learningTime: PropTypes.number\n      })\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  learnerFeature: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default MyLearning;\n"],"mappings":"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"}

package/es/template/playlist-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAkBA,uEAyEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAgBA,uEAqFC"}

package/es/template/playlist-detail/index.js

@@ -1,5 +1,5 @@
 import _isNil from "lodash/fp/isNil";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Markdown from 'markdown-to-jsx';
@@ -13,7 +13,6 @@ import AllCourses from '../skill-detail/all-courses';
 import PlaylistDetailCover from '../../molecule/playlist-detail-cover';
 import { ContinueLearningButton } from '../skill-detail';
 import style from './style.css';
-const DESCRIPTION_BREAKPOINT = 382;
 
 const PlaylistDetail = (props, context) => {
   const {
@@ -28,13 +27,25 @@ const PlaylistDetail = (props, context) => {
     onBackClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = useRef(null);
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -46,7 +57,7 @@ const PlaylistDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -60,7 +71,7 @@ const PlaylistDetail = (props, context) => {
     label: translate('playlist')
   }), /*#__PURE__*/React.createElement("div", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/React.createElement("div", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/React.createElement(Icon, {

package/es/template/playlist-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","descriptionRef","translate","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/es/template/playlist-detail/style.css

@@ -41,7 +41,6 @@
 
 .ctaContainer {
   display: flex;
-  align-items: center;
   width: 100%;
   gap: 40px;
 }

package/es/template/skill-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAwIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAoJC"}

package/es/template/skill-detail/index.js

@@ -1,6 +1,6 @@
 import _isNil from "lodash/fp/isNil";
 import _get from "lodash/fp/get";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
 import classnames from 'classnames';
@@ -72,6 +72,7 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = useRef(null);
   const {
     score = 0,
     questionsToReview
@@ -79,10 +80,21 @@ const SkillDetail = (props, context) => {
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -110,7 +122,7 @@ const SkillDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -127,7 +139,7 @@ const SkillDetail = (props, context) => {
     }
   }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/React.createElement("div", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {

package/es/template/skill-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","descriptionRef","score","questionsToReview","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/es/variables/colors.d.ts

@@ -2,6 +2,7 @@ export declare const COLORS: {
     readonly gray: "#EAEAEB";
     readonly negative: "#ed3436";
     readonly positive: "#35CC7F";
+    readonly white: "#ffffff";
     readonly cm_grey_800: "#171721";
     readonly cm_primary_blue: "#0061FF";
 };

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -2,6 +2,7 @@ export const COLORS = {
   gray: '#EAEAEB',
   negative: '#ed3436',
   positive: '#35CC7F',
+  white: '#ffffff',
   cm_grey_800: '#171721',
   cm_primary_blue: '#0061FF'
 };

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,WAAW,EAAE,SAJO;EAKpBC,eAAe,EAAE;AALG,CAAf"}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","white","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,KAAK,EAAE,SAJa;EAKpBC,WAAW,EAAE,SALO;EAMpBC,eAAe,EAAE;AANG,CAAf"}

package/lib/atom/select-icon/index.d.ts

@@ -0,0 +1,17 @@
+export default SelectIcon;
+declare function SelectIcon(props: any): JSX.Element;
+declare namespace SelectIcon {
+    const propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        faIcon: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            selectionMode: PropTypes.Requireable<string>;
+            isSelected: PropTypes.Requireable<boolean>;
+            iconColor: PropTypes.Requireable<string>;
+        }>>;
+    };
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/select-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";AAgDA,qDA0BC"}

package/lib/atom/select-icon/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _colors = require("../../variables/colors");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ICON_COLOR = _colors.COLORS.cm_primary_blue;
+const BACKGROUND_COLOR = _colors.COLORS.white;
+const CHECK_ICON_NAME_MAP = {
+  single: 'circle-check',
+  multi: 'square-check'
+};
+
+const getButtonContent = (faIcon, options = {}) => {
+  const {
+    selectionMode = 'single',
+    isSelected = false,
+    iconColor = ICON_COLOR
+  } = options;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.contentWrapper
+  }, isSelected ?
+  /*#__PURE__*/
+
+  /* checkbox icon */
+  _react.default.createElement("div", {
+    className: _style.default.checkIcon
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: CHECK_ICON_NAME_MAP[selectionMode],
+    iconColor: iconColor,
+    backgroundColor: BACKGROUND_COLOR,
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  })) : null,
+  /*#__PURE__*/
+
+  /* selection tick (L18) / icon */
+  _react.default.createElement("div", {
+    className: _style.default.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.icon
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: faIcon,
+    iconColor: isSelected ? iconColor : '',
+    size: {
+      faSize: 32,
+      wrapperSize: 32
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconText
+  }, faIcon)));
+};
+
+const SelectIcon = props => {
+  const {
+    faIcon,
+    'data-name': dataName,
+    'aria-label': ariaLabel,
+    onClick,
+    options = {}
+  } = props;
+  const {
+    isSelected = false
+  } = options;
+  const contentView = getButtonContent(faIcon, options);
+  const styleButton = (0, _classnames.default)(_style.default.default, isSelected && _style.default.selected);
+  const handleOnClick = (0, _react.useCallback)(() => onClick(), [onClick]);
+  const IconButton = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    "data-name": dataName,
+    "data-testid": `button-${dataName}`,
+    className: styleButton,
+    onClick: handleOnClick
+  }, contentView), [ariaLabel, contentView, dataName, handleOnClick, styleButton]);
+  return /*#__PURE__*/_react.default.createElement(IconButton, null);
+};
+
+SelectIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': _propTypes.default.string,
+  'data-name': _propTypes.default.string,
+  faIcon: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  options: _propTypes.default.shape({
+    selectionMode: _propTypes.default.oneOf(['single', 'multi']),
+    isSelected: _propTypes.default.bool,
+    iconColor: _propTypes.default.string
+  })
+} : {};
+var _default = SelectIcon;
+exports.default = _default;
+//# sourceMappingURL=index.js.map