wj-elements 0.1.8 → 0.1.10
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-button.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var b = Object.defineProperty;
|
|
2
|
-
var j = (
|
|
3
|
-
var s = (
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
class
|
|
2
|
+
var j = (e, a, o) => a in e ? b(e, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[a] = o;
|
|
3
|
+
var s = (e, a, o) => (j(e, typeof a != "symbol" ? a + "" : a, o), o);
|
|
4
|
+
import g, { WjElementUtils as p, event as i } from "./wje-element.js";
|
|
5
|
+
import h from "./wje-icon.js";
|
|
6
|
+
const u = (e) => e === "false" || e === "null" || e === "NaN" || e === "undefined" || e === "0" ? !1 : !!e, v = '.wje-button-solid.wje-color-primary{background-color:var(--wje-color-primary-10);border-color:var(--wje-color-primary-11);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary{background-color:var(--wje-button-background-color);border-color:var(--wje-color-primary-6);color:var(--wje-color-primary-6)}.wje-button-solid.wje-color-complete{background-color:var(--wje-color-complete-10);border-color:var(--wje-color-complete-11);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete{border-color:var(--wje-color-complete-6);color:var(--wje-color-complete-6)}.wje-button-solid.wje-color-success{background-color:var(--wje-color-success-10);border-color:var(--wje-color-success-11);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success{border-color:var(--wje-color-success-6);color:var(--wje-color-success-6)}.wje-button-solid.wje-color-warning{background-color:var(--wje-color-warning-10);border-color:var(--wje-color-warning-11);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning{border-color:var(--wje-color-warning-6);color:var(--wje-color-warning-6)}.wje-button-solid.wje-color-danger{background-color:var(--wje-color-danger-10);border-color:var(--wje-color-danger-11);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger{border-color:var(--wje-color-danger-6);color:var(--wje-color-danger-6)}.wje-button-solid.wje-color-neutral{background-color:var(--wje-color-contrast-10);border-color:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-neutral{border-color:var(--wje-color-contrast-6);color:var(--wje-color-contrast-6)}.wje-button-solid.wje-color-default{background-color:transparent;border-color:var(--wje-color-contrast-4);color:var(--wje-color-contrast-11)}.wje-button-outline.wje-color-default{border-color:var(--wje-color-contrast-4);color:var(--wje-color-contrast-11)}:host{--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.native-button{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);outline:var(--wje-button-outline);background-color:transparent;line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end)}@media (any-hover: hover){.wje-button-solid.wje-color-primary:hover{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary:hover{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-11);color:var(--wje-color-primary-11)}.wje-button-solid.wje-color-complete:hover{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete:hover{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-11);color:var(--wje-color-complete-11)}.wje-button-solid.wje-color-success:hover{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success:hover{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-11);color:var(--wje-color-success-11)}.wje-button-solid.wje-color-warning:hover{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-10);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning:hover{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11)}.wje-button-solid.wje-color-danger:hover{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger:hover{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-11);color:var(--wje-color-danger-11)}.wje-button-solid.wje-color-neutral:hover{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-neutral:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-11);color:var(--wje-color-contrast-11)}.wje-button-solid.wje-color-default:hover,.wje-button-outline.wje-color-default:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-2);color:var(--wje-color-contrast-9)}.wje-button-link:hover{background-color:var(--wje-color-contrast-1);border-color:transparent;color:var(--wje-color-contrast-9)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}.wje-button-link{border-width:1px;border-color:transparent;background-color:transparent}.wje-button-disabled{cursor:default;opacity:.5;pointer-events:none}.wje-button-round{border-radius:var(--wje-border-radius-pill)}.wje-button-circle{border-radius:var(--wje-border-radius-circle);aspect-ratio:1/1}.wje-button-large{--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}.wje-button-small{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .native-button{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
|
|
7
|
+
class w extends g {
|
|
8
8
|
/**
|
|
9
9
|
* Button constructor
|
|
10
10
|
* @constructor
|
|
@@ -16,7 +16,7 @@ class d extends h {
|
|
|
16
16
|
* @type {Object}
|
|
17
17
|
*/
|
|
18
18
|
s(this, "depandencies", {
|
|
19
|
-
"wje-icon":
|
|
19
|
+
"wje-icon": h
|
|
20
20
|
});
|
|
21
21
|
/**
|
|
22
22
|
* Class name
|
|
@@ -36,8 +36,8 @@ class d extends h {
|
|
|
36
36
|
* Toggle states method
|
|
37
37
|
*/
|
|
38
38
|
s(this, "toggleStates", () => {
|
|
39
|
-
this.slotToggle.assignedNodes().filter((
|
|
40
|
-
|
|
39
|
+
this.slotToggle.assignedNodes().filter((c) => c.nodeType === Node.ELEMENT_NODE).forEach((c) => {
|
|
40
|
+
c.classList.contains("show") ? c.classList.remove("show") : c.classList.add("show");
|
|
41
41
|
});
|
|
42
42
|
});
|
|
43
43
|
}
|
|
@@ -102,14 +102,14 @@ class d extends h {
|
|
|
102
102
|
* @param {boolean} value - The value to set
|
|
103
103
|
*/
|
|
104
104
|
set stopPropagation(o) {
|
|
105
|
-
this.setAttribute("stop-propagation",
|
|
105
|
+
this.setAttribute("stop-propagation", u(o));
|
|
106
106
|
}
|
|
107
107
|
/**
|
|
108
108
|
* Get stop propagation
|
|
109
109
|
* @returns {boolean} stopPropagation - The stop propagation
|
|
110
110
|
*/
|
|
111
111
|
get stopPropagation() {
|
|
112
|
-
return
|
|
112
|
+
return u(this.getAttribute("stop-propagation"));
|
|
113
113
|
}
|
|
114
114
|
/**
|
|
115
115
|
* Get CSS stylesheet
|
|
@@ -117,7 +117,7 @@ class d extends h {
|
|
|
117
117
|
* @returns {Object} styles - The CSS styles
|
|
118
118
|
*/
|
|
119
119
|
static get cssStyleSheet() {
|
|
120
|
-
return
|
|
120
|
+
return v;
|
|
121
121
|
}
|
|
122
122
|
/**
|
|
123
123
|
* Get observed attributes
|
|
@@ -140,23 +140,21 @@ class d extends h {
|
|
|
140
140
|
* @param {Object} params - The parameters
|
|
141
141
|
* @returns {Object} fragment - The document fragment
|
|
142
142
|
*/
|
|
143
|
-
draw(o,
|
|
144
|
-
let
|
|
145
|
-
if (this.classList.remove("wje-button-disabled"), this.disabled &&
|
|
146
|
-
let
|
|
147
|
-
|
|
143
|
+
draw(o, c, m) {
|
|
144
|
+
let d = document.createDocumentFragment(), t = document.createElement(this.hasAttribute("href") ? "a" : "button");
|
|
145
|
+
if (t.classList.add("native-button"), t.setAttribute("part", "native"), this.classList.remove("wje-button-disabled"), this.disabled && t.classList.add("wje-button-disabled"), this.variant && t.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && t.classList.add("wje-button-round"), this.hasAttribute("circle") && t.classList.add("wje-button-circle"), this.outline && t.classList.add("wje-outline"), this.fill && t.classList.add("wje-button-" + this.fill), this.size && t.classList.add("wje-button-" + this.size), this.hasAttribute("color") ? t.classList.add("wje-color-" + this.color, "wje-color") : t.classList.add("wje-color-default", "wje-color"), this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
|
|
146
|
+
let n = document.createElement("wje-icon");
|
|
147
|
+
n.style.setProperty("--wje-icon-size", "14px"), n.setAttribute("slot", "caret"), n.setAttribute("name", "chevron-down"), this.appendChild(n);
|
|
148
148
|
}
|
|
149
149
|
if (this.active) {
|
|
150
150
|
this.classList.add("wje-active");
|
|
151
|
-
let
|
|
152
|
-
|
|
151
|
+
let n = document.createElement("wje-icon");
|
|
152
|
+
n.setAttribute("name", "check"), this.appendChild(n);
|
|
153
153
|
}
|
|
154
|
-
let
|
|
155
|
-
|
|
156
|
-
let
|
|
157
|
-
|
|
158
|
-
let e = document.createElement("slot");
|
|
159
|
-
return e.setAttribute("name", "icon-only"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "start"), n.appendChild(e), e = document.createElement("slot"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "end"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "caret"), n.appendChild(e), this.hasToggle = g.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), c.appendChild(n), u.appendChild(c), u;
|
|
154
|
+
let l = document.createElement("span");
|
|
155
|
+
l.classList.add("button-inner");
|
|
156
|
+
let r = document.createElement("slot");
|
|
157
|
+
return r.setAttribute("name", "icon-only"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), l.appendChild(r), r = document.createElement("slot"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), l.appendChild(r), this.hasToggle = p.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), l.appendChild(this.slotToggle)), t.appendChild(l), d.appendChild(t), d;
|
|
160
158
|
}
|
|
161
159
|
/**
|
|
162
160
|
* After draw method
|
|
@@ -171,7 +169,7 @@ class d extends h {
|
|
|
171
169
|
this.removeEventListener("click", this.eventDialogOpen);
|
|
172
170
|
}
|
|
173
171
|
}
|
|
174
|
-
|
|
172
|
+
w.define("wje-button", w);
|
|
175
173
|
export {
|
|
176
|
-
|
|
174
|
+
w as default
|
|
177
175
|
};
|
package/dist/wje-card-content.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var i = (e, t, o) => t in e ?
|
|
1
|
+
var d = Object.defineProperty;
|
|
2
|
+
var i = (e, t, o) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
|
|
3
3
|
var a = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
|
|
4
|
-
import
|
|
5
|
-
const p = ":host{
|
|
6
|
-
class
|
|
4
|
+
import s from "./wje-element.js";
|
|
5
|
+
const p = ":host{display:block;padding:var(--wje-card-content-padding)}:host.no-padding .row{margin-left:0;margin-right:0}:host.no-bottom-padding{padding-bottom:0}:host.no-top-padding{padding-top:0}:host .title{margin-top:0}:host.scrollable{margin-bottom:20px}:host h3{line-height:34px;font-size:26px}";
|
|
6
|
+
class l extends s {
|
|
7
7
|
/**
|
|
8
8
|
* CardContent constructor
|
|
9
9
|
* @constructor
|
|
@@ -37,12 +37,12 @@ class m extends r {
|
|
|
37
37
|
* @param {Object} params - The parameters
|
|
38
38
|
* @returns {Object} fragment - The document fragment
|
|
39
39
|
*/
|
|
40
|
-
draw(o,
|
|
41
|
-
let n = document.createDocumentFragment(),
|
|
42
|
-
return n.appendChild(
|
|
40
|
+
draw(o, c, m) {
|
|
41
|
+
let n = document.createDocumentFragment(), r = document.createElement("slot");
|
|
42
|
+
return n.appendChild(r), n;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
|
|
45
|
+
s.define("wje-card-content", l);
|
|
46
46
|
export {
|
|
47
|
-
|
|
47
|
+
l as default
|
|
48
48
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var l = Object.defineProperty;
|
|
2
2
|
var i = (e, t, o) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
const c = ":host{
|
|
6
|
-
class
|
|
3
|
+
var s = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
|
|
4
|
+
import n from "./wje-element.js";
|
|
5
|
+
const c = ":host{font-family:var(--wje-card-controls-font-family);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-size:var(--wje-card-controls-font-size);font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40);transition:opacity .3s ease;position:absolute;right:1rem;top:.5rem}";
|
|
6
|
+
class m extends n {
|
|
7
7
|
/**
|
|
8
8
|
* CardControls constructor
|
|
9
9
|
* @constructor
|
|
@@ -14,7 +14,7 @@ class d extends a {
|
|
|
14
14
|
* Class name
|
|
15
15
|
* @type {string}
|
|
16
16
|
*/
|
|
17
|
-
|
|
17
|
+
s(this, "className", "CardControls");
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* Get CSS stylesheet
|
|
@@ -37,12 +37,12 @@ class d extends a {
|
|
|
37
37
|
* @param {Object} params - The parameters
|
|
38
38
|
* @returns {Object} fragment - The document fragment
|
|
39
39
|
*/
|
|
40
|
-
draw(o,
|
|
41
|
-
let r = document.createDocumentFragment(),
|
|
42
|
-
return r.appendChild(
|
|
40
|
+
draw(o, d, p) {
|
|
41
|
+
let r = document.createDocumentFragment(), a = document.createElement("slot");
|
|
42
|
+
return r.appendChild(a), r;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
|
|
45
|
+
n.define("wje-card-controls", m);
|
|
46
46
|
export {
|
|
47
|
-
|
|
47
|
+
m as default
|
|
48
48
|
};
|
package/dist/wje-card-header.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var n = Object.defineProperty;
|
|
2
2
|
var i = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
|
|
3
3
|
var s = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
|
|
4
|
-
import
|
|
5
|
-
const c = ':host{
|
|
6
|
-
class
|
|
4
|
+
import o from "./wje-element.js";
|
|
5
|
+
const c = ':host{background:transparent;border-radius:0;border-bottom:0;padding:var(--wje-card-header-padding);position:relative;display:flex;flex-direction:column}:host(.wje-separator):after{content:"";height:1px;background:#00000014;margin-top:.5rem}';
|
|
6
|
+
class l extends o {
|
|
7
7
|
/**
|
|
8
8
|
* CardHeader constructor.
|
|
9
9
|
*/
|
|
@@ -36,12 +36,12 @@ class m extends d {
|
|
|
36
36
|
* @param {Object} params - The parameters to use.
|
|
37
37
|
* @returns {DocumentFragment} The created document fragment.
|
|
38
38
|
*/
|
|
39
|
-
draw(r, p,
|
|
40
|
-
let a = document.createDocumentFragment(),
|
|
41
|
-
return this.hasAttribute("separator") && this.classList.add("wje-separator"), a.appendChild(
|
|
39
|
+
draw(r, p, m) {
|
|
40
|
+
let a = document.createDocumentFragment(), d = document.createElement("slot");
|
|
41
|
+
return this.hasAttribute("separator") && this.classList.add("wje-separator"), a.appendChild(d), a;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
|
|
44
|
+
o.define("wje-card-header", l);
|
|
45
45
|
export {
|
|
46
|
-
|
|
46
|
+
l as default
|
|
47
47
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var s = (e, t, a) => (
|
|
1
|
+
var o = Object.defineProperty;
|
|
2
|
+
var l = (e, t, a) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
|
|
3
|
+
var s = (e, t, a) => (l(e, typeof t != "symbol" ? t + "" : t, a), a);
|
|
4
4
|
import i from "./wje-element.js";
|
|
5
|
-
const
|
|
6
|
-
class
|
|
5
|
+
const c = ":host{transition:opacity .3s ease;font-family:var(--wje-card-subtitle-font-family);font-size:var(--wje-card-subtitle-font-size);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:var(--wje-card-subtitle-padding);line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}";
|
|
6
|
+
class d extends i {
|
|
7
7
|
/**
|
|
8
8
|
* CardSubtitle constructor.
|
|
9
9
|
*/
|
|
@@ -21,7 +21,7 @@ class c extends i {
|
|
|
21
21
|
* @static
|
|
22
22
|
*/
|
|
23
23
|
static get cssStyleSheet() {
|
|
24
|
-
return
|
|
24
|
+
return c;
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
27
|
* Getter for the observed attributes.
|
|
@@ -44,12 +44,12 @@ class c extends i {
|
|
|
44
44
|
* @param {Object} params - The parameters to use.
|
|
45
45
|
* @returns {DocumentFragment} The created document fragment.
|
|
46
46
|
*/
|
|
47
|
-
draw(a,
|
|
47
|
+
draw(a, m, p) {
|
|
48
48
|
let r = document.createDocumentFragment(), n = document.createElement("slot");
|
|
49
49
|
return r.appendChild(n), r;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
i.define("wje-card-subtitle",
|
|
52
|
+
i.define("wje-card-subtitle", d);
|
|
53
53
|
export {
|
|
54
|
-
|
|
54
|
+
d as default
|
|
55
55
|
};
|
package/dist/wje-card-title.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var l = Object.defineProperty;
|
|
2
|
+
var o = (e, t, r) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
|
|
3
|
+
var i = (e, t, r) => (o(e, typeof t != "symbol" ? t + "" : t, r), r);
|
|
4
4
|
import n from "./wje-element.js";
|
|
5
|
-
const
|
|
5
|
+
const d = ":host{font-size:var(--wje-card-title-font-size);font-weight:var(--wje-card-title-font-weight);margin:var(--wje-card-title-margin);padding:var(--wje-card-title-padding);line-height:var(--wje-card-title-line-height);display:block;position:relative}";
|
|
6
6
|
class c extends n {
|
|
7
7
|
/**
|
|
8
8
|
* CardTitle constructor.
|
|
@@ -13,7 +13,7 @@ class c extends n {
|
|
|
13
13
|
* Class name for the CardTitle.
|
|
14
14
|
* @type {string}
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
i(this, "className", "CardTitle");
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* Getter for the CSS stylesheet.
|
|
@@ -21,7 +21,7 @@ class c extends n {
|
|
|
21
21
|
* @static
|
|
22
22
|
*/
|
|
23
23
|
static get cssStyleSheet() {
|
|
24
|
-
return
|
|
24
|
+
return d;
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
27
|
* Getter for the observed attributes.
|
|
@@ -44,9 +44,9 @@ class c extends n {
|
|
|
44
44
|
* @param {Object} params - The parameters to use.
|
|
45
45
|
* @returns {DocumentFragment} The created document fragment.
|
|
46
46
|
*/
|
|
47
|
-
draw(
|
|
48
|
-
let
|
|
49
|
-
return
|
|
47
|
+
draw(r, m, g) {
|
|
48
|
+
let a = document.createDocumentFragment(), s = document.createElement("slot");
|
|
49
|
+
return a.appendChild(s), a;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
n.define("wje-card-title", c);
|
package/dist/wje-card.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var i = Object.defineProperty;
|
|
2
|
+
var s = (o, r, e) => r in o ? i(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e;
|
|
3
|
+
var n = (o, r, e) => (s(o, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
4
|
import l from "./wje-element.js";
|
|
5
|
-
const
|
|
6
|
-
class
|
|
5
|
+
const w = ":host{width:100%}.native-card{background-color:transparent;margin:0;box-shadow:var(--wje-box-shadow-large);border-color:var(--wje-border-color);border-style:var(--wje-border-style);border-width:var(--wje-border-width);border-radius:var(--wje-border-radius-medium);font-family:var(--wje-font-family);font-size:var(--wje-font-size);line-height:var(--wje-line-height);position:relative;width:100%;word-wrap:normal;display:flex;flex-direction:column;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.native-card.wje-color-primary{background:var(--wje-color-primary-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-complete{background:var(--wje-color-complete-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-success{background:var(--wje-color-success-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-warning{background:var(--wje-color-warning-11);color:var(--wje-color)}.native-card.wje-color-danger{background:var(--wje-color-danger-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-info{background:var(--wje-color-info-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-menu{background:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0)}";
|
|
6
|
+
class v extends l {
|
|
7
7
|
/**
|
|
8
8
|
* Card constructor
|
|
9
9
|
* @constructor
|
|
@@ -14,7 +14,7 @@ class s extends l {
|
|
|
14
14
|
* Class name
|
|
15
15
|
* @type {string}
|
|
16
16
|
*/
|
|
17
|
-
|
|
17
|
+
n(this, "className", "Card");
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* Get CSS stylesheet
|
|
@@ -22,7 +22,7 @@ class s extends l {
|
|
|
22
22
|
* @returns {Object} styles - The CSS styles
|
|
23
23
|
*/
|
|
24
24
|
static get cssStyleSheet() {
|
|
25
|
-
return
|
|
25
|
+
return w;
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
28
|
* Setup attributes
|
|
@@ -37,12 +37,14 @@ class s extends l {
|
|
|
37
37
|
* @param {Object} params - The parameters
|
|
38
38
|
* @returns {Object} fragment - The document fragment
|
|
39
39
|
*/
|
|
40
|
-
draw(e, j,
|
|
41
|
-
let c = document.createDocumentFragment(),
|
|
42
|
-
|
|
40
|
+
draw(e, j, t) {
|
|
41
|
+
let c = document.createDocumentFragment(), a = document.createElement("div");
|
|
42
|
+
a.setAttribute("part", "native"), a.classList.add("native-card");
|
|
43
|
+
let d = document.createElement("slot");
|
|
44
|
+
return t.color && a.classList.add("wje-color-" + t.color), a.appendChild(d), c.appendChild(a), c;
|
|
43
45
|
}
|
|
44
46
|
}
|
|
45
|
-
l.define("wje-card",
|
|
47
|
+
l.define("wje-card", v);
|
|
46
48
|
export {
|
|
47
|
-
|
|
49
|
+
v as default
|
|
48
50
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var o = Object.defineProperty;
|
|
2
|
-
var c = (
|
|
3
|
-
var r = (
|
|
4
|
-
import
|
|
5
|
-
const m = ":host{
|
|
6
|
-
class u extends
|
|
2
|
+
var c = (t, e, a) => e in t ? o(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
|
|
3
|
+
var r = (t, e, a) => (c(t, typeof e != "symbol" ? e + "" : e, a), a);
|
|
4
|
+
import l, { event as d } from "./wje-element.js";
|
|
5
|
+
const m = ":host{display:flex;align-items:center;justify-content:center;flex-direction:column;width:var(--wje-carousel-size, 100%);max-height:100%;aspect-ratio:var(--wje-carousel-item-aspect-ratio);scroll-snap-align:center;scroll-snap-stop:always}.native-carousel-item{width:100%;height:100%;display:flex}::slotted(wje-img){width:100%!important;height:100%!important;object-fit:contain;display:flex}";
|
|
6
|
+
class u extends l {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
r(this, "className", "CarouselItem");
|
|
@@ -20,14 +20,14 @@ class u extends n {
|
|
|
20
20
|
draw(a, p, h) {
|
|
21
21
|
let i = document.createDocumentFragment(), s = document.createElement("div");
|
|
22
22
|
s.classList.add("native-carousel-item"), s.setAttribute("part", "native");
|
|
23
|
-
let
|
|
24
|
-
return s.appendChild(
|
|
23
|
+
let n = document.createElement("slot");
|
|
24
|
+
return s.appendChild(n), i.appendChild(s), i;
|
|
25
25
|
}
|
|
26
26
|
afterDraw() {
|
|
27
27
|
d.addListener(this, "click", "wje-carousel-item:click");
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
l.define("wje-carousel-item", u);
|
|
31
31
|
export {
|
|
32
32
|
u as default
|
|
33
33
|
};
|
package/dist/wje-carousel.js
CHANGED
|
@@ -2,7 +2,7 @@ var v = Object.defineProperty;
|
|
|
2
2
|
var p = (o, a, e) => a in o ? v(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
|
|
3
3
|
var u = (o, a, e) => (p(o, typeof a != "symbol" ? a + "" : a, e), e);
|
|
4
4
|
import m from "./wje-element.js";
|
|
5
|
-
const b = "
|
|
5
|
+
const b = ".native-carousel{position:relative;width:var(--wje-carousel-width, 100%);height:var(--wje-carousel-height, 300px);scroll-behavior:smooth}.carousel-slides{display:flex;transition:transform .5s ease;align-items:center;justify-items:center;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wje-aspect-ratio, 4 / 3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wje-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wje-carousel-item){flex:0 0 var(--wje-carousel-size);height:100%}wje-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-1rem;transform:translate(100%,-50%)}.pagination{position:relative;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2;justify-content:center}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wje-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wje-color)}.thumbnails{display:flex;justify-content:center;align-items:center;overflow-x:auto;gap:.5rem;padding:0 .5rem;margin-top:.5rem;margin-bottom:.5rem;box-sizing:border-box;overflow-y:hidden}.thumbnails wje-thumbnail{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wje-color-primary-11)}";
|
|
6
6
|
class f extends m {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
package/dist/wje-checkbox.js
CHANGED
|
@@ -2,7 +2,7 @@ var s = Object.defineProperty;
|
|
|
2
2
|
var h = (c, t, e) => t in c ? s(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
|
|
3
3
|
var l = (c, t, e) => (h(c, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import b, { event as a } from "./wje-element.js";
|
|
5
|
-
const d = ':host{
|
|
5
|
+
const d = ':host{display:block;margin-top:var(--wje-checkbox-margin-top);margin-bottom:var(--wje-checkbox-margin-bottom);margin-inline:var(--wje-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wje-checkbox-width);min-height:var(--wje-checkbox-height);margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wje-color-contrast-lowest);border:1px solid var(--wje-border-color)}.native-checkbox label{transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox label:hover{color:var(--wje-color-contrast-11)}.native-checkbox label:before{border-radius:3px;transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox input[type=checkbox]{position:absolute;margin:0;z-index:-1;width:16px;height:16px;opacity:0;display:none}.native-checkbox input[type=checkbox]+label:after{content:"";position:absolute;left:0;border-right:0 solid transparent;border-bottom:0 solid transparent;width:16px;height:16px;overflow:hidden}.native-checkbox.checkbox-circle label:after{border-radius:99px}.native-checkbox.checkbox-circle label:before{border-radius:99px}.native-checkbox input[type=checkbox]:checked+label:after{content:"";background:var(--wje-grey-check-icon);background-size:160px 16px;background-repeat:no-repeat;animation-name:checkbox-check;animation-duration:.32s;animation-timing-function:steps(9);animation-fill-mode:forwards;animation-iteration-count:1}.native-checkbox input[type=checkbox]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-checkbox input[type=checkbox]:focus+label{color:var(--wje-color-contrast-11)}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:#78c8fe 0 0}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-8);opacity:.58}.native-checkbox input[type=checkbox][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.native-checkbox input[type=checkbox]:indeterminate+label:after{background:none;background-color:var(--wje-color-contrast-8);width:10px;height:2px;top:6px;margin:3px;border-radius:2px}.native-checkbox.right label{padding-left:0;padding-right:26px}.native-checkbox.right label:before{right:0;left:auto}.native-checkbox.right input[type=checkbox]:checked+label{position:relative}.native-checkbox.right input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}.success :is(input[type=checkbox]:checked+label):before,.success :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-success);background-color:var(--wje-color-success)}.primary :is(input[type=checkbox]:checked+label):before,.primary :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-primary);background-color:var(--wje-color-primary)}.complete :is(input[type=checkbox]:checked+label):before,.complete :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-complete);background-color:var(--wje-color-complete)}.warning :is(input[type=checkbox]:checked+label):before,.warning :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-warning);background-color:var(--wje-color-warning)}.danger :is(input[type=checkbox]:checked+label):before,.danger :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-danger);background-color:var(--wje-color-danger)}.info :is(input[type=checkbox]:checked+label):before,.info :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-info);background-color:var(--wje-color-info)}.info :is(input[type=checkbox]:checked+label):after,.danger :is(input[type=checkbox]:checked+label):after,.complete :is(input[type=checkbox]:checked+label):after,.primary :is(input[type=checkbox]:checked+label):after,.success :is(input[type=checkbox]:checked+label):after{background:var(--wje-white-check-icon)}.info :is(input[type=checkbox]:indeterminate+label):after,.danger :is(input[type=checkbox]:indeterminate+label):after,.complete :is(input[type=checkbox]:indeterminate+label):after,.primary :is(input[type=checkbox]:indeterminate+label):after,.success :is(input[type=checkbox]:indeterminate+label):after{background-color:var(--wje-color-contrast-lowest)}@keyframes shrink-bounce{0%{transform:scale(1)}33%{transform:scale(.85)}to{transform:scale(1)}}@keyframes checkbox-check{0%{background-position:0}to{background-position:-144px}}.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible)+label:before{box-shadow:none}input[type=checkbox]{accent-color:var(--wje-color-primary)!important;font-size:50px}';
|
|
6
6
|
class p extends b {
|
|
7
7
|
/**
|
|
8
8
|
* Checkbox constructor.
|
package/dist/wje-chip.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var n = (o, e, t) => (
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
class
|
|
1
|
+
var d = Object.defineProperty;
|
|
2
|
+
var p = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
|
|
3
|
+
var n = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
|
+
import l, { event as w } from "./wje-element.js";
|
|
5
|
+
const h = ".native-chip{display:inline-flex;justify-content:center;align-items:center;font-size:14px;letter-spacing:-.006em;margin:0;padding:.5rem .75rem;text-align:center;cursor:pointer;white-space:nowrap;background-color:var(--wje-color-contrast-2, #fff);color:var(--wje-color-contrast-6);text-shadow:none;box-shadow:none;border:0 none;line-height:14px;min-height:28px;height:28px;width:100%;max-width:fit-content;min-width:28px;position:relative;transition:width .15s cubic-bezier(.4,0,.2,1);border-radius:var(--wje-border-radius-pill);overflow:hidden;vertical-align:middle;box-sizing:border-box}.native-chip.wje-color-primary{background-color:var(--wje-color-primary-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-complete{background-color:var(--wje-color-complete-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-success{background-color:var(--wje-color-success-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-warning{background-color:var(--wje-color-warning-11);color:var(--wje-color)}.native-chip.wje-color-danger{background-color:var(--wje-color-danger-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-info{background-color:var(--wje-color-info-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-menu{background-color:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0)}:host(.focus){box-shadow:none}:host(.wje-active) .native-chip{border:1px solid var(--wje-color-primary-11);background-color:var(--wje-color-contrast-3);color:var(--wje-color)}:host(:focus,:active:focus,.wje-active:focus){outline:none!important}.check{display:none}:host([active]) .check{display:block;margin-inline:4px 0}:host([disabled]){opacity:.5;border:0;pointer-events:none;cursor:not-allowed}::slotted(wje-avatar){width:22px;height:22px}::slotted(wje-avatar:first-child){margin-inline:-8px 8px;margin-top:-4px;margin-bottom:-4px}::slotted(wje-icon:first-child){margin:-4px 8px -4px -4px}::slotted(wje-icon:last-child){margin:-4px -4px -4px 8px}wje-button{--wje-button-border-radius: 50%;--wje-button-margin-inline: .25rem -.5rem;--wje-padding-top: .15rem;--wje-padding-start: .15rem;--wje-padding-end: .15rem;--wje-padding-bottom: .15rem}";
|
|
6
|
+
class m extends l {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
n(this, "className", "Chip");
|
|
10
10
|
}
|
|
11
11
|
static get cssStyleSheet() {
|
|
12
|
-
return
|
|
12
|
+
return h;
|
|
13
13
|
}
|
|
14
14
|
setupAttributes() {
|
|
15
15
|
this.isShadowRoot = "open";
|
|
16
16
|
}
|
|
17
|
-
draw(t,
|
|
17
|
+
draw(t, j, v) {
|
|
18
18
|
let a = document.createDocumentFragment(), r = document.createElement("div");
|
|
19
19
|
r.classList.add("native-chip");
|
|
20
|
-
let
|
|
20
|
+
let s = document.createElement("slot"), i = document.createElement("wje-button");
|
|
21
21
|
i.setAttribute("part", "remove"), i.setAttribute("fill", "link"), i.innerHTML = '<wje-icon name="x"></wje-icon>';
|
|
22
22
|
let c = document.createElement("wje-icon");
|
|
23
|
-
return c.setAttribute("name", "check"), c.classList.add("check"), this.color &&
|
|
23
|
+
return c.setAttribute("name", "check"), c.classList.add("check"), this.color && r.classList.add("wje-color-" + this.color, "wje-color"), this.disabled && this.classList.add("wje-disabled"), this.outline && this.classList.add("wje-outline"), r.appendChild(s), r.appendChild(c), this.hasAttribute("removable") && r.appendChild(i), a.appendChild(r), this.remove = i, a;
|
|
24
24
|
}
|
|
25
25
|
afterDraw() {
|
|
26
|
-
|
|
26
|
+
w.addListener(this.remove, "click", "wje:chip-remove", null, { stopPropagation: !0 });
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
|
|
29
|
+
l.define("wje-chip", m);
|
|
30
30
|
export {
|
|
31
|
-
|
|
31
|
+
m as default
|
|
32
32
|
};
|