wj-elements 0.1.33 → 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/wje-button.js +25 -25
- package/package.json +1 -1
package/dist/wje-button.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var c = (
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
class d extends
|
|
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
|
|
@@ -16,7 +16,7 @@ class d extends g {
|
|
|
16
16
|
* @type {Object}
|
|
17
17
|
*/
|
|
18
18
|
c(this, "dependencies", {
|
|
19
|
-
"wje-icon":
|
|
19
|
+
"wje-icon": v
|
|
20
20
|
});
|
|
21
21
|
/**
|
|
22
22
|
* Class name
|
|
@@ -28,7 +28,7 @@ class d extends g {
|
|
|
28
28
|
* @param {Event} e - The event
|
|
29
29
|
*/
|
|
30
30
|
c(this, "eventDialogOpen", (o) => {
|
|
31
|
-
|
|
31
|
+
s.dispatchCustomEvent(this, this.dialog, {
|
|
32
32
|
bubbles: !0
|
|
33
33
|
});
|
|
34
34
|
});
|
|
@@ -36,8 +36,8 @@ class d extends g {
|
|
|
36
36
|
* Toggle states method
|
|
37
37
|
*/
|
|
38
38
|
c(this, "toggleStates", () => {
|
|
39
|
-
this.slotToggle.assignedNodes().filter((
|
|
40
|
-
|
|
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
43
|
this.internals_ = this.attachInternals();
|
|
@@ -103,14 +103,14 @@ class d extends g {
|
|
|
103
103
|
* @param {boolean} value - The value to set
|
|
104
104
|
*/
|
|
105
105
|
set stopPropagation(o) {
|
|
106
|
-
this.setAttribute("stop-propagation",
|
|
106
|
+
this.setAttribute("stop-propagation", b(o));
|
|
107
107
|
}
|
|
108
108
|
/**
|
|
109
109
|
* Get stop propagation
|
|
110
110
|
* @returns {boolean} stopPropagation - The stop propagation
|
|
111
111
|
*/
|
|
112
112
|
get stopPropagation() {
|
|
113
|
-
return
|
|
113
|
+
return b(this.getAttribute("stop-propagation"));
|
|
114
114
|
}
|
|
115
115
|
/**
|
|
116
116
|
* Get CSS stylesheet
|
|
@@ -118,7 +118,7 @@ class d extends g {
|
|
|
118
118
|
* @returns {Object} styles - The CSS styles
|
|
119
119
|
*/
|
|
120
120
|
static get cssStyleSheet() {
|
|
121
|
-
return
|
|
121
|
+
return m;
|
|
122
122
|
}
|
|
123
123
|
/**
|
|
124
124
|
* Get observed attributes
|
|
@@ -157,29 +157,29 @@ class d extends g {
|
|
|
157
157
|
* @param {Object} params - The parameters
|
|
158
158
|
* @returns {Object} fragment - The document fragment
|
|
159
159
|
*/
|
|
160
|
-
draw(o,
|
|
161
|
-
let
|
|
162
|
-
if (this.hasAttribute("href") ?
|
|
163
|
-
let
|
|
164
|
-
|
|
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);
|
|
165
165
|
}
|
|
166
166
|
if (this.active) {
|
|
167
167
|
this.classList.add("wje-active");
|
|
168
|
-
let
|
|
169
|
-
|
|
168
|
+
let i = document.createElement("wje-icon");
|
|
169
|
+
i.setAttribute("name", "check"), this.appendChild(i);
|
|
170
170
|
}
|
|
171
171
|
let l = document.createElement("span");
|
|
172
172
|
l.classList.add("button-inner");
|
|
173
173
|
let r = document.createElement("slot");
|
|
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 =
|
|
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;
|
|
175
175
|
}
|
|
176
176
|
/**
|
|
177
177
|
* After draw method
|
|
178
178
|
*/
|
|
179
179
|
afterDraw() {
|
|
180
|
-
this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), this.hasAttribute("dialog") ?
|
|
181
|
-
|
|
182
|
-
}), this.type === "reset" &&
|
|
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
183
|
this.internals_.form.reset();
|
|
184
184
|
});
|
|
185
185
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.34",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|