@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/InputFields/DatepickerFieldHeader.js

@@ -1,45 +1,82 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
 /**
  * Import react libraries.
- */
-import * as React from 'react';
-import { SystemIcons } from '../icons';
-import styled from 'styled-components';
-import { CommonInteractionStyling } from '../common';
-import { COLORS } from '../styles';
-var HeaderLabelContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), COLORS.neutral_600, CommonInteractionStyling, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600);
-export var DatepickerFieldHeader = function (_a) {
-    var date = _a.date, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, setYearPickerMode = _a.setYearPickerMode, yearPickerMode = _a.yearPickerMode, setActiveMonthPage = _a.setActiveMonthPage;
-    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-    var handleDecreaseMonth = function () {
-        var previousMonth = date.getMonth() - 1;
-        if (previousMonth < 0)
-            previousMonth = months.length - 1;
-        setActiveMonthPage(previousMonth);
-        decreaseMonth();
-    };
-    var handleIncreaseMonth = function () {
-        var nextMonth = date.getMonth() + 1;
-        if (nextMonth >= months.length - 1)
-            nextMonth = 0;
-        setActiveMonthPage(nextMonth);
-        increaseMonth();
-    };
-    React.useEffect(function () {
-        setActiveMonthPage(date.getMonth());
-    }, [date]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: {
-                display: 'flex',
-                justifyContent: 'center',
-            } },
-            !yearPickerMode && (React.createElement("button", { type: "button", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: handleDecreaseMonth, disabled: prevMonthButtonDisabled })),
-            React.createElement(HeaderLabelContainer, { onClick: function () { return setYearPickerMode(!yearPickerMode); } },
-                React.createElement("div", { className: "react-datepicker__current-month" }, "".concat(months[date.getMonth()], " ").concat(date.getFullYear())),
-                yearPickerMode ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px" }) : React.createElement(SystemIcons.ArrowDropDown, { size: "24px" })),
-            !yearPickerMode && (React.createElement("button", { type: "button", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: handleIncreaseMonth, disabled: nextMonthButtonDisabled })))));
-};
-var templateObject_1;
+ */
+import * as React from 'react';
+import { SystemIcons } from '../icons';
+import styled from 'styled-components';
+import { CommonInteractionStyling } from '../common';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var HeaderLabelContainer = styled.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"])), COLORS.neutral_600, CommonInteractionStyling, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600);
+export 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__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      },
+      children: [!yearPickerMode && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "react-datepicker__navigation react-datepicker__navigation--previous",
+        onClick: handleDecreaseMonth,
+        disabled: prevMonthButtonDisabled
+      }), /*#__PURE__*/_jsxs(HeaderLabelContainer, {
+        onClick: function onClick() {
+          return setYearPickerMode(!yearPickerMode);
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "react-datepicker__current-month",
+          children: "".concat(months[date.getMonth()], " ").concat(date.getFullYear())
+        }), yearPickerMode ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
+          size: "24px"
+        }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+          size: "24px"
+        })]
+      }), !yearPickerMode && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "react-datepicker__navigation react-datepicker__navigation--next",
+        onClick: handleIncreaseMonth,
+        disabled: nextMonthButtonDisabled
+      })]
+    })
+  });
+};
+DatepickerFieldHeader.propTypes = {
+  date: _pt.instanceOf(Date).isRequired,
+  customHeaderCount: _pt.number.isRequired,
+  prevMonthButtonDisabled: _pt.bool.isRequired,
+  nextMonthButtonDisabled: _pt.bool.isRequired,
+  prevYearButtonDisabled: _pt.bool.isRequired,
+  nextYearButtonDisabled: _pt.bool.isRequired,
+  yearPickerMode: _pt.bool.isRequired
+};
+//# sourceMappingURL=DatepickerFieldHeader.js.map

