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

package/dist/umd/Chips/ActionChip.js

@@ -1,128 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons/index", "../types", "./ChipStyles"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons/index"), require("../types"), require("./ChipStyles"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.react, global.index, global.types, global.ChipStyles);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _react, _index, _types, _ChipStyles) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var React = _interopRequireWildcard(_react);
-
-  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;
-  }
-
-  /**
-   * Import React libraries.
-   */
-
-  /**
-   * Import custom components.
-   */
-
-  /**
-   * Import custom styles.
-   */
-
-  /**
-   * Import custom types.
-   */
-  const ActionChip = ({
-    icon,
-    text,
-    variant,
-    size,
-    disabled,
-    onClick
-  }) => {
-    /**
-     * Retrieves icon size based on the chip size.
-     * @returns A string indicating the icon size.
-     */
-    const getIconSize = () => {
-      let iconSize; // Calculate correct icon size
-
-      if (size === _types.Size.Small) {
-        iconSize = '16px';
-      } else if (size === _types.Size.Medium) {
-        iconSize = '20px';
-      } else {
-        iconSize = '24px';
-      }
-
-      return iconSize;
-    };
-    /**
-     * Return Action Chip component.
-     */
-
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ChipStyles.ActionChipContainer, {
-      className: `${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`,
-      onClick: () => onClick()
-    }, icon && _index.SystemIcons[icon]({
-      size: getIconSize(),
-      className: 'icon'
-    }), text));
-  };
-
-  exports.default = ActionChip;
-});
-//# sourceMappingURL=ActionChip.js.map

