wj-elements 0.1.35 → 0.1.37
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 +21 -15
- package/dist/wje-menu.js +1 -1
- package/dist/wje-route.js +24 -6
- package/dist/wje-routerx.js +1 -1
- package/package.json +1 -1
package/dist/wje-menu-item.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var h = (u, r, e) => (
|
|
4
|
-
import k, { WjElementUtils as E, event as
|
|
1
|
+
var A = Object.defineProperty;
|
|
2
|
+
var y = (u, r, e) => r in u ? A(u, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[r] = e;
|
|
3
|
+
var h = (u, r, e) => (y(u, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
|
+
import k, { WjElementUtils as E, event as l } from "./wje-element.js";
|
|
5
5
|
import { b as L } from "./router-links-FtZbFUto.js";
|
|
6
|
-
const
|
|
6
|
+
const S = ':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;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}: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.
|
|
@@ -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 S;
|
|
70
70
|
}
|
|
71
71
|
/**
|
|
72
72
|
* Getter for observedAttributes.
|
|
@@ -113,8 +113,8 @@ class j extends k {
|
|
|
113
113
|
b.classList.add("label");
|
|
114
114
|
let d = document.createElement("slot");
|
|
115
115
|
d.setAttribute("part", "end"), d.name = "end";
|
|
116
|
-
let
|
|
117
|
-
|
|
116
|
+
let m = document.createElement("slot");
|
|
117
|
+
m.setAttribute("part", "submenu"), m.name = "submenu";
|
|
118
118
|
let x = this.collapse ? "collapse" : "expand", c = document.createElement("span");
|
|
119
119
|
c.setAttribute("part", "submenu-icon"), c.classList.add("submenu-icon", x), c.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(o), i.appendChild(p), i.appendChild(b), i.appendChild(d), i.appendChild(c);
|
|
120
120
|
let v = !1;
|
|
@@ -124,28 +124,34 @@ class j extends k {
|
|
|
124
124
|
) {
|
|
125
125
|
i.setAttribute("slot", "anchor");
|
|
126
126
|
let a = document.createElement("wje-popup");
|
|
127
|
-
a.setAttribute("anchor", "anchor"), a.setAttribute("placement", this.placement), a.setAttribute("offset", this.offset), a.appendChild(i), a.appendChild(
|
|
127
|
+
a.setAttribute("anchor", "anchor"), a.setAttribute("placement", this.placement), a.setAttribute("offset", this.offset), a.appendChild(i), a.appendChild(m), this.popup = a, t.appendChild(a), v = !0;
|
|
128
128
|
}
|
|
129
|
-
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(
|
|
129
|
+
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(m), this.native = i, this.submenu = m, t;
|
|
130
130
|
}
|
|
131
131
|
/**
|
|
132
132
|
* Adds event listeners after drawing the MenuItem.
|
|
133
133
|
*/
|
|
134
134
|
afterDraw() {
|
|
135
|
-
this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition),
|
|
135
|
+
this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), l.addListener(this, "mouseenter", null, (e) => {
|
|
136
136
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
137
137
|
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
138
138
|
return;
|
|
139
|
-
this.submenuActivated(e), e.stopPropagation(), this.showSubmenu()
|
|
139
|
+
this.submenuActivated(e), e.stopPropagation(), this.showSubmenu();
|
|
140
140
|
}
|
|
141
|
-
}),
|
|
141
|
+
}), l.addListener(this, "mouseleave", null, (e) => {
|
|
142
142
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
143
143
|
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
144
144
|
return;
|
|
145
145
|
this.submenuActivated(e), this.hideSubmenu();
|
|
146
146
|
}
|
|
147
|
-
}),
|
|
148
|
-
|
|
147
|
+
}), l.addListener(this, "focusout", null, (e) => {
|
|
148
|
+
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
149
|
+
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
150
|
+
return;
|
|
151
|
+
this.submenuActivated(e), this.hideSubmenu();
|
|
152
|
+
}
|
|
153
|
+
}), l.addListener(this, "click", null, (e) => {
|
|
154
|
+
!this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation()) : (l.dispatchCustomEvent(this, "wje-menu-item:click"), l.dispatchCustomEvent(this, this.dialog, {
|
|
149
155
|
bubbles: !0
|
|
150
156
|
}));
|
|
151
157
|
});
|
package/dist/wje-menu.js
CHANGED
|
@@ -2,7 +2,7 @@ var d = Object.defineProperty;
|
|
|
2
2
|
var m = (n, t, e) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
|
|
3
3
|
var o = (n, t, e) => (m(n, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import l from "./wje-element.js";
|
|
5
|
-
const u = ":host{display:none;background:var(--wje-menu-background);position:relative;border-width:var(--wje-menu-border-width);border-style:var(--wje-menu-border-style);border-color:var(--wje-menu-border-color);z-index:var(--wje-menu-z-index, 8);box-shadow:var(--wje-menu-shadow);border-radius:var(--wje-menu-border-radius);padding-top:var(--wje-menu-padding-top);padding-bottom:var(--wje-menu-padding-bottom);padding-inline:var(--wje-menu-padding-inline);margin-top:var(--wje-menu-margin-top);margin-bottom:var(--wje-menu-margin-bottom);margin-inline:var(--wje-menu-margin-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wje-button){margin:0}:host(.wje-menu-collapse){width:var(--wje-menu-collapse-width)}:host([variant=context]){display:block!important;margin-left:var(--wje-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}";
|
|
5
|
+
const u = ":host{display:none;background:var(--wje-menu-background);position:relative;border-width:var(--wje-menu-border-width);border-style:var(--wje-menu-border-style);border-color:var(--wje-menu-border-color);z-index:var(--wje-menu-z-index, 8);box-shadow:var(--wje-menu-shadow);border-radius:var(--wje-menu-border-radius);padding-top:var(--wje-menu-padding-top);padding-bottom:var(--wje-menu-padding-bottom);padding-inline:var(--wje-menu-padding-inline);margin-top:var(--wje-menu-margin-top);margin-bottom:var(--wje-menu-margin-bottom);margin-inline:var(--wje-menu-margin-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wje-button){margin:0}:host(.wje-menu-collapse){width:var(--wje-menu-collapse-width)}:host([collapse]){box-shadow:none}:host([variant=context]){display:block!important;margin-left:var(--wje-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}";
|
|
6
6
|
class i extends l {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of Menu.
|
package/dist/wje-route.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var u = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var s = (t, e, r) => (
|
|
4
|
-
import
|
|
5
|
-
class
|
|
2
|
+
var c = (t, e, r) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
|
|
3
|
+
var s = (t, e, r) => (c(t, typeof e != "symbol" ? e + "" : e, r), r);
|
|
4
|
+
import m from "./wje-element.js";
|
|
5
|
+
class a extends m {
|
|
6
6
|
/**
|
|
7
7
|
* Creates an instance of Route.
|
|
8
8
|
*
|
|
@@ -21,8 +21,26 @@ class o extends c {
|
|
|
21
21
|
static get observedAttributes() {
|
|
22
22
|
return [];
|
|
23
23
|
}
|
|
24
|
+
/**
|
|
25
|
+
* Sets up the attributes for the component.
|
|
26
|
+
*/
|
|
27
|
+
setupAttributes() {
|
|
28
|
+
this.isShadowRoot = "open";
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Draws the component.
|
|
32
|
+
*
|
|
33
|
+
* @param {Object} context - The context for drawing.
|
|
34
|
+
* @param {Object} store - The store for drawing.
|
|
35
|
+
* @param {Object} params - The parameters for drawing.
|
|
36
|
+
* @returns {DocumentFragment}
|
|
37
|
+
*/
|
|
38
|
+
draw(r, d, l) {
|
|
39
|
+
let o = document.createDocumentFragment(), n = document.createElement("slot");
|
|
40
|
+
return o.appendChild(n), o;
|
|
41
|
+
}
|
|
24
42
|
}
|
|
25
|
-
|
|
43
|
+
a.define("wje-route", a);
|
|
26
44
|
export {
|
|
27
|
-
|
|
45
|
+
a as default
|
|
28
46
|
};
|
package/dist/wje-routerx.js
CHANGED
|
@@ -1073,7 +1073,7 @@ class z extends ct {
|
|
|
1073
1073
|
const s = [];
|
|
1074
1074
|
return Array.from(e.children).forEach((o) => {
|
|
1075
1075
|
s.push(this.parseElement(o));
|
|
1076
|
-
}), s.length > 0 && e.tagName === "
|
|
1076
|
+
}), s.length > 0 && e.tagName === "WJE-ROUTE" ? n.children = s : n.root = s, n;
|
|
1077
1077
|
}
|
|
1078
1078
|
/**
|
|
1079
1079
|
* Cleans up before the component is disconnected.
|
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.37",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|