wj-elements 0.1.32 → 0.1.34
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/localize.js +13 -11
- package/dist/{popup.element-DE8fye8C.js → popup.element-CWsSOxs2.js} +99 -95
- package/dist/wje-button.js +56 -29
- package/dist/wje-chip.js +1 -1
- package/dist/wje-dropdown.js +73 -27
- package/dist/wje-element.js +50 -50
- package/dist/wje-icon-picker.js +1 -1
- package/dist/wje-icon.js +1 -1
- package/dist/wje-input.js +152 -58
- package/dist/wje-master.js +1 -1
- package/dist/wje-menu-item.js +18 -17
- package/dist/wje-popup.js +1 -1
- package/dist/wje-reorder-handle.js +43 -37
- package/dist/wje-select.js +1 -1
- package/dist/wje-tooltip.js +24 -23
- package/package.json +1 -1
package/dist/wje-input.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
class
|
|
1
|
+
var x = Object.defineProperty;
|
|
2
|
+
var E = (l, n, t) => n in l ? x(l, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[n] = t;
|
|
3
|
+
var m = (l, n, t) => (E(l, typeof n != "symbol" ? n + "" : n, t), t);
|
|
4
|
+
import A, { event as j } from "./wje-element.js";
|
|
5
|
+
const k = ':host{--wje-input-font-family: var(--wje-font-family);--wje-input-background-color: var(--wje-background);--wje-input-color: var(--wje-color);--wje-input-color-invalid: var(--wje-color-danger);--wje-input-border-color: var(--wje-border-color);--wje-input-border-color-focus: var(--wje-color-primary);--wje-input-border-width: 1px;--wje-input-border-style: solid;--wje-input-border-radius: 4px;--wje-input-margin-bottom: .5rem;--wje-input-line-height: 20px;--wje-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wje-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wje-input-background-color);font-family:var(--wje-input-font-family);position:relative;border-radius:var(--wje-input-border-radius);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wje-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wje-input-background-color);font-family:var(--wje-input-font-family);position:relative;border-radius:var(--wje-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wje-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-input-border-radius);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius)}:host .native-input.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wje-input-color-invalid);content:"*";font-family:var(--wje-force-mac-font-family);font-size:20px;position:absolute;right:0;top:0}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wje-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot="start"]),::slotted([slot="end"]){display:flex;align-items:center;border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);padding-inline:var(--wje-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}slot[name=error]{display:none;margin-inline:.5rem}:host([invalid]) slot[name=error]{display:block}input{background-color:var(--wje-input-background-color);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);font-family:var(--wjinput-font-family);color:var(--wje-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wje-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:#000;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}';
|
|
6
|
+
class f extends A {
|
|
7
7
|
/**
|
|
8
8
|
* Constructor for the Input class.
|
|
9
9
|
* @param {Object} options - The options for the Input class.
|
|
@@ -14,7 +14,7 @@ class m extends x {
|
|
|
14
14
|
* The class name of the input.
|
|
15
15
|
* @type {string}
|
|
16
16
|
*/
|
|
17
|
-
|
|
17
|
+
m(this, "className", "Input");
|
|
18
18
|
this.invalid = !1, this.pristine = !0, this.internals = this.attachInternals();
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
@@ -22,14 +22,15 @@ class m extends x {
|
|
|
22
22
|
* @param {string} value - The value to set.
|
|
23
23
|
*/
|
|
24
24
|
set value(t) {
|
|
25
|
-
this.
|
|
25
|
+
this.internals.setFormValue(t), this.input && (this.input.value = t);
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
28
|
* Getter for the value attribute.
|
|
29
29
|
* @returns {string} The value of the attribute.
|
|
30
30
|
*/
|
|
31
31
|
get value() {
|
|
32
|
-
|
|
32
|
+
var t;
|
|
33
|
+
return ((t = this.input) == null ? void 0 : t.value) || "";
|
|
33
34
|
}
|
|
34
35
|
/**
|
|
35
36
|
* Getter for the customErrorDisplay attribute.
|
|
@@ -57,7 +58,7 @@ class m extends x {
|
|
|
57
58
|
* @param {boolean} isInvalid - Whether the input is invalid.
|
|
58
59
|
*/
|
|
59
60
|
set invalid(t) {
|
|
60
|
-
t
|
|
61
|
+
t ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
|
|
61
62
|
}
|
|
62
63
|
/**
|
|
63
64
|
* Getter for the form attribute.
|
|
@@ -102,25 +103,30 @@ class m extends x {
|
|
|
102
103
|
return this.internals.willValidate;
|
|
103
104
|
}
|
|
104
105
|
/**
|
|
105
|
-
*
|
|
106
|
-
*
|
|
106
|
+
* @summary Getter for the defaultValue attribute.
|
|
107
|
+
* This method retrieves the 'value' attribute of the custom input element.
|
|
108
|
+
* The 'value' attribute represents the default value of the input element.
|
|
109
|
+
* If the 'value' attribute is not set, it returns an empty string.
|
|
110
|
+
* @returns {string} The default value of the input element.
|
|
107
111
|
*/
|
|
108
|
-
|
|
109
|
-
return this.
|
|
112
|
+
get defaultValue() {
|
|
113
|
+
return this.getAttribute("value") ?? "";
|
|
110
114
|
}
|
|
111
115
|
/**
|
|
112
|
-
*
|
|
113
|
-
*
|
|
116
|
+
* @summary Setter for the defaultValue attribute.
|
|
117
|
+
* This method sets the 'value' attribute of the custom input element to the provided value.
|
|
118
|
+
* The 'value' attribute represents the default value of the input element.
|
|
119
|
+
* @param {string} value - The value to set as the default value.
|
|
114
120
|
*/
|
|
115
|
-
|
|
116
|
-
|
|
121
|
+
set defaultValue(t) {
|
|
122
|
+
this.setAttribute("value", t);
|
|
117
123
|
}
|
|
118
124
|
/**
|
|
119
125
|
* Getter for the cssStyleSheet attribute.
|
|
120
126
|
* @returns {CSSStyleSheet} The CSS style sheet of the input.
|
|
121
127
|
*/
|
|
122
128
|
static get cssStyleSheet() {
|
|
123
|
-
return
|
|
129
|
+
return k;
|
|
124
130
|
}
|
|
125
131
|
/**
|
|
126
132
|
* Getter for the observedAttributes attribute.
|
|
@@ -133,7 +139,7 @@ class m extends x {
|
|
|
133
139
|
* Sets up the attributes for the input.
|
|
134
140
|
*/
|
|
135
141
|
setupAttributes() {
|
|
136
|
-
this.isShadowRoot = "open";
|
|
142
|
+
this.isShadowRoot = "open", this.value = this.defaultValue;
|
|
137
143
|
}
|
|
138
144
|
/**
|
|
139
145
|
* Draws the input.
|
|
@@ -142,28 +148,32 @@ class m extends x {
|
|
|
142
148
|
* @param {Object} params - The parameters to use.
|
|
143
149
|
* @returns {DocumentFragment} The drawn input.
|
|
144
150
|
*/
|
|
145
|
-
draw(t, e,
|
|
146
|
-
let
|
|
147
|
-
|
|
148
|
-
let
|
|
149
|
-
|
|
150
|
-
let d = document.createElement("div");
|
|
151
|
-
d.classList.add("input-wrapper");
|
|
152
|
-
let u = document.createElement("label");
|
|
153
|
-
u.innerText = this.label, this.value && !this.hasAttribute("error") && u.classList.add("fade");
|
|
154
|
-
let i = document.createElement("input");
|
|
155
|
-
i.setAttribute("type", "text"), i.setAttribute("part", "input"), i.setAttribute("value", this.value || ""), i.classList.add("form-control"), this.hasAttribute("placeholder") && i.setAttribute("placeholder", this.placeholder), this.hasAttribute("multiple") && i.setAttribute("multiple", this.multiple), this.hasAttribute("disabled") && i.setAttribute("disabled", ""), this.hasAttribute("readonly") && i.setAttribute("readonly", ""), this.hasAttribute("maxlength") && i.setAttribute("maxlength", this.maxlength), this.hasAttribute("max") && i.setAttribute("max", this.max), this.hasAttribute("min") && i.setAttribute("min", this.min);
|
|
151
|
+
draw(t, e, r) {
|
|
152
|
+
let a = this.hasSlot(this, "start"), g = this.hasSlot(this, "end"), y = this.hasSlot(this, "error"), w = document.createDocumentFragment(), i = document.createElement("div");
|
|
153
|
+
i.setAttribute("part", "native"), i.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && i.classList.add("has-error");
|
|
154
|
+
let s = document.createElement("div");
|
|
155
|
+
s.classList.add("wrapper"), i.appendChild(s);
|
|
156
156
|
let p = document.createElement("div");
|
|
157
|
-
p.classList.add("
|
|
158
|
-
let h =
|
|
159
|
-
|
|
157
|
+
p.classList.add("input-wrapper");
|
|
158
|
+
let h = document.createElement("label");
|
|
159
|
+
h.innerText = this.label, this.value && !this.hasAttribute("error") && h.classList.add("fade");
|
|
160
|
+
let o = document.createElement("input");
|
|
161
|
+
o.setAttribute("type", "text"), o.setAttribute("part", "input"), o.setAttribute("value", this.value || ""), o.classList.add("form-control"), ["placeholder", "multiple", "disabled", "readonly", "maxlength", "max", "min"].forEach((u) => {
|
|
162
|
+
this.hasAttribute(u) && o.setAttribute(u, this[u] || "");
|
|
163
|
+
});
|
|
164
|
+
let d = document.createElement("div");
|
|
165
|
+
d.classList.add("error-message"), d.setAttribute("part", "error");
|
|
160
166
|
let c = null;
|
|
161
|
-
|
|
167
|
+
y ? (c = document.createElement("slot"), c.setAttribute("name", "error"), this.hasAttribute("error-inline") ? i.appendChild(c) : (d.appendChild(c), s.appendChild(d))) : s.appendChild(d);
|
|
168
|
+
let v = null;
|
|
169
|
+
a && (v = document.createElement("slot"), v.setAttribute("name", "start"));
|
|
170
|
+
let b = null;
|
|
171
|
+
if (g && (b = document.createElement("slot"), b.setAttribute("name", "end")), a && (s.appendChild(v), i.classList.add("has-start")), this.variant === "standard" ? this.label && i.appendChild(h) : p.appendChild(h), p.appendChild(o), s.appendChild(p), this.hasAttribute("clearable")) {
|
|
162
172
|
this.clear = document.createElement("wje-button"), this.clear.classList.add("clear"), this.clear.setAttribute("fill", "link"), this.clear.setAttribute("part", "clear");
|
|
163
|
-
let
|
|
164
|
-
|
|
173
|
+
let u = document.createElement("wje-icon");
|
|
174
|
+
u.setAttribute("name", "x"), this.clear.appendChild(u), p.appendChild(this.clear);
|
|
165
175
|
}
|
|
166
|
-
return
|
|
176
|
+
return g && (s.appendChild(b), i.classList.add("has-end")), w.appendChild(i), this.native = i, this.labelElement = h, this.input = o, this.errorMessage = d, w;
|
|
167
177
|
}
|
|
168
178
|
/**
|
|
169
179
|
* Runs after the input is drawn.
|
|
@@ -187,37 +197,68 @@ class m extends x {
|
|
|
187
197
|
}), this.input.addEventListener("blur", (t) => {
|
|
188
198
|
this.native.classList.remove("focused"), t.target.value || this.labelElement.classList.remove("fade");
|
|
189
199
|
}), this.input.addEventListener("input", (t) => {
|
|
190
|
-
this.validateOnChange && (this.pristine = !1), this.input.classList.remove("pristine"), this.labelElement.classList.add("fade");
|
|
200
|
+
this.validateInput(), this.validateOnChange && (this.pristine = !1, this.propagateValidation()), this.input.classList.remove("pristine"), this.labelElement.classList.add("fade");
|
|
191
201
|
const e = new t.constructor(t.type, t);
|
|
192
|
-
this.dispatchEvent(e),
|
|
202
|
+
this.dispatchEvent(e), j.dispatchCustomEvent(this, "wje-input:input", {
|
|
193
203
|
value: this.input.value
|
|
194
|
-
});
|
|
204
|
+
}), this.value = this.input.value;
|
|
195
205
|
}), this.addEventListener("invalid", (t) => {
|
|
196
|
-
this.invalid = !0, this.pristine = !1, this.
|
|
206
|
+
this.invalid = !0, this.pristine = !1, this.showInvalidMessage(), this.customErrorDisplay && t.preventDefault();
|
|
197
207
|
}), this.addEventListener("focus", () => this.input.focus()), this.clear && this.clear.addEventListener("wje-button:click", (t) => {
|
|
198
|
-
this.input.value = "",
|
|
199
|
-
});
|
|
208
|
+
this.input.value = "", j.dispatchCustomEvent(this.clear, "wje-input:clear");
|
|
209
|
+
}), this.validateInput();
|
|
200
210
|
}
|
|
201
211
|
/**
|
|
202
|
-
*
|
|
212
|
+
* @summary Displays the validation message for the input.
|
|
213
|
+
* If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
|
|
214
|
+
* If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
|
|
215
|
+
*/
|
|
216
|
+
showInvalidMessage() {
|
|
217
|
+
if (this.hasSlot(this, "error")) {
|
|
218
|
+
const e = this.querySelector("[slot='error']");
|
|
219
|
+
let r = e.querySelector("[error-message]");
|
|
220
|
+
if (!r) {
|
|
221
|
+
const a = document.createElement("div");
|
|
222
|
+
a.setAttribute("error-message", ""), e.appendChild(a), r = a;
|
|
223
|
+
}
|
|
224
|
+
r.textContent = this.internals.validationMessage;
|
|
225
|
+
} else
|
|
226
|
+
this.errorMessage.textContent = this.internals.validationMessage;
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* @summary Validates the input.
|
|
230
|
+
* This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.
|
|
231
|
+
* For each invalid state, it constructs an attribute name and checks if the input has this attribute.
|
|
232
|
+
* If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.
|
|
233
|
+
* If the input does not have the attribute, it sets the error message to the default validation message of the input.
|
|
234
|
+
* It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.
|
|
235
|
+
* If the input is valid, it sets the validity in the form internals to an empty object.
|
|
203
236
|
*/
|
|
204
237
|
validateInput() {
|
|
205
238
|
const t = this.input.validity;
|
|
206
|
-
if (
|
|
207
|
-
this.internals.setValidity({})
|
|
239
|
+
if (t.valid)
|
|
240
|
+
this.internals.setValidity({});
|
|
208
241
|
else
|
|
209
242
|
for (let e in t) {
|
|
210
|
-
const
|
|
243
|
+
const r = `message-${e.toString()}`;
|
|
211
244
|
if (t[e]) {
|
|
212
|
-
this.validationError = e.toString()
|
|
213
|
-
let
|
|
214
|
-
this.hasAttribute("message") || (
|
|
245
|
+
this.validationError = e.toString();
|
|
246
|
+
let a = this.message;
|
|
247
|
+
this.hasAttribute("message") || (a = this.hasAttribute(r) ? this.getAttribute(r) : this.input.validationMessage), this.internals.setValidity(
|
|
215
248
|
{ [this.validationError]: !0 },
|
|
216
|
-
|
|
217
|
-
)
|
|
249
|
+
a
|
|
250
|
+
);
|
|
218
251
|
}
|
|
219
252
|
}
|
|
220
253
|
}
|
|
254
|
+
/**
|
|
255
|
+
* @summary Propagates the validation state of the input.
|
|
256
|
+
* This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
|
|
257
|
+
* If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
|
|
258
|
+
*/
|
|
259
|
+
propagateValidation() {
|
|
260
|
+
this.invalid = !this.pristine && !this.internals.validity.valid, this.invalid && this.customErrorDisplay && this.dispatchEvent(new Event("invalid"));
|
|
261
|
+
}
|
|
221
262
|
/**
|
|
222
263
|
* Checks whether the input has a slot.
|
|
223
264
|
* @param {HTMLElement} el - The element to check.
|
|
@@ -225,16 +266,69 @@ class m extends x {
|
|
|
225
266
|
* @returns {boolean} Whether the input has the slot.
|
|
226
267
|
*/
|
|
227
268
|
hasSlot(t, e = null) {
|
|
228
|
-
let
|
|
229
|
-
return t.querySelectorAll(
|
|
269
|
+
let r = e ? `[slot="${e}"]` : "[slot]";
|
|
270
|
+
return t.querySelectorAll(r).length > 0;
|
|
271
|
+
}
|
|
272
|
+
/**
|
|
273
|
+
* @summary Callback function that is called when the custom element is associated with a form.
|
|
274
|
+
* This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
|
|
275
|
+
* @param {HTMLFormElement} form - The form the custom element is associated with.
|
|
276
|
+
*/
|
|
277
|
+
formAssociatedCallback(t) {
|
|
278
|
+
t.addEventListener("submit", () => {
|
|
279
|
+
this.validateInput(), this.propagateValidation();
|
|
280
|
+
});
|
|
281
|
+
}
|
|
282
|
+
/**
|
|
283
|
+
* The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
|
|
284
|
+
* This method is responsible for resetting the value of the custom input element to its default value.
|
|
285
|
+
* It also resets the form value and validity state in the form internals.
|
|
286
|
+
*
|
|
287
|
+
* @method
|
|
288
|
+
*/
|
|
289
|
+
formResetCallback() {
|
|
290
|
+
this.value = this.defaultValue, this.internals.setFormValue(this.defaultValue), this.internals.setValidity({});
|
|
291
|
+
}
|
|
292
|
+
/**
|
|
293
|
+
* The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
|
|
294
|
+
* This method is responsible for restoring the value of the custom input element to its saved state.
|
|
295
|
+
* It also restores the form value and validity state in the form internals to their saved states.
|
|
296
|
+
*
|
|
297
|
+
* @param {Object} state - The saved state of the custom input element.
|
|
298
|
+
* @method
|
|
299
|
+
*/
|
|
300
|
+
formStateRestoreCallback(t) {
|
|
301
|
+
this.value = t.value, this.internals.setFormValue(t.value), this.internals.setValidity({});
|
|
302
|
+
}
|
|
303
|
+
/**
|
|
304
|
+
* The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
|
|
305
|
+
* This method is responsible for saving the value of the custom input element.
|
|
306
|
+
*
|
|
307
|
+
* @returns {Object} The saved state of the custom input element.
|
|
308
|
+
* @method
|
|
309
|
+
*/
|
|
310
|
+
formStateSaveCallback() {
|
|
311
|
+
return {
|
|
312
|
+
value: this.value
|
|
313
|
+
};
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
|
|
317
|
+
* This method is not implemented yet.
|
|
318
|
+
*
|
|
319
|
+
* @param {boolean} disabled - The new disabled state of the custom input element.
|
|
320
|
+
* @method
|
|
321
|
+
*/
|
|
322
|
+
formDisabledCallback(t) {
|
|
323
|
+
console.warn("formDisabledCallback not implemented yet");
|
|
230
324
|
}
|
|
231
325
|
}
|
|
232
326
|
/**
|
|
233
327
|
* Whether the input is associated with a form.
|
|
234
328
|
* @type {boolean}
|
|
235
329
|
*/
|
|
236
|
-
|
|
237
|
-
|
|
330
|
+
m(f, "formAssociated", !0);
|
|
331
|
+
f.define("wje-input", f);
|
|
238
332
|
export {
|
|
239
|
-
|
|
333
|
+
f as default
|
|
240
334
|
};
|
package/dist/wje-master.js
CHANGED
|
@@ -86,7 +86,7 @@ import { default as ir } from "./wje-toolbar.js";
|
|
|
86
86
|
import { default as cr } from "./wje-toolbar-action.js";
|
|
87
87
|
import { default as br } from "./wje-tooltip.js";
|
|
88
88
|
import { default as wr } from "./wje-visually-hidden.js";
|
|
89
|
-
import { P as Tr } from "./popup.element-
|
|
89
|
+
import { P as Tr } from "./popup.element-CWsSOxs2.js";
|
|
90
90
|
const o = {
|
|
91
91
|
code: "sk",
|
|
92
92
|
name: "Slovak",
|
package/dist/wje-menu-item.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var y = Object.defineProperty;
|
|
2
|
-
var A = (u,
|
|
3
|
-
var
|
|
2
|
+
var A = (u, r, e) => r in u ? y(u, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[r] = e;
|
|
3
|
+
var h = (u, r, e) => (A(u, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
4
|
import k, { WjElementUtils as E, event as m } from "./wje-element.js";
|
|
5
5
|
import { b as L } from "./router-links-FtZbFUto.js";
|
|
6
|
-
const C = ':host{--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-item-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0
|
|
6
|
+
const C = ':host{--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-item-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
|
|
7
7
|
class j extends k {
|
|
8
8
|
/**
|
|
9
9
|
* Constructor for MenuItem class.
|
|
@@ -11,24 +11,24 @@ class j extends k {
|
|
|
11
11
|
*/
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
|
-
|
|
14
|
+
h(this, "className", "MenuItem");
|
|
15
15
|
/**
|
|
16
16
|
* Dispatches a mousemove event.
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
h(this, "dispatchMove", (e) => {
|
|
19
19
|
this.style.setProperty("--wje-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wje-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
|
|
20
20
|
});
|
|
21
21
|
/**
|
|
22
22
|
* Dispatches a reposition event.
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
h(this, "dispatchReposition", (e) => {
|
|
25
25
|
if (this.submenu.assignedNodes().length === 0)
|
|
26
26
|
return;
|
|
27
27
|
let s = this.submenu.assignedNodes()[0];
|
|
28
|
-
const { left: n, top: t, width: i, height:
|
|
29
|
-
this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${t}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${t +
|
|
28
|
+
const { left: n, top: t, width: i, height: o } = s.getBoundingClientRect();
|
|
29
|
+
this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${t}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${t + o}px`);
|
|
30
30
|
});
|
|
31
|
-
L(this, { selector: !1 }), this.
|
|
31
|
+
L(this, { selector: !1 }), this._collapsible = !1;
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
34
34
|
* Getter for placement attribute.
|
|
@@ -98,24 +98,25 @@ class j extends k {
|
|
|
98
98
|
*/
|
|
99
99
|
draw(e, s, n) {
|
|
100
100
|
var f, w, g;
|
|
101
|
+
this.hasSubmenu = E.hasSlot(this, "submenu");
|
|
101
102
|
let t = document.createDocumentFragment();
|
|
102
103
|
this.setAttribute("tabindex", "0"), this.classList.forEach((a) => {
|
|
103
104
|
a.startsWith("wje-menu-variant-") && this.classList.remove(a);
|
|
104
105
|
}), this.classList.remove("collapse"), this.classList.add("wje-menu-variant-" + this.variant.toLowerCase()), this.collapse ? (w = this.parentElement) != null && w.hasAttribute("collapse") && this.classList.add("collapse") : (f = this.querySelector("wje-menu")) == null || f.setAttribute("variant", this.variant.toLowerCase());
|
|
105
106
|
let i = document.createElement("div");
|
|
106
107
|
i.setAttribute("part", "native"), i.setAttribute("id", "anchor"), i.classList.add("native-menu-item");
|
|
107
|
-
let
|
|
108
|
-
|
|
109
|
-
let d = document.createElement("slot");
|
|
110
|
-
d.name = "start";
|
|
108
|
+
let o = document.createElement("span");
|
|
109
|
+
o.setAttribute("part", "check"), o.classList.add("check-icon"), o.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? o.classList.add("checked") : o.classList.remove("checked");
|
|
111
110
|
let p = document.createElement("slot");
|
|
112
|
-
p.
|
|
111
|
+
p.name = "start";
|
|
113
112
|
let b = document.createElement("slot");
|
|
114
|
-
b.
|
|
113
|
+
b.classList.add("label");
|
|
114
|
+
let d = document.createElement("slot");
|
|
115
|
+
d.setAttribute("part", "end"), d.name = "end";
|
|
115
116
|
let l = document.createElement("slot");
|
|
116
117
|
l.setAttribute("part", "submenu"), l.name = "submenu";
|
|
117
|
-
let x = this.collapse ? "collapse" : "expand",
|
|
118
|
-
|
|
118
|
+
let x = this.collapse ? "collapse" : "expand", c = document.createElement("span");
|
|
119
|
+
c.setAttribute("part", "submenu-icon"), c.classList.add("submenu-icon", x), c.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? i.classList.add("has-submenu") : i.classList.remove("has-submenu"), i.appendChild(o), i.appendChild(p), i.appendChild(b), i.appendChild(d), i.appendChild(c);
|
|
119
120
|
let v = !1;
|
|
120
121
|
if (
|
|
121
122
|
/*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
|
package/dist/wje-popup.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
class b extends
|
|
1
|
+
var x = Object.defineProperty;
|
|
2
|
+
var z = (d, r, e) => r in d ? x(d, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[r] = e;
|
|
3
|
+
var g = (d, r, e) => (z(d, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
|
+
import D from "./wje-element.js";
|
|
5
|
+
const v = ".disabled{opacity:.3}";
|
|
6
|
+
class b extends D {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
|
-
|
|
9
|
+
g(this, "className", "ReorderHandle");
|
|
10
10
|
this.addEventListener("mousedown", this.startDrag.bind(this)), this.addEventListener("touchstart", this.startTouchDrag.bind(this));
|
|
11
11
|
}
|
|
12
12
|
static get cssStyleSheet() {
|
|
13
|
-
return
|
|
13
|
+
return v;
|
|
14
14
|
}
|
|
15
15
|
static get observedAttributes() {
|
|
16
16
|
return ["dropzone", "parent"];
|
|
@@ -39,41 +39,39 @@ class b extends v {
|
|
|
39
39
|
startDragAction(e, s) {
|
|
40
40
|
let t;
|
|
41
41
|
if (this.hasAttribute("parent")) {
|
|
42
|
-
const
|
|
43
|
-
t = this.closest(
|
|
42
|
+
const n = this.getAttribute("parent");
|
|
43
|
+
t = this.closest(n);
|
|
44
44
|
} else
|
|
45
45
|
t = this.parentElement;
|
|
46
|
-
const
|
|
47
|
-
this.getAttribute("dropzone") || this.setAttribute("dropzone",
|
|
48
|
-
const
|
|
49
|
-
let
|
|
50
|
-
|
|
51
|
-
const h = (
|
|
52
|
-
t.style.left = `${
|
|
46
|
+
const i = this.getDropzone(t);
|
|
47
|
+
this.getAttribute("dropzone") || this.setAttribute("dropzone", i.localName);
|
|
48
|
+
const a = t.getBoundingClientRect(), A = e - a.left, y = s - a.top;
|
|
49
|
+
let o = document.createElement("div");
|
|
50
|
+
o.classList.add("sortable-item"), o.style.visibility = "hidden", o.style.height = `${a.height}px`, t.classList.add("dragging"), t.style.position = "fixed", t.style.zIndex = "1000", t.style.width = `${a.width}px`;
|
|
51
|
+
const h = (n, c) => {
|
|
52
|
+
t.style.left = `${n - A - document.documentElement.scrollLeft}px`, t.style.top = `${c - y - document.documentElement.scrollTop}px`;
|
|
53
53
|
};
|
|
54
54
|
h(e, s);
|
|
55
|
-
const
|
|
56
|
-
var
|
|
57
|
-
h(
|
|
58
|
-
const
|
|
59
|
-
if (!
|
|
55
|
+
const m = (n) => {
|
|
56
|
+
var f;
|
|
57
|
+
h(n.pageX, n.pageY);
|
|
58
|
+
const c = this.getClosestDropzone(n.clientX, n.clientY);
|
|
59
|
+
if (!c)
|
|
60
60
|
return;
|
|
61
|
-
const E = Array.from(
|
|
62
|
-
for (const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (o.clientY > u.top && o.clientY < u.bottom) {
|
|
67
|
-
o.clientY < u.top + u.height / 2 ? a.insertBefore(n, r) : a.insertBefore(n, r.nextSibling);
|
|
61
|
+
const E = Array.from(c.children).filter((l) => l !== t && l !== o);
|
|
62
|
+
for (const l of E) {
|
|
63
|
+
const u = l.getBoundingClientRect();
|
|
64
|
+
if (!((f = l.children[0]) != null && f.hasAttribute("locked")) && n.clientY > u.top && n.clientY < u.bottom) {
|
|
65
|
+
n.clientY < u.top + u.height / 2 ? c.insertBefore(o, l) : c.insertBefore(o, l.nextSibling);
|
|
68
66
|
break;
|
|
69
67
|
}
|
|
70
68
|
}
|
|
71
|
-
},
|
|
72
|
-
document.removeEventListener("mousemove",
|
|
73
|
-
const
|
|
74
|
-
|
|
69
|
+
}, p = () => {
|
|
70
|
+
document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", p), t.classList.remove("dragging"), t.style.position = "", t.style.zIndex = "", t.style.left = "", t.style.top = "", t.style.width = "";
|
|
71
|
+
const n = o.parentElement;
|
|
72
|
+
n.insertBefore(t, o), n.removeChild(o), this.reIndexItems(n);
|
|
75
73
|
};
|
|
76
|
-
document.addEventListener("mousemove",
|
|
74
|
+
document.addEventListener("mousemove", m), document.addEventListener("mouseup", p), i.insertBefore(o, t);
|
|
77
75
|
}
|
|
78
76
|
getDropzone(e) {
|
|
79
77
|
const s = this.getAttribute("dropzone");
|
|
@@ -86,11 +84,19 @@ class b extends v {
|
|
|
86
84
|
}
|
|
87
85
|
getClosestDropzone(e, s) {
|
|
88
86
|
const t = document.elementsFromPoint(e, s);
|
|
89
|
-
for (const
|
|
90
|
-
if (
|
|
91
|
-
return
|
|
87
|
+
for (const i of t)
|
|
88
|
+
if (i.matches(this.getAttribute("dropzone")))
|
|
89
|
+
return i;
|
|
92
90
|
return null;
|
|
93
91
|
}
|
|
92
|
+
reIndexItems(e) {
|
|
93
|
+
const s = Array.from(e.children);
|
|
94
|
+
let t = 0;
|
|
95
|
+
s.forEach((i) => {
|
|
96
|
+
var a;
|
|
97
|
+
(a = i.children[0]) != null && a.hasAttribute("locked"), i.dataset.index = t, t++;
|
|
98
|
+
});
|
|
99
|
+
}
|
|
94
100
|
}
|
|
95
101
|
b.define("wje-reorder-handle", b);
|
|
96
102
|
export {
|
package/dist/wje-select.js
CHANGED
|
@@ -7,7 +7,7 @@ import "./wje-popup.js";
|
|
|
7
7
|
import y from "./wje-icon.js";
|
|
8
8
|
import C from "./wje-label.js";
|
|
9
9
|
import L from "./wje-chip.js";
|
|
10
|
-
import { P as O } from "./popup.element-
|
|
10
|
+
import { P as O } from "./popup.element-CWsSOxs2.js";
|
|
11
11
|
const k = ":host{--wje-select-border-width: 1px;--wje-select-border-style: solid;--wje-select-border-color: var(--wje-border-color);--wje-select-options-border-width: 1px;--wje-select-options-border-style: var(--wje-border-style);--wje-select-options-border-color: var(--wje-border-color);--wje-select-background: var(--wje-background);--wje-select-line-height: 20px;--wje-select-color: var(--wje-color);--wje-select-border-radius: var(--wje-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wje-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wje-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wje-select-line-height)}.native-select.default wje-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .wrapper{border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius)}.native-select.standard .input-wrapper{background:transparent;width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wje-select-background);min-height:28px;color:var(--wje-select-color);line-height:var(--wje-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .wrapper{border-radius:var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wje-select-options-border-width);border-style:var(--wje-select-options-border-style);border-color:var(--wje-select-options-border-color);border-radius:0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);margin-top:-1px;background:var(--wje-select-background);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wje-chip{--wje-chip-margin: 0 .25rem 0 0}wje-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}";
|
|
12
12
|
class v extends E {
|
|
13
13
|
/**
|