wj-elements 0.1.64 → 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-dropdown.js +1 -0
- package/dist/wje-input.js +1 -1
- package/dist/wje-menu-item.js +48 -23
- package/dist/wje-textarea.js +2 -23
- package/package.json +1 -1
package/dist/wje-dropdown.js
CHANGED
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-menu-item.js
CHANGED
|
@@ -15,6 +15,40 @@ class MenuItem extends WJElement {
|
|
|
15
15
|
constructor() {
|
|
16
16
|
super();
|
|
17
17
|
__publicField(this, "className", "MenuItem");
|
|
18
|
+
__publicField(this, "mouseenterHandler", (e) => {
|
|
19
|
+
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
20
|
+
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
21
|
+
return;
|
|
22
|
+
this.activateSubmenu(e);
|
|
23
|
+
e.stopPropagation();
|
|
24
|
+
this.showSubmenu();
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
__publicField(this, "clickHandler", (e) => {
|
|
28
|
+
switch (this.variant) {
|
|
29
|
+
case "NAV":
|
|
30
|
+
if (!this.collapse && this.hasSubmenu) {
|
|
31
|
+
this.submenuToggle(e);
|
|
32
|
+
this.hideSubmenu();
|
|
33
|
+
e.stopPropagation();
|
|
34
|
+
} else {
|
|
35
|
+
event.dispatchCustomEvent(this, "wje-menu-item:click");
|
|
36
|
+
event.dispatchCustomEvent(this, this.dialog, {
|
|
37
|
+
bubbles: true
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
break;
|
|
41
|
+
case "CONTEXT":
|
|
42
|
+
let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
|
|
43
|
+
if (submenuElements == null ? void 0 : submenuElements.hasAttribute("active")) {
|
|
44
|
+
this.shouldHideSubmenu(e);
|
|
45
|
+
} else {
|
|
46
|
+
this.activateSubmenu(e);
|
|
47
|
+
this.showSubmenu(e);
|
|
48
|
+
}
|
|
49
|
+
break;
|
|
50
|
+
}
|
|
51
|
+
});
|
|
18
52
|
/**
|
|
19
53
|
* Checks if the submenu should be hidden based on the event.
|
|
20
54
|
*
|
|
@@ -212,29 +246,18 @@ class MenuItem extends WJElement {
|
|
|
212
246
|
afterDraw() {
|
|
213
247
|
this.addEventListener("mousemove", this.dispatchMove);
|
|
214
248
|
this.addEventListener("wje-popup:reposition", this.dispatchReposition);
|
|
215
|
-
event.addListener(this, "mouseenter", null,
|
|
216
|
-
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
217
|
-
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
218
|
-
return;
|
|
219
|
-
this.activateSubmenu(e);
|
|
220
|
-
e.stopPropagation();
|
|
221
|
-
this.showSubmenu();
|
|
222
|
-
}
|
|
223
|
-
});
|
|
249
|
+
event.addListener(this, "mouseenter", null, this.mouseenterHandler);
|
|
224
250
|
event.addListener(this, "mouseleave", null, this.shouldHideSubmenu);
|
|
225
251
|
event.addListener(this, "focusout", null, this.shouldHideSubmenu);
|
|
226
|
-
event.addListener(this, "click", null,
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
});
|
|
236
|
-
}
|
|
237
|
-
});
|
|
252
|
+
event.addListener(this, "click", null, this.clickHandler);
|
|
253
|
+
}
|
|
254
|
+
afterDisconnect() {
|
|
255
|
+
event.removeListener(this, "mousemove", null, this.dispatchMove);
|
|
256
|
+
event.removeListener(this, "wje-popup:reposition", null, this.dispatchReposition);
|
|
257
|
+
event.removeListener(this, "mouseenter", null, this.mouseenterHandler);
|
|
258
|
+
event.removeListener(this, "mouseleave", null, this.shouldHideSubmenu);
|
|
259
|
+
event.removeListener(this, "focusout", null, this.shouldHideSubmenu);
|
|
260
|
+
event.removeListener(this, "click", null, this.clickHandler);
|
|
238
261
|
}
|
|
239
262
|
/**
|
|
240
263
|
* Creates a tooltip for the MenuItem when it is collapsed.
|
|
@@ -261,9 +284,10 @@ class MenuItem extends WJElement {
|
|
|
261
284
|
* Shows the submenu of the MenuItem.
|
|
262
285
|
*/
|
|
263
286
|
showSubmenu() {
|
|
287
|
+
var _a;
|
|
264
288
|
this.tabIndex = -1;
|
|
265
289
|
if (this.hasSubmenu) {
|
|
266
|
-
this.popup.setAttribute("active", "");
|
|
290
|
+
(_a = this.popup) == null ? void 0 : _a.setAttribute("active", "");
|
|
267
291
|
this.classList.add("expanded-submenu");
|
|
268
292
|
this.native.classList.add("expanded-submenu");
|
|
269
293
|
}
|
|
@@ -272,9 +296,10 @@ class MenuItem extends WJElement {
|
|
|
272
296
|
* Hides the submenu of the MenuItem.
|
|
273
297
|
*/
|
|
274
298
|
hideSubmenu() {
|
|
299
|
+
var _a;
|
|
275
300
|
this.tabIndex = 0;
|
|
276
301
|
if (this.hasSubmenu) {
|
|
277
|
-
this.popup.removeAttribute("active");
|
|
302
|
+
(_a = this.popup) == null ? void 0 : _a.removeAttribute("active");
|
|
278
303
|
this.classList.remove("expanded-submenu");
|
|
279
304
|
this.native.classList.remove("expanded-submenu");
|
|
280
305
|
}
|
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",
|