wj-elements 0.1.42 → 0.1.44

package/dist/wje-inline-edit.js

@@ -1,12 +1,29 @@
-var h = Object.defineProperty;
-var r = (s, n, t) => n in s ? h(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
-var a = (s, n, t) => (r(s, typeof n != "symbol" ? n + "" : n, t), t);
-import l from "./wje-element.js";
-const u = ":host{cursor:pointer;overflow:hidden;@keyframes wjFade{0%{display:flex}to{display:none}}}:host .heading{z-index:1;display:flex;align-items:center;position:relative;min-height:34px}:host .heading .edit{margin-left:.5rem;opacity:0}:host .heading:hover .edit{opacity:1}:host .heading h5{margin:0;width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host form{align-items:center;border-radius:3px!important;margin:0 1rem 0 0;display:flex}:host form.open{z-index:9}:host form .buttons{display:flex;margin:0 0 0 .5rem}:host .fade-out{display:none}:host .fade-in{display:flex}";
-class o extends l {
+var u = Object.defineProperty;
+var p = (s, n, t) => n in s ? u(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
+var r = (s, n, t) => (p(s, typeof n != "symbol" ? n + "" : n, t), t);
+import c from "./wje-element.js";
+import m from "./wje-format-digital.js";
+import b from "./wje-button.js";
+import v from "./wje-input.js";
+import f from "./wje-icon.js";
+const g = ":host{cursor:pointer;overflow:hidden;@keyframes wjFade{0%{display:flex}to{display:none}}}:host .heading{z-index:1;display:flex;align-items:center;position:relative;min-height:34px}:host .heading .edit{margin-left:.5rem;opacity:0}:host .heading:hover .edit{opacity:1}:host .heading h5{margin:0;width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .native-inline-edit{align-items:center;border-radius:3px!important;margin:0 1rem 0 0;display:flex}:host .native-inline-edit.open{z-index:9}:host .native-inline-edit .buttons{display:flex;margin:0 0 0 .5rem}:host .fade-out{display:none}:host .fade-in{display:flex}";
+class l extends c {
   constructor() {
     super();
-    a(this, "className", "InfiniteScroll");
+    /**
+     * Dependencies
+     * @type {Object}
+     */
+    r(this, "depandencies", {
+      "wje-format-digital": m,
+      "wje-button": b,
+      "wje-input": v,
+      "wje-icon": f
+    });
+    /**
+     * The class name.
+     */
+    r(this, "className", "InlineEdit");
   }
   get title() {
     return this.getAttribute("title");
@@ -27,45 +44,53 @@ class o extends l {
     return this.setAttribute("endpoint", t);
   }
   /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
+   * Getter for the CSS stylesheet.
+   * @returns {string} The CSS stylesheet.
    */
   static get cssStyleSheet() {
-    return u;
+    return g;
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
-    return [];
+    return ["checked", "disabled"];
   }
   /**
-   * Sets up the attributes for the component.
+   * Sets up the attributes for the checkbox.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, d) {
+  /**
+   * Draws the checkbox.
+   * @param {object} context - The context.
+   * @param {object} store - The store.
+   * @param {object} params - The parameters.
+   * @returns {DocumentFragment} The created fragment.
+   */
+  draw(t, e, h) {
     let i = document.createDocumentFragment();
-    return this.heading = document.createElement("div"), this.heading.classList.add("heading"), this.h5 = document.createElement("h5"), this.h5.innerHTML = this.title, this.heading.appendChild(this.h5), i.appendChild(this.heading), this.notEditable || (this.span = document.createElement("span"), this.span.classList.add("edit", "text-primary"), this.span.innerHTML = "Upraviť", this.form = document.createElement("form"), this.form.classList.add("fade-out"), this.input = this.inputElement(), this.buttons = document.createElement("div"), this.buttons.classList.add("buttons", "btn-group"), this.buttonSave = document.createElement("button"), this.buttonSave.classList.add("btn", "btn-primary"), this.buttonSave.setAttribute("type", "button"), this.buttonSave.innerHTML = '<i class="fa-light fa-check"></i>', this.buttonClose = document.createElement("button"), this.buttonClose.classList.add("btn", "btn-default", "btn-close"), this.buttonClose.setAttribute("type", "button"), this.buttonClose.innerHTML = '<i class="fa-light fa-xmark"></i>', this.heading.appendChild(this.span), this.buttons.appendChild(this.buttonSave), this.buttons.appendChild(this.buttonClose), this.form.appendChild(this.input), this.form.appendChild(this.buttons), i.appendChild(this.form)), i;
-  }
-  afterDraw(t, e, d) {
+    if (this.heading = document.createElement("div"), this.heading.classList.add("heading"), this.h5 = document.createElement("h5"), this.h5.innerHTML = this.textContent || this.title || "Názov", this.heading.appendChild(this.h5), i.appendChild(this.heading), !this.notEditable) {
+      this.span = document.createElement("span"), this.span.innerHTML = '<wje-icon name="pencil"></wje-icon>';
+      let a = document.createElement("div");
+      a.setAttribute("part", "native"), a.classList.add("native-inline-edit"), this.input = this.inputElement(), this.buttons = document.createElement("div"), this.buttons.classList.add("buttons", "btn-group");
+      let d = document.createElement("wje-button");
+      d.setAttribute("fill", "outline"), d.setAttribute("color", "success"), d.innerHTML = '<wje-icon name="check"></wje-icon>';
+      let o = document.createElement("wje-button");
+      o.setAttribute("fill", "outline"), o.setAttribute("color", "danger"), o.innerHTML = '<wje-icon name="x"></wje-icon>', this.heading.appendChild(this.span), this.buttons.appendChild(d), this.buttons.appendChild(o), a.appendChild(this.input), a.appendChild(this.buttons), this.save = d, this.close = o, i.appendChild(a);
+    }
+    return i;
+  }
+  afterDraw(t, e, h) {
     this.notEditable || (this.heading.addEventListener("click", (i) => {
-      this.form.classList.add("open", "fade-in"), this.heading.classList.remove("fade-in"), this.heading.classList.add("fade-out");
-    }), this.buttonClose.addEventListener("click", (i) => {
-      i.preventDefault(), i.stopImmediatePropagation(), i.stopPropagation(), this.form.classList.remove("open", "fade-in"), this.heading.classList.remove("fade-out"), this.heading.classList.add("fade-in");
-    }), this.buttonSave.addEventListener("click", (i) => {
+      this.heading.classList.remove("fade-in"), this.heading.classList.add("fade-out");
+    }), this.close.addEventListener("click", (i) => {
+      i.preventDefault(), i.stopImmediatePropagation(), i.stopPropagation(), native.classList.remove("open", "fade-in"), this.heading.classList.remove("fade-out"), this.heading.classList.add("fade-in");
+    }), this.save.addEventListener("click", (i) => {
       this.endpoint === null ? this.dispatchEdit(this.input.value) : this.save(this.input.value);
     }));
   }
   inputElement() {
-    let t = document.createElement("input");
-    return t.type = "text", t.placeholder = this.title, t.value = this.title, t.classList.add("form-control", "input-sm"), t;
+    let t = document.createElement("wje-input");
+    return t.setAttribute("variant", "standard"), t.setAttribute("type", "text"), t.setAttribute("placeholder", this.placelhoder), t.setAttribute("value", this.textContent), t;
   }
   save(t) {
     return fetch(this.endpoint, {
@@ -114,7 +139,7 @@ class o extends l {
     );
   }
 }
-o.define("wje-inline-edit", o);
+l.define("wje-inline-edit", l);
 export {
-  o as default
+  l as default
 };

package/dist/wje-input.js

@@ -152,7 +152,7 @@ class f extends A {
     let a = this.hasSlot(this, "start"), g = this.hasSlot(this, "end"), y = this.hasSlot(this, "error"), w = document.createDocumentFragment(), i = document.createElement("div");
     i.setAttribute("part", "native"), i.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && i.classList.add("has-error");
     let s = document.createElement("div");
-    s.classList.add("wrapper"), i.appendChild(s);
+    s.classList.add("wrapper");
     let p = document.createElement("div");
     p.classList.add("input-wrapper");
     let h = document.createElement("label");
@@ -165,15 +165,15 @@ class f extends A {
     d.classList.add("error-message"), d.setAttribute("part", "error");
     let c = null;
     y ? (c = document.createElement("slot"), c.setAttribute("name", "error"), this.hasAttribute("error-inline") ? i.appendChild(c) : (d.appendChild(c), s.appendChild(d))) : s.appendChild(d);
-    let v = null;
-    a && (v = document.createElement("slot"), v.setAttribute("name", "start"));
     let b = null;
-    if (g && (b = document.createElement("slot"), b.setAttribute("name", "end")), a && (s.appendChild(v), i.classList.add("has-start")), this.variant === "standard" ? this.label && i.appendChild(h) : p.appendChild(h), p.appendChild(o), s.appendChild(p), this.hasAttribute("clearable")) {
+    a && (b = document.createElement("slot"), b.setAttribute("name", "start"), b.setAttribute("part", "start"));
+    let v = null;
+    if (g && (v = document.createElement("slot"), v.setAttribute("name", "end"), v.setAttribute("part", "end")), a && (s.appendChild(b), i.classList.add("has-start")), this.variant === "standard" ? this.label && i.appendChild(h) : p.appendChild(h), p.appendChild(o), s.appendChild(p), i.appendChild(s), this.hasAttribute("clearable")) {
       this.clear = document.createElement("wje-button"), this.clear.classList.add("clear"), this.clear.setAttribute("fill", "link"), this.clear.setAttribute("part", "clear");
       let u = document.createElement("wje-icon");
       u.setAttribute("name", "x"), this.clear.appendChild(u), p.appendChild(this.clear);
     }
-    return g && (s.appendChild(b), i.classList.add("has-end")), w.appendChild(i), this.native = i, this.labelElement = h, this.input = o, this.errorMessage = d, w;
+    return g && (s.appendChild(v), i.classList.add("has-end")), w.appendChild(i), this.native = i, this.labelElement = h, this.input = o, this.errorMessage = d, w;
   }
   /**
    * Runs after the input is drawn.

package/dist/wje-item.js

@@ -26,7 +26,7 @@ class a extends m {
     return this.hostContext("wje-list", this) && this.classList.add("wje-item-list"), `<${o} class="item-native" part="native">
 			<slot name="start"></slot>
 			<div class="item-inner">
-					<div class="input-wrapper">
+					<div class="input-wrapper" part="inner">
 							<slot></slot>
 					</div>
 					<slot name="end"></slot>