wj-elements 0.0.4 → 0.0.6

package/dist/wj-container.js

@@ -1,16 +1,14 @@
-var r = Object.defineProperty;
-var a = (e, t, n) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var s = (e, t, n) => (a(e, typeof t != "symbol" ? t + "" : t, n), n);
+var s = Object.defineProperty;
+var a = (e, t, n) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var o = (e, t, n) => (a(e, typeof t != "symbol" ? t + "" : t, n), n);
 import c from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/:host{--wj-container-indent: 0;display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}:host([vertical]){flex-direction:column}@media (min-width: 768px){:host([indent]){margin-left:var(--wj-container-indent)}}
+const d = `:host{--wj-container-indent: 0;display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}:host([vertical]){flex-direction:column}@media (min-width: 768px){:host([indent]){margin-left:var(--wj-container-indent)}}
 `;
 class l extends c {
   constructor() {
     super();
-    s(this, "className", "Container");
+    o(this, "className", "Container");
   }
   static get cssStyleSheet() {
     return d;
@@ -24,8 +22,8 @@ class l extends c {
   draw(n, m, u) {
     let i = document.createDocumentFragment();
     this.indent && this.style.setProperty("--wj-container-indent", this.indent);
-    let o = document.createElement("slot");
-    return i.appendChild(o), i;
+    let r = document.createElement("slot");
+    return i.appendChild(r), i;
   }
 }
 customElements.get("wj-container") || window.customElements.define("wj-container", l);

package/dist/wj-copy-button.js

@@ -27,9 +27,7 @@ function u(o) {
   const t = f(o);
   return e.appendChild(t), l(t), e.removeChild(t), Promise.resolve();
 }
-const b = `/*!
-* direction.scss
-*/:host{cursor:pointer;padding:.5rem}
+const b = `:host{cursor:pointer;padding:.5rem}
 `;
 class y extends h {
   constructor() {

package/dist/wj-dialog.js

@@ -1,16 +1,14 @@
-var j = Object.defineProperty;
-var b = (e, i, t) => i in e ? j(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t;
-var m = (e, i, t) => (b(e, typeof i != "symbol" ? i + "" : i, t), t);
-import u, { WjElementUtils as x } from "./wj-element.js";
+var c = Object.defineProperty;
+var b = (e, a, t) => a in e ? c(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var h = (e, a, t) => (b(e, typeof a != "symbol" ? a + "" : a, t), t);
+import u, { WjElementUtils as f } from "./wj-element.js";
 import "./wj-store.js";
-const f = `/*!
-* direction.scss
-*/:host{--wj-dialog-width: 600px;--wj-dialog-height: 600px;--wj-dialog-padding: 1rem;--wj-dialog-border-radius: 8px;--wj-dialog-border-width: 1px;--wj-dialog-border-style: solid;--wj-dialog-border-color: rgba(33, 33, 33, .17);--wj-dialog-margin-top: auto;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: auto}:host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wj-dialog-padding);padding-top:var(--wj-dialog-padding);display:flex;align-items:center}:host .dialog-header span{-webkit-transition:opacity .3s ease;transition:opacity .3s ease;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wj-dialog-padding);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wj-dialog-padding);padding-top:0;padding-bottom:var(--wj-dialog-padding)}dialog::backdrop{--wj-backdrop: rgb(0, 0, 0);--wj-backdrop-opacity: .3;opacity:var(--wj-backdrop-opacity);background-color:var(--wj-backdrop)}:host(.separator) .dialog-header:after{content:"";height:1px;background:rgba(0,0,0,.08);left:var(--wj-dialog-padding);right:var(--wj-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wj-dialog-width);height:var(--wj-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wj-dialog-border-radius);border-width:var(--wj-dialog-border-width);border-style:var(--wj-dialog-border-style);border-color:var(--wj-dialog-border-color);margin-top:var(--wj-dialog-margin-top);margin-bottom:var(--wj-dialog-margin-bottom);margin-inline:var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);padding:0}:host(.stick-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 0 0 8px 8px;--wj-dialog-border-width: 0 1px 1px 1px;--wj-dialog-margin-top: 0}:host(.slide-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 8px;--wj-dialog-border-width: 1px}:host(.fill-in){--wj-dialog-width: 100%;--wj-dialog-height: 100%;--wj-dialog-border-radius: 0 0 0 0 !important;--wj-dialog-border-width: 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0}:host(.fill-in) dialog{min-width:var(--wj-dialog-width);min-height:var(--wj-dialog-height)}:host(.slide-left){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 1px 0 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wj-dialog-height)}:host(.slide-right){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 0 0 1px;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wj-dialog-height)}:host(.small){--wj-dialog-width: 300px !important}:host(.medium){--wj-dialog-width: 500px !important}:host(.large){--wj-dialog-width: 600px !important}:host(.ex-large){--wj-dialog-width: 900px !important}
+const v = `:host{--wj-dialog-width: 600px;--wj-dialog-height: 600px;--wj-dialog-border-radius: var(--wj-border-radius-large);--wj-dialog-border-width: var(--wj-border-width);--wj-dialog-border-style: var(--wj-border-style);--wj-dialog-border-color: var(--wj-border-color);--wj-dialog-margin-top: auto;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: auto}:host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wj-dialog-padding, 1rem);padding-top:var(--wj-dialog-padding, 1rem);padding-bottom:var(--wj-dialog-padding, 0);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wj-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wj-dialog-padding, 1rem);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wj-dialog-padding-inline, 1rem);padding-top:var(--wj-dialog-padding-top, 1rem);padding-bottom:var(--wj-dialog-padding-bottom, 1rem)}dialog::backdrop{opacity:var(--wj-backdrop-opacity);background-color:var(--wj-backdrop)}:host(.separator) .dialog-header:after{content:"";height:1px;background:rgba(0,0,0,.08);left:var(--wj-dialog-padding, 1rem);right:var(--wj-dialog-padding, 1rem);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wj-dialog-width);height:var(--wj-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wj-dialog-border-radius);border-width:var(--wj-dialog-border-width);border-style:var(--wj-dialog-border-style);border-color:var(--wj-dialog-border-color);margin-top:var(--wj-dialog-margin-top);margin-bottom:var(--wj-dialog-margin-bottom);margin-inline:var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);padding:0}:host(.stick-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 0 0 8px 8px;--wj-dialog-border-width: 0 1px 1px 1px;--wj-dialog-margin-top: 0;--wj-dialog-translate-from: translateY(-110%);--wj-dialog-template-to: translateX(0)}:host(.slide-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 8px;--wj-dialog-border-width: 1px;--wj-dialog-opacity-from: 0;--wj-dialog-translate-from: scale(.9);--wj-dialog-translate-to: scale(1)}:host(.fill-in){--wj-dialog-width: 100%;--wj-dialog-height: 100%;--wj-dialog-border-radius: 0 0 0 0 !important;--wj-dialog-border-width: 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0;--wj-dialog-translate-from: scale(.95);--wj-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wj-dialog-width);min-height:var(--wj-dialog-height)}:host(.slide-left){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 1px 0 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wj-dialog-height);--wj-dialog-translate-from: translateX(-110%);--wj-dialog-template-to: translateX(0)}:host(.slide-right){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 0 0 1px;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wj-dialog-height);--wj-dialog-translate-from: translateX(110%);--wj-dialog-template-to: translateX(0)}:host(.small){--wj-dialog-width: 300px !important}:host(.medium){--wj-dialog-width: 500px !important}:host(.large){--wj-dialog-width: 600px !important}:host(.ex-large){--wj-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wj-dialog-opacity-from, 1);transform:var(--wj-dialog-translate-from)}to{opacity:1;transform:var(--wj-dialog-translate-to)}}
 `;
