wj-elements 0.1.8 → 0.1.9

package/dist/wje-rate.js

@@ -2,7 +2,7 @@ var u = Object.defineProperty;
 var d = (r, o, e) => o in r ? u(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e;
 var n = (r, o, e) => (d(r, typeof o != "symbol" ? o + "" : o, e), e);
 import v from "./wje-element.js";
-const p = ":host{--wje-rate-gap: .25rem;display:flex}.native-rate{position:relative;display:flex;gap:var(--wje-rate-gap)}.wje-rate-icon{position:relative;cursor:pointer}.selected{color:var(--wje-color-danger)}:host(:not([readonly])) .wje-rate-icon:hover{transform:scale(1.2)}.half wje-icon:first-child{color:#fff}.half wje-icon:last-child{color:currentColor;position:absolute;top:0;left:0}:host([disabled]) .native-rate{pointer-events:none;opacity:.5}";
+const p = ":host{--wje-rate-gap: .25rem;display:flex}.native-rate{position:relative;display:flex;gap:var(--wje-rate-gap)}.wje-rate-icon{position:relative;cursor:pointer}.selected{color:var(--wje-color-danger)}:host(:not([readonly])) .wje-rate-icon:hover{transform:scale(1.2)}.half wje-icon:first-child{color:var(--wje-color)}.half wje-icon:last-child{color:currentColor;position:absolute;top:0;left:0}:host([disabled]) .native-rate{pointer-events:none;opacity:.5}";
 class c extends v {
   /**
    * Creates an instance of Rate.
@@ -117,7 +117,7 @@ class c extends v {
    * @returns {Array<string>} The value of the icons.
    */
   get icons() {
-    return this.hasAttribute("icons") ? JSON.parse(this.getAttribute("icons").replace(/'/g, '"')) : ["star-filled"];
+    return this.hasAttribute("icons") ? JSON.parse(this.getAttribute("icons").replace(/'/g, '"')) : ["star"];
   }
   /**
    * Sets the value of the rating component.

package/dist/wje-reorder-dropzone.js

@@ -0,0 +1,27 @@
+var l = Object.defineProperty;
+var i = (t, e, r) => e in t ? l(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var d = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
+import c from "./wje-element.js";
+const m = ".dropzone{border:1px dashed lightgrey;border-radius:var(--wje-border-radius-small);margin:.5rem;display:flex;flex-direction:column;align-items:center;overflow:hidden;justify-content:center;min-height:250px}";
+class s extends c {
+  constructor() {
+    super();
+    d(this, "className", "ReorderDropzone");
+  }
+  static get cssStyleSheet() {
+    return m;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(r, p, u) {
+    let n = document.createDocumentFragment(), o = document.createElement("div");
+    o.classList.add("dropzone");
+    let a = document.createElement("slot");
+    return o.appendChild(a), n.appendChild(o), n;
+  }
+}
+s.define("wje-reorder-dropzone", s);
+export {
+  s as default
+};

package/dist/wje-reorder-item.js

@@ -0,0 +1,32 @@
+var l = Object.defineProperty;
+var m = (t, e, r) => e in t ? l(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var d = (t, e, r) => (m(t, typeof e != "symbol" ? e + "" : e, r), r);
+import c, { WjElementUtils as p } from "./wje-element.js";
+const g = ":host{--reorder-item-spacing: .5rem}.item{width:134px;height:19px;display:flex;align-items:center;justify-content:center;position:relative;gap:var(--reorder-item-spacing);padding:var(--reorder-item-spacing);border-radius:var(--wje-border-radius-small);cursor:grab;transition:transform .3s linear}.item-w-handle{cursor:default}.item:hover:not(.item-w-handle){background-color:#f4f4f5}.item:active:not(.item-w-handle):not(.moving){cursor:grabbing}.moving{background-color:#d3d3d3}.handle{cursor:grab;gap:10px}.handle:active{cursor:grabbing}.name{width:108px;height:19px;text-align:center;font-size:var(--wje-font-size-medium);font-weight:400;line-height:19.36px;gap:10px}.drag--down{--item-transform: translateY(-10px)}.drag--up{--item-transform: translateY(10px)}.item{transform:var(--item-transform)}";
+class o extends c {
+  constructor() {
+    super();
+    d(this, "className", "ReorderItem");
+  }
+  static get cssStyleSheet() {
+    return g;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(r, h, u) {
+    let s = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("item"), a.setAttribute("part", "native-reorder-item");
+    let i = document.createElement("slot");
+    if (i.classList.add("name"), p.hasSlot(this, "handle")) {
+      const n = document.createElement("slot");
+      n.classList.add("handle"), n.setAttribute("name", "handle"), n.setAttribute("part", "handle-part"), a.classList.add("item-w-handle"), a.appendChild(n);
+    } else
+      i.setAttribute("draggable", "true");
+    return a.appendChild(i), s.appendChild(a), s;
+  }
+}
+o.define("wje-reorder-item", o);
+export {
+  o as default
+};

package/dist/wje-reorder.js

@@ -0,0 +1,104 @@
+import c from "./wje-element.js";
+const h = ".container{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.container-w-dropzones{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:row}";
+class l extends c {
+  constructor() {
+    super(), this.className = "Reorder", this.dragEl = null, this.items = [], this.originalIndex = null;
+  }
+  static get cssStyleSheet() {
+    return h;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, t, r) {
+    const a = document.createDocumentFragment(), n = document.createElement("div");
+    n.classList.add("container"), n.setAttribute("part", "native");
+    const s = document.createElement("slot");
+    return s.classList.add("reorder-items"), n.appendChild(s), a.appendChild(n), this.container = n, a;
+  }
+  afterDraw(e, t, r) {
+    const a = this.querySelectorAll("wje-reorder-item"), n = this.querySelectorAll("wje-reorder-dropzone");
+    n && n.forEach((s) => {
+      this.container.classList.remove("container"), this.container.classList.add("container-w-dropzones");
+    }), a && a.forEach((s) => {
+      const o = s.querySelectorAll("[slot=handle]");
+      (o.length > 0 ? o : [s]).forEach((d) => {
+        d.setAttribute("draggable", "true"), this.attachEventListeners(d);
+      });
+    });
+  }
+  onDragStart(e) {
+    if (this.hasAttribute("disabled")) {
+      e.preventDefault();
+      return;
+    }
+    const t = new Image();
+    t.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=", e.dataTransfer.setDragImage(t, 0, 0), this.dragEl = e.currentTarget.closest("wje-reorder-item"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/html", `${this.dragEl.innerHTML}`), this.originalIndex = [...this.dragEl.parentNode.children].indexOf(
+      this.dragEl
+    ), this.originalParent = this.dragEl.parentNode;
+  }
+  onDragOver(e) {
+    e.preventDefault();
+    const t = e.currentTarget.closest("wje-reorder-item"), r = t.parentNode;
+    this.dragEl !== t ? (this.updateDropStyles(t, this.isMovingDown(e)), this.updateItemsPosition(r, t, this.isMovingDown(e))) : t.shadowRoot.querySelector("div").classList.add("moving");
+  }
+  onDragEnter(e) {
+  }
+  onDragLeave(e) {
+  }
+  onDrop(e) {
+    e.preventDefault();
+    const t = e.currentTarget.closest("wje-reorder-item");
+    if (t.shadowRoot.querySelector("div").classList.remove("moving"), !t.parentNode)
+      return;
+    t.parentNode.insertBefore(this.dragEl, t);
+  }
+  onDragEnd(e) {
+    const t = this.dragEl.parentNode, r = Array.from(t.children).indexOf(this.dragEl);
+    [t, this.originalParent].forEach((n) => {
+      n.childNodes.forEach((s) => {
+        if (s.nodeType === 1) {
+          const o = s.shadowRoot.querySelector("div");
+          o && ["drag--up", "drag--down", "moving"].forEach(
+            (i) => o.classList.remove(i)
+          );
+        }
+      });
+    });
+    const a = Array.from(t.children).map((n) => {
+      const s = n.cloneNode(!0), o = s.querySelector(".handle");
+      return o && o.remove(), s.innerText.trim();
+    });
+    this.dispatchChange(this.originalIndex, r, a);
+  }
+  attachEventListeners(e) {
+    e.addEventListener("dragstart", this.onDragStart.bind(this), !1), e.addEventListener("touchstart", this.onDragStart.bind(this), !1), e.addEventListener("dragenter", this.onDragEnter.bind(this), !1), e.addEventListener("dragover", this.onDragOver.bind(this), !1), e.addEventListener("dragleave", this.onDragLeave.bind(this), !1), e.addEventListener("drop", this.onDrop.bind(this), !1), e.addEventListener("dragend", this.onDragEnd.bind(this), !1), e.addEventListener("touchend", this.onDragEnd.bind(this), !1);
+  }
+  updateDropStyles(e, t) {
+    const r = e.shadowRoot.querySelector("div").classList;
+    r.toggle("drag--down", t), r.toggle("drag--up", !t);
+  }
+  updateItemsPosition(e, t, r) {
+    e.insertBefore(
+      this.dragEl,
+      r ? t.nextSibling : t
+    );
+  }
+  isMovingDown(e) {
+    const t = e.currentTarget.closest("wje-reorder-item").parentNode, r = Array.from(t.children).indexOf(this.dragEl), a = Array.from(t.children).indexOf(
+      e.currentTarget.closest("wje-reorder-item")
+    );
+    return r < a;
+  }
+  dispatchChange(e, t, r) {
+    console.log("FROM:", e), console.log("TO:", t), console.log("ORDER:", r), this.dispatchEvent(
+      new CustomEvent("wje-reorder:change", {
+        detail: { from: e, to: t, order: r }
+      })
+    );
+  }
+}
+l.define("wje-reorder", l);
+export {
+  l as default
+};

package/dist/wje-select.js

@@ -7,7 +7,7 @@ import "./wje-popup.js";
 import y from "./wje-icon.js";
 import C from "./wje-label.js";
 import L from "./wje-chip.js";
-import { P as O } from "./popup.element-Dj9j__Dh.js";
+import { P as O } from "./popup.element-CpEjis9f.js";
 const k = ":host{--wje-select-border-width: 1px;--wje-select-border-style: solid;--wje-select-border-color: var(--wje-border-color);--wje-select-options-border-width: 1px;--wje-select-options-border-style: var(--wje-border-style);--wje-select-options-border-color: var(--wje-border-color);--wje-select-background: var(--wje-background);--wje-select-line-height: 20px;--wje-select-color: var(--wje-color);--wje-select-border-radius: var(--wje-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wje-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wje-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wje-select-line-height)}.native-select.default wje-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .wrapper{border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius)}.native-select.standard .input-wrapper{background:transparent;width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wje-select-background);min-height:28px;color:var(--wje-select-color);line-height:var(--wje-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .wrapper{border-radius:var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wje-select-options-border-width);border-style:var(--wje-select-options-border-style);border-color:var(--wje-select-options-border-color);border-radius:0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);margin-top:-1px;background:var(--wje-select-background);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wje-chip{--wje-chip-margin: 0 .25rem 0 0}wje-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}";
 class v extends E {
   /**

package/dist/wje-tab.js

@@ -2,8 +2,8 @@ var l = Object.defineProperty;
 var d = (e, t, a) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
 var n = (e, t, a) => (d(e, typeof t != "symbol" ? t + "" : t, a), a);
 import c, { event as p } from "./wje-element.js";
-const b = ':host{--wje-font-size: 10px;--wje-tab-text-transfrom: uppercase;--wje-tab-font-weight: 500;--wje-tab-letter-spacing: .06em;--wje-tab-padding-inline: 1rem;--wje-tab-padding-top: .75rem;--wje-tab-padding-bottom: .75rem;--wje-tab-color-active: var(--wje-color-primary-11);--wje-tab-color-hover: var(--wje-color-primary-1);display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wje-font-family-secondary);font-size:var(--wje-font-size);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);color:var(--wje-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wje-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}';
-class i extends c {
+const b = ':host{display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wje-font-family-secondary);font-size:var(--wje-font-size-small);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);color:var(--wje-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wje-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}';
+class s extends c {
   /**
    * Creates an instance of Tab.
    *
@@ -42,9 +42,9 @@ class i extends c {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(a, w, m) {
-    let r = document.createDocumentFragment(), s = document.createElement("slot"), o = document.createElement("a");
-    return o.setAttribute("href", "#" + this.panel), o.appendChild(s), r.appendChild(o), r;
+  draw(a, w, h) {
+    let r = document.createDocumentFragment(), i = document.createElement("slot"), o = document.createElement("a");
+    return o.setAttribute("href", "#" + this.panel), o.appendChild(i), r.appendChild(o), r;
   }
   /**
    * Sets up the event listeners after the component is drawn.
@@ -53,7 +53,7 @@ class i extends c {
     p.addListener(this, "click", "wje:tab-change");
   }
 }
-i.define("wje-tab", i);
+s.define("wje-tab", s);
 export {
-  i as default
+  s as default
 };

package/dist/wje-textarea.js

@@ -1,9 +1,9 @@
-var x = Object.defineProperty;
-var p = (i, a, t) => a in i ? x(i, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[a] = t;
-var s = (i, a, t) => (p(i, typeof a != "symbol" ? a + "" : a, t), t);
-import b, { event as h } from "./wje-element.js";
-const v = ':host{--wje-textarea-font-family: var(--wje-font-family);--wje-textarea-background-color: var(--wje-background);--wje-textarea-color: var(--wje-color);--wje-textarea-color-invalid: var(--wje-color-danger);--wje-textarea-border-width: 1px;--wje-textarea-border-style: solid;--wje-textarea-border-color: var(--wje-border-color);--wje-textarea-border-color-focus: var(--wje-color-primary);--wje-textarea-border-radius: 4px;--wje-textarea-margin-bottom: .5rem;--wje-textarea-line-height: 20px;--wje-textarea-padding: .5rem;width:100%;margin-bottom:var(--wje-textarea-margin-bottom);display:block}:host .wrapper{display:flex;width:100%;border-width:var(--wje-textarea-border-width);border-style:var(--wje-textarea-border-style);border-color:var(--wje-textarea-border-color);border-radius:var(--wje-textarea-border-radius)}:host textarea{font-family:var(--wje-textarea-font-family);color:var(--wje-textarea-color);font-size:14px;border:0 none;padding:0 var(--wje-textarea-padding)}:host textarea:focus{outline:none}:host([resize="auto"]) textarea,:host([resize="none"]) textarea{resize:none}.native-textarea .input-wrapper{width:100%;line-height:normal}.native-textarea.default{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;padding-inline:0;padding-top:0;transition:background-color .2s ease;cursor:text}.native-textarea.default.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}.native-textarea.default textarea{border:none;padding-top:0;background:none;box-shadow:none;width:calc(100% - var(--wje-textarea-padding) * 2);max-width:calc(100% - var(--wje-textarea-padding) * 2);min-width:calc(100% - var(--wje-textarea-padding) * 2)}.native-textarea.default label{padding:0 var(--wje-textarea-padding);display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-line-height);padding-top:.25rem}.native-textarea.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-textarea.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}.native-textarea.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}.native-textarea.standard{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;border-radius:var(--wje-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.standard textarea{display:block;min-height:32px;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-textarea-border-radius)}.native-textarea.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-line-height)}.native-textarea.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius)}.native-textarea.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0}.native-textarea.standard.has-start textarea{border-top-left-radius:0;border-bottom-left-radius:0}.native-textarea.standard.has-end textarea{border-top-right-radius:0;border-bottom-right-radius:0}.native-textarea.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}';
-class u extends b {
+var p = Object.defineProperty;
+var b = (i, a, t) => a in i ? p(i, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[a] = t;
+var d = (i, a, t) => (b(i, typeof a != "symbol" ? a + "" : a, t), t);
+import x, { event as h } from "./wje-element.js";
+const v = ':host{width:100%;margin-bottom:var(--wje-textarea-margin-bottom);display:block}:host .wrapper{display:flex;width:100%;border-width:var(--wje-textarea-border-width);border-style:var(--wje-textarea-border-style);border-color:var(--wje-textarea-border-color);border-radius:var(--wje-textarea-border-radius)}:host textarea{font-family:var(--wje-textarea-font-family);color:var(--wje-textarea-color);font-size:14px;border:0 none;padding:0 var(--wje-textarea-padding)}:host textarea:focus{outline:none}:host([resize="auto"]) textarea,:host([resize="none"]) textarea{resize:none}.native-textarea .input-wrapper{width:100%;line-height:normal}.native-textarea.default{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;padding-inline:0;padding-top:0;transition:background-color .2s ease;cursor:text}.native-textarea.default.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}.native-textarea.default textarea{border:none;padding-top:0;background:none;box-shadow:none;width:calc(100% - var(--wje-textarea-padding) * 2);max-width:calc(100% - var(--wje-textarea-padding) * 2);min-width:calc(100% - var(--wje-textarea-padding) * 2)}.native-textarea.default label{padding:0 var(--wje-textarea-padding);display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-line-height);padding-top:.25rem}.native-textarea.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-textarea.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}.native-textarea.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}.native-textarea.standard{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;border-radius:var(--wje-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.standard textarea{display:block;min-height:32px;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-textarea-border-radius)}.native-textarea.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-line-height)}.native-textarea.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius)}.native-textarea.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0}.native-textarea.standard.has-start textarea{border-top-left-radius:0;border-bottom-left-radius:0}.native-textarea.standard.has-end textarea{border-top-right-radius:0;border-bottom-right-radius:0}.native-textarea.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}';
+class u extends x {
   /**
    * Creates an instance of Textarea.
    *
@@ -11,11 +11,11 @@ class u extends b {
    */
   constructor() {
     super();
-    s(this, "className", "Textarea");
+    d(this, "className", "Textarea");
     /**
      * Sets the height of the textarea.
      */
-    s(this, "setTextareaHeight", () => {
+    d(this, "setTextareaHeight", () => {
       this.getAttribute("resize") === "auto" && (this.input.style.height = "auto", this.input.style.height = this.input.scrollHeight + "px");
     });
     /**
@@ -23,7 +23,7 @@ class u extends b {
      *
      * @param {Event} e - The event object.
      */
-    s(this, "counter", (t) => {
+    d(this, "counter", (t) => {
       this.counterElement.innerText = t.target.value.length + "/" + this.input.maxLength;
     });
     this._checked = !1;
@@ -76,22 +76,22 @@ class u extends b {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, w, m) {
+  draw(t, m, f) {
     let l = document.createDocumentFragment(), r = document.createElement("div");
     r.classList.add("native-textarea", this.variant || "default"), r.setAttribute("part", "native"), this.hasAttribute("invalid") && r.classList.add("has-error");
     let c = document.createElement("div");
     c.classList.add("wrapper");
-    let n = document.createElement("div");
-    n.classList.add("input-wrapper");
-    let o = document.createElement("label");
-    o.htmlFor = "textarea", o.innerHTML = this.label || "";
+    let o = document.createElement("div");
+    o.classList.add("input-wrapper");
+    let n = document.createElement("label");
+    n.htmlFor = "textarea", n.innerHTML = this.label || "";
     let e = document.createElement("textarea");
-    if (e.id = "textarea", e.name = this.name, e.disabled = this.hasAttribute("disabled"), e.innerText = this.innerText, e.classList.add("form-control"), e.setAttribute("part", "input"), e.setAttribute("rows", this.rows || 3), e.setAttribute("spellcheck", !1), this.resize === "auto" && e.addEventListener("input", this.setTextareaHeight), this.variant === "standard" ? this.label && r.appendChild(o) : n.appendChild(o), n.appendChild(e), c.appendChild(n), r.appendChild(c), l.appendChild(r), this.hasAttribute("counter")) {
+    if (e.id = "textarea", e.name = this.name, e.disabled = this.hasAttribute("disabled"), e.innerText = this.innerText, e.classList.add("form-control"), e.setAttribute("part", "input"), e.setAttribute("rows", this.rows || 3), e.setAttribute("spellcheck", !1), this.resize === "auto" && e.addEventListener("input", this.setTextareaHeight), this.variant === "standard" ? this.label && r.appendChild(n) : o.appendChild(n), o.appendChild(e), c.appendChild(o), r.appendChild(c), l.appendChild(r), this.hasAttribute("counter")) {
       e.maxLength = this.maxLength || 1e3, e.addEventListener("input", this.counter);
-      let d = document.createElement("div");
-      d.classList.add("counter"), d.innerText = `${e.value.length}/${e.maxLength}`, this.counterElement = d, l.appendChild(d);
+      let s = document.createElement("div");
+      s.classList.add("counter"), s.innerText = `${e.value.length}/${e.maxLength}`, this.counterElement = s, l.appendChild(s);
     }
-    return this.native = r, this.labelElement = o, this.input = e, l;
+    return this.native = r, this.labelElement = n, this.input = e, l;
   }
   /**
    * Sets up the event listeners after the component is drawn.

package/dist/wje-thumbnail.js

@@ -1,9 +1,9 @@
-var n = Object.defineProperty;
-var u = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
-import l from "./wje-element.js";
-const m = ":host{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: var(--wje-border-radius-medium)}:host{width:var(--wje-thumbnail-width);height:var(--wje-thumbnail-height);display:block;border-radius:var(--wje-border-radius)}:host([circle]) ::slotted(img){border-radius:50%}::slotted(wje-img),::slotted(img){border-radius:var(--wje-thumbnail-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}";
-class s extends l {
+var l = Object.defineProperty;
+var u = (r, e, t) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var a = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
+import h from "./wje-element.js";
+const m = ":host{width:var(--wje-thumbnail-width);height:var(--wje-thumbnail-height);display:block;border-radius:var(--wje-border-radius)}:host([circle]) ::slotted(img){border-radius:50%}::slotted(wje-img),::slotted(img){border-radius:var(--wje-thumbnail-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}";
+class o extends h {
   /**
    * Thumbnail constructor
    * @constructor
@@ -14,7 +14,7 @@ class s extends l {
      * Class name
      * @type {string}
      */
-    i(this, "className", "Thumbnail");
+    a(this, "className", "Thumbnail");
   }
   /**
    * Get CSS stylesheet
@@ -44,7 +44,7 @@ class s extends l {
    * @param {Object} store - The store
    * @param {Object} params - The parameters
    */
-  beforeDraw(t, o, d) {
+  beforeDraw(t, i, d) {
   }
   /**
    * Draw method
@@ -53,12 +53,12 @@ class s extends l {
    * @param {Object} params - The parameters
    * @returns {Object} Document fragment
    */
-  draw(t, o, d) {
-    let a = document.createDocumentFragment(), h = document.createElement("slot");
-    return a.appendChild(h), a;
+  draw(t, i, d) {
+    let s = document.createDocumentFragment(), n = document.createElement("slot");
+    return s.appendChild(n), s;
   }
 }
-s.define("wje-thumbnail", s);
+o.define("wje-thumbnail", o);
 export {
-  s as default
+  o as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",