wj-elements 0.0.11 → 0.0.13

package/dist/wj-store.js

@@ -1,7 +1,10 @@
-var h = Object.defineProperty;
-var o = (u, r, e) => r in u ? h(u, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[r] = e;
-var n = (u, r, e) => (o(u, typeof r != "symbol" ? r + "" : r, e), e);
-class d {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class PubSub {
   constructor() {
     this.events = {};
   }
@@ -14,11 +17,15 @@ class d {
    * @returns {number} A count of callbacks for this event
    * @memberof PubSub
    */
-  subscribe(r, e) {
-    let t = this;
-    return t.events.hasOwnProperty(r) || (t.events[r] = []), t.events[r].push(e) - 1, {
+  subscribe(event, callback) {
+    let self = this;
+    if (!self.events.hasOwnProperty(event)) {
+      self.events[event] = [];
+    }
+    self.events[event].push(callback) - 1;
+    return {
       unsubscribe() {
-        t.events[r].splice(t.events[r].indexOf(e), 1);
+        self.events[event].splice(self.events[event].indexOf(callback), 1);
       }
     };
   }
@@ -31,42 +38,78 @@ class d {
    * @returns {array} The callbacks for this event, or an empty array if no event exits
    * @memberof PubSub
    */
-  publish(r, e = {}, t) {
-    let s = this;
-    return s.events.hasOwnProperty(r) ? s.events[r].map((i) => i(e, t)) : [];
+  publish(event, newData = {}, oldData) {
+    let self = this;
+    if (!self.events.hasOwnProperty(event)) {
+      return [];
+    }
+    return self.events[event].map((callback) => callback(newData, oldData));
   }
 }
-const c = (u) => (r) => ({
-  type: `${u}/ADD`,
-  payload: r
-}), p = (u) => (r) => ({
-  type: `${u}/ADD_MANY`,
-  payload: r
-}), l = (u) => (r) => ({
-  type: `${u}/UPDATE`,
-  payload: r
-}), a = (u) => (r) => ({
-  type: `${u}/DELETE`,
-  payload: r
-}), f = (u) => (r) => ({
-  type: `${u}/LOAD`,
-  payload: r
-}), y = {
-  addAction: c,
-  deleteAction: a,
-  loadAction: f,
-  updateAction: l,
-  addManyAction: p
+const addAction = (stateValueName) => {
+  return (payload2) => {
+    return {
+      type: `${stateValueName}/ADD`,
+      payload: payload2
+    };
+  };
+};
+const addManyAction = (stateValueName) => {
+  return (payload2) => {
+    return {
+      type: `${stateValueName}/ADD_MANY`,
+      payload: payload2
+    };
+  };
+};
+const updateAction = (stateValueName) => {
+  return (payload2) => {
+    return {
+      type: `${stateValueName}/UPDATE`,
+      payload: payload2
+    };
+  };
+};
+const deleteAction = (stateValueName) => {
+  return (payload2) => {
+    return {
+      type: `${stateValueName}/DELETE`,
+      payload: payload2
+    };
+  };
+};
+const loadAction = (stateValueName) => {
+  return (payload2) => {
+    return {
+      type: `${stateValueName}/LOAD`,
+      payload: payload2
+    };
+  };
+};
+const defaultStoreActions = {
+  addAction,
+  deleteAction,
+  loadAction,
+  updateAction,
+  addManyAction
 };
-class A {
-  constructor(r = {}) {
-    n(this, "_state");
-    n(this, "_reducer");
-    n(this, "events");
-    n(this, "status");
-    this._isPause = !1, this._state = {}, this._reducer = function(t = {}, s) {
+class Store {
+  constructor(params = {}) {
+    __publicField(this, "_state");
+    __publicField(this, "_reducer");
+    __publicField(this, "events");
+    __publicField(this, "status");
+    this._isPause = false;
+    this._state = {};
+    this._reducer = function rootReducer(state = {}, action) {
       return {};
-    }, this.status = "resting", this.events = new d(), r != null && r.hasOwnProperty("reducer") && (this._reducer = r.reducer), this.refreshProxy(r == null ? void 0 : r.state);
+    };
+    this.status = "resting";
+    this.events = new PubSub();
+    if (params == null ? void 0 : params.hasOwnProperty("reducer")) {
+      this._reducer = params.reducer;
+    }
+    this.refreshProxy(params == null ? void 0 : params.state);
   }
   /**
    * A dispatcher for actions that looks in the actions 
@@ -77,116 +120,158 @@ class A {
    * @returns {boolean}
    * @memberof Store
    */
-  dispatch(r) {
+  dispatch(action) {
     this.status = "action";
-    let e = this._reducer(this._state, r);
-    return this.status = "mutation", this._state = Object.assign(this._state, e), !0;
+    let newState = this._reducer(this._state, action);
+    this.status = "mutation";
+    this._state = Object.assign(this._state, newState);
+    return true;
   }
   getState() {
     return JSON.parse(JSON.stringify(this._state));
   }
-  subscribe(r, e) {
-    return this.events.subscribe(r, e);
+  subscribe(eventName, callbackFn) {
+    return this.events.subscribe(eventName, callbackFn);
   }
-  unsubscribe(r) {
-    delete this.events[r];
+  unsubscribe(eventName) {
+    delete this.events[eventName];
   }
   pause() {
-    return this._isPause = !0, this;
+    this._isPause = true;
+    return this;
   }
-  play(r) {
-    return this._isPause = !1, this;
+  play(val) {
+    this._isPause = false;
+    return this;
   }
-  mergeReducers(r, e) {
-    let t = this._reducer;
-    this._reducer = (s, i) => ({
-      ...t(s, i),
-      [r]: e(s[r], i)
-    });
+  mergeReducers(stateValueName, newReducer) {
+    let reducerCopy = this._reducer;
+    this._reducer = (state, newState) => {
+      let preState = reducerCopy(state, newState);
+      let result = {
+        ...preState,
+        [stateValueName]: newReducer(state[stateValueName], newState)
+      };
+      return result;
+    };
   }
-  makeEveryArrayEntryAsStoreState(r, e = [], t = "id") {
-    e.forEach((s) => {
-      this.getState().hasOwnProperty(`${r}-${s[t]}`) ? this.dispatch(y.updateAction(`${r}-${s[t]}`)(s)) : this.define(`${r}-${s.id || s.source || s[t]}`, s, null, t);
+  makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = "id") {
+    array.forEach((entry) => {
+      if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {
+        this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));
+      } else {
+        this.define(`${storeKey}-${entry.id || entry.source || entry[identificator]}`, entry, null, identificator);
+      }
     });
   }
-  define(r, e, t, s = "id") {
-    if (this._state.hasOwnProperty(r)) {
-      console.warn(`STATE už obsahuje premennú ${r},ktorú sa pokúšate pridať`);
+  define(stateValueName, defaultValue, reducer, key = "id") {
+    if (this._state.hasOwnProperty(stateValueName)) {
+      console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);
       return;
     }
-    t instanceof Function ? this.mergeReducers(r, t) : e instanceof Array ? this.mergeReducers(r, this.createArrayReducer(r, s)) : this.mergeReducers(r, this.createObjectReducer(r, s)), this.refreshProxy({
+    if (reducer instanceof Function) {
+      this.mergeReducers(stateValueName, reducer);
+    } else {
+      if (defaultValue instanceof Array) {
+        this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));
+      } else {
+        this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));
+      }
+    }
+    this.refreshProxy({
       ...this._state,
-      [r]: e
+      [stateValueName]: defaultValue
     });
   }
-  refreshProxy(r) {
-    this._state = new Proxy(r || {}, {
-      set: (e, t, s) => {
-        if (JSON.stringify(e[t]) === JSON.stringify(s))
-          return !0;
-        let i = e[t];
-        return e[t] = s, this._isPause || this.events.publish(t, this._state, i), this.status !== "mutation" && console.warn(`You should use a mutation to set ${t}`), this.status = "resting", !0;
+  refreshProxy(state) {
+    this._state = new Proxy(state || {}, {
+      set: (state2, key, value) => {
+        if (JSON.stringify(state2[key]) === JSON.stringify(value)) {
+          return true;
+        }
+        let oldState = state2[key];
+        state2[key] = value;
+        if (!this._isPause)
+          this.events.publish(key, this._state, oldState);
+        if (this.status !== "mutation") {
+          console.warn(`You should use a mutation to set ${key}`);
+        }
+        this.status = "resting";
+        return true;
       }
     });
   }
-  createObjectReducer(r) {
-    return (e = {}, t) => {
-      switch (t.type) {
-        case `${r}/ADD`:
+  createObjectReducer(stateValueName) {
+    return (state = {}, action) => {
+      switch (action.type) {
+        case `${stateValueName}/ADD`:
           return {
-            ...t.payload
+            ...action.payload
           };
-        case `${r}/UPDATE`:
+        case `${stateValueName}/UPDATE`:
           return {
-            ...e,
-            ...t.payload
+            ...state,
+            ...action.payload
           };
-        case `${r}/DELETE`:
+        case `${stateValueName}/DELETE`:
           return {};
         default:
-          return e;
+          return state;
       }
     };
   }
-  createArrayReducer(r, e) {
-    return (t = [], s) => {
-      switch (s.type) {
-        case `${r}/ADD`:
-          return Array.isArray(s.payload) ? [
-            ...t,
-            ...s.payload
-          ] : [
-            ...t,
-            s.payload
-          ];
-        case `${r}/ADD_MANY`:
+  createArrayReducer(stateValueName, key) {
+    return (state = [], action) => {
+      switch (action.type) {
+        case `${stateValueName}/ADD`:
+          if (Array.isArray(action.payload)) {
+            return [
+              ...state,
+              ...action.payload
+            ];
+          } else {
+            return [
+              ...state,
+              action.payload
+            ];
+          }
+        case `${stateValueName}/ADD_MANY`:
           return [
-            ...t,
-            ...s.payload
-          ];
-        case `${r}/UPDATE`:
-          return t.some((i) => i[e] == s.payload[e]) ? [
-            ...t.map((i) => i[e] == s.payload[e] ? s.payload : i)
-          ] : [
-            ...t,
-            s.payload
+            ...state,
+            ...action.payload
           ];
-        case `${r}/DELETE`:
+        case `${stateValueName}/UPDATE`:
+          if (state.some((obj) => obj[key] == action.payload[key])) {
+            return [
+              ...state.map((obj) => {
+                if (obj[key] == action.payload[key]) {
+                  return action.payload;
+                }
+                return obj;
+              })
+            ];
+          } else {
+            return [
+              ...state,
+              action.payload
+            ];
+          }
+        case `${stateValueName}/DELETE`:
           return [
-            ...t.filter((i) => i.hasOwnProperty(e) && i[e] != s.payload[e] || !i.hasOwnProperty(e) && i != s.payload)
+            ...state.filter((obj) => obj.hasOwnProperty(key) && obj[key] != action.payload[key] || !obj.hasOwnProperty(key) && obj != action.payload)
           ];
-        case `${r}/LOAD`:
+        case `${stateValueName}/LOAD`:
           return [
-            ...s.payload
+            ...action.payload
           ];
         default:
-          return t;
+          return state;
       }
     };
   }
 }
-let D = new A();
+let store = new Store();
 export {
-  y as defaultStoreActions,
-  D as store
+  defaultStoreActions,
+  store
 };

package/dist/wj-textarea.js

@@ -1,30 +1,39 @@
-var u = Object.defineProperty;
-var x = (r, a, t) => a in r ? u(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
-var s = (r, a, t) => (x(r, typeof a != "symbol" ? a + "" : a, t), t);
-import p, { event as h } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
 import "./wj-store.js";
-const b = `:host{--wj-textarea-font-family: var(--wj-font-family);--wj-textarea-background-color: var(--wj-background);--wj-textarea-color: var(--wj-color);--wj-textarea-color-invalid: var(--wj-color-danger);--wj-textarea-border-width: 1px;--wj-textarea-border-style: solid;--wj-textarea-border-color: var(--wj-border-color);--wj-textarea-border-color-focus: var(--wj-color-primary);--wj-textarea-border-radius: 4px;--wj-textarea-margin-bottom: .5rem;--wj-textarea-line-height: 20px;--wj-textarea-padding: .5rem;width:100%;margin-bottom:var(--wj-textarea-margin-bottom);display:block}:host .wrapper{display:flex;width:100%;border-width:var(--wj-textarea-border-width);border-style:var(--wj-textarea-border-style);border-color:var(--wj-textarea-border-color);border-radius:var(--wj-textarea-border-radius)}:host textarea{font-family:var(--wj-textarea-font-family);color:var(--wj-textarea-color);font-size:14px;border:0 none;padding:0 var(--wj-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(--wj-textarea-background-color);font-family:var(--wj-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(--wj-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(--wj-textarea-padding) * 2);max-width:calc(100% - var(--wj-textarea-padding) * 2);min-width:calc(100% - var(--wj-textarea-padding) * 2)}.native-textarea.default label{padding:0 var(--wj-textarea-padding);display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-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(--wj-textarea-background-color);font-family:var(--wj-textarea-font-family);position:relative;border-radius:var(--wj-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wj-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(--wj-textarea-border-radius)}.native-textarea.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wj-textarea-line-height)}.native-textarea.standard ::slotted([slot=start]){border-right:none;border-radius:var(--wj-textarea-border-radius) 0 0 var(--wj-textarea-border-radius)}.native-textarea.standard ::slotted([slot=end]){border-left:none;border-radius:0 var(--wj-textarea-border-radius) var(--wj-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(--wj-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}
-`;
-class v extends p {
+const styles = "/*\n[ WJ Textarea ]\n*/\n:host {\n  --wj-textarea-font-family: var(--wj-font-family);\n  --wj-textarea-background-color: var(--wj-background);\n  --wj-textarea-color: var(--wj-color);\n  --wj-textarea-color-invalid: var(--wj-color-danger);\n  --wj-textarea-border-width: 1px;\n  --wj-textarea-border-style: solid;\n  --wj-textarea-border-color: var(--wj-border-color);\n  --wj-textarea-border-color-focus: var(--wj-color-primary);\n  --wj-textarea-border-radius: 4px;\n  --wj-textarea-margin-bottom: .5rem;\n  --wj-textarea-line-height: 20px;\n  --wj-textarea-padding: 0.5rem;\n  width: 100%;\n  margin-bottom: var(--wj-textarea-margin-bottom);\n  display: block;\n}\n:host .wrapper {\n  display: flex;\n  width: 100%;\n  border-width: var(--wj-textarea-border-width);\n  border-style: var(--wj-textarea-border-style);\n  border-color: var(--wj-textarea-border-color);\n  border-radius: var(--wj-textarea-border-radius);\n}\n:host textarea {\n  font-family: var(--wj-textarea-font-family);\n  color: var(--wj-textarea-color);\n  font-size: 14px;\n  border: 0 none;\n  padding: 0 var(--wj-textarea-padding);\n}\n:host textarea:focus {\n  outline: none;\n}\n\n:host([resize=auto]) textarea,\n:host([resize=none]) textarea {\n  resize: none;\n}\n\n.native-textarea .input-wrapper {\n  width: 100%;\n  line-height: normal;\n}\n.native-textarea.default {\n  background-color: var(--wj-textarea-background-color);\n  font-family: var(--wj-textarea-font-family);\n  position: relative;\n  padding-inline: 0;\n  padding-top: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n.native-textarea.default.focused .wrapper {\n  border-color: var(--wj-textarea-border-color-focus) !important;\n}\n.native-textarea.default.focused label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-textarea.default textarea {\n  border: none;\n  padding-top: 0;\n  background: none;\n  box-shadow: none;\n  width: calc(100% - var(--wj-textarea-padding) * 2);\n  max-width: calc(100% - var(--wj-textarea-padding) * 2);\n  min-width: calc(100% - var(--wj-textarea-padding) * 2);\n}\n.native-textarea.default label {\n  padding: 0 var(--wj-textarea-padding);\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-textarea-line-height);\n  padding-top: 0.25rem;\n}\n.native-textarea.default label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-textarea.default ::slotted([slot=start]) {\n  border-left: none;\n  border-top: none;\n  border-bottom: none;\n}\n.native-textarea.default ::slotted([slot=end]) {\n  border-right: none;\n  border-top: none;\n  border-bottom: none;\n}\n.native-textarea.standard {\n  background-color: var(--wj-textarea-background-color);\n  font-family: var(--wj-textarea-font-family);\n  position: relative;\n  border-radius: var(--wj-textarea-border-radius);\n  padding: 0;\n  transition: background-color 0.2s ease;\n  cursor: text;\n}\n.native-textarea.standard.focused .wrapper {\n  border-color: var(--wj-textarea-border-color-focus) !important;\n}\n.native-textarea.standard textarea {\n  display: block;\n  min-height: 32px;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: var(--wj-textarea-border-radius);\n}\n.native-textarea.standard label {\n  margin: 0;\n  display: inline-block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease;\n  line-height: var(--wj-textarea-line-height);\n}\n.native-textarea.standard ::slotted([slot=start]) {\n  border-right: none;\n  border-radius: var(--wj-textarea-border-radius) 0 0 var(--wj-textarea-border-radius);\n}\n.native-textarea.standard ::slotted([slot=end]) {\n  border-left: none;\n  border-radius: 0 var(--wj-textarea-border-radius) var(--wj-textarea-border-radius) 0;\n}\n.native-textarea.standard.has-start textarea {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.native-textarea.standard.has-end textarea {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.native-textarea.standard .error-message {\n  position: static;\n  background: transparent;\n  padding: 0.25rem 0;\n  left: auto;\n  transform: none;\n  color: var(--wj-textarea-color-invalid);\n  font-size: 12px;\n  line-height: normal;\n}\n\n.counter {\n  float: right;\n}";
+class Textarea extends WJElement {
   constructor() {
     super();
-    s(this, "className", "Textarea");
-    s(this, "setTextareaHeight", () => {
-      this.getAttribute("resize") === "auto" && (this.input.style.height = "auto", this.input.style.height = this.input.scrollHeight + "px");
+    __publicField(this, "className", "Textarea");
+    __publicField(this, "setTextareaHeight", () => {
+      if (this.getAttribute("resize") === "auto") {
+        this.input.style.height = "auto";
+        this.input.style.height = this.input.scrollHeight + "px";
+      }
     });
-    s(this, "counter", (t) => {
-      this.counterElement.innerText = t.target.value.length + "/" + this.input.maxLength;
+    __publicField(this, "counter", (e) => {
+      this.counterElement.innerText = e.target.value.length + "/" + this.input.maxLength;
     });
-    this._checked = !1;
+    this._checked = false;
   }
-  set checked(t) {
-    this._checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  set checked(value) {
+    this._checked = value;
+    if (value)
+      this.setAttribute("checked", "");
+    else
+      this.removeAttribute("checked");
   }
   get checked() {
     return this._checked;
   }
   static get cssStyleSheet() {
-    return b;
+    return styles;
   }
   static get observedAttributes() {
     return ["checked"];
@@ -32,35 +41,75 @@ class v extends p {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, m, w) {
-    let l = document.createDocumentFragment(), i = document.createElement("div");
-    i.classList.add("native-textarea", this.variant || "default"), this.hasAttribute("invalid") && i.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 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 && i.appendChild(o) : n.appendChild(o), n.appendChild(e), c.appendChild(n), i.appendChild(c), l.appendChild(i), 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);
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-textarea", this.variant || "default");
+    if (this.hasAttribute("invalid"))
+      native.classList.add("has-error");
+    let wrapper = document.createElement("div");
+    wrapper.classList.add("wrapper");
+    let inputWrapper = document.createElement("div");
+    inputWrapper.classList.add("input-wrapper");
+    let label = document.createElement("label");
+    label.htmlFor = "textarea";
+    label.innerHTML = this.label || "";
+    let input = document.createElement("textarea");
+    input.id = "textarea";
+    input.name = this.name;
+    input.disabled = this.hasAttribute("disabled");
+    input.innerText = this.innerText;
+    input.classList.add("form-control");
+    input.setAttribute("part", "input");
+    input.setAttribute("rows", this.rows || 3);
+    input.setAttribute("spellcheck", false);
+    if (this.resize === "auto")
+      input.addEventListener("input", this.setTextareaHeight);
+    if (this.variant === "standard") {
+      if (this.label)
+        native.appendChild(label);
+    } else {
+      inputWrapper.appendChild(label);
+    }
+    inputWrapper.appendChild(input);
+    wrapper.appendChild(inputWrapper);
+    native.appendChild(wrapper);
+    fragment.appendChild(native);
+    if (this.hasAttribute("counter")) {
+      input.maxLength = this.maxLength || 1e3;
+      input.addEventListener("input", this.counter);
+      let counter = document.createElement("div");
+      counter.classList.add("counter");
+      counter.innerText = `${input.value.length}/${input.maxLength}`;
+      this.counterElement = counter;
+      fragment.appendChild(counter);
     }
-    return this.native = i, this.labelElement = o, this.input = e, l;
+    this.native = native;
+    this.labelElement = label;
+    this.input = input;
+    return fragment;
   }
   afterDraw() {
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight), this.hasAttribute("disabled") || (h.addListener(this, "click", "wj:textarea:change"), h.addListener(this, "click", "wj:textarea:input")), this.input.addEventListener("focus", (t) => {
-      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
-    }), this.input.addEventListener("blur", (t) => {
-      this.native.classList.remove("focused"), t.target.value || this.labelElement.classList.remove("fade");
+    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);
+    if (!this.hasAttribute("disabled")) {
+      event.addListener(this, "click", "wj:textarea:change");
+      event.addListener(this, "click", "wj:textarea:input");
+    }
+    this.input.addEventListener("focus", (e) => {
+      this.labelElement.classList.add("fade");
+      this.native.classList.add("focused");
+    });
+    this.input.addEventListener("blur", (e) => {
+      this.native.classList.remove("focused");
+      if (!e.target.value)
+        this.labelElement.classList.remove("fade");
     });
   }
   disconnectedCallback() {
     this.resizeObserver.unobserve(this.input);
   }
 }
-customElements.get("wj-textarea") || window.customElements.define("wj-textarea", v);
+customElements.get("wj-textarea") || window.customElements.define("wj-textarea", Textarea);
 export {
-  v as Textarea
+  Textarea
 };

package/dist/wj-thumbnail.js

@@ -1,17 +1,19 @@
-var d = Object.defineProperty;
-var m = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var s = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
-import u from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const h = `:host{--wj-thumbnail-width: 48px;--wj-thumbnail-height: 48px;--wj-thumbnail-border-radius: var(--wj-border-radius-medium)}:host{width:var(--wj-thumbnail-width);height:var(--wj-thumbnail-height);display:block;border-radius:var(--wj-border-radius)}::slotted(wj-img),::slotted(img){border-radius:var(--wj-thumbnail-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}
-`;
-class l extends u {
+const styles = "/*\n[ WJ Thumbnail ]\n*/\n:host {\n  --wj-thumbnail-width: 48px;\n  --wj-thumbnail-height: 48px;\n  --wj-thumbnail-border-radius: var(--wj-border-radius-medium);\n}\n\n:host {\n  width: var(--wj-thumbnail-width);\n  height: var(--wj-thumbnail-height);\n  display: block;\n  border-radius: var(--wj-border-radius);\n}\n\n::slotted(wj-img),\n::slotted(img) {\n  border-radius: var(--wj-thumbnail-border-radius);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n}";
+class Thumbnail extends WJElement {
   constructor() {
     super();
-    s(this, "className", "Thumbnail");
+    __publicField(this, "className", "Thumbnail");
   }
   static get cssStyleSheet() {
-    return h;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,14 +21,16 @@ class l extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(e, a, o) {
+  beforeDraw(context, store, params) {
   }
-  draw(e, a, o) {
-    let i = document.createDocumentFragment(), n = document.createElement("slot");
-    return i.appendChild(n), i;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-thumbnail") || window.customElements.define("wj-thumbnail", l);
+customElements.get("wj-thumbnail") || window.customElements.define("wj-thumbnail", Thumbnail);
 export {
-  l as Thumbnail
+  Thumbnail
 };