wj-elements 0.1.0 → 0.1.2
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 +1 -1
- package/dist/light.css +1 -1
- package/dist/{localize-7fxVJArK.js → localize-DVuO3S17.js} +1 -1
- package/dist/{popup.element-BXak-Fgc.js → popup.element-Dj9j__Dh.js} +329 -350
- package/dist/styles.css +1 -1
- package/dist/wje-accordion-item.js +88 -0
- package/dist/wje-accordion.js +79 -0
- package/dist/wje-animation.js +10 -11
- package/dist/wje-avatar.js +31 -29
- package/dist/wje-badge.js +7 -7
- package/dist/wje-breadcrumb.js +11 -11
- package/dist/wje-button.js +22 -29
- package/dist/wje-carousel.js +8 -9
- package/dist/wje-checkbox.js +81 -23
- package/dist/wje-dialog.js +53 -25
- package/dist/wje-dropdown.js +36 -23
- package/dist/wje-element.js +100 -89
- package/dist/wje-file-upload-item.js +3 -4
- package/dist/wje-file-upload.js +40 -43
- package/dist/wje-format-digital.js +1 -1
- package/dist/wje-icon-picker.js +1 -1
- package/dist/wje-icon.js +115 -3
- package/dist/wje-img-comparer.js +1 -2
- package/dist/wje-infinite-scroll.js +71 -41
- package/dist/wje-inline-edit.js +1 -2
- package/dist/wje-input-file.js +26 -18
- package/dist/wje-input.js +1 -1
- package/dist/wje-master.js +323 -168
- package/dist/wje-menu-item.js +33 -31
- package/dist/wje-menu.js +7 -7
- package/dist/wje-option.js +97 -3
- package/dist/wje-options.js +1 -1
- package/dist/wje-popup.js +1 -1
- package/dist/wje-progress-bar.js +5 -5
- package/dist/wje-radio-group.js +1 -1
- package/dist/wje-radio.js +1 -1
- package/dist/wje-relative-time.js +4 -13
- package/dist/wje-select.js +9 -10
- package/dist/wje-slider.js +40 -79
- package/dist/wje-tab.js +9 -9
- package/dist/wje-toast.js +16 -16
- package/dist/wje-toggle.js +39 -15
- package/dist/wje-tooltip.js +47 -23
- package/package.json +2 -1
- package/dist/custom-elements.json +0 -12216
- package/dist/icon.element-DOiXP3pi.js +0 -115
- package/dist/option.element-CpeafIM-.js +0 -98
- package/dist/styles-4vJ2wdTZ.js +0 -4
- package/dist/web-types.json +0 -2756
package/dist/wje-element.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var a = (
|
|
4
|
-
if (!e.has(
|
|
1
|
+
var v = Object.defineProperty;
|
|
2
|
+
var A = (h, e, t) => e in h ? v(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
|
|
3
|
+
var a = (h, e, t) => (A(h, typeof e != "symbol" ? e + "" : e, t), t), P = (h, e, t) => {
|
|
4
|
+
if (!e.has(h))
|
|
5
5
|
throw TypeError("Cannot " + t);
|
|
6
6
|
};
|
|
7
|
-
var
|
|
8
|
-
if (e.has(
|
|
7
|
+
var w = (h, e, t) => {
|
|
8
|
+
if (e.has(h))
|
|
9
9
|
throw TypeError("Cannot add the same private member more than once");
|
|
10
|
-
e instanceof WeakSet ? e.add(
|
|
10
|
+
e instanceof WeakSet ? e.add(h) : e.set(h, t);
|
|
11
11
|
};
|
|
12
|
-
var
|
|
13
|
-
import { store as
|
|
12
|
+
var p = (h, e, t) => (P(h, e, "access private method"), t);
|
|
13
|
+
import { store as b, defaultStoreActions as C } from "./wje-store.js";
|
|
14
14
|
class j {
|
|
15
15
|
constructor(e = {}) {
|
|
16
16
|
a(this, "findByKey", (e, t, s) => {
|
|
@@ -40,10 +40,10 @@ class j {
|
|
|
40
40
|
},
|
|
41
41
|
async: !0,
|
|
42
42
|
referrerPolicy: "same-origin"
|
|
43
|
-
}).then((r,
|
|
44
|
-
var
|
|
45
|
-
let
|
|
46
|
-
if (n(
|
|
43
|
+
}).then((r, o) => {
|
|
44
|
+
var y;
|
|
45
|
+
let m = (y = r.headers.get("permissions")) == null ? void 0 : y.split(",");
|
|
46
|
+
if (n(m), r.ok)
|
|
47
47
|
return r.json();
|
|
48
48
|
throw r.json();
|
|
49
49
|
}).then((r) => (this._store.dispatch(t(r)), r)));
|
|
@@ -71,7 +71,7 @@ class j {
|
|
|
71
71
|
"Content-Type": "application/json"
|
|
72
72
|
},
|
|
73
73
|
referrerPolicy: "same-origin"
|
|
74
|
-
}).then((
|
|
74
|
+
}).then((o) => (o.ok, o.json()));
|
|
75
75
|
return this.dispatch(r, i, s);
|
|
76
76
|
}
|
|
77
77
|
_get(e, t, s) {
|
|
@@ -85,8 +85,8 @@ class j {
|
|
|
85
85
|
}).then(async (n) => {
|
|
86
86
|
let r;
|
|
87
87
|
try {
|
|
88
|
-
let
|
|
89
|
-
return JSON.parse(
|
|
88
|
+
let o = await n.text();
|
|
89
|
+
return JSON.parse(o);
|
|
90
90
|
} catch {
|
|
91
91
|
return r;
|
|
92
92
|
}
|
|
@@ -111,7 +111,7 @@ class j {
|
|
|
111
111
|
}) : e;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
class
|
|
114
|
+
class c {
|
|
115
115
|
constructor() {
|
|
116
116
|
}
|
|
117
117
|
static get permissions() {
|
|
@@ -121,7 +121,7 @@ class T {
|
|
|
121
121
|
];
|
|
122
122
|
}
|
|
123
123
|
static includesKey(e) {
|
|
124
|
-
return
|
|
124
|
+
return c.permissions.includes(e);
|
|
125
125
|
}
|
|
126
126
|
static getKeys() {
|
|
127
127
|
let e = [];
|
|
@@ -131,10 +131,10 @@ class T {
|
|
|
131
131
|
return this.hasAttribute("show") && JSON.parse(this.getAttribute("show"));
|
|
132
132
|
}
|
|
133
133
|
static isPermissionFulfilled() {
|
|
134
|
-
return
|
|
134
|
+
return c.getKeys.bind(this)().some((e) => c.permissions.includes(e)) || c.shouldShow.bind(this)();
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
-
class
|
|
137
|
+
class u {
|
|
138
138
|
constructor() {
|
|
139
139
|
}
|
|
140
140
|
/**
|
|
@@ -168,16 +168,19 @@ class c {
|
|
|
168
168
|
return !["false", "0", 0].includes(e);
|
|
169
169
|
}
|
|
170
170
|
}
|
|
171
|
-
var l,
|
|
172
|
-
class
|
|
171
|
+
var l, d, g;
|
|
172
|
+
class T {
|
|
173
173
|
constructor() {
|
|
174
|
-
|
|
174
|
+
w(this, d);
|
|
175
175
|
this.customEventStorage = [], l = this;
|
|
176
176
|
}
|
|
177
177
|
dispatchCustomEvent(e, t, s) {
|
|
178
178
|
e.dispatchEvent(
|
|
179
179
|
new CustomEvent(t, {
|
|
180
|
-
detail: s
|
|
180
|
+
detail: s || {
|
|
181
|
+
context: e,
|
|
182
|
+
event: l
|
|
183
|
+
},
|
|
181
184
|
bubbles: !0,
|
|
182
185
|
composed: !0
|
|
183
186
|
})
|
|
@@ -192,19 +195,22 @@ class C {
|
|
|
192
195
|
return !1;
|
|
193
196
|
}
|
|
194
197
|
addListener(e, t, s, i, n) {
|
|
195
|
-
|
|
196
|
-
|
|
198
|
+
e && (Array.isArray(e) || (e = [e]), e.forEach((r) => {
|
|
199
|
+
this.writeRecord(r, t, s, i, n);
|
|
200
|
+
}));
|
|
201
|
+
}
|
|
202
|
+
writeRecord(e, t, s, i, n) {
|
|
197
203
|
let r = this.findRecordByElement(e);
|
|
198
204
|
r ? r.listeners[t] = r.listeners[t] || [] : (r = {
|
|
199
205
|
element: e,
|
|
200
206
|
listeners: {}
|
|
201
|
-
}, r.listeners[t] = [], this.customEventStorage.push(r)), i = i ||
|
|
202
|
-
let
|
|
207
|
+
}, r.listeners[t] = [], this.customEventStorage.push(r)), i = i || p(this, d, g);
|
|
208
|
+
let o = {
|
|
203
209
|
listener: i,
|
|
204
210
|
options: n,
|
|
205
211
|
event: s
|
|
206
212
|
};
|
|
207
|
-
this.listenerExists(e, t,
|
|
213
|
+
this.listenerExists(e, t, o) || (r.listeners[t].push(o), e.addEventListener(t, i));
|
|
208
214
|
}
|
|
209
215
|
listenerExists(e, t, s) {
|
|
210
216
|
return this.findRecordByElement(e).listeners[t].some((n) => JSON.stringify(n) === JSON.stringify(s));
|
|
@@ -212,10 +218,10 @@ class C {
|
|
|
212
218
|
removeListener(e, t, s, i, n) {
|
|
213
219
|
let r = this.findRecordByElement(e);
|
|
214
220
|
if (r && t in r.listeners) {
|
|
215
|
-
var
|
|
216
|
-
~
|
|
221
|
+
var o = r.listeners[t].indexOf(i);
|
|
222
|
+
~o && r.listeners[t].splice(o, 1), r.listeners[t].length || delete r.listeners[t];
|
|
217
223
|
}
|
|
218
|
-
i = i ||
|
|
224
|
+
i = i || p(this, d, g), e.removeEventListener(t, i, n);
|
|
219
225
|
}
|
|
220
226
|
removeElement(e) {
|
|
221
227
|
this.customEventStorage = this.customEventStorage.filter((t) => {
|
|
@@ -223,8 +229,17 @@ class C {
|
|
|
223
229
|
return t;
|
|
224
230
|
});
|
|
225
231
|
}
|
|
232
|
+
// TODO
|
|
233
|
+
createPromiseFromEvent(e, t) {
|
|
234
|
+
return new Promise((s) => {
|
|
235
|
+
let i = () => {
|
|
236
|
+
e.removeEventListener(t, i), s();
|
|
237
|
+
};
|
|
238
|
+
e.addEventListener(t, i);
|
|
239
|
+
});
|
|
240
|
+
}
|
|
226
241
|
}
|
|
227
|
-
|
|
242
|
+
d = new WeakSet(), g = function(e) {
|
|
228
243
|
let t = this;
|
|
229
244
|
l.findRecordByElement(t).listeners[e.type].forEach((n, r) => {
|
|
230
245
|
l.dispatchCustomEvent(t, n.event, {
|
|
@@ -234,10 +249,10 @@ u = new WeakSet(), m = function(e) {
|
|
|
234
249
|
}), n.options && n.options.stopPropagation === !0 && e.stopPropagation();
|
|
235
250
|
});
|
|
236
251
|
};
|
|
237
|
-
let
|
|
238
|
-
const
|
|
239
|
-
|
|
240
|
-
const
|
|
252
|
+
let _ = new T();
|
|
253
|
+
const E = document.createElement("template");
|
|
254
|
+
E.innerHTML = "";
|
|
255
|
+
const f = class f extends HTMLElement {
|
|
241
256
|
constructor(t) {
|
|
242
257
|
super();
|
|
243
258
|
a(this, "initWjElement", async (t = !1) => {
|
|
@@ -248,8 +263,8 @@ const d = class d extends HTMLElement {
|
|
|
248
263
|
const i = new CSSStyleSheet();
|
|
249
264
|
i.replaceSync(this.constructor.cssStyleSheet), this.context.adoptedStyleSheets = [i];
|
|
250
265
|
});
|
|
251
|
-
this.template = t ||
|
|
252
|
-
store:
|
|
266
|
+
this.template = t || E, this.isAttached = !1, this.service = new j({
|
|
267
|
+
store: b
|
|
253
268
|
}), this.defineDepandencies(), this.rendering = !1, this.runtimeTimeout = null, this.count = 0, this.functionStack = [], this.scheludedRefresh = !1, this._depandencies = {};
|
|
254
269
|
}
|
|
255
270
|
get permission() {
|
|
@@ -277,7 +292,7 @@ const d = class d extends HTMLElement {
|
|
|
277
292
|
return this.isShadowRoot ? this.shadowRoot : this;
|
|
278
293
|
}
|
|
279
294
|
get store() {
|
|
280
|
-
return
|
|
295
|
+
return b;
|
|
281
296
|
}
|
|
282
297
|
// addAction,
|
|
283
298
|
// deleteAction,
|
|
@@ -301,7 +316,7 @@ const d = class d extends HTMLElement {
|
|
|
301
316
|
* @return {ArrayActions, ObjectActions}
|
|
302
317
|
*/
|
|
303
318
|
get defaultStoreActions() {
|
|
304
|
-
return
|
|
319
|
+
return C;
|
|
305
320
|
}
|
|
306
321
|
get removeClassAfterConnect() {
|
|
307
322
|
var t;
|
|
@@ -320,18 +335,12 @@ const d = class d extends HTMLElement {
|
|
|
320
335
|
}
|
|
321
336
|
}
|
|
322
337
|
defineDepandencies() {
|
|
323
|
-
this.depandencies && Object.entries(depandencies).forEach((t, s) =>
|
|
338
|
+
this.depandencies && Object.entries(depandencies).forEach((t, s) => f.define(t, s));
|
|
324
339
|
}
|
|
325
340
|
beforeDraw() {
|
|
326
341
|
}
|
|
327
342
|
afterDraw() {
|
|
328
343
|
}
|
|
329
|
-
makeRuntimeTimeout(t = () => {
|
|
330
|
-
}) {
|
|
331
|
-
return setTimeout(() => {
|
|
332
|
-
t();
|
|
333
|
-
}, 0);
|
|
334
|
-
}
|
|
335
344
|
refreshUpdatePromise() {
|
|
336
345
|
this.updateComplete = new Promise((t, s) => {
|
|
337
346
|
this.finisPromise = t, this.rejectPromise = s;
|
|
@@ -345,10 +354,10 @@ const d = class d extends HTMLElement {
|
|
|
345
354
|
}, this.refreshUpdatePromise(), await this.initWjElement(!0);
|
|
346
355
|
}
|
|
347
356
|
setupAttributes() {
|
|
348
|
-
|
|
357
|
+
u.getEvents(this).forEach((s, i) => {
|
|
349
358
|
this.addEventListener(i, (n) => {
|
|
350
|
-
var r,
|
|
351
|
-
(
|
|
359
|
+
var r, o;
|
|
360
|
+
(o = (r = this.getRootNode().host)[s]) == null || o.call(r);
|
|
352
361
|
});
|
|
353
362
|
});
|
|
354
363
|
}
|
|
@@ -356,11 +365,11 @@ const d = class d extends HTMLElement {
|
|
|
356
365
|
}
|
|
357
366
|
disconnectedCallback() {
|
|
358
367
|
var t, s;
|
|
359
|
-
(t = this.beforeDisconnect) == null || t.call(this), this.isAttached && (this.context.innerHTML = ""), this.isAttached = !1, (s = this.afterDisconnect) == null || s.call(this);
|
|
368
|
+
(t = this.beforeDisconnect) == null || t.call(this), this.isAttached && (this.context.innerHTML = ""), this.drawingStatus = "DISCONNECTED", this.isAttached = !1, (s = this.afterDisconnect) == null || s.call(this);
|
|
360
369
|
}
|
|
361
370
|
/**
|
|
362
|
-
|
|
363
|
-
|
|
371
|
+
* Lifecycle method, called whenever an observed property changes
|
|
372
|
+
*/
|
|
364
373
|
attributeChangedCallback(t, s, i) {
|
|
365
374
|
if (!this.isAttached && s !== i) {
|
|
366
375
|
this.scheludedRefresh = !0;
|
|
@@ -373,38 +382,38 @@ const d = class d extends HTMLElement {
|
|
|
373
382
|
this.refreshUpdatePromise(), this.drawingStatus != "AFTER" ? ((t = this.afterDisconnect) == null || t.call(this), await this.initWjElement(!0)) : ((s = this.unregister) == null || s.call(this), await this.initWjElement(!0));
|
|
374
383
|
}
|
|
375
384
|
/**
|
|
376
|
-
|
|
377
|
-
|
|
385
|
+
* To be implemented by the child class
|
|
386
|
+
*/
|
|
378
387
|
draw(t, s, i) {
|
|
379
388
|
return null;
|
|
380
389
|
}
|
|
381
390
|
display(t = !1, s) {
|
|
382
|
-
this.isProcessingFlow(s) || (t &&
|
|
383
|
-
}
|
|
384
|
-
render(t) {
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
391
|
+
this.isProcessingFlow(s) || (t && ([...this.context.childNodes].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.context.append(this.template.content.cloneNode(!0)), this.isPermissionCheck || this.isShow ? c.isPermissionFulfilled.bind(this)(this.permission) ? this._resolveRender(s) : this.remove() : this._resolveRender(s));
|
|
392
|
+
}
|
|
393
|
+
async render(t) {
|
|
394
|
+
this.drawingStatus = "DRAWING", !this.isProcessingFlow(t) && await Promise.resolve(this.draw(this.context, this.store, u.getAttributes(this))).then((s) => {
|
|
395
|
+
let i = s || "", n;
|
|
396
|
+
if (i instanceof HTMLElement || i instanceof DocumentFragment)
|
|
397
|
+
n = i;
|
|
398
|
+
else {
|
|
399
|
+
let o = document.createElement("template");
|
|
400
|
+
o.innerHTML = i, n = o.content.cloneNode(!0);
|
|
401
|
+
}
|
|
402
|
+
let r = n;
|
|
403
|
+
this.isProcessingFlow(t) || this.context.appendChild(r);
|
|
404
|
+
});
|
|
396
405
|
}
|
|
397
406
|
/**
|
|
398
|
-
|
|
399
|
-
|
|
407
|
+
* Turns a string split with "-" into camel case notation
|
|
408
|
+
*/
|
|
400
409
|
sanitizeName(t) {
|
|
401
410
|
let s = t.split("-");
|
|
402
411
|
return [s.shift(), ...s.map((i) => i[0].toUpperCase() + i.slice(1))].join("");
|
|
403
412
|
}
|
|
404
413
|
/**
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
414
|
+
* Creates one property on this class for every
|
|
415
|
+
* HTML property defined on the element
|
|
416
|
+
*/
|
|
408
417
|
setUpAccessors() {
|
|
409
418
|
this.getAttributeNames().forEach((s) => {
|
|
410
419
|
const i = this.sanitizeName(s);
|
|
@@ -418,25 +427,27 @@ const d = class d extends HTMLElement {
|
|
|
418
427
|
return !this.functionStack.find((s) => s == t);
|
|
419
428
|
}
|
|
420
429
|
_resolveRender(t) {
|
|
421
|
-
this.isProcessingFlow(t) || (this.params =
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
(n,
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
430
|
+
this.isProcessingFlow(t) || (this.params = u.getAttributes(this), Promise.resolve(this.beforeDraw(this.context, this.store, u.getAttributes(this))).then((s) => {
|
|
431
|
+
this.drawingStatus = "BEFORE", Promise.resolve(this.render(t)).then((i) => {
|
|
432
|
+
var n;
|
|
433
|
+
this.isProcessingFlow(t) || Promise.resolve((n = this.afterDraw) == null ? void 0 : n.call(this, this.context, this.store, u.getAttributes(this))).then(
|
|
434
|
+
(r, o, m) => {
|
|
435
|
+
this.drawingStatus = "AFTER", this.finisPromise(), this.rendering = !1, this.isAttached = !0, this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect), this.scheludedRefresh && (this.refresh(), this.scheludedRefresh = !1);
|
|
436
|
+
}
|
|
437
|
+
);
|
|
438
|
+
});
|
|
428
439
|
}));
|
|
429
440
|
}
|
|
430
441
|
};
|
|
431
|
-
a(
|
|
442
|
+
a(f, "processTemplates", (t, s) => {
|
|
432
443
|
const i = document.createElement("template");
|
|
433
444
|
return i.innerHTML = [s.innerHTML, (t == null ? void 0 : t.innerHTML) || ""].join(""), i;
|
|
434
445
|
});
|
|
435
|
-
let
|
|
446
|
+
let S = f, k = "true";
|
|
436
447
|
export {
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
448
|
+
u as WjElementUtils,
|
|
449
|
+
c as WjePermissionsApi,
|
|
450
|
+
k as __esModule,
|
|
451
|
+
S as default,
|
|
452
|
+
_ as event
|
|
442
453
|
};
|
|
@@ -2,12 +2,11 @@ var f = Object.defineProperty;
|
|
|
2
2
|
var j = (a, e, t) => e in a ? f(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
|
|
3
3
|
var m = (a, e, t) => (j(a, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
4
|
import v from "./wje-element.js";
|
|
5
|
-
import { L as x } from "./localize-
|
|
5
|
+
import { L as x } from "./localize-DVuO3S17.js";
|
|
6
6
|
import E from "./wje-format-digital.js";
|
|
7
7
|
import z from "./wje-button.js";
|
|
8
8
|
import A from "./wje-slider.js";
|
|
9
|
-
import "./wje-icon.js";
|
|
10
|
-
import { I as C } from "./icon.element-DOiXP3pi.js";
|
|
9
|
+
import C from "./wje-icon.js";
|
|
11
10
|
const L = ':host{width:100%}.native-file-upload-item{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 .5rem;grid-template-areas:"image name actions" "image size actions" "progress progress progress";padding:.5rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}.image{grid-area:image;align-items:center;display:flex}::slotted([slot="img"]){--wje-img-border-radius: var(--wje-border-radius-medium) !important}.name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.size{grid-area:size;display:flex}.actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}:is()::-webkit-slider-thumb{visibility:hidden}:is()::-moz-range-thumb{visibility:hidden}:is()::-ms-thumb{visibility:hidden}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
|
|
12
11
|
class g extends v {
|
|
13
12
|
/**
|
|
@@ -107,7 +106,7 @@ class g extends v {
|
|
|
107
106
|
* Called after the component has been drawn.
|
|
108
107
|
*/
|
|
109
108
|
afterDraw() {
|
|
110
|
-
this.button.addEventListener("wje:
|
|
109
|
+
this.button.addEventListener("wje-button:click", this.onDelete);
|
|
111
110
|
}
|
|
112
111
|
}
|
|
113
112
|
g.define("wje-file-upload-item", g);
|
package/dist/wje-file-upload.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var v = Object.defineProperty;
|
|
2
|
-
var w = (
|
|
3
|
-
var h = (
|
|
2
|
+
var w = (s, r, e) => r in s ? v(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
|
|
3
|
+
var h = (s, r, e) => (w(s, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
4
|
import x from "./wje-element.js";
|
|
5
|
-
import { L as
|
|
6
|
-
import
|
|
7
|
-
function
|
|
5
|
+
import { L as z } from "./localize-DVuO3S17.js";
|
|
6
|
+
import A from "./wje-button.js";
|
|
7
|
+
function L() {
|
|
8
8
|
return [
|
|
9
9
|
{
|
|
10
10
|
type: ["jpg", "jpeg", "png", "gif", "bpm", "tiff", "svg"],
|
|
@@ -52,42 +52,39 @@ function z() {
|
|
|
52
52
|
}
|
|
53
53
|
];
|
|
54
54
|
}
|
|
55
|
-
function
|
|
56
|
-
let
|
|
57
|
-
return
|
|
58
|
-
e.type.includes(
|
|
59
|
-
}) :
|
|
55
|
+
function E(s) {
|
|
56
|
+
let r;
|
|
57
|
+
return s.toLowerCase() !== "folder" ? L().forEach((e) => {
|
|
58
|
+
e.type.includes(s.toLowerCase()) && (r = e.name);
|
|
59
|
+
}) : r = "folder", r;
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
let t = Array.isArray(s) ? s : s.split(",");
|
|
66
|
-
if (console.log("ACCEPTED TYPES", t), t.length === 0)
|
|
61
|
+
function j(s, r) {
|
|
62
|
+
const e = s.type.split("/")[0];
|
|
63
|
+
let t = Array.isArray(r) ? r : r.split(",");
|
|
64
|
+
if (t.length === 0)
|
|
67
65
|
throw new Error("acceptedFileTypes is empty");
|
|
68
66
|
for (let i of t)
|
|
69
|
-
if (i.includes(e + "/*") || i.includes(
|
|
67
|
+
if (i.includes(e + "/*") || i.includes(s.type) || i.includes(s.type.split("/")[1]))
|
|
70
68
|
return !0;
|
|
71
69
|
return !1;
|
|
72
70
|
}
|
|
73
|
-
function
|
|
74
|
-
console.log("UPLOAD FILE:", r, s, e);
|
|
71
|
+
function F(s, r, e) {
|
|
75
72
|
let t = 0;
|
|
76
|
-
const i = new Array(Math.ceil(
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
const
|
|
80
|
-
|
|
73
|
+
const i = new Array(Math.ceil(s.size / r)).fill(0), n = (a, p) => {
|
|
74
|
+
const l = new FileReader(), u = a / r, d = s.slice(a, p);
|
|
75
|
+
l.onload = (c) => {
|
|
76
|
+
const o = new XMLHttpRequest();
|
|
77
|
+
o.open("POST", "/upload", !0), o.setRequestHeader("Content-Range", `${a}-${p}/${s.size}`), o.upload.onprogress = (m) => {
|
|
81
78
|
if (m.lengthComputable) {
|
|
82
79
|
const g = m.loaded / m.total * 100;
|
|
83
80
|
i[u] = g, i.reduce((b, y) => b + y, 0) / i.length;
|
|
84
81
|
}
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
},
|
|
88
|
-
},
|
|
82
|
+
}, o.onload = () => {
|
|
83
|
+
o.status == 200 || o.status == 201 ? (i[u] = 100, a += r, a < s.size ? (e.setAttribute("uploaded", a), n(a, Math.min(a + r, s.size))) : e.setAttribute("uploaded", a)) : console.error("Error during upload: ", o.statusText);
|
|
84
|
+
}, o.send(c.target.result);
|
|
85
|
+
}, l.readAsArrayBuffer(d);
|
|
89
86
|
};
|
|
90
|
-
|
|
87
|
+
n(t, Math.min(t + r, s.size));
|
|
91
88
|
}
|
|
92
89
|
const C = ':host{width:100%}.native-file-upload{width:100%}.file-label{background:var(--wje-color-contrast-0);border:1px dashed var(--wje-border-color);border-radius:var(--wje-border-radius-medium);align-items:center;justify-content:center;display:flex;padding:1rem;margin-bottom:.5rem;flex-direction:column}.file-preview{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 0;grid-template-areas:"image name name" "image size size" "progress progress progress"}.file-image{grid-area:image;align-items:center;display:flex}.file-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{grid-area:size;display:flex}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}:is()::-webkit-slider-thumb{visibility:hidden}:is()::-moz-range-thumb{visibility:hidden}:is()::-ms-thumb{visibility:hidden}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
|
|
93
90
|
class f extends x {
|
|
@@ -102,7 +99,7 @@ class f extends x {
|
|
|
102
99
|
* @type {Object}
|
|
103
100
|
*/
|
|
104
101
|
h(this, "depandencies", {
|
|
105
|
-
"wje-button":
|
|
102
|
+
"wje-button": A
|
|
106
103
|
});
|
|
107
104
|
h(this, "className", "FileUpload");
|
|
108
105
|
/**
|
|
@@ -125,7 +122,7 @@ class f extends x {
|
|
|
125
122
|
return;
|
|
126
123
|
}
|
|
127
124
|
});
|
|
128
|
-
this.localizer = new
|
|
125
|
+
this.localizer = new z(this);
|
|
129
126
|
}
|
|
130
127
|
/**
|
|
131
128
|
* Setter for acceptedTypes attribute.
|
|
@@ -200,16 +197,16 @@ class f extends x {
|
|
|
200
197
|
* @returns {DocumentFragment} The fragment containing the component.
|
|
201
198
|
*/
|
|
202
199
|
draw(e, t, i) {
|
|
203
|
-
let
|
|
200
|
+
let n = document.createDocumentFragment(), a = document.createElement("div");
|
|
204
201
|
a.classList.add("native-file-upload"), a.setAttribute("part", "native");
|
|
205
202
|
let p = document.createElement("div");
|
|
206
203
|
p.classList.add("file-label");
|
|
207
|
-
let
|
|
208
|
-
|
|
209
|
-
let u = document.createElement("slot"),
|
|
210
|
-
|
|
204
|
+
let l = document.createElement("wje-button");
|
|
205
|
+
l.innerText = this.label || this.localizer.translate("wj.file.upload.button");
|
|
206
|
+
let u = document.createElement("slot"), d = document.createElement("input");
|
|
207
|
+
d.setAttribute("type", "file"), d.setAttribute("multiple", ""), d.setAttribute("style", "display:none;"), l.appendChild(u), l.appendChild(d), this.fileInput = d;
|
|
211
208
|
let c = document.createElement("div");
|
|
212
|
-
return c.classList.add("file-list"), p.appendChild(u), p.appendChild(
|
|
209
|
+
return c.classList.add("file-list"), p.appendChild(u), p.appendChild(l), a.appendChild(d), a.appendChild(p), a.appendChild(c), n.appendChild(a), this.native = a, this.fileList = c, this.button = l, n;
|
|
213
210
|
}
|
|
214
211
|
/**
|
|
215
212
|
* Method to perform actions after the component is drawn.
|
|
@@ -243,10 +240,10 @@ class f extends x {
|
|
|
243
240
|
uploadFiles(e) {
|
|
244
241
|
e.length !== 0 && Array.from(e).forEach((t) => {
|
|
245
242
|
this.assertFilesValid(t);
|
|
246
|
-
let i,
|
|
247
|
-
|
|
248
|
-
i = this.createPreview(t,
|
|
249
|
-
},
|
|
243
|
+
let i, n = new FileReader();
|
|
244
|
+
n.onload = (a) => {
|
|
245
|
+
i = this.createPreview(t, n), this.fileList.appendChild(i), F(t, this.chunkSize, i);
|
|
246
|
+
}, n.readAsDataURL(t);
|
|
250
247
|
});
|
|
251
248
|
}
|
|
252
249
|
/**
|
|
@@ -257,7 +254,7 @@ class f extends x {
|
|
|
257
254
|
*/
|
|
258
255
|
createPreview(e, t) {
|
|
259
256
|
let i = document.createElement("wje-file-upload-item");
|
|
260
|
-
return i.setAttribute("name", e.name), i.setAttribute("size", e.size), i.setAttribute("uploaded", "0"), i.setAttribute("progress", "0"), i.innerHTML = `<wje-icon slot="img" name="${
|
|
257
|
+
return i.setAttribute("name", e.name), i.setAttribute("size", e.size), i.setAttribute("uploaded", "0"), i.setAttribute("progress", "0"), i.innerHTML = `<wje-icon slot="img" name="${E(e.type.split("/")[1])}" size="large"></wje-icon>`, i;
|
|
261
258
|
}
|
|
262
259
|
/**
|
|
263
260
|
* Method to create a thumbnail for the file.
|
|
@@ -276,7 +273,7 @@ class f extends x {
|
|
|
276
273
|
*/
|
|
277
274
|
assertFilesValid(e) {
|
|
278
275
|
const { name: t, size: i } = e;
|
|
279
|
-
if (!
|
|
276
|
+
if (!j(e, this.acceptedTypes))
|
|
280
277
|
throw new Error(`❌ FILE: "${t}" Valid file types are: "${this.acceptedTypes}"`);
|
|
281
278
|
if (i > this.maxFileSize)
|
|
282
279
|
throw new Error(`❌ File "${t}" could not be uploaded. Only images up to ${this.maxFileSize} MB are allowed. Nie je to ${i}`);
|
|
@@ -2,7 +2,7 @@ var d = Object.defineProperty;
|
|
|
2
2
|
var h = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
|
|
3
3
|
var m = (i, t, e) => (h(i, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import p from "./wje-element.js";
|
|
5
|
-
import { L as f } from "./localize-
|
|
5
|
+
import { L as f } from "./localize-DVuO3S17.js";
|
|
6
6
|
const g = ".native-format-digital{white-space:nowrap}";
|
|
7
7
|
class c extends p {
|
|
8
8
|
/**
|
package/dist/wje-icon-picker.js
CHANGED
|
@@ -6,7 +6,7 @@ import u from "./wje-infinite-scroll.js";
|
|
|
6
6
|
import v from "./wje-input.js";
|
|
7
7
|
import f from "./wje-tooltip.js";
|
|
8
8
|
import "./wje-popup.js";
|
|
9
|
-
import { P as k } from "./popup.element-
|
|
9
|
+
import { P as k } from "./popup.element-Dj9j__Dh.js";
|
|
10
10
|
const x = ":host{--wje-icon-picker-radius: var(--wje-border-radius-small);--wje-icon-picker-icon-size: 1.5rem;--wje-icon-picker-border-width: 1px;--wje-icon-picker-border-style: solid;--wje-icon-picker-border-color: var(--wje-border-color);--wje-icon-picker-padding: .25rem;padding:0 1rem}.anchor{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size);padding:var(--wje-icon-picker-padding);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);box-sizing:border-box;border-radius:var(--wje-icon-picker-radius)}.picker{width:320px;height:271px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wje-icon-picker-radius);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);overflow:auto;padding:1rem;background:var(--wje-background)}.icon-items{--icon-min-width: 2rem;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(var(--icon-min-width),1fr))}.icon-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;color:inherit;padding:.25rem;min-height:var(--wje-icon-picker-icon-size);min-width:var(--wje-icon-picker-icon-size);text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wje-border-color)}.wje-size{--wje-icon-size: 24px !important}icon-item svg{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size)}wje-input{--wje-input-border-radius: 4px;--wje-input-margin-bottom: 0}wje-infinite-scroll{margin-top:1rem}wje-select{--wje-select-border-width: 0 0 1px 0 !important;--wje-select-border-radius: 0 !important;margin-bottom:1rem}.anchor wje-icon{--wje-icon-size: 100% !important}";
|
|
11
11
|
class m extends b {
|
|
12
12
|
/**
|