wj-elements 0.1.43 → 0.1.45

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 (10) hide show
  1. package/dist/wje-button.js +9 -9
  2. package/dist/wje-dialog.js +20 -20
  3. package/dist/wje-infinite-scroll.js +63 -55
  4. package/dist/wje-inline-edit.js +57 -32
  5. package/dist/wje-input.js +5 -5
  6. package/dist/wje-item.js +1 -1
  7. package/dist/wje-master.js +231 -202
  8. package/dist/wje-menu-item.js +5 -0
  9. package/dist/wje-sliding-container.js +245 -0
  10. package/package.json +1 -2
package/dist/wje-master.js CHANGED
@@ -1,96 +1,97 @@
1
1
  var y = Object.defineProperty;
2
- var C = (c, n, e) => n in c ? y(c, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[n] = e;
3
- var f = (c, n, e) => (C(c, typeof n != "symbol" ? n + "" : n, e), e);
4
- import x from "./wje-element.js";
2
+ var C = (o, n, e) => n in o ? y(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
3
+ var f = (o, n, e) => (C(o, typeof n != "symbol" ? n + "" : n, e), e);
4
+ import g from "./wje-element.js";
5
5
  import { event as q } from "./wje-element.js";
6
- import { defaultStoreActions as D, store as F } from "./wje-store.js";
6
+ import { defaultStoreActions as P, store as U } from "./wje-store.js";
7
7
  import { b as V, w as $ } from "./router-links-FtZbFUto.js";
8
- import { fetchAndParseCSS as U } from "./wje-fetchAndParseCSS.js";
9
- import { Localizer as S } from "./localize.js";
10
- import { default as J } from "./wje-accordion.js";
8
+ import { fetchAndParseCSS as W } from "./wje-fetchAndParseCSS.js";
9
+ import { Localizer as j } from "./localize.js";
10
+ import { default as Q } from "./wje-accordion.js";
11
11
  import { default as K } from "./wje-accordion-item.js";
12
- import { default as Y } from "./wje-animation.js";
13
- import { default as _ } from "./wje-aside.js";
14
- import { default as te } from "./wje-avatar.js";
15
- import { default as ae } from "./wje-badge.js";
16
- import { default as se } from "./wje-breadcrumb.js";
17
- import { default as ne } from "./wje-breadcrumbs.js";
18
- import { default as de } from "./wje-button.js";
19
- import { default as pe } from "./wje-button-group.js";
20
- import { default as ue } from "./wje-card.js";
21
- import { default as he } from "./wje-card-content.js";
12
+ import { default as Z } from "./wje-animation.js";
13
+ import { default as ee } from "./wje-aside.js";
14
+ import { default as re } from "./wje-avatar.js";
15
+ import { default as oe } from "./wje-badge.js";
16
+ import { default as ie } from "./wje-breadcrumb.js";
17
+ import { default as le } from "./wje-breadcrumbs.js";
18
+ import { default as ce } from "./wje-button.js";
19
+ import { default as me } from "./wje-button-group.js";
20
+ import { default as fe } from "./wje-card.js";
21
+ import { default as ge } from "./wje-card-content.js";
22
22
  import { default as ve } from "./wje-card-controls.js";
23
- import { default as we } from "./wje-card-header.js";
23
+ import { default as be } from "./wje-card-header.js";
24
24
  import { default as je } from "./wje-card-subtitle.js";
25
- import { default as ye } from "./wje-card-title.js";
26
- import { default as Ae } from "./wje-carousel.js";
27
- import { default as Le } from "./wje-carousel-item.js";
25
+ import { default as Ce } from "./wje-card-title.js";
26
+ import { default as Ee } from "./wje-carousel.js";
27
+ import { default as Me } from "./wje-carousel-item.js";
28
28
  import { default as Te } from "./wje-checkbox.js";
29
- import { default as Be } from "./wje-chip.js";
30
- import { default as Ie } from "./wje-col.js";
31
- import { default as He } from "./wje-color-picker.js";
29
+ import { default as He } from "./wje-chip.js";
30
+ import { default as De } from "./wje-col.js";
31
+ import { default as Ne } from "./wje-color-picker.js";
32
32
  import { default as qe } from "./wje-container.js";
33
- import { default as De } from "./wje-copy-button.js";
33
+ import { default as Pe } from "./wje-copy-button.js";
34
34
  import { default as Ge } from "./wje-dialog.js";
35
35
  import { default as $e } from "./wje-divider.js";
36
- import { default as Ue } from "./wje-dropdown.js";
37
- import { default as Je } from "./wje-file-upload.js";
36
+ import { default as We } from "./wje-dropdown.js";
37
+ import { default as Qe } from "./wje-file-upload.js";
38
38
  import { default as Ke } from "./wje-file-upload-item.js";
39
- import { default as Ye } from "./wje-footer.js";
40
- import { default as _e } from "./wje-format-digital.js";
41
- import { default as tt } from "./wje-grid.js";
42
- import { default as at } from "./wje-header.js";
43
- import { default as st } from "./wje-icon.js";
44
- import { default as nt } from "./wje-icon-picker.js";
45
- import { default as dt } from "./wje-img.js";
46
- import { default as pt } from "./wje-img-comparer.js";
47
- import { default as ut } from "./wje-infinite-scroll.js";
48
- import { default as ht } from "./wje-inline-edit.js";
39
+ import { default as Ze } from "./wje-footer.js";
40
+ import { default as et } from "./wje-format-digital.js";
41
+ import { default as rt } from "./wje-grid.js";
42
+ import { default as ot } from "./wje-header.js";
43
+ import { default as it } from "./wje-icon.js";
44
+ import { default as lt } from "./wje-icon-picker.js";
45
+ import { default as ct } from "./wje-img.js";
46
+ import { default as mt } from "./wje-img-comparer.js";
47
+ import { default as ft } from "./wje-infinite-scroll.js";
48
+ import { default as gt } from "./wje-inline-edit.js";
49
49
  import { default as vt } from "./wje-input.js";
50
- import { default as wt } from "./wje-input-file.js";
50
+ import { default as bt } from "./wje-input-file.js";
51
51
  import { default as jt } from "./wje-item.js";
52
- import { default as yt } from "./wje-label.js";
53
- import { default as At } from "./wje-list.js";
54
- import { default as Lt } from "./wje-main.js";
52
+ import { default as Ct } from "./wje-label.js";
53
+ import { default as Et } from "./wje-list.js";
54
+ import { default as Mt } from "./wje-main.js";
55
55
  import { default as Tt } from "./wje-masonry.js";
56
- import { default as Bt } from "./wje-menu.js";
57
- import { default as It } from "./wje-menu-button.js";
58
- import { default as Ht } from "./wje-menu-item.js";
56
+ import { default as Ht } from "./wje-menu.js";
57
+ import { default as Dt } from "./wje-menu-button.js";
58
+ import { default as Nt } from "./wje-menu-item.js";
59
59
  import { default as qt } from "./wje-menu-label.js";
60
- import { default as Dt } from "./wje-option.js";
60
+ import { default as Pt } from "./wje-option.js";
61
61
  import { default as Gt } from "./wje-options.js";
62
62
  import "./wje-popup.js";
63
63
  import { default as $t } from "./wje-progress-bar.js";
64
- import { default as Ut } from "./wje-qr-code.js";
65
- import { default as Jt } from "./wje-radio.js";
64
+ import { default as Wt } from "./wje-qr-code.js";
65
+ import { default as Qt } from "./wje-radio.js";
66
66
  import { default as Kt } from "./wje-radio-group.js";
67
- import { default as Yt } from "./wje-rate.js";
68
- import { default as _t } from "./wje-relative-time.js";
69
- import { default as tr } from "./wje-reorder.js";
70
- import { default as ar } from "./wje-reorder-dropzone.js";
71
- import { default as sr } from "./wje-reorder-handle.js";
72
- import { default as nr } from "./wje-reorder-item.js";
73
- import { default as dr } from "./wje-route.js";
74
- import { default as pr } from "./wje-routerx.js";
75
- import { default as ur } from "./wje-router-link.js";
76
- import { default as hr } from "./wje-router-outlet.js";
67
+ import { default as Zt } from "./wje-rate.js";
68
+ import { default as er } from "./wje-relative-time.js";
69
+ import { default as rr } from "./wje-reorder.js";
70
+ import { default as or } from "./wje-reorder-dropzone.js";
71
+ import { default as ir } from "./wje-reorder-handle.js";
72
+ import { default as lr } from "./wje-reorder-item.js";
73
+ import { default as cr } from "./wje-route.js";
74
+ import { default as mr } from "./wje-routerx.js";
75
+ import { default as fr } from "./wje-router-link.js";
76
+ import { default as gr } from "./wje-router-outlet.js";
77
77
  import { default as vr } from "./wje-row.js";
78
- import { default as wr } from "./wje-select.js";
78
+ import { default as br } from "./wje-select.js";
79
79
  import { default as jr } from "./wje-slider.js";
80
- import { default as yr } from "./wje-split-view.js";
81
- import { default as Ar } from "./wje-status.js";
82
- import { default as Lr } from "./wje-tab.js";
80
+ import { default as Cr } from "./wje-split-view.js";
81
+ import { default as Er } from "./wje-status.js";
82
+ import { default as Mr } from "./wje-tab.js";
83
83
  import { default as Tr } from "./wje-tab-group.js";
84
- import { default as Br } from "./wje-tab-panel.js";
85
- import { default as Ir } from "./wje-textarea.js";
86
- import { default as Hr } from "./wje-thumbnail.js";
84
+ import { default as Hr } from "./wje-tab-panel.js";
85
+ import { default as Dr } from "./wje-textarea.js";
86
+ import { default as Nr } from "./wje-thumbnail.js";
87
87
  import { default as qr } from "./wje-toast.js";
88
- import { default as Dr } from "./wje-toggle.js";
88
+ import { default as Pr } from "./wje-toggle.js";
89
89
  import { default as Gr } from "./wje-toolbar.js";
90
90
  import { default as $r } from "./wje-toolbar-action.js";
91
- import { default as Ur } from "./wje-tooltip.js";
92
- import { default as Jr } from "./wje-visually-hidden.js";
93
- import { P as Kr } from "./popup.element-CWsSOxs2.js";
91
+ import { default as Wr } from "./wje-tooltip.js";
92
+ import { default as Qr } from "./wje-visually-hidden.js";
93
+ import { default as Kr } from "./wje-sliding-container.js";
94
+ import { P as Zr } from "./popup.element-CWsSOxs2.js";
94
95
  const A = {
95
96
  code: "sk",
96
97
  name: "Slovak",
@@ -100,7 +101,7 @@ const A = {
100
101
  "wj.file.upload.uploaded": "Nahraných: ",
101
102
  "wj.file.upload.from": "z"
102
103
  };
103
- S.registerTranslation(A);
104
+ j.registerTranslation(A);
104
105
  const E = {
105
106
  code: "en",
106
107
  name: "English",
@@ -110,9 +111,9 @@ const E = {
110
111
  "wj.file.upload.uploaded": "Uploaded: ",
111
112
  "wj.file.upload.from": "from"
112
113
  };
113
- S.registerTranslation(E);
114
+ j.registerTranslation(E);
114
115
  const L = "";
115
- class g extends x {
116
+ class v extends g {
116
117
  constructor() {
117
118
  super();
118
119
  f(this, "className", "Step");
@@ -124,54 +125,54 @@ class g extends x {
124
125
  this.isShadowRoot = "open";
125
126
  }
126
127
  draw() {
127
- let e = document.createDocumentFragment(), a = document.createElement("div");
128
- const o = document.createElement("slot");
129
- return a.appendChild(o), e.appendChild(a), e;
128
+ let e = document.createDocumentFragment(), r = document.createElement("div");
129
+ const s = document.createElement("slot");
130
+ return r.appendChild(s), e.appendChild(r), e;
130
131
  }
131
132
  }
132
- g.define("wje-step", g);
133
- const R = ".stepper-container{display:flex;flex-direction:column}.step-headers{display:flex;justify-content:space-between;margin-bottom:var(--wje-spacing-medium)}.step-header{display:flex;padding:var(--wje-spacing-medium);gap:var(--wje-spacing-x-small);color:var(--wje-color-contrast-5);flex-grow:1;text-align:center}.pointer{cursor:pointer}.active{color:var(--wje-color-contrast-11)}.steps-content{margin-bottom:var(--wje-spacing-medium)}.arrow-icon{margin-top:var(--wje-stepper-margin)}.step{padding:var(--wje-spacing-medium);text-align:center}.done{color:var(--wje-color-contrast-11)}.nav-buttons{display:flex;justify-content:space-between}";
134
- class w extends x {
133
+ v.define("wje-step", v);
134
+ const M = ".stepper-container{display:flex;flex-direction:column}.step-headers{display:flex;justify-content:space-between;margin-bottom:var(--wje-spacing-medium)}.step-header{display:flex;padding:var(--wje-spacing-medium);gap:var(--wje-spacing-x-small);color:var(--wje-color-contrast-5);flex-grow:1;text-align:center}.pointer{cursor:pointer}.active{color:var(--wje-color-contrast-11)}.steps-content{margin-bottom:var(--wje-spacing-medium)}.arrow-icon{margin-top:var(--wje-stepper-margin)}.step{padding:var(--wje-spacing-medium);text-align:center}.done{color:var(--wje-color-contrast-11)}.nav-buttons{display:flex;justify-content:space-between}";
135
+ class w extends g {
135
136
  constructor() {
136
137
  super();
137
138
  f(this, "className", "Stepper");
138
139
  this.currentStep = 0, this.completedSteps = [];
139
140
  }
140
141
  static get cssStyleSheet() {
141
- return R;
142
+ return M;
142
143
  }
143
144
  setupAttributes() {
144
145
  this.isShadowRoot = "open";
145
146
  }
146
147
  draw() {
147
148
  let e = document.createDocumentFragment();
148
- const a = document.createElement("div");
149
- a.className = "stepper-container";
150
- const o = document.createElement("div");
151
- o.className = "step-headers";
152
149
  const r = document.createElement("div");
153
- r.className = "steps-content";
150
+ r.className = "stepper-container";
151
+ const s = document.createElement("div");
152
+ s.className = "step-headers";
153
+ const a = document.createElement("div");
154
+ a.className = "steps-content";
154
155
  const t = Array.from(this.children);
155
- this.steps = t.map((d, i) => {
156
- if (d.nodeName === "WJE-STEP") {
157
- const m = document.createElement("div");
158
- m.className = "step-header";
156
+ this.steps = t.map((c, m) => {
157
+ if (c.nodeName === "WJE-STEP") {
158
+ const i = document.createElement("div");
159
+ i.className = "step-header";
159
160
  const u = document.createElement("wje-badge");
160
- u.className = "step-badge", u.setAttribute("label", (i + 1).toString()), u.innerHTML = "12";
161
- const v = document.createElement("span");
162
- if (v.innerText = d.getAttribute("label") || `Step ${i + 1}`, i === this.currentStep && (m.classList.add("active"), u.setAttribute("color", "primary")), d.hasAttribute("disabled") || (m.addEventListener("click", () => this.gotoStep(i)), m.classList.add("pointer")), m.appendChild(u), m.appendChild(v), o.appendChild(m), i < t.length - 1) {
161
+ u.className = "step-badge", u.setAttribute("label", (m + 1).toString()), u.innerHTML = "12";
162
+ const x = document.createElement("span");
163
+ if (x.innerText = c.getAttribute("label") || `Step ${m + 1}`, m === this.currentStep && (i.classList.add("active"), u.setAttribute("color", "primary")), c.hasAttribute("disabled") || (i.addEventListener("click", () => this.gotoStep(m)), i.classList.add("pointer")), i.appendChild(u), i.appendChild(x), s.appendChild(i), m < t.length - 1) {
163
164
  const h = document.createElement("wje-icon");
164
- h.setAttribute("name", "chevron-right"), h.classList.add("arrow-icon"), h.setAttribute("size", "small"), o.appendChild(h);
165
+ h.setAttribute("name", "chevron-right"), h.classList.add("arrow-icon"), h.setAttribute("size", "small"), s.appendChild(h);
165
166
  }
166
- return d.classList.add("step"), i !== this.currentStep && (d.style.display = "none"), d;
167
+ return c.classList.add("step"), m !== this.currentStep && (c.style.display = "none"), c;
167
168
  }
168
- }), this.steps.forEach((d) => r.appendChild(d));
169
- const s = document.createElement("div");
170
- s.className = "nav-buttons";
171
- const l = document.createElement("wje-button");
172
- l.setAttribute("label", "Previous"), l.disabled = this.currentStep === 0, l.addEventListener("click", () => this.navigate(-1)), l.innerHTML = "Prev";
169
+ }), this.steps.forEach((c) => a.appendChild(c));
170
+ const l = document.createElement("div");
171
+ l.className = "nav-buttons";
172
+ const d = document.createElement("wje-button");
173
+ d.setAttribute("label", "Previous"), d.disabled = this.currentStep === 0, d.addEventListener("click", () => this.navigate(-1)), d.innerHTML = "Prev";
173
174
  const p = document.createElement("wje-button");
174
- return p.setAttribute("label", "Next"), p.disabled = this.currentStep === this.steps.length - 1, p.addEventListener("click", () => this.navigate(1)), p.innerHTML = "Next", s.appendChild(l), s.appendChild(p), a.appendChild(o), a.appendChild(r), a.appendChild(s), e.appendChild(a), e;
175
+ return p.setAttribute("label", "Next"), p.disabled = this.currentStep === this.steps.length - 1, p.addEventListener("click", () => this.navigate(1)), p.innerHTML = "Next", l.appendChild(d), l.appendChild(p), r.appendChild(s), r.appendChild(a), r.appendChild(l), e.appendChild(r), e;
175
176
  }
176
177
  navigate(e) {
177
178
  this.gotoStep(this.currentStep + e);
@@ -179,31 +180,31 @@ class w extends x {
179
180
  gotoStep(e) {
180
181
  if (e >= 0 && e < this.steps.length) {
181
182
  e > this.currentStep && (this.completedSteps[this.currentStep] = !0), this.steps[this.currentStep].style.display = "none", this.steps[e].style.display = "block";
182
- const a = this.shadowRoot.querySelectorAll(".step-header");
183
- a[this.currentStep].classList.remove("active"), a[this.currentStep].classList.add("done"), a[e].classList.add("active");
184
- const o = this.shadowRoot.querySelectorAll("wje-badge");
185
- o[this.currentStep].shadowRoot.querySelector("div").classList.remove("wje-color-primary"), this.currentStep = e, o[this.currentStep].shadowRoot.querySelector("div").classList.add("wje-color-primary");
186
- const r = this.shadowRoot.querySelectorAll("wje-button");
187
- r[0].disabled = this.currentStep === 0, r[1].disabled = this.currentStep === this.steps.length - 1, this.updateBadges();
183
+ const r = this.shadowRoot.querySelectorAll(".step-header");
184
+ r[this.currentStep].classList.remove("active"), r[this.currentStep].classList.add("done"), r[e].classList.add("active");
185
+ const s = this.shadowRoot.querySelectorAll("wje-badge");
186
+ s[this.currentStep].shadowRoot.querySelector("div").classList.remove("wje-color-primary"), this.currentStep = e, s[this.currentStep].shadowRoot.querySelector("div").classList.add("wje-color-primary");
187
+ const a = this.shadowRoot.querySelectorAll("wje-button");
188
+ a[0].disabled = this.currentStep === 0, a[1].disabled = this.currentStep === this.steps.length - 1, this.updateBadges();
188
189
  }
189
190
  }
190
191
  updateBadges() {
191
- this.shadowRoot.querySelectorAll(".step-header").forEach((a, o) => {
192
- const r = a.querySelector("wje-badge");
193
- if (this.completedSteps[o]) {
194
- if (!r.querySelector("wje-status")) {
195
- r.innerHTML = "";
192
+ this.shadowRoot.querySelectorAll(".step-header").forEach((r, s) => {
193
+ const a = r.querySelector("wje-badge");
194
+ if (this.completedSteps[s]) {
195
+ if (!a.querySelector("wje-status")) {
196
+ a.innerHTML = "";
196
197
  const t = document.createElement("wje-icon");
197
- t.setAttribute("name", "check"), t.setAttribute("color", "success"), t.setAttribute("size", "medium"), r.shadowRoot.querySelector("div").classList.add("wje-color-success"), r.appendChild(t);
198
+ t.setAttribute("name", "check"), t.setAttribute("color", "success"), t.setAttribute("size", "medium"), a.shadowRoot.querySelector("div").classList.add("wje-color-success"), a.appendChild(t);
198
199
  }
199
200
  } else
200
- r.innerHTML = "12";
201
+ a.innerHTML = "12";
201
202
  });
202
203
  }
203
204
  }
204
205
  w.define("wje-stepper", w);
205
- const T = ".native-timeline{position:relative}.vertical-line{position:absolute;margin-left:calc(var(--wje-spacing-x-large) + 1px);top:0;bottom:0;width:1px;background-color:var(--wje-color-info-3)}";
206
- class b extends x {
206
+ const R = ".native-timeline{position:relative}.vertical-line{position:absolute;margin-left:calc(var(--wje-spacing-x-large) + 1px);top:0;bottom:0;width:1px;background-color:var(--wje-color-info-3)}";
207
+ class b extends g {
207
208
  constructor() {
208
209
  super();
209
210
  /**
@@ -220,7 +221,7 @@ class b extends x {
220
221
  * @returns {CSSStyleSheet}
221
222
  */
222
223
  static get cssStyleSheet() {
223
- return T;
224
+ return R;
224
225
  }
225
226
  /**
226
227
  * Sets up the attributes for the component.
@@ -236,19 +237,44 @@ class b extends x {
236
237
  * @param {Object} params - The parameters for drawing.
237
238
  * @returns {DocumentFragment}
238
239
  */
239
- draw(e, a, o) {
240
- let r = document.createDocumentFragment();
240
+ draw(e, r, s) {
241
+ let a = document.createDocumentFragment();
241
242
  const t = document.createElement("div");
242
243
  t.setAttribute("part", "native"), t.classList.add("native-timeline");
243
- const s = document.createElement("div");
244
- s.classList.add("vertical-line");
245
- const l = document.createElement("slot");
246
- return t.appendChild(s), t.appendChild(l), r.appendChild(t), r;
244
+ const l = document.createElement("div");
245
+ l.classList.add("vertical-line");
246
+ const d = document.createElement("slot");
247
+ return t.appendChild(l), t.appendChild(d), a.appendChild(t), a;
247
248
  }
248
249
  }
249
250
  b.define("wje-timeline", b);
251
+ function T(o, n) {
252
+ let e;
253
+ if (typeof o == "string")
254
+ e = new Date(o);
255
+ else if (typeof o == "number")
256
+ e = new Date(o);
257
+ else if (o instanceof Date)
258
+ e = o;
259
+ else
260
+ throw new Error("Invalid date input");
261
+ const r = {
262
+ yyyy: e.getFullYear(),
263
+ MM: String(e.getMonth() + 1).padStart(2, "0"),
264
+ // Mesiace sú indexované od 0
265
+ dd: String(e.getDate()).padStart(2, "0"),
266
+ HH: String(e.getHours()).padStart(2, "0"),
267
+ mm: String(e.getMinutes()).padStart(2, "0"),
268
+ ss: String(e.getSeconds()).padStart(2, "0"),
269
+ MMMM: e.toLocaleString("en-US", { month: "long" }),
270
+ // Full month name
271
+ MMM: e.toLocaleString("en-US", { month: "short" })
272
+ // Short month name
273
+ };
274
+ return n.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (s) => r[s]);
275
+ }
250
276
  const k = ":host{--wje-card-content-padding: var(--wje-spacing-medium);margin-bottom:.5rem;display:block}.native-timeline-item>wje-icon{color:var(--wje-color-contrast-5)!important}.timeline-items{display:flex;flex-direction:column}.native-timeline-item{display:flex;position:relative;padding:var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);gap:var(--wje-spacing-medium);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--wje-border-radius-large)}:host .native-timeline-item:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-3)}:host([active]) .native-timeline-item{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-3)}:host([active]) .native-timeline-item:hover{background-color:var(--wje-color-primary-2)}.icon-container{position:absolute;display:flex;width:var(--wje-size-small);height:var(--wje-size-small);padding:var(--wje-spacing-2x-small);border-radius:var(--wje-border-radius-circle);opacity:0}.content-container{height:fit-content;gap:var(--wje-spacing-small)}.event{margin:0;font-size:var(--wje-font-size-large);font-weight:var(--wje-font-weight-bold);line-height:var(--wje-line-height-dense);letter-spacing:var(--wje-spacing-4x-small)}.additional-content{font-size:var(--wje-font-size-medium);margin-top:1rem}wje-status{position:relative;z-index:1}wje-relative-time{display:block;margin-bottom:var(--wje-spacing-2x-small)}";
251
- class j extends x {
277
+ class S extends g {
252
278
  constructor() {
253
279
  super();
254
280
  /**
@@ -271,7 +297,7 @@ class j extends x {
271
297
  * Sets up the attributes for the component.
272
298
  */
273
299
  setupAttributes() {
274
- this.isShadowRoot = "open";
300
+ this.isShadowRoot = "open", this.setAttribute("relative-time", "");
275
301
  }
276
302
  /**
277
303
  * Draws the component.
@@ -281,114 +307,117 @@ class j extends x {
281
307
  * @param {Object} params - The parameters for drawing.
282
308
  * @returns {DocumentFragment}
283
309
  */
284
- draw(e, a, o) {
285
- let r = document.createDocumentFragment(), t = document.createElement("div");
310
+ draw(e, r, s) {
311
+ let a = document.createDocumentFragment(), t = document.createElement("div");
286
312
  t.setAttribute("part", "native"), t.classList.add("native-timeline-item");
287
- let s = document.createElement("div");
288
- s.classList.add("content-container");
289
- let l = document.createElement("wje-relative-time");
290
- l.setAttribute("date", this.getAttribute("datetime") || "");
291
- let p = document.createElement("h3");
292
- p.classList.add("event"), p.textContent = this.getAttribute("event") || "";
293
- let d = document.createElement("slot"), i = document.createElement("wje-icon");
294
- return i.setAttribute("name", "circle-dot"), i.setAttribute("filled", ""), i.setAttribute("part", "default-icon"), this.querySelector('[slot="status"]') && (i = document.createElement("slot"), i.setAttribute("name", "status")), s.appendChild(l), s.appendChild(p), s.appendChild(d), t.appendChild(i), t.appendChild(s), r.appendChild(t), r;
313
+ let l = document.createElement("div");
314
+ l.classList.add("content-container");
315
+ let d = document.createElement("wje-tooltip");
316
+ d.setAttribute("text", this.getAttribute("tooltip") || ""), d.setAttribute("position", "top"), d.setAttribute("content", T(this.datetime, "dd.MM.yyyy HH:mm"));
317
+ let p = document.createElement("wje-relative-time");
318
+ p.setAttribute("date", this.datetime || ""), p.setAttribute("format", this.getAttribute("format") || ""), d.appendChild(p);
319
+ let c = document.createElement("h3");
320
+ c.classList.add("event"), c.textContent = this.getAttribute("event") || "";
321
+ let m = document.createElement("slot"), i = document.createElement("wje-icon");
322
+ return i.setAttribute("name", "circle-dot"), i.setAttribute("filled", ""), i.setAttribute("part", "default-icon"), this.querySelector('[slot="status"]') && (i = document.createElement("slot"), i.setAttribute("name", "status")), l.appendChild(d), l.appendChild(c), l.appendChild(m), t.appendChild(i), t.appendChild(l), a.appendChild(t), a;
295
323
  }
296
324
  }
297
- j.define("wje-timeline-item", j);
325
+ S.define("wje-timeline-item", S);
298
326
  export {
299
- J as Accordion,
327
+ Q as Accordion,
300
328
  K as AccordionItem,
301
- Y as Animation,
302
- _ as Aside,
303
- te as Avatar,
304
- ae as Badge,
305
- se as Breadcrumb,
306
- ne as Breadcrumbs,
307
- de as Button,
308
- pe as ButtonGroup,
309
- ue as Card,
310
- he as CardContent,
329
+ Z as Animation,
330
+ ee as Aside,
331
+ re as Avatar,
332
+ oe as Badge,
333
+ ie as Breadcrumb,
334
+ le as Breadcrumbs,
335
+ ce as Button,
336
+ me as ButtonGroup,
337
+ fe as Card,
338
+ ge as CardContent,
311
339
  ve as CardControls,
312
- we as CardHeader,
340
+ be as CardHeader,
313
341
  je as CardSubtitle,
314
- ye as CardTitle,
315
- Ae as Carousel,
316
- Le as CarouselItem,
342
+ Ce as CardTitle,
343
+ Ee as Carousel,
344
+ Me as CarouselItem,
317
345
  Te as Checkbox,
318
- Be as Chip,
319
- Ie as Col,
320
- He as ColorPicker,
346
+ He as Chip,
347
+ De as Col,
348
+ Ne as ColorPicker,
321
349
  qe as Container,
322
- De as CopyButton,
350
+ Pe as CopyButton,
323
351
  Ge as Dialog,
324
352
  $e as Divider,
325
- Ue as Dropdown,
326
- Je as FileUpload,
353
+ We as Dropdown,
354
+ Qe as FileUpload,
327
355
  Ke as FileUploadItem,
328
- Ye as Footer,
329
- _e as FormatDigital,
330
- tt as Grid,
331
- at as Header,
332
- st as Icon,
333
- nt as IconPicker,
334
- dt as Img,
335
- pt as ImgComparer,
336
- ut as InfiniteScroll,
337
- ht as InlineEdit,
356
+ Ze as Footer,
357
+ et as FormatDigital,
358
+ rt as Grid,
359
+ ot as Header,
360
+ it as Icon,
361
+ lt as IconPicker,
362
+ ct as Img,
363
+ mt as ImgComparer,
364
+ ft as InfiniteScroll,
365
+ gt as InlineEdit,
338
366
  vt as Input,
339
- wt as InputFile,
367
+ bt as InputFile,
340
368
  jt as Item,
341
- yt as Label,
342
- At as List,
343
- S as Localizer,
344
- Lt as Main,
369
+ Ct as Label,
370
+ Et as List,
371
+ j as Localizer,
372
+ Mt as Main,
345
373
  Tt as Masonry,
346
- Bt as Menu,
347
- It as MenuButton,
348
- Ht as MenuItem,
374
+ Ht as Menu,
375
+ Dt as MenuButton,
376
+ Nt as MenuItem,
349
377
  qt as MenuLabel,
350
- Dt as Option,
378
+ Pt as Option,
351
379
  Gt as Options,
352
- Kr as Popup,
380
+ Zr as Popup,
353
381
  $t as ProgressBar,
354
- Ut as QrCode,
355
- Jt as Radio,
382
+ Wt as QrCode,
383
+ Qt as Radio,
356
384
  Kt as RadioGroup,
357
- Yt as Rate,
358
- _t as RelativeTime,
359
- tr as Reorder,
360
- ar as ReorderDropzone,
361
- sr as ReorderHandle,
362
- nr as ReorderItem,
363
- dr as Route,
364
- ur as RouterLink,
365
- hr as RouterOutlet,
366
- pr as Routerx,
385
+ Zt as Rate,
386
+ er as RelativeTime,
387
+ rr as Reorder,
388
+ or as ReorderDropzone,
389
+ ir as ReorderHandle,
390
+ lr as ReorderItem,
391
+ cr as Route,
392
+ fr as RouterLink,
393
+ gr as RouterOutlet,
394
+ mr as Routerx,
367
395
  vr as Row,
368
- wr as Select,
396
+ br as Select,
369
397
  jr as Slider,
370
- yr as SplitView,
371
- Ar as Status,
372
- g as Step,
398
+ Kr as SlidingContainer,
399
+ Cr as SplitView,
400
+ Er as Status,
401
+ v as Step,
373
402
  w as Stepper,
374
- Lr as Tab,
403
+ Mr as Tab,
375
404
  Tr as TabGroup,
376
- Br as TabPanel,
377
- Ir as Textarea,
378
- Hr as Thumbnail,
405
+ Hr as TabPanel,
406
+ Dr as Textarea,
407
+ Nr as Thumbnail,
379
408
  b as Timeline,
380
- j as TimelineItem,
409
+ S as TimelineItem,
381
410
  qr as Toast,
382
- Dr as Toggle,
411
+ Pr as Toggle,
383
412
  Gr as Toolbar,
384
413
  $r as ToolbarAction,
385
- Ur as Tooltip,
386
- Jr as VisuallyHidden,
387
- x as WJElement,
414
+ Wr as Tooltip,
415
+ Qr as VisuallyHidden,
416
+ g as WJElement,
388
417
  V as bindRouterLinks,
389
- D as defaultStoreActions,
418
+ P as defaultStoreActions,
390
419
  q as event,
391
- U as fetchAndParseCSS,
392
- F as store,
420
+ W as fetchAndParseCSS,
421
+ U as store,
393
422
  $ as withRouterLinks
394
423
  };
package/dist/wje-menu-item.js CHANGED
@@ -12,6 +12,11 @@ class j extends E {
12
12
  constructor() {
13
13
  super();
14
14
  c(this, "className", "MenuItem");
15
+ /**
16
+ * Checks if the submenu should be hidden based on the event.
17
+ *
18
+ * @param {Event} e - The event object.
19
+ */
15
20
  c(this, "shouldHideSubmenu", (e) => {
16
21
  if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
17
22
  if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)