@coorpacademy/components 10.22.2 → 10.22.5

package/es/molecule/feedback/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/feedback/index.js"],"names":["React","PropTypes","classnames","ResourcePlayer","TYPE_IMAGE","TYPE_VIDEO","TYPE_PDF","TYPE_AUDIO","style","Feedback","props","context","media","mediaDescription","title","description","resource","type","feedback","innerHTML","__html","descWrapper","resourcePlayer","propTypes","string","shape","oneOf","src","array"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,cAAP,IAAwBC,UAAxB,EAAoCC,UAApC,EAAgDC,QAAhD,EAA0DC,UAA1D,QAA2E,oBAA3E;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,gBAAR;AAA0BC,IAAAA,KAA1B;AAAiCC,IAAAA;AAAjC,MAAgDL,KAAtD;;AACA,QAAMM,QAAQ,GAAGJ,KAAK,IACpBA,KAAK,CAACK,IADS,0BAEVL,KAFU,GAGV,MAAK,KAAI,OAAJ,CAAL,EAAmB,QAAO;AAACG,IAAAA,WAAW,EAAEF;AAAd,GAAP,CAAnB,EAA4DD,KAA5D,CAHU,CAAjB;;AAMA,SACE,CAACI,QAAQ,IAAIF,KAAZ,IAAqBC,WAArB,gBACC;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACU,QAAtB;AAAgC,iBAAU;AAA1C,kBACE;AACE,IAAA,SAAS,EAAEhB,UAAU,CAACM,KAAK,CAACM,KAAP,EAAcN,KAAK,CAACW,SAApB,CADvB;AAEE,iBAAU,OAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEN;AAAT;AAJ3B,IADF,eAOE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACa;AAAtB,kBACE;AACE,IAAA,SAAS,EAAEnB,UAAU,CAACM,KAAK,CAACO,WAAP,EAAoBP,KAAK,CAACW,SAA1B,CADvB;AAEE,iBAAU,aAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEL;AAAT;AAJ3B,IADF,EAOGC,QAAQ,gBACP,8CACE,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAER,KAAK,CAACc,cAAjC;AAAiD,IAAA,QAAQ,EAAEN;AAA3D,IADF,eAEE;AACE,iBAAU,kBADZ;AAEE,IAAA,SAAS,EAAEd,UAAU,CAACM,KAAK,CAACK,gBAAP,EAAyBL,KAAK,CAACW,SAA/B,CAFvB,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEP;AAAT;AAJ3B,IAFF,CADO,GAUL,IAjBN,CAPF,CADD,GA4BG,IA5BJ,KA4Ba,EA7Bf;AA+BD,CAvCD;;AAyCAJ,QAAQ,CAACc,SAAT,2CAAqB;AACnBT,EAAAA,KAAK,EAAEb,SAAS,CAACuB,MADE;AAEnBT,EAAAA,WAAW,EAAEd,SAAS,CAACuB,MAFJ;AAGnBZ,EAAAA,KAAK,EAAEX,SAAS,CAACwB,KAAV,CAAgB;AACrBR,IAAAA,IAAI,EAAEhB,SAAS,CAACyB,KAAV,CAAgB,CAACtB,UAAD,EAAaE,QAAb,EAAuBD,UAAvB,EAAmCE,UAAnC,CAAhB,CADe;AAErBoB,IAAAA,GAAG,EAAE1B,SAAS,CAAC2B;AAFM,GAAhB,CAHY;AAOnBf,EAAAA,gBAAgB,EAAEZ,SAAS,CAACuB;AAPT,CAArB;AAUA,eAAef,QAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, get, extend} from 'lodash/fp';\nimport classnames from 'classnames';\nimport ResourcePlayer, {TYPE_IMAGE, TYPE_VIDEO, TYPE_PDF, TYPE_AUDIO} from '../resource-player';\nimport style from './style.css';\n\nconst Feedback = (props, context) => {\n  const {media, mediaDescription, title, description} = props;\n  const resource = media &&\n    media.type && {\n      ...media,\n      ...pipe(get('src.0'), extend({description: mediaDescription}))(media)\n    };\n\n  return (\n    (resource || title || description ? (\n      <div className={style.feedback} data-name=\"feedback\">\n        <div\n          className={classnames(style.title, style.innerHTML)}\n          data-name=\"title\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n        <div className={style.descWrapper}>\n          <div\n            className={classnames(style.description, style.innerHTML)}\n            data-name=\"description\"\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: description}}\n          />\n          {resource ? (\n            <div>\n              <ResourcePlayer className={style.resourcePlayer} resource={resource} />\n              <div\n                data-name=\"mediaDescription\"\n                className={classnames(style.mediaDescription, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: mediaDescription}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    ) : null) || ''\n  );\n};\n\nFeedback.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  media: PropTypes.shape({\n    type: PropTypes.oneOf([TYPE_IMAGE, TYPE_PDF, TYPE_VIDEO, TYPE_AUDIO]),\n    src: PropTypes.array\n  }),\n  mediaDescription: PropTypes.string\n};\n\nexport default Feedback;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/feedback/index.js"],"names":["React","PropTypes","classnames","ResourcePlayer","TYPE_IMAGE","TYPE_VIDEO","TYPE_PDF","TYPE_AUDIO","style","Feedback","props","context","media","mediaDescription","title","description","mode","resource","type","feedbackContainerScorm","feedback","innerHTML","__html","descWrapper","resourcePlayer","propTypes","string","shape","oneOf","src","array"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,cAAP,IAAwBC,UAAxB,EAAoCC,UAApC,EAAgDC,QAAhD,EAA0DC,UAA1D,QAA2E,oBAA3E;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,gBAAR;AAA0BC,IAAAA,KAA1B;AAAiCC,IAAAA,WAAjC;AAA8CC,IAAAA,IAAI,GAAG;AAArD,MAAkEN,KAAxE;;AACA,QAAMO,QAAQ,GAAGL,KAAK,IACpBA,KAAK,CAACM,IADS,0BAEVN,KAFU,GAGV,MAAK,KAAI,OAAJ,CAAL,EAAmB,QAAO;AAACG,IAAAA,WAAW,EAAEF;AAAd,GAAP,CAAnB,EAA4DD,KAA5D,CAHU,CAAjB;;AAMA,SACE,CAACK,QAAQ,IAAIH,KAAZ,IAAqBC,WAArB,gBACC;AAAK,IAAA,SAAS,EAAEC,IAAI,KAAK,OAAT,GAAmBR,KAAK,CAACW,sBAAzB,GAAkD;AAAlE,kBACE;AAAK,IAAA,SAAS,EAAEX,KAAK,CAACY,QAAtB;AAAgC,iBAAU,UAA1C;AAAqD,IAAA,EAAE,EAAC;AAAxD,kBACE;AACE,IAAA,SAAS,EAAElB,UAAU,CAACM,KAAK,CAACM,KAAP,EAAcN,KAAK,CAACa,SAApB,CADvB;AAEE,iBAAU,OAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAER;AAAT;AAJ3B,IADF,eAOE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACe;AAAtB,kBACE;AACE,IAAA,SAAS,EAAErB,UAAU,CAACM,KAAK,CAACO,WAAP,EAAoBP,KAAK,CAACa,SAA1B,CADvB;AAEE,iBAAU,aAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEP;AAAT;AAJ3B,IADF,EAOGE,QAAQ,gBACP,8CACE,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAET,KAAK,CAACgB,cAAjC;AAAiD,IAAA,QAAQ,EAAEP;AAA3D,IADF,eAEE;AACE,iBAAU,kBADZ;AAEE,IAAA,SAAS,EAAEf,UAAU,CAACM,KAAK,CAACK,gBAAP,EAAyBL,KAAK,CAACa,SAA/B,CAFvB,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAET;AAAT;AAJ3B,IAFF,CADO,GAUL,IAjBN,CAPF,CADF,CADD,GA8BG,IA9BJ,KA8Ba,EA/Bf;AAiCD,CAzCD;;AA2CAJ,QAAQ,CAACgB,SAAT,2CAAqB;AACnBX,EAAAA,KAAK,EAAEb,SAAS,CAACyB,MADE;AAEnBX,EAAAA,WAAW,EAAEd,SAAS,CAACyB,MAFJ;AAGnBd,EAAAA,KAAK,EAAEX,SAAS,CAAC0B,KAAV,CAAgB;AACrBT,IAAAA,IAAI,EAAEjB,SAAS,CAAC2B,KAAV,CAAgB,CAACxB,UAAD,EAAaE,QAAb,EAAuBD,UAAvB,EAAmCE,UAAnC,CAAhB,CADe;AAErBsB,IAAAA,GAAG,EAAE5B,SAAS,CAAC6B;AAFM,GAAhB,CAHY;AAOnBjB,EAAAA,gBAAgB,EAAEZ,SAAS,CAACyB;AAPT,CAArB;AAUA,eAAejB,QAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, get, extend} from 'lodash/fp';\nimport classnames from 'classnames';\nimport ResourcePlayer, {TYPE_IMAGE, TYPE_VIDEO, TYPE_PDF, TYPE_AUDIO} from '../resource-player';\nimport style from './style.css';\n\nconst Feedback = (props, context) => {\n  const {media, mediaDescription, title, description, mode = 'default'} = props;\n  const resource = media &&\n    media.type && {\n      ...media,\n      ...pipe(get('src.0'), extend({description: mediaDescription}))(media)\n    };\n\n  return (\n    (resource || title || description ? (\n      <div className={mode === 'scorm' ? style.feedbackContainerScorm : null}>\n        <div className={style.feedback} data-name=\"feedback\" id=\"feedback\">\n          <div\n            className={classnames(style.title, style.innerHTML)}\n            data-name=\"title\"\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n          <div className={style.descWrapper}>\n            <div\n              className={classnames(style.description, style.innerHTML)}\n              data-name=\"description\"\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n            {resource ? (\n              <div>\n                <ResourcePlayer className={style.resourcePlayer} resource={resource} />\n                <div\n                  data-name=\"mediaDescription\"\n                  className={classnames(style.mediaDescription, style.innerHTML)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: mediaDescription}}\n                />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    ) : null) || ''\n  );\n};\n\nFeedback.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  media: PropTypes.shape({\n    type: PropTypes.oneOf([TYPE_IMAGE, TYPE_PDF, TYPE_VIDEO, TYPE_AUDIO]),\n    src: PropTypes.array\n  }),\n  mediaDescription: PropTypes.string\n};\n\nexport default Feedback;\n"],"file":"index.js"}

package/es/molecule/feedback/style.css

@@ -9,6 +9,8 @@
 @value medium from colors;
 @value xtraLightGrey from colors;
 @value white from colors;
+@value cm_grey_75 from colors;
+
 
 .feedback {
   width: 100%;
@@ -19,6 +21,24 @@
   flex-direction: column;
 }
 
+.feedbackContainerScorm {
+  background-color: white;
+  max-width: 884px;
+  height: 386px;
+  padding-bottom: 10px;
+  overflow-x: auto;
+  border: 1px solid cm_grey_75;
+  border-top: 0px;
+  z-index: 2;
+  margin-top: 60px;
+  position: relative;
+}
+
+.feedbackContainerScorm > .feedback {
+  border-bottom: 0px;
+  height: 100%;
+}
+
 .title {
   width: 100%;
   margin-bottom: 20px;
@@ -90,6 +110,10 @@
     width: 100%;
     margin-bottom: 8px;
   }
+  .feedbackContainerScorm {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .innerHTML {

package/es/molecule/questions/free-text/index.native.js

@@ -1,5 +1,5 @@
 import { View, StyleSheet, TextInput } from 'react-native';
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useTemplateContext } from '../../../template/app-review/template-context';
 import { ANALYTICS_EVENT_TYPE } from '../../../variables/analytics';
 
@@ -39,23 +39,23 @@ const FreeText = props => {
   const [styleSheet, setStylesheet] = useState(null);
   const {
     brandTheme,
-    theme
+    theme,
+    translations
   } = templateContext;
   const PLACEHOLDER_COLOR = theme.colors.gray.medium; // ------------------------------------
 
   const {
     analytics,
     questionType,
-    fullWitdh,
+    fullWitdh = false,
     testID,
     onChange,
     isDisabled,
-    value,
-    placeholder
+    value
   } = props; // ------------------------------------
 
-  const handleFocus = useMemo(() => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType), [analytics, questionType]);
-  const handleBlur = useMemo(() => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType), [analytics, questionType]); // ------------------------------------
+  const handleFocus = useCallback(() => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType), [analytics, questionType]);
+  const handleBlur = useCallback(() => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType), [analytics, questionType]); // ------------------------------------
 
   useEffect(() => {
     const _stylesheet = createStyleSheet(brandTheme, theme);
@@ -68,14 +68,13 @@ const FreeText = props => {
   }
 
   return /*#__PURE__*/React.createElement(View, {
-    style: [styleSheet.spaced, fullWitdh && styleSheet.fullWitdh],
-    testID: testID
+    style: [styleSheet.spaced, fullWitdh && styleSheet.fullWitdh]
   }, /*#__PURE__*/React.createElement(TextInput, {
     style: [styleSheet.input, styleSheet.text],
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChangeText: onChange,
-    placeholder: placeholder,
+    placeholder: translations.typeHere,
     placeholderTextColor: PLACEHOLDER_COLOR,
     value: value,
     testID: testID,

package/es/molecule/questions/free-text/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":["View","StyleSheet","TextInput","React","useState","useEffect","useMemo","useTemplateContext","ANALYTICS_EVENT_TYPE","createStyleSheet","brandTheme","theme","create","input","padding","spacing","tiny","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","text","primary","color","medium","fontWeight","bold","fontSize","regular","textAlign","spaced","paddingVertical","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","PLACEHOLDER_COLOR","testID","onChange","isDisabled","value","placeholder","handleFocus","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet"],"mappings":"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","sourcesContent":["import {View, StyleSheet, TextInput} from 'react-native';\nimport React, {useState, useEffect, useMemo} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n  children: string;\n  fullWitdh: boolean;\n  testID: string;\n  questionType: QuestionType;\n  analytics?: Analytics;\n  onChange: Function;\n  isDisabled: boolean;\n  value: string;\n  placeholder: string;\n}\n\ntype StyleSheetType = {\n  input: {\n    padding: string;\n    borderWidth: number;\n    borderColor: string;\n    borderRadius: number;\n    backgroundColor: string;\n    minWidth: number;\n  };\n  text: {\n    color: string;\n    fontWeight: number;\n    fontSize: number;\n    textAlign: string;\n  };\n  spaced: {\n    paddingVertical: number;\n  };\n  fullWitdh: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (brandTheme, theme) =>\n  StyleSheet.create({\n    input: {\n      padding: theme.spacing.tiny,\n      borderWidth: 1,\n      borderColor: theme.colors.gray.lightMedium,\n      borderRadius: theme.radius.common,\n      backgroundColor: theme.colors.white,\n      minWidth: 175\n    },\n    text: {\n      borderColor: brandTheme?.colors.primary,\n      color: brandTheme?.colors.primary || theme.colors.gray.medium,\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.regular,\n      textAlign: 'center'\n    },\n    spaced: {\n      paddingVertical: theme.spacing.tiny\n    },\n    fullWitdh: {\n      width: '100%'\n    }\n  });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: `question-input-text`,\n      questionType\n    });\n};\n\nconst FreeText = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n  const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n  // ------------------------------------\n\n  const {\n    analytics,\n    questionType,\n    fullWitdh,\n    testID,\n    onChange,\n    isDisabled,\n    value,\n    placeholder\n  } = props;\n\n  // ------------------------------------\n\n  const handleFocus = useMemo(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  const handleBlur = useMemo(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  // ------------------------------------\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={[styleSheet.spaced, fullWitdh && styleSheet.fullWitdh]} testID={testID}>\n      <TextInput\n        style={[styleSheet.input, styleSheet.text]}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChangeText={onChange}\n        placeholder={placeholder}\n        placeholderTextColor={PLACEHOLDER_COLOR}\n        value={value}\n        testID={testID}\n        editable={!isDisabled}\n        selectTextOnFocus={!isDisabled}\n      />\n    </View>\n  );\n};\n\nexport default FreeText;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":["View","StyleSheet","TextInput","React","useState","useEffect","useCallback","useTemplateContext","ANALYTICS_EVENT_TYPE","createStyleSheet","brandTheme","theme","create","input","padding","spacing","tiny","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","text","primary","color","medium","fontWeight","bold","fontSize","regular","textAlign","spaced","paddingVertical","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","translations","PLACEHOLDER_COLOR","testID","onChange","isDisabled","value","handleFocus","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet","typeHere"],"mappings":"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","sourcesContent":["import {View, StyleSheet, TextInput} from 'react-native';\nimport React, {useState, useEffect, useCallback} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n  fullWitdh?: boolean;\n  testID: string;\n  questionType: QuestionType;\n  analytics?: Analytics;\n  onChange: (text: string) => void;\n  isDisabled: boolean;\n  value: string;\n}\n\ntype StyleSheetType = {\n  input: {\n    padding: string;\n    borderWidth: number;\n    borderColor: string;\n    borderRadius: number;\n    backgroundColor: string;\n    minWidth: number;\n  };\n  text: {\n    color: string;\n    fontWeight:\n      | 'normal'\n      | 'bold'\n      | '100'\n      | '200'\n      | '300'\n      | '400'\n      | '500'\n      | '600'\n      | '700'\n      | '800'\n      | '900'\n      | undefined;\n    fontSize: number;\n    textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;\n  };\n  spaced: {\n    paddingVertical: number;\n  };\n  fullWitdh: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (brandTheme, theme) =>\n  StyleSheet.create({\n    input: {\n      padding: theme.spacing.tiny,\n      borderWidth: 1,\n      borderColor: theme.colors.gray.lightMedium,\n      borderRadius: theme.radius.common,\n      backgroundColor: theme.colors.white,\n      minWidth: 175\n    },\n    text: {\n      borderColor: brandTheme?.colors.primary,\n      color: brandTheme?.colors.primary || theme.colors.gray.medium,\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.regular,\n      textAlign: 'center'\n    },\n    spaced: {\n      paddingVertical: theme.spacing.tiny\n    },\n    fullWitdh: {\n      width: '100%'\n    }\n  });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: `question-input-text`,\n      questionType\n    });\n};\n\nconst FreeText = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n  // ------------------------------------\n\n  const {analytics, questionType, fullWitdh = false, testID, onChange, isDisabled, value} = props;\n\n  // ------------------------------------\n\n  const handleFocus = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  const handleBlur = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  // ------------------------------------\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={[styleSheet.spaced, fullWitdh && styleSheet.fullWitdh]}>\n      <TextInput\n        style={[styleSheet.input, styleSheet.text]}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChangeText={onChange}\n        placeholder={translations.typeHere}\n        placeholderTextColor={PLACEHOLDER_COLOR}\n        value={value}\n        testID={testID}\n        editable={!isDisabled}\n        selectTextOnFocus={!isDisabled}\n      />\n    </View>\n  );\n};\n\nexport default FreeText;\n"],"file":"index.native.js"}

package/es/molecule/questions/mobile/template/index.native.js

@@ -0,0 +1,222 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import trim from 'lodash/fp/trim';
+import last from 'lodash/fp/last';
+import Html from '../../../../atom/html/index.native';
+import Select from '../../../../atom/select-modal/index.native';
+import Space from '../../../../atom/space/index.native';
+import FreeText from '../../free-text/index.native';
+import { useTemplateContext } from '../../../../template/app-review/template-context';
+import parseTemplateString from '../../../../util/parse-template-string';
+
+const createStyleSheet = theme => ({
+  section: {
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  spaced: {
+    paddingVertical: theme.spacing.tiny
+  },
+  input: {
+    padding: theme.spacing.tiny,
+    borderWidth: 1,
+    borderColor: theme.colors.gray.lightMedium,
+    borderRadius: theme.radius.common,
+    backgroundColor: theme.colors.white,
+    minWidth: 175
+  },
+  htmlText: {
+    padding: theme.spacing.tiny,
+    color: theme.colors.black,
+    fontWeight: theme.fontWeight.bold,
+    lineHeight: 30
+  },
+  text: {
+    color: theme.colors.gray.medium,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize.regular,
+    textAlign: 'center'
+  }
+});
+
+const Section = ({
+  section,
+  items,
+  index,
+  focusedSelectId,
+  onInputChange,
+  userChoices,
+  handleBlur,
+  handleFocus,
+  isDisabled,
+  styles
+}) => {
+  const prefix = `question-section-${index + 1}`;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.section,
+    key: `container-${prefix}`
+  }, section.map((part, id) => {
+    return /*#__PURE__*/React.createElement(View, {
+      key: `${prefix}-${id}`,
+      style: {
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(Item, {
+      prefix: prefix,
+      part: part,
+      items: items,
+      index: id,
+      focusedSelectId: focusedSelectId,
+      isDisabled: isDisabled,
+      userChoices: userChoices,
+      handleBlur: handleBlur,
+      handleFocus: handleFocus,
+      onInputChange: onInputChange,
+      styles: styles
+    }), /*#__PURE__*/React.createElement(Space, {
+      type: "micro"
+    }));
+  }));
+};
+
+const Item = props => {
+  const {
+    part,
+    index,
+    prefix,
+    isDisabled = false,
+    focusedSelectId,
+    items,
+    userChoices,
+    onInputChange,
+    handleBlur,
+    handleFocus,
+    styles
+  } = props;
+  const templateContext = useTemplateContext();
+  const {
+    theme,
+    brandTheme,
+    translations
+  } = templateContext;
+  const inputNames = items.map(item => item.name);
+  const id = `${prefix}-part-${index + 1}`;
+  const isFocused = focusedSelectId === id;
+  const selectedStyle = brandTheme && {
+    borderColor: brandTheme.colors.primary,
+    color: brandTheme.colors.primary
+  };
+
+  if (part.type === 'answerField' && inputNames.includes(part.value)) {
+    const itemIndex = items.findIndex(_item => _item.name === part.value);
+    const item = items[itemIndex];
+    const value = userChoices[itemIndex];
+
+    if (!item || !item.type || !item.name) {
+      return null;
+    }
+
+    const disabledSuffix = isDisabled ? '-disabled' : '';
+    const selectedSuffix = value ? '-selected' : '';
+
+    const handleInputChange = _item => _value => onInputChange(_item, _value);
+
+    if (item.type === 'text') {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.spaced,
+        testID: id
+      }, /*#__PURE__*/React.createElement(FreeText, {
+        key: id,
+        isDisabled: isDisabled,
+        onChange: handleInputChange(item),
+        value: value,
+        testID: `${id}-text${selectedSuffix}${disabledSuffix}`,
+        questionType: "template"
+      }));
+    }
+
+    if (item.type === 'select') {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.spaced,
+        testID: id
+      }, /*#__PURE__*/React.createElement(Select, {
+        isDisabled: isDisabled,
+        questionType: "template",
+        values: item.items,
+        value: value,
+        placeholder: translations.selectAnAnswer,
+        isFocused: isFocused,
+        onBlur: handleBlur,
+        onFocus: handleFocus(id),
+        onChange: handleInputChange(item),
+        textStyle: styles.text,
+        style: [styles.input, value && selectedStyle],
+        testID: `${id}-select${selectedSuffix}${disabledSuffix}`
+      }));
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Html, {
+    key: id,
+    fontSize: theme.fontSize.regular,
+    testID: id,
+    style: styles.htmlText
+  }, trim(part.value || ''));
+};
+
+const QuestionTemplate = props => {
+  const {
+    template,
+    onInputChange,
+    userChoices,
+    items,
+    handleBlur,
+    handleFocus,
+    focusedSelectId,
+    isDisabled = false
+  } = props;
+  const templateContext = useTemplateContext();
+  const {
+    theme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = useState(null);
+  useEffect(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!template || !styleSheet) {
+    return null;
+  }
+
+  const parts = parseTemplateString(template);
+  const sections = parts.reduce((result, item) => {
+    const section = last(result) || [];
+    return result.slice(0, -1).concat([section.concat([item])]);
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    },
+    testID: "question-template"
+  }, sections.map((section, index) => /*#__PURE__*/React.createElement(Section, {
+    key: index,
+    section: section,
+    items: items,
+    index: index,
+    handleBlur: handleBlur,
+    handleFocus: handleFocus,
+    focusedSelectId: focusedSelectId,
+    onInputChange: onInputChange,
+    userChoices: userChoices,
+    isDisabled: isDisabled,
+    styles: styleSheet
+  })));
+};
+
+export default QuestionTemplate;
+//# sourceMappingURL=index.native.js.map