-class v extends u {
+class x extends u {
   constructor() {
     super();
-    m(this, "className", "Dialog");
+    h(this, "className", "Dialog");
   }
   set placement(t) {
     this.setAttribute("placement", t);
@@ -19,39 +17,39 @@ class v extends u {
     return this.getAttribute("placement") || "slide-up";
   }
   static get cssStyleSheet() {
-    return f;
+    return v;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    this.isShadowRoot = "open", x.setAttributesToElement(this, {
+    this.isShadowRoot = "open", f.setAttributesToElement(this, {
       test: "test"
     });
   }
   beforeDraw(t, s, r) {
   }
   draw(t, s, r) {
-    let p = document.createDocumentFragment();
+    let m = document.createDocumentFragment();
     this.classList.add("modal", "fade", this.placement, r.size);
-    let c = document.createElement("slot"), o = document.createElement("dialog");
+    let j = document.createElement("slot"), o = document.createElement("dialog");
     o.classList.add("modal-dialog");
     let g = document.createElement("wj-icon");
     g.setAttribute("name", "x"), g.setAttribute("slot", "icon-only");
-    let a = document.createElement("wj-button");
-    a.setAttribute("fill", "link"), a.setAttribute("size", "small"), a.classList.add("close"), a.addEventListener("click", () => {
+    let i = document.createElement("wj-button");
+    i.setAttribute("fill", "link"), i.setAttribute("size", "small"), i.classList.add("close"), i.addEventListener("click", () => {
       o.close();
-    }), a.appendChild(g);
+    }), i.appendChild(g);
     let d = document.createElement("div");
-    d.setAttribute("part", "header"), d.classList.add("dialog-header"), d.innerHTML = `<span>${this.title}</span>`, d.appendChild(a);
+    d.setAttribute("part", "header"), d.classList.add("dialog-header"), d.innerHTML = `<span>${this.title}</span>`, d.appendChild(i);
     let w = document.createElement("slot");
     w.setAttribute("name", "header"), d.appendChild(w);
     let n = document.createElement("div");
-    n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(c);
+    n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(j);
     let l = document.createElement("div");
     l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
-    let h = document.createElement("slot");
-    return h.setAttribute("name", "footer"), l.appendChild(h), o.appendChild(d), o.appendChild(n), o.appendChild(l), p.appendChild(o), this.dialog = o, p;
+    let p = document.createElement("slot");
+    return p.setAttribute("name", "footer"), l.appendChild(p), o.appendChild(d), o.appendChild(n), o.appendChild(l), m.appendChild(o), this.dialog = o, m;
   }
   afterDraw(t, s, r) {
     r.trigger && document.addEventListener(r.trigger, () => {
@@ -59,7 +57,7 @@ class v extends u {
     });
   }
 }
-customElements.get("wj-dialog") || window.customElements.define("wj-dialog", v);
+customElements.get("wj-dialog") || window.customElements.define("wj-dialog", x);
 export {
-  v as Dialog
+  x as Dialog
 };

package/dist/wj-divider.js

@@ -1,19 +1,17 @@
-var n = Object.defineProperty;
-var a = (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) => (a(r, typeof e != "symbol" ? e + "" : e, t), t);
-import c from "./wj-element.js";
+var a = Object.defineProperty;
+var n = (r, e, t) => e in r ? a(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => (n(r, typeof e != "symbol" ? e + "" : e, t), t);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const l = `/*!
-* direction.scss
-*/:host{--wj-border-size: 1px;--wj-divider-border-color: var(--wj-border-color);--wj-divider-border-width: var(--wj-border-size, 1px);--wj-divider-spacing: 0}:host(:not([vertical])){display:block;border-top:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:var(--wj-divider-spacing) 0}:host([vertical]){display:inline-block;height:100%;border-left:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:0 var(--wj-divider-spacing)}
+const c = `:host{--wj-border-size: 1px;--wj-divider-border-color: var(--wj-border-color);--wj-divider-border-width: var(--wj-border-size, 1px);--wj-divider-spacing: 0}:host(:not([vertical])){display:block;border-top:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:var(--wj-divider-spacing) 0}:host([vertical]){display:inline-block;height:100%;border-left:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:0 var(--wj-divider-spacing)}
 `;
-class v extends c {
+class v extends l {
   constructor() {
     super();
     o(this, "className", "Divider");
   }
   static get cssStyleSheet() {
-    return l;
+    return c;
   }
   static get observedAttributes() {
     return [];

package/dist/wj-dropdown.js

@@ -1,12 +1,8 @@
 var a = Object.defineProperty;
-var c = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var o = (s, t, e) => (c(s, typeof t != "symbol" ? t + "" : t, e), e);
+var c = (r, t, e) => t in r ? a(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var o = (r, t, e) => (c(r, typeof t != "symbol" ? t + "" : t, e), e);
 import l from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/
-`;
 class p extends l {
   constructor() {
     super();
@@ -19,7 +15,7 @@ class p extends l {
     return this.getAttribute("trigger") || "click";
   }
   static get cssStyleSheet() {
-    return d;
+    return styles;
   }
   static get observedAttributes() {
     return ["active"];
@@ -27,14 +23,14 @@ class p extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, u, m) {
-    let i = document.createDocumentFragment();
+  draw(e, d, u) {
+    let n = document.createDocumentFragment();
     this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
-    let n = document.createElement("div");
-    n.setAttribute("part", "native"), n.classList.add("native-dropdown");
-    let r = document.createElement("wj-popup");
-    return r.setAttribute("placement", this.placement), r.setAttribute("offset", this.offset), r.setAttribute("manual", ""), r.innerHTML = `<slot name="trigger" slot="anchor"></slot>
-            <slot></slot>`, this.trigger === "click" && r.setAttribute("manual", ""), n.appendChild(r), i.appendChild(n), i;
+    let i = document.createElement("div");
+    i.setAttribute("part", "native"), i.classList.add("native-dropdown");
+    let s = document.createElement("wj-popup");
+    return s.setAttribute("placement", this.placement), s.setAttribute("offset", this.offset), s.setAttribute("manual", ""), s.innerHTML = `<slot name="trigger" slot="anchor"></slot>
+            <slot></slot>`, this.trigger === "click" && s.setAttribute("manual", ""), i.appendChild(s), n.appendChild(i), n;
   }
 }
 customElements.get("wj-dropdown") || window.customElements.define("wj-dropdown", p);

package/dist/wj-element.js

@@ -4,13 +4,13 @@ var a = (o, e, t) => (E(o, typeof e != "symbol" ? e + "" : e, t), t), v = (o, e,
   if (!e.has(o))
     throw TypeError("Cannot " + t);
 };
-var y = (o, e, t) => {
+var b = (o, e, t) => {
   if (e.has(o))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(o) : e.set(o, t);
 };
 var f = (o, e, t) => (v(o, e, "access private method"), t);
-import { store as b, defaultStoreActions as P } from "./wj-store.js";
+import { store as w, defaultStoreActions as P } from "./wj-store.js";
 class j {
   constructor(e = {}) {
     a(this, "findByKey", (e, t, s) => {
@@ -171,7 +171,7 @@ class u {
 var d, l, m;
 class T {
   constructor() {
-    y(this, l);
+    b(this, l);
     this.customEventStorage = [], d = this;
   }
   dispatchCustomEvent(e, t, s) {
@@ -235,8 +235,8 @@ l = new WeakSet(), m = function(e) {
   });
 };
 let k = new T();
-const w = document.createElement("template");
-w.innerHTML = "";
+const y = document.createElement("template");
+y.innerHTML = "";
 class S extends HTMLElement {
   constructor(t) {
     super();
@@ -248,8 +248,8 @@ class S extends HTMLElement {
       const i = new CSSStyleSheet();
       i.replaceSync(this.constructor.cssStyleSheet), this.context.adoptedStyleSheets = [i];
     });
-    this.template = t || w, this._attributes = {}, this.isAttached = !1, this.service = new j({
-      store: b
+    this.template = t || y, this._attributes = {}, this.isAttached = !1, this.service = new j({
+      store: w
     }), this.rendering = !1, this.runtimeTimeout = null, this.count = 0, this.functionStack = [], this.scheludedRefresh = !1;
   }
   get permission() {
@@ -277,7 +277,7 @@ class S extends HTMLElement {
     return this.isShadowRoot ? this.shadowRoot : this;
   }
   get store() {
-    return b;
+    return w;
   }
   //		addAction,
   //     deleteAction,
@@ -364,7 +364,7 @@ class S extends HTMLElement {
     return null;
   }
   display(t = !1, s) {
-    this.isProcessingFlow(s) || (t && this.isShadowRoot && ([...this.context.children].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.isAttached && console.log("Already rendered...", this), this.context.append(this.template.content.cloneNode(!0)), this.isPermissionCheck || this.isShow ? c.isPermissionFulfilled.bind(this)(this.permission) ? this._resolveRender(s) : this.remove() : this._resolveRender(s));
+    this.isProcessingFlow(s) || (t && this.isShadowRoot && ([...this.context.children].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.isAttached, this.context.append(this.template.content.cloneNode(!0)), this.isPermissionCheck || this.isShow ? c.isPermissionFulfilled.bind(this)(this.permission) ? this._resolveRender(s) : this.remove() : this._resolveRender(s));
   }
   render(t) {
     if (this.drawingStatus = "DRAWING", this.isProcessingFlow(t))

package/dist/wj-file-upload-item.js

@@ -0,0 +1,63 @@
+var h = Object.defineProperty;
+var g = (a, t, e) => t in a ? h(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var c = (a, t, e) => (g(a, typeof t != "symbol" ? t + "" : t, e), e);
+import w from "./wj-element.js";
+import { L as b } from "./localize-762a9f0f.js";
+import "./wj-store.js";
+const f = `:host{width:100%}.native-file-upload-item{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 .5rem;grid-template-areas:"image name actions" "image size actions" "progress progress progress";padding:.5rem;border:1px solid var(--wj-border-color);border-radius:var(--wj-border-radius-medium)}.image{grid-area:image;align-items:center;display:flex}::slotted([slot=img]){--wj-img-border-radius: var(--wj-border-radius-medium) !important}.name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.size{grid-area:size;display:flex}.actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end}.file-progress{grid-area:progress}wj-icon{margin-right:.25rem}wj-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wj-slider{flex-basis:100%;margin-top:.5rem}::part(slider)::-webkit-slider-thumb{visibility:hidden}::part(slider)::-moz-range-thumb{visibility:hidden}::part(slider)::-ms-thumb{visibility:hidden}wj-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wj-border-color);border-radius:var(--wj-border-radius-medium)}
+`;
+class v extends w {
+  constructor() {
+    super();
+    c(this, "className", "FileUploadItem");
+    c(this, "onDelete", () => {
+      this.remove();
+    });
+    this.localizer = new b(this);
+  }
+  static get cssStyleSheet() {
+    return f;
+  }
+  static get observedAttributes() {
+    return ["uploaded"];
+  }
+  attributeChangedCallback(e, i, m) {
+    if (e === "uploaded" && this.drawingStatus === "AFTER") {
+      this.uploadedEl.setAttribute("value", this.uploaded);
+      let r = +this.uploaded / +this.size * 100 || 0;
+      this.sliderEl.setAttribute("value", Math.round(r, 0));
+    }
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw() {
+    let e = document.createDocumentFragment(), i = document.createElement("div");
+    i.classList.add("native-file-upload-item");
+    let m = document.createElement("slot");
+    m.setAttribute("name", "img");
+    let r = document.createElement("div");
+    r.classList.add("image");
+    let p = document.createElement("span");
+    p.classList.add("name"), p.innerText = this.name;
+    let d = document.createElement("slot");
+    d.classList.add("actions"), d.setAttribute("name", "action");
+    let l = document.createElement("wj-button");
+    l.setAttribute("fill", "link"), l.setAttribute("size", "small"), l.innerHTML = '<wj-icon name="x" size="small"></wj-icon>';
+    let o = document.createElement("span");
+    o.classList.add("size");
+    let n = document.createElement("wj-format-digital");
+    n.setAttribute("value", this.uploaded || 0), n.innerHTML = `<span slot="start">${this.localizer.translate("wj.file.upload.uploaded")}</span>`;
+    let u = document.createElement("wj-format-digital");
+    u.setAttribute("value", this.size || 0), u.innerHTML = `<span slot="start">&nbsp;${this.localizer.translate("wj.file.upload.from")} </span>`;
+    let s = document.createElement("wj-slider");
+    return s.classList.add("file-progress"), s.setAttribute("id", "id-" + this.lastModified), s.setAttribute("value", this.progress || 0), s.setAttribute("color", "success"), r.appendChild(m), d.appendChild(l), o.appendChild(n), o.appendChild(u), i.appendChild(r), i.appendChild(p), i.appendChild(o), i.appendChild(d), i.appendChild(s), e.appendChild(i), this.button = l, this.uploadedEl = n, this.sliderEl = s, e;
+  }
+  afterDraw() {
+    this.button.addEventListener("wj:button-click", this.onDelete);
+  }
+}
+customElements.get("wj-file-upload-item") || window.customElements.define("wj-file-upload-item", v);
+export {
+  v as FileUploadItem
+};

package/dist/wj-file-upload.js

@@ -0,0 +1,221 @@
+var y = Object.defineProperty;
+var w = (r, s, e) => s in r ? y(r, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[s] = e;
+var h = (r, s, e) => (w(r, typeof s != "symbol" ? s + "" : s, e), e);
+import v from "./wj-element.js";
+import { L as x } from "./localize-762a9f0f.js";
+import "./wj-store.js";
+function A() {
+  return [
+    {
+      type: ["jpg", "jpeg", "png", "gif", "bpm", "tiff", "svg"],
+      name: "photo"
+    },
+    {
+      type: ["zip", "rar", "cab", "jar", "tar", "gzip", "uue", "bz2", "scorm", "war"],
+      name: "file-type-zip"
+    },
+    {
+      type: ["mov", "mp4", "avi", "flv"],
+      name: "video"
+    },
+    {
+      type: ["m4a", "mp3", "wav"],
+      name: "audio"
+    },
+    {
+      type: ["html", "html"],
+      name: "file-type-html"
+    },
+    {
+      type: ["css"],
+      name: "code"
+    },
+    {
+      type: ["txt"],
+      name: "file-type-txt"
+    },
+    {
+      type: ["doc", "docx"],
+      name: "file-type-doc"
+    },
+    {
+      type: ["xls", "xlsx"],
+      name: "file-type-xls"
+    },
+    {
+      type: ["pdf"],
+      name: "file-type-pdf"
+    },
+    {
+      type: ["ppt", "pptx", "odp"],
+      name: "file-type-ppt"
+    }
+  ];
+}
+function E(r) {
+  let s;
+  return r.toLowerCase() !== "folder" ? A().forEach((e) => {
+    e.type.includes(r.toLowerCase()) && (s = e.name);
+  }) : s = "folder", s;
+}
+function z(r, s) {
+  console.log("FILE", r, s);
+  const e = r.type.split("/")[0];
+  console.log("BASE MIME TYPE", e);
+  let t = Array.isArray(s) ? s : s.split(",");
+  if (console.log("ACCEPTED TYPES", t), t.length === 0)
+    throw new Error("acceptedFileTypes is empty");
+  for (let i of t)
+    if (i.includes(e + "/*") || i.includes(r.type) || i.includes(r.type.split("/")[1]))
+      return !0;
+  return !1;
+}
+function L(r, s, e) {
+  console.log("UPLOAD FILE:", r, s, e);
+  let t = 0;
+  const i = new Array(Math.ceil(r.size / s)).fill(0), l = (a, p) => {
+    const n = new FileReader(), u = a / s, o = r.slice(a, p);
+    n.onload = (c) => {
+      const d = new XMLHttpRequest();
+      d.open("POST", "/upload", !0), d.setRequestHeader("Content-Range", `${a}-${p}/${r.size}`), d.upload.onprogress = (m) => {
+        if (m.lengthComputable) {
+          const g = m.loaded / m.total * 100;
+          i[u] = g, i.reduce((f, b) => f + b, 0) / i.length;
+        }
+      }, d.onload = () => {
+        d.status == 200 || d.status == 201 ? (i[u] = 100, a += s, a < r.size ? (e.setAttribute("uploaded", a), l(a, Math.min(a + s, r.size))) : (e.setAttribute("uploaded", a), console.log("Upload complete"))) : console.error("Error during upload: ", d.statusText);
+      }, d.send(c.target.result);
+    }, n.readAsArrayBuffer(o);
+  };
+  l(t, Math.min(t + s, r.size));
+}
+const j = `:host{width:100%}.native-file-upload{width:100%}.file-label{background:var(--wj-color-contrast-0);border:1px dashed var(--wj-border-color);border-radius:var(--wj-border-radius-medium);align-items:center;justify-content:center;display:flex;padding:1rem;margin-bottom:.5rem;flex-direction:column}.file-preview{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 0;grid-template-areas:"image name name" "image size size" "progress progress progress"}.file-image{grid-area:image;align-items:center;display:flex}.file-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{grid-area:size;display:flex}.file-progress{grid-area:progress}wj-icon{margin-right:.25rem}wj-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wj-slider{flex-basis:100%;margin-top:.5rem}::part(slider)::-webkit-slider-thumb{visibility:hidden}::part(slider)::-moz-range-thumb{visibility:hidden}::part(slider)::-ms-thumb{visibility:hidden}wj-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wj-border-color);border-radius:var(--wj-border-radius-medium)}
+`;
+class F extends v {
+  constructor() {
+    super();
+    h(this, "className", "FileUpload");
+    h(this, "handleDrop", (e) => {
+      const t = e.dataTransfer.files;
+      this.resetFormState(), this.uploadFiles(t);
+    });
+    h(this, "handleInputChange", (e) => {
+      this.resetFormState();
+      try {
+        this.handleSubmit(e);
+      } catch (t) {
+        console.log("NOT VALID 1", t);
+        return;
+      }
+    });
+    this.localizer = new x(this);
+  }
+  set acceptedTypes(e) {
+    this.setAttribute("accepted-types", e);
+  }
+  get acceptedTypes() {
+    const e = this.getAttribute("accepted-types");
+    return this.hasAttribute("accepted-types") ? e : "";
+  }
+  set chunkSize(e) {
+    this.setAttribute("chunk-size", e);
+  }
+  get chunkSize() {
+    const e = this.getAttribute("chunk-size");
+    return this.hasAttribute("chunk-size") ? e : 1024 * 1024;
+  }
+  set maxFileSize(e) {
+    this.setAttribute("max-file-size", e);
+  }
+  get maxFileSize() {
+    const e = this.getAttribute("max-file-size");
+    return this.hasAttribute("max-file-size") ? e * 1024 * 1024 : 1024 * 1024;
+  }
+  static get cssStyleSheet() {
+    return j;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, t, i) {
+    let l = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-file-upload"), a.setAttribute("part", "native");
+    let p = document.createElement("div");
+    p.classList.add("file-label");
+    let n = document.createElement("wj-button");
+    n.innerText = this.label || this.localizer.translate("wj.file.upload.button");
+    let u = document.createElement("slot"), o = document.createElement("input");
+    o.setAttribute("type", "file"), o.setAttribute("multiple", ""), o.setAttribute("style", "display:none;"), n.appendChild(u), n.appendChild(o), this.fileInput = o;
+    let c = document.createElement("div");
+    return c.classList.add("file-list"), p.appendChild(u), p.appendChild(n), a.appendChild(o), a.appendChild(p), a.appendChild(c), l.appendChild(a), this.native = a, this.fileList = c, this.button = n, l;
+  }
+  afterDraw() {
+    this.button.addEventListener("click", () => {
+      this.fileInput.click();
+    }), this.fileInput.addEventListener("change", this.handleInputChange), this.native.addEventListener("drop", this.handleDrop);
+    let e = 0;
+    this.native.addEventListener("dragenter", (t) => {
+      t.preventDefault(), e === 0 && this.native.classList.add("highlight"), e += 1;
+    }), this.native.addEventListener("dragover", (t) => {
+      t.preventDefault(), e === 0 && (e = 1);
+    }), this.native.addEventListener("dragleave", (t) => {
+      t.preventDefault(), e -= 1, e <= 0 && (e = 0, this.native.classList.remove("highlight"));
+    }), this.native.addEventListener("drop", (t) => {
+      t.preventDefault(), e = 0, this.native.classList.remove("highlight");
+    });
+  }
+  createButton() {
+    let e = document.createElement("wj-button");
+    e.innerText = this.label || this.localizer.translate("wj.file.upload.button");
+    let t = document.createElement("slot"), i = document.createElement("input");
+    return i.setAttribute("type", "file"), i.setAttribute("multiple", ""), i.setAttribute("style", "display:none;"), e.appendChild(t), e.appendChild(i), this.fileInput = i, e;
+  }
+  handleSubmit(e) {
+    e.preventDefault(), this.uploadFiles(this.fileInput.files);
+  }
+  // tu treba pridat kontrolu chunku
+  uploadFiles(e) {
+    e.length !== 0 && Array.from(e).forEach((t) => {
+      this.assertFilesValid(t);
+      let i, l = new FileReader();
+      l.onload = (a) => {
+        i = this.createPreview(t, l), this.fileList.appendChild(i), L(t, this.chunkSize, i);
+      }, l.readAsDataURL(t);
+    });
+  }
+  createPreview(e, t) {
+    let i = document.createElement("wj-file-upload-item");
+    return i.setAttribute("name", e.name), i.setAttribute("size", e.size), i.setAttribute("uploaded", "0"), i.setAttribute("progress", "0"), i.innerHTML = `<wj-icon slot="img" name="${E(e.type.split("/")[1])}" size="large"></wj-icon>`, i;
+  }
+  createThumbnail(e, t) {
+    let i = document.createElement("img");
+    return i.setAttribute("src", t.result), i;
+  }
+  // TODO: alowed types a size limit by malo byt cez attributy
+  assertFilesValid(e) {
+    const { name: t, size: i } = e;
+    if (console.log("FILE", e, this.acceptedTypes), !z(e, this.acceptedTypes))
+      throw new Error(`❌ FILE: "${t}" Valid file types are: "${this.acceptedTypes}"`);
+    if (i > this.maxFileSize)
+      throw new Error(`❌ File "${t}" could not be uploaded. Only images up to ${this.maxFileSize} MB are allowed. Nie je to ${i}`);
+  }
+  updateStatusMessage(e) {
+  }
+  updateProgressBar(e, t) {
+    const i = Math.round(e);
+    this.context.querySelector("#id-" + t).value = i;
+  }
+  showPendingState() {
+    this.updateStatusMessage("⏳ Pending...");
+  }
+  resetFormState() {
+    this.fileList.textContent = "", this.updateStatusMessage("🤷‍♂ Nothing's uploaded");
+  }
+}
+customElements.get("wj-file-upload") || window.customElements.define("wj-file-upload", F);
+export {
+  F as FileUpload
+};

package/dist/wj-footer.js

@@ -1,16 +1,14 @@
-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";
+var a = Object.defineProperty;
+var c = (e, t, o) => t in e ? a(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 i from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* direction.scss
-*/:host{--wj-footer-height: 60px;padding:0 20px;flex-shrink:0;height:var(--wj-footer-height);display:block}
+const m = `:host{--wj-footer-height: 60px;padding:0 20px;flex-shrink:0;height:var(--wj-footer-height);display:block}
 `;
-class l extends a {
+class l extends i {
   constructor() {
     super();
-    r(this, "className", "Footer");
+    s(this, "className", "Footer");
   }
   static get cssStyleSheet() {
     return m;
@@ -22,8 +20,8 @@ class l extends a {
     this.isShadowRoot = "open";
   }
   draw(o, d, p) {
-    let s = document.createDocumentFragment(), n = document.createElement("slot");
-    return s.appendChild(n), s;
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
   }
 }
 customElements.get("wj-footer") || window.customElements.define("wj-footer", l);

package/dist/wj-form.js

@@ -3,17 +3,15 @@ var c = (e, t, s) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writab
 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 i = `/*!
-* direction.scss
-*/:host{width:100%}
+const l = `:host{width:100%}
 `;
-class l extends a {
+class u extends a {
   constructor() {
     super();
     o(this, "className", "Form");
   }
   static get cssStyleSheet() {
-    return i;
+    return l;
   }
   static get observedAttributes() {
     return [];
@@ -21,12 +19,12 @@ class l extends a {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(s, u, d) {
+  draw(s, i, d) {
     let r = document.createDocumentFragment(), n = document.createElement("slot");
     return r.appendChild(n), r;
   }
 }
-customElements.get("wj-form") || window.customElements.define("wj-form", l);
+customElements.get("wj-form") || window.customElements.define("wj-form", u);
 export {
-  l as Form
+  u as Form
 };