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

package/dist/esm/Chips/ChipInput.js

@@ -1,144 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom components.
- */
-
-import { InputChip } from './index';
-import { Size } from '../types';
-import { WarningMessage, ErrorMessage } from '../InputFields/styling';
-import { COLORS } from '../styles';
-import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
-/**
- * Import custom styles.
- */
-
-import { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';
-/**
- * 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(RequiredStar, null, "*"), /*#__PURE__*/React.createElement(ChipInputContainer, {
-    onClick: () => chipInput.focus(),
-    id: inputId,
-    className: validationType
-  }, chips.map((chip, index) => /*#__PURE__*/React.createElement(InputChip, {
-    icon: icon,
-    size: 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(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(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_500
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-};
-
-export default ChipInput;
-//# sourceMappingURL=ChipInput.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["React","InputChip","Size","WarningMessage","ErrorMessage","COLORS","TechnicalWarning","ChipInputContainer","ChipInputEl","RequiredStar","ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","chips","setChips","useState","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Medium","length","target","input","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"}

package/dist/esm/Chips/ChipStyles.js

@@ -1,428 +0,0 @@
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-/**
- * Import custom style properties.
- */
-
-import { COLORS } from '../styles';
-import { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
-/**
- *
- * Chip styles.
- */
-
-export const ChipContainer = styled.div`
-  cursor: pointer;
-  color: ${COLORS.white};
-  display: inline-block;
-
-  > button > div > .remove > path {
-    fill: ${COLORS.white};
-  }
-
-  &:hover,
-  &:focus {
-    > button > div > .remove > path {
-      fill: ${COLORS.white};
-    }
-  }
-
-  button {
-    background: transparent;
-    display: inline-block;
-    padding: 0;
-    width: auto;
-    height: auto;
-    color: inherit;
-
-    div {
-      color: inherit;
-      width: auto;
-      height: auto;
-
-      svg {
-        color: inherit;
-      }
-    }
-
-    &:hover,
-    &:hover:not(:disabled),
-    :focus,
-    :focus:not(:disabled) {
-      background: transparent;
-      display: inline-block;
-      padding: 0;
-      width: auto;
-      height: auto;
-      color: inherit;
-      outline: none;
-
-      div {
-        box-shadow: none;
-        background-color: transparent;
-
-        svg {
-          color: inherit;
-        }
-      }
-    }
-  }
-
-  &.small {
-    ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white)}
-    border-radius: 40px;
-    height: 24px;
-    padding: 0px 12px;
-    margin: 12px 0px;
-    border-radius: 40px;
-    display: inline-flex;
-    align-items: center;
-
-    &.icon-chip {
-      padding: 0px 12px 0px 8px;
-    }
-
-    &.button-chip {
-      padding: 0px 8px 0px 12px;
-    }
-
-    &.icon-chip.button-chip {
-      padding: 0px 8px;
-    }
-
-    > button {
-      width: 16px;
-      height: 16px;
-
-      > div {
-        width: 16px;
-        height: 16px;
-
-        svg {
-          padding: 0px;
-          margin-left: 4x;
-        }
-      }
-    }
-
-    svg {
-      vertical-align: middle;
-
-      &.icon {
-        margin-right: 4px;
-      }
-
-      &.remove {
-        margin-left: 4px;
-      }
-    }
-  }
-
-  &.medium {
-    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}
-    border-radius: 80px;
-    height: 40px;
-    padding: 0px 16px;
-    margin: 4px 0px;
-    display: inline-flex;
-    align-items: center;
-
-    &.icon-chip {
-      padding: 0px 16px 0px 12px;
-    }
-
-    &.button-chip {
-      padding: 0px 12px 0px 16px;
-    }
-
-    &.icon-chip.button-chip {
-      padding: 0px 12px;
-    }
-
-    > button {
-      width: 20px;
-      height: 20px;
-
-      > div {
-        width: 20px;
-        height: 20px;
-
-        svg {
-          padding: 0px;
-          margin-left: 6px;
-        }
-      }
-    }
-
-    svg {
-      vertical-align: middle;
-
-      &.icon {
-        margin-right: 6px;
-      }
-
-      &.remove {
-        margin-left: 6px;
-      }
-    }
-  }
-
-  &.large {
-    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.white)}
-    border-radius: 120px;
-    height: 56px;
-    padding: 0px 20px;
-    margin: 0px;
-    display: inline-flex;
-    align-items: center;
-
-    &.icon-chip {
-      padding: 0px 20px 0px 16px;
-    }
-
-    &.button-chip {
-      padding: 0px 16px 0px 20px;
-    }
-
-    &.icon-chip.button-chip {
-      padding: 0px 16px;
-    }
-
-    > button {
-      width: 24px;
-      height: 24px;
-
-      > div {
-        width: 24px;
-        height: 24px;
-
-        svg {
-          padding: 0px;
-          margin-left: 8px;
-        }
-      }
-    }
-
-    svg {
-      vertical-align: middle;
-
-      &.icon {
-        margin-right: 8px;
-      }
-
-      &.remove {
-        margin-left: 8px;
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    background: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-
-    > button > div > .remove > path {
-      fill: ${COLORS.neutral_300};
-    }
-
-    &:hover {
-      background: ${COLORS.neutral_100};
-    }
-
-    &:active {
-      background: ${COLORS.neutral_100};
-    }
-  }
-
-  &.normal {
-    background: ${COLORS.primary_500};
-
-    &:hover {
-      background: ${COLORS.primary_700};
-    }
-
-    &:active {
-      background: ${COLORS.primary_800};
-    }
-  }
-
-  &.warning {
-    color: ${COLORS.black};
-    background: ${COLORS.warning_100};
-
-    > button > div > .remove > path {
-      fill: ${COLORS.warning_500};
-    }
-
-    &:hover {
-      background: ${COLORS.warning_400};
-    }
-
-    &:active {
-      background: ${COLORS.warning_400};
-    }
-  }
-
-  &.error {
-    color: ${COLORS.black};
-    background: ${COLORS.critical_100};
-
-    > button > div > .remove > path {
-      fill: ${COLORS.critical_500};
-    }
-
-    &:hover {
-      background: ${COLORS.critical_400};
-    }
-
-    &:active {
-      background: ${COLORS.critical_400};
-    }
-  }
-`;
-export const ChipInputContainer = styled.div`
-  min-height: 56px;
-  height: auto;
-  width: 100%;
-  border-radius: 4px;
-  border: 2px solid transparent;
-  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};
-  background-color: #fff;
-  box-sizing: border-box;
-  padding: 16px 16px 8px 16px;
-  box-sizing: border-box;
-  width: 100%;
-  cursor: text;
-  outline: none;
-  border-radius: 4.5px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  color: ${COLORS.black} !important;
-
-  &.warning,
-  &.warning:hover,
-  &.warning:focus {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
-  }
-
-  &.error,
-  &.error:hover,
-  &.error:focus {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
-  }
-
-  > div {
-    margin-right: 8px;
-    margin-bottom: 8px;
-  }
-
-  &.active {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
-  }
-
-  &:hover {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
-  }
-`;
-export const RequiredStar = styled.span`
-  color: ${COLORS.critical_500};
-  font-size: 28px;
-  line-height: 12px;
-  float: right;
-  font-weight: 700;
-  position: relative;
-  top: 10px;
-`;
-export const FilterChipContainer = styled(ChipContainer)`
-  &.normal {
-    background: ${COLORS.white};
-    color: ${COLORS.neutral_600};
-    border: 2px solid;
-    border-color: ${COLORS.neutral_200};
-
-    &:hover {
-      background: ${COLORS.primary_20};
-      color: ${COLORS.primary_600};
-      border-color: ${COLORS.primary_200};
-    }
-
-    &:active,
-    &:focus {
-      background: ${COLORS.primary_100};
-      color: ${COLORS.primary_800};
-      border-color: ${COLORS.primary_300};
-      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-      outline: none;
-    }
-  }
-
-  &.selected {
-    background: ${COLORS.primary_500};
-    color: ${COLORS.white};
-    border: 2px solid;
-    border-color: ${COLORS.primary_500};
-
-    &:hover {
-      background: ${COLORS.primary_700};
-      color: ${COLORS.white};
-      border-color: ${COLORS.primary_700};
-    }
-
-    &:active,
-    &:focus {
-      background: ${COLORS.primary_800};
-      color: ${COLORS.white};
-      border-color: ${COLORS.primary_800};
-      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-      outline: none;
-    }
-  }
-`;
-export const ActionChipContainer = styled(ChipContainer)`
-  &.normal {
-    background: ${COLORS.white};
-    color: ${COLORS.neutral_600};
-    border: 2px solid;
-    border-color: ${COLORS.neutral_200};
-
-    &:hover {
-      background: ${COLORS.primary_20};
-      color: ${COLORS.primary_600};
-      border-color: ${COLORS.primary_200};
-    }
-
-    &:active,
-    &:focus {
-      background: ${COLORS.primary_100};
-      color: ${COLORS.primary_800};
-      border-color: ${COLORS.primary_300};
-      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-    }
-  }
-`;
-export const ChipInputEl = styled.input`
-  height: 40px;
-  width: auto;
-  display: inline-flex;
-  border: none;
-  outline: none;
-  margin-top: 5px;
-  margin-bottom: 8px;
-
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  color: ${COLORS.black} !important;
-`;
-//# sourceMappingURL=ChipStyles.js.map

package/dist/esm/Chips/ChipStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ChipContainer","div","white","Bold","neutral_100","neutral_300","primary_500","primary_700","primary_800","black","warning_100","warning_500","warning_400","critical_100","critical_500","critical_400","ChipInputContainer","neutral_400","Regular","RequiredStar","span","FilterChipContainer","neutral_600","neutral_200","primary_20","primary_600","primary_200","primary_100","primary_300","focus_25","focus","ActionChipContainer","ChipInputEl","input"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,kBAA/C,EAAmEC,kBAAnE,QAAkH,sBAAlH;AAEA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,aAAa,GAAGN,MAAM,CAACO,GAAI;AACxC;AACA,WAAWN,MAAM,CAACO,KAAM;AACxB;AACA;AACA;AACA,YAAYP,MAAM,CAACO,KAAM;AACzB;AACA;AACA;AACA;AACA;AACA,cAAcP,MAAM,CAACO,KAAM;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,kBAAkB,CAACD,kBAAkB,CAACK,IAApB,EAA0BR,MAAM,CAACO,KAAjC,CAAwC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,iBAAiB,CAACC,kBAAkB,CAACK,IAApB,EAA0BR,MAAM,CAACO,KAAjC,CAAwC;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMN,iBAAiB,CAACE,kBAAkB,CAACK,IAApB,EAA0BR,MAAM,CAACO,KAAjC,CAAwC;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,MAAM,CAACS,WAAY;AACrC,aAAaT,MAAM,CAACU,WAAY;AAChC;AACA;AACA,cAAcV,MAAM,CAACU,WAAY;AACjC;AACA;AACA;AACA,oBAAoBV,MAAM,CAACS,WAAY;AACvC;AACA;AACA;AACA,oBAAoBT,MAAM,CAACS,WAAY;AACvC;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACW,WAAY;AACrC;AACA;AACA,oBAAoBX,MAAM,CAACY,WAAY;AACvC;AACA;AACA;AACA,oBAAoBZ,MAAM,CAACa,WAAY;AACvC;AACA;AACA;AACA;AACA,aAAab,MAAM,CAACc,KAAM;AAC1B,kBAAkBd,MAAM,CAACe,WAAY;AACrC;AACA;AACA,cAAcf,MAAM,CAACgB,WAAY;AACjC;AACA;AACA;AACA,oBAAoBhB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA;AACA,oBAAoBjB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA;AACA;AACA,aAAajB,MAAM,CAACc,KAAM;AAC1B,kBAAkBd,MAAM,CAACkB,YAAa;AACtC;AACA;AACA,cAAclB,MAAM,CAACmB,YAAa;AAClC;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,YAAa;AACxC;AACA;AACA;AACA,oBAAoBpB,MAAM,CAACoB,YAAa;AACxC;AACA;AACA,CA5QO;AA8QP,OAAO,MAAMC,kBAAkB,GAAGtB,MAAM,CAACO,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,sCAAsCN,MAAM,CAACsB,WAAY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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n/**\n *\n * Chip styles.\n */\nexport const ChipContainer = styled.div`\n  cursor: pointer;\n  color: ${COLORS.white};\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ${COLORS.white};\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ${COLORS.white};\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.neutral_300};\n    }\n\n    &:hover {\n      background: ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.neutral_100};\n    }\n  }\n\n  &.normal {\n    background: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n    }\n\n    &:active {\n      background: ${COLORS.primary_800};\n    }\n  }\n\n  &.warning {\n    color: ${COLORS.black};\n    background: ${COLORS.warning_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.warning_500};\n    }\n\n    &:hover {\n      background: ${COLORS.warning_400};\n    }\n\n    &:active {\n      background: ${COLORS.warning_400};\n    }\n  }\n\n  &.error {\n    color: ${COLORS.black};\n    background: ${COLORS.critical_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.critical_500};\n    }\n\n    &:hover {\n      background: ${COLORS.critical_400};\n    }\n\n    &:active {\n      background: ${COLORS.critical_400};\n    }\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\n\nexport const FilterChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ${COLORS.primary_500};\n    color: ${COLORS.white};\n    border: 2px solid;\n    border-color: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_700};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_800};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n`;\n\nexport const ActionChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n    }\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n`;\n"],"file":"ChipStyles.js"}

package/dist/esm/Chips/ChoiceChips.js

@@ -1,64 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom styles.
- */
-
-import { FilterChipContainer } from './ChipStyles';
-/**
- * Import custom types.
- */
-
-const ChoiceChips = ({
-  selected,
-  variant,
-  disabled,
-  onClick,
-  values
-}) => {
-  /**
-   * Globally used variables within the component.
-   */
-  const [selectedChip, setSelectedChip] = React.useState('');
-  /**
-   * Set the selected value for the chip.
-   */
-
-  React.useEffect(() => {
-    setSelectedChip(selected);
-  }, [selected]);
-  /**
-   * Sets selected chip and fires an event to parent component.
-   * @param value - Chip which was selected.
-   */
-
-  const onSelectChip = value => {
-    // Update selected chip
-    setSelectedChip(value.value); // Fire the event
-
-    onClick(value);
-  };
-
-  const handleKeyDown = (e, value) => {
-    if (e.keyCode === 13) {
-      onSelectChip(value);
-    }
-  };
-  /**
-   * Return Choice Chip component.
-   */
-
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, values.map(value => /*#__PURE__*/React.createElement(FilterChipContainer, {
-    key: value.value,
-    tabIndex: disabled ? -1 : 0,
-    className: `${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`,
-    onClick: () => onSelectChip(value),
-    onKeyDown: e => handleKeyDown(e, value)
-  }, value.label)));
-};
-
-export default ChoiceChips;
-//# sourceMappingURL=ChoiceChips.js.map

package/dist/esm/Chips/ChoiceChips.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Chips/ChoiceChips.tsx"],"names":["React","FilterChipContainer","ChoiceChips","selected","variant","disabled","onClick","values","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","e","keyCode","map","size","label"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACA;AACA;;AAGA,MAAMC,WAAqD,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,OAAZ;AAAqBC,EAAAA,QAArB;AAA+BC,EAAAA,OAA/B;AAAwCC,EAAAA;AAAxC,CAAD,KAAuE;AACnI;AACF;AACA;AACE,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAEA;AACF;AACA;;AACEV,EAAAA,KAAK,CAACW,SAAN,CAAgB,MAAM;AACpBF,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,QAAMS,YAAY,GAAIC,KAAD,IAAsB;AACzC;AACAJ,IAAAA,eAAe,CAACI,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,CAACO,KAAD,CAAP;AACD,GAND;;AAQA,QAAMC,aAAa,GAAG,CAACC,CAAD,EAASF,KAAT,KAA8B;AAClD,QAAIE,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE,0CACGN,MAAM,CAACU,GAAP,CAAYJ,KAAD,iBACV,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAEA,KAAK,CAACA,KADb;AAEE,IAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,IAAA,SAAS,EAAG,GAAEQ,KAAK,CAACK,IAAK,IAAGb,QAAQ,GAAG,UAAH,GAAgBG,YAAY,KAAKK,KAAK,CAACA,KAAvB,GAA+B,UAA/B,GAA4CT,OAAQ,EAH1G;AAIE,IAAA,OAAO,EAAE,MAAMQ,YAAY,CAACC,KAAD,CAJ7B;AAKE,IAAA,SAAS,EAAEE,CAAC,IAAID,aAAa,CAACC,CAAD,EAAIF,KAAJ;AAL/B,KAMGA,KAAK,CAACM,KANT,CADD,CADH,CADF;AAcD,CAhDD;;AAkDA,eAAejB,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { FilterChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipValue, ChoiceChipProps } from './ChipTypes';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({ selected, variant, disabled, onClick, values }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.keyCode === 13) {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <FilterChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`}\n          onClick={() => onSelectChip(value)}\n          onKeyDown={e => handleKeyDown(e, value)}>\n          {value.label}\n        </FilterChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}