@laerdal/life-react-components 1.7.0-dev.7.full → 1.7.0-dev.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Chips/ActionChip.cjs +4 -4
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +4 -4
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipStyles.cjs +3 -15
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.d.ts +0 -3
- package/dist/Chips/ChipStyles.js +2 -5
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChipTypes.d.ts +6 -18
- package/dist/Chips/ChoiceChips.cjs +2 -2
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +2 -2
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +3 -3
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +3 -3
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +4 -4
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +4 -4
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/Chips/index.cjs +1 -1
- package/dist/Chips/index.cjs.map +1 -1
- package/dist/Chips/index.d.ts +1 -1
- package/dist/Chips/index.js +1 -1
- package/dist/Chips/index.js.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs +398 -0
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -0
- package/dist/ChipsInput/ChipDropdownInput.d.ts +22 -0
- package/dist/ChipsInput/ChipDropdownInput.js +382 -0
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -0
- package/dist/ChipsInput/ChipInput.cjs +141 -0
- package/dist/ChipsInput/ChipInput.cjs.map +1 -0
- package/dist/{Chips → ChipsInput}/ChipInput.d.ts +1 -4
- package/dist/ChipsInput/ChipInput.js +122 -0
- package/dist/ChipsInput/ChipInput.js.map +1 -0
- package/dist/ChipsInput/ChipInputField.cjs +193 -0
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -0
- package/dist/ChipsInput/ChipInputField.d.ts +24 -0
- package/dist/ChipsInput/ChipInputField.js +158 -0
- package/dist/ChipsInput/ChipInputField.js.map +1 -0
- package/dist/ChipsInput/ChipInputTypes.cjs +6 -0
- package/dist/ChipsInput/ChipInputTypes.cjs.map +1 -0
- package/dist/ChipsInput/ChipInputTypes.d.ts +22 -0
- package/dist/ChipsInput/ChipInputTypes.js +2 -0
- package/dist/ChipsInput/ChipInputTypes.js.map +1 -0
- package/dist/ChipsInput/index.cjs +19 -0
- package/dist/ChipsInput/index.cjs.map +1 -0
- package/dist/ChipsInput/index.d.ts +1 -0
- package/dist/ChipsInput/index.js +2 -0
- package/dist/ChipsInput/index.js.map +1 -0
- package/dist/Dropdown/DropdownContent.cjs +14 -21
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +14 -21
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/index.cjs +0 -8
- package/dist/Dropdown/index.cjs.map +1 -1
- package/dist/Dropdown/index.d.ts +1 -2
- package/dist/Dropdown/index.js +1 -2
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/index.cjs +14 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/Chips/ChipInput.cjs +0 -199
- package/dist/Chips/ChipInput.cjs.map +0 -1
- package/dist/Chips/ChipInput.js +0 -182
- package/dist/Chips/ChipInput.js.map +0 -1
- package/dist/Dropdown/ChipDropdownInput.cjs +0 -431
- package/dist/Dropdown/ChipDropdownInput.cjs.map +0 -1
- package/dist/Dropdown/ChipDropdownInput.d.ts +0 -24
- package/dist/Dropdown/ChipDropdownInput.js +0 -418
- package/dist/Dropdown/ChipDropdownInput.js.map +0 -1
package/dist/Dropdown/index.cjs
CHANGED
|
@@ -11,12 +11,6 @@ Object.defineProperty(exports, "BasicDropdown", {
|
|
|
11
11
|
return _BasicDropdown.default;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
Object.defineProperty(exports, "ChipDropdownInput", {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function get() {
|
|
17
|
-
return _ChipDropdownInput.default;
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
14
|
Object.defineProperty(exports, "DropdownButton", {
|
|
21
15
|
enumerable: true,
|
|
22
16
|
get: function get() {
|
|
@@ -42,7 +36,5 @@ var _BasicDropdown = _interopRequireDefault(require("./BasicDropdown"));
|
|
|
42
36
|
|
|
43
37
|
var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
|
|
44
38
|
|
|
45
|
-
var _ChipDropdownInput = _interopRequireDefault(require("./ChipDropdownInput"));
|
|
46
|
-
|
|
47
39
|
var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
|
|
48
40
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };\n"],"file":"index.cjs"}
|
package/dist/Dropdown/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import DropdownFilter from './DropdownFilter';
|
|
2
2
|
import BasicDropdown from './BasicDropdown';
|
|
3
3
|
import DropdownButton from './DropdownButton';
|
|
4
|
-
import ChipDropdownInput from './ChipDropdownInput';
|
|
5
4
|
import DropdownContent from './DropdownContent';
|
|
6
5
|
export type { DropdownItem } from './DropdownContent';
|
|
7
|
-
export { DropdownFilter, BasicDropdown, DropdownButton,
|
|
6
|
+
export { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };
|
package/dist/Dropdown/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import DropdownFilter from './DropdownFilter';
|
|
2
2
|
import BasicDropdown from './BasicDropdown';
|
|
3
3
|
import DropdownButton from './DropdownButton';
|
|
4
|
-
import ChipDropdownInput from './ChipDropdownInput';
|
|
5
4
|
import DropdownContent from './DropdownContent';
|
|
6
|
-
export { DropdownFilter, BasicDropdown, DropdownButton,
|
|
5
|
+
export { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };
|
|
7
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":["DropdownFilter","BasicDropdown","DropdownButton","
|
|
1
|
+
{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":["DropdownFilter","BasicDropdown","DropdownButton","DropdownContent"],"mappings":"AAAA,OAAOA,cAAP,MAA2B,kBAA3B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAKA,SAASH,cAAT,EAAyBC,aAAzB,EAAwCC,cAAxC,EAAwDC,eAAxD","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focusStyles","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focusStyles","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yHAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAAtE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,kQACKC,eAAOC,WADZ,EAEeD,eAAOE,WAFtB,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,8HACTC,eAAOK,WADE,CAAlC;;AAGP,IAAMC,uBAAuB,OAAGP,qBAAH,8HACGC,eAAOO,YADV,CAA7B;AAGA,IAAMC,kBAAkB,OAAGT,qBAAH,8HACQC,eAAOS,WADf,CAAxB;;AAIA,IAAMC,iBAAiB,GAAGlB,0BAAOmB,KAAV,yoDAenB,UAACjB,KAAD;AAAA,SACAA,KAAK,CAACkB,aAAN,oJAKiDZ,eAAOa,WALxD,6DAM2Cb,eAAOa,WANlD,wDAOsCb,eAAOa,WAP7C,MADA;AAAA,CAfmB,EAkCjB,mCAAkBC,+BAAmBC,MAArC,EAA6Cf,eAAOG,WAApD,CAlCiB,EAqCnBa,oBAAYC,MArCO,EA4Cf,mCAAkBH,+BAAmBC,MAArC,EAA6Cf,eAAOG,WAApD,CA5Ce,EA+DZH,eAAOkB,KA/DK,EAiEnB,UAACxB,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAzC;AAAA,CAjEmB,EAkEnB,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAACyB,uBAAN,GAAgCf,4BAAhC,GAA+D,EAA3E;AAAA,CAlEmB,EAmEnB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAAC0B,kBAAN,GAA2Bd,uBAA3B,GAAqD,EAAjE;AAAA,CAnEmB,EAoEnB,UAACZ,KAAD;AAAA,SAAYA,KAAK,CAAC2B,YAAN,GAAqBb,kBAArB,GAA0C,EAAtD;AAAA,CApEmB,EAuECR,eAAOC,WAvER,EA4EVD,eAAOE,WA5EG,EA+EiBF,eAAOsB,WA/ExB,EAmFjBC,mBAnFiB,EAuGiBvB,eAAOwB,WAvGxB,EA2GiBxB,eAAOsB,WA3GxB,CAAvB;;;AAwHA,IAAMG,iBAAiB,OAAG1B,qBAAH,sUAEjB,qCAAoBe,+BAAmBY,OAAvC,EAAgD1B,eAAOkB,KAAvD,CAFiB,EAWjB,qCAAoBJ,+BAAmBY,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,YAAY,GAAGnC,0BAAOoC,IAAV,4MACd5B,eAAO6B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGtC,0BAAOC,GAAV,6WAIhBuB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMc,cAAc,GAAG,+BAAOD,OAAP,CAAH,0GAChB9B,eAAOgC,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,0GACd9B,eAAO6B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,0GACnB9B,eAAOG,WADY,CAAvB;;;AAMA,IAAMgC,UAAU,GAAG3C,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAM2C,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n color: ${COLORS.neutral_600} !important;\n pointer-events: none;\n outline: none;\n cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n box-shadow: inset 0 0 0 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n locked?: boolean;\n activeValidationMessage?: boolean;\n activeErrorMessage?: boolean;\n correctInput?: boolean;\n active?: boolean;\n withoutBorder?: boolean;\n size?: string;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 16px !important;\n\n outline: none;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px;\n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px;\n &::placeholder {\n font-size: 18px;\n }\n }\n\n color: ${COLORS.black} !important;\n\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n &:disabled {\n border: 1px solid ${COLORS.neutral_100};\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ${COLORS.neutral_300} !important;\n }\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n \n &.focus-visible{\n ${focusStyles}\n }\n\n &.error {\n border-radius: 4px;\n border-style: solid;\n border-width: 2px;\n border-color: #e97116;\n padding: 0 15px !important;\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &.error {\n margin-bottom: 0 !important;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &.active {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n \n`;\n\nconst ValidationStyling = css`\n &.error-msg {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n text-align: center;\n font-weight: 400;\n box-sizing: border-box;\n }\n\n &.error-msg {\n padding-top: 8px;\n padding-bottom: 0;\n ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n font-weight: 700;\n line-height: 15px;\n }\n`;\n\nexport const RequiredStar = styled.span`\n color: ${COLORS.critical_500};\n font-size: 28px;\n line-height: 12px;\n font-weight: 700;\n position: relative;\n top: 10px;\n`;\nexport const Warning = styled.div`\n font-size: 12px;\n line-height: 140%;\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 14px;\n }\n\n &.small {\n font-size: 12px;\n }\n &.medium {\n font-size: 14px;\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 4px;\n }\n`;\nexport const WarningMessage = styled(Warning)`\n color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n position: absolute;\n border-radius: 50%;\n`;\n"],"file":"styling.cjs"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,WAA7B,QAA+C,WAA/C;AACA,SAASC,mBAAT,EAA8BC,kBAA9B,EAAkDC,iBAAlD,EAAqEC,iBAArE,QAA8F,sBAA9F;
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n color: ${COLORS.neutral_600} !important;\n pointer-events: none;\n outline: none;\n cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n box-shadow: inset 0 0 0 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n locked?: boolean;\n activeValidationMessage?: boolean;\n activeErrorMessage?: boolean;\n correctInput?: boolean;\n active?: boolean;\n withoutBorder?: boolean;\n size?: string;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 16px !important;\n\n outline: none;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px;\n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px;\n &::placeholder {\n font-size: 18px;\n }\n }\n\n color: ${COLORS.black} !important;\n\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n &:disabled {\n border: 1px solid ${COLORS.neutral_100};\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ${COLORS.neutral_300} !important;\n }\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n \n &.focus-visible{\n ${focusStyles}\n }\n\n &.error {\n border-radius: 4px;\n border-style: solid;\n border-width: 2px;\n border-color: #e97116;\n padding: 0 15px !important;\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &.error {\n margin-bottom: 0 !important;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &.active {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n \n`;\n\nconst ValidationStyling = css`\n &.error-msg {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n text-align: center;\n font-weight: 400;\n box-sizing: border-box;\n }\n\n &.error-msg {\n padding-top: 8px;\n padding-bottom: 0;\n ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n font-weight: 700;\n line-height: 15px;\n }\n`;\n\nexport const RequiredStar = styled.span`\n color: ${COLORS.critical_500};\n font-size: 28px;\n line-height: 12px;\n font-weight: 700;\n position: relative;\n top: 10px;\n`;\nexport const Warning = styled.div`\n font-size: 12px;\n line-height: 140%;\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 14px;\n }\n\n &.small {\n font-size: 12px;\n }\n &.medium {\n font-size: 14px;\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 4px;\n }\n`;\nexport const WarningMessage = styled(Warning)`\n color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n position: absolute;\n border-radius: 50%;\n`;\n"],"file":"styling.js"}
|
package/dist/index.cjs
CHANGED
|
@@ -531,5 +531,19 @@ Object.keys(_Image).forEach(function (key) {
|
|
|
531
531
|
});
|
|
532
532
|
});
|
|
533
533
|
|
|
534
|
+
var _ChipsInput = require("./ChipsInput");
|
|
535
|
+
|
|
536
|
+
Object.keys(_ChipsInput).forEach(function (key) {
|
|
537
|
+
if (key === "default" || key === "__esModule") return;
|
|
538
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
539
|
+
if (key in exports && exports[key] === _ChipsInput[key]) return;
|
|
540
|
+
Object.defineProperty(exports, key, {
|
|
541
|
+
enumerable: true,
|
|
542
|
+
get: function get() {
|
|
543
|
+
return _ChipsInput[key];
|
|
544
|
+
}
|
|
545
|
+
});
|
|
546
|
+
});
|
|
547
|
+
|
|
534
548
|
var _assets = require("./assets");
|
|
535
549
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.cjs"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.js"}
|
package/package.json
CHANGED
package/dist/Chips/ChipInput.cjs
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports.default = void 0;
|
|
11
|
-
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
|
-
var React = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
|
-
var _index = require("./index");
|
|
19
|
-
|
|
20
|
-
var _types = require("../types");
|
|
21
|
-
|
|
22
|
-
var _styling = require("../InputFields/styling");
|
|
23
|
-
|
|
24
|
-
var _styles = require("../styles");
|
|
25
|
-
|
|
26
|
-
var _SystemIcons = require("../icons/systemicons/SystemIcons");
|
|
27
|
-
|
|
28
|
-
var _ChipStyles = require("./ChipStyles");
|
|
29
|
-
|
|
30
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
-
|
|
32
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
-
|
|
34
|
-
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; }
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Import React libraries.
|
|
38
|
-
*/
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Import custom components.
|
|
42
|
-
*/
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Import custom styles.
|
|
46
|
-
*/
|
|
47
|
-
var ChipInput = function ChipInput(_ref) {
|
|
48
|
-
var values = _ref.values,
|
|
49
|
-
inputId = _ref.inputId,
|
|
50
|
-
variants = _ref.variants,
|
|
51
|
-
required = _ref.required,
|
|
52
|
-
icon = _ref.icon,
|
|
53
|
-
placeholder = _ref.placeholder,
|
|
54
|
-
validationType = _ref.validationType,
|
|
55
|
-
validationMessage = _ref.validationMessage,
|
|
56
|
-
onValueChange = _ref.onValueChange;
|
|
57
|
-
// Globally used variables within the chip input
|
|
58
|
-
var chipInput;
|
|
59
|
-
|
|
60
|
-
var _React$useState = React.useState([]),
|
|
61
|
-
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
62
|
-
chips = _React$useState2[0],
|
|
63
|
-
setChips = _React$useState2[1];
|
|
64
|
-
|
|
65
|
-
var _React$useState3 = React.useState(''),
|
|
66
|
-
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
|
67
|
-
value = _React$useState4[0],
|
|
68
|
-
setValue = _React$useState4[1];
|
|
69
|
-
/**
|
|
70
|
-
* Sets initial values for the chips.
|
|
71
|
-
*/
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
React.useEffect(function () {
|
|
75
|
-
// Let's add initial chip values
|
|
76
|
-
setChips(values);
|
|
77
|
-
}, [values]);
|
|
78
|
-
/**
|
|
79
|
-
* Adds a chip to the chip list.
|
|
80
|
-
* @param event - Event handler from the key down event.
|
|
81
|
-
*/
|
|
82
|
-
|
|
83
|
-
var onAddChip = function onAddChip(event) {
|
|
84
|
-
// Let's trigger only on enter, comma and space key press
|
|
85
|
-
if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
|
|
86
|
-
// Let's prevent default action - adding new key to the value
|
|
87
|
-
event.preventDefault(); // Let's add the chip
|
|
88
|
-
|
|
89
|
-
setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
|
|
90
|
-
onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value])); // Let's clear the old value
|
|
91
|
-
|
|
92
|
-
chipInput.value = '';
|
|
93
|
-
setValue('');
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
/**
|
|
97
|
-
* Removes a specific chip from the chip list.
|
|
98
|
-
* @param index - Index of the chip that needs to be removed.
|
|
99
|
-
* @param elementToAdd - Element which needs to be added in the deleted element place.
|
|
100
|
-
*/
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
var onRemoveChip = function onRemoveChip(index, elementToAdd) {
|
|
104
|
-
// Let's copy the chips
|
|
105
|
-
var newChips = (0, _toConsumableArray2.default)(chips); // Let's delete the chip
|
|
106
|
-
// If necessary, let's replace it with a different chip
|
|
107
|
-
|
|
108
|
-
if (elementToAdd) {
|
|
109
|
-
newChips.splice(index, 1, elementToAdd);
|
|
110
|
-
} else {
|
|
111
|
-
newChips.splice(index, 1);
|
|
112
|
-
} // Let's update the chip list
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
setChips((0, _toConsumableArray2.default)(newChips));
|
|
116
|
-
onValueChange((0, _toConsumableArray2.default)(newChips));
|
|
117
|
-
};
|
|
118
|
-
/**
|
|
119
|
-
* Changes a status of the chip to edit.
|
|
120
|
-
* @param text - Text of the chip that is being edited.
|
|
121
|
-
* @param index - Index of the chip in the array.
|
|
122
|
-
*/
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
var onEditChip = function onEditChip(text, index) {
|
|
126
|
-
// Let's check if we have to add value as a chip (in case we have entered something in the input field)
|
|
127
|
-
if (chipInput.value !== '') {
|
|
128
|
-
// Let's replace the chip
|
|
129
|
-
onRemoveChip(index, chipInput.value);
|
|
130
|
-
} else {
|
|
131
|
-
// Let's just remove the chip
|
|
132
|
-
onRemoveChip(index);
|
|
133
|
-
} // Let's update the text value of input field
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
chipInput.value = text;
|
|
137
|
-
setValue(text);
|
|
138
|
-
};
|
|
139
|
-
/**
|
|
140
|
-
* Return Chip Input component.
|
|
141
|
-
*/
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
145
|
-
children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.RequiredStar, {
|
|
146
|
-
children: "*"
|
|
147
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipInputContainer, {
|
|
148
|
-
onClick: function onClick() {
|
|
149
|
-
return chipInput.focus();
|
|
150
|
-
},
|
|
151
|
-
id: inputId,
|
|
152
|
-
className: validationType,
|
|
153
|
-
children: [chips.map(function (chip, index) {
|
|
154
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputChip, {
|
|
155
|
-
icon: icon,
|
|
156
|
-
size: _types.Size.Medium,
|
|
157
|
-
variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
|
|
158
|
-
text: chip,
|
|
159
|
-
onRemove: function onRemove() {
|
|
160
|
-
return onRemoveChip(index);
|
|
161
|
-
},
|
|
162
|
-
onClick: function onClick() {
|
|
163
|
-
return onEditChip(chip, index);
|
|
164
|
-
}
|
|
165
|
-
}, "chip_".concat(index));
|
|
166
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipInputEl, {
|
|
167
|
-
type: "text",
|
|
168
|
-
onChange: function onChange(event) {
|
|
169
|
-
return setValue(event.target.value);
|
|
170
|
-
},
|
|
171
|
-
onKeyDown: function onKeyDown(event) {
|
|
172
|
-
onAddChip(event);
|
|
173
|
-
},
|
|
174
|
-
placeholder: placeholder && chips.length === 0 ? placeholder : '',
|
|
175
|
-
ref: function ref(input) {
|
|
176
|
-
chipInput = input;
|
|
177
|
-
}
|
|
178
|
-
})]
|
|
179
|
-
}), validationMessage && validationType === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
|
|
180
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
|
|
181
|
-
size: "20px",
|
|
182
|
-
color: _styles.COLORS.critical_500
|
|
183
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
184
|
-
children: validationMessage
|
|
185
|
-
})]
|
|
186
|
-
}) : validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
|
|
187
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
|
|
188
|
-
size: "20px",
|
|
189
|
-
color: _styles.COLORS.critical_400
|
|
190
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
191
|
-
children: validationMessage
|
|
192
|
-
})]
|
|
193
|
-
})]
|
|
194
|
-
});
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
var _default = ChipInput;
|
|
198
|
-
exports.default = _default;
|
|
199
|
-
//# sourceMappingURL=ChipInput.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Chips/ChipInput.tsx"],"names":["ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","React","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Size","Medium","length","target","input","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}`}/>\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.cjs"}
|
package/dist/Chips/ChipInput.js
DELETED
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Import React libraries.
|
|
6
|
-
*/
|
|
7
|
-
import * as React from 'react';
|
|
8
|
-
/**
|
|
9
|
-
* Import custom components.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
import { InputChip } from './index';
|
|
13
|
-
import { Size } from '../types';
|
|
14
|
-
import { WarningMessage, ErrorMessage } from '../InputFields/styling';
|
|
15
|
-
import { COLORS } from '../styles';
|
|
16
|
-
import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
|
|
17
|
-
/**
|
|
18
|
-
* Import custom styles.
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
import { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';
|
|
22
|
-
/**
|
|
23
|
-
* Import custom types.
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
29
|
-
|
|
30
|
-
var ChipInput = function ChipInput(_ref) {
|
|
31
|
-
var values = _ref.values,
|
|
32
|
-
inputId = _ref.inputId,
|
|
33
|
-
variants = _ref.variants,
|
|
34
|
-
required = _ref.required,
|
|
35
|
-
icon = _ref.icon,
|
|
36
|
-
placeholder = _ref.placeholder,
|
|
37
|
-
validationType = _ref.validationType,
|
|
38
|
-
validationMessage = _ref.validationMessage,
|
|
39
|
-
onValueChange = _ref.onValueChange;
|
|
40
|
-
// Globally used variables within the chip input
|
|
41
|
-
var chipInput;
|
|
42
|
-
|
|
43
|
-
var _React$useState = React.useState([]),
|
|
44
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
45
|
-
chips = _React$useState2[0],
|
|
46
|
-
setChips = _React$useState2[1];
|
|
47
|
-
|
|
48
|
-
var _React$useState3 = React.useState(''),
|
|
49
|
-
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
50
|
-
value = _React$useState4[0],
|
|
51
|
-
setValue = _React$useState4[1];
|
|
52
|
-
/**
|
|
53
|
-
* Sets initial values for the chips.
|
|
54
|
-
*/
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
React.useEffect(function () {
|
|
58
|
-
// Let's add initial chip values
|
|
59
|
-
setChips(values);
|
|
60
|
-
}, [values]);
|
|
61
|
-
/**
|
|
62
|
-
* Adds a chip to the chip list.
|
|
63
|
-
* @param event - Event handler from the key down event.
|
|
64
|
-
*/
|
|
65
|
-
|
|
66
|
-
var onAddChip = function onAddChip(event) {
|
|
67
|
-
// Let's trigger only on enter, comma and space key press
|
|
68
|
-
if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
|
|
69
|
-
// Let's prevent default action - adding new key to the value
|
|
70
|
-
event.preventDefault(); // Let's add the chip
|
|
71
|
-
|
|
72
|
-
setChips([].concat(_toConsumableArray(chips), [value]));
|
|
73
|
-
onValueChange([].concat(_toConsumableArray(chips), [value])); // Let's clear the old value
|
|
74
|
-
|
|
75
|
-
chipInput.value = '';
|
|
76
|
-
setValue('');
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
/**
|
|
80
|
-
* Removes a specific chip from the chip list.
|
|
81
|
-
* @param index - Index of the chip that needs to be removed.
|
|
82
|
-
* @param elementToAdd - Element which needs to be added in the deleted element place.
|
|
83
|
-
*/
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
var onRemoveChip = function onRemoveChip(index, elementToAdd) {
|
|
87
|
-
// Let's copy the chips
|
|
88
|
-
var newChips = _toConsumableArray(chips); // Let's delete the chip
|
|
89
|
-
// If necessary, let's replace it with a different chip
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
if (elementToAdd) {
|
|
93
|
-
newChips.splice(index, 1, elementToAdd);
|
|
94
|
-
} else {
|
|
95
|
-
newChips.splice(index, 1);
|
|
96
|
-
} // Let's update the chip list
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
setChips(_toConsumableArray(newChips));
|
|
100
|
-
onValueChange(_toConsumableArray(newChips));
|
|
101
|
-
};
|
|
102
|
-
/**
|
|
103
|
-
* Changes a status of the chip to edit.
|
|
104
|
-
* @param text - Text of the chip that is being edited.
|
|
105
|
-
* @param index - Index of the chip in the array.
|
|
106
|
-
*/
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
var onEditChip = function onEditChip(text, index) {
|
|
110
|
-
// Let's check if we have to add value as a chip (in case we have entered something in the input field)
|
|
111
|
-
if (chipInput.value !== '') {
|
|
112
|
-
// Let's replace the chip
|
|
113
|
-
onRemoveChip(index, chipInput.value);
|
|
114
|
-
} else {
|
|
115
|
-
// Let's just remove the chip
|
|
116
|
-
onRemoveChip(index);
|
|
117
|
-
} // Let's update the text value of input field
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
chipInput.value = text;
|
|
121
|
-
setValue(text);
|
|
122
|
-
};
|
|
123
|
-
/**
|
|
124
|
-
* Return Chip Input component.
|
|
125
|
-
*/
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
129
|
-
children: [required && /*#__PURE__*/_jsx(RequiredStar, {
|
|
130
|
-
children: "*"
|
|
131
|
-
}), /*#__PURE__*/_jsxs(ChipInputContainer, {
|
|
132
|
-
onClick: function onClick() {
|
|
133
|
-
return chipInput.focus();
|
|
134
|
-
},
|
|
135
|
-
id: inputId,
|
|
136
|
-
className: validationType,
|
|
137
|
-
children: [chips.map(function (chip, index) {
|
|
138
|
-
return /*#__PURE__*/_jsx(InputChip, {
|
|
139
|
-
icon: icon,
|
|
140
|
-
size: Size.Medium,
|
|
141
|
-
variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
|
|
142
|
-
text: chip,
|
|
143
|
-
onRemove: function onRemove() {
|
|
144
|
-
return onRemoveChip(index);
|
|
145
|
-
},
|
|
146
|
-
onClick: function onClick() {
|
|
147
|
-
return onEditChip(chip, index);
|
|
148
|
-
}
|
|
149
|
-
}, "chip_".concat(index));
|
|
150
|
-
}), /*#__PURE__*/_jsx(ChipInputEl, {
|
|
151
|
-
type: "text",
|
|
152
|
-
onChange: function onChange(event) {
|
|
153
|
-
return setValue(event.target.value);
|
|
154
|
-
},
|
|
155
|
-
onKeyDown: function onKeyDown(event) {
|
|
156
|
-
onAddChip(event);
|
|
157
|
-
},
|
|
158
|
-
placeholder: placeholder && chips.length === 0 ? placeholder : '',
|
|
159
|
-
ref: function ref(input) {
|
|
160
|
-
chipInput = input;
|
|
161
|
-
}
|
|
162
|
-
})]
|
|
163
|
-
}), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
|
|
164
|
-
children: [/*#__PURE__*/_jsx(TechnicalWarning, {
|
|
165
|
-
size: "20px",
|
|
166
|
-
color: COLORS.critical_500
|
|
167
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
168
|
-
children: validationMessage
|
|
169
|
-
})]
|
|
170
|
-
}) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
|
|
171
|
-
children: [/*#__PURE__*/_jsx(TechnicalWarning, {
|
|
172
|
-
size: "20px",
|
|
173
|
-
color: COLORS.critical_400
|
|
174
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
175
|
-
children: validationMessage
|
|
176
|
-
})]
|
|
177
|
-
})]
|
|
178
|
-
});
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
export default ChipInput;
|
|
182
|
-
//# sourceMappingURL=ChipInput.js.map
|