wj-elements 0.1.50 → 0.1.52

package/dist/wje-sliding-container.js

@@ -1,9 +1,9 @@
 var p = Object.defineProperty;
-var u = (n, s, t) => s in n ? p(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
-var h = (n, s, t) => (u(n, typeof s != "symbol" ? s + "" : s, t), t);
+var u = (a, s, t) => s in a ? p(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var l = (a, s, t) => (u(a, typeof s != "symbol" ? s + "" : s, t), t);
 import v from "./wje-element.js";
 const f = ":host{display:block}.sliding-container-wrapper{height:100%;position:relative;overflow:hidden}.native-sliding-container{overflow:auto}";
-class l extends v {
+class d extends v {
   /**
    * Creates an instance of SlidingContainer.
    *
@@ -11,15 +11,15 @@ class l extends v {
    */
   constructor() {
     super();
-    h(this, "className", "SlidingContainer");
+    l(this, "className", "SlidingContainer");
     /**
      * Triggers the event based on the target element.
      * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
      * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
      * @param {Event} e - The event object.
      */
-    h(this, "triggerEvent", (t) => {
-      this._lastCaller && this._lastCaller !== t.target ? this.open() : this.toggle(), this._lastCaller = t.target;
+    l(this, "triggerEvent", (t) => {
+      this._lastCaller && this._lastCaller !== t.composedPath()[0] ? this.open(t) : this.toggle(t), this._lastCaller = t.composedPath()[0];
     });
     this._isOpen = !1, this._lastCaller = null;
   }
@@ -91,7 +91,18 @@ class l extends v {
    * @returns {string[]}
    */
   static get observedAttributes() {
-    return ["max-width", "max-height", "trigger", "direction", "variant", "screen-break-point", "remove-child-after-close", "animation-duration", "animation-easing", "has-opacity"];
+    return [
+      "max-width",
+      "max-height",
+      "trigger",
+      "direction",
+      "variant",
+      "screen-break-point",
+      "remove-child-after-close",
+      "animation-duration",
+      "animation-easing",
+      "has-opacity"
+    ];
   }
   /**
    * Returns the CSS styles for the component.
@@ -116,13 +127,14 @@ class l extends v {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, i, a) {
+  draw(t, i, o) {
     let r = document.createDocumentFragment();
     this.style.position = "relative", this.style.height = "100%", this.wrapperDiv = document.createElement("div"), this.wrapperDiv.classList.add("sliding-container-wrapper"), this.transparentDiv = document.createElement("div"), this.transparentDiv.classList.add("sliding-container-transparent");
     let e = document.createElement("div");
-    e.style.position = "absolute", e.style.width = this.maxWidth, this.hasOpacity && (e.style.opacity = 0), e.style.height = "100%", e.classList.add("native-sliding-container"), e.setAttribute("part", "sliding-container"), this.direction === "right" ? e.style.right = 0 : e.style.left = 0;
-    let o = document.createElement("slot");
-    return e.appendChild(this.getCloseButton()), e.appendChild(o), this.wrapperDiv.appendChild(this.transparentDiv), this.wrapperDiv.appendChild(e), r.appendChild(this.wrapperDiv), this.nativeElement = e, r;
+    e.style.position = "absolute", e.style.width = 0, this.hasOpacity && (e.style.opacity = 0), e.style.height = "100%", e.classList.add("native-sliding-container"), e.setAttribute("part", "sliding-container"), this.direction === "right" ? e.style.right = 0 : e.style.left = 0;
+    let h = document.createElement("slot");
+    const n = document.createElement("div");
+    return n.classList.add("native-sliding-container-inner"), n.style.height = "100%", n.style.position = "absolute", n.style.width = this.maxWidth, n.appendChild(h), n.appendChild(this.getCloseButton()), e.appendChild(n), this.wrapperDiv.appendChild(this.transparentDiv), this.wrapperDiv.appendChild(e), r.appendChild(this.wrapperDiv), this.nativeElement = e, r;
   }
   /**
    * Creates and returns a close button element.
@@ -162,34 +174,40 @@ class l extends v {
    * @param {string} variant - The variant to check for.
    */
   checkForVariant(t) {
-    var i, a;
+    var i, o;
     if (t === "over") {
       this.style.position = "fixed";
-      let r = window.getComputedStyle(this.getParentElement()), e = this.getParentElement().getBoundingClientRect(), o = parseFloat(r.height), d = parseFloat(r.width), g = parseFloat(r.top);
-      this.style.height = o + +this.addToHeight + "px", this.wrapperDiv.style.height = o + +this.addToHeight + "px", this.style.top = g + "px";
-      let m = this.getParentElement().firstElementChild === this || ((i = this.getParentElement().shadowRoot) == null ? void 0 : i.firstElementChild) === this, c = this.getParentElement().lastElementChild === this || ((a = this.getParentElement().shadowRoot) == null ? void 0 : a.lastElementChild) === this;
-      m && (this.direction === "right" ? this.style.left = e.left + "px" : this.style.right = window.innerWidth - (e.left + e.width) + d + "px"), c && (this.style.right = window.innerWidth - (e.left + e.width) + "px");
+      let r = window.getComputedStyle(
+        this.getParentElement()
+      ), e = this.getParentElement().getBoundingClientRect(), h = parseFloat(
+        r.height
+      ), n = parseFloat(
+        r.width
+      ), c = parseFloat(r.top);
+      this.style.height = h + +this.addToHeight + "px", this.wrapperDiv.style.height = h + +this.addToHeight + "px", this.style.top = c + "px";
+      let g = this.getParentElement().firstElementChild === this || ((i = this.getParentElement().shadowRoot) == null ? void 0 : i.firstElementChild) === this, m = this.getParentElement().lastElementChild === this || ((o = this.getParentElement().shadowRoot) == null ? void 0 : o.lastElementChild) === this;
+      g && (this.direction === "right" ? this.style.left = e.left + "px" : this.style.right = window.innerWidth - (e.left + e.width) + n + "px"), m && (this.style.right = window.innerWidth - (e.left + e.width) + "px");
     }
   }
   /**
    * Executes before the element is opened.
    */
-  beforeOpen() {
+  beforeOpen(t) {
   }
   /**
    * Callback function called after the element is opened.
    */
-  afterOpen() {
+  afterOpen(t) {
   }
   /**
    * Executes before closing the element.
    */
-  beforeClose() {
+  beforeClose(t) {
   }
   /**
    * Callback function that is called after the container is closed.
    */
-  afterClose() {
+  afterClose(t) {
   }
   /**
    * Animates the transition of the element's width from 0 to the maximum width or vice versa.
@@ -207,29 +225,37 @@ class l extends v {
       easing: this.animationEasing
     };
     if (this._isOpen)
-      this.animation.reverse(), this.hasOpacity && this.nativeAnimation.reverse();
+      this.animation.reverse(), this.nativeAnimation.reverse();
     else {
       if (this.animation) {
-        this.animation.reverse(), this.hasOpacity && this.nativeAnimation.reverse();
+        this.animation.reverse(), this.nativeAnimation.reverse();
         return;
       }
-      this.animation = this.transparentDiv.animate([
-        {
-          width: 0
-        },
-        {
-          width: this.maxWidth
-        }
-      ], t), this.hasOpacity && (this.nativeAnimation = this.nativeElement.animate([
-        {
-          opacity: 0
-        },
-        {
-          opacity: 1
-        }
-      ], t));
+      this.animation = this.transparentDiv.animate(
+        [
+          {
+            width: 0
+          },
+          {
+            width: this.maxWidth
+          }
+        ],
+        t
+      ), this.nativeAnimation = this.nativeElement.animate(
+        [
+          {
+            ...this.hasOpacity ? { opacity: 0 } : {},
+            width: 0
+          },
+          {
+            ...this.hasOpacity ? { opacity: 1 } : {},
+            width: this.maxWidth
+          }
+        ],
+        t
+      );
     }
-    return new Promise((i, a) => {
+    return new Promise((i, o) => {
       this.animation.onfinish = () => {
         i();
       };
@@ -239,11 +265,20 @@ class l extends v {
    * Opens the container with an animation.
    * @returns {Promise<void>} A promise that resolves when the container is opened.
    */
-  async open() {
-    await Promise.resolve(this.beforeOpen()).then(() => {
-      Promise.resolve(this._isOpen ? () => {
-      } : this.doAnimateTransition()).then(() => {
-        Promise.resolve(this.afterOpen()).then(() => {
+  async open(t) {
+    await Promise.resolve(this.beforeOpen(t)).then(async () => {
+      await Promise.resolve(
+        this._isOpen ? () => {
+        } : (() => {
+          this.dispatchEvent(
+            new CustomEvent("wje-sliding-container:open", {
+              bubbles: !0,
+              composed: !0
+            })
+          ), this.doAnimateTransition();
+        })()
+      ).then(async () => {
+        await Promise.resolve(this.afterOpen(t)).then(() => {
           this._isOpen = !0;
         });
       });
@@ -251,16 +286,25 @@ class l extends v {
   }
   /**
    * Closes the animation container.
-   * 
+   *
    * @returns {Promise<void>} A promise that resolves when the container is closed.
    */
-  async close() {
-    await Promise.resolve(this.beforeClose()).then(() => {
-      Promise.resolve(this._isOpen ? this.doAnimateTransition() : () => {
-      }).then(() => {
-        Promise.resolve(this.afterClose()).then(() => {
-          this.removeChildAfterClose && this.childNodes.forEach((t) => {
-            t.remove();
+  async close(t) {
+    await Promise.resolve(this.beforeClose(t)).then(async () => {
+      await Promise.resolve(
+        this._isOpen ? (() => {
+          this.dispatchEvent(
+            new CustomEvent("wje-sliding-container:close", {
+              bubbles: !0,
+              composed: !0
+            })
+          ), this.doAnimateTransition();
+        })() : () => {
+        }
+      ).then(async () => {
+        await Promise.resolve(this.afterClose(t)).then(() => {
+          this.removeChildAfterClose && this.childNodes.forEach((i) => {
+            i.remove();
           }), this._isOpen = !1;
         });
       });
@@ -271,11 +315,11 @@ class l extends v {
    * If the element is open, it will be closed. If it is closed, it will be opened.
    * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.
    */
-  async toggle() {
-    this._isOpen ? await this.close() : await this.open();
+  async toggle(t) {
+    this._isOpen ? await this.close(t) : await this.open(t);
   }
 }
-l.define("wje-sliding-container", l);
+d.define("wje-sliding-container", d);
 export {
-  l as default
+  d as default
 };

package/dist/wje-store.js

@@ -1,7 +1,7 @@
-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 d = Object.defineProperty;
+var h = (i, r, e) => r in i ? d(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
+var u = (i, r, e) => (h(i, typeof r != "symbol" ? r + "" : r, e), e);
+class p {
   constructor() {
     this.events = {};
   }
@@ -33,40 +33,40 @@ class d {
    */
   publish(r, e = {}, t) {
     let s = this;
-    return s.events.hasOwnProperty(r) ? s.events[r].map((i) => i(e, t)) : [];
+    return s.events.hasOwnProperty(r) ? s.events[r].map((n) => n(e, t)) : [];
   }
 }
-const c = (u) => (r) => ({
-  type: `${u}/ADD`,
+const c = (i) => (r) => ({
+  type: `${i}/ADD`,
   payload: r
-}), p = (u) => (r) => ({
-  type: `${u}/ADD_MANY`,
+}), l = (i) => (r) => ({
+  type: `${i}/ADD_MANY`,
   payload: r
-}), l = (u) => (r) => ({
-  type: `${u}/UPDATE`,
+}), y = (i) => (r) => ({
+  type: `${i}/UPDATE`,
   payload: r
-}), a = (u) => (r) => ({
-  type: `${u}/DELETE`,
+}), a = (i) => (r) => ({
+  type: `${i}/DELETE`,
   payload: r
-}), f = (u) => (r) => ({
-  type: `${u}/LOAD`,
+}), f = (i) => (r) => ({
+  type: `${i}/LOAD`,
   payload: r
-}), y = {
+}), o = {
   addAction: c,
   deleteAction: a,
   loadAction: f,
-  updateAction: l,
-  addManyAction: p
+  updateAction: y,
+  addManyAction: l
 };
 class A {
   constructor(r = {}) {
-    n(this, "_state");
-    n(this, "_reducer");
-    n(this, "events");
-    n(this, "status");
+    u(this, "_state");
+    u(this, "_reducer");
+    u(this, "events");
+    u(this, "status");
     this._isPause = !1, this._state = {}, this._reducer = function(t = {}, s) {
       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 p(), 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 
@@ -99,14 +99,14 @@ class A {
   }
   mergeReducers(r, e) {
     let t = this._reducer;
-    this._reducer = (s, i) => ({
-      ...t(s, i),
-      [r]: e(s[r], i)
+    this._reducer = (s, n) => ({
+      ...t(s, n),
+      [r]: e(s[r], n)
     });
   }
   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);
+      this.getState().hasOwnProperty(`${r}-${s[t]}`) ? this.dispatch(o.updateAction(`${r}-${s[t]}`)(s)) : this.define(`${r}-${s.id || s.source || s[t]}`, s, null, t);
     });
   }
   define(r, e, t, s = "id") {
@@ -124,14 +124,14 @@ class A {
       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;
+        let n = e[t];
+        return e[t] = s, this._isPause || this.events.publish(t, this._state, n), this.status !== "mutation" && console.warn(`You should use a mutation to set ${t}`), this.status = "resting", !0;
       }
     });
   }
   createObjectReducer(r) {
     return (e = {}, t) => {
-      switch (t.type) {
+      switch (Array.isArray(t.payload) && console.error(`Nemôžete pridať do objektu hodnotu, ktorá je pole. Skontrolujte si či definovanie stavu vyzerá takto: "store.define(${r}, {})"`), t.type) {
         case `${r}/ADD`:
           return {
             ...t.payload
@@ -150,7 +150,7 @@ class A {
   }
   createArrayReducer(r, e) {
     return (t = [], s) => {
-      switch (s.type) {
+      switch (Array.isArray(s.payload) && s.payload.length == 0 && console.warn("Nemá zmysel pridávať prázdne pole do pola"), !Array.isArray(s.payload) && (s.type != o.updateAction(r).type || s.type != o.deleteAction(r).type) && console.error(`Nemôžete pridať do poľa hodnotu, ktorá nie je pole. Skontrolujte si či definovanie stavu vyzerá takto: "store.define(${r}, [])"`), s.type) {
         case `${r}/ADD`:
           return Array.isArray(s.payload) ? [
             ...t,
@@ -165,15 +165,15 @@ class A {
             ...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)
+          return t.some((n) => n[e] == s.payload[e]) ? [
+            ...t.map((n) => n[e] == s.payload[e] ? s.payload : n)
           ] : [
             ...t,
             s.payload
           ];
         case `${r}/DELETE`:
           return [
-            ...t.filter((i) => i.hasOwnProperty(e) && i[e] != s.payload[e] || !i.hasOwnProperty(e) && i != s.payload)
+            ...t.filter((n) => n.hasOwnProperty(e) && n[e] != s.payload[e] || !n.hasOwnProperty(e) && n != s.payload)
           ];
         case `${r}/LOAD`:
           return [
@@ -187,6 +187,6 @@ class A {
 }
 let D = new A();
 export {
-  y as defaultStoreActions,
+  o as defaultStoreActions,
   D as store
 };

package/dist/wje-tab-group.js

@@ -1,9 +1,9 @@
 var u = Object.defineProperty;
 var m = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
-var v = (a, e, t) => (m(a, typeof e != "symbol" ? e + "" : e, t), t);
+var b = (a, e, t) => (m(a, typeof e != "symbol" ? e + "" : e, t), t);
 import h from "./wje-element.js";
 const g = ":host{--wje-tab-top: 0;--wje-tab-start: 0;--wje-tab-end: 0;--wje-tab-bottom: 0}.native-tab-group{display:flex;flex-direction:column;overflow:hidden;position:relative}.native-tab-group>header{display:flex;flex-direction:column}.native-tab-group>header>nav{display:flex}.native-tab-group>section{width:100%}.native-tab-group>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain}:host([variant=top]){--wje-tab-top: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant=top]) .native-tab-group{flex-direction:column}:host([variant=top]) nav{border-bottom:1px solid var(--wje-border-color)}:host([variant=start]){--wje-tab-start: auto !important;--wje-tab-writing-mode: vertical-rl}:host([variant=start]) .native-tab-group{flex-direction:row}:host([variant=start]) nav{flex-direction:column;border-right:1px solid var(--wje-border-color)}:host([variant=end]){--wje-tab-writing-mode: vertical-rl}:host([variant=end]) .native-tab-group{flex-direction:row-reverse}:host([variant=end]) nav{flex-direction:column;border-left:1px solid var(--wje-border-color)}:host([variant=bottom]){--wje-tab-bottom: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant=bottom]) .native-tab-group{flex-direction:column-reverse}:host([variant=bottom]) nav{border-top:1px solid var(--wje-border-color)}";
-class b extends h {
+class v extends h {
   /**
    * Creates an instance of TabGroup.
    *
@@ -11,7 +11,7 @@ class b extends h {
    */
   constructor() {
     super();
-    v(this, "className", "TabGroup");
+    b(this, "className", "TabGroup");
   }
   /**
    * Returns the CSS styles for the component.
@@ -28,6 +28,17 @@ class b extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  /**
+   * Sets up the event listeners before the component is drawn.
+   * This method is called before the component is drawn.
+   * It is used to set up event listeners.
+   */
+  beforeDraw() {
+    let t = location.hash.replace("#", "");
+    this.getPanelAllName().includes(t) && window.addEventListener("load", (i) => {
+      this.setActiveTab(t);
+    });
+  }
   /**
    * Draws the component.
    *
@@ -36,25 +47,25 @@ class b extends h {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, l, i) {
+  draw(t, i, n) {
     let s = document.createDocumentFragment(), r = document.createElement("div");
     r.setAttribute("part", "native"), r.classList.add("native-tab-group");
     let o = document.createElement("header");
     o.setAttribute("part", "tabs"), o.classList.add("scroll-snap-x");
-    let c = document.createElement("nav"), n = document.createElement("section");
-    n.setAttribute("part", "panels");
+    let c = document.createElement("nav"), l = document.createElement("section");
+    l.setAttribute("part", "panels");
     let p = document.createElement("slot"), d = document.createElement("slot");
-    return d.setAttribute("name", "nav"), o.appendChild(c), c.appendChild(d), n.appendChild(p), r.appendChild(o), r.appendChild(n), s.appendChild(r), s;
+    return d.setAttribute("name", "nav"), o.appendChild(c), c.appendChild(d), l.appendChild(p), r.appendChild(o), r.appendChild(l), s.appendChild(r), s;
   }
   /**
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    let t = this.getActiveTab(), l = t ? t[0].name : this.getTabAll()[0].panel;
-    this.setActiveTab(l), this.addEventListener("wje:tab-change", (i) => {
-      if (i.detail.context.hasAttribute("disabled"))
+    let t = this.getActiveTab(), i = t ? t[0].name : this.getTabAll()[0].panel;
+    this.setActiveTab(i), this.addEventListener("wje-tab:change", (n) => {
+      if (n.detail.context.hasAttribute("disabled"))
         return !1;
-      this.setActiveTab(i.detail.context.panel);
+      this.setActiveTab(n.detail.context.panel);
     });
   }
   /**
@@ -100,8 +111,16 @@ class b extends h {
   getPanelAll() {
     return Array.from(this.querySelectorAll("wje-tab-panel"));
   }
+  /**
+   * Returns the names of all tabs.
+   *
+   * @returns {Array<string>} An array of all tab names.
+   */
+  getPanelAllName() {
+    return this.getPanelAll().map((t) => t.getAttribute("name"));
+  }
 }
-b.define("wje-tab-group", b);
+v.define("wje-tab-group", v);
 export {
-  b as default
+  v as default
 };

package/dist/wje-tab.js

@@ -50,7 +50,7 @@ class i extends b {
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    c.addListener(this, "click", "wje:tab-change");
+    c.addListener(this, "click", "wje-tab:change");
   }
 }
 i.define("wje-tab", i);

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.50",
+  "version": "0.1.52",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",

package/dist/wje-inline-edit.js

@@ -1,145 +0,0 @@
-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();
-    /**
-     * 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");
-  }
-  set title(t) {
-    return this.setAttribute("title", t);
-  }
-  get notEditable() {
-    return this.hasAttribute("not-editable");
-  }
-  set notEditable(t) {
-    return this.setAttribute("not-editable", "");
-  }
-  get endpoint() {
-    return this.getAttribute("endpoint");
-  }
-  set endpoint(t) {
-    return this.setAttribute("endpoint", t);
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {string} The CSS stylesheet.
-   */
-  static get cssStyleSheet() {
-    return g;
-  }
-  static get observedAttributes() {
-    return ["checked", "disabled"];
-  }
-  /**
-   * Sets up the attributes for the checkbox.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * 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();
-    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.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("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, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: t
-    }).then((e) => e.ok ? e.json() : e.text).then((e) => {
-      this.title = e.data, this.refresh(), intranet.notification(e), this.dispatchResponse(e.data);
-    }).catch((e) => {
-      intranet.notification(e), this.dispatchError(e);
-    });
-  }
-  dispatchEdit(t) {
-    document.dispatchEvent(
-      new CustomEvent("wje-inline-edit-save", {
-        bubbles: !0,
-        detail: {
-          value: t,
-          element: this
-        }
-      })
-    );
-  }
-  dispatchResponse(t) {
-    document.dispatchEvent(
-      new CustomEvent("wje-inline-edit-response", {
-        bubbles: !0,
-        detail: {
-          value: t,
-          element: this
-        }
-      })
-    );
-  }
-  dispatchError(t) {
-    document.dispatchEvent(
-      new CustomEvent("wje-inline-edit-error", {
-        bubbles: !0,
-        detail: {
-          value: t,
-          element: this
-        }
-      })
-    );
-  }
-}
-l.define("wje-inline-edit", l);
-export {
-  l as default
-};