package/es/molecule/questions/mobile/template/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":["React","useEffect","useState","View","trim","last","Html","Select","Space","FreeText","useTemplateContext","parseTemplateString","createStyleSheet","theme","section","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","input","padding","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","htmlText","color","black","fontWeight","bold","lineHeight","text","medium","fontSize","regular","textAlign","Section","items","index","focusedSelectId","onInputChange","userChoices","handleBlur","handleFocus","isDisabled","styles","prefix","map","part","id","Item","props","templateContext","brandTheme","translations","inputNames","item","name","isFocused","selectedStyle","primary","type","includes","value","itemIndex","findIndex","_item","disabledSuffix","selectedSuffix","handleInputChange","_value","selectAnAnswer","QuestionTemplate","template","styleSheet","setStylesheet","_stylesheet","parts","sections","reduce","result","slice","concat","flex"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\nimport last from 'lodash/fp/last';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport {FocusedSelectId, HandleBlur, HandleFocus} from '../../../../types/app-review.d';\nimport type {Choice} from '../../../../types/progression-engine.d';\nimport FreeText from '../../free-text/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\n\nconst createStyleSheet = (theme: Theme) => ({\n  section: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  input: {\n    padding: theme.spacing.tiny,\n    borderWidth: 1,\n    borderColor: theme.colors.gray.lightMedium,\n    borderRadius: theme.radius.common,\n    backgroundColor: theme.colors.white,\n    minWidth: 175\n  },\n  htmlText: {\n    padding: theme.spacing.tiny,\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 30\n  },\n  text: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype SectionProps = {\n  isDisabled: boolean;\n  userChoices: Array<string>;\n  section: Array<TemplatePart>;\n  items: Array<Choice>;\n  index: number;\n  onInputChange: (item: Choice, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: any;\n};\n\nconst Section = ({\n  section,\n  items,\n  index,\n  focusedSelectId,\n  onInputChange,\n  userChoices,\n  handleBlur,\n  handleFocus,\n  isDisabled,\n  styles\n}: SectionProps) => {\n  const prefix = `question-section-${index + 1}`;\n\n  return (\n    <View style={styles.section} key={`container-${prefix}`}>\n      {section.map((part, id) => {\n        return (\n          <View key={`${prefix}-${id}`} style={{flexDirection: 'row'}}>\n            <Item\n              prefix={prefix}\n              part={part}\n              items={items}\n              index={id}\n              focusedSelectId={focusedSelectId}\n              isDisabled={isDisabled}\n              userChoices={userChoices}\n              handleBlur={handleBlur}\n              handleFocus={handleFocus}\n              onInputChange={onInputChange}\n              styles={styles}\n            />\n            <Space type=\"micro\" />\n          </View>\n        );\n      })}\n    </View>\n  );\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  items: Array<Choice>;\n  index: number;\n  prefix: string;\n  isDisabled?: boolean;\n  userChoices: Array<string>;\n  onInputChange: (item: Choice, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: any;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    index,\n    prefix,\n    isDisabled = false,\n    focusedSelectId,\n    items,\n    userChoices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme, translations} = templateContext;\n\n  const inputNames = items.map(item => item.name);\n  const id = `${prefix}-part-${index + 1}`;\n  const isFocused = focusedSelectId === id;\n\n  const selectedStyle = brandTheme && {\n    borderColor: brandTheme.colors.primary,\n    color: brandTheme.colors.primary\n  };\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const itemIndex = items.findIndex(_item => _item.name === part.value);\n    const item = items[itemIndex];\n    const value = userChoices[itemIndex];\n\n    if (!item || !item.type || !item.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange = (_item: Choice) => (_value: string) => onInputChange(_item, _value);\n\n    if (item.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(item)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    if (item.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={item.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(item)}\n            textStyle={styles.text}\n            style={[styles.input, value && selectedStyle]}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  items: Array<Choice>;\n  userChoices: Array<string>;\n  onInputChange: (item: Choice, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    userChoices,\n    items,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts = parseTemplateString(template);\n\n  const sections: Array<Array<TemplatePart>> = parts.reduce((result, item) => {\n    const section = last(result) || [];\n    return result.slice(0, -1).concat([section.concat([item])]);\n  }, []);\n\n  return (\n    <View style={{flex: 1}} testID=\"question-template\">\n      {sections.map((section, index) => (\n        <Section\n          key={index}\n          section={section}\n          items={items}\n          index={index}\n          handleBlur={handleBlur}\n          handleFocus={handleFocus}\n          focusedSelectId={focusedSelectId}\n          onInputChange={onInputChange}\n          userChoices={userChoices}\n          isDisabled={isDisabled}\n          styles={styleSheet}\n        />\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"file":"index.native.js"}

