empower-container 0.1.24 → 0.1.25
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +378 -378
- package/dist/cjs/DatetimeFormatter.d.ts +3 -3
- package/dist/cjs/DatetimeFormatter.js +389 -389
- package/dist/cjs/Information.d.ts +10 -10
- package/dist/cjs/Information.js +63 -63
- package/dist/cjs/MenuBar.d.ts +24 -24
- package/dist/cjs/MenuBar.js +539 -539
- package/dist/cjs/Modal.d.ts +33 -33
- package/dist/cjs/Modal.js +44 -44
- package/dist/cjs/assets/Asset.d.ts +17 -17
- package/dist/cjs/assets/Asset.js +31 -31
- package/dist/cjs/constants/Constant.d.ts +15 -15
- package/dist/cjs/constants/Constant.js +35 -35
- package/dist/cjs/index.d.ts +3 -3
- package/dist/cjs/index.js +10 -10
- package/dist/cjs/inputs/Input.d.ts +25 -25
- package/dist/cjs/inputs/Input.js +106 -106
- package/dist/cjs/inputs/InputSelectionHandler.d.ts +3 -3
- package/dist/cjs/inputs/InputSelectionHandler.js +36 -36
- package/dist/cjs/inputs/Select.d.ts +28 -28
- package/dist/cjs/inputs/Select.js +403 -403
- package/dist/esm/DatetimeFormatter.d.ts +3 -3
- package/dist/esm/DatetimeFormatter.js +385 -385
- package/dist/esm/Information.d.ts +10 -10
- package/dist/esm/Information.js +38 -38
- package/dist/esm/MenuBar.d.ts +24 -24
- package/dist/esm/MenuBar.js +534 -534
- package/dist/esm/Modal.d.ts +33 -33
- package/dist/esm/Modal.js +39 -39
- package/dist/esm/assets/Asset.d.ts +17 -17
- package/dist/esm/assets/Asset.js +28 -28
- package/dist/esm/constants/Constant.d.ts +15 -15
- package/dist/esm/constants/Constant.js +32 -32
- package/dist/esm/index.d.ts +3 -3
- package/dist/esm/index.js +3 -3
- package/dist/esm/inputs/Input.d.ts +25 -25
- package/dist/esm/inputs/Input.js +104 -104
- package/dist/esm/inputs/InputSelectionHandler.d.ts +3 -3
- package/dist/esm/inputs/InputSelectionHandler.js +31 -31
- package/dist/esm/inputs/Select.d.ts +28 -28
- package/dist/esm/inputs/Select.js +399 -399
- package/dist/scss/components/_modal.scss +66 -66
- package/dist/scss/elements/_button.scss +132 -132
- package/dist/scss/elements/_index.scss +1 -1
- package/dist/scss/elements/_popover.scss +7 -7
- package/dist/scss/foundation/_colors.scss +59 -59
- package/dist/scss/foundation/_mixins.scss +40 -40
- package/dist/scss/foundation/_normalize.scss +203 -203
- package/dist/scss/foundation/_settings.scss +36 -36
- package/dist/scss/foundation/_typography.scss +94 -94
- package/dist/scss/library/_information.scss +72 -63
- package/dist/scss/library/_input.scss +37 -37
- package/dist/scss/library/_menubar.scss +241 -240
- package/dist/scss/library/_select.scss +258 -258
- package/dist/scss/style.scss +38 -38
- package/package.json +63 -62
- package/tscnofig.old +26 -26
package/dist/esm/inputs/Input.js
CHANGED
@@ -1,104 +1,104 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
13
|
-
import { Fragment } from "react";
|
14
|
-
import '../../scss/style.scss';
|
15
|
-
var sanitizeValue = function (txt, props) {
|
16
|
-
var pattern = null;
|
17
|
-
var newTxt = txt;
|
18
|
-
if (props && props.constructor === Object) {
|
19
|
-
if (props.allowedSymbols && props.allowedSymbols.constructor === Array && props.allowedSymbols.length > 0) {
|
20
|
-
pattern = "^a-zA-Z0-9";
|
21
|
-
pattern = new RegExp("[".concat(pattern).concat(props.allowedSymbols.join(''), " ]"), 'gi');
|
22
|
-
newTxt = newTxt.replace(pattern, "");
|
23
|
-
}
|
24
|
-
else {
|
25
|
-
pattern = "^a-zA-Z0-9";
|
26
|
-
pattern = new RegExp("[".concat(pattern, " ]"), 'gi');
|
27
|
-
newTxt = newTxt.replace(pattern, "");
|
28
|
-
}
|
29
|
-
if (props.alphabet === false) {
|
30
|
-
pattern = /[a-z]/gi;
|
31
|
-
newTxt = newTxt.replace(pattern, "");
|
32
|
-
}
|
33
|
-
if (props.numeric === false) {
|
34
|
-
pattern = /[0-9]+$/gi;
|
35
|
-
newTxt = newTxt.replace(pattern, "");
|
36
|
-
}
|
37
|
-
if (props.space === false) {
|
38
|
-
pattern = /\s/gi;
|
39
|
-
newTxt = newTxt.replace(pattern, "");
|
40
|
-
}
|
41
|
-
}
|
42
|
-
return newTxt;
|
43
|
-
};
|
44
|
-
var Input = function (_a) {
|
45
|
-
var config = _a.config, allowedChar = _a.allowedChar, customClass = _a.customClass, onChanged = _a.onChanged, keyPressed = _a.keyPressed;
|
46
|
-
customClass = customClass ? customClass : '';
|
47
|
-
var allowedTypes = [
|
48
|
-
'text', 'number', 'password', 'submit', 'reset', 'radio', 'checkbox', 'button',
|
49
|
-
'file', 'image', 'color', 'date', 'datetime-local', 'email', 'month', 'url', 'week',
|
50
|
-
'search', 'tel'
|
51
|
-
];
|
52
|
-
/**
|
53
|
-
* onChangeHandler
|
54
|
-
* get the current value from the input field
|
55
|
-
* @param {*} event - event which will be used to get the changed value
|
56
|
-
*/
|
57
|
-
var onChangeHandler = function (event) {
|
58
|
-
if (config.type === 'text' && allowedChar && allowedChar.constructor === Object && Object.keys(allowedChar).length > 0) {
|
59
|
-
event.target.value = sanitizeValue(event.target.value, allowedChar);
|
60
|
-
}
|
61
|
-
if (onChanged) {
|
62
|
-
if (event.target.value && config.maxLength) {
|
63
|
-
if (event.target.value.toString().length <= config.maxLength) {
|
64
|
-
return onChanged(event);
|
65
|
-
}
|
66
|
-
}
|
67
|
-
else {
|
68
|
-
return onChanged(event);
|
69
|
-
}
|
70
|
-
}
|
71
|
-
else {
|
72
|
-
console.error("No onChanged property");
|
73
|
-
}
|
74
|
-
};
|
75
|
-
/**
|
76
|
-
* onKeypressHandler
|
77
|
-
* get the current value from the input field
|
78
|
-
* @param {*} event - event which will be used to get the changed value
|
79
|
-
*/
|
80
|
-
var onKeypressHandler = function (event) {
|
81
|
-
if (event.key === 'Enter') {
|
82
|
-
if (keyPressed) {
|
83
|
-
return keyPressed(event);
|
84
|
-
}
|
85
|
-
}
|
86
|
-
};
|
87
|
-
/**
|
88
|
-
* clearValuesHandler
|
89
|
-
* reset value into null and return it to parent
|
90
|
-
* @param {*} event - event
|
91
|
-
*/
|
92
|
-
var clearValuesHandler = function (event) {
|
93
|
-
if (event) {
|
94
|
-
event.preventDefault();
|
95
|
-
return null;
|
96
|
-
}
|
97
|
-
};
|
98
|
-
return (_jsx("div", __assign({ className: "em-input " + customClass }, { children: config.type === 'time' ? (_jsxs("div", __assign({ className: 'e-input e-input-time ' + (config.disabled ? 'input-disabled' : ""), "data-testid": "component-input" }, { children: [_jsx("input", __assign({}, config, { onChange: onChangeHandler })), config.disabled || !config.value ? null : (_jsx("div", __assign({ className: 'e-input-icon', onClick: clearValuesHandler }, { children: _jsx("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.00005 14.7895L5.21058 17L10 12.2106L14.7895 17.0001L17 14.7895L12.2105 10.0001L17.0001 5.21053L14.7895 3L10 7.78953L5.21053 3.00005L3 5.21058L7.78948 10.0001L3.00005 14.7895Z", fill: "#A0AEC0" }) })) })))] }))) : allowedTypes.includes(config.type) ? config.label && config.label !== '' ?
|
99
|
-
(_jsxs(Fragment, { children: [_jsx("label", { children: config.label }), _jsx("input", __assign({ "data-testid": "component-input" }, config, { onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } }))] }))
|
100
|
-
:
|
101
|
-
(_jsx(Fragment, { children: _jsx("input", __assign({}, config, { className: "em-input-field", "data-testid": "component-input", onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } })) }))
|
102
|
-
: null })));
|
103
|
-
};
|
104
|
-
export default Input;
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
13
|
+
import { Fragment } from "react";
|
14
|
+
import '../../scss/style.scss';
|
15
|
+
var sanitizeValue = function (txt, props) {
|
16
|
+
var pattern = null;
|
17
|
+
var newTxt = txt;
|
18
|
+
if (props && props.constructor === Object) {
|
19
|
+
if (props.allowedSymbols && props.allowedSymbols.constructor === Array && props.allowedSymbols.length > 0) {
|
20
|
+
pattern = "^a-zA-Z0-9";
|
21
|
+
pattern = new RegExp("[".concat(pattern).concat(props.allowedSymbols.join(''), " ]"), 'gi');
|
22
|
+
newTxt = newTxt.replace(pattern, "");
|
23
|
+
}
|
24
|
+
else {
|
25
|
+
pattern = "^a-zA-Z0-9";
|
26
|
+
pattern = new RegExp("[".concat(pattern, " ]"), 'gi');
|
27
|
+
newTxt = newTxt.replace(pattern, "");
|
28
|
+
}
|
29
|
+
if (props.alphabet === false) {
|
30
|
+
pattern = /[a-z]/gi;
|
31
|
+
newTxt = newTxt.replace(pattern, "");
|
32
|
+
}
|
33
|
+
if (props.numeric === false) {
|
34
|
+
pattern = /[0-9]+$/gi;
|
35
|
+
newTxt = newTxt.replace(pattern, "");
|
36
|
+
}
|
37
|
+
if (props.space === false) {
|
38
|
+
pattern = /\s/gi;
|
39
|
+
newTxt = newTxt.replace(pattern, "");
|
40
|
+
}
|
41
|
+
}
|
42
|
+
return newTxt;
|
43
|
+
};
|
44
|
+
var Input = function (_a) {
|
45
|
+
var config = _a.config, allowedChar = _a.allowedChar, customClass = _a.customClass, onChanged = _a.onChanged, keyPressed = _a.keyPressed;
|
46
|
+
customClass = customClass ? customClass : '';
|
47
|
+
var allowedTypes = [
|
48
|
+
'text', 'number', 'password', 'submit', 'reset', 'radio', 'checkbox', 'button',
|
49
|
+
'file', 'image', 'color', 'date', 'datetime-local', 'email', 'month', 'url', 'week',
|
50
|
+
'search', 'tel'
|
51
|
+
];
|
52
|
+
/**
|
53
|
+
* onChangeHandler
|
54
|
+
* get the current value from the input field
|
55
|
+
* @param {*} event - event which will be used to get the changed value
|
56
|
+
*/
|
57
|
+
var onChangeHandler = function (event) {
|
58
|
+
if (config.type === 'text' && allowedChar && allowedChar.constructor === Object && Object.keys(allowedChar).length > 0) {
|
59
|
+
event.target.value = sanitizeValue(event.target.value, allowedChar);
|
60
|
+
}
|
61
|
+
if (onChanged) {
|
62
|
+
if (event.target.value && config.maxLength) {
|
63
|
+
if (event.target.value.toString().length <= config.maxLength) {
|
64
|
+
return onChanged(event);
|
65
|
+
}
|
66
|
+
}
|
67
|
+
else {
|
68
|
+
return onChanged(event);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
else {
|
72
|
+
console.error("No onChanged property");
|
73
|
+
}
|
74
|
+
};
|
75
|
+
/**
|
76
|
+
* onKeypressHandler
|
77
|
+
* get the current value from the input field
|
78
|
+
* @param {*} event - event which will be used to get the changed value
|
79
|
+
*/
|
80
|
+
var onKeypressHandler = function (event) {
|
81
|
+
if (event.key === 'Enter') {
|
82
|
+
if (keyPressed) {
|
83
|
+
return keyPressed(event);
|
84
|
+
}
|
85
|
+
}
|
86
|
+
};
|
87
|
+
/**
|
88
|
+
* clearValuesHandler
|
89
|
+
* reset value into null and return it to parent
|
90
|
+
* @param {*} event - event
|
91
|
+
*/
|
92
|
+
var clearValuesHandler = function (event) {
|
93
|
+
if (event) {
|
94
|
+
event.preventDefault();
|
95
|
+
return null;
|
96
|
+
}
|
97
|
+
};
|
98
|
+
return (_jsx("div", __assign({ className: "em-input " + customClass }, { children: config.type === 'time' ? (_jsxs("div", __assign({ className: 'e-input e-input-time ' + (config.disabled ? 'input-disabled' : ""), "data-testid": "component-input" }, { children: [_jsx("input", __assign({}, config, { onChange: onChangeHandler })), config.disabled || !config.value ? null : (_jsx("div", __assign({ className: 'e-input-icon', onClick: clearValuesHandler }, { children: _jsx("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.00005 14.7895L5.21058 17L10 12.2106L14.7895 17.0001L17 14.7895L12.2105 10.0001L17.0001 5.21053L14.7895 3L10 7.78953L5.21053 3.00005L3 5.21058L7.78948 10.0001L3.00005 14.7895Z", fill: "#A0AEC0" }) })) })))] }))) : allowedTypes.includes(config.type) ? config.label && config.label !== '' ?
|
99
|
+
(_jsxs(Fragment, { children: [_jsx("label", { children: config.label }), _jsx("input", __assign({ "data-testid": "component-input" }, config, { onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } }))] }))
|
100
|
+
:
|
101
|
+
(_jsx(Fragment, { children: _jsx("input", __assign({}, config, { className: "em-input-field", "data-testid": "component-input", onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } })) }))
|
102
|
+
: null })));
|
103
|
+
};
|
104
|
+
export default Input;
|
@@ -1,3 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
declare const InputSelectionHandler: (props: any) => JSX.Element | null;
|
3
|
-
export default InputSelectionHandler;
|
1
|
+
/// <reference types="react" />
|
2
|
+
declare const InputSelectionHandler: (props: any) => JSX.Element | null;
|
3
|
+
export default InputSelectionHandler;
|
@@ -1,31 +1,31 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
-
import Input from './Input';
|
14
|
-
import Select from './Select';
|
15
|
-
var InputSelectionHandler = function (props) {
|
16
|
-
switch (props.config.type) {
|
17
|
-
case "text":
|
18
|
-
case "number":
|
19
|
-
case "time":
|
20
|
-
case "password":
|
21
|
-
return _jsx(Input, __assign({}, props));
|
22
|
-
case "select":
|
23
|
-
case "multi-select":
|
24
|
-
return _jsx(Select, __assign({}, props));
|
25
|
-
case "toggle-button":
|
26
|
-
default:
|
27
|
-
console.error("Invalid Input Type");
|
28
|
-
return null;
|
29
|
-
}
|
30
|
-
};
|
31
|
-
export default InputSelectionHandler;
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
+
import Input from './Input';
|
14
|
+
import Select from './Select';
|
15
|
+
var InputSelectionHandler = function (props) {
|
16
|
+
switch (props.config.type) {
|
17
|
+
case "text":
|
18
|
+
case "number":
|
19
|
+
case "time":
|
20
|
+
case "password":
|
21
|
+
return _jsx(Input, __assign({}, props));
|
22
|
+
case "select":
|
23
|
+
case "multi-select":
|
24
|
+
return _jsx(Select, __assign({}, props));
|
25
|
+
case "toggle-button":
|
26
|
+
default:
|
27
|
+
console.error("Invalid Input Type");
|
28
|
+
return null;
|
29
|
+
}
|
30
|
+
};
|
31
|
+
export default InputSelectionHandler;
|
@@ -1,28 +1,28 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import '../../scss/style.scss';
|
3
|
-
interface IPropsPopover {
|
4
|
-
id: String;
|
5
|
-
className: String;
|
6
|
-
open: Boolean;
|
7
|
-
origin?: String;
|
8
|
-
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
9
|
-
}
|
10
|
-
export declare const Popover: React.FC<IPropsPopover>;
|
11
|
-
interface IPropsDropDown {
|
12
|
-
config: {
|
13
|
-
id: string | keyof Object;
|
14
|
-
type: string;
|
15
|
-
value?: string | Array<string> | any;
|
16
|
-
placeholder?: string;
|
17
|
-
label?: string;
|
18
|
-
readOnly?: boolean;
|
19
|
-
disabled?: boolean;
|
20
|
-
options?: Array<string | object> | object | any;
|
21
|
-
};
|
22
|
-
customClass?: string;
|
23
|
-
hideClearIcon: boolean;
|
24
|
-
isEmployeeSelection: boolean;
|
25
|
-
onChanged?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLInputElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined | any, val?: string | any) => void;
|
26
|
-
}
|
27
|
-
declare const Dropdown: React.FC<IPropsDropDown>;
|
28
|
-
export default Dropdown;
|
1
|
+
import React from "react";
|
2
|
+
import '../../scss/style.scss';
|
3
|
+
interface IPropsPopover {
|
4
|
+
id: String;
|
5
|
+
className: String;
|
6
|
+
open: Boolean;
|
7
|
+
origin?: String;
|
8
|
+
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
9
|
+
}
|
10
|
+
export declare const Popover: React.FC<IPropsPopover>;
|
11
|
+
interface IPropsDropDown {
|
12
|
+
config: {
|
13
|
+
id: string | keyof Object;
|
14
|
+
type: string;
|
15
|
+
value?: string | Array<string> | any;
|
16
|
+
placeholder?: string;
|
17
|
+
label?: string;
|
18
|
+
readOnly?: boolean;
|
19
|
+
disabled?: boolean;
|
20
|
+
options?: Array<string | object> | object | any;
|
21
|
+
};
|
22
|
+
customClass?: string;
|
23
|
+
hideClearIcon: boolean;
|
24
|
+
isEmployeeSelection: boolean;
|
25
|
+
onChanged?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLInputElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined | any, val?: string | any) => void;
|
26
|
+
}
|
27
|
+
declare const Dropdown: React.FC<IPropsDropDown>;
|
28
|
+
export default Dropdown;
|