@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/umd/InputFields/DatepickerFieldHeader.js

@@ -0,0 +1,187 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "../icons/systemicons/SystemIcons", "styled-components", "../common", "../styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("../icons/systemicons/SystemIcons"), require("styled-components"), require("../common"), require("../styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.SystemIcons, global.styledComponents, global.common, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _SystemIcons, _styledComponents, _common, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.DatepickerFieldHeader = undefined;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Import react libraries.
+   */
+  const HeaderLabelContainer = _styledComponents2.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 10px;
+  cursor: pointer;
+
+  button {
+    background: transparent;
+    padding: 0px;
+    width: auto;
+  }
+
+  svg {
+    color: ${_styles.COLORS.neutral_600};
+  }
+
+  ${_common.CommonInteractionStyling}
+
+  &:hover {
+    div {
+      color: ${_styles.COLORS.primary_600} !important;
+    }
+    svg {
+      color: ${_styles.COLORS.primary_600};
+    }
+  }
+
+  &:active {
+    div {
+      color: ${_styles.COLORS.primary_600} !important;
+    }
+    svg {
+      color: ${_styles.COLORS.primary_600};
+    }
+  }
+`;
+
+  const DatepickerFieldHeader = exports.DatepickerFieldHeader = ({
+    date,
+    decreaseMonth,
+    increaseMonth,
+    prevMonthButtonDisabled,
+    nextMonthButtonDisabled,
+    setYearPickerMode,
+    yearPickerMode,
+    setActiveMonthPage
+  }) => {
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+    const handleDecreaseMonth = () => {
+      let previousMonth = date.getMonth() - 1;
+      if (previousMonth < 0) previousMonth = months.length - 1;
+      setActiveMonthPage(previousMonth);
+      decreaseMonth();
+    };
+
+    const handleIncreaseMonth = () => {
+      let nextMonth = date.getMonth() + 1;
+      if (nextMonth >= months.length - 1) nextMonth = 0;
+      setActiveMonthPage(nextMonth);
+      increaseMonth();
+    };
+
+    React.useEffect(() => {
+      setActiveMonthPage(date.getMonth());
+    }, [date]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, !yearPickerMode && /*#__PURE__*/React.createElement("button", {
+      className: "react-datepicker__navigation react-datepicker__navigation--previous",
+      onClick: handleDecreaseMonth,
+      disabled: prevMonthButtonDisabled
+    }, "Prevoius month"), /*#__PURE__*/React.createElement(HeaderLabelContainer, {
+      onClick: () => setYearPickerMode(!yearPickerMode)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "react-datepicker__current-month"
+    }, `${months[date.getMonth()]} ${date.getFullYear()}`), yearPickerMode ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
+      size: "24px"
+    }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
+      size: "24px"
+    })), !yearPickerMode && /*#__PURE__*/React.createElement("button", {
+      className: "react-datepicker__navigation react-datepicker__navigation--next",
+      onClick: handleIncreaseMonth,
+      disabled: nextMonthButtonDisabled
+    }, "Next month")));
+  };
+
+  DatepickerFieldHeader.propTypes = {
+    date: _propTypes2.default.instanceOf(Date).isRequired,
+    customHeaderCount: _propTypes2.default.number.isRequired,
+    prevMonthButtonDisabled: _propTypes2.default.bool.isRequired,
+    nextMonthButtonDisabled: _propTypes2.default.bool.isRequired,
+    prevYearButtonDisabled: _propTypes2.default.bool.isRequired,
+    nextYearButtonDisabled: _propTypes2.default.bool.isRequired,
+    yearPickerMode: _propTypes2.default.bool.isRequired
+  };
+});
+//# sourceMappingURL=DatepickerFieldHeader.js.map

package/dist/umd/InputFields/DatepickerFieldHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/DatepickerFieldHeader.tsx"],"names":["date","customHeaderCount","prevMonthButtonDisabled","nextMonthButtonDisabled","prevYearButtonDisabled","nextYearButtonDisabled","yearPickerMode","HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","decreaseMonth","handleIncreaseMonth","nextMonth","increaseMonth","React","display","justifyContent","setYearPickerMode"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { scrollBarStyling, COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n            Prevoius month\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <ArrowDropUp size=\"24px\" /> : <ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n            Next month\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"file":"DatepickerFieldHeader.js"}

package/dist/umd/InputFields/Label.js

@@ -0,0 +1,158 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "../styles", "./styling", "styled-components", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("../styles"), require("./styling"), require("styled-components"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styles, global.styling, global.styledComponents, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styles, _styling, _styledComponents, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Import React libraries.
+   */
+
+  /**
+   * Import custom styles.
+   */
+
+  /**
+   * Import third-party libraries.
+   */
+  // Add component-specific styles.
+  const Label = _styledComponents2.default.label`
+  ${(0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500)}
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    ${(0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500)}
+  }
+
+  &.small {
+    ${(0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500)}
+  }
+  &.medium {
+    ${(0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500)}
+  }
+`;
+  const LabelRow = _styledComponents2.default.div`
+  display: flex;
+  justify-content: space-between;
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+`; // Add component-specific types
+
+  const InputLabel = ({
+    inputId,
+    text,
+    size,
+    margin
+  }) => {
+    // Globally used variables within the component
+    const [required, setRequired] = React.useState(false);
+    /**
+     * Checks if field is set as required and we have to mark it accordingly.
+     */
+
+    React.useEffect(() => {
+      if (document.getElementById(inputId)?.getAttribute('required') === '') {
+        setRequired(true);
+      } else {
+        setRequired(false);
+      }
+    }, [document.getElementById(inputId)?.getAttribute('required')]);
+    /**
+     * Triggers a click element on a specific element.
+     * @param id - ID of the element which needs to be clicked.
+     */
+
+    const onTriggerClick = id => {
+      document.getElementById(id)?.click();
+    };
+
+    return /*#__PURE__*/React.createElement(LabelRow, {
+      margin: margin
+    }, /*#__PURE__*/React.createElement(Label, {
+      htmlFor: inputId,
+      onClick: () => onTriggerClick(inputId),
+      className: size || ''
+    }, text), required && /*#__PURE__*/React.createElement(_styling.RequiredStar, null, "*"));
+  };
+
+  InputLabel.propTypes = {
+    inputId: _propTypes2.default.string.isRequired,
+    text: _propTypes2.default.string.isRequired,
+    margin: _propTypes2.default.string
+  };
+  exports.default = InputLabel;
+});
+//# sourceMappingURL=Label.js.map

package/dist/umd/InputFields/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","InputLabel","React","document","setRequired","onTriggerClick","id","size","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AAZA,CAAA;AAeA,QAAMC,QAAQ,GAAGP,2BAAOQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHhE,CAAA,C,CAMA;;AAQA,QAAMI,UAA+C,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAuBH,IAAAA;AAAvB,GAAD,KAAiD;AACvG;AACA,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BI,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CAAAA,UAAAA,MAAJ,EAAA,EAAuE;AACrEC,QAAAA,WAAW,CAAXA,IAAW,CAAXA;AADF,OAAA,MAEO;AACLA,QAAAA,WAAW,CAAXA,KAAW,CAAXA;AACD;AALHF,KAAAA,EAMG,CAACC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CANJD,UAMIC,CAAD,CANHD;AAOA;AACF;AACA;AACA;;AACE,UAAMG,cAAc,GAAIC,EAAD,IAAsB;AAC3CH,MAAAA,QAAQ,CAARA,cAAAA,CAAAA,EAAAA,GAAAA,KAAAA;AADF,KAAA;;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,MAAA,MAAM,EAAEL;AAAlB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,OAAO,EAAd,OAAA;AAAyB,MAAA,OAAO,EAAE,MAAMO,cAAc,CAAtD,OAAsD,CAAtD;AAAiE,MAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KAAA,EADF,IACE,CADF,EAIGC,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EALjB,GAKiB,CAJf,CADF;AAtBF,GAAA;;;AANET,IAAAA,O;AACAC,IAAAA,I;AAEAF,IAAAA,M;;oBAmCF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  justify-content: space-between;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n        {text}\n      </Label>\n      {required && <RequiredStar>*</RequiredStar>}\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}

package/dist/umd/InputFields/PasswordField.js

@@ -0,0 +1,228 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "./styling"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("./styling"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.styling);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _styling) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const StyledPassSwitch = _styledComponents2.default.div`
+  float: right;
+  margin-left: -40px;
+  margin-top: 8px;
+  position: relative;
+  z-index: 1;
+  height: 30px;
+  width: 30px;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin-top: 12px;
+  }
+
+  &.small {
+    margin-top: 8px;
+  }
+
+  &.medium {
+    margin-top: 12px;
+  }
+
+  svg {
+    cursor: pointer;
+  }
+  div {
+    &:focus {
+      outline: none;
+      svg {
+        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
+        border-radius: 4px;
+      }
+    }
+  }
+`;
+  const PasswordRow = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+  const PasswordField = ({
+    id,
+    disabled,
+    locked,
+    onChange,
+    hasError,
+    value,
+    validationMessage,
+    autoComplete,
+    placeholder,
+    required,
+    readOnly,
+    size,
+    margin
+  }) => {
+    const [passwordHidden, setPasswordHidden] = React.useState(true);
+    const inputRef = React.useRef(null);
+    const [tabbedHere, setTabbedHere] = React.useState(false);
+
+    const handleKeyDown = e => {
+      if (e.keyCode === 13) {
+        setPasswordHidden(!passwordHidden);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styling.InputWrapper, {
+      disabled: disabled,
+      locked: locked,
+      margin: margin,
+      tabIndex: disabled ? -1 : 0,
+      onFocus: e => {
+        if (!e?.target?.id.includes(id) && !disabled && !locked) {
+          setTabbedHere(true);
+          inputRef.current.focus();
+        }
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'block'
+      }
+    }, /*#__PURE__*/React.createElement(PasswordRow, null, /*#__PURE__*/React.createElement(_styling.InputFieldStyling, {
+      id: id,
+      ref: inputRef,
+      type: passwordHidden ? 'password' : 'text',
+      name: "password",
+      value: value,
+      className: (hasError ? 'error' : '').concat(size ? size : ''),
+      tabIndex: -1,
+      autoComplete: autoComplete,
+      placeholder: placeholder,
+      disabled: disabled,
+      locked: locked,
+      required: required,
+      readOnly: readOnly,
+      onChange: e => onChange && onChange(e?.target?.value || ''),
+      tabbedHere: tabbedHere,
+      onBlur: () => setTabbedHere(false)
+    }), /*#__PURE__*/React.createElement(StyledPassSwitch, {
+      className: size ? size : ''
+    }, !disabled && !locked ? passwordHidden ? /*#__PURE__*/React.createElement("div", {
+      id: `${id}_Visible`,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onClick: () => setPasswordHidden(!passwordHidden)
+    }, /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z",
+      fill: "#666666"
+    }))) : /*#__PURE__*/React.createElement("div", {
+      id: `${id}_NotVisible`,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onClick: () => setPasswordHidden(!passwordHidden)
+    }, /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z",
+      fill: "#666666"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z",
+      fill: "#666666"
+    }))) : null)))), validationMessage && /*#__PURE__*/React.createElement("span", {
+      className: "error-msg"
+    }, validationMessage));
+  };
+
+  PasswordField.propTypes = {
+    id: _propTypes2.default.string.isRequired,
+    disabled: _propTypes2.default.bool,
+    locked: _propTypes2.default.bool,
+    onChange: _propTypes2.default.func,
+    hasError: _propTypes2.default.bool,
+    value: _propTypes2.default.string,
+    validationMessage: _propTypes2.default.string,
+    autoComplete: _propTypes2.default.string,
+    placeholder: _propTypes2.default.string,
+    required: _propTypes2.default.bool,
+    readOnly: _propTypes2.default.bool,
+    margin: _propTypes2.default.string
+  };
+  exports.default = PasswordField;
+});
+//# sourceMappingURL=PasswordField.js.map

package/dist/umd/InputFields/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden","size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}