wj-elements 0.1.8 → 0.1.9
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/{popup.element-Dj9j__Dh.js → popup.element-CpEjis9f.js} +48 -48
- package/dist/styles.css +1 -1
- package/dist/wje-animation.js +1 -1
- package/dist/wje-badge.js +15 -13
- package/dist/wje-breadcrumb.js +5 -5
- package/dist/wje-button.js +25 -27
- package/dist/wje-card-content.js +10 -10
- package/dist/wje-card-controls.js +10 -10
- package/dist/wje-card-header.js +8 -8
- package/dist/wje-card-subtitle.js +9 -9
- package/dist/wje-card-title.js +9 -9
- package/dist/wje-card.js +14 -12
- package/dist/wje-carousel-item.js +8 -8
- package/dist/wje-carousel.js +1 -1
- package/dist/wje-checkbox.js +1 -1
- package/dist/wje-chip.js +13 -13
- package/dist/wje-dialog.js +9 -9
- package/dist/wje-divider.js +10 -10
- package/dist/wje-dropdown.js +1 -1
- package/dist/wje-file-upload-item.js +8 -8
- package/dist/wje-icon-picker.js +1 -1
- package/dist/wje-icon.js +27 -25
- package/dist/wje-img-comparer.js +21 -21
- package/dist/wje-infinite-scroll.js +18 -18
- package/dist/wje-item.js +1 -1
- package/dist/wje-list.js +7 -7
- package/dist/wje-master.js +177 -323
- package/dist/wje-menu-item.js +7 -7
- package/dist/wje-menu-label.js +6 -6
- package/dist/wje-option.js +1 -1
- package/dist/wje-popup.js +1 -1
- package/dist/wje-rate.js +2 -2
- package/dist/wje-reorder-dropzone.js +27 -0
- package/dist/wje-reorder-item.js +32 -0
- package/dist/wje-reorder.js +104 -0
- package/dist/wje-select.js +1 -1
- package/dist/wje-tab.js +7 -7
- package/dist/wje-textarea.js +18 -18
- package/dist/wje-thumbnail.js +13 -13
- package/package.json +1 -1
package/dist/wje-dialog.js
CHANGED
|
@@ -3,8 +3,8 @@ var f = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writab
|
|
|
3
3
|
var s = (o, t, e) => (f(o, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import v, { event as p } from "./wje-element.js";
|
|
5
5
|
import "./wje-icon.js";
|
|
6
|
-
const x = ':host
|
|
7
|
-
class
|
|
6
|
+
const x = ':host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wje-dialog-padding);padding-top:var(--wje-dialog-padding);padding-bottom:var(--wje-dialog-padding);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wje-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wje-dialog-padding);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wje-dialog-padding-inline);padding-top:var(--wje-dialog-padding-top);padding-bottom:var(--wje-dialog-padding-bottom)}dialog::backdrop{opacity:var(--wje-backdrop-opacity);background-color:var(--wje-backdrop)}dialog:focus-visible{outline:none}:host(.separator) .dialog-header:after{content:"";height:1px;background:#00000014;left:var(--wje-dialog-padding);right:var(--wje-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wje-dialog-width);height:var(--wje-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wje-dialog-border-radius);border-width:var(--wje-dialog-border-width);border-style:var(--wje-dialog-border-style);border-color:var(--wje-dialog-border-color);margin-top:var(--wje-dialog-margin-top);margin-bottom:var(--wje-dialog-margin-bottom);margin-inline:var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);padding:0}:host(.stick-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 0 0 8px 8px;--wje-dialog-border-width: 0 1px 1px 1px;--wje-dialog-margin-top: 0;--wje-dialog-translate-from: translateY(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 8px;--wje-dialog-border-width: 1px;--wje-dialog-opacity-from: 0;--wje-dialog-translate-from: scale(.9);--wje-dialog-translate-to: scale(1)}:host(.fill-in){--wje-dialog-width: 100%;--wje-dialog-height: 100%;--wje-dialog-border-radius: 0 0 0 0 !important;--wje-dialog-border-width: 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0;--wje-dialog-translate-from: scale(.95);--wje-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wje-dialog-width);min-height:var(--wje-dialog-height)}:host(.slide-left){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 1px 0 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-right){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 0 0 1px;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(110%);--wje-dialog-template-to: translateX(0)}:host(.small){--wje-dialog-width: 300px !important}:host(.medium){--wje-dialog-width: 500px !important}:host(.large){--wje-dialog-width: 600px !important}:host(.ex-large){--wje-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wje-dialog-opacity-from, 1);transform:var(--wje-dialog-translate-from)}to{opacity:1;transform:var(--wje-dialog-translate-to)}}';
|
|
7
|
+
class j extends v {
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
10
|
s(this, "className", "Dialog");
|
|
@@ -41,7 +41,7 @@ class c extends v {
|
|
|
41
41
|
this.isShadowRoot = "open";
|
|
42
42
|
}
|
|
43
43
|
draw(e, g, r) {
|
|
44
|
-
let
|
|
44
|
+
let m = document.createDocumentFragment();
|
|
45
45
|
this.classList.add("fade", this.placement, r.size);
|
|
46
46
|
let b = document.createElement("slot"), a = document.createElement("dialog");
|
|
47
47
|
a.classList.add("modal-dialog");
|
|
@@ -53,14 +53,14 @@ class c extends v {
|
|
|
53
53
|
}), i.appendChild(h);
|
|
54
54
|
let d = document.createElement("div");
|
|
55
55
|
d.setAttribute("part", "header"), d.classList.add("dialog-header"), this.hasAttribute("headline") && (d.innerHTML = `<span>${this.headline}</span>`), d.appendChild(i);
|
|
56
|
-
let
|
|
57
|
-
|
|
56
|
+
let w = document.createElement("slot");
|
|
57
|
+
w.setAttribute("name", "header"), d.appendChild(w);
|
|
58
58
|
let n = document.createElement("div");
|
|
59
59
|
n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(b);
|
|
60
60
|
let l = document.createElement("div");
|
|
61
61
|
l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
|
|
62
|
-
let
|
|
63
|
-
return
|
|
62
|
+
let c = document.createElement("slot");
|
|
63
|
+
return c.setAttribute("name", "footer"), l.appendChild(c), a.appendChild(d), a.appendChild(n), a.appendChild(l), m.appendChild(a), this.dialog = a, m;
|
|
64
64
|
}
|
|
65
65
|
close() {
|
|
66
66
|
this.onClose();
|
|
@@ -80,7 +80,7 @@ class c extends v {
|
|
|
80
80
|
p.removeElement(this.button), p.removeElement(this.dialog);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
j.define("wje-dialog", j);
|
|
84
84
|
export {
|
|
85
|
-
|
|
85
|
+
j as default
|
|
86
86
|
};
|
package/dist/wje-divider.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var o = (r, e, t) => (
|
|
1
|
+
var n = Object.defineProperty;
|
|
2
|
+
var l = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
|
|
3
|
+
var o = (r, e, t) => (l(r, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
4
|
import c from "./wje-element.js";
|
|
5
|
-
const v = ":host
|
|
6
|
-
class
|
|
5
|
+
const v = ":host(:not([vertical])){display:block;border-top:var(--wje-divider-border-width) var(--wje-divider-border-style) var(--wje-divider-border-color);margin:var(--wje-divider-spacing) 0}:host([vertical]){display:inline-block;height:100%;border-left:var(--wje-divider-border-width) var(--wje-divider-border-style) var(--wje-divider-border-color);margin:0 var(--wje-divider-spacing)}";
|
|
6
|
+
class a extends c {
|
|
7
7
|
/**
|
|
8
8
|
* Constructor for the Divider class.
|
|
9
9
|
*/
|
|
@@ -42,12 +42,12 @@ class s extends c {
|
|
|
42
42
|
* @param {Object} params - The parameters for drawing.
|
|
43
43
|
* @returns {DocumentFragment} The created document fragment.
|
|
44
44
|
*/
|
|
45
|
-
draw(t,
|
|
46
|
-
let i = document.createDocumentFragment(), d = document.createElement("div"),
|
|
47
|
-
return d.appendChild(
|
|
45
|
+
draw(t, m, p) {
|
|
46
|
+
let i = document.createDocumentFragment(), d = document.createElement("div"), s = document.createElement("slot");
|
|
47
|
+
return d.appendChild(s), i.appendChild(d), i;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
a.define("wje-divider", a);
|
|
51
51
|
export {
|
|
52
|
-
|
|
52
|
+
a as default
|
|
53
53
|
};
|
package/dist/wje-dropdown.js
CHANGED
|
@@ -2,7 +2,7 @@ var d = Object.defineProperty;
|
|
|
2
2
|
var u = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
3
|
var i = (r, t, e) => (u(r, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import m, { event as a } from "./wje-element.js";
|
|
5
|
-
import { P as w } from "./popup.element-
|
|
5
|
+
import { P as w } from "./popup.element-CpEjis9f.js";
|
|
6
6
|
class h extends m {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
@@ -6,8 +6,8 @@ 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
|
|
10
|
-
const
|
|
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
11
|
class g extends v {
|
|
12
12
|
/**
|
|
13
13
|
* Creates an instance of FileUploadItem.
|
|
@@ -24,7 +24,7 @@ class g extends v {
|
|
|
24
24
|
"wje-format-digital": E,
|
|
25
25
|
"wje-button": z,
|
|
26
26
|
"wje-slider": A,
|
|
27
|
-
"wje-icon":
|
|
27
|
+
"wje-icon": y
|
|
28
28
|
});
|
|
29
29
|
m(this, "className", "FileUploadItem");
|
|
30
30
|
/**
|
|
@@ -42,7 +42,7 @@ class g extends v {
|
|
|
42
42
|
* @returns {CSSStyleSheet}
|
|
43
43
|
*/
|
|
44
44
|
static get cssStyleSheet() {
|
|
45
|
-
return
|
|
45
|
+
return C;
|
|
46
46
|
}
|
|
47
47
|
/**
|
|
48
48
|
* Returns the list of attributes to observe for changes.
|
|
@@ -91,16 +91,16 @@ class g extends v {
|
|
|
91
91
|
u.classList.add("name"), u.innerText = this.name;
|
|
92
92
|
let d = document.createElement("slot");
|
|
93
93
|
d.classList.add("actions"), d.setAttribute("name", "action");
|
|
94
|
-
let
|
|
95
|
-
|
|
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
96
|
let o = document.createElement("span");
|
|
97
97
|
o.classList.add("size");
|
|
98
98
|
let n = document.createElement("wje-format-digital");
|
|
99
99
|
n.setAttribute("value", this.uploaded || 0), n.innerHTML = `<span slot="start">${this.localizer.translate("wj.file.upload.uploaded")}</span>`;
|
|
100
100
|
let c = document.createElement("wje-format-digital");
|
|
101
101
|
c.setAttribute("value", this.size || 0), c.innerHTML = `<span slot="start"> ${this.localizer.translate("wj.file.upload.from")} </span>`;
|
|
102
|
-
let
|
|
103
|
-
return
|
|
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
104
|
}
|
|
105
105
|
/**
|
|
106
106
|
* Called after the component has been drawn.
|
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-CpEjis9f.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
|
/**
|
package/dist/wje-icon.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var g = Object.defineProperty;
|
|
2
|
+
var w = (e, t, r) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
|
|
3
|
+
var d = (e, t, r) => (w(e, typeof t != "symbol" ? t + "" : t, r), r);
|
|
4
4
|
import m from "./wje-element.js";
|
|
5
|
-
const n = /* @__PURE__ */ new Map(),
|
|
6
|
-
let
|
|
7
|
-
const j = (e) => c(e) && (e = e.trim(),
|
|
5
|
+
const n = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
|
|
6
|
+
let l;
|
|
7
|
+
const j = (e) => c(e) && (e = e.trim(), z(e)) ? e : null, z = (e) => e.length > 0 && /(\/|\.)/.test(e), p = (e) => e.startsWith("data:image/svg+xml"), x = (e) => e.indexOf(";utf8,") !== -1, c = (e) => typeof e == "string", b = (e) => {
|
|
8
8
|
const t = document.createElement("div");
|
|
9
9
|
t.innerHTML = e;
|
|
10
10
|
const r = t.firstElementChild;
|
|
@@ -24,12 +24,12 @@ const j = (e) => c(e) && (e = e.trim(), v(e)) ? e : null, v = (e) => e.length >
|
|
|
24
24
|
}
|
|
25
25
|
return !0;
|
|
26
26
|
}, y = (e, t) => {
|
|
27
|
-
let r =
|
|
27
|
+
let r = v.get(e);
|
|
28
28
|
if (!r)
|
|
29
29
|
if (typeof fetch < "u" && typeof document < "u")
|
|
30
|
-
if (p(e) &&
|
|
31
|
-
|
|
32
|
-
const s =
|
|
30
|
+
if (p(e) && x(e)) {
|
|
31
|
+
l || (l = new DOMParser());
|
|
32
|
+
const s = l.parseFromString(e, "text/html").querySelector("svg");
|
|
33
33
|
return s && n.set(e, s.outerHTML), Promise.resolve();
|
|
34
34
|
} else
|
|
35
35
|
r = fetch(e).then((o) => {
|
|
@@ -38,19 +38,19 @@ const j = (e) => c(e) && (e = e.trim(), v(e)) ? e : null, v = (e) => e.length >
|
|
|
38
38
|
s && t !== !1 && (s = b(s)), n.set(e, s || "");
|
|
39
39
|
});
|
|
40
40
|
n.set(e, "");
|
|
41
|
-
}),
|
|
41
|
+
}), v.set(e, r);
|
|
42
42
|
else
|
|
43
43
|
return n.set(e, ""), Promise.resolve();
|
|
44
44
|
return r;
|
|
45
|
-
},
|
|
45
|
+
}, k = (e) => {
|
|
46
46
|
let t = j(e.src);
|
|
47
|
-
return t || (t =
|
|
48
|
-
},
|
|
47
|
+
return t || (t = L(e.name), t ? S(t, e.hasAttribute("filled")) : null);
|
|
48
|
+
}, L = (e) => !c(e) || e.trim() === "" || e.replace(/[a-z]|-|\d/gi, "") !== "" ? null : e, S = (e, t = !1) => {
|
|
49
49
|
const r = `/assets/img/icons/${t ? "filled" : "outline"}/${e}.svg`;
|
|
50
50
|
let o = new URL(import.meta.url), s = o.pathname, i = s.substring(0, s.lastIndexOf("/"));
|
|
51
51
|
return new URL(o.origin + i + r).href;
|
|
52
|
-
},
|
|
53
|
-
class
|
|
52
|
+
}, E = '.native-icon{display:flex;align-items:center;width:var(--wje-icon-size);height:var(--wje-icon-size)}svg{width:100%;height:100%;stroke-width:var(--wje-icon-stroke);color:var(--wje-icon-color)}:host([stroke="1"]){--wje-icon-stroke: 1}:host([stroke="1.25"]){--wje-icon-stroke: 1.25}:host([stroke="1.5"]){--wje-icon-stroke: 1.5}:host([stroke="1.75"]){--wje-icon-stroke: 1.75}:host([stroke="2"]){--wje-icon-stroke: 2}:host([size="x-small"]){--wje-icon-size: var(--wje-size-x-small)}:host([size="small"]){--wje-icon-size: var(--wje-size-small)}:host([size="medium"]){--wje-icon-size: var(--wje-size-medium)}:host([size="large"]){--wje-icon-size: var(--wje-size-large)}:host([size="x-large"]){--wje-icon-size: var(--wje-size-x-large)}:host([size="2x-large"]){--wje-icon-size: var(--wje-size-2x-large)}:host([size="3x-large"]){--wje-icon-size: var(--wje-size-3x-large)}:host([size="4x-large"]){--wje-icon-size: var(--wje-size-4x-large)}:host([color="primary"]) .native-icon{color:var(--wje-color-primary-11)}:host([color="complete"]) .native-icon{color:var(--wje-color-complete-11)}:host([color="success"]) .native-icon{color:var(--wje-color-success-11)}:host([color="warning"]) .native-icon{color:var(--wje-color-warning-11)}:host([color="danger"]) .native-icon{color:var(--wje-color-danger-11)}:host([color="info"]) .native-icon{color:var(--wje-color-info-11)}:host([color="menu"]) .native-icon{color:var(--wje-color-contrast-11)}';
|
|
53
|
+
class u extends m {
|
|
54
54
|
/**
|
|
55
55
|
* Creates an instance of IconElement.
|
|
56
56
|
*
|
|
@@ -58,7 +58,7 @@ class w extends m {
|
|
|
58
58
|
*/
|
|
59
59
|
constructor() {
|
|
60
60
|
super();
|
|
61
|
-
|
|
61
|
+
d(this, "className", "Icon");
|
|
62
62
|
}
|
|
63
63
|
/**
|
|
64
64
|
* Returns the CSS styles for the component.
|
|
@@ -67,7 +67,7 @@ class w extends m {
|
|
|
67
67
|
* @returns {CSSStyleSheet}
|
|
68
68
|
*/
|
|
69
69
|
static get cssStyleSheet() {
|
|
70
|
-
return
|
|
70
|
+
return E;
|
|
71
71
|
}
|
|
72
72
|
/**
|
|
73
73
|
* Returns the list of attributes to observe for changes.
|
|
@@ -94,7 +94,9 @@ class w extends m {
|
|
|
94
94
|
*/
|
|
95
95
|
draw(r, o, s) {
|
|
96
96
|
let i = document.createDocumentFragment();
|
|
97
|
-
|
|
97
|
+
this.classList.add("lazy-loaded-image", "lazy");
|
|
98
|
+
let a = document.createElement("div");
|
|
99
|
+
return a.setAttribute("part", "native"), a.classList.add("native-icon"), this.url = k(this), i.appendChild(a), this.native = a, i;
|
|
98
100
|
}
|
|
99
101
|
/**
|
|
100
102
|
* Called after the component has been drawn.
|
|
@@ -102,16 +104,16 @@ class w extends m {
|
|
|
102
104
|
afterDraw() {
|
|
103
105
|
let r = new IntersectionObserver((o, s) => {
|
|
104
106
|
o.forEach((i) => {
|
|
105
|
-
i.isIntersecting && (y(this.url).then((
|
|
106
|
-
var
|
|
107
|
-
this.
|
|
107
|
+
i.isIntersecting && (y(this.url).then((a) => {
|
|
108
|
+
var h;
|
|
109
|
+
this.native.innerHTML = n == null ? void 0 : n.get(this.url), (h = this.native.querySelector("svg")) == null || h.setAttribute("part", "svg");
|
|
108
110
|
}), this.classList.remove("lazy"), r.unobserve(i.target));
|
|
109
111
|
});
|
|
110
112
|
});
|
|
111
|
-
r.observe(this.
|
|
113
|
+
r.observe(this.native);
|
|
112
114
|
}
|
|
113
115
|
}
|
|
114
|
-
|
|
116
|
+
u.define("wje-icon", u);
|
|
115
117
|
export {
|
|
116
|
-
|
|
118
|
+
u as default
|
|
117
119
|
};
|
package/dist/wje-img-comparer.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
1
|
+
var f = Object.defineProperty;
|
|
2
|
+
var h = (i, e, t) => e in i ? f(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
|
|
3
|
+
var c = (i, e, t) => (h(i, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
|
+
import w from "./wje-element.js";
|
|
5
5
|
import g from "./wje-icon.js";
|
|
6
|
-
function
|
|
6
|
+
function b(i, e) {
|
|
7
7
|
function t(o) {
|
|
8
|
-
const d = i.getBoundingClientRect(), r = i.ownerDocument.defaultView, n = d.left + r.pageXOffset, m = d.top + r.pageYOffset,
|
|
9
|
-
e != null && e.onMove && e.onMove(
|
|
8
|
+
const d = i.getBoundingClientRect(), r = i.ownerDocument.defaultView, n = d.left + r.pageXOffset, m = d.top + r.pageYOffset, s = o.pageX - n, p = o.pageY - m;
|
|
9
|
+
e != null && e.onMove && e.onMove(s, p);
|
|
10
10
|
}
|
|
11
11
|
function a() {
|
|
12
12
|
document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", a), e != null && e.onStop && e.onStop();
|
|
13
13
|
}
|
|
14
14
|
document.addEventListener("pointermove", t, { passive: !0 }), document.addEventListener("pointerup", a), (e == null ? void 0 : e.initialEvent) instanceof PointerEvent && t(e.initialEvent);
|
|
15
15
|
}
|
|
16
|
-
const
|
|
17
|
-
class
|
|
16
|
+
const j = ':host{display:inline-block;position:relative;width:100%;border-color:var(--wje-border-color);border-style:solid;border-width:1px}.wje-before,.wje-after{display:block}.wje-after{position:absolute;top:0;left:0;height:100%;width:100%;clip-path:var(--wje-img-compare-clip-path)}.native-split-view{max-width:100%;max-height:100%;overflow:hidden}.wje-divider{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;background-color:var(--wje-img-compare-divider-background);height:100%;width:var(--wje-img-compare-divider-size);cursor:col-resize;top:0;left:var(--wje-img-compare-divider-left)}.wje-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wje-img-compare-divider-area) / -2 + var(--wje-img-compare-divider-size) / 2);width:var(---wje-img-compare-divider-area)}.wje-divider wje-icon{position:absolute;background-color:#fff;padding:.5rem;color:var(--wje-color-dark);border-radius:var(--wje-border-radius-circle);box-shadow:#523f6933 0 0 30px 10px;background:var(--wje-color-white)!important}';
|
|
17
|
+
class u extends w {
|
|
18
18
|
/**
|
|
19
19
|
* Creates an instance of ImgComparer.
|
|
20
20
|
*
|
|
@@ -27,18 +27,18 @@ class w extends h {
|
|
|
27
27
|
*
|
|
28
28
|
* @property {Object} depandencies
|
|
29
29
|
*/
|
|
30
|
-
|
|
30
|
+
c(this, "depandencies", {
|
|
31
31
|
"wje-icon": g
|
|
32
32
|
});
|
|
33
|
-
|
|
33
|
+
c(this, "className", "ImgComparer");
|
|
34
34
|
/**
|
|
35
35
|
* Handles the drag event.
|
|
36
36
|
*
|
|
37
37
|
* @param {Event} e - The event.
|
|
38
38
|
*/
|
|
39
|
-
|
|
39
|
+
c(this, "handleDrag", (t) => {
|
|
40
40
|
const { width: a } = this.native.getBoundingClientRect();
|
|
41
|
-
|
|
41
|
+
b(this, {
|
|
42
42
|
onMove: (o) => {
|
|
43
43
|
let d = o / a * 100;
|
|
44
44
|
this.position = parseFloat(this.clamp(d, 0, 100).toFixed(2)), this.native.style.setProperty("--wje-img-compare-divider-left", this.position + "%"), this.native.style.setProperty("--wje-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
|
|
@@ -54,7 +54,7 @@ class w extends h {
|
|
|
54
54
|
* @param {number} max - The maximum value.
|
|
55
55
|
* @returns {number} The clamped number.
|
|
56
56
|
*/
|
|
57
|
-
|
|
57
|
+
c(this, "clamp", (t, a, o) => Math.min(Math.max(t, a), o));
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
60
|
* Returns the CSS styles for the component.
|
|
@@ -63,7 +63,7 @@ class w extends h {
|
|
|
63
63
|
* @returns {CSSStyleSheet}
|
|
64
64
|
*/
|
|
65
65
|
static get cssStyleSheet() {
|
|
66
|
-
return
|
|
66
|
+
return j;
|
|
67
67
|
}
|
|
68
68
|
/**
|
|
69
69
|
* Returns the list of attributes to observe for changes.
|
|
@@ -95,17 +95,17 @@ class w extends h {
|
|
|
95
95
|
n.classList.add("wje-before");
|
|
96
96
|
let m = document.createElement("slot");
|
|
97
97
|
m.setAttribute("name", "before");
|
|
98
|
-
let
|
|
99
|
-
|
|
98
|
+
let s = document.createElement("div");
|
|
99
|
+
s.classList.add("wje-after");
|
|
100
100
|
let p = document.createElement("slot");
|
|
101
101
|
p.setAttribute("name", "after");
|
|
102
102
|
let v = document.createElement("wje-icon");
|
|
103
103
|
v.setAttribute("name", "arrow-bar-both");
|
|
104
|
-
let
|
|
105
|
-
return
|
|
104
|
+
let l = document.createElement("div");
|
|
105
|
+
return l.classList.add("wje-divider"), l.setAttribute("part", "divider"), l.addEventListener("mousedown", this.handleDrag, !1), n.appendChild(m), s.appendChild(p), l.appendChild(v), r.appendChild(n), r.appendChild(s), r.appendChild(l), d.appendChild(r), this.native = r, d;
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
|
|
108
|
+
u.define("wje-img-comparer", u);
|
|
109
109
|
export {
|
|
110
|
-
|
|
110
|
+
u as default
|
|
111
111
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var p = (o, r, t) => r in o ?
|
|
1
|
+
var g = Object.defineProperty;
|
|
2
|
+
var p = (o, r, t) => r in o ? g(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
|
|
3
3
|
var h = (o, r, t) => (p(o, typeof r != "symbol" ? r + "" : r, t), t);
|
|
4
4
|
import f, { WjElementUtils as w, event as d } from "./wje-element.js";
|
|
5
|
-
const y = ":host{
|
|
6
|
-
class
|
|
5
|
+
const y = ":host{overflow-x:auto;width:var(--wje-infinite-scroll-width);height:var(--wje-infinite-scroll-height);display:block}.loading{position:sticky;display:none;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;z-index:9999;background-color:var(--wje-infinite-scroll-loading-bg)}.loading.show{display:flex}[name=ending]{display:none;margin-top:1rem;text-align:center}[name=ending].show{display:block}";
|
|
6
|
+
class u extends f {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of InfiniteScroll.
|
|
9
9
|
*
|
|
@@ -38,10 +38,10 @@ class g extends f {
|
|
|
38
38
|
let i = this, s = i.match(/\{{.*?\}}/g);
|
|
39
39
|
if (s)
|
|
40
40
|
for (let n of s) {
|
|
41
|
-
let c = n.replace("{{", "").replace("}}", ""),
|
|
42
|
-
c.split(".").forEach((
|
|
43
|
-
|
|
44
|
-
}), i = i.replace(n,
|
|
41
|
+
let c = n.replace("{{", "").replace("}}", ""), l = "";
|
|
42
|
+
c.split(".").forEach((a) => {
|
|
43
|
+
l = l == "" ? e[a] : l[a];
|
|
44
|
+
}), i = i.replace(n, l);
|
|
45
45
|
}
|
|
46
46
|
return i;
|
|
47
47
|
};
|
|
@@ -110,14 +110,14 @@ class g extends f {
|
|
|
110
110
|
draw(t, e, i) {
|
|
111
111
|
let s = document.createDocumentFragment(), n = document.createElement("div");
|
|
112
112
|
n.classList.add("native"), n.setAttribute("part", "native-infinite-scroll");
|
|
113
|
-
let c = document.createElement("slot"),
|
|
114
|
-
if (
|
|
115
|
-
let
|
|
116
|
-
|
|
113
|
+
let c = document.createElement("slot"), l = document.createElement("slot");
|
|
114
|
+
if (l.setAttribute("name", "ending"), w.hasSlot(this, "loader")) {
|
|
115
|
+
let a = document.createElement("div");
|
|
116
|
+
a.classList.add("loading");
|
|
117
117
|
let m = document.createElement("slot");
|
|
118
|
-
m.setAttribute("name", "loader"),
|
|
118
|
+
m.setAttribute("name", "loader"), a.appendChild(m), this.loadingEl = a, s.appendChild(a);
|
|
119
119
|
}
|
|
120
|
-
return n.appendChild(c), n.appendChild(
|
|
120
|
+
return n.appendChild(c), n.appendChild(l), s.appendChild(n), this.endingEl = l, s;
|
|
121
121
|
}
|
|
122
122
|
/**
|
|
123
123
|
* Called after the component has been drawn.
|
|
@@ -175,8 +175,8 @@ class g extends f {
|
|
|
175
175
|
const i = new DOMParser();
|
|
176
176
|
let s = this;
|
|
177
177
|
this.hasAttribute("placement") && (s = this.querySelector(this.placement)), d.dispatchCustomEvent(this, "wje-infinite-scroll:load", e), this.response = e, e[this.objectName].forEach((n) => {
|
|
178
|
-
const c = this.infiniteScrollTemplate.interpolate(n),
|
|
179
|
-
d.addListener(
|
|
178
|
+
const c = this.infiniteScrollTemplate.interpolate(n), a = i.parseFromString(c, "text/html").activeElement.firstElementChild;
|
|
179
|
+
d.addListener(a, "click", "wje-infinite-scroll:click-item", null), s.insertAdjacentElement("beforeend", a);
|
|
180
180
|
}), this.isLoading.push(t);
|
|
181
181
|
} else
|
|
182
182
|
d.dispatchCustomEvent(this, "wje-infinite-scroll:complete"), this.endingEl.classList.add("show");
|
|
@@ -187,7 +187,7 @@ class g extends f {
|
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
|
-
|
|
190
|
+
u.define("wje-infinite-scroll", u);
|
|
191
191
|
export {
|
|
192
|
-
|
|
192
|
+
u as default
|
|
193
193
|
};
|
package/dist/wje-item.js
CHANGED
|
@@ -2,7 +2,7 @@ var d = Object.defineProperty;
|
|
|
2
2
|
var l = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
|
|
3
3
|
var r = (i, t, e) => (l(i, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import m from "./wje-element.js";
|
|
5
|
-
const p = ':host{--wje-border-width: 0 0 1px 0;--wje-item-background: transparent;--wje-item-background-hover: var(--wje-color-contrast-3);--wje-item-padding-top: 0px;--wje-item-padding-bottom: 0px;--wje-item-padding-end: 0px;--wje-item-padding-start: 0px;--wje-item-inner-border-width: 0 0 1px 0;--wje-item-inner-padding-top: 0px;--wje-item-inner-padding-bottom: 0px;--wje-item-inner-padding-start: 0px;--wje-item-inner-padding-end: 0px;--wje-item-inner-box-shadow: none;--wje-item-min-height: 40px;--wje-item-transition: opacity 15ms linear, background-color 15ms linear;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--wje-item-color);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wje-item-border-radius);padding-top:var(--wje-item-padding-top);padding-bottom:var(--wje-item-padding-bottom);padding-inline:var(--wje-item-padding-start) var(--wje-item-padding-end);margin:0;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wje-item-min-height);transition:var(--wje-item-transition);outline:none;background:var(--wje-item-background);overflow:inherit;box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wje-item-color)}.item-native .item-inner{margin:0;padding:var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wje-border-width);border-style:var(--wje-border-style);border-color:var(--wje-border-color);box-shadow:var(--wje-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);display:flex;justify-content:space-between}@media (any-hover: hover){:host(:hover) .item-native{color:var(--wje-item-color)}:host(:hover) .item-native :after{transition:var(--wje-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wje-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot=start]){margin-inline:0 1rem}::slotted(wje-label:not([slot=end])){flex:1 1 0}';
|
|
5
|
+
const p = ':host{--wje-border-width: 0 0 1px 0;--wje-item-background: transparent;--wje-item-background-hover: var(--wje-color-contrast-3);--wje-item-padding-top: 0px;--wje-item-padding-bottom: 0px;--wje-item-padding-end: 0px;--wje-item-padding-start: 0px;--wje-item-inner-border-width: 0 0 1px 0;--wje-item-inner-padding-top: 0px;--wje-item-inner-padding-bottom: 0px;--wje-item-inner-padding-start: 0px;--wje-item-inner-padding-end: 0px;--wje-item-inner-box-shadow: none;--wje-item-min-height: 40px;--wje-item-transition: opacity 15ms linear, background-color 15ms linear;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--wje-item-color);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wje-item-border-radius);padding-top:var(--wje-item-padding-top);padding-bottom:var(--wje-item-padding-bottom);padding-inline:var(--wje-item-padding-start) var(--wje-item-padding-end);margin:0;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wje-item-min-height);transition:var(--wje-item-transition);outline:none;background:var(--wje-item-background);overflow:inherit;box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wje-item-color)}.item-native .item-inner{margin:0;padding:var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wje-border-width);border-style:var(--wje-border-style);border-color:var(--wje-border-color);box-shadow:var(--wje-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);display:flex;justify-content:space-between}@media (any-hover: hover){:host(:hover) .item-native{color:var(--wje-item-color)}:host(:hover) .item-native :after{transition:var(--wje-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wje-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot="start"]){margin-inline:0 1rem}::slotted(wje-label:not([slot="end"])){flex:1 1 0}';
|
|
6
6
|
class a extends m {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
package/dist/wje-list.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var o = Object.defineProperty;
|
|
2
2
|
var l = (e, t, s) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
|
|
3
|
-
var
|
|
3
|
+
var n = (e, t, s) => (l(e, typeof t != "symbol" ? t + "" : t, s), s);
|
|
4
4
|
import d from "./wje-element.js";
|
|
5
|
-
const c = ":host{
|
|
6
|
-
class
|
|
5
|
+
const c = ":host{margin:0;padding:0;display:block;contain:content;list-style-type:none}:host(.wje-inset){background:var(--wje-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wje-list-inset-padding);border-radius:var(--wje-list-border-radius)}:host(.wje-lines-none) ::slotted(wje-item){--wje-border-width: 0 !important}";
|
|
6
|
+
class r extends d {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of List.
|
|
9
9
|
*
|
|
@@ -11,7 +11,7 @@ class n extends d {
|
|
|
11
11
|
*/
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
|
-
|
|
14
|
+
n(this, "className", "List");
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
17
|
* Returns the CSS styles for the component.
|
|
@@ -36,7 +36,7 @@ class n extends d {
|
|
|
36
36
|
* @param {Object} params - The parameters for drawing.
|
|
37
37
|
* @returns {DocumentFragment}
|
|
38
38
|
*/
|
|
39
|
-
draw(s,
|
|
39
|
+
draw(s, h, m) {
|
|
40
40
|
let i = document.createDocumentFragment(), a = document.createElement("slot");
|
|
41
41
|
return i.appendChild(a), i;
|
|
42
42
|
}
|
|
@@ -47,7 +47,7 @@ class n extends d {
|
|
|
47
47
|
this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines")), this.classList.toggle("wje-inset", this.hasAttribute("inset"));
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
r.define("wje-list", r);
|
|
51
51
|
export {
|
|
52
|
-
|
|
52
|
+
r as default
|
|
53
53
|
};
|