package/es/template/app-player/player/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import CMPopin from '../../../molecule/cm-popin';
 import SlidesPlayer from './slides';
 import style from './style.css';
 
 const SlidePlayer = props => {
   const {
-    player
+    player,
+    popin
   } = props;
   const backgroundImage = player.backgroundUrl ? `url(${player.backgroundUrl})` : null;
   return /*#__PURE__*/React.createElement("div", {
@@ -18,11 +20,12 @@ const SlidePlayer = props => {
     style: {
       backgroundImage
     }
-  }), /*#__PURE__*/React.createElement(SlidesPlayer, player)));
+  }), /*#__PURE__*/React.createElement(SlidesPlayer, player), popin ? /*#__PURE__*/React.createElement(CMPopin, popin) : null));
 };
 
 SlidePlayer.propTypes = process.env.NODE_ENV !== "production" ? {
-  player: PropTypes.shape(SlidesPlayer.propTypes)
+  player: PropTypes.shape(SlidesPlayer.propTypes),
+  popin: PropTypes.shape(CMPopin.propTypes)
 } : {};
 export default SlidePlayer;
 //# sourceMappingURL=index.js.map

package/es/template/app-player/player/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-player/player/index.js"],"names":["React","PropTypes","SlidesPlayer","style","SlidePlayer","props","player","backgroundImage","backgroundUrl","wrapper","playerWrapper","playerBackground","propTypes","shape"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AAACC,IAAAA;AAAD,MAAWD,KAAjB;AACA,QAAME,eAAe,GAAGD,MAAM,CAACE,aAAP,GAAwB,OAAMF,MAAM,CAACE,aAAc,GAAnD,GAAwD,IAAhF;AACA,sBACE;AAAK,iBAAU,aAAf;AAA6B,IAAA,SAAS,EAAEL,KAAK,CAACM;AAA9C,kBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACO;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ,gBAAtB;AAAwC,IAAA,KAAK,EAAE;AAACJ,MAAAA;AAAD;AAA/C,IADF,eAEE,oBAAC,YAAD,EAAkBD,MAAlB,CAFF,CADF,CADF;AAQD,CAXD;;AAaAF,WAAW,CAACQ,SAAZ,2CAAwB;AACtBN,EAAAA,MAAM,EAAEL,SAAS,CAACY,KAAV,CAAgBX,YAAY,CAACU,SAA7B;AADc,CAAxB;AAIA,eAAeR,WAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport SlidesPlayer from './slides';\nimport style from './style.css';\n\nconst SlidePlayer = props => {\n  const {player} = props;\n  const backgroundImage = player.backgroundUrl ? `url(${player.backgroundUrl})` : null;\n  return (\n    <div data-name=\"slidePlayer\" className={style.wrapper}>\n      <div className={style.playerWrapper}>\n        <div className={style.playerBackground} style={{backgroundImage}} />\n        <SlidesPlayer {...player} />\n      </div>\n    </div>\n  );\n};\n\nSlidePlayer.propTypes = {\n  player: PropTypes.shape(SlidesPlayer.propTypes)\n};\n\nexport default SlidePlayer;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/template/app-player/player/index.js"],"names":["React","PropTypes","CMPopin","SlidesPlayer","style","SlidePlayer","props","player","popin","backgroundImage","backgroundUrl","wrapper","playerWrapper","playerBackground","propTypes","shape"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,4BAApB;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AAACC,IAAAA,MAAD;AAASC,IAAAA;AAAT,MAAkBF,KAAxB;AACA,QAAMG,eAAe,GAAGF,MAAM,CAACG,aAAP,GAAwB,OAAMH,MAAM,CAACG,aAAc,GAAnD,GAAwD,IAAhF;AACA,sBACE;AAAK,iBAAU,aAAf;AAA6B,IAAA,SAAS,EAAEN,KAAK,CAACO;AAA9C,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAER,KAAK,CAACS,gBAAtB;AAAwC,IAAA,KAAK,EAAE;AAACJ,MAAAA;AAAD;AAA/C,IADF,eAEE,oBAAC,YAAD,EAAkBF,MAAlB,CAFF,EAGGC,KAAK,gBAAG,oBAAC,OAAD,EAAaA,KAAb,CAAH,GAA4B,IAHpC,CADF,CADF;AASD,CAZD;;AAcAH,WAAW,CAACS,SAAZ,2CAAwB;AACtBP,EAAAA,MAAM,EAAEN,SAAS,CAACc,KAAV,CAAgBZ,YAAY,CAACW,SAA7B,CADc;AAEtBN,EAAAA,KAAK,EAAEP,SAAS,CAACc,KAAV,CAAgBb,OAAO,CAACY,SAAxB;AAFe,CAAxB;AAKA,eAAeT,WAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CMPopin from '../../../molecule/cm-popin';\nimport SlidesPlayer from './slides';\nimport style from './style.css';\n\nconst SlidePlayer = props => {\n  const {player, popin} = props;\n  const backgroundImage = player.backgroundUrl ? `url(${player.backgroundUrl})` : null;\n  return (\n    <div data-name=\"slidePlayer\" className={style.wrapper}>\n      <div className={style.playerWrapper}>\n        <div className={style.playerBackground} style={{backgroundImage}} />\n        <SlidesPlayer {...player} />\n        {popin ? <CMPopin {...popin} /> : null}\n      </div>\n    </div>\n  );\n};\n\nSlidePlayer.propTypes = {\n  player: PropTypes.shape(SlidesPlayer.propTypes),\n  popin: PropTypes.shape(CMPopin.propTypes)\n};\n\nexport default SlidePlayer;\n"],"file":"index.js"}

package/es/template/app-player/popin-end/index.js

@@ -1,29 +1,44 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Header from '../player/slides/header';
 import Summary from './summary';
 import style from './style.css';
 
-const Content = props => /*#__PURE__*/React.createElement("div", {
-  className: style.popinWrapper
-}, /*#__PURE__*/React.createElement(Summary, props));
+const Content = props => {
+  const {
+    mode = 'default'
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: mode !== 'scorm' ? style.popinWrapper : null
+  }, /*#__PURE__*/React.createElement(Summary, props));
+};
+
+Content.propTypes = process.env.NODE_ENV !== "production" ? {
+  mode: PropTypes.oneOf(['scorm', 'default'])
+} : {};
 
 const PopinEnd = props => {
   const {
     header,
-    summary
+    summary,
+    mode = 'default'
   } = props;
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "popinEnd",
     className: style.wrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: style.slidesHeader
-  }, /*#__PURE__*/React.createElement(Header, header)), /*#__PURE__*/React.createElement(Content, summary));
+  }, /*#__PURE__*/React.createElement(Header, header)), /*#__PURE__*/React.createElement(Content, _extends({}, summary, {
+    mode: mode
+  })));
 };
 
 PopinEnd.propTypes = process.env.NODE_ENV !== "production" ? {
   header: PropTypes.shape(Header.propTypes),
-  summary: PropTypes.shape(Summary.propTypes)
+  summary: PropTypes.shape(Summary.propTypes),
+  mode: PropTypes.oneOf(['scorm', 'default'])
 } : {};
 export default PopinEnd;
 //# sourceMappingURL=index.js.map

