wj-elements 0.0.3 → 0.0.5

package/dist/wj-menu-button.js

@@ -1,19 +1,19 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { event } from "./wj-element.js";
+var c = Object.defineProperty;
+var i = (n, t, e) => t in n ? c(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (i(n, typeof t != "symbol" ? t + "" : t, e), e);
+import l, { event as u } from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu Label ]\n*/\n:host {\n  display: inline-flex;\n}\n@media (min-width: 768px) {\n  :host {\n    display: none;\n  }\n}";
-class MenuButton extends WJElement {
+const m = `/*!
+* direction.scss
+*/:host{display:inline-flex}@media (min-width: 768px){:host{display:none}}
+`;
+class a extends l {
   constructor() {
     super();
-    __publicField(this, "className", "MenuButton");
+    o(this, "className", "MenuButton");
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -21,20 +21,17 @@ class MenuButton extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    fragment.appendChild(slot);
-    return fragment;
+  draw(e, d, p) {
+    let s = document.createDocumentFragment(), r = document.createElement("slot");
+    return s.appendChild(r), s;
   }
   afterDraw() {
-    event.addListener(this, "click", null, (e) => {
-      console.log("click menu button", this.contentId);
-      document.querySelector(`#${this.contentId}`).classList.toggle("open");
+    u.addListener(this, "click", null, (e) => {
+      console.log("click menu button", this.contentId), document.querySelector(`#${this.contentId}`).classList.toggle("open");
     });
   }
 }
-customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", MenuButton);
+customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", a);
 export {
-  MenuButton
+  a as MenuButton
 };

package/dist/wj-menu-item.js

@@ -1,178 +1,101 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { WjElementUtils, event } from "./wj-element.js";
+var f = Object.defineProperty;
+var g = (o, n, e) => n in o ? f(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var l = (o, n, e) => (g(o, typeof n != "symbol" ? n + "" : n, e), e);
+import j, { WjElementUtils as y, event as m } from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu Item ]\n*/\n:host {\n  --wj-menu-submenu-offset: 0;\n  --wj-menu-item-padding-top: .5rem;\n  --wj-menu-item-padding-bottom: .5rem;\n  --wj-menu-item-line-height: 1.8rem;\n  --wj-menu-item-safe-triangle-cursor-x: 0;\n  --wj-menu-item-safe-triangle-cursor-y: 0;\n  --wj-menu-item-safe-triangle-submenu-start-x: 0;\n  --wj-menu-item-safe-triangle-submenu-start-y: 0;\n  --wj-menu-item-safe-triangle-submenu-end-x: 0;\n  --wj-menu-item-safe-triangle-submenu-end-y: 0;\n  --wj-menu-item-color-hover: $color-contrast-high;\n  --wj-menu-item-background-hover: $color-contrast-lower;\n  --wj-menu-item-color-active: $color-contrast-high;\n  --wj-menu-item-background-active: $color-contrast-lower;\n  display: block;\n}\n:host .native-menu-item {\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  color: var(--wj-color);\n  padding-top: var(--wj-menu-item-padding-top);\n  padding-bottom: var(--wj-menu-item-padding-bottom);\n  transition: var(--wj-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n  width: 100%;\n  line-height: var(--wj-menu-item-line-height);\n}\n:host .native-menu-item:hover, :host .native-menu-item:focus {\n  color: var(--wj-menu-item-color-hover);\n  background-color: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item:active {\n  color: var(--wj-menu-item-color-active);\n  background-color: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item .label {\n  flex: 1 1 auto;\n  display: inline-block;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n:host .native-menu-item .check-icon {\n  flex: 0 0 auto;\n  display: var(--wj-menu-item-check-icon-display, flex);\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: hidden;\n}\n:host .native-menu-item .check-icon.checked {\n  visibility: visible;\n}\n:host .native-menu-item .submenu-icon {\n  --wj-icon-size: 14px !important;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: hidden;\n}\n:host .native-menu-item.has-submenu .submenu-icon {\n  visibility: visible;\n}\n:host .native-menu-item.expanded-submenu {\n  color: var(--wj-menu-item-color-active);\n  background-color: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item.expanded-submenu:hover {\n  color: var(--wj-menu-item-color-hover);\n  background-color: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item.expanded-submenu::after {\n  content: "";\n  position: fixed;\n  z-index: calc(var(--wj-z-index-menu) - 1);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  clip-path: polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y), var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y), var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y));\n}\n:host(:focus-visible) {\n  outline: none;\n}\n::slotted([slot=start]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: 0.5rem;\n}\n::slotted([slot=end]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0.5rem;\n}\n:host(.wj-menu-variant-nav) ::slotted([slot=submenu]) {\n  --wj-menu-border-width: 0 !important;\n}\n:host ::slotted([slot=start]) {\n  width: 1.5rem;\n}\n:host ::slotted([slot=submenu]) {\n  margin-left: var(--wj-menu-submenu-offset);\n}\n:host(.wj-menu-variant-context) {\n  display: block;\n}\n:host(.wj-menu-collapse) .label, :host(.wj-menu-collapse) .submenu-icon {\n  display: none !important;\n}\n:host(.wj-menu-collapse) ::slotted([slot=end]) {\n  display: none;\n}';
-class MenuItem extends WJElement {
+const x = `/*!
+* direction.scss
+*/:host{--wj-menu-submenu-offset: 0;--wj-menu-item-padding-top: .5rem;--wj-menu-item-padding-bottom: .5rem;--wj-menu-item-line-height: 1.8rem;--wj-menu-item-safe-triangle-cursor-x: 0;--wj-menu-item-safe-triangle-cursor-y: 0;--wj-menu-item-safe-triangle-submenu-start-x: 0;--wj-menu-item-safe-triangle-submenu-start-y: 0;--wj-menu-item-safe-triangle-submenu-end-x: 0;--wj-menu-item-safe-triangle-submenu-end-y: 0;--wj-menu-item-color-hover: $color-contrast-high;--wj-menu-item-background-hover: $color-contrast-lower;--wj-menu-item-color-active: $color-contrast-high;--wj-menu-item-background-active: $color-contrast-lower;display:block}:host .native-menu-item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;color:var(--wj-color);padding-top:var(--wj-menu-item-padding-top);padding-bottom:var(--wj-menu-item-padding-bottom);transition:var(--wj-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%;line-height:var(--wj-menu-item-line-height)}:host .native-menu-item:hover,:host .native-menu-item:focus{color:var(--wj-menu-item-color-hover);background-color:var(--wj-menu-item-background-hover)}:host .native-menu-item:active{color:var(--wj-menu-item-color-active);background-color:var(--wj-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wj-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:1.5rem;visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item .submenu-icon{--wj-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:hidden}:host .native-menu-item.has-submenu .submenu-icon{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wj-menu-item-color-active);background-color:var(--wj-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wj-menu-item-color-hover);background-color:var(--wj-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:calc(var(--wj-z-index-menu) - 1);top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y),var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y),var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y))}: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(.wj-menu-variant-nav) ::slotted([slot=submenu]){--wj-menu-border-width: 0 !important}:host ::slotted([slot=start]){width:1.5rem}:host ::slotted([slot=submenu]){margin-left:var(--wj-menu-submenu-offset)}:host(.wj-menu-variant-context){display:block}:host(.wj-menu-collapse) .label,:host(.wj-menu-collapse) .submenu-icon{display:none!important}:host(.wj-menu-collapse) ::slotted([slot=end]){display:none}
+`;
+class A extends j {
   constructor() {
     super();
-    __publicField(this, "className", "MenuItem");
-    __publicField(this, "dispatchMove", (e) => {
-      this.style.setProperty("--wj-menu-item-safe-triangle-cursor-x", `${e.clientX}px`);
-      this.style.setProperty("--wj-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
+    l(this, "className", "MenuItem");
+    l(this, "dispatchMove", (e) => {
+      this.style.setProperty("--wj-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wj-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
     });
-    __publicField(this, "dispatchReposition", (e) => {
-      let submenu = this.submenu.assignedNodes()[0];
-      const { left, top, width, height } = submenu.getBoundingClientRect();
-      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-x", `${left}px`);
-      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-y", `${top}px`);
-      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-x", `${left}px`);
-      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-y", `${top + height}px`);
+    l(this, "dispatchReposition", (e) => {
+      let r = this.submenu.assignedNodes()[0];
+      const { left: c, top: s, width: t, height: a } = r.getBoundingClientRect();
+      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-x", `${c}px`), this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-y", `${s}px`), this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-x", `${c}px`), this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-y", `${s + a}px`);
     });
-    this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
-    this._collapsible = false;
+    this.hasSubmenu = y.hasSlot(this, "submenu"), this._collapsible = !1;
   }
   get placement() {
-    let menu = this.querySelector("wj-menu");
-    if (menu == null ? void 0 : menu.hasAttribute("placement")) {
-      return menu.getAttribute("placement");
-    }
-    return "right-start";
+    let e = this.querySelector("wj-menu");
+    return e != null && e.hasAttribute("placement") ? e.getAttribute("placement") : "right-start";
   }
   get offset() {
-    let menu = this.querySelector("wj-menu");
-    if (menu == null ? void 0 : menu.hasAttribute("offset")) {
-      return menu.getAttribute("offset");
-    }
-    return "0";
+    let e = this.querySelector("wj-menu");
+    return e != null && e.hasAttribute("offset") ? e.getAttribute("offset") : "0";
   }
   get variant() {
-    let menu = this.querySelector("wj-menu");
-    if (menu == null ? void 0 : menu.hasAttribute("variant")) {
-      return menu.getAttribute("variant").toUpperCase();
-    }
-    return "CONTEXT";
+    let e = this.querySelector("wj-menu");
+    return e != null && e.hasAttribute("variant") ? e.getAttribute("variant").toUpperCase() : "CONTEXT";
   }
   get collapse() {
-    var _a;
-    return (_a = this.parentElement) == null ? void 0 : _a.hasAttribute("collapse");
+    var e;
+    return (e = this.parentElement) == null ? void 0 : e.hasAttribute("collapse");
   }
   static get cssStyleSheet() {
-    return styles;
+    return x;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    super.setupAttributes();
-    this.isShadowRoot = "open";
+    super.setupAttributes(), this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    var _a;
-    let fragment = document.createDocumentFragment();
-    this.classList.add("wj-menu-variant-" + this.variant.toLowerCase());
-    (_a = this.querySelector("wj-menu")) == null ? void 0 : _a.setAttribute("variant", this.variant.toLowerCase());
-    if (this.collapse)
-      this.classList.add("wj-menu-collapse");
-    let native = document.createElement("div");
-    native.setAttribute("slot", "anchor");
-    native.setAttribute("part", "native");
-    native.setAttribute("id", "anchor");
-    native.classList.add("native-menu-item");
-    let checkedIcon = document.createElement("span");
-    checkedIcon.classList.add("check-icon");
-    checkedIcon.innerHTML = `<wj-icon name="check"></wj-icon>`;
-    this.hasAttribute("checked") ? checkedIcon.classList.add("checked") : checkedIcon.classList.remove("checked");
-    let start = document.createElement("slot");
-    start.name = "start";
-    let slot = document.createElement("slot");
-    slot.classList.add("label");
-    let end = document.createElement("slot");
-    end.name = "end";
-    let submenu = document.createElement("slot");
-    submenu.setAttribute("part", "submenu");
-    submenu.name = "submenu";
-    let submenutIcon = document.createElement("span");
-    submenutIcon.classList.add("submenu-icon");
-    submenutIcon.innerHTML = this.collapse ? `<wj-icon name="chevron-down"></wj-icon>` : `<wj-icon name="chevron-right"></wj-icon>`;
-    this.hasSubmenu ? native.classList.add("has-submenu") : native.classList.remove("has-submenu");
-    native.appendChild(checkedIcon);
-    native.appendChild(start);
-    native.appendChild(slot);
-    native.appendChild(end);
-    native.appendChild(submenutIcon);
-    let isAppend = false;
+  draw(e, r, c) {
+    var w;
+    let s = document.createDocumentFragment();
+    this.classList.add("wj-menu-variant-" + this.variant.toLowerCase()), (w = this.querySelector("wj-menu")) == null || w.setAttribute("variant", this.variant.toLowerCase()), this.collapse && this.classList.add("wj-menu-collapse");
+    let t = document.createElement("div");
+    t.setAttribute("slot", "anchor"), t.setAttribute("part", "native"), t.setAttribute("id", "anchor"), t.classList.add("native-menu-item");
+    let a = document.createElement("span");
+    a.classList.add("check-icon"), a.innerHTML = '<wj-icon name="check"></wj-icon>', this.hasAttribute("checked") ? a.classList.add("checked") : a.classList.remove("checked");
+    let d = document.createElement("slot");
+    d.name = "start";
+    let p = document.createElement("slot");
+    p.classList.add("label");
+    let b = document.createElement("slot");
+    b.name = "end";
+    let u = document.createElement("slot");
+    u.setAttribute("part", "submenu"), u.name = "submenu";
+    let h = document.createElement("span");
+    h.classList.add("submenu-icon"), h.innerHTML = this.collapse ? '<wj-icon name="chevron-down"></wj-icon>' : '<wj-icon name="chevron-right"></wj-icon>', this.hasSubmenu ? t.classList.add("has-submenu") : t.classList.remove("has-submenu"), t.appendChild(a), t.appendChild(d), t.appendChild(p), t.appendChild(b), t.appendChild(h);
+    let v = !1;
     if (this.collapse && this.variant === "NAV" && this.hasSubmenu || this.variant === "CONTEXT" && this.hasSubmenu) {
-      let popup = document.createElement("wj-popup");
-      popup.setAttribute("anchor", "anchor");
-      popup.setAttribute("placement", this.placement);
-      popup.setAttribute("offset", this.offset);
-      popup.appendChild(native);
-      popup.appendChild(submenu);
-      this.popup = popup;
-      fragment.appendChild(popup);
-      isAppend = true;
-    }
-    this.native = native;
-    this.submenu = submenu;
-    if (this.collapse && !this.hasSubmenu) {
-      let tooltip = document.createElement("wj-tooltip");
-      tooltip.setAttribute("content", this.textContent);
-      tooltip.setAttribute("placement", "right");
-      tooltip.setAttribute("offset", this.offset || "0");
-      tooltip.appendChild(native);
-      fragment.appendChild(tooltip);
-    } else if (!isAppend) {
-      fragment.appendChild(native);
+      let i = document.createElement("wj-popup");
+      i.setAttribute("anchor", "anchor"), i.setAttribute("placement", this.placement), i.setAttribute("offset", this.offset), i.appendChild(t), i.appendChild(u), this.popup = i, s.appendChild(i), v = !0;
     }
-    if (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) {
-      fragment.appendChild(submenu);
-    }
-    return fragment;
+    if (this.native = t, this.submenu = u, this.collapse && !this.hasSubmenu) {
+      let i = document.createElement("wj-tooltip");
+      i.setAttribute("content", this.textContent), i.setAttribute("placement", "right"), i.setAttribute("offset", this.offset || "0"), i.appendChild(t), s.appendChild(i);
+    } else
+      v || s.appendChild(t);
+    return (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && s.appendChild(u), s;
   }
   afterDraw() {
-    this.addEventListener("mousemove", this.dispatchMove);
-    this.addEventListener("wj-popup:reposition", this.dispatchReposition);
-    event.addListener(this, "mouseover", null, (e) => {
-      if (this.hasAttribute("manual"))
-        return;
-      e.stopPropagation();
-      this.showSubmenu();
-      this.focus();
-    });
-    event.addListener(this, "focusout", null, (e) => {
-      if (e.relatedTarget && this.contains(e.relatedTarget)) {
-        return;
-      }
-      this.hideSubmenu();
+    this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wj-popup:reposition", this.dispatchReposition), m.addListener(this, "mouseover", null, (e) => {
+      this.hasAttribute("manual") || (e.stopPropagation(), this.showSubmenu(), this.focus());
+    }), m.addListener(this, "focusout", null, (e) => {
+      e.relatedTarget && this.contains(e.relatedTarget) || this.hideSubmenu();
+    }), !this.collapse && this.variant === "NAV" && this.hasSubmenu ? m.addListener(this, "click", null, (e) => {
+      let r = this.submenu.assignedElements({ flatten: !0 })[0];
+      r.hasAttribute("active") ? this === e.target && r.removeAttribute("active") : r.setAttribute("active", ""), e.stopPropagation();
+    }) : m.addListener(this, "click", null, (e) => {
+      console.log("CLICK", this);
     });
-    if (!this.collapse && this.variant === "NAV" && this.hasSubmenu) {
-      event.addListener(this, "click", null, (e) => {
-        let submenutElements = this.submenu.assignedElements({ flatten: true })[0];
-        if (!submenutElements.hasAttribute("active")) {
-          submenutElements.setAttribute("active", "");
-        } else {
-          if (this === e.target)
-            submenutElements.removeAttribute("active");
-        }
-        e.stopPropagation();
-      });
-    } else {
-      event.addListener(this, "click", null, (e) => {
-        console.log("CLICK", this);
-      });
-    }
   }
   showSubmenu() {
-    this.tabIndex = -1;
-    if (this.hasSubmenu) {
-      this.popup.setAttribute("active", "");
-      this.native.classList.add("expanded-submenu");
-    }
+    this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.native.classList.add("expanded-submenu"));
   }
   hideSubmenu() {
-    this.tabIndex = 0;
-    if (this.hasSubmenu) {
-      this.popup.removeAttribute("active");
-      this.native.classList.remove("expanded-submenu");
-    }
+    this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.native.classList.remove("expanded-submenu"));
   }
 }
-customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", MenuItem);
+customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", A);
 export {
-  MenuItem
+  A as MenuItem
 };

package/dist/wj-menu-label.js

@@ -1,20 +1,20 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { WjElementUtils } from "./wj-element.js";
+var r = Object.defineProperty;
+var o = (t, e, n) => e in t ? r(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var l = (t, e, n) => (o(t, typeof e != "symbol" ? e + "" : e, n), n);
+import i, { WjElementUtils as m } from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu Label ]\n*/\n:host {\n  --wj-menu-label-font-size: .75rem;\n  --wj-menu-label-weight: 600;\n  --wj-letter-spacing: .025rem;\n  --wj-menu-label-color: rgba(33, 33, 33, 0.62);\n  --wj-padding-top: 0;\n  --wj-padding-bottom: 0;\n  --wj-padding-start: 1.5rem;\n  --wj-padding-end: 1.5rem;\n}\n:host .native-menu-label {\n  font-size: var(--wj-menu-label-font-size);\n  display: inline-block;\n  font-weight: var(--wj-menu-label-weight);\n  letter-spacing: var(--wj-letter-spacing);\n  color: var(--wj-menu-label-color);\n  padding: var(--wj-padding-top) var(--wj-padding-start) var(--wj-padding-bottom) var(--wj-padding-end);\n}";
-class MenuLabel extends WJElement {
+const d = `/*!
+* direction.scss
+*/:host{--wj-menu-label-font-size: .75rem;--wj-menu-label-weight: 600;--wj-letter-spacing: .025rem;--wj-menu-label-color: rgba(33, 33, 33, .62);--wj-padding-top: 0;--wj-padding-bottom: 0;--wj-padding-start: 1.5rem;--wj-padding-end: 1.5rem}:host .native-menu-label{font-size:var(--wj-menu-label-font-size);display:inline-block;font-weight:var(--wj-menu-label-weight);letter-spacing:var(--wj-letter-spacing);color:var(--wj-menu-label-color);padding:var(--wj-padding-top) var(--wj-padding-start) var(--wj-padding-bottom) var(--wj-padding-end)}
+`;
+class u extends i {
   constructor() {
     super();
-    __publicField(this, "className", "MenuLabel");
-    this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
+    l(this, "className", "MenuLabel");
+    this.hasSubmenu = m.hasSlot(this, "submenu");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   static get observedAttributes() {
     return [];
@@ -22,16 +22,12 @@ class MenuLabel extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    slot.setAttribute("part", "base");
-    slot.classList.add("native-menu-label");
-    fragment.appendChild(slot);
-    return fragment;
+  draw(n, c, p) {
+    let s = document.createDocumentFragment(), a = document.createElement("slot");
+    return a.setAttribute("part", "base"), a.classList.add("native-menu-label"), s.appendChild(a), s;
   }
 }
-customElements.get("wj-menu-label") || window.customElements.define("wj-menu-label", MenuLabel);
+customElements.get("wj-menu-label") || window.customElements.define("wj-menu-label", u);
 export {
-  MenuLabel
+  u as MenuLabel
 };

package/dist/wj-menu.js

@@ -1,19 +1,19 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var d = Object.defineProperty;
+var s = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var a = (t, e, n) => (s(t, typeof e != "symbol" ? e + "" : e, n), n);
+import m from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu ]\n*/\n:host {\n  --wj-menu-background: #fff;\n  --wj-menu-border-width: 1px;\n  --wj-menu-border-style: solid;\n  --wj-menu-border-color: var(--wj-border-color);\n  --wj-menu-border-radius: 4px;\n  --wj-menu-padding-top: .5rem;\n  --wj-menu-padding-bottom: .5rem;\n  --wj-menu-padding-inline: 0;\n  --wj-menu-z-index: 900;\n  display: none;\n  background: var(--wj-menu-background);\n  position: relative;\n  border-width: var(--wj-menu-border-width);\n  border-style: var(--wj-menu-border-style);\n  border-color: var(--wj-menu-border-color);\n  z-index: var(--wj-menu-z-index);\n  border-radius: var(--wj-menu-border-radius);\n  -webkit-border-radius: var(--wj-menu-border-radius);\n  -moz-border-radius: var(--wj-menu-border-radius);\n  padding-top: var(--wj-menu-padding-top);\n  padding-bottom: var(--wj-menu-padding-bottom);\n  padding-inline: var(--wj-menu-padding-inline);\n  overflow: auto;\n  overscroll-behavior: none;\n}\n:host .native-menu {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n:host .native-menu ::slotted(wj-button) {\n  margin: 0;\n}\n:host(.wj-menu-collapse) {\n  max-width: 70px !important;\n}\n:host([variant=context]) {\n  display: block !important;\n  margin-left: var(--wj-menu-submenu-offset);\n}\n:host([variant=megamenu]) .native-menu {\n  flex-direction: row;\n  align-items: end;\n  flex-wrap: nowrap;\n}\n:host([variant=megamenu]) .native-menu .check-icon {\n  display: none;\n}\n:host([active]) {\n  display: flex !important;\n}";
-class Menu extends WJElement {
+const u = `/*!
+* direction.scss
+*/:host{--wj-menu-background: #fff;--wj-menu-border-width: 1px;--wj-menu-border-style: solid;--wj-menu-border-color: var(--wj-border-color);--wj-menu-border-radius: 4px;--wj-menu-padding-top: .5rem;--wj-menu-padding-bottom: .5rem;--wj-menu-padding-inline: 0;--wj-menu-z-index: 900;display:none;background:var(--wj-menu-background);position:relative;border-width:var(--wj-menu-border-width);border-style:var(--wj-menu-border-style);border-color:var(--wj-menu-border-color);z-index:var(--wj-menu-z-index);border-radius:var(--wj-menu-border-radius);-webkit-border-radius:var(--wj-menu-border-radius);-moz-border-radius:var(--wj-menu-border-radius);padding-top:var(--wj-menu-padding-top);padding-bottom:var(--wj-menu-padding-bottom);padding-inline:var(--wj-menu-padding-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wj-button){margin:0}:host(.wj-menu-collapse){max-width:70px!important}:host([variant=context]){display:block!important;margin-left:var(--wj-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}
+`;
+class l extends m {
   constructor() {
     super();
-    __publicField(this, "className", "Menu");
+    a(this, "className", "Menu");
   }
   static get cssStyleSheet() {
-    return styles;
+    return u;
   }
   static get observedAttributes() {
     return ["active"];
@@ -21,20 +21,16 @@ class Menu extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    this.classList.remove("wj-menu-collapse");
-    if (this.hasAttribute("collapse"))
-      this.classList.add("wj-menu-collapse");
-    let native = document.createElement("div");
-    native.classList.add("native-menu");
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    return fragment;
+  draw(n, c, w) {
+    let o = document.createDocumentFragment();
+    this.classList.remove("wj-menu-collapse"), this.hasAttribute("collapse") && this.classList.add("wj-menu-collapse");
+    let r = document.createElement("div");
+    r.classList.add("native-menu");
+    let i = document.createElement("slot");
+    return r.appendChild(i), o.appendChild(r), o;
   }
 }
-customElements.get("wj-menu") || window.customElements.define("wj-menu", Menu);
+customElements.get("wj-menu") || window.customElements.define("wj-menu", l);
 export {
-  Menu
+  l as Menu
 };