@laerdal/life-react-components 1.4.1-dev.6.full → 1.4.1-dev.8.full

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';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}

package/dist/umd/InputFields/Checkbox.js

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