package/es/template/app-player/popin-end/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-player/popin-end/index.js"],"names":["React","PropTypes","Header","Summary","style","Content","props","popinWrapper","PopinEnd","header","summary","wrapper","slidesHeader","propTypes","shape"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,yBAAnB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAGC,KAAK,iBACnB;AAAK,EAAA,SAAS,EAAEF,KAAK,CAACG;AAAtB,gBACE,oBAAC,OAAD,EAAaD,KAAb,CADF,CADF;;AAMA,MAAME,QAAQ,GAAGF,KAAK,IAAI;AACxB,QAAM;AAACG,IAAAA,MAAD;AAASC,IAAAA;AAAT,MAAoBJ,KAA1B;AACA,sBACE;AAAK,iBAAU,UAAf;AAA0B,IAAA,SAAS,EAAEF,KAAK,CAACO;AAA3C,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ;AAAtB,kBACE,oBAAC,MAAD,EAAYH,MAAZ,CADF,CADF,eAIE,oBAAC,OAAD,EAAaC,OAAb,CAJF,CADF;AAQD,CAVD;;AAYAF,QAAQ,CAACK,SAAT,2CAAqB;AACnBJ,EAAAA,MAAM,EAAER,SAAS,CAACa,KAAV,CAAgBZ,MAAM,CAACW,SAAvB,CADW;AAEnBH,EAAAA,OAAO,EAAET,SAAS,CAACa,KAAV,CAAgBX,OAAO,CAACU,SAAxB;AAFU,CAArB;AAKA,eAAeL,QAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Header from '../player/slides/header';\nimport Summary from './summary';\nimport style from './style.css';\n\nconst Content = props => (\n  <div className={style.popinWrapper}>\n    <Summary {...props} />\n  </div>\n);\n\nconst PopinEnd = props => {\n  const {header, summary} = props;\n  return (\n    <div data-name=\"popinEnd\" className={style.wrapper}>\n      <div className={style.slidesHeader}>\n        <Header {...header} />\n      </div>\n      <Content {...summary} />\n    </div>\n  );\n};\n\nPopinEnd.propTypes = {\n  header: PropTypes.shape(Header.propTypes),\n  summary: PropTypes.shape(Summary.propTypes)\n};\n\nexport default PopinEnd;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/template/app-player/popin-end/index.js"],"names":["React","PropTypes","Header","Summary","style","Content","props","mode","popinWrapper","propTypes","oneOf","PopinEnd","header","summary","wrapper","slidesHeader","shape"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,yBAAnB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAGC,KAAK,IAAI;AACvB,QAAM;AAACC,IAAAA,IAAI,GAAG;AAAR,MAAqBD,KAA3B;AACA,sBACE;AAAK,IAAA,SAAS,EAAEC,IAAI,KAAK,OAAT,GAAmBH,KAAK,CAACI,YAAzB,GAAwC;AAAxD,kBACE,oBAAC,OAAD,EAAaF,KAAb,CADF,CADF;AAKD,CAPD;;AAQAD,OAAO,CAACI,SAAR,2CAAoB;AAClBF,EAAAA,IAAI,EAAEN,SAAS,CAACS,KAAV,CAAgB,CAAC,OAAD,EAAU,SAAV,CAAhB;AADY,CAApB;;AAIA,MAAMC,QAAQ,GAAGL,KAAK,IAAI;AACxB,QAAM;AAACM,IAAAA,MAAD;AAASC,IAAAA,OAAT;AAAkBN,IAAAA,IAAI,GAAG;AAAzB,MAAsCD,KAA5C;AACA,sBACE;AAAK,iBAAU,UAAf;AAA0B,IAAA,SAAS,EAAEF,KAAK,CAACU;AAA3C,kBACE;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW;AAAtB,kBACE,oBAAC,MAAD,EAAYH,MAAZ,CADF,CADF,eAIE,oBAAC,OAAD,eAAaC,OAAb;AAAsB,IAAA,IAAI,EAAEN;AAA5B,KAJF,CADF;AAQD,CAVD;;AAYAI,QAAQ,CAACF,SAAT,2CAAqB;AACnBG,EAAAA,MAAM,EAAEX,SAAS,CAACe,KAAV,CAAgBd,MAAM,CAACO,SAAvB,CADW;AAEnBI,EAAAA,OAAO,EAAEZ,SAAS,CAACe,KAAV,CAAgBb,OAAO,CAACM,SAAxB,CAFU;AAGnBF,EAAAA,IAAI,EAAEN,SAAS,CAACS,KAAV,CAAgB,CAAC,OAAD,EAAU,SAAV,CAAhB;AAHa,CAArB;AAMA,eAAeC,QAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Header from '../player/slides/header';\nimport Summary from './summary';\nimport style from './style.css';\n\nconst Content = props => {\n  const {mode = 'default'} = props;\n  return (\n    <div className={mode !== 'scorm' ? style.popinWrapper : null}>\n      <Summary {...props} />\n    </div>\n  );\n};\nContent.propTypes = {\n  mode: PropTypes.oneOf(['scorm', 'default'])\n};\n\nconst PopinEnd = props => {\n  const {header, summary, mode = 'default'} = props;\n  return (\n    <div data-name=\"popinEnd\" className={style.wrapper}>\n      <div className={style.slidesHeader}>\n        <Header {...header} />\n      </div>\n      <Content {...summary} mode={mode} />\n    </div>\n  );\n};\n\nPopinEnd.propTypes = {\n  header: PropTypes.shape(Header.propTypes),\n  summary: PropTypes.shape(Summary.propTypes),\n  mode: PropTypes.oneOf(['scorm', 'default'])\n};\n\nexport default PopinEnd;\n"],"file":"index.js"}

package/es/template/app-player/popin-end/style.css

@@ -27,4 +27,4 @@
   .slidesHeader {
     display: none;
   }
-}
+}

