empower-container 0.1.21 → 0.1.24
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/README.md +378 -376
- 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 -16
- package/dist/cjs/assets/Asset.js +31 -30
- 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 -16
- package/dist/esm/assets/Asset.js +28 -27
- 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 +133 -107
- 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 +63 -67
- package/dist/scss/library/_input.scss +37 -37
- package/dist/scss/library/_menubar.scss +240 -255
- package/dist/scss/library/_select.scss +258 -258
- package/dist/scss/style.scss +38 -23
- package/package.json +62 -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;
|