wj-elements 0.0.3 → 0.0.4

package/dist/wj-footer.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 c = Object.defineProperty;
+var i = (e, t, o) => t in e ? c(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var r = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
+import a from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Footer ]\n*/\n:host {\n  --wj-footer-height: 60px;\n  padding: 0 20px;\n  flex-shrink: 0;\n  height: var(--wj-footer-height);\n  display: block;\n}";
-class Footer extends WJElement {
+const m = `/*!
+* direction.scss
+*/:host{--wj-footer-height: 60px;padding:0 20px;flex-shrink:0;height:var(--wj-footer-height);display:block}
+`;
+class l extends a {
   constructor() {
     super();
-    __publicField(this, "className", "Footer");
+    r(this, "className", "Footer");
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +21,12 @@ class Footer extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(o, d, p) {
+    let s = document.createDocumentFragment(), n = document.createElement("slot");
+    return s.appendChild(n), s;
   }
 }
-customElements.get("wj-footer") || window.customElements.define("wj-footer", Footer);
+customElements.get("wj-footer") || window.customElements.define("wj-footer", l);
 export {
-  Footer
+  l as Footer
 };

package/dist/wj-form.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 m = Object.defineProperty;
+var c = (e, t, s) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var o = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
+import a from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Form ]\n*/\n:host {\n  width: 100%;\n}";
-class Form extends WJElement {
+const i = `/*!
+* direction.scss
+*/:host{width:100%}
+`;
+class l extends a {
   constructor() {
     super();
-    __publicField(this, "className", "Form");
+    o(this, "className", "Form");
   }
   static get cssStyleSheet() {
-    return styles;
+    return i;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +21,12 @@ class Form extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(s, u, d) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
   }
 }
-customElements.get("wj-form") || window.customElements.define("wj-form", Form);
+customElements.get("wj-form") || window.customElements.define("wj-form", l);
 export {
-  Form
+  l as Form
 };

package/dist/wj-grid.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 from "./wj-element.js";
+var w = Object.defineProperty;
+var u = (t, g, e) => g in t ? w(t, g, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[g] = e;
+var x = (t, g, e) => (u(t, typeof g != "symbol" ? g + "" : g, e), e);
+import j from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Grid ]\n*/\n:host {\n  width: 100%;\n  flex-grow: 0;\n}\n/*\n[ Row ]\n*/\nwj-row {\n  display: flex;\n  flex-wrap: wrap;\n}\nwj-row {\n  --wj-gutter-x: 1.5rem;\n  --wj-gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: calc(var(--wj-gutter-y) * -1);\n  margin-right: calc(var(--wj-gutter-x) * -0.5);\n  margin-left: calc(var(--wj-gutter-x) * -0.5);\n}\n.g-0,\n.gx-0 {\n  --wj-gutter-x: 0;\n}\n.g-0,\n.gy-0 {\n  --wj-gutter-y: 0;\n}\n.g-1,\n.gx-1 {\n  --wj-gutter-x: 0.25rem;\n}\n.g-1,\n.gy-1 {\n  --wj-gutter-y: 0.25rem;\n}\n.g-2,\n.gx-2 {\n  --wj-gutter-x: 0.5rem;\n}\n.g-2,\n.gy-2 {\n  --wj-gutter-y: 0.5rem;\n}\n.g-3,\n.gx-3 {\n  --wj-gutter-x: 1rem;\n}\n.g-3,\n.gy-3 {\n  --wj-gutter-y: 1rem;\n}\n.g-4,\n.gx-4 {\n  --wj-gutter-x: 1.5rem;\n}\n.g-4,\n.gy-4 {\n  --wj-gutter-y: 1.5rem;\n}\n.g-5,\n.gx-5 {\n  --wj-gutter-x: 3rem;\n}\n.g-5,\n.gy-5 {\n  --wj-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  .g-sm-0,\n  .gx-sm-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  .g-md-0,\n  .gx-md-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  .g-lg-0,\n  .gx-lg-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  .g-xl-0,\n  .gx-xl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  .g-xxl-0,\n  .gx-xxl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xxl-0,\n  .gy-xxl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xxl-1,\n  .gx-xxl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xxl-1,\n  .gy-xxl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xxl-2,\n  .gx-xxl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xxl-2,\n  .gy-xxl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xxl-3,\n  .gx-xxl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xxl-3,\n  .gy-xxl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xxl-4,\n  .gx-xxl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xxl-4,\n  .gy-xxl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xxl-5,\n  .gx-xxl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xxl-5,\n  .gy-xxl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}";
-console.log("STYLES ROW:", styles);
-class Grid extends WJElement {
+const m = `/*!
+* direction.scss
+*/:host{width:100%;flex-grow:0}wj-row{display:flex;flex-wrap:wrap}wj-row{--wj-gutter-x: 1.5rem;--wj-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(var(--wj-gutter-y) * -1);margin-right:calc(var(--wj-gutter-x) * -.5);margin-left:calc(var(--wj-gutter-x) * -.5)}.g-0,.gx-0{--wj-gutter-x: 0}.g-0,.gy-0{--wj-gutter-y: 0}.g-1,.gx-1{--wj-gutter-x: .25rem}.g-1,.gy-1{--wj-gutter-y: .25rem}.g-2,.gx-2{--wj-gutter-x: .5rem}.g-2,.gy-2{--wj-gutter-y: .5rem}.g-3,.gx-3{--wj-gutter-x: 1rem}.g-3,.gy-3{--wj-gutter-y: 1rem}.g-4,.gx-4{--wj-gutter-x: 1.5rem}.g-4,.gy-4{--wj-gutter-y: 1.5rem}.g-5,.gx-5{--wj-gutter-x: 3rem}.g-5,.gy-5{--wj-gutter-y: 3rem}@media (min-width: 576px){.g-sm-0,.gx-sm-0{--wj-gutter-x: 0}.g-sm-0,.gy-sm-0{--wj-gutter-y: 0}.g-sm-1,.gx-sm-1{--wj-gutter-x: .25rem}.g-sm-1,.gy-sm-1{--wj-gutter-y: .25rem}.g-sm-2,.gx-sm-2{--wj-gutter-x: .5rem}.g-sm-2,.gy-sm-2{--wj-gutter-y: .5rem}.g-sm-3,.gx-sm-3{--wj-gutter-x: 1rem}.g-sm-3,.gy-sm-3{--wj-gutter-y: 1rem}.g-sm-4,.gx-sm-4{--wj-gutter-x: 1.5rem}.g-sm-4,.gy-sm-4{--wj-gutter-y: 1.5rem}.g-sm-5,.gx-sm-5{--wj-gutter-x: 3rem}.g-sm-5,.gy-sm-5{--wj-gutter-y: 3rem}}@media (min-width: 768px){.g-md-0,.gx-md-0{--wj-gutter-x: 0}.g-md-0,.gy-md-0{--wj-gutter-y: 0}.g-md-1,.gx-md-1{--wj-gutter-x: .25rem}.g-md-1,.gy-md-1{--wj-gutter-y: .25rem}.g-md-2,.gx-md-2{--wj-gutter-x: .5rem}.g-md-2,.gy-md-2{--wj-gutter-y: .5rem}.g-md-3,.gx-md-3{--wj-gutter-x: 1rem}.g-md-3,.gy-md-3{--wj-gutter-y: 1rem}.g-md-4,.gx-md-4{--wj-gutter-x: 1.5rem}.g-md-4,.gy-md-4{--wj-gutter-y: 1.5rem}.g-md-5,.gx-md-5{--wj-gutter-x: 3rem}.g-md-5,.gy-md-5{--wj-gutter-y: 3rem}}@media (min-width: 992px){.g-lg-0,.gx-lg-0{--wj-gutter-x: 0}.g-lg-0,.gy-lg-0{--wj-gutter-y: 0}.g-lg-1,.gx-lg-1{--wj-gutter-x: .25rem}.g-lg-1,.gy-lg-1{--wj-gutter-y: .25rem}.g-lg-2,.gx-lg-2{--wj-gutter-x: .5rem}.g-lg-2,.gy-lg-2{--wj-gutter-y: .5rem}.g-lg-3,.gx-lg-3{--wj-gutter-x: 1rem}.g-lg-3,.gy-lg-3{--wj-gutter-y: 1rem}.g-lg-4,.gx-lg-4{--wj-gutter-x: 1.5rem}.g-lg-4,.gy-lg-4{--wj-gutter-y: 1.5rem}.g-lg-5,.gx-lg-5{--wj-gutter-x: 3rem}.g-lg-5,.gy-lg-5{--wj-gutter-y: 3rem}}@media (min-width: 1200px){.g-xl-0,.gx-xl-0{--wj-gutter-x: 0}.g-xl-0,.gy-xl-0{--wj-gutter-y: 0}.g-xl-1,.gx-xl-1{--wj-gutter-x: .25rem}.g-xl-1,.gy-xl-1{--wj-gutter-y: .25rem}.g-xl-2,.gx-xl-2{--wj-gutter-x: .5rem}.g-xl-2,.gy-xl-2{--wj-gutter-y: .5rem}.g-xl-3,.gx-xl-3{--wj-gutter-x: 1rem}.g-xl-3,.gy-xl-3{--wj-gutter-y: 1rem}.g-xl-4,.gx-xl-4{--wj-gutter-x: 1.5rem}.g-xl-4,.gy-xl-4{--wj-gutter-y: 1.5rem}.g-xl-5,.gx-xl-5{--wj-gutter-x: 3rem}.g-xl-5,.gy-xl-5{--wj-gutter-y: 3rem}}@media (min-width: 1400px){.g-xxl-0,.gx-xxl-0{--wj-gutter-x: 0}.g-xxl-0,.gy-xxl-0{--wj-gutter-y: 0}.g-xxl-1,.gx-xxl-1{--wj-gutter-x: .25rem}.g-xxl-1,.gy-xxl-1{--wj-gutter-y: .25rem}.g-xxl-2,.gx-xxl-2{--wj-gutter-x: .5rem}.g-xxl-2,.gy-xxl-2{--wj-gutter-y: .5rem}.g-xxl-3,.gx-xxl-3{--wj-gutter-x: 1rem}.g-xxl-3,.gy-xxl-3{--wj-gutter-y: 1rem}.g-xxl-4,.gx-xxl-4{--wj-gutter-x: 1.5rem}.g-xxl-4,.gy-xxl-4{--wj-gutter-y: 1.5rem}.g-xxl-5,.gx-xxl-5{--wj-gutter-x: 3rem}.g-xxl-5,.gy-xxl-5{--wj-gutter-y: 3rem}}
+`;
+console.log("STYLES ROW:", m);
+class y extends j {
   constructor() {
     super();
-    __publicField(this, "className", "Grid");
+    x(this, "className", "Grid");
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -22,16 +22,12 @@ class Grid extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    if (this.color)
-      this.classList.add("wj-color-" + this.color, "wj-color");
-    fragment.appendChild(element);
-    return fragment;
+  draw(e, s, d) {
+    let r = document.createDocumentFragment(), l = document.createElement("slot");
+    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), r.appendChild(l), r;
   }
 }
-customElements.get("wj-grid") || window.customElements.define("wj-grid", Grid);
+customElements.get("wj-grid") || window.customElements.define("wj-grid", y);
 export {
-  Grid
+  y as Grid
 };

package/dist/wj-header.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 n = Object.defineProperty;
+var i = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var o = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
+import h from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Header ]\n*/\n:host {\n  --wj-header-background: #fff;\n  --wj-header-border-color: rgba(0, 0, 0, 0.08);\n  --wj-header-border-width: 0 0 1px 0;\n  --wj-header-border-style: solid;\n  --wj-header-top: 0;\n  --wj-header-height: 60px;\n  display: block;\n  height: var(--wj-header-height);\n  width: 100%;\n  background: var(--wj-header-background);\n  border-width: var(--wj-header-border-width);\n  border-style: var(--wj-header-border-style);\n  border-color: var(--wj-header-border-color);\n}\n:host .native-header {\n  display: flex;\n  padding-inline: 1rem;\n}\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-header-top);\n  z-index: 999;\n}";
-class Header extends WJElement {
+const c = `/*!
+* direction.scss
+*/:host{--wj-header-background: #fff;--wj-header-border-color: rgba(0, 0, 0, .08);--wj-header-border-width: 0 0 1px 0;--wj-header-border-style: solid;--wj-header-top: 0;--wj-header-height: 60px;display:block;height:var(--wj-header-height);width:100%;background:var(--wj-header-background);border-width:var(--wj-header-border-width);border-style:var(--wj-header-border-style);border-color:var(--wj-header-border-color)}:host .native-header{display:flex;padding-inline:1rem}:host([sticky]){position:sticky;top:var(--wj-header-top);z-index:999}
+`;
+class l extends h {
   constructor() {
     super();
-    __publicField(this, "className", "Header");
+    o(this, "className", "Header");
   }
   static get cssStyleSheet() {
-    return styles;
+    return c;
   }
   static get observedAttributes() {
     return [];
@@ -21,18 +21,14 @@ class Header extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("header");
-    element.classList.add("native-header");
-    element.setAttribute("part", "native");
-    let slot = document.createElement("slot");
-    element.appendChild(slot);
-    fragment.appendChild(element);
-    return fragment;
+  draw(r, w, p) {
+    let a = document.createDocumentFragment(), d = document.createElement("header");
+    d.classList.add("native-header"), d.setAttribute("part", "native");
+    let s = document.createElement("slot");
+    return d.appendChild(s), a.appendChild(d), a;
   }
 }
-customElements.get("wj-header") || window.customElements.define("wj-header", Header);
+customElements.get("wj-header") || window.customElements.define("wj-header", l);
 export {
-  Header
+  l as Header
 };

package/dist/wj-icon-picker.js

@@ -1,34 +1,34 @@
-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";
-import { InfiniteScroll } from "./wj-infinite-scroll.js";
+var u = Object.defineProperty;
+var g = (o, i, t) => i in o ? u(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var h = (o, i, t) => (g(o, typeof i != "symbol" ? i + "" : i, t), t);
+import w from "./wj-element.js";
+import { InfiniteScroll as b } from "./wj-infinite-scroll.js";
 import "./wj-tooltip.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Icon Picker ]\n*/\n:host {\n  --wj-color-picker-value: #ff0000;\n  --wj-color-picker-radius: .25rem;\n  --wj-color-picker-icon-size: 2rem;\n  padding: 0 1rem;\n}\n.anchor {\n  width: 1rem;\n  height: 1rem;\n  background: var(--wj-color-picker-value);\n}\n.picker {\n  width: 320px;\n  height: 320px;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1);\n  border-radius: var(--wj-color-picker-radius);\n  overflow: auto;\n  padding: 1rem;\n}\n.icon-items {\n  --icon-min-width: 2rem;\n  display: grid;\n  grid-gap: 0.5rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--icon-min-width), 1fr));\n}\n.icon-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: inherit;\n  padding: 0 0.25rem;\n  text-decoration: none;\n}\n.icon-item:hover {\n  border-radius: 0.25rem;\n  background: var(--wj-border-color);\n}\nicon-item svg {\n  width: var(--wj-color-picker-icon-size);\n  height: var(--wj-color-picker-icon-size);\n}\nwj-input {\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: 0;\n}\nwj-infinite-scroll {\n  margin-top: 1rem;\n}\nwj-select {\n  --wj-select-border-width: 0 0 1px 0 !important;\n  --wj-select-border-radius: 0 !important;\n  margin-bottom: 1rem;\n}\nhr {\n  background: red;\n  height: 1px;\n  border: 0 none;\n}";
-class IconPicker extends WJElement {
+const j = `/*!
+* direction.scss
+*/:host{--wj-color-picker-value: #ff0000;--wj-color-picker-radius: .25rem;--wj-color-picker-icon-size: 2rem;padding:0 1rem}.anchor{width:1rem;height:1rem;background:var(--wj-color-picker-value)}.picker{width:320px;height:320px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wj-color-picker-radius);overflow:auto;padding:1rem}.icon-items{--icon-min-width: 2rem;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(var(--icon-min-width),1fr))}.icon-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;color:inherit;padding:0 .25rem;text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wj-border-color)}icon-item svg{width:var(--wj-color-picker-icon-size);height:var(--wj-color-picker-icon-size)}wj-input{--wj-input-border-radius: 4px;--wj-input-margin-bottom: 0}wj-infinite-scroll{margin-top:1rem}wj-select{--wj-select-border-width: 0 0 1px 0 !important;--wj-select-border-radius: 0 !important;margin-bottom:1rem}hr{background:red;height:1px;border:0 none}
+`;
+class v extends w {
   constructor() {
     super();
-    __publicField(this, "className", "IconPicker");
+    h(this, "className", "IconPicker");
     this.size = 56;
   }
-  set markerPosition(value) {
-    this._markerPosition = value;
+  set markerPosition(t) {
+    this._markerPosition = t;
   }
   get markerPosition() {
     return this._markerPosition;
   }
-  set swatches(value) {
-    this.setAttribute("swatches", value.split(","));
+  set swatches(t) {
+    this.setAttribute("swatches", t.split(","));
   }
   get swatches() {
     return this._swatches;
   }
   static get cssStyleSheet() {
-    return styles;
+    return j;
   }
   static get observedAttributes() {
     return [];
@@ -37,116 +37,75 @@ class IconPicker extends WJElement {
     this.isShadowRoot = "open";
   }
   async beforeDraw() {
-    this.tags = Object.values(await this.getTags());
-    this.category = this.getCategory(this.tags);
-  }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-color-picker");
-    let anchor = document.createElement("div");
-    anchor.setAttribute("slot", "anchor");
-    anchor.classList.add("anchor");
-    let picker = document.createElement("div");
-    picker.classList.add("picker");
-    let select = document.createElement("wj-select");
-    select.setAttribute("placeholder", "Category");
-    select.setAttribute("variant", "standard");
-    select.setAttribute("max-options", "1");
-    select.setAttribute("variant", "standard");
-    select.setAttribute("max-height", "180px");
-    select.setAttribute("clearable", "");
-    this.createOptions(select);
-    let input = document.createElement("wj-input");
-    input.classList.add("input");
-    input.setAttribute("variant", "standard");
-    input.setAttribute("placeholder", "type to filter...");
-    let infiniteScroll = new InfiniteScroll();
-    infiniteScroll.setAttribute("url", "/demo/assets/data/tags.json");
-    infiniteScroll.setAttribute("placement", ".icon-items");
-    infiniteScroll.setAttribute("size", this.size);
-    infiniteScroll.setAttribute("height", "223px");
-    infiniteScroll.innerHTML = `<div class="icon-items">
+    this.tags = Object.values(await this.getTags()), this.category = this.getCategory(this.tags);
+  }
+  draw(t, e, s) {
+    let m = document.createDocumentFragment(), p = document.createElement("div");
+    p.classList.add("native-color-picker");
+    let l = document.createElement("div");
+    l.setAttribute("slot", "anchor"), l.classList.add("anchor");
+    let c = document.createElement("div");
+    c.classList.add("picker");
+    let r = document.createElement("wj-select");
+    r.setAttribute("placeholder", "Category"), r.setAttribute("variant", "standard"), r.setAttribute("max-options", "1"), r.setAttribute("variant", "standard"), r.setAttribute("max-height", "180px"), r.setAttribute("clearable", ""), this.createOptions(r);
+    let d = document.createElement("wj-input");
+    d.classList.add("input"), d.setAttribute("variant", "standard"), d.setAttribute("placeholder", "type to filter...");
+    let a = new b();
+    a.setAttribute("url", "/demo/assets/data/tags.json"), a.setAttribute("placement", ".icon-items"), a.setAttribute("size", this.size), a.setAttribute("height", "223px"), a.innerHTML = `<div class="icon-items">
             <div class="icon-item" iterate>
                 <wj-tooltip content="{{name}}">
                   <wj-icon name="{{name}}" size="large"></wj-icon>
                 </wj-tooltip>
             </div>
-        </div>`;
-    picker.appendChild(select);
-    picker.appendChild(input);
-    picker.appendChild(infiniteScroll);
-    let popup = document.createElement("wj-popup");
-    popup.setAttribute("placement", this.placement || "bottom-start");
-    popup.setAttribute("offset", this.offset);
-    popup.setAttribute("manual", "");
-    popup.appendChild(anchor);
-    popup.appendChild(picker);
-    native.appendChild(popup);
-    fragment.appendChild(native);
-    this.popup = popup;
-    this.anchor = anchor;
-    this.picker = picker;
-    this.infiniteScroll = infiniteScroll;
-    return fragment;
+        </div>`, c.appendChild(r), c.appendChild(d), c.appendChild(a);
+    let n = document.createElement("wj-popup");
+    return n.setAttribute("placement", this.placement || "bottom-start"), n.setAttribute("offset", this.offset), n.setAttribute("manual", ""), n.appendChild(l), n.appendChild(c), p.appendChild(n), m.appendChild(p), this.popup = n, this.anchor = l, this.picker = c, this.infiniteScroll = a, m;
   }
   afterDraw() {
-    this.addEventListener("wj:popup-show", (e) => {
+    this.addEventListener("wj:popup-show", (t) => {
       this.infiniteScroll.scrollEvent();
-    });
-    this.infiniteScroll.setCustomData = (page) => {
-      let data = Object.values(this.tags);
-      let result = {
-        data: data.slice(page * this.size, page * this.size + this.size),
-        page,
+    }), this.infiniteScroll.setCustomData = (t) => {
+      let e = Object.values(this.tags);
+      return {
+        data: e.slice(t * this.size, t * this.size + this.size),
+        page: t,
         size: this.size,
-        totalPages: Math.round(data.length / this.size)
+        totalPages: Math.round(e.length / this.size)
       };
-      return result;
-    };
-    this.init = false;
+    }, this.init = !1;
   }
   createItems() {
-    let items = document.createElement("div");
-    items.classList.add("icon-items");
-    Object.values(this.tags).slice(0, 200).forEach((i) => {
-      items.appendChild(this.createIconItem(i));
-    });
-    return items;
-  }
-  createIconItem(i) {
-    let item = document.createElement("div");
-    item.classList.add("icon-item");
-    let icon = document.createElement("wj-icon");
-    icon.setAttribute("name", i.name);
-    icon.classList.add("lazy-loaded-image", "lazy");
-    item.appendChild(icon);
-    return item;
-  }
-  createOption(item) {
-    let option = document.createElement("wj-option");
-    option.setAttribute("value", item);
-    option.innerText = item;
-    return option;
-  }
-  createOptions(select) {
-    this.category.forEach((i) => {
-      select.appendChild(this.createOption(i));
+    let t = document.createElement("div");
+    return t.classList.add("icon-items"), Object.values(this.tags).slice(0, 200).forEach((e) => {
+      t.appendChild(this.createIconItem(e));
+    }), t;
+  }
+  createIconItem(t) {
+    let e = document.createElement("div");
+    e.classList.add("icon-item");
+    let s = document.createElement("wj-icon");
+    return s.setAttribute("name", t.name), s.classList.add("lazy-loaded-image", "lazy"), e.appendChild(s), e;
+  }
+  createOption(t) {
+    let e = document.createElement("wj-option");
+    return e.setAttribute("value", t), e.innerText = t, e;
+  }
+  createOptions(t) {
+    this.category.forEach((e) => {
+      t.appendChild(this.createOption(e));
     });
   }
-  getCategory(tags) {
-    let category = [...new Set(tags.map((obj) => obj.category))];
-    return category;
+  getCategory(t) {
+    return [...new Set(t.map((s) => s.category))];
   }
   async getTags() {
-    const response = await fetch(`/demo/assets/data/tags.json`);
-    return response.json();
+    return (await fetch("/demo/assets/data/tags.json")).json();
   }
   disconnectedCallback() {
-    this.init = false;
+    this.init = !1;
   }
 }
-customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", IconPicker);
+customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", v);
 export {
-  IconPicker
+  v as IconPicker
 };