package/es/template/app-player/popin-end/summary.css

@@ -253,6 +253,60 @@
   margin: 0;
 }
 
+.circle {
+  border-radius: 50%;
+  border: 1px solid light;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.smallCircle {
+  height: calc(100vh + 136px);
+  width: calc(100vh + 136px);
+  composes: circle;
+}
+.mediumCircle {
+  height: calc(100vh + 386px);
+  width: calc(100vh + 386px);
+  composes: circle;
+}
+.largeCircle {
+  height: calc(100vh + 636px);
+  width: calc(100vh + 636px);
+  composes: circle;
+}
+.organismPlayerResultContainerScorm {
+  height: calc(100vh - 60px);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.lottie {
+  display: flex;
+  height: 135%;
+  width: 135%;
+  transform: translate(-13%, -13%);
+}
+.animationContainer {
+  height: calc(100vh - 60px);
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+}
+.ie11Backup {
+  position: relative;
+  transform: translate(0%, 10%);
+  height: 80%;
+  width: 80%;
+  margin: 0 auto;
+  z-index: 1;
+}
+
+
 @media mobile {
   .commentSection {
     flex-direction: column;
@@ -265,6 +319,17 @@
     width: 100%;
   }
 }
+@media tablet {
+  .organismPlayerResultContainerScorm {
+    height: 100%;
+  }
+  .largeCircle , .mediumCircle, .smallCircle {
+    border: 0px;
+    height: 100%;
+    width: 100%;
+    border-radius: 0;
+  }
+}
 
 .commentSectionLink {
   font-family: Gilroy;