wj-elements 0.0.11 → 0.0.13

package/dist/wj-format-digital.js

@@ -1,22 +1,24 @@
-var c = Object.defineProperty;
-var d = (a, t, e) => t in a ? c(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var u = (a, t, e) => (d(a, typeof t != "symbol" ? t + "" : t, e), e);
-import h from "./wj-element.js";
-import { L as p } from "./localize-762a9f0f.js";
+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 { L as Localizer } from "./localize-20081fd1.js";
 import "./wj-store.js";
-const g = `.native-format-digital{white-space:nowrap}
-`;
-class f extends h {
+const styles = "/*\n[ WJ Format Digital ]\n*/\n.native-format-digital {\n  white-space: nowrap;\n}";
+class FormatDigital extends WJElement {
   constructor() {
     super();
-    u(this, "className", "FormatDigital");
-    this.localizer = new p(this);
+    __publicField(this, "className", "FormatDigital");
+    this.localizer = new Localizer(this);
   }
   get unit() {
     return this.hasAttribute("unit") ? this.getAttribute("unit") : "byte";
   }
   static get cssStyleSheet() {
-    return g;
+    return styles;
   }
   static get observedAttributes() {
     return ["value"];
@@ -27,25 +29,38 @@ class f extends h {
   beforeDraw() {
     if (this.value < 0)
       return;
-    const e = ["", "kilo", "mega", "giga", "tera"], o = ["", "kilo", "mega", "giga", "tera", "peta"], n = this.unit === "bit" ? e : o, r = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), n.length - 1)), i = n[r] + this.unit, s = parseFloat((this.value / Math.pow(1e3, r)).toPrecision(3));
-    this.formattedValue = this.localizer.formatNumber(s, {
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
+    const unit = prefix[index] + this.unit;
+    const value = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
+    this.formattedValue = this.localizer.formatNumber(value, {
       style: "unit",
-      unit: i,
+      unit,
       unitDisplay: this.unitDisplay || "short"
     });
   }
-  draw(e, o, n) {
-    let r = document.createDocumentFragment(), i = document.createElement("div");
-    i.setAttribute("part", "native"), i.classList.add("native-format-digital");
-    let s = document.createElement("span");
-    s.setAttribute("part", "formatted"), s.innerText = this.formattedValue;
-    let l = document.createElement("slot");
-    l.setAttribute("name", "start");
-    let m = document.createElement("slot");
-    return m.setAttribute("name", "end"), i.appendChild(l), i.appendChild(s), i.appendChild(m), r.appendChild(i), r;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.setAttribute("part", "native");
+    element.classList.add("native-format-digital");
+    let formatted = document.createElement("span");
+    formatted.setAttribute("part", "formatted");
+    formatted.innerText = this.formattedValue;
+    let start = document.createElement("slot");
+    start.setAttribute("name", "start");
+    let end = document.createElement("slot");
+    end.setAttribute("name", "end");
+    element.appendChild(start);
+    element.appendChild(formatted);
+    element.appendChild(end);
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-format-digital") || window.customElements.define("wj-format-digital", f);
+customElements.get("wj-format-digital") || window.customElements.define("wj-format-digital", FormatDigital);
 export {
-  f as FormatDigital
+  FormatDigital
 };

package/dist/wj-grid.js

@@ -1,19 +1,19 @@
-var l = Object.defineProperty;
-var w = (t, g, e) => g in t ? l(t, g, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[g] = e;
-var x = (t, g, e) => (w(t, typeof g != "symbol" ? g + "" : g, e), e);
-import u from "./wj-element.js";
+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 "./wj-store.js";
-const j = `/*!
-* 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}}
-`;
-class y extends u {
+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}";
+class Grid extends WJElement {
   constructor() {
     super();
-    x(this, "className", "Grid");
+    __publicField(this, "className", "Grid");
   }
   static get cssStyleSheet() {
-    return j;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -21,12 +21,16 @@ class y extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, s, d) {
-    let r = document.createDocumentFragment(), m = document.createElement("slot");
-    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), r.appendChild(m), r;
+  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;
   }
 }
-customElements.get("wj-grid") || window.customElements.define("wj-grid", y);
+customElements.get("wj-grid") || window.customElements.define("wj-grid", Grid);
 export {
-  y as Grid
+  Grid
 };

package/dist/wj-header.js

@@ -1,17 +1,19 @@
-var n = Object.defineProperty;
-var h = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => (h(r, typeof e != "symbol" ? e + "" : e, t), t);
-import i from "./wj-element.js";
+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 "./wj-store.js";
-const l = `:host{--wj-header-background: var(--wj-background);--wj-header-border-color: var(--wj-border-color);--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 c extends i {
+const styles = "/*\n[ WJ Header ]\n*/\n:host {\n  --wj-header-background: var(--wj-background);\n  --wj-header-border-color: var(--wj-border-color);\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\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-header-top);\n  z-index: 999;\n}";
+class Header extends WJElement {
   constructor() {
     super();
-    o(this, "className", "Header");
+    __publicField(this, "className", "Header");
   }
   static get cssStyleSheet() {
-    return l;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,14 +21,18 @@ class c extends i {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, 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;
+  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;
   }
 }
-customElements.get("wj-header") || window.customElements.define("wj-header", c);
+customElements.get("wj-header") || window.customElements.define("wj-header", Header);
 export {
-  c as Header
+  Header
 };

package/dist/wj-icon-picker.js

@@ -1,50 +1,56 @@
-var m = Object.defineProperty;
-var u = (l, n, e) => n in l ? m(l, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[n] = e;
-var h = (l, n, e) => (u(l, typeof n != "symbol" ? n + "" : n, e), e);
-import w, { event as b } from "./wj-element.js";
-import { InfiniteScroll as g } from "./wj-infinite-scroll.js";
+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";
+import { InfiniteScroll } from "./wj-infinite-scroll.js";
 import "./wj-tooltip.js";
 import "./wj-store.js";
-const j = `:host{--wj-icon-picker-radius: var(--wj-border-radius-small);--wj-icon-picker-icon-size: 1.5rem;--wj-icon-picker-border-width: 1px;--wj-icon-picker-border-style: solid;--wj-icon-picker-border-color: var(--wj-border-color);--wj-icon-picker-padding: .25rem;padding:0 1rem}.anchor{width:var(--wj-icon-picker-icon-size);height:var(--wj-icon-picker-icon-size);padding:var(--wj-icon-picker-padding);border-width:var(--wj-icon-picker-border-width);border-style:var(--wj-icon-picker-border-style);border-color:var(--wj-icon-picker-border-color);box-sizing:border-box;border-radius:var(--wj-icon-picker-radius)}.picker{width:320px;height:271px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wj-icon-picker-radius);border-width:var(--wj-icon-picker-border-width);border-style:var(--wj-icon-picker-border-style);border-color:var(--wj-icon-picker-border-color);overflow:auto;padding:1rem;background:var(--wj-background)}.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:.25rem;min-height:var(--wj-icon-picker-icon-size);min-width:var(--wj-icon-picker-icon-size);text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wj-border-color)}.wj-size{--wj-icon-size: 24px !important}icon-item svg{width:var(--wj-icon-picker-icon-size);height:var(--wj-icon-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}.anchor wj-icon{--wj-icon-size: 100% !important}
-`;
-class v extends w {
+const styles = "/*\n[ Wj Icon Picker ]\n*/\n:host {\n  --wj-icon-picker-radius: var(--wj-border-radius-small);\n  --wj-icon-picker-icon-size: 1.5rem;\n  --wj-icon-picker-border-width: 1px;\n  --wj-icon-picker-border-style: solid;\n  --wj-icon-picker-border-color: var(--wj-border-color);\n  --wj-icon-picker-padding: .25rem;\n  padding: 0 1rem;\n}\n\n.anchor {\n  width: var(--wj-icon-picker-icon-size);\n  height: var(--wj-icon-picker-icon-size);\n  padding: var(--wj-icon-picker-padding);\n  border-width: var(--wj-icon-picker-border-width);\n  border-style: var(--wj-icon-picker-border-style);\n  border-color: var(--wj-icon-picker-border-color);\n  box-sizing: border-box;\n  border-radius: var(--wj-icon-picker-radius);\n}\n\n.picker {\n  width: 320px;\n  height: 271px;\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-icon-picker-radius);\n  border-width: var(--wj-icon-picker-border-width);\n  border-style: var(--wj-icon-picker-border-style);\n  border-color: var(--wj-icon-picker-border-color);\n  overflow: auto;\n  padding: 1rem;\n  background: var(--wj-background);\n}\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\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.25rem;\n  min-height: var(--wj-icon-picker-icon-size);\n  min-width: var(--wj-icon-picker-icon-size);\n  text-decoration: none;\n}\n.icon-item:hover {\n  border-radius: 0.25rem;\n  background: var(--wj-border-color);\n}\n\n.wj-size {\n  --wj-icon-size: 24px !important;\n}\n\nicon-item svg {\n  width: var(--wj-icon-picker-icon-size);\n  height: var(--wj-icon-picker-icon-size);\n}\n\nwj-input {\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: 0;\n}\n\nwj-infinite-scroll {\n  margin-top: 1rem;\n}\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}\n\n.anchor wj-icon {\n  --wj-icon-size: 100% !important;\n}";
+class IconPicker extends WJElement {
   constructor() {
     super();
-    h(this, "className", "IconPicker");
+    __publicField(this, "className", "IconPicker");
     /*
     * @description event handler pre vyhladavanie ikon
     * @param e
      */
-    h(this, "searchIcon", (e) => {
-      this.infiniteScroll.unScrollEvent(), this.infiniteScroll.setCustomData = (t = 0) => {
-        let i = this.tags.filter((r) => r.tags.includes(e.detail.value));
-        return {
-          data: i,
-          page: t,
+    __publicField(this, "searchIcon", (e) => {
+      this.infiniteScroll.unScrollEvent();
+      this.infiniteScroll.setCustomData = (page = 0) => {
+        let data = this.tags.filter((i) => i.tags.includes(e.detail.value));
+        let result = {
+          data,
+          page,
           size: this.size,
-          totalPages: Math.round(i.length / this.size)
+          totalPages: Math.round(data.length / this.size)
         };
-      }, this.clearIconsContainer(), this.infiniteScroll.loadPages();
+        return result;
+      };
+      this.clearIconsContainer();
+      this.infiniteScroll.loadPages();
     });
-    h(this, "onClose", () => {
+    __publicField(this, "onClose", () => {
       this.popup.onHide();
     });
     this.size = 48;
   }
-  set markerPosition(e) {
-    this._markerPosition = e;
+  set markerPosition(value) {
+    this._markerPosition = value;
   }
   get markerPosition() {
     return this._markerPosition;
   }
-  set swatches(e) {
-    this.setAttribute("swatches", e.split(","));
+  set swatches(value) {
+    this.setAttribute("swatches", value.split(","));
   }
   get swatches() {
     return this._swatches;
   }
   static get cssStyleSheet() {
-    return j;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -53,70 +59,118 @@ class v extends w {
     this.isShadowRoot = "open";
   }
   async beforeDraw() {
-    this.tags = Object.values(await this.getTags()), this.category = this.getCategory(this.tags);
-  }
-  draw(e, t, i) {
-    let o = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-color-picker");
-    let d = document.createElement("div");
-    d.setAttribute("slot", "anchor"), d.classList.add("anchor");
-    let p = document.createElement("div");
-    p.classList.add("picker");
-    let s = document.createElement("wj-input");
-    s.classList.add("input"), s.setAttribute("variant", "standard"), s.setAttribute("placeholder", "type to filter..."), s.setAttribute("clearable", ""), s.addEventListener("wj-input:input", this.searchIcon);
-    let a = new g();
-    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">
+    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 input = document.createElement("wj-input");
+    input.classList.add("input");
+    input.setAttribute("variant", "standard");
+    input.setAttribute("placeholder", "type to filter...");
+    input.setAttribute("clearable", "");
+    input.addEventListener("wj-input:input", this.searchIcon);
+    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">
             <div class="icon-item" iterate>
                 <wj-tooltip content="{{name}}">
                     <wj-icon name="{{name}}" size="large"></wj-icon>
                 </wj-tooltip>
             </div>
-        </div>`, p.appendChild(s), p.appendChild(a);
-    let c = document.createElement("wj-popup");
-    return c.setAttribute("placement", this.placement || "bottom-start"), c.setAttribute("offset", this.offset), c.setAttribute("manual", ""), c.appendChild(d), c.appendChild(p), r.appendChild(c), o.appendChild(r), this.popup = c, this.input = s, this.anchor = d, this.picker = p, this.infiniteScroll = a, o;
+        </div>`;
+    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.input = input;
+    this.anchor = anchor;
+    this.picker = picker;
+    this.infiniteScroll = infiniteScroll;
+    return fragment;
   }
   afterDraw() {
-    this.setupInfiniteScroll(), this.addEventListener("wj-popup:show", (e) => {
+    this.setupInfiniteScroll();
+    this.addEventListener("wj-popup:show", (e) => {
       this.initial();
-    }), this.addEventListener("wj-input:clear", (e) => {
-      this.setupInfiniteScroll(), this.clearIconsContainer(), this.infiniteScroll.scrollEvent(), this.infiniteScroll.loadPages(0);
-    }), this.addEventListener("wj-infinite-scroll:click-item", (e) => {
-      const i = e.detail.context.querySelector("wj-icon").getAttribute("name"), o = this.tags.find((d) => d.name === i), r = document.createElement("wj-icon");
-      r.setAttribute("name", i), o.icon = r, this.value = o, this.anchor.innerHTML = "", this.anchor.appendChild(r), b.dispatchCustomEvent(this, "wj-icon-picker:select", o);
-    }), this.init = !1;
+    });
+    this.addEventListener("wj-input:clear", (e) => {
+      this.setupInfiniteScroll();
+      this.clearIconsContainer();
+      this.infiniteScroll.scrollEvent();
+      this.infiniteScroll.loadPages(0);
+    });
+    this.addEventListener("wj-infinite-scroll:click-item", (e) => {
+      const icon = e.detail.context.querySelector("wj-icon");
+      const name = icon.getAttribute("name");
+      const object = this.tags.find((i) => i.name === name);
+      const iconElement = document.createElement("wj-icon");
+      iconElement.setAttribute("name", name);
+      object.icon = iconElement;
+      this.value = object;
+      this.anchor.innerHTML = "";
+      this.anchor.appendChild(iconElement);
+      event.dispatchCustomEvent(this, "wj-icon-picker:select", object);
+    });
+    this.init = false;
   }
   initial() {
     this.infiniteScroll.scrollEvent();
   }
   setupInfiniteScroll() {
-    this.infiniteScroll.setCustomData = (e = 0) => {
-      let t = Object.values(this.tags);
-      return {
-        data: t.slice(e * this.size, e * this.size + this.size),
-        page: e,
+    this.infiniteScroll.setCustomData = (page = 0) => {
+      let data = Object.values(this.tags);
+      let result = {
+        data: data.slice(page * this.size, page * this.size + this.size),
+        page,
         size: this.size,
-        totalPages: Math.round(t.length / this.size)
+        totalPages: Math.round(data.length / this.size)
       };
+      return result;
     };
   }
-  createIconItem(e) {
-    let t = document.createElement("div");
-    t.classList.add("icon-item");
-    let i = document.createElement("wj-icon");
-    return i.setAttribute("name", e.name), i.classList.add("lazy-loaded-image", "lazy"), t.appendChild(i), t;
-  }
-  createOption(e) {
-    let t = document.createElement("wj-option");
-    return t.setAttribute("value", e), t.innerText = e, t;
-  }
-  getCategory(e) {
-    return [...new Set(e.map((i) => i.category))];
+  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;
+  }
+  getCategory(tags) {
+    let category = [...new Set(tags.map((obj) => obj.category))];
+    return category;
   }
   async getTags() {
-    return (await fetch("/demo/assets/data/tags.json")).json();
+    const response = await fetch(`/demo/assets/data/tags.json`);
+    return response.json();
   }
   disconnectedCallback() {
-    this.init = !1;
+    this.init = false;
   }
   /*
   * @description vymazanie ikon z kontajnera
@@ -125,7 +179,7 @@ class v extends w {
     this.context.querySelector(".icon-items").innerHTML = "";
   }
 }
-customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", v);
+customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", IconPicker);
 export {
-  v as IconPicker
+  IconPicker
 };