@chayns-components/core 5.0.0-beta.270 → 5.0.0-beta.271
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.
|
@@ -14,7 +14,7 @@ export type NumberInputProps = {
|
|
|
14
14
|
*/
|
|
15
15
|
maxNumber?: number;
|
|
16
16
|
/**
|
|
17
|
-
* The number that should be displayed formatted in the input field. NOTE:
|
|
17
|
+
* The number that should be displayed formatted in the input field. NOTE: The number has to match the mode (integer, decimal or money)
|
|
18
18
|
*/
|
|
19
19
|
number: number | null;
|
|
20
20
|
/**
|
|
@@ -24,7 +24,11 @@ export type NumberInputProps = {
|
|
|
24
24
|
/**
|
|
25
25
|
* Callback function that is called when the input gets out of focus
|
|
26
26
|
*/
|
|
27
|
-
|
|
27
|
+
onBlur?: (newNumber: number | null) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Callback function that is called when the input changes
|
|
30
|
+
*/
|
|
31
|
+
onChange?: (newNumber: number | null) => void;
|
|
28
32
|
/**
|
|
29
33
|
* Whether the input is disabled
|
|
30
34
|
*/
|
|
@@ -18,10 +18,12 @@ const NumberInput = _ref => {
|
|
|
18
18
|
maxNumber = Infinity,
|
|
19
19
|
number,
|
|
20
20
|
placeholder,
|
|
21
|
-
|
|
22
|
-
isDisabled
|
|
21
|
+
onBlur,
|
|
22
|
+
isDisabled,
|
|
23
|
+
onChange
|
|
23
24
|
} = _ref;
|
|
24
25
|
const [stringValue, setStringValue] = (0, _react.useState)('');
|
|
26
|
+
const localPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : isMoneyInput ? '€' : undefined;
|
|
25
27
|
const handleChange = (0, _react.useCallback)(function () {
|
|
26
28
|
let newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
27
29
|
if (typeof newValue !== 'number') {
|
|
@@ -36,52 +38,65 @@ const NumberInput = _ref => {
|
|
|
36
38
|
isMoneyInput
|
|
37
39
|
}));
|
|
38
40
|
}, [isMoneyInput]);
|
|
39
|
-
const
|
|
41
|
+
const onLocalChange = event => {
|
|
40
42
|
const newValue = event.target.value;
|
|
41
43
|
const sanitizedValue = newValue
|
|
42
|
-
// Removes everything except numbers
|
|
44
|
+
// Removes everything except numbers, commas and points
|
|
43
45
|
.replace(_number.NUMBER_CLEAR_REGEX, '')
|
|
44
46
|
// Calculations need points for decimal indication
|
|
45
47
|
.replace(',', '.');
|
|
46
|
-
if (sanitizedValue.
|
|
47
|
-
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
48
|
+
if (sanitizedValue.length === 0) {
|
|
49
|
+
setStringValue('');
|
|
50
|
+
if (typeof onChange === 'function') {
|
|
51
|
+
onChange === null || onChange === void 0 || onChange(null);
|
|
52
|
+
}
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Allows numbers, one (comma/point) and any number of decimal places
|
|
57
|
+
if (isDecimalInput && _number.DECIMAL_TEST.test(sanitizedValue)) {
|
|
58
|
+
const parsedNumber = (0, _number2.parseFloatAndRound)({
|
|
59
|
+
stringValue: sanitizedValue
|
|
60
|
+
});
|
|
61
|
+
if (parsedNumber > maxNumber) {
|
|
56
62
|
return;
|
|
57
63
|
}
|
|
64
|
+
setStringValue(sanitizedValue.replace('.', ','));
|
|
65
|
+
if (typeof onChange === 'function') {
|
|
66
|
+
onChange(parsedNumber);
|
|
67
|
+
}
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
58
70
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
setStringValue(sanitizedValue.replace('.', ','));
|
|
71
|
+
// Allows numbers, one (comma/point) and 2 numbers of decimal places
|
|
72
|
+
if (isMoneyInput && _number.MONEY_TEST.test(sanitizedValue)) {
|
|
73
|
+
const parsedNumber = (0, _number2.parseFloatAndRound)({
|
|
74
|
+
stringValue: sanitizedValue,
|
|
75
|
+
decimals: 2
|
|
76
|
+
});
|
|
77
|
+
if (parsedNumber > maxNumber) {
|
|
69
78
|
return;
|
|
70
79
|
}
|
|
80
|
+
setStringValue(sanitizedValue.replace('.', ','));
|
|
81
|
+
if (typeof onChange === 'function') {
|
|
82
|
+
onChange(parsedNumber);
|
|
83
|
+
}
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
71
86
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
87
|
+
// Allows numbers but excludes numbers with leading 0
|
|
88
|
+
if (_number.INTEGER_TEST.test(sanitizedValue)) {
|
|
89
|
+
const parsedNumber = Number(sanitizedValue);
|
|
90
|
+
if (parsedNumber > maxNumber) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
setStringValue(sanitizedValue);
|
|
94
|
+
if (typeof onChange === 'function') {
|
|
95
|
+
onChange(parsedNumber);
|
|
79
96
|
}
|
|
80
|
-
} else {
|
|
81
|
-
setStringValue('');
|
|
82
97
|
}
|
|
83
98
|
};
|
|
84
|
-
const
|
|
99
|
+
const onLocalBlur = () => {
|
|
85
100
|
const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;
|
|
86
101
|
const parsedValue = (0, _number2.parseFloatAndRound)({
|
|
87
102
|
stringValue: sanitizedValue
|
|
@@ -90,7 +105,9 @@ const NumberInput = _ref => {
|
|
|
90
105
|
number: parsedValue,
|
|
91
106
|
isMoneyInput
|
|
92
107
|
}));
|
|
93
|
-
|
|
108
|
+
if (typeof onBlur === 'function') {
|
|
109
|
+
onBlur(parsedValue === 0 ? null : parsedValue);
|
|
110
|
+
}
|
|
94
111
|
};
|
|
95
112
|
const onFocus = () => {
|
|
96
113
|
setStringValue(stringValue.replaceAll('.', ''));
|
|
@@ -100,10 +117,10 @@ const NumberInput = _ref => {
|
|
|
100
117
|
}, [handleChange, number]);
|
|
101
118
|
return /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
102
119
|
inputMode: "decimal",
|
|
103
|
-
onChange:
|
|
120
|
+
onChange: onLocalChange,
|
|
104
121
|
value: stringValue,
|
|
105
|
-
placeholder:
|
|
106
|
-
onBlur:
|
|
122
|
+
placeholder: localPlaceholder,
|
|
123
|
+
onBlur: onLocalBlur,
|
|
107
124
|
onFocus: onFocus,
|
|
108
125
|
isDisabled: isDisabled
|
|
109
126
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onNumberChange","isDisabled","stringValue","setStringValue","useState","handleChange","useCallback","newValue","arguments","length","undefined","parsedValue","parseFloatAndRound","toString","formateNumber","onChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","trim","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onBlur","onFocus","replaceAll","useEffect","createElement","inputMode","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n /**\n * Whether the user can add decimal places. Enables the user to input a zero as first number\n */\n isDecimalInput?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one leading zero\n */\n isMoneyInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * The number that should be displayed formatted in the input field. NOTE: A zero as number is not allowed\n */\n number: number | null;\n /**\n * The placeholder that should be in the input\n */\n placeholder?: string;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onNumberChange: (newNumber: number | null) => void;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n maxNumber = Infinity,\n number,\n placeholder,\n onNumberChange,\n isDisabled,\n}) => {\n const [stringValue, setStringValue] = useState<string>('');\n\n const handleChange = useCallback(\n (newValue: number | null = null) => {\n if (typeof newValue !== 'number') {\n setStringValue('');\n\n return;\n }\n\n const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n },\n [isMoneyInput]\n );\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = event.target.value;\n\n const sanitizedValue = newValue\n // Removes everything except numbers and commas (decimals should be indicated with a comma)\n .replace(NUMBER_CLEAR_REGEX, '')\n // Calculations need points for decimal indication\n .replace(',', '.');\n\n if (sanitizedValue.trim().length > 0) {\n // Allows numbers, a comma and any number of decimal places\n if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n return;\n }\n\n // Allows numbers, a comma and 2 numbers of decimal places\n if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({\n stringValue: sanitizedValue,\n decimals: 2,\n });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n return;\n }\n\n // Allows numbers but excludes numbers with leading 0\n if (INTEGER_TEST.test(sanitizedValue)) {\n const parsedNumber = Number(sanitizedValue);\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue);\n }\n } else {\n setStringValue('');\n }\n };\n\n const onBlur = () => {\n const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n setStringValue(\n stringValue.length === 0\n ? ''\n : formateNumber({\n number: parsedValue,\n isMoneyInput,\n })\n );\n\n onNumberChange(parsedValue === 0 ? null : parsedValue);\n };\n\n const onFocus = () => {\n setStringValue(stringValue.replaceAll('.', ''));\n };\n\n useEffect(() => {\n handleChange(number);\n }, [handleChange, number]);\n\n return (\n <Input\n inputMode=\"decimal\"\n onChange={onChange}\n value={stringValue}\n placeholder={placeholder}\n onBlur={onBlur}\n onFocus={onFocus}\n isDisabled={isDisabled}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onBlur","isDisabled","onChange","stringValue","setStringValue","useState","localPlaceholder","undefined","handleChange","useCallback","newValue","arguments","length","parsedValue","parseFloatAndRound","toString","formateNumber","onLocalChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onLocalBlur","onFocus","replaceAll","useEffect","createElement","inputMode","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n /**\n * Whether the user can add decimal places. Enables the user to input a zero as first number\n */\n isDecimalInput?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one leading zero\n */\n isMoneyInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * The number that should be displayed formatted in the input field. NOTE: The number has to match the mode (integer, decimal or money)\n */\n number: number | null;\n /**\n * The placeholder that should be in the input\n */\n placeholder?: string;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | null) => void;\n /**\n * Callback function that is called when the input changes\n */\n onChange?: (newNumber: number | null) => void;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n {\n isDecimalInput,\n isMoneyInput,\n maxNumber = Infinity,\n number,\n placeholder,\n onBlur,\n isDisabled,\n onChange\n }) => {\n const [stringValue, setStringValue] = useState<string>('');\n\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const handleChange = useCallback(\n (newValue: number | null = null) => {\n if (typeof newValue !== 'number') {\n setStringValue('');\n\n return;\n }\n\n const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n },\n [isMoneyInput]\n );\n\n const onLocalChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = event.target.value;\n\n const sanitizedValue = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '')\n // Calculations need points for decimal indication\n .replace(',', '.');\n\n if (sanitizedValue.length === 0) {\n setStringValue('');\n\n if (typeof onChange === 'function') {\n onChange?.(null);\n }\n\n return;\n }\n\n // Allows numbers, one (comma/point) and any number of decimal places\n if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(parsedNumber);\n }\n\n return;\n }\n\n // Allows numbers, one (comma/point) and 2 numbers of decimal places\n if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({\n stringValue: sanitizedValue,\n decimals: 2,\n });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(parsedNumber);\n }\n\n return;\n }\n\n // Allows numbers but excludes numbers with leading 0\n if (INTEGER_TEST.test(sanitizedValue)) {\n const parsedNumber = Number(sanitizedValue);\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue);\n\n if (typeof onChange === 'function') {\n onChange(parsedNumber);\n }\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n setStringValue(\n stringValue.length === 0\n ? ''\n : formateNumber({\n number: parsedValue,\n isMoneyInput,\n })\n );\n\n if (typeof onBlur === 'function') {\n onBlur(parsedValue === 0 ? null : parsedValue);\n }\n };\n\n const onFocus = () => {\n setStringValue(stringValue.replaceAll('.', ''));\n };\n\n useEffect(() => {\n handleChange(number);\n }, [handleChange, number]);\n\n return (\n <Input\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={stringValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onFocus}\n isDisabled={isDisabled}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAmE,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAV,wBAAAM,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAsCnE,MAAMW,WAAiC,GAAGC,IAAA,IAUhC;EAAA,IATN;IACIC,cAAc;IACdC,YAAY;IACZC,SAAS,GAAGC,QAAQ;IACpBC,MAAM;IACNC,WAAW;IACXC,MAAM;IACNC,UAAU;IACVC;EACJ,CAAC,GAAAT,IAAA;EACD,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAS,EAAE,CAAC;EAE1D,MAAMC,gBAAgB,GAAGP,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAKJ,YAAY,GAAG,GAAG,GAAGY,SAAU;EAExE,MAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC5B,YAAoC;IAAA,IAAnCC,QAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAJ,SAAA,GAAAI,SAAA,MAAG,IAAI;IAC3B,IAAI,OAAOD,QAAQ,KAAK,QAAQ,EAAE;MAC9BN,cAAc,CAAC,EAAE,CAAC;MAElB;IACJ;IAEA,MAAMS,WAAW,GAAG,IAAAC,2BAAkB,EAAC;MAAEX,WAAW,EAAEO,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEK,QAAQ,CAAC;IAAE,CAAC,CAAC;IAE7EX,cAAc,CAAC,IAAAY,sBAAa,EAAC;MAAElB,MAAM,EAAEe,WAAW;MAAElB;IAAa,CAAC,CAAC,CAAC;EACxE,CAAC,EACD,CAACA,YAAY,CACjB,CAAC;EAED,MAAMsB,aAAa,GAAIC,KAAoC,IAAK;IAC5D,MAAMR,QAAQ,GAAGQ,KAAK,CAACC,MAAM,CAACC,KAAK;IAEnC,MAAMC,cAAc,GAAGX;IACnB;IAAA,CACCY,OAAO,CAACC,0BAAkB,EAAE,EAAE;IAC/B;IAAA,CACCD,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;IAEtB,IAAID,cAAc,CAACT,MAAM,KAAK,CAAC,EAAE;MAC7BR,cAAc,CAAC,EAAE,CAAC;MAElB,IAAI,OAAOF,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG,IAAI,CAAC;MACpB;MAEA;IACJ;;IAEA;IACA,IAAIR,cAAc,IAAI8B,oBAAY,CAACC,IAAI,CAACJ,cAAc,CAAC,EAAE;MACrD,MAAMK,YAAY,GAAG,IAAAZ,2BAAkB,EAAC;QAAEX,WAAW,EAAEkB;MAAe,CAAC,CAAC;MAExE,IAAIK,YAAY,GAAG9B,SAAS,EAAE;QAC1B;MACJ;MAEAQ,cAAc,CAACiB,cAAc,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAEhD,IAAI,OAAOpB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACwB,YAAY,CAAC;MAC1B;MAEA;IACJ;;IAEA;IACA,IAAI/B,YAAY,IAAIgC,kBAAU,CAACF,IAAI,CAACJ,cAAc,CAAC,EAAE;MACjD,MAAMK,YAAY,GAAG,IAAAZ,2BAAkB,EAAC;QACpCX,WAAW,EAAEkB,cAAc;QAC3BO,QAAQ,EAAE;MACd,CAAC,CAAC;MAEF,IAAIF,YAAY,GAAG9B,SAAS,EAAE;QAC1B;MACJ;MAEAQ,cAAc,CAACiB,cAAc,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAEhD,IAAI,OAAOpB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACwB,YAAY,CAAC;MAC1B;MAEA;IACJ;;IAEA;IACA,IAAIG,oBAAY,CAACJ,IAAI,CAACJ,cAAc,CAAC,EAAE;MACnC,MAAMK,YAAY,GAAGI,MAAM,CAACT,cAAc,CAAC;MAE3C,IAAIK,YAAY,GAAG9B,SAAS,EAAE;QAC1B;MACJ;MAEAQ,cAAc,CAACiB,cAAc,CAAC;MAE9B,IAAI,OAAOnB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACwB,YAAY,CAAC;MAC1B;IACJ;EACJ,CAAC;EAED,MAAMK,WAAW,GAAGA,CAAA,KAAM;IACtB,MAAMV,cAAc,GAAGlB,WAAW,CAACS,MAAM,KAAK,CAAC,GAAG,GAAG,GAAGT,WAAW;IACnE,MAAMU,WAAW,GAAG,IAAAC,2BAAkB,EAAC;MAAEX,WAAW,EAAEkB;IAAe,CAAC,CAAC;IAEvEjB,cAAc,CACVD,WAAW,CAACS,MAAM,KAAK,CAAC,GAClB,EAAE,GACF,IAAAI,sBAAa,EAAC;MACZlB,MAAM,EAAEe,WAAW;MACnBlB;IACJ,CAAC,CACT,CAAC;IAED,IAAI,OAAOK,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAACa,WAAW,KAAK,CAAC,GAAG,IAAI,GAAGA,WAAW,CAAC;IAClD;EACJ,CAAC;EAED,MAAMmB,OAAO,GAAGA,CAAA,KAAM;IAClB5B,cAAc,CAACD,WAAW,CAAC8B,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;EACnD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACZ1B,YAAY,CAACV,MAAM,CAAC;EACxB,CAAC,EAAE,CAACU,YAAY,EAAEV,MAAM,CAAC,CAAC;EAE1B,oBACInC,MAAA,CAAAS,OAAA,CAAA+D,aAAA,CAACrE,MAAA,CAAAM,OAAK;IACFgE,SAAS,EAAC,SAAS;IACnBlC,QAAQ,EAAEe,aAAc;IACxBG,KAAK,EAAEjB,WAAY;IACnBJ,WAAW,EAAEO,gBAAiB;IAC9BN,MAAM,EAAE+B,WAAY;IACpBC,OAAO,EAAEA,OAAQ;IACjB/B,UAAU,EAAEA;EAAW,CAC1B,CAAC;AAEV,CAAC;AAEDT,WAAW,CAAC6C,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAEzB9C,WAAW;AAAA+C,OAAA,CAAAnE,OAAA,GAAAkE,QAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.271",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "8ae780d07dfb9296e5f32014e7aaef972c13b41f"
|
|
69
69
|
}
|