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

package/dist/umd/HyperLink/styling.js

@@ -1,114 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", ".."], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require(".."));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.styledComponents, global._);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _styledComponents, _) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.invertedStyle = exports.defaultStyle = undefined;
-  const defaultStyle = exports.defaultStyle = _styledComponents.css`
-  outline: none;
-  padding: 2px 0;
-  text-decoration-thickness: 2px;
-  text-decoration-style: solid;
-  text-underline-offset: 2px;
-  text-decoration-line: none;
-
-  &:link {
-    font-weight: 700;
-    color: ${_.COLORS.primary_500};
-  }
-
-  &:visited {
-    color: ${_.COLORS.accent1_500};
-  }
-
-  &:hover,
-  &.hover-state {
-    color: ${_.COLORS.primary_700};
-    text-decoration-line: underline;
-  }
-
-  &:focus,
-  &.focus-state {
-    border-radius: 2px;
-    background: ${_.COLORS.primary_800};
-    color: ${_.COLORS.white};
-  }
-
-  &:active,
-  &.active-state {
-    border-radius: 2px;
-    background: ${_.COLORS.primary_800};
-    color: ${_.COLORS.white};
-  }
-
-
-  &:focus:hover,
-  &:active:hover,
-  &.active-state:hover,
-  &.focus-state:hover{
-    text-decoration-line: none;
-    color: ${_.COLORS.white};
-    opacity: 0.9;
-  }
-`;
-  const invertedStyle = exports.invertedStyle = _styledComponents.css`
-  outline: none;
-  padding: 2px 0;
-
-  text-decoration-thickness: 2px;
-  text-decoration-style: solid;
-  text-underline-offset: 2px;
-  text-decoration-line: underline;
-
-  &:link {
-    font-weight: 700;
-    color: ${_.COLORS.white};
-  }
-
-  &:visited {
-    color: ${_.COLORS.neutral_100};
-  }
-
-  &:focus,
-  &.focus-state {
-    border-radius: 2px;
-    text-decoration-line: none;
-    background: ${_.COLORS.white};
-    color: ${_.COLORS.neutral_800};
-  }
-
-  &:hover,
-  &.hover-state {
-    text-decoration-line: none;
-  }
-
-  &:active,
-  &.active-state {
-    border-radius: 2px;
-    text-decoration-line: none;
-    background: ${_.COLORS.white};
-    color: ${_.COLORS.neutral_800};
-  }
-
-  &:focus:hover,
-  &:active:hover {
-    text-decoration-line: none;
-    color: ${_.COLORS.neutral_800};
-    opacity: 0.9;
-  }
-`;
-});
-//# sourceMappingURL=styling.js.map

package/dist/umd/HyperLink/styling.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;;;;;;;;;AAGO,QAAMA,YAAY,WAAZA,YAAY,GAAGC,qBAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,SAAOC,WAAY;AAChC;AACA;AACA;AACA,aAAaD,SAAOE,WAAY;AAChC;AACA;AACA;AACA;AACA,aAAaF,SAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,SAAOI,WAAY;AACrC,aAAaJ,SAAOK,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA,kBAAkBL,SAAOI,WAAY;AACrC,aAAaJ,SAAOK,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,SAAOK,KAAM;AAC1B;AACA;AA7CO,CAAA;AAgDA,QAAMC,aAAa,WAAbA,aAAa,GAAGP,qBAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,SAAOK,KAAM;AAC1B;AACA;AACA;AACA,aAAaL,SAAOO,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,SAAOK,KAAM;AAC/B,aAAaL,SAAOQ,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,SAAOK,KAAM;AAC/B,aAAaL,SAAOQ,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,aAAaR,SAAOQ,WAAY;AAChC;AACA;AA5CO,CAAA","sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${COLORS.primary_500};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${COLORS.accent1_500};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${COLORS.primary_700};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${COLORS.primary_800};\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${COLORS.primary_800};\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${COLORS.white};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${COLORS.white};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${COLORS.neutral_100};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${COLORS.neutral_800};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"file":"styling.js"}

package/dist/umd/InputFields/Checkbox.js