package/dist/umd/Chips/ActionChip.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["ActionChip","onClick","getIconSize","size","Size","iconSize","disabled","variant","icon","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGC,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAGC,QAAMA,UAAoD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAuCC,IAAAA;AAAvC,GAAD,KAAuE;AAClI;AACH;AACA;AACA;AACG,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAKC,YAAb,KAAA,EAAyB;AACvBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAIF,IAAI,KAAKC,YAAb,MAAA,EAA0B;AAC/BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACH;AACA;;;AACG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,MAAA,SAAS,EAAG,GAAEF,IAAK,IAAGG,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAAtF,EAAA;AAAqG,MAAA,OAAO,EAAE,MAAMP,OAAO;AAA3H,KAAA,EAEGO,IAAI,IAAI,mBAAA,IAAA,EAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBO,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFX,EAFJ,IAEI,CADF,CADF;AAvBF,GAAA;;oBAoCA,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n import {Size} from '../types'; \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}

package/dist/umd/Chips/ChipInput.js

@@ -1,209 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "./index", "../types", "../InputFields/styling", "../styles", "../icons/systemicons/SystemIcons", "./ChipStyles"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("./index"), require("../types"), require("../InputFields/styling"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("./ChipStyles"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.react, global.index, global.types, global.styling, global.styles, global.SystemIcons, global.ChipStyles);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _react, _index, _types, _styling, _styles, _SystemIcons, _ChipStyles) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var React = _interopRequireWildcard(_react);
-
-  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;
-  }
-
-  /**
-   * Import React libraries.
-   */
-
-  /**
-   * Import custom components.
-   */
-
-  /**
-   * Import custom styles.
-   */
-
-  /**
-   * Import custom types.
-   */
-  const ChipInput = ({
-    values,
-    inputId,
-    variants,
-    required,
-    icon,
-    placeholder,
-    validationType,
-    validationMessage,
-    onValueChange
-  }) => {
-    // Globally used variables within the chip input
-    let chipInput;
-    const [chips, setChips] = React.useState([]);
-    const [value, setValue] = React.useState('');
-    /**
-     * Sets initial values for the chips.
-     */
-
-    React.useEffect(() => {
-      // Let's add initial chip values
-      setChips(values);
-    }, [values]);
-    /**
-     * Adds a chip to the chip list.
-     * @param event - Event handler from the key down event.
-     */
-
-    const onAddChip = event => {
-      // Let's trigger only on enter, comma and space key press
-      if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
-        // Let's prevent default action - adding new key to the value
-        event.preventDefault(); // Let's add the chip
-
-        setChips([...chips, value]);
-        onValueChange([...chips, value]); // Let's clear the old value
-
-        chipInput.value = '';
-        setValue('');
-      }
-    };
-    /**
-     * Removes a specific chip from the chip list.
-     * @param index - Index of the chip that needs to be removed.
-     * @param elementToAdd - Element which needs to be added in the deleted element place.
-     */
-
-
-    const onRemoveChip = (index, elementToAdd) => {
-      // Let's copy the chips
-      const newChips = [...chips]; // Let's delete the chip
-      // If necessary, let's replace it with a different chip
-
-      if (elementToAdd) {
-        newChips.splice(index, 1, elementToAdd);
-      } else {
-        newChips.splice(index, 1);
-      } // Let's update the chip list
-
-
-      setChips([...newChips]);
-      onValueChange([...newChips]);
-    };
-    /**
-     * Changes a status of the chip to edit.
-     * @param text - Text of the chip that is being edited.
-     * @param index - Index of the chip in the array.
-     */
-
-
-    const onEditChip = (text, index) => {
-      // Let's check if we have to add value as a chip (in case we have entered something in the input field)
-      if (chipInput.value !== '') {
-        // Let's replace the chip
-        onRemoveChip(index, chipInput.value);
-      } else {
-        // Let's just remove the chip
-        onRemoveChip(index);
-      } // Let's update the text value of input field
-
-
-      chipInput.value = text;
-      setValue(text);
-    };
-    /**
-     * Return Chip Input component.
-     */
-
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, required && /*#__PURE__*/React.createElement(_ChipStyles.RequiredStar, null, "*"), /*#__PURE__*/React.createElement(_ChipStyles.ChipInputContainer, {
-      onClick: () => chipInput.focus(),
-      id: inputId,
-      className: validationType
-    }, chips.map((chip, index) => /*#__PURE__*/React.createElement(_index.InputChip, {
-      icon: icon,
-      size: _types.Size.Medium,
-      variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
-      text: chip,
-      onRemove: () => onRemoveChip(index),
-      onClick: () => onEditChip(chip, index),
-      key: `chip_${index}`
-    })), /*#__PURE__*/React.createElement(_ChipStyles.ChipInputEl, {
-      type: "text",
-      onChange: event => setValue(event.target.value),
-      onKeyDown: event => {
-        onAddChip(event);
-      },
-      placeholder: placeholder && chips.length === 0 ? placeholder : '',
-      ref: input => {
-        chipInput = input;
-      }
-    })), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
-      size: "20px",
-      color: _styles.COLORS.critical_500
-    }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(_styling.ErrorMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
-      size: "20px",
-      color: _styles.COLORS.critical_400
-    }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-  };
-
-  exports.default = ChipInput;
-});
-//# sourceMappingURL=ChipInput.js.map

package/dist/umd/Chips/ChipInput.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["ChipInput","onValueChange","React","setChips","onAddChip","event","chipInput","setValue","onRemoveChip","newChips","onEditChip","required","validationType","Size","variants","index","placeholder","chips","input","validationMessage","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { Size } from '../types';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n  values,\n  inputId,\n  variants,\n  required,\n  icon,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n}: ChipInputProps) => {\n  // Globally used variables within the chip input\n  let chipInput: HTMLInputElement;\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      // Let's add the chip\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      // Let's clear the old value\n      chipInput.value = '';\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.value = text;\n    setValue(text);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <>\n      {required && <RequiredStar>*</RequiredStar>}\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n        {chips.map((chip: string, index: number) => (\n          <InputChip\n            icon={icon}\n            size={Size.Medium}\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n        <ChipInputEl\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n          ref={(input: HTMLInputElement) => {\n            chipInput = input;\n          }}\n        />\n      </ChipInputContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </>\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}