wj-elements 0.1.32 → 0.1.34
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/localize.js +13 -11
- package/dist/{popup.element-DE8fye8C.js → popup.element-CWsSOxs2.js} +99 -95
- package/dist/wje-button.js +56 -29
- package/dist/wje-chip.js +1 -1
- package/dist/wje-dropdown.js +73 -27
- package/dist/wje-element.js +50 -50
- package/dist/wje-icon-picker.js +1 -1
- package/dist/wje-icon.js +1 -1
- package/dist/wje-input.js +152 -58
- package/dist/wje-master.js +1 -1
- package/dist/wje-menu-item.js +18 -17
- package/dist/wje-popup.js +1 -1
- package/dist/wje-reorder-handle.js +43 -37
- package/dist/wje-select.js +1 -1
- package/dist/wje-tooltip.js +24 -23
- package/package.json +1 -1
package/dist/wje-button.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
class
|
|
1
|
+
var j = Object.defineProperty;
|
|
2
|
+
var g = (e, a, o) => a in e ? j(e, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[a] = o;
|
|
3
|
+
var c = (e, a, o) => (g(e, typeof a != "symbol" ? a + "" : a, o), o);
|
|
4
|
+
import h, { WjElementUtils as p, event as s } from "./wje-element.js";
|
|
5
|
+
import v from "./wje-icon.js";
|
|
6
|
+
const b = (e) => e === "false" || e === "null" || e === "NaN" || e === "undefined" || e === "0" ? !1 : !!e, m = '.wje-button-solid.wje-color-primary{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary{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-9);border-color:var(--wje-color-complete-9);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-9);border-color:var(--wje-color-success-9);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-9);border-color:var(--wje-color-warning-9);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-9);border-color:var(--wje-color-danger-9);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-9);border-color:var(--wje-color-contrast-9);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;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-10);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-10);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-10);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-10);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-10);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-10);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}:host([round]) .native-button{border-radius:var(--wje-border-radius-pill)}:host([circle]) .native-button{border-radius:var(--wje-border-radius-circle);aspect-ratio:1/1;width:1.813rem;display:flex;align-items:center;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=small]) .native-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}:host([size=large]) .native-button{--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host([size=small][circle]) .native-button{width:1.5rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=large][circle]) .native-button{width:2.188rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}::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 d extends h {
|
|
8
8
|
/**
|
|
9
9
|
* Button constructor
|
|
10
10
|
* @constructor
|
|
@@ -15,31 +15,32 @@ class u extends g {
|
|
|
15
15
|
* Dependencies
|
|
16
16
|
* @type {Object}
|
|
17
17
|
*/
|
|
18
|
-
|
|
19
|
-
"wje-icon":
|
|
18
|
+
c(this, "dependencies", {
|
|
19
|
+
"wje-icon": v
|
|
20
20
|
});
|
|
21
21
|
/**
|
|
22
22
|
* Class name
|
|
23
23
|
* @type {string}
|
|
24
24
|
*/
|
|
25
|
-
|
|
25
|
+
c(this, "className", "Button");
|
|
26
26
|
/**
|
|
27
27
|
* Event dialog open method
|
|
28
28
|
* @param {Event} e - The event
|
|
29
29
|
*/
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
c(this, "eventDialogOpen", (o) => {
|
|
31
|
+
s.dispatchCustomEvent(this, this.dialog, {
|
|
32
32
|
bubbles: !0
|
|
33
33
|
});
|
|
34
34
|
});
|
|
35
35
|
/**
|
|
36
36
|
* Toggle states method
|
|
37
37
|
*/
|
|
38
|
-
|
|
39
|
-
this.slotToggle.assignedNodes().filter((
|
|
40
|
-
|
|
38
|
+
c(this, "toggleStates", () => {
|
|
39
|
+
this.slotToggle.assignedNodes().filter((n) => n.nodeType === Node.ELEMENT_NODE).forEach((n, u) => {
|
|
40
|
+
n.classList.contains("show") ? n.classList.remove("show") : (n.classList.add("show"), this.setAttribute("value", u === 0 ? "on" : "off"));
|
|
41
41
|
});
|
|
42
42
|
});
|
|
43
|
+
this.internals_ = this.attachInternals();
|
|
43
44
|
}
|
|
44
45
|
/**
|
|
45
46
|
* Set active state
|
|
@@ -102,14 +103,14 @@ class u extends g {
|
|
|
102
103
|
* @param {boolean} value - The value to set
|
|
103
104
|
*/
|
|
104
105
|
set stopPropagation(o) {
|
|
105
|
-
this.setAttribute("stop-propagation",
|
|
106
|
+
this.setAttribute("stop-propagation", b(o));
|
|
106
107
|
}
|
|
107
108
|
/**
|
|
108
109
|
* Get stop propagation
|
|
109
110
|
* @returns {boolean} stopPropagation - The stop propagation
|
|
110
111
|
*/
|
|
111
112
|
get stopPropagation() {
|
|
112
|
-
return
|
|
113
|
+
return b(this.getAttribute("stop-propagation"));
|
|
113
114
|
}
|
|
114
115
|
/**
|
|
115
116
|
* Get CSS stylesheet
|
|
@@ -117,7 +118,7 @@ class u extends g {
|
|
|
117
118
|
* @returns {Object} styles - The CSS styles
|
|
118
119
|
*/
|
|
119
120
|
static get cssStyleSheet() {
|
|
120
|
-
return
|
|
121
|
+
return m;
|
|
121
122
|
}
|
|
122
123
|
/**
|
|
123
124
|
* Get observed attributes
|
|
@@ -127,6 +128,22 @@ class u extends g {
|
|
|
127
128
|
static get observedAttributes() {
|
|
128
129
|
return ["disabled"];
|
|
129
130
|
}
|
|
131
|
+
/**
|
|
132
|
+
* @summary Callback function that is called when the custom element is associated with a form.
|
|
133
|
+
* This function sets the internal `_form` property to the associated form.
|
|
134
|
+
* @param {HTMLFormElement} form - The form the custom element is associated with.
|
|
135
|
+
*/
|
|
136
|
+
formAssociatedCallback(o) {
|
|
137
|
+
this._form = o;
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* @summary Callback function that is called when the form-associated state of the custom element changes.
|
|
141
|
+
* This function updates the 'disabled' attribute of the element based on the new state.
|
|
142
|
+
* @param {boolean} disabled - The new form-associated state.
|
|
143
|
+
*/
|
|
144
|
+
formDisabledCallback(o) {
|
|
145
|
+
o ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
146
|
+
}
|
|
130
147
|
/**
|
|
131
148
|
* Setup attributes
|
|
132
149
|
*/
|
|
@@ -140,27 +157,31 @@ class u extends g {
|
|
|
140
157
|
* @param {Object} params - The parameters
|
|
141
158
|
* @returns {Object} fragment - The document fragment
|
|
142
159
|
*/
|
|
143
|
-
draw(o,
|
|
144
|
-
let
|
|
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
|
|
147
|
-
|
|
160
|
+
draw(o, n, u) {
|
|
161
|
+
let w = document.createDocumentFragment(), t = document.createElement(this.hasAttribute("href") ? "a" : "button");
|
|
162
|
+
if (this.hasAttribute("href") ? t.setAttribute("href", this.getAttribute("href")) : this.type === "submit" && t.setAttribute("type", "submit"), 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")) {
|
|
163
|
+
let i = document.createElement("wje-icon");
|
|
164
|
+
i.style.setProperty("--wje-icon-size", "14px"), i.setAttribute("slot", "caret"), i.setAttribute("name", "chevron-down"), this.appendChild(i);
|
|
148
165
|
}
|
|
149
166
|
if (this.active) {
|
|
150
167
|
this.classList.add("wje-active");
|
|
151
|
-
let
|
|
152
|
-
|
|
168
|
+
let i = document.createElement("wje-icon");
|
|
169
|
+
i.setAttribute("name", "check"), this.appendChild(i);
|
|
153
170
|
}
|
|
154
171
|
let l = document.createElement("span");
|
|
155
172
|
l.classList.add("button-inner");
|
|
156
173
|
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),
|
|
174
|
+
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), w.appendChild(t), w;
|
|
158
175
|
}
|
|
159
176
|
/**
|
|
160
177
|
* After draw method
|
|
161
178
|
*/
|
|
162
179
|
afterDraw() {
|
|
163
|
-
this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), this.hasAttribute("dialog") ?
|
|
180
|
+
this.hasToggle && (this.toggle === "off" ? (this.slotToggle.assignedNodes()[1].classList.add("show"), this.setAttribute("value", "off")) : (this.slotToggle.assignedNodes()[0].classList.add("show"), this.setAttribute("value", "on"))), this.hasAttribute("dialog") ? s.addListener(this, "click", null, this.eventDialogOpen) : s.addListener(this, "click", "wje-button:click", null), this.hasToggle && s.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation }), this.type === "submit" && s.addListener(this, "click", "wje-button:submit", () => {
|
|
181
|
+
s.dispatchCustomEvent(this.internals_.form, "submit", {});
|
|
182
|
+
}), this.type === "reset" && s.addListener(this, "click", "wje-button:reset", () => {
|
|
183
|
+
this.internals_.form.reset();
|
|
184
|
+
});
|
|
164
185
|
}
|
|
165
186
|
/**
|
|
166
187
|
* Before disconnect method
|
|
@@ -169,7 +190,13 @@ class u extends g {
|
|
|
169
190
|
this.removeEventListener("click", this.eventDialogOpen);
|
|
170
191
|
}
|
|
171
192
|
}
|
|
172
|
-
|
|
193
|
+
/**
|
|
194
|
+
* @summary A static property that indicates whether the custom element is form-associated or not.
|
|
195
|
+
* Form-associated custom elements are elements that can participate in form submission.
|
|
196
|
+
* @type {boolean}
|
|
197
|
+
*/
|
|
198
|
+
c(d, "formAssociated", !0);
|
|
199
|
+
d.define("wje-button", d);
|
|
173
200
|
export {
|
|
174
|
-
|
|
201
|
+
d as default
|
|
175
202
|
};
|
package/dist/wje-chip.js
CHANGED
|
@@ -2,7 +2,7 @@ var d = Object.defineProperty;
|
|
|
2
2
|
var p = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
|
|
3
3
|
var n = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
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-
|
|
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-9);color:var(--wje-color-contrast-0)}.native-chip.wje-color-complete{background-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0)}.native-chip.wje-color-success{background-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0)}.native-chip.wje-color-warning{background-color:var(--wje-color-warning-9);color:var(--wje-color)}.native-chip.wje-color-danger{background-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0)}.native-chip.wje-color-info{background-color:var(--wje-color-info-9);color:var(--wje-color-contrast-0)}.native-chip.wje-color-menu{background-color:var(--wje-color-contrast-9);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
6
|
class m extends l {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
package/dist/wje-dropdown.js
CHANGED
|
@@ -1,34 +1,65 @@
|
|
|
1
1
|
var d = Object.defineProperty;
|
|
2
|
-
var u = (
|
|
3
|
-
var
|
|
4
|
-
import m, { event as
|
|
5
|
-
import { P as w } from "./popup.element-
|
|
6
|
-
class
|
|
2
|
+
var u = (r, s, t) => s in r ? d(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
|
|
3
|
+
var o = (r, s, t) => (u(r, typeof s != "symbol" ? s + "" : s, t), t);
|
|
4
|
+
import m, { event as e } from "./wje-element.js";
|
|
5
|
+
import { P as w } from "./popup.element-CWsSOxs2.js";
|
|
6
|
+
class h extends m {
|
|
7
|
+
/**
|
|
8
|
+
* Creates an instance of Dropdown.
|
|
9
|
+
*
|
|
10
|
+
* @constructor
|
|
11
|
+
* */
|
|
7
12
|
constructor() {
|
|
8
13
|
super();
|
|
9
|
-
|
|
14
|
+
o(this, "depandencies", {
|
|
10
15
|
"wje-popup": w
|
|
11
16
|
});
|
|
12
|
-
|
|
17
|
+
o(this, "className", "Dropdown");
|
|
18
|
+
/**
|
|
19
|
+
* Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
|
|
20
|
+
*
|
|
21
|
+
* @param {Event} e - The event object.
|
|
22
|
+
*/
|
|
23
|
+
o(this, "otherDropdownOpennedCallback", (t) => {
|
|
24
|
+
t.detail.detail.target !== this && (this.classList.remove("active"), this.popup.hide());
|
|
25
|
+
});
|
|
26
|
+
/**
|
|
27
|
+
* @summary Toggles the dropdown element between active and inactive states.
|
|
28
|
+
* Calls the `onOpen` method if the element is currently inactive,
|
|
29
|
+
* and calls the `onClose` method if the element is currently active.
|
|
30
|
+
*
|
|
31
|
+
* @param {Event} e - The event object.
|
|
32
|
+
*/
|
|
33
|
+
o(this, "toggleCallback", (t) => {
|
|
34
|
+
this.classList.contains("active") ? this.onClose(t) : this.onOpen(t);
|
|
35
|
+
});
|
|
13
36
|
/**
|
|
14
37
|
* @summary Open the popup
|
|
15
38
|
* @param e
|
|
16
39
|
*/
|
|
17
|
-
|
|
18
|
-
this.classList.add("active"), Promise.resolve(this.beforeShow(this)).then((l) => {
|
|
40
|
+
o(this, "onOpen", async (t) => {
|
|
41
|
+
t.stopPropagation(), this.classList.add("active"), Promise.resolve(this.beforeShow(this)).then((l) => {
|
|
19
42
|
if (!this.classList.contains("active"))
|
|
20
|
-
throw new Error(
|
|
21
|
-
|
|
43
|
+
throw new Error(
|
|
44
|
+
"beforeShow method returned false or not string"
|
|
45
|
+
);
|
|
46
|
+
this.popup.show(), e.dispatchCustomEvent(this, "wje-dropdown:open", {
|
|
47
|
+
bubbles: !0,
|
|
48
|
+
detail: { target: this }
|
|
49
|
+
}), Promise.resolve(this.afterShow(this));
|
|
22
50
|
}).catch((l) => {
|
|
23
51
|
this.classList.remove("active"), this.popup.hide();
|
|
24
52
|
});
|
|
25
53
|
});
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
54
|
+
/**
|
|
55
|
+
* @summary Close the popup
|
|
56
|
+
* @param e
|
|
29
57
|
*/
|
|
30
|
-
|
|
31
|
-
this.classList.remove("active"), this.popup.hide()
|
|
58
|
+
o(this, "onClose", async (t) => {
|
|
59
|
+
t.stopPropagation(), this.classList.remove("active"), this.popup.hide(), e.dispatchCustomEvent(this, "wje-dropdown:close", {
|
|
60
|
+
bubbles: !0,
|
|
61
|
+
detail: { target: this }
|
|
62
|
+
});
|
|
32
63
|
});
|
|
33
64
|
}
|
|
34
65
|
set trigger(t) {
|
|
@@ -43,26 +74,41 @@ class p extends m {
|
|
|
43
74
|
setupAttributes() {
|
|
44
75
|
this.isShadowRoot = "open";
|
|
45
76
|
}
|
|
46
|
-
draw(t, l,
|
|
77
|
+
draw(t, l, g) {
|
|
47
78
|
let c = document.createDocumentFragment();
|
|
48
|
-
this.classList.add(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
n
|
|
53
|
-
|
|
54
|
-
|
|
79
|
+
this.classList.add(
|
|
80
|
+
"wje-placement",
|
|
81
|
+
"wje-" + this.placement || "wje-start"
|
|
82
|
+
);
|
|
83
|
+
let n = document.createElement("div");
|
|
84
|
+
n.setAttribute("part", "native"), n.classList.add("native-dropdown"), document.createElement("wje-tooltip").setAttribute("content", this.tooltip);
|
|
85
|
+
let a = document.createElement("slot");
|
|
86
|
+
a.setAttribute("name", "trigger"), a.setAttribute("slot", "anchor");
|
|
87
|
+
let p = document.createElement("slot"), i = document.createElement("wje-popup");
|
|
88
|
+
return i.setAttribute("placement", this.placement), i.setAttribute("offset", this.offset), i.appendChild(a), i.appendChild(p), i.setAttribute("manual", ""), n.appendChild(i), c.appendChild(n), this.popup = i, this.anchorSlot = a, c;
|
|
89
|
+
}
|
|
90
|
+
afterDisconnect() {
|
|
91
|
+
e.removeListener(this, "mouseenter", null, this.onOpen), e.removeListener(this, "mouseleave", null, this.onClose), e.removeListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: !0 });
|
|
55
92
|
}
|
|
56
93
|
afterDraw() {
|
|
57
|
-
|
|
94
|
+
e.addListener(this, "wje-popup:hide", null, () => {
|
|
95
|
+
this.classList.remove("active");
|
|
96
|
+
}), this.trigger != "click" ? (e.addListener(this, "mouseenter", null, this.onOpen), e.addListener(this, "mouseleave", null, this.onClose)) : e.addListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: !0 }), this.hasAttribute("collapsible") && e.addListener(Array.from(this.querySelectorAll("wje-menu-item")), "click", "wje-menu-item:click", this.onClose);
|
|
58
97
|
}
|
|
98
|
+
/**
|
|
99
|
+
* @summary Returns the content to be displayed before showing the dropdown.
|
|
100
|
+
* @returns {any} The content to be displayed.
|
|
101
|
+
*/
|
|
59
102
|
beforeShow() {
|
|
60
103
|
return this.content;
|
|
61
104
|
}
|
|
105
|
+
/**
|
|
106
|
+
* This method is called after the dropdown is shown.
|
|
107
|
+
*/
|
|
62
108
|
afterShow() {
|
|
63
109
|
}
|
|
64
110
|
}
|
|
65
|
-
|
|
111
|
+
h.define("wje-dropdown", h);
|
|
66
112
|
export {
|
|
67
|
-
|
|
113
|
+
h as default
|
|
68
114
|
};
|
package/dist/wje-element.js
CHANGED
|
@@ -15,7 +15,7 @@ class j {
|
|
|
15
15
|
constructor(e = {}) {
|
|
16
16
|
a(this, "findByKey", (e, t, s) => {
|
|
17
17
|
if (this._store.getState()[e] instanceof Array)
|
|
18
|
-
return this._store.getState()[e].find((
|
|
18
|
+
return this._store.getState()[e].find((r) => r[t] == s);
|
|
19
19
|
console.warn(` Attribute ${e} is not array`);
|
|
20
20
|
});
|
|
21
21
|
a(this, "findById", (e, t) => {
|
|
@@ -30,7 +30,7 @@ class j {
|
|
|
30
30
|
a(this, "add", (e, t) => {
|
|
31
31
|
this._store.dispatch(t(e));
|
|
32
32
|
});
|
|
33
|
-
a(this, "loadPromise", (e, t, s = "GET", i,
|
|
33
|
+
a(this, "loadPromise", (e, t, s = "GET", i, r = () => {
|
|
34
34
|
}) => fetch(e, {
|
|
35
35
|
method: s,
|
|
36
36
|
body: i,
|
|
@@ -40,13 +40,13 @@ class j {
|
|
|
40
40
|
},
|
|
41
41
|
async: !0,
|
|
42
42
|
referrerPolicy: "same-origin"
|
|
43
|
-
}).then((
|
|
43
|
+
}).then((n, o) => {
|
|
44
44
|
var y;
|
|
45
|
-
let m = (y =
|
|
46
|
-
if (
|
|
47
|
-
return
|
|
48
|
-
throw
|
|
49
|
-
}).then((
|
|
45
|
+
let m = (y = n.headers.get("permissions")) == null ? void 0 : y.split(",");
|
|
46
|
+
if (r(m), n.ok)
|
|
47
|
+
return n.json();
|
|
48
|
+
throw n.json();
|
|
49
|
+
}).then((n) => (this._store.dispatch(t(n)), n)));
|
|
50
50
|
a(this, "loadOnePromise", (e, t) => fetch(e, {
|
|
51
51
|
cache: "no-cache",
|
|
52
52
|
headers: {
|
|
@@ -62,9 +62,9 @@ class j {
|
|
|
62
62
|
}));
|
|
63
63
|
this._store = e.store, this.premenna = null;
|
|
64
64
|
}
|
|
65
|
-
_save(e, t, s, i,
|
|
66
|
-
let
|
|
67
|
-
method:
|
|
65
|
+
_save(e, t, s, i, r) {
|
|
66
|
+
let n = fetch(e, {
|
|
67
|
+
method: r,
|
|
68
68
|
body: JSON.stringify(t),
|
|
69
69
|
cache: "no-cache",
|
|
70
70
|
headers: {
|
|
@@ -72,7 +72,7 @@ class j {
|
|
|
72
72
|
},
|
|
73
73
|
referrerPolicy: "same-origin"
|
|
74
74
|
}).then((o) => (o.ok, o.json()));
|
|
75
|
-
return this.dispatch(
|
|
75
|
+
return this.dispatch(n, i, s);
|
|
76
76
|
}
|
|
77
77
|
_get(e, t, s) {
|
|
78
78
|
let i = fetch(e, {
|
|
@@ -82,13 +82,13 @@ class j {
|
|
|
82
82
|
"Content-Type": "application/json"
|
|
83
83
|
},
|
|
84
84
|
referrerPolicy: "same-origin"
|
|
85
|
-
}).then(async (
|
|
86
|
-
let
|
|
85
|
+
}).then(async (r) => {
|
|
86
|
+
let n;
|
|
87
87
|
try {
|
|
88
|
-
let o = await
|
|
88
|
+
let o = await r.text();
|
|
89
89
|
return JSON.parse(o);
|
|
90
90
|
} catch {
|
|
91
|
-
return
|
|
91
|
+
return n;
|
|
92
92
|
}
|
|
93
93
|
});
|
|
94
94
|
return this.dispatch(i, s, t);
|
|
@@ -194,34 +194,34 @@ class T {
|
|
|
194
194
|
}
|
|
195
195
|
return !1;
|
|
196
196
|
}
|
|
197
|
-
addListener(e, t, s, i,
|
|
198
|
-
e && (Array.isArray(e) || (e = [e]), e.forEach((
|
|
199
|
-
this.writeRecord(
|
|
197
|
+
addListener(e, t, s, i, r) {
|
|
198
|
+
e && (Array.isArray(e) || (e = [e]), e.forEach((n) => {
|
|
199
|
+
this.writeRecord(n, t, s, i, r);
|
|
200
200
|
}));
|
|
201
201
|
}
|
|
202
|
-
writeRecord(e, t, s, i,
|
|
203
|
-
let
|
|
204
|
-
|
|
202
|
+
writeRecord(e, t, s, i, r) {
|
|
203
|
+
let n = this.findRecordByElement(e);
|
|
204
|
+
n ? n.listeners[t] = n.listeners[t] || [] : (n = {
|
|
205
205
|
element: e,
|
|
206
206
|
listeners: {}
|
|
207
|
-
},
|
|
207
|
+
}, n.listeners[t] = [], this.customEventStorage.push(n)), i = i || p(this, d, g);
|
|
208
208
|
let o = {
|
|
209
209
|
listener: i,
|
|
210
|
-
options:
|
|
210
|
+
options: r,
|
|
211
211
|
event: s
|
|
212
212
|
};
|
|
213
|
-
this.listenerExists(e, t, o) || (
|
|
213
|
+
this.listenerExists(e, t, o) || (n.listeners[t].push(o), e.addEventListener(t, i, r));
|
|
214
214
|
}
|
|
215
215
|
listenerExists(e, t, s) {
|
|
216
|
-
return this.findRecordByElement(e).listeners[t].some((
|
|
216
|
+
return this.findRecordByElement(e).listeners[t].some((r) => JSON.stringify(r) === JSON.stringify(s));
|
|
217
217
|
}
|
|
218
|
-
removeListener(e, t, s, i,
|
|
219
|
-
let
|
|
220
|
-
if (
|
|
221
|
-
var o =
|
|
222
|
-
~o &&
|
|
218
|
+
removeListener(e, t, s, i, r) {
|
|
219
|
+
let n = this.findRecordByElement(e);
|
|
220
|
+
if (n && t in n.listeners) {
|
|
221
|
+
var o = n.listeners[t].indexOf(i);
|
|
222
|
+
~o && n.listeners[t].splice(o, 1), n.listeners[t].length || delete n.listeners[t];
|
|
223
223
|
}
|
|
224
|
-
i = i || p(this, d, g), e.removeEventListener(t, i,
|
|
224
|
+
i = i || p(this, d, g), e.removeEventListener(t, i, r);
|
|
225
225
|
}
|
|
226
226
|
removeElement(e) {
|
|
227
227
|
this.customEventStorage = this.customEventStorage.filter((t) => {
|
|
@@ -241,12 +241,12 @@ class T {
|
|
|
241
241
|
}
|
|
242
242
|
d = new WeakSet(), g = function(e) {
|
|
243
243
|
let t = this;
|
|
244
|
-
l.findRecordByElement(t).listeners[e.type].forEach((
|
|
245
|
-
l.dispatchCustomEvent(t,
|
|
244
|
+
l.findRecordByElement(t).listeners[e.type].forEach((r, n) => {
|
|
245
|
+
l.dispatchCustomEvent(t, r.event, {
|
|
246
246
|
originalEvent: (e == null ? void 0 : e.type) || null,
|
|
247
247
|
context: t,
|
|
248
248
|
event: l
|
|
249
|
-
}),
|
|
249
|
+
}), r.options && r.options.stopPropagation === !0 && e.stopPropagation();
|
|
250
250
|
});
|
|
251
251
|
};
|
|
252
252
|
let _ = new T();
|
|
@@ -256,10 +256,10 @@ const f = class f extends HTMLElement {
|
|
|
256
256
|
constructor(t) {
|
|
257
257
|
super();
|
|
258
258
|
a(this, "initWjElement", async (t = !1) => {
|
|
259
|
-
var
|
|
259
|
+
var r;
|
|
260
260
|
this.functionStack = [];
|
|
261
261
|
const s = Date.now();
|
|
262
|
-
this.functionStack.push(s), (
|
|
262
|
+
this.functionStack.push(s), (r = this.setupAttributes) == null || r.call(this), this.isShadowRoot && !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" }), this.setUpAccessors(), this.drawingStatus = "BEGINING", this.display(t, s);
|
|
263
263
|
const i = new CSSStyleSheet();
|
|
264
264
|
i.replaceSync(this.constructor.cssStyleSheet), this.context.adoptedStyleSheets = [i];
|
|
265
265
|
});
|
|
@@ -355,9 +355,9 @@ const f = class f extends HTMLElement {
|
|
|
355
355
|
}
|
|
356
356
|
setupAttributes() {
|
|
357
357
|
u.getEvents(this).forEach((s, i) => {
|
|
358
|
-
this.addEventListener(i, (
|
|
359
|
-
var
|
|
360
|
-
(o = (
|
|
358
|
+
this.addEventListener(i, (r) => {
|
|
359
|
+
var n, o;
|
|
360
|
+
(o = (n = this.getRootNode().host)[s]) == null || o.call(n);
|
|
361
361
|
});
|
|
362
362
|
});
|
|
363
363
|
}
|
|
@@ -392,15 +392,15 @@ const f = class f extends HTMLElement {
|
|
|
392
392
|
}
|
|
393
393
|
async render(t) {
|
|
394
394
|
this.drawingStatus = "DRAWING", !this.isProcessingFlow(t) && await Promise.resolve(this.draw(this.context, this.store, u.getAttributes(this))).then((s) => {
|
|
395
|
-
let i = s || "",
|
|
395
|
+
let i = s || "", r;
|
|
396
396
|
if (i instanceof HTMLElement || i instanceof DocumentFragment)
|
|
397
|
-
|
|
397
|
+
r = i;
|
|
398
398
|
else {
|
|
399
399
|
let o = document.createElement("template");
|
|
400
|
-
o.innerHTML = i,
|
|
400
|
+
o.innerHTML = i, r = o.content.cloneNode(!0);
|
|
401
401
|
}
|
|
402
|
-
let
|
|
403
|
-
this.isProcessingFlow(t) || this.context.appendChild(
|
|
402
|
+
let n = r;
|
|
403
|
+
this.isProcessingFlow(t) || this.context.appendChild(n);
|
|
404
404
|
});
|
|
405
405
|
}
|
|
406
406
|
/**
|
|
@@ -418,8 +418,8 @@ const f = class f extends HTMLElement {
|
|
|
418
418
|
this.getAttributeNames().forEach((s) => {
|
|
419
419
|
const i = this.sanitizeName(s);
|
|
420
420
|
this[i] == null && Object.defineProperty(this, i, {
|
|
421
|
-
set: (
|
|
422
|
-
get: (
|
|
421
|
+
set: (r) => this.setAttribute(s, r),
|
|
422
|
+
get: (r) => this.getAttribute(s)
|
|
423
423
|
});
|
|
424
424
|
});
|
|
425
425
|
}
|
|
@@ -429,9 +429,9 @@ const f = class f extends HTMLElement {
|
|
|
429
429
|
_resolveRender(t) {
|
|
430
430
|
this.isProcessingFlow(t) || (this.params = u.getAttributes(this), Promise.resolve(this.beforeDraw(this.context, this.store, u.getAttributes(this))).then((s) => {
|
|
431
431
|
this.drawingStatus = "BEFORE", Promise.resolve(this.render(t)).then((i) => {
|
|
432
|
-
var
|
|
433
|
-
this.isProcessingFlow(t) || Promise.resolve((
|
|
434
|
-
(
|
|
432
|
+
var r;
|
|
433
|
+
this.isProcessingFlow(t) || Promise.resolve((r = this.afterDraw) == null ? void 0 : r.call(this, this.context, this.store, u.getAttributes(this))).then(
|
|
434
|
+
(n, o, m) => {
|
|
435
435
|
this.drawingStatus = "AFTER", this.finisPromise(), this.rendering = !1, this.isAttached = !0, this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect), this.scheludedRefresh && (this.refresh(), this.scheludedRefresh = !1);
|
|
436
436
|
}
|
|
437
437
|
);
|
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-CWsSOxs2.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
|
@@ -49,7 +49,7 @@ const j = (e) => c(e) && (e = e.trim(), z(e)) ? e : null, z = (e) => e.length >
|
|
|
49
49
|
const s = `/assets/img/icons/${t ? "filled" : "outline"}/${e}.svg`;
|
|
50
50
|
let o = new URL(import.meta.url), r = o.pathname, i = r.substring(0, r.lastIndexOf("/"));
|
|
51
51
|
return new URL(o.origin + i + s).href;
|
|
52
|
-
}, E = ':host{width:var(--wje-icon-size);height:var(--wje-icon-size)}.native-icon{display:flex;align-items:center}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="2x-small"]){--wje-icon-size: var(--wje-size-2x-small)}: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-9)}:host([color="complete"]) .native-icon{color:var(--wje-color-complete-9)}:host([color="success"]) .native-icon{color:var(--wje-color-success-9)}:host([color="warning"]) .native-icon{color:var(--wje-color-warning-9)}:host([color="danger"]) .native-icon{color:var(--wje-color-danger-9)}:host([color="info"]) .native-icon{color:var(--wje-color-info-9)}:host([color="menu"]) .native-icon{color:var(--wje-color-contrast-9)}';
|
|
52
|
+
}, E = ':host{width:var(--wje-icon-size);height:var(--wje-icon-size);display:block}.native-icon{display:flex;align-items:center}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="2x-small"]){--wje-icon-size: var(--wje-size-2x-small)}: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-9)}:host([color="complete"]) .native-icon{color:var(--wje-color-complete-9)}:host([color="success"]) .native-icon{color:var(--wje-color-success-9)}:host([color="warning"]) .native-icon{color:var(--wje-color-warning-9)}:host([color="danger"]) .native-icon{color:var(--wje-color-danger-9)}:host([color="info"]) .native-icon{color:var(--wje-color-info-9)}:host([color="menu"]) .native-icon{color:var(--wje-color-contrast-9)}';
|
|
53
53
|
class u extends m {
|
|
54
54
|
/**
|
|
55
55
|
* Creates an instance of IconElement.
|