package/dist/InputFields/Label.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-export declare type LabelProps = {
+export type LabelProps = {
     inputId: string;
     text: string;
     size?: Size.Small | Size.Medium;

package/dist/InputFields/Label.js

@@ -1,83 +1,122 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * Import React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import custom styles.
- */
-import { BREAKPOINTS, COLORS } from '../styles';
-import { Size } from '../types';
+ */
+import { BREAKPOINTS, COLORS } from '../styles';
+import { Size } from '../types';
+
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
-import { SystemIcons } from '../icons';
-// Add component-specific styles.
-var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"], ["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
-var LabelRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
-var CopyContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
-var LabelRowInner = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
-var CopyState;
-(function (CopyState) {
-    CopyState[CopyState["Disabled"] = 0] = "Disabled";
-    CopyState[CopyState["Available"] = 1] = "Available";
-    CopyState[CopyState["Copied"] = 2] = "Copied";
-})(CopyState || (CopyState = {}));
-var InputLabel = function (_a) {
-    var inputId = _a.inputId, text = _a.text, size = _a.size, margin = _a.margin, requiredProp = _a.required, showCopyButton = _a.showCopyButton;
-    // Globally used variables within the component
-    var _b = React.useState(false), required = _b[0], setRequired = _b[1];
-    var _c = React.useState(CopyState.Available), copyState = _c[0], setCopyState = _c[1];
-    /**
-     * Checks if field is set as required and we have to mark it accordingly.
-     */
-    React.useEffect(function () {
-        var _a;
-        if (requiredProp === undefined) {
-            if (((_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.getAttribute('required')) === '') {
-                setRequired(true);
-            }
-            else {
-                setRequired(false);
-            }
-        }
-        else
-            setRequired(Boolean(requiredProp));
-    }, []);
-    /**
-     * Triggers a click element on a specific element.
-     * @param id - ID of the element which needs to be clicked.
-     */
-    var onTriggerClick = function (id) {
-        var _a;
-        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    var copyInputClick = function (e) {
-        var _a;
-        e.preventDefault();
-        if (copyState == CopyState.Copied)
-            return;
-        var val = (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.value;
-        if (val) {
-            window.navigator.clipboard.writeText(val);
-            setCopyState(CopyState.Copied);
-            setTimeout(function () {
-                setCopyState(CopyState.Available);
-            }, 1000);
-        }
-    };
-    return (React.createElement(LabelRow, { margin: margin },
-        React.createElement(LabelRowInner, { size: size },
-            React.createElement(Label, { htmlFor: inputId, onClick: function () { return onTriggerClick(inputId); }, className: size || '' }, text),
-            required && React.createElement(SystemIcons.Asterisk, { size: "16px", color: COLORS.critical_500 }),
-            showCopyButton &&
-                React.createElement(CopyContainer, { className: copyState != CopyState.Available ? "disabled" : "", onClick: copyInputClick }, size == Size.Medium ? React.createElement(ComponentXS, null, copyState == CopyState.Copied ? 'Copied' : 'Copy') :
-                    React.createElement(ComponentXXS, null, copyState == CopyState.Copied ? 'Copied' : 'Copy')))));
-};
-export default InputLabel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+ */
+import styled from 'styled-components';
+import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
+import { SystemIcons } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// Add component-specific styles.
+var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
+var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
+var CopyContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
+var LabelRowInner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
+
+// Add component-specific types
+var CopyState;
+(function (CopyState) {
+  CopyState[CopyState["Disabled"] = 0] = "Disabled";
+  CopyState[CopyState["Available"] = 1] = "Available";
+  CopyState[CopyState["Copied"] = 2] = "Copied";
+})(CopyState || (CopyState = {}));
+var InputLabel = function InputLabel(_ref) {
+  var inputId = _ref.inputId,
+    text = _ref.text,
+    size = _ref.size,
+    margin = _ref.margin,
+    requiredProp = _ref.required,
+    showCopyButton = _ref.showCopyButton;
+  // 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];
+  var _React$useState3 = React.useState(CopyState.Available),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    copyState = _React$useState4[0],
+    setCopyState = _React$useState4[1];
+
+  /**
+   * Checks if field is set as required and we have to mark it accordingly.
+   */
+  React.useEffect(function () {
+    if (requiredProp === undefined) {
+      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);
+      }
+    } else setRequired(Boolean(requiredProp));
+  }, []);
+  /**
+   * 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$getElementB2;
+    (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
+  };
+  var copyInputClick = function copyInputClick(e) {
+    var _document$getElementB3;
+    e.preventDefault();
+    if (copyState == CopyState.Copied) return;
+    var val = (_document$getElementB3 = document.getElementById(inputId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.value;
+    if (val) {
+      window.navigator.clipboard.writeText(val);
+      setCopyState(CopyState.Copied);
+      setTimeout(function () {
+        setCopyState(CopyState.Available);
+      }, 1000);
+    }
+  };
+  return /*#__PURE__*/_jsx(LabelRow, {
+    margin: margin,
+    children: /*#__PURE__*/_jsxs(LabelRowInner, {
+      size: size,
+      children: [/*#__PURE__*/_jsx(Label, {
+        htmlFor: inputId,
+        onClick: function onClick() {
+          return onTriggerClick(inputId);
+        },
+        className: size || '',
+        children: text
+      }), required && /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
+        size: "16px",
+        color: COLORS.critical_500
+      }), showCopyButton && /*#__PURE__*/_jsx(CopyContainer, {
+        className: copyState != CopyState.Available ? "disabled" : "",
+        onClick: copyInputClick,
+        children: size == Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
+          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
+        }) : /*#__PURE__*/_jsx(ComponentXXS, {
+          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
+        })
+      })]
+    })
+  });
+};
+InputLabel.propTypes = {
+  inputId: _pt.string.isRequired,
+  text: _pt.string.isRequired,
+  margin: _pt.string,
+  required: _pt.bool,
+  showCopyButton: _pt.bool
+};
+export default InputLabel;
+//# sourceMappingURL=Label.js.map