wj-elements 0.1.35 → 0.1.36
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 +20 -14
- 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
139
|
this.submenuActivated(e), e.stopPropagation(), this.showSubmenu(), this.focus();
|
|
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/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.36",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|