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