@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/umd/Chips/ActionChip.js

@@ -0,0 +1,128 @@
+(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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,209 @@
+(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

@@ -0,0 +1 @@
+{"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"}