@laerdal/life-react-components 1.5.1-dev.34.full → 1.5.1-dev.37

package/dist/Card/CardBottomSection.cjs

@@ -39,9 +39,9 @@ var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templa
 
 var Divider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), _.COLORS.neutral_100);
 
-var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
 
-var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
 
 var ButtonRowContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
 

package/dist/Card/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;AAwBA,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV,wGAAvB;;AAIA,IAAMC,cAAc,GAAGF,0BAAOC,GAAV,kNAGTE,SAAOC,WAHE,CAApB;;AASA,IAAMC,eAAe,GAAGL,0BAAOC,GAAV,2QAcjB,UAAAK,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,0BACAJ,SAAOK,WADP,0EAMP,EANG;AAAA,CAdY,CAArB;;AAuBA,IAAMC,OAAO,GAAGT,0BAAOC,GAAV,mLAESE,SAAOO,WAFhB,CAAb;;AAOA,IAAMC,QAAQ,GAAGX,0BAAOC,GAAV,mPAAd;;AAaA,IAAMW,SAAS,GAAGZ,0BAAOC,GAAV,oPAAf;;AAaA,IAAMY,kBAAkB,GAAGb,0BAAOC,GAAV,kaAMFE,SAAOO,WANL,EAkBXP,SAAOW,WAlBI,CAAxB;;AAsBA,IAAMC,SAAS,GAAGf,0BAAOC,GAAV,gMAGH,UAAAK,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAArC;AAAA,CAHF,EAKXM,kBALW,EAMT,UAAAP,KAAK;AAAA,SAAIA,KAAK,CAACU,eAAN,IAAyBC,kBAAgBC,SAAzC,qBACEZ,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,MADnC,SAC+C,EADnD;AAAA,CANI,CAAf;;AAWA,IAAMY,iBAAkE,GAAG,SAArEA,iBAAqE,OAa7C;AAAA,MAZ5BH,eAY4B,QAZ5BA,eAY4B;AAAA,MAX5BI,aAW4B,QAX5BA,aAW4B;AAAA,MAV5BC,WAU4B,QAV5BA,WAU4B;AAAA,+BAT5BC,YAS4B;AAAA,MAT5BA,YAS4B,kCATbC,qBAAmBC,IASN;AAAA,MAR5BC,QAQ4B,QAR5BA,QAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,SAM4B,QAN5BA,SAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,UAI4B,QAJ5BA,UAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,OAE4B,QAF5BA,OAE4B;AAAA,MAD5BxB,QAC4B,QAD5BA,QAC4B;AAE5B,MAAMyB,oBAAoB,GAAGZ,aAAa,IAAIa,SAAjB,IAA8BR,QAA9B,IAA0CC,YAA1C,IAA0DC,SAA1D,IAAuEC,aAAvE,IAAwFC,UAArH;AACA,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEtB,QAArB;AAA+B,IAAA,eAAe,EAAES,eAAhD;AAAA,eACGgB,oBAAoB,iBAAI,qBAAC,OAAD,KAD3B,EAEGZ,aAAa,IAAIa,SAAjB,iBAA8B,qBAAC,iBAAD;AAAA,6BAC7B,qBAAC,gBAAD;AAAgB,QAAA,IAAI,EAAEC,OAAKC,KAA3B;AACgB,QAAA,IAAI,EAAEb,YADtB;AAEgB,QAAA,OAAO,EAAEc,wBAAsBC,MAF/C;AAGgB,QAAA,KAAK,EAAEjB,aAHvB;AAIgB,QAAA,GAAG,EAAEC,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiBD;AAJpC;AAD6B,MAFjC,EAUG,CAACK,QAAQ,IAAIC,YAAZ,IAA4BC,SAA5B,IAAyCC,aAA1C,kBAA4D,sBAAC,cAAD;AAAA,iBAC1D,CAACH,QAAQ,IAAIC,YAAb,kBACC,sBAAC,QAAD;AAAA,mBACGA,YADH,eAEE,qBAAC,cAAD;AAAc,UAAA,KAAK,EAAEvB,SAAOC,WAA5B;AAAyC,UAAA,SAAS,EAAEkC,qBAAmBC,IAAvE;AAAA,oBAA8Ed;AAA9E,UAFF;AAAA,QAFyD,EAO1D,CAACE,SAAS,IAAIC,aAAd,kBACC,sBAAC,SAAD;AAAA,mBACGA,aADH,eAEE,qBAAC,cAAD;AAAc,UAAA,KAAK,EAAEzB,SAAOC,WAA5B;AAAyC,UAAA,SAAS,EAAEkC,qBAAmBC,IAAvE;AAAA,oBAA8EZ;AAA9E,UAFF;AAAA,QARyD;AAAA,MAV/D,EAyBG,CAACE,UAAU,IAAIC,IAAf,kBAAwB,sBAAC,eAAD;AAAiB,MAAA,QAAQ,EAAEvB,QAA3B;AAAA,8BACvB,qBAAC,cAAD;AAAA,kBAAesB;AAAf,QADuB,EAEtBC,IAFsB;AAAA,MAzB3B,EA8BGC,OAAO,iBAAI,qBAAC,kBAAD;AAAA,gBACTA,OAAO,CAACS,GAAR,CAAY,UAAAC,CAAC;AAAA,4BACZ,qBAAC,kBAAD;AAAY,UAAA,QAAQ,EAAElC,QAAtB;AAAgC,UAAA,OAAO,EAAC,WAAxC;AAAoD,UAAA,KAAK,EAAC,UAA1D;AAAqE,UAAA,MAAM,EAAE,gBAACmC,CAAD,EAAO;AAACA,YAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,eAAH;AAAsBF,YAAAA,CAAC,CAACG,OAAF;AAAa,WAAxH;AAAA,oBACGH,CAAC,CAACI;AADL,UADY;AAAA,OAAb;AADS,MA9Bd;AAAA,IADF;AAwCD,CAxDD;;;AArHEzB,EAAAA,a;AACAC,EAAAA,W;AAGAI,EAAAA,Q;AACAC,EAAAA,Y;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAC,EAAAA,U;AACAE,EAAAA,O;AAhBAc,IAAAA,I;AACAD,IAAAA,O;;AAgBAd,EAAAA,I;AACAvB,EAAAA,Q;;eAmKaY,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst NoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/CardBottomSection.js

