wj-elements 0.1.47 → 0.1.48

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.
Files changed (96) hide show
  1. package/package.json +1 -1
  2. package/dist/dark.css +0 -1
  3. package/dist/light.css +0 -1
  4. package/dist/localize.js +0 -45
  5. package/dist/popup.element-CWsSOxs2.js +0 -1072
  6. package/dist/router-links-FtZbFUto.js +0 -146
  7. package/dist/styles.css +0 -1
  8. package/dist/wje-accordion-item.js +0 -88
  9. package/dist/wje-accordion.js +0 -79
  10. package/dist/wje-animation.js +0 -121
  11. package/dist/wje-aside.js +0 -55
  12. package/dist/wje-avatar.js +0 -77
  13. package/dist/wje-badge.js +0 -50
  14. package/dist/wje-breadcrumb.js +0 -148
  15. package/dist/wje-breadcrumbs.js +0 -67
  16. package/dist/wje-button-group.js +0 -78
  17. package/dist/wje-button.js +0 -207
  18. package/dist/wje-card-content.js +0 -48
  19. package/dist/wje-card-controls.js +0 -48
  20. package/dist/wje-card-header.js +0 -47
  21. package/dist/wje-card-subtitle.js +0 -55
  22. package/dist/wje-card-title.js +0 -55
  23. package/dist/wje-card.js +0 -50
  24. package/dist/wje-carousel-item.js +0 -33
  25. package/dist/wje-carousel.js +0 -177
  26. package/dist/wje-checkbox.js +0 -96
  27. package/dist/wje-chip.js +0 -32
  28. package/dist/wje-col.js +0 -27
  29. package/dist/wje-color-picker.js +0 -953
  30. package/dist/wje-container.js +0 -57
  31. package/dist/wje-copy-button.js +0 -170
  32. package/dist/wje-dialog.js +0 -86
  33. package/dist/wje-divider.js +0 -53
  34. package/dist/wje-dropdown.js +0 -114
  35. package/dist/wje-element.js +0 -453
  36. package/dist/wje-fetchAndParseCSS.js +0 -40
  37. package/dist/wje-file-upload-item.js +0 -115
  38. package/dist/wje-file-upload.js +0 -297
  39. package/dist/wje-footer.js +0 -56
  40. package/dist/wje-form.js +0 -28
  41. package/dist/wje-format-digital.js +0 -85
  42. package/dist/wje-grid.js +0 -28
  43. package/dist/wje-header.js +0 -58
  44. package/dist/wje-icon-picker.js +0 -221
  45. package/dist/wje-icon.js +0 -119
  46. package/dist/wje-img-comparer.js +0 -111
  47. package/dist/wje-img.js +0 -58
  48. package/dist/wje-infinite-scroll.js +0 -201
  49. package/dist/wje-inline-edit.js +0 -145
  50. package/dist/wje-input-file.js +0 -85
  51. package/dist/wje-input.js +0 -334
  52. package/dist/wje-item.js +0 -45
  53. package/dist/wje-label.js +0 -67
  54. package/dist/wje-list.js +0 -53
  55. package/dist/wje-main.js +0 -56
  56. package/dist/wje-masonry.js +0 -218
  57. package/dist/wje-master.js +0 -423
  58. package/dist/wje-menu-button.js +0 -65
  59. package/dist/wje-menu-item.js +0 -230
  60. package/dist/wje-menu-label.js +0 -57
  61. package/dist/wje-menu.js +0 -74
  62. package/dist/wje-option.js +0 -99
  63. package/dist/wje-options.js +0 -63
  64. package/dist/wje-popup.js +0 -5
  65. package/dist/wje-progress-bar.js +0 -161
  66. package/dist/wje-qr-code.js +0 -2332
  67. package/dist/wje-radio-group.js +0 -101
  68. package/dist/wje-radio.js +0 -46
  69. package/dist/wje-rate.js +0 -260
  70. package/dist/wje-relative-time.js +0 -85
  71. package/dist/wje-reorder-dropzone.js +0 -27
  72. package/dist/wje-reorder-handle.js +0 -115
  73. package/dist/wje-reorder-item.js +0 -32
  74. package/dist/wje-reorder.js +0 -138
  75. package/dist/wje-route.js +0 -46
  76. package/dist/wje-router-link.js +0 -64
  77. package/dist/wje-router-outlet.js +0 -127
  78. package/dist/wje-routerx.js +0 -1088
  79. package/dist/wje-row.js +0 -58
  80. package/dist/wje-select.js +0 -242
  81. package/dist/wje-slider.js +0 -177
  82. package/dist/wje-sliding-container.js +0 -274
  83. package/dist/wje-split-view.js +0 -112
  84. package/dist/wje-status.js +0 -54
  85. package/dist/wje-store.js +0 -192
  86. package/dist/wje-tab-group.js +0 -107
  87. package/dist/wje-tab-panel.js +0 -52
  88. package/dist/wje-tab.js +0 -59
  89. package/dist/wje-textarea.js +0 -116
  90. package/dist/wje-thumbnail.js +0 -64
  91. package/dist/wje-toast.js +0 -76
  92. package/dist/wje-toggle.js +0 -94
  93. package/dist/wje-toolbar-action.js +0 -63
  94. package/dist/wje-toolbar.js +0 -61
  95. package/dist/wje-tooltip.js +0 -116
  96. package/dist/wje-visually-hidden.js +0 -56
