ehscan-react-components 0.1.18 → 0.1.19
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/TextArea.js +1 -1
- package/dist/style/input.css +18 -4
- package/dist/style/window.css +3 -1
- package/package.json +1 -1
package/dist/TextArea.js
CHANGED
|
@@ -40,5 +40,5 @@ export const TextArea = ({ id, tabIndex, label, value, editable = true, required
|
|
|
40
40
|
textareaRef.current.style.height = "auto";
|
|
41
41
|
}
|
|
42
42
|
}, [onChange]);
|
|
43
|
-
return (_jsxs("div", { className: "ext-textarea-wrapper", children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("
|
|
43
|
+
return (_jsxs("div", { className: "ext-textarea-wrapper", children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", onClick: clear, "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}`, children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", "stroke-width": "2", "stroke-linecap": "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", "stroke-width": "2", "stroke-linecap": "round" })] }) }))] })] })), _jsx("div", { className: "ext-textarea-box", children: _jsx("textarea", { id: textareaId, tabIndex: tabIndex, ref: textareaRef, value: value !== null && value !== void 0 ? value : "", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "...", maxLength: maxLength, onChange: handleInputChange, onFocus: handleFocus, onBlur: setHeight, className: `ext-textarea${required && value === "" ? " highlight" : ""}`, rows: 1, spellCheck: false, readOnly: !editable, "aria-required": required, "aria-label": label }) })] }));
|
|
44
44
|
};
|
package/dist/style/input.css
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.ext-textarea-box {
|
|
28
|
-
background-color:
|
|
28
|
+
background-color: var(--ext-textarea-box-bck-color, lavender);
|
|
29
29
|
border-radius: 10px;
|
|
30
30
|
display: flex;
|
|
31
31
|
position: relative;
|
|
@@ -93,6 +93,7 @@ input:-webkit-autofill:active {
|
|
|
93
93
|
display: flex;
|
|
94
94
|
justify-content: center;
|
|
95
95
|
align-items:center;
|
|
96
|
+
height: 22px;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
/* 🏷️ Label Title */
|
|
@@ -130,16 +131,16 @@ input:-webkit-autofill:active {
|
|
|
130
131
|
}
|
|
131
132
|
|
|
132
133
|
.ext-textarea {
|
|
133
|
-
font-size: var(--input-txt-size);
|
|
134
|
+
font-size: var(--ext-textarea-input-txt-size, 14px);
|
|
134
135
|
border: none;
|
|
135
136
|
outline: none;
|
|
136
137
|
width: 100%;
|
|
137
|
-
font-weight: var(--d-font-weight);
|
|
138
|
+
font-weight: var(--ext-textarea-d-font-weight, 400);
|
|
138
139
|
display: grid;
|
|
139
140
|
justify-content: left;
|
|
140
141
|
align-items: center;
|
|
141
142
|
background-color: transparent;
|
|
142
|
-
color: var(--input-clr);
|
|
143
|
+
color: var(--ext-textarea-input-clr, red);
|
|
143
144
|
box-sizing: border-box;
|
|
144
145
|
resize: none;
|
|
145
146
|
overflow: hidden;
|
|
@@ -152,4 +153,17 @@ input:-webkit-autofill:active {
|
|
|
152
153
|
border-color: green;
|
|
153
154
|
border-width: 3px;
|
|
154
155
|
border-style: solid;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.ext-textarea-svg-close{
|
|
159
|
+
background-color: #007aff;
|
|
160
|
+
border-radius: 50px;
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
justify-content: center;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.ext-textarea-svg-close:hover{
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
background-color: aquamarine;
|
|
155
169
|
}
|
package/dist/style/window.css
CHANGED
|
@@ -25,9 +25,10 @@
|
|
|
25
25
|
/* Header */
|
|
26
26
|
.ext-window-header {
|
|
27
27
|
border-radius: var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px) 0 0;
|
|
28
|
-
background-color: var(--ext-window-header-bck-color,
|
|
28
|
+
background-color: var(--ext-window-header-bck-color, transparent);
|
|
29
29
|
height: var(--ext-window-header-height, 50px);
|
|
30
30
|
cursor: pointer;
|
|
31
|
+
display: flex;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
/* Body */
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
.ext-window-footer {
|
|
42
43
|
background-color: var(--ext-window-footer-bck, transparent);
|
|
43
44
|
height: var(--ext-window-footer-height, 50px);
|
|
45
|
+
border-radius: 0 0 var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px);
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
/* Scrollbars for WebKit */
|