@@ -15,8 +15,8 @@ var AuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _tagged
   return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 var Divider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
-var NoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
-var NoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+var NoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
+var NoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
 var ButtonRowContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
 var Container = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';

package/dist/Card/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst NoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}

package/dist/Modals/ModalContainer.cjs

@@ -127,18 +127,22 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
           _this$props$minWidth = _this$props.minWidth,
           minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
           _this$props$maxWidth = _this$props.maxWidth,
-          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth;
+          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
+          _this$props$zIndex = _this$props.zIndex,
+          zIndex = _this$props$zIndex === void 0 ? parseInt(_zIndexes.Z_INDEXES.modal) : _this$props$zIndex;
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
       var overflow = this.GetOverflow(modalOverflow);
+      var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,
         padding: padding,
         overflow: overflow,
         minWidth: minWidth,
-        maxWidth: maxWidth
+        maxWidth: maxWidth,
+        zIndex: zIndexValue
       });
       var styles = {
         content: stylesConfiguration
@@ -169,7 +173,8 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
   modalOverflow: _propTypes.default.string,
   padding: _propTypes.default.string,
   minWidth: _propTypes.default.string,
-  maxWidth: _propTypes.default.string
+  maxWidth: _propTypes.default.string,
+  zIndex: _propTypes.default.number
 });
 var _default = ModalContainer;
 exports.default = _default;

package/dist/Modals/ModalContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const zIndexValue = zIndex < 1060 ? 1060 : zIndex >=1070 ? 1069 : zIndex;\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}

package/dist/Modals/ModalContainer.d.ts