@@ -1,453 +0,0 @@
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
- throw TypeError("Cannot " + t);
6
- };
7
- var w = (h, e, t) => {
8
- if (e.has(h))
9
- throw TypeError("Cannot add the same private member more than once");
10
- e instanceof WeakSet ? e.add(h) : e.set(h, t);
11
- };
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
- class j {
15
- constructor(e = {}) {
16
- a(this, "findByKey", (e, t, s) => {
17
- if (this._store.getState()[e] instanceof Array)
18
- return this._store.getState()[e].find((r) => r[t] == s);
19
- console.warn(` Attribute ${e} is not array`);
20
- });
21
- a(this, "findById", (e, t) => {
22
- if (this._store.getState()[e] instanceof Array)
23
- return this._store.getState()[e].find((i) => i.id == t);
24
- console.warn(` Attribute ${e} is not array`);
25
- });
26
- a(this, "findAttributeValue", (e) => this._store.getState()[e]);
27
- a(this, "update", (e, t) => {
28
- this._store.dispatch(t(e));
29
- });
30
- a(this, "add", (e, t) => {
31
- this._store.dispatch(t(e));
32
- });
33
- a(this, "loadPromise", (e, t, s = "GET", i, r = () => {
34
- }) => fetch(e, {
35
- method: s,
36
- body: i,
37
- cache: "no-cache",
38
- headers: {
39
- "Content-Type": "application/json"
40
- },
41
- async: !0,
42
- referrerPolicy: "same-origin"
43
- }).then((n, o) => {
44
- var y;
45
- let m = (y = n.headers.get("permissions")) == null ? void 0 : y.split(",");
46
- if (r(m), n.ok)
47
- return n.json();
48
- throw n.json();
49
- }).then((n) => (this._store.dispatch(t(n)), n)));
50
- a(this, "loadOnePromise", (e, t) => fetch(e, {
51
- cache: "no-cache",
52
- headers: {
53
- "Content-Type": "application/json"
54
- },
55
- referrerPolicy: "same-origin"
56
- }).then((s) => (s = s.json(), t && this._store.dispatch(t(s)), s)));
57
- a(this, "load", (e, t = !1) => $.ajax({
58
- method: "GET",
59
- url: e,
60
- async: t,
61
- dataType: "json"
62
- }));
63
- this._store = e.store, this.premenna = null;
64
- }
65
- _save(e, t, s, i, r) {
66
- let n = fetch(e, {
67
- method: r,
68
- body: JSON.stringify(t),
69
- cache: "no-cache",
70
- headers: {
71
- "Content-Type": "application/json"
72
- },
73
- referrerPolicy: "same-origin"
74
- }).then((o) => (o.ok, o.json()));
75
- return this.dispatch(n, i, s);
76
- }
77
- _get(e, t, s) {
78
- let i = fetch(e, {
79
- method: "GET",
80
- cache: "no-cache",
81
- headers: {
82
- "Content-Type": "application/json"
83
- },
84
- referrerPolicy: "same-origin"
85
- }).then(async (r) => {
86
- let n;
87
- try {
88
- let o = await r.text();
89
- return JSON.parse(o);
90
- } catch {
91
- return n;
92
- }
93
- });
94
- return this.dispatch(i, s, t);
95
- }
96
- put(e, t, s, i = !0) {
97
- return this._save(e, t, s, i, "PUT");
98
- }
99
- post(e, t, s, i = !0) {
100
- return this._save(e, t, s, i, "POST");
101
- }
102
- delete(e, t, s, i = !0) {
103
- return this._save(e, t, s, i, "DELETE");
104
- }
105
- get(e, t, s = !0) {
106
- return this._get(e, t, s);
107
- }
108
- dispatch(e, t, s) {
109
- return t ? e.then((i) => (this._store.dispatch(s(i.data)), i)).catch((i) => {
110
- console.error(i);
111
- }) : e;
112
- }
113
- }
114
- class c {
115
- constructor() {
116
- }
117
- static get permissions() {
118
- return [
119
- ...intranet.storage().getItem("permissions", "settings") || [],
120
- ...intranet.storage().getItem("globalPermissions", "settings") || []
121
- ];
122
- }
123
- static includesKey(e) {
124
- return c.permissions.includes(e);
125
- }
126
- static getKeys() {
127
- let e = [];
128
- return this.hasAttribute("permission-check") && (e = this.getAttribute("permission-check").split(",")), e;
129
- }
130
- static shouldShow() {
131
- return this.hasAttribute("show") && JSON.parse(this.getAttribute("show"));
132
- }
133
- static isPermissionFulfilled() {
134
- return c.getKeys.bind(this)().some((e) => c.permissions.includes(e)) || c.shouldShow.bind(this)();
135
- }
136
- }
137
- class u {
138
- constructor() {
139
- }
140
- /**
141
- *
142
- * @param element : HTMLElement
143
- * @param object : Object
144
- */
145
- static setAttributesToElement(e, t) {
146
- Object.entries(t).forEach(([s, i]) => {
147
- e.setAttribute(s, i);
148
- });
149
- }
150
- /** @function getAttributes
151
- * @description Vráti všetky atributy elementu v poli
152
- * @return (array)
153
- */
154
- static getAttributes(e) {
155
- return typeof e == "string" && (e = document.querySelector(e)), Array.from(e.attributes).filter((t) => !t.name.startsWith("@")).map((t) => [t.name.split("-").map((s, i) => i != 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s).join(""), t.value]).reduce((t, s) => (t[s[0]] = s[1], t), {});
156
- }
157
- static getEvents(e) {
158
- return typeof e == "string" && (e = document.querySelector(e)), Array.from(e.attributes).filter((t) => t.name.startsWith("@wje")).map((t) => [t.name.substring(3).split("-").join(""), t.value]).reduce((t, s) => (t.set(s[0], s[1]), t), /* @__PURE__ */ new Map());
159
- }
160
- static attributesToString(e) {
161
- return Object.entries(e).map(([t, s]) => `${t}="${s}"`).join(" ");
162
- }
163
- static hasSlot(e, t = null) {
164
- let s = t ? `[slot="${t}"]` : "[slot]";
165
- return e.querySelectorAll(s).length > 0;
166
- }
167
- static stringToBoolean(e) {
168
- return !["false", "0", 0].includes(e);
169
- }
170
- }
171
- var l, d, g;
172
- class T {
173
- constructor() {
174
- w(this, d);
175
- this.customEventStorage = [], l = this;
176
- }
177
- dispatchCustomEvent(e, t, s) {
178
- e.dispatchEvent(
179
- new CustomEvent(t, {
180
- detail: s || {
181
- context: e,
182
- event: l
183
- },
184
- bubbles: !0,
185
- composed: !0
186
- })
187
- );
188
- }
189
- findRecordByElement(e) {
190
- for (var t = 0, s = this.customEventStorage.length; t < s; t++) {
191
- var i = this.customEventStorage[t];
192
- if (e == i.element)
193
- return i;
194
- }
195
- return !1;
196
- }
197
- addListener(e, t, s, i, r) {
198
- e && (Array.isArray(e) || (e = [e]), e.forEach((n) => {
199
- this.writeRecord(n, t, s, i, r);
200
- }));
201
- }
202
- writeRecord(e, t, s, i, r) {
203
- let n = this.findRecordByElement(e);
204
- n ? n.listeners[t] = n.listeners[t] || [] : (n = {
205
- element: e,
206
- listeners: {}
207
- }, n.listeners[t] = [], this.customEventStorage.push(n)), i = i || p(this, d, g);
208
- let o = {
209
- listener: i,
210
- options: r,
211
- event: s
212
- };
213
- this.listenerExists(e, t, o) || (n.listeners[t].push(o), e.addEventListener(t, i, r));
214
- }
215
- listenerExists(e, t, s) {
216
- return this.findRecordByElement(e).listeners[t].some((r) => JSON.stringify(r) === JSON.stringify(s));
217
- }
218
- removeListener(e, t, s, i, r) {
219
- let n = this.findRecordByElement(e);
220
- if (n && t in n.listeners) {
221
- var o = n.listeners[t].indexOf(i);
222
- ~o && n.listeners[t].splice(o, 1), n.listeners[t].length || delete n.listeners[t];
223
- }
224
- i = i || p(this, d, g), e.removeEventListener(t, i, r);
225
- }
226
- removeElement(e) {
227
- this.customEventStorage = this.customEventStorage.filter((t) => {
228
- if (t.element !== e)
229
- return t;
230
- });
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
- }
241
- }
242
- d = new WeakSet(), g = function(e) {
243
- let t = this;
244
- l.findRecordByElement(t).listeners[e.type].forEach((r, n) => {
245
- l.dispatchCustomEvent(t, r.event, {
246
- originalEvent: (e == null ? void 0 : e.type) || null,
247
- context: t,
248
- event: l
249
- }), r.options && r.options.stopPropagation === !0 && e.stopPropagation();
250
- });
251
- };
252
- let _ = new T();
253
- const E = document.createElement("template");
254
- E.innerHTML = "";
255
- const f = class f extends HTMLElement {
256
- constructor(t) {
257
- super();
258
- a(this, "initWjElement", async (t = !1) => {
259
- var r;
260
- this.functionStack = [];
261
- const s = Date.now();
262
- this.functionStack.push(s), (r = this.setupAttributes) == null || r.call(this), this.isShadowRoot && !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" }), this.setUpAccessors(), this.drawingStatus = "BEGINING", this.display(t, s);
263
- const i = new CSSStyleSheet();
264
- i.replaceSync(this.constructor.cssStyleSheet), this.context.adoptedStyleSheets = [i];
265
- });
266
- this.template = t || E, this.isAttached = !1, this.service = new j({
267
- store: b
268
- }), this.defineDepandencies(), this.rendering = !1, this.runtimeTimeout = null, this.count = 0, this.functionStack = [], this.scheludedRefresh = !1, this._depandencies = {};
269
- }
270
- get permission() {
271
- return this.getAttribute("permission-check");
272
- }
273
- get isPermissionCheck() {
274
- return this.hasAttribute("permission-check");
275
- }
276
- set isPermissionCheck(t) {
277
- return this.setAttribute("permission-check", "permission-check");
278
- }
279
- get isShow() {
280
- return this.hasAttribute("show");
281
- }
282
- get isShadowRoot() {
283
- return this.hasAttribute("shadow");
284
- }
285
- set isShadowRoot(t) {
286
- return this.setAttribute("shadow", t);
287
- }
288
- get shadowType() {
289
- return this.getAttribute("shadow") || "open";
290
- }
291
- get context() {
292
- return this.isShadowRoot ? this.shadowRoot : this;
293
- }
294
- get store() {
295
- return b;
296
- }
297
- // addAction,
298
- // deleteAction,
299
- // loadAction,
300
- // updateAction,
301
- // addManyAction
302
- /**
303
- * @typedef {Object} ArrayActions
304
- * @property {function} addAction - Indicates whether the Courage component is present.
305
- * @property {function} deleteAction - Indicates whether the Power component is present.
306
- * @property {function} loadAction - Indicates whether the Wisdom component is present.
307
- * @property {function} updateAction - Indicates whether the Wisdom component is present.
308
- */
309
- /**
310
- * @typedef {Object} ObjectActions
311
- * @property {function} addAction - Indicates whether the Courage component is present.
312
- * @property {function} deleteAction - Indicates whether the Power component is present.
313
- * @property {function} updateAction - Indicates whether the Wisdom component is present.
314
- */
315
- /**
316
- * @return {ArrayActions, ObjectActions}
317
- */
318
- get defaultStoreActions() {
319
- return C;
320
- }
321
- get removeClassAfterConnect() {
322
- var t;
323
- return (t = this.getAttribute("remove-class-after-connect")) == null ? void 0 : t.split(" ");
324
- }
325
- get depandencies() {
326
- return this._depandencies;
327
- }
328
- set depandencies(t) {
329
- this._depandencies = t;
330
- }
331
- static define(t, s = this, i = {}) {
332
- if (!customElements.get(t)) {
333
- customElements.define(t, s, i);
334
- return;
335
- }
336
- }
337
- defineDepandencies() {
338
- this.depandencies && Object.entries(depandencies).forEach((t, s) => f.define(t, s));
339
- }
340
- beforeDraw() {
341
- }
342
- afterDraw() {
343
- }
344
- refreshUpdatePromise() {
345
- this.updateComplete = new Promise((t, s) => {
346
- this.finisPromise = t, this.rejectPromise = s;
347
- });
348
- }
349
- async connectedCallback() {
350
- this.finisPromise = (t) => {
351
- t();
352
- }, this.rejectPromise = (t) => {
353
- t();
354
- }, this.refreshUpdatePromise(), await this.initWjElement(!0);
355
- }
356
- setupAttributes() {
357
- u.getEvents(this).forEach((s, i) => {
358
- this.addEventListener(i, (r) => {
359
- var n, o;
360
- (o = (n = this.getRootNode().host)[s]) == null || o.call(n);
361
- });
362
- });
363
- }
364
- beforeDisconnect() {
365
- }
366
- disconnectedCallback() {
367
- var t, s;
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);
369
- }
370
- /**
371
- * Lifecycle method, called whenever an observed property changes
372
- */
373
- attributeChangedCallback(t, s, i) {
374
- if (!this.isAttached && s !== i) {
375
- this.scheludedRefresh = !0;
376
- return;
377
- }
378
- s !== i && this.refresh();
379
- }
380
- async refresh() {
381
- var t, s;
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));
383
- }
384
- /**
385
- * To be implemented by the child class
386
- */
387
- draw(t, s, i) {
388
- return null;
389
- }
390
- display(t = !1, s) {
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 || "", r;
396
- if (i instanceof HTMLElement || i instanceof DocumentFragment)
397
- r = i;
398
- else {
399
- let o = document.createElement("template");
400
- o.innerHTML = i, r = o.content.cloneNode(!0);
401
- }
402
- let n = r;
403
- this.isProcessingFlow(t) || this.context.appendChild(n);
404
- });
405
- }
406
- /**
407
- * Turns a string split with "-" into camel case notation
408
- */
409
- sanitizeName(t) {
410
- let s = t.split("-");
411
- return [s.shift(), ...s.map((i) => i[0].toUpperCase() + i.slice(1))].join("");
412
- }
413
- /**
414
- * Creates one property on this class for every
415
- * HTML property defined on the element
416
- */
417
- setUpAccessors() {
418
- this.getAttributeNames().forEach((s) => {
419
- const i = this.sanitizeName(s);
420
- this[i] == null && Object.defineProperty(this, i, {
421
- set: (r) => this.setAttribute(s, r),
422
- get: (r) => this.getAttribute(s)
423
- });
424
- });
425
- }
426
- isProcessingFlow(t) {
427
- return !this.functionStack.find((s) => s == t);
428
- }
429
- _resolveRender(t) {
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 r;
433
- this.isProcessingFlow(t) || Promise.resolve((r = this.afterDraw) == null ? void 0 : r.call(this, this.context, this.store, u.getAttributes(this))).then(
434
- (n, 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
- });
439
- }));
440
- }
441
- };
442
- a(f, "processTemplates", (t, s) => {
443
- const i = document.createElement("template");
444
- return i.innerHTML = [s.innerHTML, (t == null ? void 0 : t.innerHTML) || ""].join(""), i;
445
- });
446
- let S = f, k = "true";
447
- export {
448
- u as WjElementUtils,
449
- c as WjePermissionsApi,
450
- k as __esModule,
451
- S as default,
452
- _ as event
453
- };
@@ -1,40 +0,0 @@
1
- let o = [];
2
- function i(n) {
3
- const t = /@keyframes\s+([\w-]+)\s*{([\s\S]+?})\s*}/g;
4
- let r, e = [];
5
- for (; (r = t.exec(n)) !== null; ) {
6
- let s = r[1], a = r[2].trim(), f = l(a);
7
- e.push({ name: s, keyframes: f });
8
- }
9
- return e;
10
- }
11
- function l(n) {
12
- const t = /([\d%]+)\s*{([\s\S]+?)}/g;
13
- let r, e = [];
14
- for (; (r = t.exec(n)) !== null; ) {
15
- let s = parseFloat(r[1]) / 100, a = c(r[2]), f = {
16
- offset: s,
17
- ...a
18
- };
19
- e.push(f);
20
- }
21
- return e.sort((s, a) => s.offset - a.offset), e;
22
- }
23
- function c(n) {
24
- const t = {};
25
- return n.split(";").forEach((r) => {
26
- const [e, s] = r.split(":").map((a) => a.trim());
27
- e && s && (e === "animation-timing-function" ? t.easing = s : t[e] = s);
28
- }), t;
29
- }
30
- async function m(n) {
31
- try {
32
- return o.length > 0 || (o = i(n)), o;
33
- } catch (t) {
34
- console.error("Error:", t);
35
- }
36
- }
37
- export {
38
- o as animations,
39
- m as fetchAndParseCSS
40
- };
@@ -1,115 +0,0 @@
1
- var f = Object.defineProperty;
2
- var j = (a, e, t) => e in a ? f(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
3
- var m = (a, e, t) => (j(a, typeof e != "symbol" ? e + "" : e, t), t);
4
- import v from "./wje-element.js";
5
- import { Localizer as x } from "./localize.js";
6
- import E from "./wje-format-digital.js";
7
- import z from "./wje-button.js";
8
- import A from "./wje-slider.js";
9
- import y from "./wje-icon.js";
10
- const C = ':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-width:1px;border-style:solid;border-color: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)}';
11
- class g extends v {
12
- /**
13
- * Creates an instance of FileUploadItem.
14
- *
15
- * @constructor
16
- */
17
- constructor() {
18
- super();
19
- /**
20
- * Dependencies
21
- * @type {Object}
22
- */
23
- m(this, "depandencies", {
24
- "wje-format-digital": E,
25
- "wje-button": z,
26
- "wje-slider": A,
27
- "wje-icon": y
28
- });
29
- m(this, "className", "FileUploadItem");
30
- /**
31
- * Handles the delete action.
32
- */
33
- m(this, "onDelete", () => {
34
- this.remove();
35
- });
36
- this.localizer = new x(this);
37
- }
38
- /**
39
- * Returns the CSS styles for the component.
40
- *
41
- * @static
42
- * @returns {CSSStyleSheet}
43
- */
44
- static get cssStyleSheet() {
45
- return C;
46
- }
47
- /**
48
- * Returns the list of attributes to observe for changes.
49
- *
50
- * @static
51
- * @returns {Array<string>}
52
- */
53
- static get observedAttributes() {
54
- return ["uploaded"];
55
- }
56
- /**
57
- * Called when an observed attribute has been added, removed, updated, or replaced.
58
- *
59
- * @param {string} name - The name of the attribute.
60
- * @param {string} old - The old value of the attribute.
61
- * @param {string} newName - The new value of the attribute.
62
- */
63
- attributeChangedCallback(t, w, b) {
64
- if (t === "uploaded" && this.drawingStatus === "AFTER") {
65
- this.uploadedEl.setAttribute("value", this.uploaded);
66
- let l = +this.uploaded / +this.size * 100 || 0;
67
- this.sliderEl.setAttribute("value", Math.round(l, 0));
68
- }
69
- }
70
- /**
71
- * Sets up the attributes for the component.
72
- */
73
- setupAttributes() {
74
- this.isShadowRoot = "open";
75
- }
76
- /**
77
- * Method to draw the component.
78
- * @param {Object} context - The context of the component.
79
- * @param {Object} store - The store of the component.
80
- * @param {Object} params - The parameters for the component.
81
- * @returns {DocumentFragment} The fragment containing the component.
82
- */
83
- draw(t, w, b) {
84
- let l = document.createDocumentFragment(), i = document.createElement("div");
85
- i.classList.add("native-file-upload-item");
86
- let h = document.createElement("slot");
87
- h.setAttribute("name", "img");
88
- let p = document.createElement("div");
89
- p.classList.add("image");
90
- let u = document.createElement("span");
91
- u.classList.add("name"), u.innerText = this.name;
92
- let d = document.createElement("slot");
93
- d.classList.add("actions"), d.setAttribute("name", "action");
94
- let s = document.createElement("wje-button");
95
- s.setAttribute("fill", "link"), s.setAttribute("size", "small"), s.innerHTML = '<wje-icon name="x" size="small"></wje-icon>';
96
- let o = document.createElement("span");
97
- o.classList.add("size");
98
- let n = document.createElement("wje-format-digital");
99
- n.setAttribute("value", this.uploaded || 0), n.innerHTML = `<span slot="start">${this.localizer.translate("wj.file.upload.uploaded")}</span>`;
100
- let c = document.createElement("wje-format-digital");
101
- c.setAttribute("value", this.size || 0), c.innerHTML = `<span slot="start">&nbsp;${this.localizer.translate("wj.file.upload.from")} </span>`;
102
- let r = document.createElement("wje-slider");
103
- return r.classList.add("file-progress"), r.setAttribute("id", "id-" + this.lastModified), r.setAttribute("value", this.progress || 0), r.setAttribute("color", "success"), p.appendChild(h), d.appendChild(s), o.appendChild(n), o.appendChild(c), i.appendChild(p), i.appendChild(u), i.appendChild(o), i.appendChild(d), i.appendChild(r), l.appendChild(i), this.button = s, this.uploadedEl = n, this.sliderEl = r, l;
104
- }
105
- /**
106
- * Called after the component has been drawn.
107
- */
108
- afterDraw() {
109
- this.button.addEventListener("wje-button:click", this.onDelete);
110
- }
111
- }
112
- g.define("wje-file-upload-item", g);
113
- export {
114
- g as default
115
- };