wj-elements 0.1.86 → 0.1.88
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/dark.css +6 -0
- package/dist/light.css +21 -0
- package/dist/wje-card-controls.js +1 -1
- package/dist/wje-element.js +12 -12
- package/dist/wje-input.js +1 -1
- package/dist/wje-item.js +1 -1
- package/dist/wje-option.js +1 -1
- package/dist/wje-select.js +23 -2
- package/dist/wje-textarea.js +1 -1
- package/package.json +1 -1
package/dist/dark.css
CHANGED
|
@@ -149,6 +149,12 @@
|
|
|
149
149
|
/* Divider */
|
|
150
150
|
--wje-divider-border-color: var(--wje-border-color);
|
|
151
151
|
|
|
152
|
+
/* Item */
|
|
153
|
+
--wje-item-color: var(--wje-color);
|
|
154
|
+
--wje-item-border-color: var(--wje-border-color);
|
|
155
|
+
--wje-item-background: transparent;
|
|
156
|
+
--wje-item-background-hover: var(--wje-color-contrast-3);
|
|
157
|
+
|
|
152
158
|
/* List */
|
|
153
159
|
--wje-list-background: var(--wje-background);
|
|
154
160
|
|
package/dist/light.css
CHANGED
|
@@ -340,6 +340,27 @@
|
|
|
340
340
|
--wje-img-compare-position: 50%;
|
|
341
341
|
--wje-img-compare-clip-path: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0);
|
|
342
342
|
|
|
343
|
+
/* Item */
|
|
344
|
+
--wje-item-color: var(--wje-color);
|
|
345
|
+
--wje-item-border-width: 0 0 1px 0;
|
|
346
|
+
--wje-item-border-style: solid;
|
|
347
|
+
--wje-item-border-color: var(--wje-border-color);
|
|
348
|
+
--wje-item-border-radius: 0;
|
|
349
|
+
--wje-item-background: transparent;
|
|
350
|
+
--wje-item-background-hover: var(--wje-color-contrast-3);
|
|
351
|
+
--wje-item-padding-top: 0px;
|
|
352
|
+
--wje-item-padding-bottom: 0px;
|
|
353
|
+
--wje-item-padding-end: 0px;
|
|
354
|
+
--wje-item-padding-start: 0px;
|
|
355
|
+
--wje-item-inner-border-width: 0 0 1px 0;
|
|
356
|
+
--wje-item-inner-padding-top: 0px;
|
|
357
|
+
--wje-item-inner-padding-bottom: 0px;
|
|
358
|
+
--wje-item-inner-padding-start: 0px;
|
|
359
|
+
--wje-item-inner-padding-end: 0px;
|
|
360
|
+
--wje-item-inner-box-shadow: none;
|
|
361
|
+
--wje-item-min-height: 40px;
|
|
362
|
+
--wje-item-transition: var(--wje-transition-fast);
|
|
363
|
+
|
|
343
364
|
/* List */
|
|
344
365
|
--wje-list-inset-padding: 1rem;
|
|
345
366
|
--wje-list-border-radius: var(--wje-border-radius-medium);
|
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wje-element.js";
|
|
8
|
-
const styles = "/*\r\n[ WJ Card - Controls ]\r\n*/\r\n\r\n:host {\r\n font-family: var(--wje-card-controls-font-family);\r\n text-transform: uppercase;\r\n display: inline-block;\r\n letter-spacing: 0.06em;\r\n font-size: var(--wje-card-controls-font-size);\r\n font-weight: 500;\r\n margin: 0;\r\n padding: 0;\r\n line-height: normal;\r\n overflow: hidden
|
|
8
|
+
const styles = "/*\r\n[ WJ Card - Controls ]\r\n*/\r\n\r\n:host {\r\n font-family: var(--wje-card-controls-font-family);\r\n text-transform: uppercase;\r\n display: inline-block;\r\n letter-spacing: 0.06em;\r\n font-size: var(--wje-card-controls-font-size);\r\n font-weight: 500;\r\n margin: 0;\r\n padding: 0;\r\n line-height: normal;\r\n /*overflow: hidden;*/\r\n text-overflow: ellipsis;\r\n filter: alpha(opacity=40);\r\n transition: opacity 0.3s ease;\r\n position: absolute;\r\n right: 1rem;\r\n top: .5rem;\r\n}";
|
|
9
9
|
class CardControls extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* CardControls constructor
|
package/dist/wje-element.js
CHANGED
|
@@ -51,12 +51,12 @@ class UniversalService {
|
|
|
51
51
|
return fetch(url, {
|
|
52
52
|
method,
|
|
53
53
|
body: data,
|
|
54
|
-
cache:
|
|
54
|
+
// cache: 'no-cache',
|
|
55
55
|
headers: {
|
|
56
56
|
"Content-Type": "application/json"
|
|
57
57
|
},
|
|
58
|
-
async: true
|
|
59
|
-
referrerPolicy:
|
|
58
|
+
async: true
|
|
59
|
+
// referrerPolicy: 'same-origin',
|
|
60
60
|
}).then((response, e) => {
|
|
61
61
|
var _a;
|
|
62
62
|
let permissions = (_a = response.headers.get("permissions")) == null ? void 0 : _a.split(",");
|
|
@@ -73,11 +73,11 @@ class UniversalService {
|
|
|
73
73
|
});
|
|
74
74
|
__publicField(this, "loadOnePromise", (url, action) => {
|
|
75
75
|
return fetch(url, {
|
|
76
|
-
cache:
|
|
76
|
+
// cache: 'no-cache',
|
|
77
77
|
headers: {
|
|
78
78
|
"Content-Type": "application/json"
|
|
79
|
-
}
|
|
80
|
-
referrerPolicy:
|
|
79
|
+
}
|
|
80
|
+
// referrerPolicy: 'same-origin',
|
|
81
81
|
}).then((data) => {
|
|
82
82
|
data = data.json();
|
|
83
83
|
if (action) {
|
|
@@ -101,11 +101,11 @@ class UniversalService {
|
|
|
101
101
|
let promise = fetch(url, {
|
|
102
102
|
method,
|
|
103
103
|
body: JSON.stringify(data),
|
|
104
|
-
cache:
|
|
104
|
+
// cache: 'no-cache',
|
|
105
105
|
headers: {
|
|
106
106
|
"Content-Type": "application/json"
|
|
107
|
-
}
|
|
108
|
-
referrerPolicy:
|
|
107
|
+
}
|
|
108
|
+
// referrerPolicy: 'same-origin',
|
|
109
109
|
}).then((response) => {
|
|
110
110
|
if (response.ok) {
|
|
111
111
|
return response.json();
|
|
@@ -118,11 +118,11 @@ class UniversalService {
|
|
|
118
118
|
_get(url, action, dispatchMethod) {
|
|
119
119
|
let promise = fetch(url, {
|
|
120
120
|
method: "GET",
|
|
121
|
-
cache:
|
|
121
|
+
// cache: 'no-cache',
|
|
122
122
|
headers: {
|
|
123
123
|
"Content-Type": "application/json"
|
|
124
|
-
}
|
|
125
|
-
referrerPolicy:
|
|
124
|
+
}
|
|
125
|
+
// referrerPolicy: 'same-origin',
|
|
126
126
|
}).then(async (response) => {
|
|
127
127
|
let text;
|
|
128
128
|
try {
|
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 = '/*\r\n[ WJ Input ]\r\n*/\r\n\r\n:host {\r\n --wje-input-font-family: var(--wje-font-family);\r\n --wje-input-background-color: var(--wje-background);\r\n --wje-input-color: var(--wje-color);\r\n --wje-input-color-invalid: var(--wje-color-danger);\r\n --wje-input-border-color: var(--wje-border-color);\r\n --wje-input-border-color-focus: var(--wje-color-primary);\r\n --wje-input-border-width: 1px;\r\n --wje-input-border-style: solid;\r\n --wje-input-border-radius: 4px;\r\n --wje-input-margin-bottom: .5rem;\r\n --wje-input-line-height: 20px;\r\n --wje-input-slot-padding-inline: .5rem;\r\n width: 100%;\r\n margin-bottom: var(--wje-input-margin-bottom);\r\n display: block;\r\n\r\n .wrapper {\r\n display: flex;\r\n width: 100%;\r\n }\r\n .native-input {\r\n .input-wrapper {\r\n width: 100%;\r\n position: relative;\r\n }\r\n &.default {\r\n background-color: var(--wje-input-background-color);\r\n font-family: var(--wje-input-font-family);\r\n position: relative;\r\n border-radius: var(--wje-input-border-radius);\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n padding-inline: 0;\r\n padding-top: .25rem;\r\n padding-bottom: .25rem;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n .input-wrapper {\r\n margin-inline: .5rem;\r\n }\r\n &.focused {\r\n border-color: var(--wje-input-border-color-focus) !important;\r\n label {\r\n opacity: 0.67;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n input {\r\n border: none;\r\n height: 25px;\r\n min-height: 25px;\r\n padding: 0;\r\n margin-top: -4px;\r\n background: none;\r\n box-shadow: none;\r\n width: 100%;\r\n }\r\n label {\r\n margin: 0;\r\n display: block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-input-line-height);\r\n &.fade {\r\n opacity: 0.5;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n ::slotted([slot="start"]) {\r\n border-left: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-right: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n }\r\n &.standard {\r\n font-family: var(--wje-input-font-family);\r\n position: relative;\r\n border-radius: var(--wje-input-border-radius);\r\n padding-inline: 0;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n &.focused {\r\n input {\r\n border-color: var(--wje-input-border-color-focus) !important;\r\n }\r\n }\r\n input {\r\n background-color: var(--wje-input-background-color);\r\n display: block;\r\n min-height: 32px;\r\n padding-inline: .5rem;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n /*background: none;*/\r\n box-shadow: none;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: var(--wje-input-border-radius);\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n }\r\n label {\r\n margin: 0;\r\n display: inline-block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-input-line-height);\r\n }\r\n .input-wrapper {\r\n &:hover .clear {\r\n visibility: visible;\r\n }\r\n }\r\n ::slotted([slot="start"]) {\r\n border-right: none;\r\n border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-left: none;\r\n border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\r\n }\r\n\r\n &.has-start input{\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n\r\n &.has-end input{\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n .error-message {\r\n position: static;\r\n\r\n background: transparent;\r\n padding: 0.25rem 0;\r\n left: auto;\r\n transform: none;\r\n color: var(--wje-input-color-invalid);\r\n font-size: 12px;\r\n line-height: normal;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.clear {\r\n visibility: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 3px;\r\n --wje-padding-top: .25rem;\r\n --wje-padding-start: .25rem;\r\n --wje-padding-end: .25rem;\r\n --wje-padding-bottom: .25rem;\r\n --wje-button-margin-inline: 0 .25rem;\r\n}\r\n\r\n:host([required]) .input-wrapper::after {\r\n color: var(--wje-input-color-invalid);\r\n content: "*";\r\n font-family: var(--wje-force-mac-font-family);\r\n font-size: 20px;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n:host([required]) .standard .input-wrapper::after {\r\n top: 0;\r\n}\r\n\r\n:host([invalid]) {\r\n .error-message {\r\n display: block;\r\n }\r\n .default {\r\n label {\r\n opacity: 1 !important;\r\n color: var(--wje-input-color-invalid) !important;\r\n animation-name: shake;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot="start"]), ::slotted([slot="end"]) {\r\n display: flex;\r\n align-items: center;\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n padding-inline: var(--wje-input-slot-padding-inline);\r\n}\r\n\r\nslot[name="start"], slot[name="end"] {\r\n display: flex;\r\n}\r\n\r\nslot[name="error"] {\r\n display: none;\r\n margin-inline: .5rem;\r\n}\r\n\r\n:host([invalid]) slot[name="error"] {\r\n display: block;\r\n}\r\n\r\ninput {\r\n background-color: var(--wje-input-background-color);\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n font-family: var(--wje-input-font-family);\r\n color: var(--wje-input-color);\r\n appearance: none;\r\n outline: 0;\r\n padding: .25rem .5rem;\r\n line-height: var(--wje-input-line-height);\r\n font-size: 14px;\r\n font-weight: normal;\r\n vertical-align: middle;\r\n min-height: 32px;\r\n}\r\n\r\n.error-message {\r\n display: none;\r\n position: absolute;\r\n width: auto;\r\n max-width: 100%;\r\n min-width: auto;\r\n border-radius: 50px;\r\n background: black;\r\n padding: .25rem .5rem;\r\n top: 0;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n color: white;\r\n font-size: 12px;\r\n line-height: normal;\r\n}\r\n\r\n@keyframes shake {\r\n 8%,\r\n 41% {\r\n transform: translateX(-4px);\r\n }\r\n 25%,\r\n 58% {\r\n transform: translateX(4px);\r\n }\r\n 75% {\r\n transform: translateX(-2px);\r\n }\r\n 92% {\r\n transform: translateX(2px);\r\n }\r\n 0%,\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n}';
|
|
8
|
+
const styles = '/*\r\n[ WJ Input ]\r\n*/\r\n\r\n:host {\r\n --wje-input-font-family: var(--wje-font-family);\r\n --wje-input-background-color: var(--wje-background);\r\n --wje-input-color: var(--wje-color);\r\n --wje-input-color-invalid: var(--wje-color-danger);\r\n --wje-input-border-color: var(--wje-border-color);\r\n --wje-input-border-color-focus: var(--wje-color-primary);\r\n --wje-input-border-width: 1px;\r\n --wje-input-border-style: solid;\r\n --wje-input-border-radius: 4px;\r\n --wje-input-margin-bottom: .5rem;\r\n --wje-input-line-height: 20px;\r\n --wje-input-slot-padding-inline: .5rem;\r\n width: 100%;\r\n margin-bottom: var(--wje-input-margin-bottom);\r\n display: block;\r\n\r\n .wrapper {\r\n display: flex;\r\n width: 100%;\r\n }\r\n .native-input {\r\n .input-wrapper {\r\n width: 100%;\r\n position: relative;\r\n box-sizing: border-box;\r\n }\r\n &.default {\r\n background-color: var(--wje-input-background-color);\r\n font-family: var(--wje-input-font-family);\r\n position: relative;\r\n border-radius: var(--wje-input-border-radius);\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n padding-inline: 0;\r\n padding-top: .25rem;\r\n padding-bottom: .25rem;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n .input-wrapper {\r\n margin-inline: .5rem;\r\n }\r\n &.focused {\r\n border-color: var(--wje-input-border-color-focus) !important;\r\n label {\r\n opacity: 0.67;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n input {\r\n border: none;\r\n height: 25px;\r\n min-height: 25px;\r\n padding: 0;\r\n margin-top: -4px;\r\n background: none;\r\n box-shadow: none;\r\n width: 100%;\r\n }\r\n label {\r\n margin: 0;\r\n display: block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-input-line-height);\r\n &.fade {\r\n opacity: 0.5;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n ::slotted([slot="start"]) {\r\n border-left: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-right: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n }\r\n &.standard {\r\n font-family: var(--wje-input-font-family);\r\n position: relative;\r\n border-radius: var(--wje-input-border-radius);\r\n padding-inline: 0;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n &.focused {\r\n input {\r\n border-color: var(--wje-input-border-color-focus) !important;\r\n }\r\n }\r\n input {\r\n background-color: var(--wje-input-background-color);\r\n display: block;\r\n min-height: 32px;\r\n padding-inline: .5rem;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n /*background: none;*/\r\n box-shadow: none;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: var(--wje-input-border-radius);\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n }\r\n label {\r\n margin: 0;\r\n display: inline-block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-input-line-height);\r\n }\r\n .input-wrapper {\r\n &:hover .clear {\r\n visibility: visible;\r\n }\r\n }\r\n ::slotted([slot="start"]) {\r\n border-right: none;\r\n border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-left: none;\r\n border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\r\n }\r\n\r\n &.has-start input{\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n\r\n &.has-end input{\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n .error-message {\r\n position: static;\r\n\r\n background: transparent;\r\n padding: 0.25rem 0;\r\n left: auto;\r\n transform: none;\r\n color: var(--wje-input-color-invalid);\r\n font-size: 12px;\r\n line-height: normal;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.clear {\r\n visibility: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 3px;\r\n --wje-padding-top: .25rem;\r\n --wje-padding-start: .25rem;\r\n --wje-padding-end: .25rem;\r\n --wje-padding-bottom: .25rem;\r\n --wje-button-margin-inline: 0 .25rem;\r\n}\r\n\r\n:host([required]) .input-wrapper::after {\r\n color: var(--wje-input-color-invalid);\r\n content: "*";\r\n font-family: var(--wje-force-mac-font-family);\r\n font-size: 20px;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n:host([required]) .standard .input-wrapper::after {\r\n top: 0;\r\n}\r\n\r\n:host([invalid]) {\r\n .error-message {\r\n display: block;\r\n }\r\n .default {\r\n label {\r\n opacity: 1 !important;\r\n color: var(--wje-input-color-invalid) !important;\r\n animation-name: shake;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot="start"]), ::slotted([slot="end"]) {\r\n display: flex;\r\n align-items: center;\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n padding-inline: var(--wje-input-slot-padding-inline);\r\n}\r\n\r\n/*\r\n .options-show is a class that is added to the host element when the select options are shown\r\n */\r\n:host(.options-show) ::slotted([slot="start"]) {\r\n border-bottom-left-radius: 0 !important;\r\n}\r\n\r\n:host(.options-show) ::slotted([slot="end"]) {\r\n border-bottom-right-radius: 0 !important;\r\n}\r\n\r\nslot[name="start"], slot[name="end"] {\r\n display: flex;\r\n}\r\n\r\nslot[name="error"] {\r\n display: none;\r\n margin-inline: .5rem;\r\n}\r\n\r\n:host([invalid]) slot[name="error"] {\r\n display: block;\r\n}\r\n\r\ninput {\r\n background-color: var(--wje-input-background-color);\r\n border-width: var(--wje-input-border-width);\r\n border-style: var(--wje-input-border-style);\r\n border-color: var(--wje-input-border-color);\r\n font-family: var(--wje-input-font-family);\r\n color: var(--wje-input-color);\r\n appearance: none;\r\n outline: 0;\r\n padding: .25rem .5rem;\r\n line-height: var(--wje-input-line-height);\r\n font-size: 14px;\r\n font-weight: normal;\r\n vertical-align: middle;\r\n min-height: 32px;\r\n}\r\n\r\n.error-message {\r\n display: none;\r\n position: absolute;\r\n width: auto;\r\n max-width: 100%;\r\n min-width: auto;\r\n border-radius: 50px;\r\n background: black;\r\n padding: .25rem .5rem;\r\n top: 0;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n color: white;\r\n font-size: 12px;\r\n line-height: normal;\r\n}\r\n\r\n@keyframes shake {\r\n 8%,\r\n 41% {\r\n transform: translateX(-4px);\r\n }\r\n 25%,\r\n 58% {\r\n transform: translateX(4px);\r\n }\r\n 75% {\r\n transform: translateX(-2px);\r\n }\r\n 92% {\r\n transform: translateX(2px);\r\n }\r\n 0%,\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n}';
|
|
9
9
|
class Input extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* Constructor for the Input class.
|
package/dist/wje-item.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wje-element.js";
|
|
8
|
-
const styles = '/*\r\n[ WJ Item ]\r\n*/\r\n\r\n:host {\r\n
|
|
8
|
+
const styles = '/*\r\n[ WJ Item ]\r\n*/\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n align-items: center;\r\n justify-content: space-between;\r\n outline: none;\r\n color: var(--wje-item-color);\r\n text-align: initial;\r\n text-decoration: none;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n.item-native {\r\n border-radius: var(--wje-item-border-radius);\r\n padding-top: var(--wje-item-padding-top);\r\n padding-bottom: var(--wje-item-padding-bottom);\r\n padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\r\n margin: 0;\r\n display: flex;\r\n position: relative;\r\n align-items: inherit;\r\n justify-content: inherit;\r\n width: 100%;\r\n min-height: var(--wje-item-min-height);\r\n transition: var(--wje-item-transition);\r\n outline: none;\r\n background: var(--wje-item-background);\r\n overflow: inherit;\r\n box-sizing: border-box;\r\n z-index: 1;\r\n text-decoration: none;\r\n color: var(--wje-item-color);\r\n\r\n .item-inner {\r\n margin: 0;\r\n padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\r\n\r\n display: flex;\r\n position: relative;\r\n\r\n flex: 1 1 0;\r\n flex-direction: inherit;\r\n align-items: inherit;\r\n align-self: stretch;\r\n\r\n min-height: inherit;\r\n\r\n border-width: var(--wje-item-border-width);\r\n border-style: var(--wje-item-border-style);\r\n border-color: var(--wje-item-border-color);\r\n\r\n box-shadow: var(--wje-item-inner-box-shadow);\r\n overflow: inherit;\r\n box-sizing: border-box;\r\n\r\n .input-wrapper {\r\n display: flex;\r\n flex: 1 1 0;\r\n flex-direction: inherit;\r\n align-items: inherit;\r\n align-self: stretch;\r\n text-overflow: ellipsis;\r\n overflow: inherit;\r\n box-sizing: border-box;\r\n }\r\n }\r\n\r\n .item-bottom {\r\n padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n}\r\n\r\n@media (any-hover: hover) {\r\n :host(:hover) .item-native {\r\n color: var(--wje-item-color);\r\n\r\n :after {\r\n transition: var(--wje-item-transition);\r\n z-index: -1;\r\n inset: 0;\r\n position: absolute;\r\n content: "";\r\n background: var(--wje-item-background-hover);\r\n opacity: 0.7;\r\n }\r\n }\r\n}\r\n\r\nbutton,\r\na {\r\n cursor: pointer;\r\n user-select: none;\r\n -webkit-user-drag: none;\r\n}\r\n\r\n::slotted([slot="start"]) {\r\n margin-inline: 0 1rem;\r\n}\r\n\r\n::slotted(wje-label:not([slot="end"])) {\r\n flex: 1 1 0;\r\n}';
|
|
9
9
|
class Item extends WJElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
package/dist/wje-option.js
CHANGED
|
@@ -102,7 +102,7 @@ class Option extends WJElement {
|
|
|
102
102
|
* Adds event listeners after the component is drawn.
|
|
103
103
|
*/
|
|
104
104
|
afterDraw() {
|
|
105
|
-
event.addListener(this, "click", "wje:
|
|
105
|
+
event.addListener(this, "click", "wje-option:change");
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
Option.define("wje-option", Option);
|
package/dist/wje-select.js
CHANGED
|
@@ -14,7 +14,7 @@ import Input from "./wje-input.js";
|
|
|
14
14
|
import Option from "./wje-option.js";
|
|
15
15
|
import Options from "./wje-options.js";
|
|
16
16
|
import { P as Popup } from "./popup.element-Dna4OwCH.js";
|
|
17
|
-
const styles = "/*\r\n[ WJ Select ]\r\n*/\r\n\r\n:host {\r\n --wje-select-border-width: 1px;\r\n --wje-select-border-style: solid;\r\n --wje-select-border-color: var(--wje-border-color);\r\n\r\n --wje-select-options-border-width: 1px;\r\n --wje-select-options-border-style: var(--wje-border-style);\r\n --wje-select-options-border-color: var(--wje-border-color);\r\n\r\n --wje-select-background: var(--wje-background);\r\n --wje-select-line-height: 20px;\r\n --wje-select-color: var(--wje-color);\r\n --wje-select-border-radius: var(--wje-border-radius-medium);\r\n\r\n width: 100%;\r\n display: block;\r\n [slot=arrow] {\r\n transform: rotate(0deg);\r\n transition: all .2s ease-in;\r\n }\r\n}\r\n\r\n.native-select {\r\n &.default{\r\n .wrapper {\r\n display: block;\r\n border-width: var(--wje-select-border-width);\r\n border-style: var(--wje-select-border-style);\r\n border-color: var(--wje-select-border-color);\r\n border-radius: var(--wje-select-border-radius);\r\n padding-inline: .5rem;\r\n padding-top: 0.125rem;\r\n padding-bottom: 0.125rem;\r\n }\r\n .input-wrapper {\r\n padding: 0;\r\n min-height: 28px;\r\n margin-top: -4px;\r\n }\r\n &.focused {\r\n wje-label {\r\n opacity: 0.67;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n wje-label {\r\n margin: 0;\r\n display: block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease 0s;\r\n line-height: var(--wje-select-line-height);\r\n &.fade {\r\n opacity: 0.5;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n }\r\n &.standard {\r\n .wrapper {\r\n background-color: var(--wje-select-background);\r\n border-width: var(--wje-select-border-width);\r\n border-style: var(--wje-select-border-style);\r\n border-color: var(--wje-select-border-color);\r\n border-radius: var(--wje-select-border-radius);\r\n }\r\n .input-wrapper {\r\n background: transparent;\r\n width: 100%;\r\n }\r\n }\r\n}\r\n\r\n.wrapper {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.input-wrapper {\r\n display: grid;\r\n grid-template-columns: 1fr auto auto;\r\n align-items: center;\r\n background-color: var(--wje-select-background);\r\n min-height: 28px;\r\n color: var(--wje-select-color);\r\n line-height: var(--wje-select-line-height);\r\n appearance: none;\r\n padding: 2px .5rem;\r\n font-size: 14px !important;\r\n font-weight: normal;\r\n vertical-align: middle;\r\n}\r\n\r\ninput {\r\n color: var(--wje-select-color);\r\n line-height: var(--wje-select-line-height);\r\n font-size: 14px !important;\r\n font-weight: 400;\r\n letter-spacing: .01em;\r\n border: medium;\r\n height: 25px;\r\n min-height: 25px;\r\n padding: 0;\r\n background: none;\r\n box-shadow: none;\r\n width: 100%;\r\n outline: 0;\r\n font-size: 14px !important;\r\n}\r\n\r\n::placeholder {\r\n opacity: 1;\r\n}\r\n\r\n:host [active] {\r\n .wrapper {\r\n border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\r\n }\r\n [slot=arrow] {\r\n transform: rotate(180deg);\r\n transition: all .2s ease-in;\r\n }\r\n}\r\n\r\n.options-wrapper {\r\n border-width: var(--wje-select-options-border-width);\r\n border-style: var(--wje-select-options-border-style);\r\n border-color: var(--wje-select-options-border-color);\r\n border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\r\n margin-top: -
|
|
17
|
+
const styles = "/*\r\n[ WJ Select ]\r\n*/\r\n\r\n:host {\r\n --wje-select-border-width: 1px;\r\n --wje-select-border-style: solid;\r\n --wje-select-border-color: var(--wje-border-color);\r\n\r\n --wje-select-options-border-width: 1px;\r\n --wje-select-options-border-style: var(--wje-border-style);\r\n --wje-select-options-border-color: var(--wje-border-color);\r\n\r\n --wje-select-background: var(--wje-background);\r\n --wje-select-line-height: 20px;\r\n --wje-select-color: var(--wje-color);\r\n --wje-select-border-radius: var(--wje-border-radius-medium);\r\n\r\n width: 100%;\r\n display: block;\r\n [slot=arrow] {\r\n transform: rotate(0deg);\r\n transition: all .2s ease-in;\r\n }\r\n}\r\n\r\n.native-select {\r\n &.default{\r\n .wrapper {\r\n display: block;\r\n border-width: var(--wje-select-border-width);\r\n border-style: var(--wje-select-border-style);\r\n border-color: var(--wje-select-border-color);\r\n border-radius: var(--wje-select-border-radius);\r\n padding-inline: .5rem;\r\n padding-top: 0.125rem;\r\n padding-bottom: 0.125rem;\r\n }\r\n .input-wrapper {\r\n padding: 0;\r\n min-height: 28px;\r\n margin-top: -4px;\r\n }\r\n &.focused {\r\n wje-label {\r\n opacity: 0.67;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n wje-label {\r\n margin: 0;\r\n display: block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease 0s;\r\n line-height: var(--wje-select-line-height);\r\n &.fade {\r\n opacity: 0.5;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n }\r\n &.standard {\r\n .wrapper {\r\n background-color: var(--wje-select-background);\r\n border-width: var(--wje-select-border-width);\r\n border-style: var(--wje-select-border-style);\r\n border-color: var(--wje-select-border-color);\r\n border-radius: var(--wje-select-border-radius);\r\n }\r\n .input-wrapper {\r\n background: transparent;\r\n width: 100%;\r\n }\r\n }\r\n}\r\n\r\n.wrapper {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.input-wrapper {\r\n display: grid;\r\n grid-template-columns: auto 1fr auto auto auto;\r\n align-items: center;\r\n background-color: var(--wje-select-background);\r\n min-height: 28px;\r\n color: var(--wje-select-color);\r\n line-height: var(--wje-select-line-height);\r\n appearance: none;\r\n padding: 2px .5rem;\r\n font-size: 14px !important;\r\n font-weight: normal;\r\n vertical-align: middle;\r\n}\r\n\r\ninput {\r\n color: var(--wje-select-color);\r\n line-height: var(--wje-select-line-height);\r\n font-size: 14px !important;\r\n font-weight: 400;\r\n letter-spacing: .01em;\r\n border: medium;\r\n height: 25px;\r\n min-height: 25px;\r\n padding: 0;\r\n background: none;\r\n box-shadow: none;\r\n width: 100%;\r\n outline: 0;\r\n font-size: 14px !important;\r\n}\r\n\r\n::placeholder {\r\n opacity: 1;\r\n}\r\n\r\n:host [active] {\r\n .wrapper {\r\n border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\r\n }\r\n [slot=arrow] {\r\n transform: rotate(180deg);\r\n transition: all .2s ease-in;\r\n }\r\n}\r\n\r\n.options-wrapper {\r\n border-width: var(--wje-select-options-border-width);\r\n border-style: var(--wje-select-options-border-style);\r\n border-color: var(--wje-select-options-border-color);\r\n border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\r\n margin-top: calc(0px - var(--wje-select-border-width));\r\n background: var(--wje-select-background);\r\n overflow: hidden;\r\n\r\n}\r\n\r\n.find {\r\n --wje-input-border-radius: 0;\r\n --wje-input-border-width: 0 0 1px 0;\r\n}\r\n\r\n.list {\r\n overflow: auto;\r\n height: 100%;\r\n}\r\n\r\n.options-wrapper:has(.find) .list {\r\n height: calc(100% - 32px - .5rem);\r\n}\r\n\r\n:host([multiple]) input {\r\n position: absolute;\r\n z-index: -1;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n}\r\n\r\n:host([multiple]) .chips {\r\n display: flex;\r\n flex: 1;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n}\r\n\r\n:host([disabled]) .input-wrapper{\r\n opacity: 0.5;\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n}\r\n\r\n.counter {\r\n padding-inline: .5rem;\r\n}\r\n\r\nwje-chip {\r\n --wje-chip-margin: 0 .25rem 0 0;\r\n}\r\n\r\nwje-button {\r\n --wje-padding-top: .25rem;\r\n --wje-padding-start: .25rem;\r\n --wje-padding-end: .25rem;\r\n --wje-padding-bottom: .25rem;\r\n --wje-button-margin-inline: 0 .25rem;\r\n}\r\n\r\n.slot-start, .slot-end {\r\n &:not(:empty) {\r\n margin-right: .5rem;\r\n }\r\n}\r\n";
|
|
18
18
|
class Select extends WJElement {
|
|
19
19
|
/**
|
|
20
20
|
* Creates an instance of Select.
|
|
@@ -50,6 +50,7 @@ class Select extends WJElement {
|
|
|
50
50
|
}
|
|
51
51
|
e.target.selected = !e.target.hasAttribute("selected");
|
|
52
52
|
this.selections(e.target);
|
|
53
|
+
event.dispatchCustomEvent(this, "wje-select:change");
|
|
53
54
|
});
|
|
54
55
|
/**
|
|
55
56
|
* Handles the chip remove event.
|
|
@@ -142,13 +143,18 @@ class Select extends WJElement {
|
|
|
142
143
|
let label = document.createElement("wje-label");
|
|
143
144
|
label.innerText = this.label || "";
|
|
144
145
|
let inputWrapper = document.createElement("div");
|
|
146
|
+
inputWrapper.setAttribute("part", "input-wrapper");
|
|
145
147
|
inputWrapper.classList.add("input-wrapper");
|
|
148
|
+
let slotStart = document.createElement("div");
|
|
149
|
+
slotStart.classList.add("slot-start");
|
|
146
150
|
let input = document.createElement("input");
|
|
147
151
|
input.setAttribute("type", "text");
|
|
148
152
|
input.setAttribute("part", "input");
|
|
149
153
|
input.setAttribute("autocomplete", "off");
|
|
150
154
|
input.setAttribute("readonly", "");
|
|
151
155
|
input.setAttribute("placeholder", this.placeholder || "");
|
|
156
|
+
let slotEnd = document.createElement("div");
|
|
157
|
+
slotEnd.classList.add("slot-end");
|
|
152
158
|
let arrow = document.createElement("wje-icon");
|
|
153
159
|
arrow.setAttribute("name", "chevron-down");
|
|
154
160
|
arrow.setAttribute("slot", "arrow");
|
|
@@ -156,6 +162,7 @@ class Select extends WJElement {
|
|
|
156
162
|
chips.classList.add("chips");
|
|
157
163
|
chips.innerText = this.placeholder || "";
|
|
158
164
|
let optionsWrapper = document.createElement("div");
|
|
165
|
+
optionsWrapper.setAttribute("part", "options-wrapper");
|
|
159
166
|
optionsWrapper.classList.add("options-wrapper");
|
|
160
167
|
optionsWrapper.style.setProperty("height", this.maxHeight || "auto");
|
|
161
168
|
let list = document.createElement("div");
|
|
@@ -179,11 +186,13 @@ class Select extends WJElement {
|
|
|
179
186
|
} else {
|
|
180
187
|
wrapper.appendChild(label);
|
|
181
188
|
}
|
|
189
|
+
inputWrapper.appendChild(slotStart);
|
|
182
190
|
inputWrapper.appendChild(input);
|
|
183
191
|
if (this.hasAttribute("multiple"))
|
|
184
192
|
inputWrapper.appendChild(chips);
|
|
185
193
|
if (this.hasAttribute("clearable"))
|
|
186
194
|
inputWrapper.appendChild(clear);
|
|
195
|
+
inputWrapper.appendChild(slotEnd);
|
|
187
196
|
inputWrapper.appendChild(arrow);
|
|
188
197
|
list.appendChild(slot);
|
|
189
198
|
if (this.hasAttribute("find")) {
|
|
@@ -204,6 +213,8 @@ class Select extends WJElement {
|
|
|
204
213
|
this.native = native;
|
|
205
214
|
this.popup = popup;
|
|
206
215
|
this.labelElement = label;
|
|
216
|
+
this.slotStart = slotStart;
|
|
217
|
+
this.slotEnd = slotEnd;
|
|
207
218
|
this.input = input;
|
|
208
219
|
this.optionsWrapper = optionsWrapper;
|
|
209
220
|
this.chips = chips;
|
|
@@ -229,7 +240,7 @@ class Select extends WJElement {
|
|
|
229
240
|
if (!e.target.value)
|
|
230
241
|
this.labelElement.classList.remove("fade");
|
|
231
242
|
});
|
|
232
|
-
this.addEventListener("wje:
|
|
243
|
+
this.addEventListener("wje-option:change", this.optionChange);
|
|
233
244
|
this.clear.addEventListener("wje-button:click", (e) => {
|
|
234
245
|
this.getAllOptions().forEach((option) => {
|
|
235
246
|
option.selected = false;
|
|
@@ -311,6 +322,16 @@ class Select extends WJElement {
|
|
|
311
322
|
let value = (option == null ? void 0 : option.textContent.trim()) || "";
|
|
312
323
|
this.value = value;
|
|
313
324
|
this.input.value = value;
|
|
325
|
+
if (option && option instanceof HTMLElement) {
|
|
326
|
+
this.slotStart.innerHTML = "";
|
|
327
|
+
if (option == null ? void 0 : option.querySelector("[slot=start]")) {
|
|
328
|
+
this.slotStart.appendChild(option == null ? void 0 : option.querySelector("[slot=start]").cloneNode(true));
|
|
329
|
+
}
|
|
330
|
+
this.slotEnd.innerHTML = "";
|
|
331
|
+
if (option == null ? void 0 : option.querySelector("[slot=end]")) {
|
|
332
|
+
this.slotEnd.appendChild(option == null ? void 0 : option.querySelector("[slot=end]").cloneNode(true));
|
|
333
|
+
}
|
|
334
|
+
}
|
|
314
335
|
}
|
|
315
336
|
}
|
|
316
337
|
/**
|
package/dist/wje-textarea.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 = '/*\r\n[ WJ Textarea ]\r\n*/\r\n\r\n:host {\r\n width: 100%;\r\n margin-bottom: var(--wje-textarea-margin-bottom);\r\n display: block;\r\n .wrapper {\r\n display: flex;\r\n width: 100%;\r\n border-width: var(--wje-textarea-border-width);\r\n border-style: var(--wje-textarea-border-style);\r\n border-color: var(--wje-textarea-border-color);\r\n border-radius: var(--wje-textarea-border-radius);\r\n }\r\n textarea {\r\n font-family: var(--wje-textarea-font-family);\r\n color: var(--wje-textarea-color);\r\n font-size: 14px;\r\n border: 0 none;\r\n padding: 0 var(--wje-textarea-padding);\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n}\r\n\r\n:host([resize="auto"]) textarea,\r\n:host([resize="none"]) textarea {\r\n resize: none;\r\n}\r\n\r\n.native-textarea {\r\n .input-wrapper {\r\n width: 100%;\r\n line-height: normal;\r\n }\r\n &.default {\r\n background-color: var(--wje-textarea-background-color);\r\n font-family: var(--wje-textarea-font-family);\r\n position: relative;\r\n padding-inline: 0;\r\n padding-top: 0;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n &.focused {\r\n .wrapper {\r\n border-color: var(--wje-textarea-border-color-focus) !important;\r\n }\r\n label {\r\n opacity: 0.67;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n textarea {\r\n border: none;\r\n padding-top: 0;\r\n background: none;\r\n box-shadow: none;\r\n width: calc(100% - var(--wje-textarea-padding) * 2);\r\n max-width: calc(100% - var(--wje-textarea-padding) * 2);\r\n min-width: calc(100% - var(--wje-textarea-padding) * 2);\r\n }\r\n label {\r\n padding: 0 var(--wje-textarea-padding);\r\n display: block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-textarea-line-height);\r\n padding-top: .25rem;\r\n &.fade {\r\n opacity: 0.5;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n ::slotted([slot="start"]) {\r\n border-left: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-right: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n }\r\n &.standard {\r\n font-family: var(--wje-textarea-font-family);\r\n position: relative;\r\n border-radius: var(--wje-textarea-border-radius);\r\n padding: 0;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n &.focused {\r\n .wrapper {\r\n border-color: var(--wje-textarea-border-color-focus) !important;\r\n }\r\n }\r\n textarea {\r\n background-color: var(--wje-textarea-background-color);\r\n display: block;\r\n min-height: 32px;\r\n box-shadow: none;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: var(--wje-textarea-border-radius);\r\n }\r\n label {\r\n margin: 0;\r\n display: inline-block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-textarea-line-height);\r\n }\r\n ::slotted([slot="start"]) {\r\n border-right: none;\r\n border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-left: none;\r\n border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\r\n }\r\n\r\n &.has-start textarea{\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n\r\n &.has-end textarea{\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n .error-message {\r\n position: static;\r\n background: transparent;\r\n padding: 0.25rem 0;\r\n left: auto;\r\n transform: none;\r\n color: var(--wje-textarea-color-invalid);\r\n font-size: 12px;\r\n line-height: normal;\r\n }\r\n }\r\n}\r\n\r\n.counter {\r\n float: right;\r\n}';
|
|
8
|
+
const styles = '/*\r\n[ WJ Textarea ]\r\n*/\r\n\r\n:host {\r\n width: 100%;\r\n margin-bottom: var(--wje-textarea-margin-bottom);\r\n display: block;\r\n .wrapper {\r\n display: flex;\r\n width: 100%;\r\n border-width: var(--wje-textarea-border-width);\r\n border-style: var(--wje-textarea-border-style);\r\n border-color: var(--wje-textarea-border-color);\r\n border-radius: var(--wje-textarea-border-radius);\r\n box-sizing: border-box;\r\n }\r\n textarea {\r\n font-family: var(--wje-textarea-font-family);\r\n color: var(--wje-textarea-color);\r\n font-size: 14px;\r\n border: 0 none;\r\n padding: 0 var(--wje-textarea-padding);\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n}\r\n\r\n:host([resize="auto"]) textarea,\r\n:host([resize="none"]) textarea {\r\n resize: none;\r\n}\r\n\r\n.native-textarea {\r\n .input-wrapper {\r\n width: 100%;\r\n line-height: normal;\r\n }\r\n &.default {\r\n background-color: var(--wje-textarea-background-color);\r\n font-family: var(--wje-textarea-font-family);\r\n position: relative;\r\n padding-inline: 0;\r\n padding-top: 0;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n &.focused {\r\n .wrapper {\r\n border-color: var(--wje-textarea-border-color-focus) !important;\r\n }\r\n label {\r\n opacity: 0.67;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n textarea {\r\n border: none;\r\n padding-top: 0;\r\n background: none;\r\n box-shadow: none;\r\n width: calc(100% - var(--wje-textarea-padding) * 2);\r\n max-width: calc(100% - var(--wje-textarea-padding) * 2);\r\n min-width: calc(100% - var(--wje-textarea-padding) * 2);\r\n }\r\n label {\r\n padding: 0 var(--wje-textarea-padding);\r\n display: block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-textarea-line-height);\r\n padding-top: .25rem;\r\n &.fade {\r\n opacity: 0.5;\r\n font-size: 12px;\r\n letter-spacing: normal;\r\n }\r\n }\r\n ::slotted([slot="start"]) {\r\n border-left: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-right: none;\r\n border-top: none;\r\n border-bottom: none;\r\n }\r\n }\r\n &.standard {\r\n font-family: var(--wje-textarea-font-family);\r\n position: relative;\r\n border-radius: var(--wje-textarea-border-radius);\r\n padding: 0;\r\n transition: background-color 0.2s ease;\r\n cursor: text;\r\n &.focused {\r\n .wrapper {\r\n border-color: var(--wje-textarea-border-color-focus) !important;\r\n }\r\n }\r\n textarea {\r\n background-color: var(--wje-textarea-background-color);\r\n display: block;\r\n min-height: 32px;\r\n box-shadow: none;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: var(--wje-textarea-border-radius);\r\n }\r\n label {\r\n margin: 0;\r\n display: inline-block;\r\n opacity: 1;\r\n cursor: text;\r\n transition: opacity 0.2s ease;\r\n line-height: var(--wje-textarea-line-height);\r\n }\r\n ::slotted([slot="start"]) {\r\n border-right: none;\r\n border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\r\n }\r\n\r\n ::slotted([slot="end"]) {\r\n border-left: none;\r\n border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\r\n }\r\n\r\n &.has-start textarea{\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n\r\n &.has-end textarea{\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n .error-message {\r\n position: static;\r\n background: transparent;\r\n padding: 0.25rem 0;\r\n left: auto;\r\n transform: none;\r\n color: var(--wje-textarea-color-invalid);\r\n font-size: 12px;\r\n line-height: normal;\r\n }\r\n }\r\n}\r\n\r\n.counter {\r\n float: right;\r\n}';
|
|
9
9
|
class Textarea extends WJElement {
|
|
10
10
|
/**
|
|
11
11
|
* Creates an instance of Textarea.
|
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.88",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|