@@ -10,6 +10,7 @@ declare type ModalContainerProps = {
     padding?: string;
     minWidth?: string;
     maxWidth?: string;
+    zIndex?: number;
 };
 declare type ModalContainerState = {};
 declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {

package/dist/Modals/ModalContainer.js

@@ -103,18 +103,22 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
           _this$props$minWidth = _this$props.minWidth,
           minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
           _this$props$maxWidth = _this$props.maxWidth,
-          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth;
+          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
+          _this$props$zIndex = _this$props.zIndex,
+          zIndex = _this$props$zIndex === void 0 ? parseInt(Z_INDEXES.modal) : _this$props$zIndex;
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
       var overflow = this.GetOverflow(modalOverflow);
+      var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,
         padding: padding,
         overflow: overflow,
         minWidth: minWidth,
-        maxWidth: maxWidth
+        maxWidth: maxWidth,
+        zIndex: zIndexValue
       });
       var styles = {
         content: stylesConfiguration
@@ -146,7 +150,8 @@ _defineProperty(ModalContainer, "propTypes", {
   modalOverflow: _pt.string,
   padding: _pt.string,
   minWidth: _pt.string,
-  maxWidth: _pt.string
+  maxWidth: _pt.string,
+  zIndex: _pt.number
 });
 
 export default ModalContainer;

package/dist/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const zIndexValue = zIndex < 1060 ? 1060 : zIndex >=1070 ? 1069 : zIndex;\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/Modals/ModalDialog.cjs

@@ -47,7 +47,8 @@ var ModalDialog = function ModalDialog(_ref) {
       note = _ref.note,
       state = _ref.state,
       icon = _ref.icon,
-      yOffset = _ref.yOffset;
+      yOffset = _ref.yOffset,
+      zIndex = _ref.zIndex;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -294,6 +295,7 @@ var ModalDialog = function ModalDialog(_ref) {
     maxWidth: getMaxWidth(),
     modalHeight: "auto",
     padding: getPadding(),
+    zIndex: zIndex,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
         onSubmit: submitAction,
@@ -356,7 +358,8 @@ ModalDialog.propTypes = {
   note: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   state: _propTypes.default.string,
   icon: _propTypes.default.node,
-  yOffset: _propTypes.default.number
+  yOffset: _propTypes.default.number,
+  zIndex: _propTypes.default.number
 };
 var _default = ModalDialog;
 exports.default = _default;

package/dist/Modals/ModalDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(()=>{\n    let yPos = yOffset ? yOffset : 0;\n    if(isModalOpen){      \n      document.body.setAttribute('style', `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`);\n    }\n    return ()=>{\n      document.body.setAttribute('style','');\n      window.scrollTo(0,yPos);\n    }\n  },[isModalOpen]);\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex\n}) => {\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(()=>{\n    let yPos = yOffset ? yOffset : 0;\n    if(isModalOpen){      \n      document.body.setAttribute('style', `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`);\n    }\n    return ()=>{\n      document.body.setAttribute('style','');\n      window.scrollTo(0,yPos);\n    }\n  },[isModalOpen]);\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()} zIndex={zIndex}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}

package/dist/Modals/ModalDialog.d.ts

