wj-elements 0.1.65 → 0.1.66
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/wje-input.js +1 -1
- package/dist/wje-textarea.js +2 -23
- package/package.json +1 -1
package/dist/wje-input.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement, { event } from "./wje-element.js";
|
|
8
|
-
const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n --wje-input-font-family: var(--wje-font-family);\n --wje-input-background-color: var(--wje-background);\n --wje-input-color: var(--wje-color);\n --wje-input-color-invalid: var(--wje-color-danger);\n --wje-input-border-color: var(--wje-border-color);\n --wje-input-border-color-focus: var(--wje-color-primary);\n --wje-input-border-width: 1px;\n --wje-input-border-style: solid;\n --wje-input-border-radius: 4px;\n --wje-input-margin-bottom: .5rem;\n --wje-input-line-height: 20px;\n --wje-input-slot-padding-inline: .5rem;\n width: 100%;\n margin-bottom: var(--wje-input-margin-bottom);\n display: block;\n\n .wrapper {\n display: flex;\n width: 100%;\n }\n .native-input {\n .input-wrapper {\n width: 100%;\n position: relative;\n }\n &.default {\n background-color: var(--wje-input-background-color);\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: 0;\n padding-top: .25rem;\n padding-bottom: .25rem;\n transition: background-color 0.2s ease;\n cursor: text;\n .input-wrapper {\n margin-inline: .5rem;\n }\n &.focused {\n border-color: var(--wje-input-border-color-focus) !important;\n label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n input {\n border: none;\n height: 25px;\n min-height: 25px;\n padding: 0;\n margin-top: -4px;\n background: none;\n box-shadow: none;\n width: 100%;\n }\n label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n ::slotted([slot="start"]) {\n border-left: none;\n border-top: none;\n border-bottom: none;\n }\n\n ::slotted([slot="end"]) {\n border-right: none;\n border-top: none;\n border-bottom: none;\n }\n }\n &.standard {\n
|
|
8
|
+
const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n --wje-input-font-family: var(--wje-font-family);\n --wje-input-background-color: var(--wje-background);\n --wje-input-color: var(--wje-color);\n --wje-input-color-invalid: var(--wje-color-danger);\n --wje-input-border-color: var(--wje-border-color);\n --wje-input-border-color-focus: var(--wje-color-primary);\n --wje-input-border-width: 1px;\n --wje-input-border-style: solid;\n --wje-input-border-radius: 4px;\n --wje-input-margin-bottom: .5rem;\n --wje-input-line-height: 20px;\n --wje-input-slot-padding-inline: .5rem;\n width: 100%;\n margin-bottom: var(--wje-input-margin-bottom);\n display: block;\n\n .wrapper {\n display: flex;\n width: 100%;\n }\n .native-input {\n .input-wrapper {\n width: 100%;\n position: relative;\n }\n &.default {\n background-color: var(--wje-input-background-color);\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: 0;\n padding-top: .25rem;\n padding-bottom: .25rem;\n transition: background-color 0.2s ease;\n cursor: text;\n .input-wrapper {\n margin-inline: .5rem;\n }\n &.focused {\n border-color: var(--wje-input-border-color-focus) !important;\n label {\n opacity: 0.67;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n input {\n border: none;\n height: 25px;\n min-height: 25px;\n padding: 0;\n margin-top: -4px;\n background: none;\n box-shadow: none;\n width: 100%;\n }\n label {\n margin: 0;\n display: block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n &.fade {\n opacity: 0.5;\n font-size: 12px;\n letter-spacing: normal;\n }\n }\n ::slotted([slot="start"]) {\n border-left: none;\n border-top: none;\n border-bottom: none;\n }\n\n ::slotted([slot="end"]) {\n border-right: none;\n border-top: none;\n border-bottom: none;\n }\n }\n &.standard {\n font-family: var(--wje-input-font-family);\n position: relative;\n border-radius: var(--wje-input-border-radius);\n padding-inline: 0;\n padding-top: 0;\n padding-bottom: 0;\n transition: background-color 0.2s ease;\n cursor: text;\n &.focused {\n input {\n border-color: var(--wje-input-border-color-focus) !important;\n }\n }\n input {\n background-color: var(--wje-input-background-color);\n display: block;\n min-height: 32px;\n padding-inline: .5rem;\n padding-top: 0;\n padding-bottom: 0;\n /*background: none;*/\n box-shadow: none;\n width: 100%;\n box-sizing: border-box;\n border-radius: var(--wje-input-border-radius);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n }\n label {\n margin: 0;\n display: inline-block;\n opacity: 1;\n cursor: text;\n transition: opacity 0.2s ease;\n line-height: var(--wje-input-line-height);\n }\n .input-wrapper {\n &:hover .clear {\n visibility: visible;\n }\n }\n ::slotted([slot="start"]) {\n border-right: none;\n border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n }\n\n ::slotted([slot="end"]) {\n border-left: none;\n border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n }\n\n &.has-start input{\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &.has-end input{\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .error-message {\n position: static;\n\n background: transparent;\n padding: 0.25rem 0;\n left: auto;\n transform: none;\n color: var(--wje-input-color-invalid);\n font-size: 12px;\n line-height: normal;\n }\n }\n }\n}\n\n.clear {\n visibility: hidden;\n position: absolute;\n right: 0;\n top: 3px;\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n color: var(--wje-input-color-invalid);\n content: "*";\n font-family: var(--wje-force-mac-font-family);\n font-size: 20px;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n top: 0;\n}\n\n:host([invalid]) {\n .error-message {\n display: block;\n }\n .default {\n label {\n opacity: 1 !important;\n color: var(--wje-input-color-invalid) !important;\n animation-name: shake;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n }\n }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n padding-inline: var(--wje-input-slot-padding-inline);\n}\n\nslot[name="start"], slot[name="end"] {\n display: flex;\n}\n\nslot[name="error"] {\n display: none;\n margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n display: block;\n}\n\ninput {\n background-color: var(--wje-input-background-color);\n border-width: var(--wje-input-border-width);\n border-style: var(--wje-input-border-style);\n border-color: var(--wje-input-border-color);\n font-family: var(--wjinput-font-family);\n color: var(--wje-input-color);\n appearance: none;\n outline: 0;\n padding: .25rem .5rem;\n line-height: var(--wje-input-line-height);\n font-size: 14px;\n font-weight: normal;\n vertical-align: middle;\n min-height: 32px;\n}\n\n.error-message {\n display: none;\n position: absolute;\n width: auto;\n max-width: 100%;\n min-width: auto;\n border-radius: 50px;\n background: black;\n padding: .25rem .5rem;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: 12px;\n line-height: normal;\n}\n\n@keyframes shake {\n 8%,\n 41% {\n transform: translateX(-4px);\n }\n 25%,\n 58% {\n transform: translateX(4px);\n }\n 75% {\n transform: translateX(-2px);\n }\n 92% {\n transform: translateX(2px);\n }\n 0%,\n 100% {\n transform: translateX(0);\n }\n}';
|
|
9
9
|
class Input extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* Constructor for the Input class.
|
package/dist/wje-textarea.js
CHANGED
|
@@ -32,27 +32,6 @@ class Textarea extends WJElement {
|
|
|
32
32
|
__publicField(this, "counter", (e) => {
|
|
33
33
|
this.counterElement.innerText = e.target.value.length + "/" + this.input.maxLength;
|
|
34
34
|
});
|
|
35
|
-
this._checked = false;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Sets the checked state of the textarea.
|
|
39
|
-
*
|
|
40
|
-
* @param {boolean} value - The checked state.
|
|
41
|
-
*/
|
|
42
|
-
set checked(value) {
|
|
43
|
-
this._checked = value;
|
|
44
|
-
if (value)
|
|
45
|
-
this.setAttribute("checked", "");
|
|
46
|
-
else
|
|
47
|
-
this.removeAttribute("checked");
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Returns the checked state of the textarea.
|
|
51
|
-
*
|
|
52
|
-
* @returns {boolean} The checked state.
|
|
53
|
-
*/
|
|
54
|
-
get checked() {
|
|
55
|
-
return this._checked;
|
|
56
35
|
}
|
|
57
36
|
/**
|
|
58
37
|
* Returns the CSS styles for the component.
|
|
@@ -70,7 +49,7 @@ class Textarea extends WJElement {
|
|
|
70
49
|
* @returns {Array<string>}
|
|
71
50
|
*/
|
|
72
51
|
static get observedAttributes() {
|
|
73
|
-
return [
|
|
52
|
+
return [];
|
|
74
53
|
}
|
|
75
54
|
/**
|
|
76
55
|
* Sets up the attributes for the component.
|
|
@@ -104,7 +83,7 @@ class Textarea extends WJElement {
|
|
|
104
83
|
input.id = "textarea";
|
|
105
84
|
input.name = this.name;
|
|
106
85
|
input.disabled = this.hasAttribute("disabled");
|
|
107
|
-
input.innerText = this.
|
|
86
|
+
input.innerText = this.innerHTML;
|
|
108
87
|
input.classList.add("form-control");
|
|
109
88
|
input.setAttribute("part", "input");
|
|
110
89
|
input.setAttribute("rows", this.rows || 3);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.66",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|