wj-elements 0.0.4 → 0.0.6

package/dist/wj-infinite-scroll.js

@@ -1,19 +1,20 @@
-var d = Object.defineProperty;
-var u = (a, r, t) => r in a ? d(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
-var h = (a, r, t) => (u(a, typeof r != "symbol" ? r + "" : r, t), t);
-import g from "./wj-element.js";
+var u = Object.defineProperty;
+var m = (l, r, t) => r in l ? u(l, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[r] = t;
+var h = (l, r, t) => (m(l, typeof r != "symbol" ? r + "" : r, t), t);
+import g, { event as p } from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* direction.scss
-*/:host{--wj-infinite-scroll-width: 100%;--wj-infinite-scroll-height: 300px;overflow-x:auto;width:var(--wj-infinite-scroll-width);height:var(--wj-infinite-scroll-height);display:block}
+const f = `:host{--wj-infinite-scroll-width: 100%;--wj-infinite-scroll-height: 300px;overflow-x:auto;width:var(--wj-infinite-scroll-width);height:var(--wj-infinite-scroll-height);display:block}
 `;
-class p extends g {
+class w extends g {
   constructor(t = {}) {
     super();
     h(this, "className", "InfiniteScroll");
     h(this, "scrollEvent", () => {
       this.addEventListener("scroll", this.onScroll);
     });
+    h(this, "unScrollEvent", () => {
+      this.removeEventListener("scroll", this.onScroll);
+    });
     h(this, "onScroll", (t) => {
       const { scrollTop: s, scrollHeight: e, clientHeight: i } = t.target;
       s + i >= e - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
@@ -21,17 +22,17 @@ class p extends g {
     this.totalPages = 0, this.isLoading = [], String.prototype.interpolate = function(s) {
       let e = this, i = e.match(/\{{.*?\}}/g);
       if (i)
-        for (let o of i) {
-          let l = o.replace("{{", "").replace("}}", ""), n = "";
-          l.split(".").forEach((c) => {
+        for (let a of i) {
+          let o = a.replace("{{", "").replace("}}", ""), n = "";
+          o.split(".").forEach((c) => {
             n = n == "" ? s[c] : n[c];
-          }), e = e.replace(o, n);
+          }), e = e.replace(a, n);
         }
       return e;
     };
   }
   static get cssStyleSheet() {
-    return m;
+    return f;
   }
   static get observedAttributes() {
     return [];
@@ -43,11 +44,11 @@ class p extends g {
     this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = this.iterate.outerHTML, this.iterate.remove(), this.setAttribute("style", "height: " + this.height);
   }
   draw(t, s, e) {
-    let i = document.createDocumentFragment(), o = document.createElement("slot"), l = document.createElement("div");
-    return l.classList.add("loader"), i.appendChild(l), i.appendChild(o), this.loaderEl = l, i;
+    let i = document.createDocumentFragment(), a = document.createElement("slot"), o = document.createElement("div");
+    return o.classList.add("loader"), i.appendChild(o), i.appendChild(a), this.loaderEl = o, i;
   }
   async afterDraw() {
-    this.queryParams = this.queryParams || "", this.size = +this.size || 10, this.currentPage = 0, await this.loadPages(this.currentPage);
+    this.queryParams = this.queryParams || "", this.size = +this.size || 10, this.currentPage = 0, this.scrollEvent(), await this.loadPages(this.currentPage);
   }
   /** @function getPages
    * @description nacitanie dalsej stranky
@@ -76,11 +77,15 @@ class p extends g {
   async loadPages(t) {
     this.showLoader();
     try {
-      if (this.hasMorePages(t)) {
+      if (this.hasMorePages(t) || typeof this.setCustomData == "function") {
         let s, e;
-        typeof this.setCustomData == "function" ? e = await this.setCustomData(t) : e = await this.getPages(t), this.totalPages = e.totalPages, this.currentPage = t, s = e.data.map((o) => this.infiniteScrollTemplate.interpolate(o));
-        let i = this;
-        this.hasAttribute("placement") && (i = this.querySelector(this.placement)), i.insertAdjacentHTML("beforeend", s.join("")), this.isLoading.push(t);
+        typeof this.setCustomData == "function" ? e = await this.setCustomData(t) : e = await this.getPages(t), this.totalPages = e.totalPages, this.currentPage = t;
+        const i = new DOMParser();
+        let a = this;
+        this.hasAttribute("placement") && (a = this.querySelector(this.placement)), e.data.forEach((o) => {
+          const n = this.infiniteScrollTemplate.interpolate(o), d = i.parseFromString(n, "text/html").querySelector(this.iterate.tagName.toLowerCase());
+          p.addListener(d, "click", "wj-infinite-scroll:click-item", null, { stopPropagation: !0 }), a.insertAdjacentElement("beforeend", d);
+        }), this.isLoading.push(t);
       }
     } catch (s) {
       console.log(s.message);
@@ -89,7 +94,7 @@ class p extends g {
     }
   }
 }
-customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", p);
+customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", w);
 export {
-  p as InfiniteScroll
+  w as InfiniteScroll
 };

package/dist/wj-input-file.js

@@ -0,0 +1,47 @@
+var c = Object.defineProperty;
+var b = (i, r, t) => r in i ? c(i, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[r] = t;
+var u = (i, r, t) => (b(i, typeof r != "symbol" ? r + "" : r, t), t);
+import m from "./wj-element.js";
+import "./wj-store.js";
+const h = `:host{--wj-input-font-family: var(--wj-font-family);--wj-input-background-color: var(--wj-background);--wj-input-color: var(--wj-color);--wj-input-color-invalid: var(--wj-color-danger);--wj-input-border-color: var(--wj-border-color);--wj-input-border-color-focus: var(--wj-color-primary);--wj-input-border-width: 1px;--wj-input-border-style: solid;--wj-input-border-radius: 4px;--wj-input-margin-bottom: .5rem;--wj-input-line-height: 20px;--wj-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wj-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius)}:host .native-input.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wj-input-color-invalid);content:"*";font-family:var(--wj-force-mac-font-family);font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wj-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot=start]),::slotted([slot=end]){display:flex;align-items:center;border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:var(--wj-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wj-input-background-color);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);font-family:var(--wjinput-font-family);color:var(--wj-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wj-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:black;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}
+`;
+class w extends m {
+  constructor(t = {}) {
+    super();
+    u(this, "className", "Input");
+  }
+  static get cssStyleSheet() {
+    return h;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, d, s) {
+    let o = document.createDocumentFragment(), n = document.createElement("div");
+    n.setAttribute("part", "native"), n.classList.add("native-input-file", this.variant || "default");
+    let a = document.createElement("input");
+    a.setAttribute("type", "file"), a.setAttribute("multiple", ""), a.setAttribute("hidden", "");
+    let e = document.createElement("wj-input");
+    e.setAttribute("variant", "standard"), e.setAttribute("type", "text"), e.setAttribute("placeholder", "Click to upload"), e.setAttribute("readonly", "");
+    let p = document.createElement("span");
+    p.setAttribute("slot", "start");
+    let l = document.createElement("wj-icon");
+    return l.setAttribute("slot", "icon-only"), l.setAttribute("name", "cloud-upload"), p.appendChild(l), e.appendChild(p), n.appendChild(e), n.appendChild(a), o.appendChild(n), this.native = n, this.input = e, this.fileInput = a, o;
+  }
+  afterDraw() {
+    this.input.addEventListener("click", () => {
+      this.fileInput.click();
+    }), this.fileInput.addEventListener("change", (t) => {
+      for (var d = t.target.files, s = [], o = 0; o < d.length; o++)
+        s.push(d[o].name);
+      this.input.value = s.join(", ");
+    });
+  }
+}
+customElements.get("wj-input-file") || window.customElements.define("wj-input-file", w);
+export {
+  w as InputFile
+};

package/dist/wj-input.js

@@ -1,13 +1,11 @@
-var g = Object.defineProperty;
-var w = (n, a, t) => a in n ? g(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
-var b = (n, a, t) => (w(n, typeof a != "symbol" ? a + "" : a, t), t);
-import y from "./wj-element.js";
+var j = Object.defineProperty;
+var y = (n, a, t) => a in n ? j(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
+var b = (n, a, t) => (y(n, typeof a != "symbol" ? a + "" : a, t), t);
+import x, { event as g } from "./wj-element.js";
 import "./wj-store.js";
-const j = `/*!
-* direction.scss
-*/:host{--wj-input-font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;--wj-input-background-color: #fff;--wj-input-color: #212121;--wj-input-color-invalid: #b91e1e;--wj-input-border-color: rgba(33, 33, 33, .14);--wj-input-border-color-focus: #7252D3;--wj-input-border-width: 1px;--wj-input-border-style: solid;--wj-input-border-radius: 4px;--wj-input-margin-bottom: .5rem;--wj-input-line-height: 20px;--wj-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wj-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%}:host .native-input.default{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);border-top-color:#08080824;padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius)}:host .native-input.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-input-color-invalid);font-size:12px;line-height:normal}:host([required]) .input-wrapper:after{color:var(--wj-input-color-invalid);content:"*";font-family:-apple-system,BlinkMacSystemFont,Inter UI,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wj-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot=start]),::slotted([slot=end]){display:flex;align-items:center;border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:var(--wj-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wj-input-background-color);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);font-family:var(--wjinput-font-family);color:var(--wj-input-color);border-top-color:#21212136;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wj-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:black;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}
+const A = `:host{--wj-input-font-family: var(--wj-font-family);--wj-input-background-color: var(--wj-background);--wj-input-color: var(--wj-color);--wj-input-color-invalid: var(--wj-color-danger);--wj-input-border-color: var(--wj-border-color);--wj-input-border-color-focus: var(--wj-color-primary);--wj-input-border-width: 1px;--wj-input-border-style: solid;--wj-input-border-radius: 4px;--wj-input-margin-bottom: .5rem;--wj-input-line-height: 20px;--wj-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wj-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot=start]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot=end]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wj-input-background-color);font-family:var(--wj-input-font-family);position:relative;border-radius:var(--wj-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wj-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wj-input-border-radius);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-input-border-radius) 0 0 var(--wj-input-border-radius)}:host .native-input.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-input-border-radius) var(--wj-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wj-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wj-input-color-invalid);content:"*";font-family:var(--wj-force-mac-font-family);font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wj-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot=start]),::slotted([slot=end]){display:flex;align-items:center;border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);padding-inline:var(--wj-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wj-input-background-color);border-width:var(--wj-input-border-width);border-style:var(--wj-input-border-style);border-color:var(--wj-input-border-color);font-family:var(--wjinput-font-family);color:var(--wj-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wj-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:black;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}
 `;
-class f extends y {
+class w extends x {
   constructor(t = {}) {
     super();
     b(this, "className", "Input");
@@ -56,7 +54,7 @@ class f extends y {
     return this.internals.reportValidity();
   }
   static get cssStyleSheet() {
-    return j;
+    return A;
   }
   static get observedAttributes() {
     return ["value"];
@@ -65,22 +63,27 @@ class f extends y {
     this.isShadowRoot = "open";
   }
   draw(t, e, s) {
-    let o = this.hasSlot(this, "start"), v = this.hasSlot(this, "end"), m = document.createDocumentFragment(), i = document.createElement("div");
-    i.setAttribute("part", "native"), i.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && i.classList.add("has-error");
+    let o = this.hasSlot(this, "start"), m = this.hasSlot(this, "end"), v = document.createDocumentFragment(), r = document.createElement("div");
+    r.setAttribute("part", "native"), r.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && r.classList.add("has-error");
     let l = document.createElement("div");
     l.classList.add("wrapper");
-    let u = document.createElement("div");
-    u.classList.add("input-wrapper");
-    let d = document.createElement("label");
-    d.innerText = this.label, this.value && !this.hasAttribute("error") && d.classList.add("fade");
-    let r = document.createElement("input");
-    r.setAttribute("type", "text"), r.setAttribute("part", "input"), r.setAttribute("value", this.value || ""), r.classList.add("form-control"), this.hasAttribute("placeholder") && r.setAttribute("placeholder", this.placeholder), this.hasAttribute("disabled") && r.setAttribute("disabled", ""), this.hasAttribute("readonly") && r.setAttribute("readonly", "");
+    let d = document.createElement("div");
+    d.classList.add("input-wrapper");
+    let u = document.createElement("label");
+    u.innerText = this.label, this.value && !this.hasAttribute("error") && u.classList.add("fade");
+    let i = document.createElement("input");
+    i.setAttribute("type", "text"), i.setAttribute("part", "input"), i.setAttribute("value", this.value || ""), i.classList.add("form-control"), this.hasAttribute("placeholder") && i.setAttribute("placeholder", this.placeholder), this.hasAttribute("multiple") && i.setAttribute("multiple", this.multiple), this.hasAttribute("disabled") && i.setAttribute("disabled", ""), this.hasAttribute("readonly") && i.setAttribute("readonly", ""), this.hasAttribute("maxlength") && i.setAttribute("maxlength", this.maxlength), this.hasAttribute("max") && i.setAttribute("max", this.max), this.hasAttribute("min") && i.setAttribute("min", this.min);
     let p = document.createElement("div");
     p.classList.add("error-message");
     let h = null;
     o && (h = document.createElement("slot"), h.setAttribute("name", "start"));
     let c = null;
-    return v && (c = document.createElement("slot"), c.setAttribute("name", "end")), o && (l.appendChild(h), i.classList.add("has-start")), this.variant === "standard" ? this.label && i.appendChild(d) : u.appendChild(d), u.appendChild(r), l.appendChild(u), i.appendChild(l), v && (l.appendChild(c), i.classList.add("has-end")), i.appendChild(p), m.appendChild(i), this.native = i, this.labelElement = d, this.input = r, this.errorMessage = p, m;
+    if (m && (c = document.createElement("slot"), c.setAttribute("name", "end")), o && (l.appendChild(h), r.classList.add("has-start")), this.variant === "standard" ? this.label && r.appendChild(u) : d.appendChild(u), d.appendChild(i), l.appendChild(d), r.appendChild(l), this.hasAttribute("clearable")) {
+      this.clear = document.createElement("wj-button"), this.clear.classList.add("clear"), this.clear.setAttribute("fill", "link"), this.clear.setAttribute("part", "clear");
+      let f = document.createElement("wj-icon");
+      f.setAttribute("name", "x"), this.clear.appendChild(f), d.appendChild(this.clear);
+    }
+    return m && (l.appendChild(c), r.classList.add("has-end")), r.appendChild(p), v.appendChild(r), this.native = r, this.labelElement = u, this.input = i, this.errorMessage = p, v;
   }
   afterDraw() {
     [
@@ -103,10 +106,14 @@ class f extends y {
     }), this.input.addEventListener("input", (t) => {
       this.validateOnChange && (this.pristine = !1), this.input.classList.remove("pristine"), this.labelElement.classList.add("fade");
       const e = new t.constructor(t.type, t);
-      this.dispatchEvent(e), this.validateInput();
+      this.dispatchEvent(e), this.validateInput(), g.dispatchCustomEvent(this, "wj-input:input", {
+        value: this.input.value
+      });
     }), this.addEventListener("invalid", (t) => {
       this.invalid = !0, this.pristine = !1, this.errorMessage.textContent = this.internals.validationMessage, this.customErrorDisplay && t.preventDefault();
-    }), this.addEventListener("focus", () => this.input.focus());
+    }), this.addEventListener("focus", () => this.input.focus()), this.clear && this.clear.addEventListener("wj:button-click", (t) => {
+      this.input.value = "", g.dispatchCustomEvent(this.clear, "wj-input:clear");
+    });
   }
   validateInput() {
     const t = this.input.validity;
@@ -130,8 +137,8 @@ class f extends y {
     return t.querySelectorAll(s).length > 0;
   }
 }
-b(f, "formAssociated", !0);
-customElements.get("wj-input") || window.customElements.define("wj-input", f);
+b(w, "formAssociated", !0);
+customElements.get("wj-input") || window.customElements.define("wj-input", w);
 export {
-  f as Input
+  w as Input
 };

package/dist/wj-item.js

@@ -3,9 +3,7 @@ var d = (i, e, t) => e in i ? s(i, e, { enumerable: !0, configurable: !0, writab
 var o = (i, e, t) => (d(i, typeof e != "symbol" ? e + "" : e, t), t);
 import l from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* direction.scss
-*/:host{--wj-item-color: $color-contrast-higher;--wj-border-width: 0 0 1px 0;--wj-item-background: transparent;--wj-item-background-hover: #f4f4f4;--wj-item-padding-top: 0px;--wj-item-padding-bottom: 0px;--wj-item-padding-end: 0px;--wj-item-padding-start: 0px;--wj-item-inner-border-width: 0 0 1px 0;--wj-item-inner-padding-top: 0px;--wj-item-inner-padding-bottom: 0px;--wj-item-inner-padding-start: 0px;--wj-item-inner-padding-end: 0px;--wj-item-inner-box-shadow: none;--wj-item-min-height: 40px;--wj-item-transition: opacity 15ms linear, background-color 15ms linear;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--wj-item-color);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wj-item-border-radius);padding-top:var(--wj-item-padding-top);padding-bottom:var(--wj-item-padding-bottom);padding-left:var(--wj-item-padding-start);padding-right:var(--wj-item-padding-end);margin:0;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wj-item-min-height);transition:var(--wj-item-transition);outline:none;background:var(--wj-item-background);overflow:inherit;box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wj-item-color)}.item-native .item-inner{margin:0;padding:var(--wj-item-inner-padding-top) var(--wj-item-inner-padding-end) var(--wj-item-inner-padding-bottom) var(--wj-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wj-border-width);border-style:var(--wj-border-style);border-color:var(--wj-border-color);box-shadow:var(--wj-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wj-item-inner-padding-end) 0 var(--wj-item-padding-start);display:flex;justify-content:space-between}@media (any-hover: hover){:host(:hover) .item-native{color:var(--wj-item-color)}:host(:hover) .item-native :after{transition:var(--wj-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wj-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot=start]){margin-inline:0 1rem}::slotted(wj-label){margin:10px 8px 10px 0}::slotted(wj-label:not([slot=end])){flex:1 1 0}
+const m = `:host{--wj-border-width: 0 0 1px 0;--wj-item-background: transparent;--wj-item-background-hover: var(--wj-color-contrast-3);--wj-item-padding-top: 0px;--wj-item-padding-bottom: 0px;--wj-item-padding-end: 0px;--wj-item-padding-start: 0px;--wj-item-inner-border-width: 0 0 1px 0;--wj-item-inner-padding-top: 0px;--wj-item-inner-padding-bottom: 0px;--wj-item-inner-padding-start: 0px;--wj-item-inner-padding-end: 0px;--wj-item-inner-box-shadow: none;--wj-item-min-height: 40px;--wj-item-transition: opacity 15ms linear, background-color 15ms linear;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--wj-item-color);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wj-item-border-radius);padding-top:var(--wj-item-padding-top);padding-bottom:var(--wj-item-padding-bottom);padding-inline:var(--wj-item-padding-start) var(--wj-item-padding-end);margin:0;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wj-item-min-height);transition:var(--wj-item-transition);outline:none;background:var(--wj-item-background);overflow:inherit;box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wj-item-color)}.item-native .item-inner{margin:0;padding:var(--wj-item-inner-padding-top) var(--wj-item-inner-padding-end) var(--wj-item-inner-padding-bottom) var(--wj-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wj-border-width);border-style:var(--wj-border-style);border-color:var(--wj-border-color);box-shadow:var(--wj-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wj-item-inner-padding-end) 0 var(--wj-item-padding-start);display:flex;justify-content:space-between}@media (any-hover: hover){:host(:hover) .item-native{color:var(--wj-item-color)}:host(:hover) .item-native :after{transition:var(--wj-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wj-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot=start]){margin-inline:0 1rem}::slotted(wj-label:not([slot=end])){flex:1 1 0}
 `;
 class p extends l {
   constructor() {

package/dist/wj-label.js

@@ -1,19 +1,19 @@
-var n = Object.defineProperty;
-var c = (e, t, o) => t in e ? n(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var i = Object.defineProperty;
+var c = (e, t, o) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
 var s = (e, t, o) => (c(e, typeof t != "symbol" ? t + "" : t, o), o);
 import w from "./wj-element.js";
 import "./wj-store.js";
-const h = `/*!
+const m = `/*!
 * direction.scss
-*/:host(.wj-color-primary){--wj-color: #7252D3 !important}:host(.wj-color-complete){--wj-color: #0072EC !important}:host(.wj-color-success){--wj-color-base: #19AD79 !important;--wj-color-contrast: #fff !important}:host(.wj-color-warning){--wj-color-base: #FFd945 !important;--wj-color-contrast: #4b4b4b !important}:host(.wj-color-danger){--wj-color-base: #D83C31 !important;--wj-color-contrast: #fff !important}:host(.wj-color-info){--wj-color-base: #3B4752 !important;--wj-color-contrast: #fff !important}:host(.wj-color-menu){--wj-color-base: #2b303b !important;--wj-color-contrast: #fff !important}:host{--wj-label-text-wrap-font-size: 13px;--wj-label-text-wrap-line-height: 1.4}:host{--wj-color: initial;display:block;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}:host(.wj-color){color:var(--wj-color-base)}:host(.wj-text-wrap),:host([text-wrap]){white-space:normal!important;font-size:var(--wj-label-text-wrap-font-size);line-height:var(--wj-label-text-wrap-line-height)}:host(.label-fixed){flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.label-stacked),:host(.label-floating){margin:0;align-self:stretch;width:auto;max-width:100%}:host(.label-no-animate.label-floating){transition:none}::slotted(*) h1,::slotted(*) h2,::slotted(*) h3,::slotted(*) h4,::slotted(*) h5,::slotted(*) h6{text-overflow:inherit;overflow:inherit}:host(.wj-color){color:var(--wj-color)}::slotted(*:first-child){margin-top:0!important}::slotted(*:last-child){margin-bottom:0!important}
+*/:host(.wj-color-primary){--wj-color: #7252D3 !important}:host(.wj-color-complete){--wj-color: #0072EC !important}:host(.wj-color-success){--wj-color-base: #19AD79 !important;--wj-color-contrast: #fff !important}:host(.wj-color-warning){--wj-color-base: #FFd945 !important;--wj-color-contrast: #4b4b4b !important}:host(.wj-color-danger){--wj-color-base: #D83C31 !important;--wj-color-contrast: #fff !important}:host(.wj-color-info){--wj-color-base: #3B4752 !important;--wj-color-contrast: #fff !important}:host(.wj-color-menu){--wj-color-base: #2b303b !important;--wj-color-contrast: #fff !important}:host{--wj-color: initial;display:block;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}:host(.wj-color){color:var(--wj-color-base)}:host(.wj-text-wrap),:host([text-wrap]){white-space:normal!important}:host(.label-fixed){flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.label-stacked),:host(.label-floating){margin:0;align-self:stretch;width:auto;max-width:100%}:host(.label-no-animate.label-floating){transition:none}::slotted(*) h1,::slotted(*) h2,::slotted(*) h3,::slotted(*) h4,::slotted(*) h5,::slotted(*) h6{text-overflow:inherit;overflow:inherit}:host(.wj-color){color:var(--wj-color)}::slotted(*:first-child){margin-top:0!important}::slotted(*:last-child){margin-bottom:0!important}
 `;
-class m extends w {
+class h extends w {
   constructor() {
     super();
     s(this, "className", "Label");
   }
   static get cssStyleSheet() {
-    return h;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -26,11 +26,11 @@ class m extends w {
   draw(o, a, r) {
     let l = document.createDocumentFragment();
     this.color && this.classList.add("wj-color-" + r.color, "wj-color");
-    let i = document.createElement("slot");
-    return l.appendChild(i), l;
+    let n = document.createElement("slot");
+    return l.appendChild(n), l;
   }
 }
-customElements.get("wj-label") || window.customElements.define("wj-label", m);
+customElements.get("wj-label") || window.customElements.define("wj-label", h);
 export {
-  m as Label
+  h as Label
 };

package/dist/wj-list.js

@@ -3,9 +3,7 @@ var a = (e, t, s) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writab
 var n = (e, t, s) => (a(e, typeof t != "symbol" ? t + "" : t, s), s);
 import l from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/:host{--wj-list-inset-padding: 1rem;--wj-list-border-radius: 8px;--wj-list-background: #fff;margin:0;padding:0;display:block;contain:content;list-style-type:none}:host(.wj-inset){background:var(--wj-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wj-list-inset-padding);border-radius:var(--wj-list-border-radius)}:host(.wj-lines-none) ::slotted(wj-item){--wj-border-width: 0 !important}
+const d = `:host{--wj-list-inset-padding: 1rem;--wj-list-border-radius: 8px;--wj-list-background: var(--wj-background);margin:0;padding:0;display:block;contain:content;list-style-type:none}:host(.wj-inset){background:var(--wj-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wj-list-inset-padding);border-radius:var(--wj-list-border-radius)}:host(.wj-lines-none) ::slotted(wj-item){--wj-border-width: 0 !important}
 `;
 class c extends l {
   constructor() {

package/dist/wj-main.js

@@ -3,9 +3,7 @@ var i = (t, e, s) => e in t ? a(t, e, { enumerable: !0, configurable: !0, writab
 var o = (t, e, s) => (i(t, typeof e != "symbol" ? e + "" : e, s), s);
 import m from "./wj-element.js";
 import "./wj-store.js";
-const c = `/*!
-* direction.scss
-*/:host{display:block;flex:1;flex-basis:auto;padding:1.5rem;box-sizing:border-box}
+const c = `:host{display:block;flex:1;flex-basis:auto;padding:1.5rem;box-sizing:border-box}
 `;
 class l extends m {
   constructor() {