@@ -1,267 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../icons/systemicons/SystemIcons", "../styles", "../types", "../styles/typography"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("../styles/typography"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.SystemIcons, global.styles, global.types, global.typography);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _SystemIcons, _styles, _types, _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
-    };
-  }
-
-  const StyledCheckBox = _styledComponents2.default.div`
-  display: flex;
-  width: 100%;
-  min-height: 48px;
-  min-width: 48px;
-
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-  cursor: pointer;
-
-  color: ${_styles.COLORS.black};
-
-  .pointerTransparent {
-    pointer-events: none;
-  }
-
-  .checkbox-icon {
-    margin: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    height: 36px;
-    min-width: 36px;
-    border-radius: 50%;
-
-    svg {
-      color: ${props => props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600};
-    }
-  }
-
-  .checkbox-label {
-    user-select: none;
-    cursor: inherit;
-  }
-
-  &.small {
-    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
-    .checkbox-label {
-      padding-top: 14px;
-    }
-  }
-
-  &.medium {
-    ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
-    .checkbox-label {
-      padding-top: 12px;
-    }
-  }
-
-  &.large {
-    ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
-    .checkbox-label {
-      padding-top: 12px;
-    }
-  }
-
-  &:not(.disabled):focus {
-    outline: none;
-
-    .checkbox-icon {
-      background-color: ${_styles.COLORS.white};
-      box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-
-      svg {
-        color: ${_styles.COLORS.neutral_600};
-      }
-    }
-  }
-
-  &:not(.disabled):hover {
-    .checkbox-icon {
-      background-color: ${_styles.COLORS.primary_20};
-
-      svg {
-        color: ${_styles.COLORS.primary_700};
-      }
-    }
-  }
-
-  &:not(.disabled):active {
-    .checkbox-icon {
-      background: ${_styles.COLORS.primary_100};
-      box-shadow: none;
-
-      svg {
-        color: ${_styles.COLORS.primary_800};
-      }
-    }
-  }
-
-  &.disabled {
-    box-shadow: none;
-    cursor: not-allowed;
-
-    color: ${_styles.COLORS.neutral_300};
-
-    .checkbox-icon,
-    .checkbox-label {
-      pointer-events: none;
-    }
-
-    .checkbox-icon{
-      background-color: ${_styles.COLORS.white};
-    }
-
-    .checkbox-icon svg {
-      color: ${_styles.COLORS.neutral_300};
-    }
-  }
-`;
-  const Checkbox = /*#__PURE__*/React.forwardRef(({
-    id,
-    selected,
-    select,
-    label,
-    showWarning,
-    iconPointerEventsTransparent,
-    disabled,
-    margin,
-    size,
-    semiSelected,
-    children,
-    tabIndexVal
-  }, ref) => {
-    const onKeyPress = e => {
-      if (e.keyCode === 13 && !disabled) {
-        select(!selected);
-      }
-    };
-
-    const handleClick = () => {
-      if (disabled) {
-        return;
-      }
-
-      select(!selected);
-    };
-
-    size = size ?? _types.Size.Medium;
-    return /*#__PURE__*/React.createElement(StyledCheckBox, {
-      key: id,
-      ref: ref,
-      disabled: disabled,
-      className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
-      selected: selected,
-      tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-      showWarning: showWarning,
-      margin: margin,
-      onClick: handleClick,
-      onKeyDown: onKeyPress,
-      onMouseDown: e => e.preventDefault()
-    }, /*#__PURE__*/React.createElement("div", {
-      id: id,
-      className: 'checkbox-icon'
-    }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
-      className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-      size: "24px"
-    }) : semiSelected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxSemi, {
-      className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-      size: "24px"
-    }) : /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOff, {
-      className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-      size: "24px"
-    })), label && /*#__PURE__*/React.createElement("label", {
-      className: 'checkbox-label',
-      htmlFor: id
-    }, label), !label && /*#__PURE__*/React.createElement("label", {
-      className: 'checkbox-label',
-      htmlFor: id
-    }, children));
-  });
-  Checkbox.propTypes = {
-    id: _propTypes2.default.string.isRequired,
-    selected: _propTypes2.default.bool.isRequired,
-    select: _propTypes2.default.func.isRequired,
-    label: _propTypes2.default.string,
-    showWarning: _propTypes2.default.bool,
-    disabled: _propTypes2.default.bool,
-    margin: _propTypes2.default.string,
-    iconPointerEventsTransparent: _propTypes2.default.bool,
-    semiSelected: _propTypes2.default.bool,
-    tabIndexVal: _propTypes2.default.number
-  };
-  exports.default = Checkbox;
-});
-//# sourceMappingURL=Checkbox.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","tabIndexVal","Checkbox","onKeyPress","e","handleClick","size","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport { Size } from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\n\r\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    outline: none;\r\n\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n\r\n      svg {\r\n        color: ${COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .checkbox-icon {\r\n      background: ${COLORS.primary_100};\r\n      box-shadow: none;\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: none;\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon{\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface Props {\r\n  id: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  showWarning?: boolean;\r\n  disabled?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  iconPointerEventsTransparent?: boolean;\r\n  semiSelected?: boolean;\r\n  tabIndexVal?: number;\r\n}\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            showWarning,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            tabIndexVal\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = () => {\r\n    if (disabled) {\r\n      return;\r\n    }\r\n    select(!selected);\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\r\n                    selected={selected}\r\n                    tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    showWarning={showWarning}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={e => e.preventDefault()}>\r\n      <div id={id} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\r\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"file":"Checkbox.js"}