wj-elements 0.1.21 → 0.1.22
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-menu-item.js +47 -36
- package/dist/wje-tooltip.js +9 -10
- package/package.json +1 -1
package/dist/wje-menu-item.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var A = (
|
|
3
|
-
var c = (
|
|
4
|
-
import k, { WjElementUtils as
|
|
5
|
-
import { b as
|
|
6
|
-
const
|
|
1
|
+
var y = Object.defineProperty;
|
|
2
|
+
var A = (u, o, e) => o in u ? y(u, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[o] = e;
|
|
3
|
+
var c = (u, o, e) => (A(u, typeof o != "symbol" ? o + "" : o, e), e);
|
|
4
|
+
import k, { WjElementUtils as E, event as m } from "./wje-element.js";
|
|
5
|
+
import { b as L } from "./router-links-FtZbFUto.js";
|
|
6
|
+
const C = ':host{--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-item-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;//background: yellow;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0;width:auto;display:contents}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
|
|
7
7
|
class j extends k {
|
|
8
8
|
/**
|
|
9
9
|
* Constructor for MenuItem class.
|
|
@@ -24,11 +24,11 @@ class j extends k {
|
|
|
24
24
|
c(this, "dispatchReposition", (e) => {
|
|
25
25
|
if (this.submenu.assignedNodes().length === 0)
|
|
26
26
|
return;
|
|
27
|
-
let
|
|
28
|
-
const { left:
|
|
29
|
-
this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${
|
|
27
|
+
let s = this.submenu.assignedNodes()[0];
|
|
28
|
+
const { left: n, top: t, width: i, height: r } = s.getBoundingClientRect();
|
|
29
|
+
this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${t}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${t + r}px`);
|
|
30
30
|
});
|
|
31
|
-
|
|
31
|
+
L(this, { selector: !1 }), this.hasSubmenu = E.hasSlot(this, "submenu"), this._collapsible = !1;
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
34
34
|
* Getter for placement attribute.
|
|
@@ -66,7 +66,7 @@ class j extends k {
|
|
|
66
66
|
* @returns {string} The styles imported from styles.css.
|
|
67
67
|
*/
|
|
68
68
|
static get cssStyleSheet() {
|
|
69
|
-
return
|
|
69
|
+
return C;
|
|
70
70
|
}
|
|
71
71
|
/**
|
|
72
72
|
* Getter for observedAttributes.
|
|
@@ -84,9 +84,9 @@ class j extends k {
|
|
|
84
84
|
/**
|
|
85
85
|
* Removes the active attribute from the menu before drawing the MenuItem.
|
|
86
86
|
*/
|
|
87
|
-
beforeDraw(e,
|
|
88
|
-
var
|
|
89
|
-
(
|
|
87
|
+
beforeDraw(e, s, n) {
|
|
88
|
+
var t;
|
|
89
|
+
(t = this.querySelector("wje-menu")) == null || t.removeAttribute("active");
|
|
90
90
|
}
|
|
91
91
|
/**
|
|
92
92
|
* Draws the MenuItem element.
|
|
@@ -96,14 +96,14 @@ class j extends k {
|
|
|
96
96
|
* @param {Object} params - The parameters for drawing.
|
|
97
97
|
* @returns {DocumentFragment} The fragment to be appended to the MenuItem.
|
|
98
98
|
*/
|
|
99
|
-
draw(e,
|
|
99
|
+
draw(e, s, n) {
|
|
100
100
|
var f, w, g;
|
|
101
|
-
let
|
|
102
|
-
this.setAttribute("tabindex", "0"), this.classList.forEach((
|
|
103
|
-
|
|
101
|
+
let t = document.createDocumentFragment();
|
|
102
|
+
this.setAttribute("tabindex", "0"), this.classList.forEach((a) => {
|
|
103
|
+
a.startsWith("wje-menu-variant-") && this.classList.remove(a);
|
|
104
104
|
}), this.classList.remove("collapse"), this.classList.add("wje-menu-variant-" + this.variant.toLowerCase()), this.collapse ? (w = this.parentElement) != null && w.hasAttribute("collapse") && this.classList.add("collapse") : (f = this.querySelector("wje-menu")) == null || f.setAttribute("variant", this.variant.toLowerCase());
|
|
105
|
-
let
|
|
106
|
-
|
|
105
|
+
let i = document.createElement("div");
|
|
106
|
+
i.setAttribute("part", "native"), i.setAttribute("id", "anchor"), i.classList.add("native-menu-item");
|
|
107
107
|
let r = document.createElement("span");
|
|
108
108
|
r.classList.add("check-icon"), r.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? r.classList.add("checked") : r.classList.remove("checked");
|
|
109
109
|
let d = document.createElement("slot");
|
|
@@ -112,39 +112,39 @@ class j extends k {
|
|
|
112
112
|
p.classList.add("label");
|
|
113
113
|
let b = document.createElement("slot");
|
|
114
114
|
b.name = "end";
|
|
115
|
-
let
|
|
116
|
-
|
|
117
|
-
let
|
|
118
|
-
h.classList.add("submenu-icon",
|
|
115
|
+
let l = document.createElement("slot");
|
|
116
|
+
l.setAttribute("part", "submenu"), l.name = "submenu";
|
|
117
|
+
let x = this.collapse ? "collapse" : "expand", h = document.createElement("span");
|
|
118
|
+
h.classList.add("submenu-icon", x), h.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? i.classList.add("has-submenu") : i.classList.remove("has-submenu"), i.appendChild(r), i.appendChild(d), i.appendChild(p), i.appendChild(b), i.appendChild(h);
|
|
119
119
|
let v = !1;
|
|
120
120
|
if (
|
|
121
121
|
/*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
|
|
122
122
|
this.variant === "CONTEXT" && this.hasSubmenu
|
|
123
123
|
) {
|
|
124
|
-
|
|
125
|
-
let
|
|
126
|
-
|
|
124
|
+
i.setAttribute("slot", "anchor");
|
|
125
|
+
let a = document.createElement("wje-popup");
|
|
126
|
+
a.setAttribute("anchor", "anchor"), a.setAttribute("placement", this.placement), a.setAttribute("offset", this.offset), a.appendChild(i), a.appendChild(l), this.popup = a, t.appendChild(a), v = !0;
|
|
127
127
|
}
|
|
128
|
-
return (g = this.parentElement) != null && g.hasAttribute("collapse") && !this.hasSubmenu ?
|
|
128
|
+
return (g = this.parentElement) != null && g.hasAttribute("collapse") && !this.hasSubmenu ? t.appendChild(this.collapseItem(i)) : v || t.appendChild(i), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && t.appendChild(l), this.native = i, this.submenu = l, t;
|
|
129
129
|
}
|
|
130
130
|
/**
|
|
131
131
|
* Adds event listeners after drawing the MenuItem.
|
|
132
132
|
*/
|
|
133
133
|
afterDraw() {
|
|
134
|
-
this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition),
|
|
134
|
+
this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), m.addListener(this, "mouseover", null, (e) => {
|
|
135
135
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
136
136
|
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
137
137
|
return;
|
|
138
138
|
this.submenuActivated(e), e.stopPropagation(), this.showSubmenu(), this.focus();
|
|
139
139
|
}
|
|
140
|
-
}),
|
|
140
|
+
}), m.addListener(this, "focusout", null, (e) => {
|
|
141
141
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
142
142
|
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
143
143
|
return;
|
|
144
144
|
this.submenuActivated(e), this.hideSubmenu();
|
|
145
145
|
}
|
|
146
|
-
}),
|
|
147
|
-
!this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation()) : (
|
|
146
|
+
}), m.addListener(this, "click", null, (e) => {
|
|
147
|
+
!this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation()) : (m.dispatchCustomEvent(this, "wje-menu-item:click"), m.dispatchCustomEvent(this, this.dialog, {
|
|
148
148
|
bubbles: !0
|
|
149
149
|
}));
|
|
150
150
|
});
|
|
@@ -155,8 +155,13 @@ class j extends k {
|
|
|
155
155
|
* @returns {HTMLElement} The tooltip element.
|
|
156
156
|
*/
|
|
157
157
|
collapseItem(e) {
|
|
158
|
-
|
|
159
|
-
|
|
158
|
+
console.log("collapseItem", this.getTextFromElement(this));
|
|
159
|
+
let s = document.createElement("slot");
|
|
160
|
+
s.setAttribute("slot", "start"), s.setAttribute("name", "tooltip-start");
|
|
161
|
+
let n = document.createElement("slot");
|
|
162
|
+
n.setAttribute("slot", "end"), n.setAttribute("name", "tooltip-end");
|
|
163
|
+
let t = document.createElement("wje-tooltip");
|
|
164
|
+
return t.setAttribute("content", this.getTextFromElement(this)), t.setAttribute("placement", "right"), t.setAttribute("offset", this.offset || "0"), t.appendChild(s), t.appendChild(n), t.appendChild(e), t;
|
|
160
165
|
}
|
|
161
166
|
/**
|
|
162
167
|
* Shows the submenu of the MenuItem.
|
|
@@ -175,8 +180,8 @@ class j extends k {
|
|
|
175
180
|
*/
|
|
176
181
|
submenuActivated(e) {
|
|
177
182
|
if (this.hasSubmenu) {
|
|
178
|
-
let
|
|
179
|
-
|
|
183
|
+
let s = this.submenu.assignedElements({ flatten: !0 })[0];
|
|
184
|
+
s.hasAttribute("active") ? this === e.target && s.removeAttribute("active") : s.setAttribute("active", "");
|
|
180
185
|
}
|
|
181
186
|
}
|
|
182
187
|
/**
|
|
@@ -185,6 +190,12 @@ class j extends k {
|
|
|
185
190
|
beforeDisconnect() {
|
|
186
191
|
this.context.innerHTML = "";
|
|
187
192
|
}
|
|
193
|
+
getTextFromElement(e) {
|
|
194
|
+
let s = "";
|
|
195
|
+
for (let n of e.childNodes)
|
|
196
|
+
n.nodeType === Node.TEXT_NODE && (s += n.textContent);
|
|
197
|
+
return s.trim();
|
|
198
|
+
}
|
|
188
199
|
}
|
|
189
200
|
j.define("wje-menu-item", j);
|
|
190
201
|
export {
|
package/dist/wje-tooltip.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var w = Object.defineProperty;
|
|
2
|
-
var v = (
|
|
3
|
-
var n = (
|
|
2
|
+
var v = (i, e, t) => e in i ? w(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
|
|
3
|
+
var n = (i, e, t) => (v(i, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
4
|
import f, { event as a } from "./wje-element.js";
|
|
5
5
|
const b = '.native-tooltip{display:flex;align-items:center;padding:var(--wje-tooltip-spacing);color:var(--wje-tooltip-color);background-color:var(--wje-tooltip-background);font-weight:400;font-size:var(--wje-tooltip-font-size);border-radius:var(--wje-tooltip-border-radius);line-height:1;box-sizing:border-box;box-shadow:var(--wje-tooltip-shadow)}::slotted([slot="start"]){margin:0 .3rem 0 0}::slotted([slot="end"]){margin:0 0 0 .3rem}.arrow{position:absolute;width:10px;height:10px;background:var(--wje-tooltip-arrow-color);transform:rotate(45deg)}';
|
|
6
6
|
class m extends f {
|
|
@@ -69,7 +69,7 @@ class m extends f {
|
|
|
69
69
|
* @param {Object} params - The parameters
|
|
70
70
|
* @returns {Object} Document fragment
|
|
71
71
|
*/
|
|
72
|
-
draw(t,
|
|
72
|
+
draw(t, s, g) {
|
|
73
73
|
let d = document.createDocumentFragment(), o = document.createElement("wje-popup");
|
|
74
74
|
o.setAttribute("placement", this.placement || "top"), o.setAttribute("offset", this.offset || "0");
|
|
75
75
|
let l = document.createElement("slot");
|
|
@@ -82,21 +82,20 @@ class m extends f {
|
|
|
82
82
|
p.setAttribute("name", "end");
|
|
83
83
|
let u = document.createElement("div");
|
|
84
84
|
u.innerHTML = this.content;
|
|
85
|
-
let
|
|
86
|
-
return
|
|
85
|
+
let r = document.createElement("div");
|
|
86
|
+
return r.setAttribute("part", "native"), r.classList.add("native-tooltip"), r.appendChild(h), r.appendChild(u), r.appendChild(p), o.appendChild(l), o.appendChild(c), o.appendChild(r), this.mySlot = l, this.popup = o, this.native = r, d.appendChild(o), d;
|
|
87
87
|
}
|
|
88
88
|
/**
|
|
89
89
|
* @summary After draw method
|
|
90
90
|
*/
|
|
91
91
|
afterDraw() {
|
|
92
|
-
console.log("Assigned", this.selector, this.mySlot.assignedElements()[0].querySelector(this.selector));
|
|
93
92
|
let t = this.mySlot.assignedElements()[0];
|
|
94
93
|
this.selector && (t = this.checkSelector(t)), t && (a.addListener(t, "mouseenter", null, this.onShow), a.addListener(t, "mouseleave", null, this.onHide), a.addListener(t, "click", null, this.onHide));
|
|
95
94
|
}
|
|
96
95
|
dispatch(t) {
|
|
97
|
-
return new Promise((
|
|
96
|
+
return new Promise((s) => {
|
|
98
97
|
a.dispatchCustomEvent(this, t, {
|
|
99
|
-
resolve:
|
|
98
|
+
resolve: s
|
|
100
99
|
});
|
|
101
100
|
});
|
|
102
101
|
}
|
|
@@ -106,8 +105,8 @@ class m extends f {
|
|
|
106
105
|
afterShow() {
|
|
107
106
|
}
|
|
108
107
|
checkSelector(t) {
|
|
109
|
-
const
|
|
110
|
-
return
|
|
108
|
+
const s = t.querySelector(this.selector);
|
|
109
|
+
return s === null && console.error("Selector not found:", this.selector), s;
|
|
111
110
|
}
|
|
112
111
|
}
|
|
113
112
|
m.define("wje-tooltip", m);
|
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.22",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|