@@ -17,6 +17,7 @@ interface NewModalProps {
     state?: string;
     icon?: React.ReactNode;
     yOffset?: number;
+    zIndex?: number;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/Modals/ModalDialog.js

@@ -27,7 +27,8 @@ export var ModalDialog = function ModalDialog(_ref) {
       note = _ref.note,
       state = _ref.state,
       icon = _ref.icon,
-      yOffset = _ref.yOffset;
+      yOffset = _ref.yOffset,
+      zIndex = _ref.zIndex;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -273,6 +274,7 @@ export var ModalDialog = function ModalDialog(_ref) {
     maxWidth: getMaxWidth(),
     modalHeight: "auto",
     padding: getPadding(),
+    zIndex: zIndex,
     children: /*#__PURE__*/_jsx(Column, {
       children: /*#__PURE__*/_jsxs("form", {
         onSubmit: submitAction,
@@ -333,7 +335,8 @@ ModalDialog.propTypes = {
   note: _pt.oneOfType([_pt.string, _pt.node]),
   state: _pt.string,
   icon: _pt.node,
-  yOffset: _pt.number
+  yOffset: _pt.number,
+  zIndex: _pt.number
 };
 export default ModalDialog;
 //# sourceMappingURL=ModalDialog.js.map

package/dist/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(()=>{\n    let yPos = yOffset ? yOffset : 0;\n    if(isModalOpen){      \n      document.body.setAttribute('style', `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`);\n    }\n    return ()=>{\n      document.body.setAttribute('style','');\n      window.scrollTo(0,yPos);\n    }\n  },[isModalOpen]);\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AACA,SAASC,aAAT,EAAwBC,KAAxB,EAA+BC,IAA/B,QAA2C,kCAA3C;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,UAA7B,EAAyCC,kBAAzC,EAA6DC,WAA7D,QAAgF,WAAhF;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SACEC,iBADF,EAEEC,kBAFF,EAGEC,MAHF,EAIEC,aAJF,EAKEC,SALF,EAMEC,WANF,EAOEC,kBAPF,EAQEC,2BARF,EASEC,iBATF,EAUEC,iBAVF,EAWEC,kBAXF,QAYO,eAZP;AAcA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,cAAT,QAA+B,aAA/B;AAEA,SAASC,SAAT,QAA0B,IAA1B;;;AAqBA,OAAO,IAAMC,WAAmD,GAAG,SAAtDA,WAAsD,OAkB7D;AAAA,MAjBJC,IAiBI,QAjBJA,IAiBI;AAAA,MAhBJC,WAgBI,QAhBJA,WAgBI;AAAA,MAfJC,uBAeI,QAfJA,uBAeI;AAAA,MAdJC,KAcI,QAdJA,KAcI;AAAA,MAbJC,QAaI,QAbJA,QAaI;AAAA,MAZJC,OAYI,QAZJA,OAYI;AAAA,MAXJC,gBAWI,QAXJA,gBAWI;AAAA,MAVJC,UAUI,QAVJA,UAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,IAKI,QALJA,IAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,MACI,QADJA,MACI;;AAEJ,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQjB,IAAR;AACE,WAAKjB,IAAI,CAACmC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKnC,IAAI,CAACoC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKpC,IAAI,CAACqC,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQrB,IAAR;AACE,WAAKjB,IAAI,CAACmC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKnC,IAAI,CAACoC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKpC,IAAI,CAACqC,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQtB,IAAR;AACE,WAAKjB,IAAI,CAACmC,KAAV;AACE,eAAO,GAAP;;AACF,WAAKnC,IAAI,CAACqC,MAAV;AACE,eAAO,GAAP;;AACF,WAAKrC,IAAI,CAACoC,KAAV;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAaA,MAAMI,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,YAAQvB,IAAR;AACE,WAAKjB,IAAI,CAACmC,KAAV;AACE,eAAO,MAAP;;AACF,WAAKnC,IAAI,CAACqC,MAAV;AACE,eAAO,MAAP;;AACF,WAAKrC,IAAI,CAACoC,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,YAAQxB,IAAR;AACE,WAAKjB,IAAI,CAACmC,KAAV;AACE,eAAO,eAAP;;AACF,WAAKnC,IAAI,CAACqC,MAAV;AACE,eAAO,gBAAP;;AACF,WAAKrC,IAAI,CAACoC,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,gBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMM,UAAU,GAAG,SAAbA,UAAa,CAACtB,KAAD,EAAgBH,IAAhB,EAAgC;AACjD,YAAQA,IAAR;AACE,WAAKjB,IAAI,CAACmC,KAAV;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,SAAS,EAAErC,kBAAkB,CAAC6C,IAA1C;AAAA,oBAAiDvB;AAAjD,UAAP;;AACF,WAAKpB,IAAI,CAACqC,MAAV;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,SAAS,EAAEvC,kBAAkB,CAAC6C,IAA1C;AAAA,oBAAiDvB;AAAjD,UAAP;;AACF,WAAKpB,IAAI,CAACoC,KAAV;AACE,4BAAO,KAAC,WAAD;AAAa,UAAA,SAAS,EAAEtC,kBAAkB,CAAC6C,IAA3C;AAAA,oBAAkDvB;AAAlD,UAAP;;AACF;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,SAAS,EAAEtB,kBAAkB,CAAC6C,IAA1C;AAAA,oBAAiDvB;AAAjD,UAAP;AARJ;AAUD,GAXD;;AAaA,MAAMwB,WAAW,GAAG,SAAdA,WAAc,CAACjB,OAAD,EAAqB;AACvC,wBACE,KAAC,kBAAD;AAAA,6BACE,KAAC,cAAD;AAAgB,QAAA,KAAK,EAAC,IAAtB;AAA2B,QAAA,IAAI,EAAE3B,IAAI,CAAC6C,MAAtC;AAA8C,QAAA,KAAK,EAAC,QAApD;AAA6D,QAAA,QAAQ,EAAC,KAAtE;AAA4E,QAAA,SAAS,EAAE,KAAvF;AAA8F,QAAA,KAAK,EAAElB,OAArG;AAAA,+BACE,KAAC,UAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE,kBAAM,CAAE,CAAjE;AAAA,iCACE,KAAC,IAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,KAAK,EAAEhC,MAAM,CAACmD;AAAhC;AADF;AADF;AADF,MADF;AASD,GAVD;;AAYA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAkB;AACzC,wBACE,KAAC,kBAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAAC3B,QAAhC;AAA0C,MAAA,IAAI,EAAEJ,IAAhD;AAAA,6BACE,KAAC,UAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAE;AAAA,iBAAM+B,OAAO,EAAb;AAAA,SAAzD;AAA0E,QAAA,YAAY,EAAE,EAAxF;AAAA,+BACE,KAAC,KAAD;AAAO,UAAA,IAAI,EAAC,MAAZ;AAAmB,UAAA,KAAK,EAAErD,MAAM,CAACsD;AAAjC;AADF;AADF,MADF;AAOD,GARD;;AAUA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAI1B,UAAJ,EAAgB;AACd,0BACE,KAAC,iBAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACH,QAA/B;AAAyC,QAAA,IAAI,EAAEJ,IAA/C;AAAA,+BACE,KAAC,UAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE;AAAA,mBAAMO,UAAU,EAAhB;AAAA,WAAzD;AAA6E,UAAA,YAAY,EAAE,EAA3F;AAAA,iCACE,KAAC,aAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,KAAK,EAAE7B,MAAM,CAACsD;AAAzC;AADF;AADF,QADF;AAOD;AACF,GAVD;;AAYA,MAAME,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACpB,IAAD,EAA2B;AAC1D,wBAAO1C,KAAK,CAAC+D,YAAN,CAAmBrB,IAAnB,EAA+C;AAAEd,MAAAA,IAAI,EAAEA,IAAI,KAAKjB,IAAI,CAACmC,KAAd,GAAsB,MAAtB,GAA+BlB,IAAI,KAAKjB,IAAI,CAACoC,KAAd,GAAsB,MAAtB,GAA+B;AAAtE,KAA/C,CAAP;AACD,GAFD;;AAIA,MAAMiB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAAC9B,gBAAD,EAAwC;AAAA;;AAC/D,QAAQ+B,IAAR,GAAqD/B,gBAArD,CAAQ+B,IAAR;AAAA,QAAcC,UAAd,GAAqDhC,gBAArD,CAAcgC,UAAd;AAAA,QAA0BC,QAA1B,GAAqDjC,gBAArD,CAA0BiC,QAA1B;AAAA,QAAoCzB,IAApC,GAAqDR,gBAArD,CAAoCQ,IAApC;AAAA,QAA0C0B,MAA1C,GAAqDlC,gBAArD,CAA0CkC,MAA1C;;AACA,YAAQF,UAAR;AACE,WAAK,QAAL;AACE,4BACE,KAAC,MAAD;AACE,UAAA,EAAE,EAAE,oBADN;AAEE,UAAA,IAAI,EAAGhC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwCmC,IAFhD;AAGE,UAAA,QAAQ,EAAEF,QAHZ;AAIE,UAAA,OAAO,EAAGjC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwCoC,OAJnD;AAKE,UAAA,IAAI,EAAE5B,IALR;AAME,UAAA,IAAI,EAAEd,IANR;AAOE,UAAA,OAAO,EAAEwC,MAPX;AAQE,UAAA,OAAO,cAAGlC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwCqC,OAA1C,+CAAqD,WAR9D;AASE,UAAA,KAAK,EAAE;AAAEC,YAAAA,KAAK,EAAE,CAAC,CAAV;AAAaC,YAAAA,WAAW,EAAE;AAA1B,WATT;AAAA,oBAUGR;AAVH,UADF;;AAcF,WAAK,WAAL;AACE,4BACE,MAAC,SAAD;AACE,UAAA,EAAE,EAAC,uBADL;AAEE,UAAA,SAAS,EAAC,eAFZ;AAGE,UAAA,IAAI,EAAG/B,gBAAD,CAA0CwC,IAHlD;AAIE,UAAA,QAAQ,EAAEP,QAJZ;AAKE,UAAA,OAAO,EAAC,SALV;AAME,UAAA,OAAO,EAAE,iBAACQ,CAAD,EAAO;AACd,gBAAIP,MAAJ,EAAY;AACVO,cAAAA,CAAC,CAACC,cAAF;AACAR,cAAAA,MAAM,CAACO,CAAD,CAAN;AACD;AACF,WAXH;AAAA,qBAYGjC,IAAI,IAAIoB,wBAAwB,CAACpB,IAAD,CAZnC,EAaGuB,IAbH;AAAA,UADF;;AAiBF,WAAK,MAAL;AACE,4BACE;AAAK,UAAA,SAAS,EAAC,oBAAf;AAAA,qBACGvB,IAAI,IAAIoB,wBAAwB,CAACpB,IAAD,CADnC,eAEE;AAAA,sBAAOuB;AAAP,YAFF;AAAA,UADF;AAnCJ;AA0CD,GA5CD;;AA8CAjE,EAAAA,KAAK,CAAC6E,SAAN,CAAgB,YAAI;AAClB,QAAIC,IAAI,GAAGnC,OAAO,GAAGA,OAAH,GAAa,CAA/B;;AACA,QAAGd,WAAH,EAAe;AACbkD,MAAAA,QAAQ,CAACC,IAAT,CAAcC,YAAd,CAA2B,OAA3B,8IAE6CH,IAF7C;AAGD;;AACD,WAAO,YAAI;AACTC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,YAAd,CAA2B,OAA3B,EAAmC,EAAnC;AACAC,MAAAA,MAAM,CAACC,QAAP,CAAgB,CAAhB,EAAkBL,IAAlB;AACD,KAHD;AAID,GAXD,EAWE,CAACjD,WAAD,CAXF;AAaA,sBACE,KAAC,cAAD;AAAgB,IAAA,SAAS,EAAEA,WAA3B;AAAwC,IAAA,UAAU,EAAEC,uBAApD;AAA6E,IAAA,QAAQ,EAAEe,WAAW,EAAlG;AAAsG,IAAA,QAAQ,EAAEI,WAAW,EAA3H;AAA+H,IAAA,WAAW,EAAC,MAA3I;AAAkJ,IAAA,OAAO,EAAEG,UAAU,EAArK;AAAyK,IAAA,MAAM,EAAER,MAAjL;AAAA,2BACE,KAAC,MAAD;AAAA,6BACE;AAAM,QAAA,QAAQ,EAAEP,YAAhB;AAAA,mBACGL,QAAQ,iBACP,MAAC,iBAAD;AAAmB,UAAA,IAAI,EAAEJ,IAAzB;AAA+B,UAAA,MAAM,EAAEsB,cAAc,EAArD;AAAyD,UAAA,YAAY,EAAEC,eAAe,EAAtF;AAAA,kCACE;AAAK,YAAA,GAAG,EAAEnB,QAAV;AAAoB,YAAA,GAAG,EAAC;AAAxB,YADF,eAEE,MAAC,2BAAD;AAA6B,YAAA,aAAa,EAAE,CAAC,CAACG,UAA9C;AAAA,uBACG0B,eAAe,EADlB,EAEGH,gBAAgB,CAACtB,WAAD,CAFnB;AAAA,YAFF;AAAA,UAFJ,eAUE,MAAC,iBAAD;AAAA,kCACE,MAAC,aAAD;AAAA,uBACG,CAACJ,QAAD,IAAa6B,eAAe,EAD/B,EAEG9B,KAAK,IAAIsB,UAAU,CAACtB,KAAD,EAAQH,IAAR,CAFtB;AAAA,YADF,eAKE,MAAC,kBAAD;AAAA,uBACGU,OAAO,IAAIiB,WAAW,CAACjB,OAAD,CADzB,EAEG,CAACN,QAAD,IAAa0B,gBAAgB,CAACtB,WAAD,CAFhC;AAAA,YALF;AAAA,UAVF,eAqBE,KAAC,SAAD;AAAW,UAAA,IAAI,EAAER,IAAjB;AAAA,oBAAwBW;AAAxB,UArBF,EAuBGC,IAAI,iBAAI,KAAC,SAAD;AAAW,UAAA,IAAI,EAAEA,IAAjB;AAAuB,UAAA,KAAK,EAAEC,KAA9B;AAAqC,UAAA,IAAI,EAAEb,IAA3C;AAAiD,UAAA,IAAI,EAAEc;AAAvD,UAvBX,eAyBE,MAAC,WAAD;AAAa,UAAA,IAAI,EAAEd,IAAnB;AAAA,qBACGM,gBAAgB,IAAI8B,gBAAgB,CAAC9B,gBAAD,CADvC,EAEGD,OAFH,aAEGA,OAFH,uBAEGA,OAAO,CAAEmD,GAAT,CAAa,UAACC,CAAD,EAAIC,CAAJ;AAAA,gCACZ,KAAC,MAAD;AAAwB,cAAA,EAAE,EAAED,CAAC,CAACE,EAA9B;AAAkC,cAAA,QAAQ,EAAEF,CAAC,CAAClB,QAA9C;AAAwD,cAAA,OAAO,EAAEkB,CAAC,CAACf,OAAnE;AAA4E,cAAA,IAAI,EAAE1C,IAAlF;AAAwF,cAAA,OAAO,EAAEyD,CAAC,CAACjB,MAAnG;AAA2G,cAAA,IAAI,EAAEiB,CAAC,CAAChB,IAAnH;AAAyH,cAAA,OAAO,EAAEgB,CAAC,CAACd,OAApI;AAAA,wBACGc,CAAC,CAACpB;AADL,eAAaoB,CAAC,CAACE,EAAF,IAAQD,CAArB,CADY;AAAA,WAAb,CAFH;AAAA,UAzBF;AAAA;AADF;AADF,IADF;AAwCD,CAzOM;;AAjBLzD,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,O;AAEAK,EAAAA,O;AACAH,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAG,EAAAA,I;AACAC,EAAAA,K;AACAC,EAAAA,I;AACAC,EAAAA,O;AACAC,EAAAA,M;;AA8OF,eAAejB,WAAf","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex\n}) => {\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(()=>{\n    let yPos = yOffset ? yOffset : 0;\n    if(isModalOpen){      \n      document.body.setAttribute('style', `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`);\n    }\n    return ()=>{\n      document.body.setAttribute('style','');\n      window.scrollTo(0,yPos);\n    }\n  },[isModalOpen]);\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()} zIndex={zIndex}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.5.1-dev.34.full",
+  "version": "1.5.1-dev.37",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [