wj-elements 0.0.3 → 0.0.4

package/dist/wj-store.js

@@ -1,10 +1,7 @@
-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 {
+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 {
   constructor() {
     this.events = {};
   }
@@ -17,15 +14,11 @@ class PubSub {
    * @returns {number} A count of callbacks for this event
    * @memberof PubSub
    */
-  subscribe(event, callback) {
-    let self = this;
-    if (!self.events.hasOwnProperty(event)) {
-      self.events[event] = [];
-    }
-    self.events[event].push(callback) - 1;
-    return {
+  subscribe(r, e) {
+    let t = this;
+    return t.events.hasOwnProperty(r) || (t.events[r] = []), t.events[r].push(e) - 1, {
       unsubscribe() {
-        self.events[event].splice(self.events[event].indexOf(callback), 1);
+        t.events[r].splice(t.events[r].indexOf(e), 1);
       }
     };
   }
@@ -38,78 +31,42 @@ class PubSub {
    * @returns {array} The callbacks for this event, or an empty array if no event exits
    * @memberof PubSub
    */
-  publish(event, newData = {}, oldData) {
-    let self = this;
-    if (!self.events.hasOwnProperty(event)) {
-      return [];
-    }
-    return self.events[event].map((callback) => callback(newData, oldData));
+  publish(r, e = {}, t) {
+    let s = this;
+    return s.events.hasOwnProperty(r) ? s.events[r].map((i) => i(e, t)) : [];
   }
 }
-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
+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
 };
-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) {
+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) {
       return {};
-    };
-    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);
+    }, this.status = "resting", this.events = new d(), r != null && r.hasOwnProperty("reducer") && (this._reducer = r.reducer), this.refreshProxy(r == null ? void 0 : r.state);
   }
   /**
    * A dispatcher for actions that looks in the actions 
@@ -120,158 +77,116 @@ class Store {
    * @returns {boolean}
    * @memberof Store
    */
-  dispatch(action) {
+  dispatch(r) {
     this.status = "action";
-    let newState = this._reducer(this._state, action);
-    this.status = "mutation";
-    this._state = Object.assign(this._state, newState);
-    return true;
+    let e = this._reducer(this._state, r);
+    return this.status = "mutation", this._state = Object.assign(this._state, e), !0;
   }
   getState() {
     return JSON.parse(JSON.stringify(this._state));
   }
-  subscribe(eventName, callbackFn) {
-    return this.events.subscribe(eventName, callbackFn);
+  subscribe(r, e) {
+    return this.events.subscribe(r, e);
   }
-  unsubscribe(eventName) {
-    delete this.events[eventName];
+  unsubscribe(r) {
+    delete this.events[r];
   }
   pause() {
-    this._isPause = true;
-    return this;
+    return this._isPause = !0, this;
   }
-  play(val) {
-    this._isPause = false;
-    return this;
+  play(r) {
+    return this._isPause = !1, this;
   }
-  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;
-    };
+  mergeReducers(r, e) {
+    let t = this._reducer;
+    this._reducer = (s, i) => ({
+      ...t(s, i),
+      [r]: e(s[r], i)
+    });
   }
-  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);
-      }
+  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);
     });
   }
-  define(stateValueName, defaultValue, reducer, key = "id") {
-    if (this._state.hasOwnProperty(stateValueName)) {
-      console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);
+  define(r, e, t, s = "id") {
+    if (this._state.hasOwnProperty(r)) {
+      console.warn(`STATE už obsahuje premennú ${r},ktorú sa pokúšate pridať`);
       return;
     }
-    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({
+    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({
       ...this._state,
-      [stateValueName]: defaultValue
+      [r]: e
     });
   }
-  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;
+  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;
       }
     });
   }
-  createObjectReducer(stateValueName) {
-    return (state = {}, action) => {
-      switch (action.type) {
-        case `${stateValueName}/ADD`:
+  createObjectReducer(r) {
+    return (e = {}, t) => {
+      switch (t.type) {
+        case `${r}/ADD`:
           return {
-            ...action.payload
+            ...t.payload
           };
-        case `${stateValueName}/UPDATE`:
+        case `${r}/UPDATE`:
           return {
-            ...state,
-            ...action.payload
+            ...e,
+            ...t.payload
           };
-        case `${stateValueName}/DELETE`:
+        case `${r}/DELETE`:
           return {};
         default:
-          return state;
+          return e;
       }
     };
   }
-  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`:
+  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`:
           return [
-            ...state,
-            ...action.payload
+            ...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
           ];
-        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`:
+        case `${r}/DELETE`:
           return [
-            ...state.filter((obj) => obj.hasOwnProperty(key) && obj[key] != action.payload[key] || !obj.hasOwnProperty(key) && obj != action.payload)
+            ...t.filter((i) => i.hasOwnProperty(e) && i[e] != s.payload[e] || !i.hasOwnProperty(e) && i != s.payload)
           ];
-        case `${stateValueName}/LOAD`:
+        case `${r}/LOAD`:
           return [
-            ...action.payload
+            ...s.payload
           ];
         default:
-          return state;
+          return t;
       }
     };
   }
 }
-let store = new Store();
+let D = new A();
 export {
-  defaultStoreActions,
-  store
+  y as defaultStoreActions,
+  D as store
 };

package/dist/wj-textarea.js

@@ -1,39 +1,32 @@
-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";
+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 d = (r, a, t) => (x(r, typeof a != "symbol" ? a + "" : a, t), t);
+import p, { event as h } from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Textarea ]\n*/\n:host {\n  --wj-textarea-font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n  --wj-textarea-background-color: #fff;\n  --wj-textarea-color: #212121;\n  --wj-textarea-color-invalid: #b91e1e;\n  --wj-textarea-border-width: 1px;\n  --wj-textarea-border-style: solid;\n  --wj-textarea-border-color: rgba(33, 33, 33, 0.14);\n  --wj-textarea-border-color-focus: #7252D3;\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:host([resize=auto]) textarea,\n:host([resize=none]) textarea {\n  resize: none;\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.counter {\n  float: right;\n}";
-class Textarea extends WJElement {
+const b = `/*!
+* direction.scss
+*/:host{--wj-textarea-font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;--wj-textarea-background-color: #fff;--wj-textarea-color: #212121;--wj-textarea-color-invalid: #b91e1e;--wj-textarea-border-width: 1px;--wj-textarea-border-style: solid;--wj-textarea-border-color: rgba(33, 33, 33, .14);--wj-textarea-border-color-focus: #7252D3;--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 m extends p {
   constructor() {
     super();
-    __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";
-      }
+    d(this, "className", "Textarea");
+    d(this, "setTextareaHeight", () => {
+      this.getAttribute("resize") === "auto" && (this.input.style.height = "auto", this.input.style.height = this.input.scrollHeight + "px");
     });
-    __publicField(this, "counter", (e) => {
-      this.counterElement.innerText = e.target.value.length + "/" + this.input.maxLength;
+    d(this, "counter", (t) => {
+      this.counterElement.innerText = t.target.value.length + "/" + this.input.maxLength;
     });
-    this._checked = false;
+    this._checked = !1;
   }
-  set checked(value) {
-    this._checked = value;
-    if (value)
-      this.setAttribute("checked", "");
-    else
-      this.removeAttribute("checked");
+  set checked(t) {
+    this._checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
   }
   get checked() {
     return this._checked;
   }
   static get cssStyleSheet() {
-    return styles;
+    return b;
   }
   static get observedAttributes() {
     return ["checked"];
@@ -41,75 +34,35 @@ class Textarea extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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);
+  draw(t, v, g) {
+    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 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 && i.appendChild(n) : o.appendChild(n), o.appendChild(e), c.appendChild(o), i.appendChild(c), l.appendChild(i), this.hasAttribute("counter")) {
+      e.maxLength = this.maxLength || 1e3, e.addEventListener("input", this.counter);
+      let s = document.createElement("div");
+      s.classList.add("counter"), s.innerText = `${e.value.length}/${e.maxLength}`, this.counterElement = s, l.appendChild(s);
     }
-    this.native = native;
-    this.labelElement = label;
-    this.input = input;
-    return fragment;
+    return this.native = i, this.labelElement = n, this.input = e, l;
   }
   afterDraw() {
-    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");
+    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");
     });
   }
   disconnectedCallback() {
     this.resizeObserver.unobserve(this.input);
   }
 }
-customElements.get("wj-textarea") || window.customElements.define("wj-textarea", Textarea);
+customElements.get("wj-textarea") || window.customElements.define("wj-textarea", m);
 export {
-  Textarea
+  m as Textarea
 };

package/dist/wj-thumbnail.js

@@ -1,19 +1,19 @@
-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";
+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 i = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
+import h from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-thumbnail-width: 48px;\n  --wj-thumbnail-height: 48px;\n  --wj-border-radius: 0;\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::slotted(wj-img),\n::slotted(img) {\n  border-radius: var(--wj-border-radius);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n}";
-class Thumbnail extends WJElement {
+const l = `/*!
+* direction.scss
+*/:host{--wj-thumbnail-width: 48px;--wj-thumbnail-height: 48px;--wj-border-radius: 0}: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-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}
+`;
+class u extends h {
   constructor() {
     super();
-    __publicField(this, "className", "Thumbnail");
+    i(this, "className", "Thumbnail");
   }
   static get cssStyleSheet() {
-    return styles;
+    return l;
   }
   static get observedAttributes() {
     return [];
@@ -21,16 +21,14 @@ class Thumbnail extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
+  beforeDraw(e, o, a) {
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(e, o, a) {
+    let s = document.createDocumentFragment(), n = document.createElement("slot");
+    return s.appendChild(n), s;
   }
 }
-customElements.get("wj-thumbnail") || window.customElements.define("wj-thumbnail", Thumbnail);
+customElements.get("wj-thumbnail") || window.customElements.define("wj-thumbnail", u);
 export {
-  Thumbnail
+  u as Thumbnail
 };