@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/js/InputFields/DatepickerFieldHeader.js

@@ -1,98 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatepickerFieldHeader = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _common = require("../common");
-
-var _styles = require("../styles");
-
-var _templateObject;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var HeaderLabelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, _common.CommonInteractionStyling, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600);
-
-var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
-  var date = _ref.date,
-      decreaseMonth = _ref.decreaseMonth,
-      increaseMonth = _ref.increaseMonth,
-      prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
-      nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
-      setYearPickerMode = _ref.setYearPickerMode,
-      yearPickerMode = _ref.yearPickerMode,
-      setActiveMonthPage = _ref.setActiveMonthPage;
-  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-  var handleDecreaseMonth = function handleDecreaseMonth() {
-    var previousMonth = date.getMonth() - 1;
-    if (previousMonth < 0) previousMonth = months.length - 1;
-    setActiveMonthPage(previousMonth);
-    decreaseMonth();
-  };
-
-  var handleIncreaseMonth = function handleIncreaseMonth() {
-    var nextMonth = date.getMonth() + 1;
-    if (nextMonth >= months.length - 1) nextMonth = 0;
-    setActiveMonthPage(nextMonth);
-    increaseMonth();
-  };
-
-  React.useEffect(function () {
-    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: function onClick() {
-      return setYearPickerMode(!yearPickerMode);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-datepicker__current-month"
-  }, "".concat(months[date.getMonth()], " ").concat(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")));
-};
-
-exports.DatepickerFieldHeader = DatepickerFieldHeader;
-DatepickerFieldHeader.propTypes = {
-  date: _propTypes.default.instanceOf(Date).isRequired,
-  customHeaderCount: _propTypes.default.number.isRequired,
-  prevMonthButtonDisabled: _propTypes.default.bool.isRequired,
-  nextMonthButtonDisabled: _propTypes.default.bool.isRequired,
-  prevYearButtonDisabled: _propTypes.default.bool.isRequired,
-  nextYearButtonDisabled: _propTypes.default.bool.isRequired,
-  yearPickerMode: _propTypes.default.bool.isRequired
-};
-//# sourceMappingURL=DatepickerFieldHeader.js.map

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

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

package/dist/js/InputFields/Label.d.ts

@@ -1,13 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-declare type LabelProps = {
-    inputId: string;
-    text: string;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-};
-declare const InputLabel: React.FunctionComponent<LabelProps>;
-export default InputLabel;

package/dist/js/InputFields/Label.js

@@ -1,108 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styles = require("../styles");
-
-var _styling = require("./styling");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _typography = require("../styles/typography");
-
-var _templateObject, _templateObject2;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-// Add component-specific styles.
-var Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
-
-var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}); // Add component-specific types
-
-
-var InputLabel = function InputLabel(_ref) {
-  var _document$getElementB2;
-
-  var inputId = _ref.inputId,
-      text = _ref.text,
-      size = _ref.size,
-      margin = _ref.margin;
-
-  // Globally used variables within the component
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      required = _React$useState2[0],
-      setRequired = _React$useState2[1];
-  /**
-   * Checks if field is set as required and we have to mark it accordingly.
-   */
-
-
-  React.useEffect(function () {
-    var _document$getElementB;
-
-    if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
-      setRequired(true);
-    } else {
-      setRequired(false);
-    }
-  }, [(_document$getElementB2 = document.getElementById(inputId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.getAttribute('required')]);
-  /**
-   * Triggers a click element on a specific element.
-   * @param id - ID of the element which needs to be clicked.
-   */
-
-  var onTriggerClick = function onTriggerClick(id) {
-    var _document$getElementB3;
-
-    (_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.click();
-  };
-
-  return /*#__PURE__*/React.createElement(LabelRow, {
-    margin: margin
-  }, /*#__PURE__*/React.createElement(Label, {
-    htmlFor: inputId,
-    onClick: function onClick() {
-      return onTriggerClick(inputId);
-    },
-    className: size || ''
-  }, text), required && /*#__PURE__*/React.createElement(_styling.RequiredStar, null, "*"));
-};
-
-InputLabel.propTypes = {
-  inputId: _propTypes.default.string.isRequired,
-  text: _propTypes.default.string.isRequired,
-  margin: _propTypes.default.string
-};
-var _default = InputLabel;
-exports.default = _default;
-//# sourceMappingURL=Label.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,sKACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAeA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCK,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,iFAAkCU,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,CAAD,2DAAC,uBAAkCU,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEf;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMW,cAAc,CAACX,OAAD,CAApB;AAAA,KAAlC;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGI,QAAQ,iBAAI,oBAAC,qBAAD,YAJf,CADF;AAQD,CA9BD;;;AANEL,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;eAmCaC,U","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { RequiredStar } from './styling';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n`;\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n      setRequired(true);\r\n    } else {\r\n      setRequired(false);\r\n    }\r\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n        {text}\r\n      </Label>\r\n      {required && <RequiredStar>*</RequiredStar>}\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"file":"Label.js"}

package/dist/js/InputFields/PasswordField.d.ts

@@ -1,18 +0,0 @@
-import { Size } from '../types';
-declare type PasswordFieldProps = {
-    id: string;
-    disabled?: boolean;
-    locked?: boolean;
-    onChange?: (text: string) => void;
-    hasError?: boolean;
-    value?: string;
-    validationMessage?: string;
-    autoComplete?: string;
-    placeholder?: string;
-    required?: boolean;
-    readOnly?: boolean;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-};
-declare const PasswordField: ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => JSX.Element;
-export default PasswordField;

package/dist/js/InputFields/PasswordField.js

@@ -1,173 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _styling = require("./styling");
-
-var _templateObject, _templateObject2;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledPassSwitch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  ", " {\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"])), _styles.BREAKPOINTS.MEDIUM);
-
-var PasswordRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
-
-var PasswordField = function PasswordField(_ref) {
-  var id = _ref.id,
-      disabled = _ref.disabled,
-      locked = _ref.locked,
-      _onChange = _ref.onChange,
-      hasError = _ref.hasError,
-      value = _ref.value,
-      validationMessage = _ref.validationMessage,
-      autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      readOnly = _ref.readOnly,
-      size = _ref.size,
-      margin = _ref.margin;
-
-  var _React$useState = React.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      passwordHidden = _React$useState2[0],
-      setPasswordHidden = _React$useState2[1];
-
-  var inputRef = React.useRef(null);
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tabbedHere = _React$useState4[0],
-      setTabbedHere = _React$useState4[1];
-
-  var handleKeyDown = function 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: function onFocus(e) {
-      var _e$target;
-
-      if (!(e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _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: function onChange(e) {
-      var _e$target2;
-
-      return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) || '');
-    },
-    tabbedHere: tabbedHere,
-    onBlur: function onBlur() {
-      return setTabbedHere(false);
-    }
-  }), /*#__PURE__*/React.createElement(StyledPassSwitch, {
-    className: size ? size : ''
-  }, !disabled && !locked ? passwordHidden ? /*#__PURE__*/React.createElement("div", {
-    id: "".concat(id, "_Visible"),
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    onClick: function onClick() {
-      return 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: "".concat(id, "_NotVisible"),
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    onClick: function onClick() {
-      return 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: _propTypes.default.string.isRequired,
-  disabled: _propTypes.default.bool,
-  locked: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  hasError: _propTypes.default.bool,
-  value: _propTypes.default.string,
-  validationMessage: _propTypes.default.string,
-  autoComplete: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  required: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  margin: _propTypes.default.string
-};
-var _default = PasswordField;
-exports.default = _default;
-//# sourceMappingURL=PasswordField.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS } from '../styles';\r\nimport { Size} from '../types';\r\nimport { InputFieldStyling, InputWrapper } from './styling';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\ntype PasswordFieldProps = {\r\n  id: string;\r\n  disabled?: boolean;\r\n  locked?: boolean;\r\n  onChange?: (text: string) => void;\r\n  hasError?: boolean;\r\n  value?: string;\r\n  validationMessage?: string;\r\n  autoComplete?: string;\r\n  placeholder?: string;\r\n  required?: boolean;\r\n  readOnly?: boolean;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst StyledPassSwitch = styled.div`\r\n  float: right;\r\n  margin-left: -40px;\r\n  margin-top: 8px;\r\n  position: relative;\r\n  z-index: 1;\r\n  height: 30px;\r\n  width: 30px;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin-top: 12px;\r\n  }\r\n\r\n  &.small {\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.medium {\r\n    margin-top: 12px;\r\n  }\r\n\r\n  svg {\r\n    cursor: pointer;\r\n  }\r\n  div {\r\n    &:focus {\r\n      outline: none;\r\n      svg {\r\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst PasswordRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n`;\r\n\r\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\r\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\r\n  const inputRef = React.useRef<any>(null);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.keyCode === 13) {\r\n      setPasswordHidden(!passwordHidden);\r\n    }\r\n  };\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        disabled={disabled}\r\n        locked={locked}\r\n        margin={margin}\r\n        tabIndex={disabled ? -1 : 0}\r\n        onFocus={(e: any) => {\r\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\r\n            setTabbedHere(true);\r\n            inputRef.current.focus();\r\n          }\r\n        }}>\r\n        <div style={{ display: 'block' }}>\r\n          <PasswordRow>\r\n            <InputFieldStyling\r\n              id={id}\r\n              ref={inputRef}\r\n              type={passwordHidden ? 'password' : 'text'}\r\n              name=\"password\"\r\n              value={value}\r\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\r\n              tabIndex={-1}\r\n              autoComplete={autoComplete}\r\n              placeholder={placeholder}\r\n              disabled={disabled}\r\n              locked={locked}\r\n              required={required}\r\n              readOnly={readOnly}\r\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n              tabbedHere={tabbedHere}\r\n              onBlur={() => setTabbedHere(false)}\r\n            />\r\n            <StyledPassSwitch className={size ? size : ''}>\r\n              {!disabled && !locked ? (\r\n                passwordHidden ? (\r\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\r\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\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\"\r\n                        fill=\"#666666\"></path>\r\n                    </svg>\r\n                  </div>\r\n                ) : (\r\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\r\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\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\"\r\n                        fill=\"#666666\"\r\n                      />\r\n                      <path\r\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\"\r\n                        fill=\"#666666\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                )\r\n              ) : null}\r\n            </StyledPassSwitch>\r\n          </PasswordRow>\r\n        </div>\r\n      </InputWrapper>\r\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default PasswordField;\r\n"],"file":"PasswordField.js"}

package/dist/js/InputFields/QuickSearch.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Size } from '../types';
-declare type QuickSearchProps = {
-    id: string;
-    searchTerm?: string;
-    setSearchTerm: (term: string) => void;
-    enterSearch: (e: any) => void;
-    removeSearch: (e: any) => void;
-    placeholder?: string;
-    performSearchLabel?: string;
-    disabled?: boolean;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    loading?: boolean;
-};
-declare const QuickSearch: React.FunctionComponent<QuickSearchProps>;
-export default QuickSearch;