wj-elements 0.1.43 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/wje-button.js +9 -9
  2. package/dist/wje-dialog.js +20 -20
  3. package/dist/wje-infinite-scroll.js +63 -55
  4. package/dist/wje-inline-edit.js +57 -32
  5. package/dist/wje-input.js +5 -5
  6. package/dist/wje-item.js +1 -1
  7. package/dist/wje-master.js +227 -200
  8. package/package.json +1 -1
package/dist/wje-button.js CHANGED
@@ -1,9 +1,9 @@
1
1
  var j = Object.defineProperty;
2
- var g = (e, a, o) => a in e ? j(e, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[a] = o;
3
- var s = (e, a, o) => (g(e, typeof a != "symbol" ? a + "" : a, o), o);
2
+ var g = (e, l, o) => l in e ? j(e, l, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[l] = o;
3
+ var s = (e, l, o) => (g(e, typeof l != "symbol" ? l + "" : l, o), o);
4
4
  import h, { WjElementUtils as p, event as i } from "./wje-element.js";
5
5
  import v from "./wje-icon.js";
6
- const b = (e) => e === "false" || e === "null" || e === "NaN" || e === "undefined" || e === "0" ? !1 : !!e, m = '.wje-button-solid.wje-color-primary{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-9);color:var(--wje-color-primary-9)}.wje-button-solid.wje-color-complete{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-9);color:var(--wje-color-complete-9)}.wje-button-solid.wje-color-success{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-9);color:var(--wje-color-success-9)}.wje-button-solid.wje-color-warning{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11)}.wje-button-solid.wje-color-danger{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-9);color:var(--wje-color-danger-9)}.wje-button-solid.wje-color-neutral{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-neutral{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-9)}.wje-button-solid.wje-color-default{background-color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11)}.wje-button-outline.wje-color-default{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-5);color:var(--wje-color-contrast-11)}:host{--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.native-button{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);background-color:transparent;line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end)}.native-button:hover{outline-style:solid;outline-width:var(--wje-button-outline-width);transition:outline-width .1s linear}@media (any-hover: hover){.wje-button-solid.wje-color-primary:hover{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-primary-2)}.wje-button-outline.wje-color-primary:hover{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-9);color:var(--wje-color-primary-9);outline-color:var(--wje-color-primary-2)}.wje-button-solid.wje-color-complete:hover{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-complete-2)}.wje-button-outline.wje-color-complete:hover{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-9);color:var(--wje-color-complete-9);outline-color:var(--wje-color-complete-2)}.wje-button-solid.wje-color-success:hover{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-success-2)}.wje-button-outline.wje-color-success:hover{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-9);color:var(--wje-color-success-9);outline-color:var(--wje-color-success-2)}.wje-button-solid.wje-color-warning:hover{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black);outline-color:var(--wje-color-warning-2)}.wje-button-outline.wje-color-warning:hover{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11);outline-color:var(--wje-color-warning-2)}.wje-button-solid.wje-color-danger:hover{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-danger-2)}.wje-button-outline.wje-color-danger:hover{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-9);color:var(--wje-color-danger-9);outline-color:var(--wje-color-danger-2)}.wje-button-solid.wje-color-neutral:hover{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-contrast-3)}.wje-button-outline.wje-color-neutral:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-9);outline-color:var(--wje-color-contrast-3)}.wje-button-solid.wje-color-default:hover{background-color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11);outline-color:var(--wje-color-contrast-3)}.wje-button-outline.wje-color-default:hover{background-color:var(--wje-color-contrast-2);border-color:var(--wje-color-contrast-5);color:var(--wje-color-contrast-11);outline-color:var(--wje-color-contrast-3)}.wje-button-link:hover{background-color:var(--wje-color-contrast-3);border-color:transparent;color:var(--wje-color-contrast-11);outline-color:transparent;outline-width:0}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1;line-height:normal}.wje-button-link{border-width:1px;border-color:transparent;background-color:transparent}.wje-button-disabled{cursor:default;opacity:.5;pointer-events:none}:host([round]) .native-button{border-radius:var(--wje-border-radius-pill)}:host([circle]) .native-button{border-radius:var(--wje-border-radius-circle);aspect-ratio:1/1;width:1.813rem;display:flex;align-items:center;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=small]) .native-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}:host([size=large]) .native-button{--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host([size=small][circle]) .native-button{width:1.5rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=large][circle]) .native-button{width:2.188rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .native-button{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
6
+ const b = (e) => e === "false" || e === "null" || e === "NaN" || e === "undefined" || e === "0" ? !1 : !!e, m = '.wje-button-solid.wje-color-primary{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-9);color:var(--wje-color-primary-9)}.wje-button-solid.wje-color-complete{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-9);color:var(--wje-color-complete-9)}.wje-button-solid.wje-color-success{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-9);color:var(--wje-color-success-9)}.wje-button-solid.wje-color-warning{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11)}.wje-button-solid.wje-color-danger{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-9);color:var(--wje-color-danger-9)}.wje-button-solid.wje-color-neutral{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-neutral{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-9)}.wje-button-solid.wje-color-default{background-color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11)}.wje-button-outline.wje-color-default{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-5);color:var(--wje-color-contrast-11)}:host{--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.native-button{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);background-color:transparent;line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end);white-space:nowrap}.native-button:hover{outline-style:solid;outline-width:var(--wje-button-outline-width);transition:outline-width .1s linear}@media (any-hover: hover){.wje-button-solid.wje-color-primary:hover{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-primary-2)}.wje-button-outline.wje-color-primary:hover{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-9);color:var(--wje-color-primary-9);outline-color:var(--wje-color-primary-2)}.wje-button-solid.wje-color-complete:hover{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-complete-2)}.wje-button-outline.wje-color-complete:hover{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-9);color:var(--wje-color-complete-9);outline-color:var(--wje-color-complete-2)}.wje-button-solid.wje-color-success:hover{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-success-2)}.wje-button-outline.wje-color-success:hover{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-9);color:var(--wje-color-success-9);outline-color:var(--wje-color-success-2)}.wje-button-solid.wje-color-warning:hover{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black);outline-color:var(--wje-color-warning-2)}.wje-button-outline.wje-color-warning:hover{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11);outline-color:var(--wje-color-warning-2)}.wje-button-solid.wje-color-danger:hover{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-danger-2)}.wje-button-outline.wje-color-danger:hover{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-9);color:var(--wje-color-danger-9);outline-color:var(--wje-color-danger-2)}.wje-button-solid.wje-color-neutral:hover{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-contrast-3)}.wje-button-outline.wje-color-neutral:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-9);outline-color:var(--wje-color-contrast-3)}.wje-button-solid.wje-color-default:hover{background-color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11);outline-color:var(--wje-color-contrast-3)}.wje-button-outline.wje-color-default:hover{background-color:var(--wje-color-contrast-2);border-color:var(--wje-color-contrast-5);color:var(--wje-color-contrast-11);outline-color:var(--wje-color-contrast-3)}.wje-button-link:hover{background-color:var(--wje-color-contrast-3);border-color:transparent;color:var(--wje-color-contrast-11);outline-color:transparent;outline-width:0}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1;line-height:normal}.wje-button-link{border-width:var(--wje-button-border-width);border-radius:var(--wje-button-border-radius);border-color:transparent;background-color:transparent}.wje-button-disabled{cursor:default;opacity:.5;pointer-events:none}:host([round]) .native-button{border-radius:var(--wje-border-radius-pill)}:host([circle]) .native-button{border-radius:var(--wje-border-radius-circle);aspect-ratio:1/1;width:1.813rem;display:flex;align-items:center;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=small]) .native-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}:host([size=large]) .native-button{--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host([size=small][circle]) .native-button{width:1.5rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=large][circle]) .native-button{width:2.188rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .native-button{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
7
7
  class u extends h {
8
8
  /**
9
9
  * Button constructor
@@ -160,20 +160,20 @@ class u extends h {
160
160
  draw(o, c, w) {
161
161
  let d = document.createDocumentFragment(), t = document.createElement(this.hasAttribute("href") ? "a" : "button");
162
162
  if (this.hasAttribute("href") ? t.setAttribute("href", this.getAttribute("href")) : this.type === "submit" && t.setAttribute("type", "submit"), t.classList.add("native-button"), t.setAttribute("part", "native"), this.classList.remove("wje-button-disabled"), this.disabled && t.classList.add("wje-button-disabled"), this.variant && t.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && t.classList.add("wje-button-round"), this.hasAttribute("circle") && t.classList.add("wje-button-circle"), this.outline && t.classList.add("wje-outline"), this.fill && t.classList.add("wje-button-" + this.fill), this.size && t.classList.add("wje-button-" + this.size), this.hasAttribute("color") ? t.classList.add("wje-color-" + this.color, "wje-color") : t.classList.add("wje-color-default", "wje-color"), this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
163
- let l = document.createElement("wje-icon");
164
- l.style.setProperty("--wje-icon-size", "14px"), l.setAttribute("slot", "caret"), l.setAttribute("name", "chevron-down"), this.appendChild(l);
163
+ let a = document.createElement("wje-icon");
164
+ a.style.setProperty("--wje-icon-size", "14px"), a.setAttribute("slot", "caret"), a.setAttribute("name", "chevron-down"), this.appendChild(a);
165
165
  }
166
166
  if (this.active) {
167
167
  this.classList.add("wje-active");
168
- let l = document.createElement("wje-icon");
169
- l.setAttribute("name", "check"), this.appendChild(l);
168
+ let a = document.createElement("wje-icon");
169
+ a.setAttribute("name", "check"), this.appendChild(a);
170
170
  }
171
171
  let n = document.createElement("span");
172
172
  n.classList.add("button-inner");
173
173
  let r = document.createElement("slot");
174
174
  if (r.setAttribute("name", "icon-only"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), n.appendChild(r), r = document.createElement("slot"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), n.appendChild(r), this.hasToggle = p.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), t.appendChild(n), this.hasAttribute("tooltip")) {
175
- let l = document.createElement("wje-tooltip");
176
- l.setAttribute("content", this.getAttribute("tooltip")), l.setAttribute("placement", this.getAttribute("tooltip-placement") || "top"), l.appendChild(t), d.appendChild(l);
175
+ let a = document.createElement("wje-tooltip");
176
+ a.setAttribute("content", this.getAttribute("tooltip")), a.setAttribute("placement", this.getAttribute("tooltip-placement") || "top"), a.appendChild(t), d.appendChild(a);
177
177
  } else
178
178
  d.appendChild(t);
179
179
  return d;
package/dist/wje-dialog.js CHANGED
@@ -1,20 +1,20 @@
1
1
  var u = Object.defineProperty;
2
2
  var f = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
3
3
  var s = (o, t, e) => (f(o, typeof t != "symbol" ? t + "" : t, e), e);
4
- import v, { event as p } from "./wje-element.js";
4
+ import v, { event as h } from "./wje-element.js";
5
5
  import "./wje-icon.js";
6
6
  const x = ':host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wje-dialog-padding);padding-top:var(--wje-dialog-padding);padding-bottom:var(--wje-dialog-padding);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wje-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wje-dialog-padding);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wje-dialog-padding-inline);padding-top:var(--wje-dialog-padding-top);padding-bottom:var(--wje-dialog-padding-bottom)}dialog::backdrop{opacity:var(--wje-backdrop-opacity);background-color:var(--wje-backdrop)}dialog:focus-visible{outline:none}:host(.separator) .dialog-header:after{content:"";height:1px;background:#00000014;left:var(--wje-dialog-padding);right:var(--wje-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wje-dialog-width);height:var(--wje-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wje-dialog-border-radius);border-width:var(--wje-dialog-border-width);border-style:var(--wje-dialog-border-style);border-color:var(--wje-dialog-border-color);margin-top:var(--wje-dialog-margin-top);margin-bottom:var(--wje-dialog-margin-bottom);margin-inline:var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);padding:0}:host(.stick-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 0 0 8px 8px;--wje-dialog-border-width: 0 1px 1px 1px;--wje-dialog-margin-top: 0;--wje-dialog-translate-from: translateY(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 8px;--wje-dialog-border-width: 1px;--wje-dialog-opacity-from: 0;--wje-dialog-translate-from: scale(.9);--wje-dialog-translate-to: scale(1)}:host(.fill-in){--wje-dialog-width: 100%;--wje-dialog-height: 100%;--wje-dialog-border-radius: 0 0 0 0 !important;--wje-dialog-border-width: 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0;--wje-dialog-translate-from: scale(.95);--wje-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wje-dialog-width);min-height:var(--wje-dialog-height)}:host(.slide-left){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 1px 0 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-right){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 0 0 1px;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(110%);--wje-dialog-template-to: translateX(0)}:host(.small){--wje-dialog-width: 300px !important}:host(.medium){--wje-dialog-width: 500px !important}:host(.large){--wje-dialog-width: 600px !important}:host(.ex-large){--wje-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wje-dialog-opacity-from, 1);transform:var(--wje-dialog-translate-from)}to{opacity:1;transform:var(--wje-dialog-translate-to)}}';
7
- class j extends v {
7
+ class c extends v {
8
8
  constructor() {
9
9
  super();
10
10
  s(this, "className", "Dialog");
11
- s(this, "onOpen", (e) => {
12
- console.log("open dialog 111"), Promise.resolve(this.beforeOpen(this)).then((g) => {
11
+ s(this, "onOpen", () => {
12
+ Promise.resolve(this.beforeOpen(this)).then((e) => {
13
13
  this.dialog.showModal(), this.dialog.open && Promise.resolve(this.afterOpen(this));
14
14
  });
15
15
  });
16
- s(this, "onClose", (e) => {
17
- Promise.resolve(this.beforeClose(this)).then((g) => {
16
+ s(this, "onClose", () => {
17
+ Promise.resolve(this.beforeClose(this)).then((e) => {
18
18
  this.dialog.close(), this.dialog.open && Promise.resolve(this.afterClose(this));
19
19
  });
20
20
  });
@@ -40,33 +40,33 @@ class j extends v {
40
40
  setupAttributes() {
41
41
  this.isShadowRoot = "open";
42
42
  }
43
- draw(e, g, r) {
44
- let m = document.createDocumentFragment();
43
+ draw(e, j, r) {
44
+ let p = document.createDocumentFragment();
45
45
  this.classList.add("fade", this.placement, r.size);
46
46
  let b = document.createElement("slot"), a = document.createElement("dialog");
47
47
  a.classList.add("modal-dialog");
48
- let h = document.createElement("wje-icon");
49
- h.setAttribute("name", "x"), h.setAttribute("slot", "icon-only");
48
+ let g = document.createElement("wje-icon");
49
+ g.setAttribute("name", "x"), g.setAttribute("slot", "icon-only");
50
50
  let i = document.createElement("wje-button");
51
51
  i.setAttribute("fill", "link"), i.setAttribute("size", "small"), i.classList.add("close"), i.addEventListener("click", () => {
52
52
  this.close();
53
- }), i.appendChild(h);
53
+ }), i.appendChild(g);
54
54
  let d = document.createElement("div");
55
55
  d.setAttribute("part", "header"), d.classList.add("dialog-header"), this.hasAttribute("headline") && (d.innerHTML = `<span>${this.headline}</span>`), d.appendChild(i);
56
- let w = document.createElement("slot");
57
- w.setAttribute("name", "header"), d.appendChild(w);
56
+ let m = document.createElement("slot");
57
+ m.setAttribute("name", "header"), d.appendChild(m);
58
58
  let n = document.createElement("div");
59
59
  n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(b);
60
60
  let l = document.createElement("div");
61
61
  l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
62
- let c = document.createElement("slot");
63
- return c.setAttribute("name", "footer"), l.appendChild(c), a.appendChild(d), a.appendChild(n), a.appendChild(l), m.appendChild(a), this.dialog = a, m;
62
+ let w = document.createElement("slot");
63
+ return w.setAttribute("name", "footer"), l.appendChild(w), a.appendChild(d), a.appendChild(n), a.appendChild(l), p.appendChild(a), this.dialog = a, p;
64
64
  }
65
65
  close() {
66
66
  this.onClose();
67
67
  }
68
- afterDraw(e, g, r) {
69
- this.button = document.querySelector(`[dialog=${r.trigger}]`), r.trigger && p.addListener(this.button, r.trigger, null, this.onOpen);
68
+ afterDraw(e, j, r) {
69
+ this.button = document.querySelector(`[dialog=${r.trigger}]`), r.trigger && h.addListener(this.button, r.trigger, null, this.onOpen);
70
70
  }
71
71
  beforeOpen() {
72
72
  }
@@ -77,10 +77,10 @@ class j extends v {
77
77
  afterClose() {
78
78
  }
79
79
  disconnectedCallback() {
80
- p.removeElement(this.button), p.removeElement(this.dialog);
80
+ h.removeElement(this.button), h.removeElement(this.dialog);
81
81
  }
82
82
  }
83
- j.define("wje-dialog", j);
83
+ c.define("wje-dialog", c);
84
84
  export {
85
- j as default
85
+ c as default
86
86
  };
package/dist/wje-infinite-scroll.js CHANGED
@@ -1,6 +1,6 @@
1
- var g = Object.defineProperty;
2
- var p = (o, r, t) => r in o ? g(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
3
- var h = (o, r, t) => (p(o, typeof r != "symbol" ? r + "" : r, t), t);
1
+ var p = Object.defineProperty;
2
+ var g = (h, a, e) => a in h ? p(h, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[a] = e;
3
+ var o = (h, a, e) => (g(h, typeof a != "symbol" ? a + "" : a, e), e);
4
4
  import f, { WjElementUtils as w, event as d } from "./wje-element.js";
5
5
  const y = ":host{overflow-x:auto;width:var(--wje-infinite-scroll-width);height:var(--wje-infinite-scroll-height);display:block}.loading{position:sticky;display:none;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;z-index:9999;background-color:var(--wje-infinite-scroll-loading-bg)}.loading.show{display:flex}[name=ending]{display:none;margin-top:1rem;text-align:center}[name=ending].show{display:block}";
6
6
  class u extends f {
@@ -10,19 +10,19 @@ class u extends f {
10
10
  * @constructor
11
11
  * @param {Object} options - The options for the InfiniteScroll.
12
12
  */
13
- constructor(t = {}) {
13
+ constructor(e = {}) {
14
14
  super();
15
- h(this, "className", "InfiniteScroll");
15
+ o(this, "className", "InfiniteScroll");
16
16
  /**
17
17
  * Adds the scroll event listener.
18
18
  */
19
- h(this, "scrollEvent", () => {
19
+ o(this, "scrollEvent", () => {
20
20
  this.addEventListener("scroll", this.onScroll);
21
21
  });
22
22
  /**
23
23
  * Removes the scroll event listener.
24
24
  */
25
- h(this, "unScrollEvent", () => {
25
+ o(this, "unScrollEvent", () => {
26
26
  this.removeEventListener("scroll", this.onScroll);
27
27
  });
28
28
  /**
@@ -30,36 +30,50 @@ class u extends f {
30
30
  *
31
31
  * @param {Event} e - The event.
32
32
  */
33
- h(this, "onScroll", (t) => {
34
- const { scrollTop: e, scrollHeight: i, clientHeight: s } = t.target;
35
- e + s >= i - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
33
+ o(this, "onScroll", (e) => {
34
+ const { scrollTop: t, scrollHeight: i, clientHeight: s } = e.target;
35
+ t + s >= i - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
36
36
  });
37
- this.totalPages = 0, this.isLoading = [], this._response = {}, this.iterate = null, this._infiniteScrollTemplate = null, String.prototype.interpolate = function(e) {
37
+ /**
38
+ * Sets the custom data.
39
+ *
40
+ */
41
+ o(this, "dataToHtml", (e) => {
42
+ let t = this.infiniteScrollTemplate.interpolate(e);
43
+ return this.parser.parseFromString(t, "text/html").activeElement.firstElementChild;
44
+ });
45
+ o(this, "customForeach", (e) => {
46
+ e.forEach((t) => {
47
+ let i = this.dataToHtml(t);
48
+ d.addListener(i, "click", "wje-infinite-scroll:click-item", null), this.placementObj.insertAdjacentElement("beforeend", i);
49
+ });
50
+ });
51
+ this.totalPages = 0, this.isLoading = [], this._response = {}, this.iterate = null, this._infiniteScrollTemplate = null, String.prototype.interpolate = function(t) {
38
52
  let i = this, s = i.match(/\{{.*?\}}/g);
39
53
  if (s)
40
- for (let n of s) {
41
- let c = n.replace("{{", "").replace("}}", ""), l = "";
42
- c.split(".").forEach((a) => {
43
- l = l == "" ? e[a] : l[a];
44
- }), i = i.replace(n, l);
54
+ for (let l of s) {
55
+ let c = l.replace("{{", "").replace("}}", ""), n = "";
56
+ c.split(".").forEach((r) => {
57
+ n = n == "" ? t[r] : n[r];
58
+ }), i = i.replace(l, n);
45
59
  }
46
60
  return i;
47
61
  };
48
62
  }
49
- set infiniteScrollTemplate(t) {
50
- this._infiniteScrollTemplate = t;
63
+ set infiniteScrollTemplate(e) {
64
+ this._infiniteScrollTemplate = e;
51
65
  }
52
66
  get infiniteScrollTemplate() {
53
67
  return this._infiniteScrollTemplate;
54
68
  }
55
- set response(t) {
56
- this._response = t;
69
+ set response(e) {
70
+ this._response = e;
57
71
  }
58
72
  get response() {
59
73
  return this._response;
60
74
  }
61
- set objectName(t) {
62
- this.setAttribute("object-name", t);
75
+ set objectName(e) {
76
+ this.setAttribute("object-name", e);
63
77
  }
64
78
  get objectName() {
65
79
  return this.getAttribute("object-name") || "data";
@@ -95,9 +109,9 @@ class u extends f {
95
109
  * @param {Object} store - The store for drawing.
96
110
  * @param {Object} params - The parameters for drawing.
97
111
  */
98
- beforeDraw(t, e, i) {
99
- var s, n;
100
- this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = (s = this.iterate) == null ? void 0 : s.outerHTML, (n = this.iterate) == null || n.remove(), this.setAttribute("style", "height: " + this.height);
112
+ beforeDraw(e, t, i) {
113
+ var s, l;
114
+ this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = (s = this.iterate) == null ? void 0 : s.outerHTML, (l = this.iterate) == null || l.remove(), this.setAttribute("style", "height: " + this.height);
101
115
  }
102
116
  /**
103
117
  * Draws the component.
@@ -107,17 +121,17 @@ class u extends f {
107
121
  * @param {Object} params - The parameters for drawing.
108
122
  * @returns {DocumentFragment}
109
123
  */
110
- draw(t, e, i) {
111
- let s = document.createDocumentFragment(), n = document.createElement("div");
112
- n.classList.add("native"), n.setAttribute("part", "native-infinite-scroll");
113
- let c = document.createElement("slot"), l = document.createElement("slot");
114
- if (l.setAttribute("name", "ending"), w.hasSlot(this, "loader")) {
115
- let a = document.createElement("div");
116
- a.classList.add("loading");
124
+ draw(e, t, i) {
125
+ let s = document.createDocumentFragment(), l = document.createElement("div");
126
+ l.classList.add("native"), l.setAttribute("part", "native-infinite-scroll");
127
+ let c = document.createElement("slot"), n = document.createElement("slot");
128
+ if (n.setAttribute("name", "ending"), w.hasSlot(this, "loader")) {
129
+ let r = document.createElement("div");
130
+ r.classList.add("loading");
117
131
  let m = document.createElement("slot");
118
- m.setAttribute("name", "loader"), a.appendChild(m), this.loadingEl = a, s.appendChild(a);
132
+ m.setAttribute("name", "loader"), r.appendChild(m), this.loadingEl = r, s.appendChild(r);
119
133
  }
120
- return n.appendChild(c), n.appendChild(l), s.appendChild(n), this.endingEl = l, s;
134
+ return l.appendChild(c), l.appendChild(n), s.appendChild(l), this.endingEl = n, s;
121
135
  }
122
136
  /**
123
137
  * Called after the component has been drawn.
@@ -131,9 +145,9 @@ class u extends f {
131
145
  * @param {number} page - The page number.
132
146
  * @returns {Promise<Object>} The response from the server.
133
147
  */
134
- async getPages(t) {
135
- let e = this.url.includes("?");
136
- const i = await fetch(`${this.url}${e ? "&" : "?"}page=${t}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
148
+ async getPages(e) {
149
+ let t = this.url.includes("?");
150
+ const i = await fetch(`${this.url}${t ? "&" : "?"}page=${e}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
137
151
  if (!i.ok)
138
152
  throw new Error(`An error occurred: ${i.status}`);
139
153
  return await i.json();
@@ -142,15 +156,15 @@ class u extends f {
142
156
  * Hides the loader.
143
157
  */
144
158
  hideLoader() {
145
- var t;
146
- (t = this == null ? void 0 : this.loadingEl) == null || t.classList.remove("show");
159
+ var e;
160
+ (e = this == null ? void 0 : this.loadingEl) == null || e.classList.remove("show");
147
161
  }
148
162
  /**
149
163
  * Shows the loader.
150
164
  */
151
165
  showLoader() {
152
- var t;
153
- (t = this == null ? void 0 : this.loadingEl) == null || t.classList.add("show");
166
+ var e;
167
+ (e = this == null ? void 0 : this.loadingEl) == null || e.classList.add("show");
154
168
  }
155
169
  /**
156
170
  * Checks if there are more pages to load.
@@ -158,30 +172,24 @@ class u extends f {
158
172
  * @param {number} page - The page number.
159
173
  * @returns {boolean} Whether there are more pages to load.
160
174
  */
161
- hasMorePages(t) {
162
- return this.totalPages === 0 || t < this.totalPages;
175
+ hasMorePages(e) {
176
+ return this.totalPages === 0 || e < this.totalPages;
163
177
  }
164
178
  /**
165
179
  * Loads the pages.
166
180
  *
167
181
  * @param {number} page - The page number.
168
182
  */
169
- async loadPages(t) {
183
+ async loadPages(e) {
170
184
  this.showLoader();
171
185
  try {
172
- if (this.hasMorePages(t) || typeof this.setCustomData == "function") {
173
- let e;
174
- typeof this.setCustomData == "function" ? e = await this.setCustomData(t) : e = await this.getPages(t), this.totalPages = e.totalPages, this.currentPage = t;
175
- const i = new DOMParser();
176
- let s = this;
177
- this.hasAttribute("placement") && (s = this.querySelector(this.placement)), d.dispatchCustomEvent(this, "wje-infinite-scroll:load", e), this.response = e, e[this.objectName].forEach((n) => {
178
- const c = this.infiniteScrollTemplate.interpolate(n), a = i.parseFromString(c, "text/html").activeElement.firstElementChild;
179
- d.addListener(a, "click", "wje-infinite-scroll:click-item", null), s.insertAdjacentElement("beforeend", a);
180
- }), this.isLoading.push(t);
186
+ if (this.hasMorePages(e)) {
187
+ let t;
188
+ this.parser = new DOMParser(), typeof this.setCustomData == "function" ? t = await this.setCustomData(e) : t = await this.getPages(e), this.totalPages = t.totalPages, this.currentPage = e, this.placementObj = this, this.hasAttribute("placement") && (this.placementObj = this.querySelector(this.placement)), d.dispatchCustomEvent(this, "wje-infinite-scroll:load", t), this.response = t, this.customForeach(t[this.objectName]), this.isLoading.push(e);
181
189
  } else
182
190
  d.dispatchCustomEvent(this, "wje-infinite-scroll:complete"), this.endingEl.classList.add("show");
183
- } catch (e) {
184
- console.log(e.message);
191
+ } catch (t) {
192
+ console.log(t.message);
185
193
  } finally {
186
194
  this.hideLoader();
187
195
  }
package/dist/wje-inline-edit.js CHANGED
@@ -1,12 +1,29 @@
1
- var h = Object.defineProperty;
2
- var r = (s, n, t) => n in s ? h(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
3
- var a = (s, n, t) => (r(s, typeof n != "symbol" ? n + "" : n, t), t);
4
- import l from "./wje-element.js";
5
- 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}";
6
- class o extends l {
1
+ var u = Object.defineProperty;
2
+ var p = (s, n, t) => n in s ? u(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
3
+ var r = (s, n, t) => (p(s, typeof n != "symbol" ? n + "" : n, t), t);
4
+ import c from "./wje-element.js";
5
+ import m from "./wje-format-digital.js";
6
+ import b from "./wje-button.js";
7
+ import v from "./wje-input.js";
8
+ import f from "./wje-icon.js";
9
+ 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}";
10
+ class l extends c {
7
11
  constructor() {
8
12
  super();
9
- a(this, "className", "InfiniteScroll");
13
+ /**
14
+ * Dependencies
15
+ * @type {Object}
16
+ */
17
+ r(this, "depandencies", {
18
+ "wje-format-digital": m,
19
+ "wje-button": b,
20
+ "wje-input": v,
21
+ "wje-icon": f
22
+ });
23
+ /**
24
+ * The class name.
25
+ */
26
+ r(this, "className", "InlineEdit");
10
27
  }
11
28
  get title() {
12
29
  return this.getAttribute("title");
@@ -27,45 +44,53 @@ class o extends l {
27
44
  return this.setAttribute("endpoint", t);
28
45
  }
29
46
  /**
30
- * Returns the CSS styles for the component.
31
- *
32
- * @static
33
- * @returns {CSSStyleSheet}
47
+ * Getter for the CSS stylesheet.
48
+ * @returns {string} The CSS stylesheet.
34
49
  */
35
50
  static get cssStyleSheet() {
36
- return u;
51
+ return g;
37
52
  }
38
- /**
39
- * Returns the list of attributes to observe for changes.
40
- *
41
- * @static
42
- * @returns {Array<string>}
43
- */
44
53
  static get observedAttributes() {
45
- return [];
54
+ return ["checked", "disabled"];
46
55
  }
47
56
  /**
48
- * Sets up the attributes for the component.
57
+ * Sets up the attributes for the checkbox.
49
58
  */
50
59
  setupAttributes() {
51
60
  this.isShadowRoot = "open";
52
61
  }
53
- draw(t, e, d) {
62
+ /**
63
+ * Draws the checkbox.
64
+ * @param {object} context - The context.
65
+ * @param {object} store - The store.
66
+ * @param {object} params - The parameters.
67
+ * @returns {DocumentFragment} The created fragment.
68
+ */
69
+ draw(t, e, h) {
54
70
  let i = document.createDocumentFragment();
55
- 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;
56
- }
57
- afterDraw(t, e, d) {
71
+ 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) {
72
+ this.span = document.createElement("span"), this.span.innerHTML = '<wje-icon name="pencil"></wje-icon>';
73
+ let a = document.createElement("div");
74
+ 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");
75
+ let d = document.createElement("wje-button");
76
+ d.setAttribute("fill", "outline"), d.setAttribute("color", "success"), d.innerHTML = '<wje-icon name="check"></wje-icon>';
77
+ let o = document.createElement("wje-button");
78
+ 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);
79
+ }
80
+ return i;
81
+ }
82
+ afterDraw(t, e, h) {
58
83
  this.notEditable || (this.heading.addEventListener("click", (i) => {
59
- this.form.classList.add("open", "fade-in"), this.heading.classList.remove("fade-in"), this.heading.classList.add("fade-out");
60
- }), this.buttonClose.addEventListener("click", (i) => {
61
- 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");
62
- }), this.buttonSave.addEventListener("click", (i) => {
84
+ this.heading.classList.remove("fade-in"), this.heading.classList.add("fade-out");
85
+ }), this.close.addEventListener("click", (i) => {
86
+ i.preventDefault(), i.stopImmediatePropagation(), i.stopPropagation(), native.classList.remove("open", "fade-in"), this.heading.classList.remove("fade-out"), this.heading.classList.add("fade-in");
87
+ }), this.save.addEventListener("click", (i) => {
63
88
  this.endpoint === null ? this.dispatchEdit(this.input.value) : this.save(this.input.value);
64
89
  }));
65
90
  }
66
91
  inputElement() {
67
- let t = document.createElement("input");
68
- return t.type = "text", t.placeholder = this.title, t.value = this.title, t.classList.add("form-control", "input-sm"), t;
92
+ let t = document.createElement("wje-input");
93
+ return t.setAttribute("variant", "standard"), t.setAttribute("type", "text"), t.setAttribute("placeholder", this.placelhoder), t.setAttribute("value", this.textContent), t;
69
94
  }
70
95
  save(t) {
71
96
  return fetch(this.endpoint, {
@@ -114,7 +139,7 @@ class o extends l {
114
139
  );
115
140
  }
116
141
  }
117
- o.define("wje-inline-edit", o);
142
+ l.define("wje-inline-edit", l);
118
143
  export {
119
- o as default
144
+ l as default
120
145
  };
package/dist/wje-input.js CHANGED
@@ -152,7 +152,7 @@ class f extends A {
152
152
  let a = this.hasSlot(this, "start"), g = this.hasSlot(this, "end"), y = this.hasSlot(this, "error"), w = document.createDocumentFragment(), i = document.createElement("div");
153
153
  i.setAttribute("part", "native"), i.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && i.classList.add("has-error");
154
154
  let s = document.createElement("div");
155
- s.classList.add("wrapper"), i.appendChild(s);
155
+ s.classList.add("wrapper");
156
156
  let p = document.createElement("div");
157
157
  p.classList.add("input-wrapper");
158
158
  let h = document.createElement("label");
@@ -165,15 +165,15 @@ class f extends A {
165
165
  d.classList.add("error-message"), d.setAttribute("part", "error");
166
166
  let c = null;
167
167
  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);
168
- let v = null;
169
- a && (v = document.createElement("slot"), v.setAttribute("name", "start"));
170
168
  let b = null;
171
- 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")) {
169
+ a && (b = document.createElement("slot"), b.setAttribute("name", "start"), b.setAttribute("part", "start"));
170
+ let v = null;
171
+ 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")) {
172
172
  this.clear = document.createElement("wje-button"), this.clear.classList.add("clear"), this.clear.setAttribute("fill", "link"), this.clear.setAttribute("part", "clear");
173
173
  let u = document.createElement("wje-icon");
174
174
  u.setAttribute("name", "x"), this.clear.appendChild(u), p.appendChild(this.clear);
175
175
  }
176
- 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;
176
+ 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;
177
177
  }
178
178
  /**
179
179
  * Runs after the input is drawn.
package/dist/wje-item.js CHANGED
@@ -26,7 +26,7 @@ class a extends m {
26
26
  return this.hostContext("wje-list", this) && this.classList.add("wje-item-list"), `<${o} class="item-native" part="native">
27
27
  <slot name="start"></slot>
28
28
  <div class="item-inner">
29
- <div class="input-wrapper">
29
+ <div class="input-wrapper" part="inner">
30
30
  <slot></slot>
31
31
  </div>
32
32
  <slot name="end"></slot>
package/dist/wje-master.js CHANGED
@@ -1,95 +1,95 @@
1
1
  var y = Object.defineProperty;
2
- var C = (c, n, e) => n in c ? y(c, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[n] = e;
3
- var f = (c, n, e) => (C(c, typeof n != "symbol" ? n + "" : n, e), e);
4
- import x from "./wje-element.js";
2
+ var C = (o, n, e) => n in o ? y(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
3
+ var f = (o, n, e) => (C(o, typeof n != "symbol" ? n + "" : n, e), e);
4
+ import g from "./wje-element.js";
5
5
  import { event as q } from "./wje-element.js";
6
- import { defaultStoreActions as D, store as F } from "./wje-store.js";
6
+ import { defaultStoreActions as P, store as U } from "./wje-store.js";
7
7
  import { b as V, w as $ } from "./router-links-FtZbFUto.js";
8
- import { fetchAndParseCSS as U } from "./wje-fetchAndParseCSS.js";
9
- import { Localizer as S } from "./localize.js";
10
- import { default as J } from "./wje-accordion.js";
8
+ import { fetchAndParseCSS as W } from "./wje-fetchAndParseCSS.js";
9
+ import { Localizer as j } from "./localize.js";
10
+ import { default as Q } from "./wje-accordion.js";
11
11
  import { default as K } from "./wje-accordion-item.js";
12
- import { default as Y } from "./wje-animation.js";
13
- import { default as _ } from "./wje-aside.js";
14
- import { default as te } from "./wje-avatar.js";
15
- import { default as ae } from "./wje-badge.js";
16
- import { default as se } from "./wje-breadcrumb.js";
17
- import { default as ne } from "./wje-breadcrumbs.js";
18
- import { default as de } from "./wje-button.js";
19
- import { default as pe } from "./wje-button-group.js";
20
- import { default as ue } from "./wje-card.js";
21
- import { default as he } from "./wje-card-content.js";
12
+ import { default as Z } from "./wje-animation.js";
13
+ import { default as ee } from "./wje-aside.js";
14
+ import { default as re } from "./wje-avatar.js";
15
+ import { default as oe } from "./wje-badge.js";
16
+ import { default as ie } from "./wje-breadcrumb.js";
17
+ import { default as le } from "./wje-breadcrumbs.js";
18
+ import { default as ce } from "./wje-button.js";
19
+ import { default as me } from "./wje-button-group.js";
20
+ import { default as fe } from "./wje-card.js";
21
+ import { default as ge } from "./wje-card-content.js";
22
22
  import { default as ve } from "./wje-card-controls.js";
23
- import { default as we } from "./wje-card-header.js";
23
+ import { default as be } from "./wje-card-header.js";
24
24
  import { default as je } from "./wje-card-subtitle.js";
25
- import { default as ye } from "./wje-card-title.js";
26
- import { default as Ae } from "./wje-carousel.js";
27
- import { default as Le } from "./wje-carousel-item.js";
25
+ import { default as Ce } from "./wje-card-title.js";
26
+ import { default as Ee } from "./wje-carousel.js";
27
+ import { default as Me } from "./wje-carousel-item.js";
28
28
  import { default as Te } from "./wje-checkbox.js";
29
- import { default as Be } from "./wje-chip.js";
30
- import { default as Ie } from "./wje-col.js";
31
- import { default as He } from "./wje-color-picker.js";
29
+ import { default as He } from "./wje-chip.js";
30
+ import { default as De } from "./wje-col.js";
31
+ import { default as Ne } from "./wje-color-picker.js";
32
32
  import { default as qe } from "./wje-container.js";
33
- import { default as De } from "./wje-copy-button.js";
33
+ import { default as Pe } from "./wje-copy-button.js";
34
34
  import { default as Ge } from "./wje-dialog.js";
35
35
  import { default as $e } from "./wje-divider.js";
36
- import { default as Ue } from "./wje-dropdown.js";
37
- import { default as Je } from "./wje-file-upload.js";
36
+ import { default as We } from "./wje-dropdown.js";
37
+ import { default as Qe } from "./wje-file-upload.js";
38
38
  import { default as Ke } from "./wje-file-upload-item.js";
39
- import { default as Ye } from "./wje-footer.js";
40
- import { default as _e } from "./wje-format-digital.js";
41
- import { default as tt } from "./wje-grid.js";
42
- import { default as at } from "./wje-header.js";
43
- import { default as st } from "./wje-icon.js";
44
- import { default as nt } from "./wje-icon-picker.js";
45
- import { default as dt } from "./wje-img.js";
46
- import { default as pt } from "./wje-img-comparer.js";
47
- import { default as ut } from "./wje-infinite-scroll.js";
48
- import { default as ht } from "./wje-inline-edit.js";
39
+ import { default as Ze } from "./wje-footer.js";
40
+ import { default as et } from "./wje-format-digital.js";
41
+ import { default as rt } from "./wje-grid.js";
42
+ import { default as ot } from "./wje-header.js";
43
+ import { default as it } from "./wje-icon.js";
44
+ import { default as lt } from "./wje-icon-picker.js";
45
+ import { default as ct } from "./wje-img.js";
46
+ import { default as mt } from "./wje-img-comparer.js";
47
+ import { default as ft } from "./wje-infinite-scroll.js";
48
+ import { default as gt } from "./wje-inline-edit.js";
49
49
  import { default as vt } from "./wje-input.js";
50
- import { default as wt } from "./wje-input-file.js";
50
+ import { default as bt } from "./wje-input-file.js";
51
51
  import { default as jt } from "./wje-item.js";
52
- import { default as yt } from "./wje-label.js";
53
- import { default as At } from "./wje-list.js";
54
- import { default as Lt } from "./wje-main.js";
52
+ import { default as Ct } from "./wje-label.js";
53
+ import { default as Et } from "./wje-list.js";
54
+ import { default as Mt } from "./wje-main.js";
55
55
  import { default as Tt } from "./wje-masonry.js";
56
- import { default as Bt } from "./wje-menu.js";
57
- import { default as It } from "./wje-menu-button.js";
58
- import { default as Ht } from "./wje-menu-item.js";
56
+ import { default as Ht } from "./wje-menu.js";
57
+ import { default as Dt } from "./wje-menu-button.js";
58
+ import { default as Nt } from "./wje-menu-item.js";
59
59
  import { default as qt } from "./wje-menu-label.js";
60
- import { default as Dt } from "./wje-option.js";
60
+ import { default as Pt } from "./wje-option.js";
61
61
  import { default as Gt } from "./wje-options.js";
62
62
  import "./wje-popup.js";
63
63
  import { default as $t } from "./wje-progress-bar.js";
64
- import { default as Ut } from "./wje-qr-code.js";
65
- import { default as Jt } from "./wje-radio.js";
64
+ import { default as Wt } from "./wje-qr-code.js";
65
+ import { default as Qt } from "./wje-radio.js";
66
66
  import { default as Kt } from "./wje-radio-group.js";
67
- import { default as Yt } from "./wje-rate.js";
68
- import { default as _t } from "./wje-relative-time.js";
69
- import { default as tr } from "./wje-reorder.js";
70
- import { default as ar } from "./wje-reorder-dropzone.js";
71
- import { default as sr } from "./wje-reorder-handle.js";
72
- import { default as nr } from "./wje-reorder-item.js";
73
- import { default as dr } from "./wje-route.js";
74
- import { default as pr } from "./wje-routerx.js";
75
- import { default as ur } from "./wje-router-link.js";
76
- import { default as hr } from "./wje-router-outlet.js";
67
+ import { default as Zt } from "./wje-rate.js";
68
+ import { default as er } from "./wje-relative-time.js";
69
+ import { default as rr } from "./wje-reorder.js";
70
+ import { default as or } from "./wje-reorder-dropzone.js";
71
+ import { default as ir } from "./wje-reorder-handle.js";
72
+ import { default as lr } from "./wje-reorder-item.js";
73
+ import { default as cr } from "./wje-route.js";
74
+ import { default as mr } from "./wje-routerx.js";
75
+ import { default as fr } from "./wje-router-link.js";
76
+ import { default as gr } from "./wje-router-outlet.js";
77
77
  import { default as vr } from "./wje-row.js";
78
- import { default as wr } from "./wje-select.js";
78
+ import { default as br } from "./wje-select.js";
79
79
  import { default as jr } from "./wje-slider.js";
80
- import { default as yr } from "./wje-split-view.js";
81
- import { default as Ar } from "./wje-status.js";
82
- import { default as Lr } from "./wje-tab.js";
80
+ import { default as Cr } from "./wje-split-view.js";
81
+ import { default as Er } from "./wje-status.js";
82
+ import { default as Mr } from "./wje-tab.js";
83
83
  import { default as Tr } from "./wje-tab-group.js";
84
- import { default as Br } from "./wje-tab-panel.js";
85
- import { default as Ir } from "./wje-textarea.js";
86
- import { default as Hr } from "./wje-thumbnail.js";
84
+ import { default as Hr } from "./wje-tab-panel.js";
85
+ import { default as Dr } from "./wje-textarea.js";
86
+ import { default as Nr } from "./wje-thumbnail.js";
87
87
  import { default as qr } from "./wje-toast.js";
88
- import { default as Dr } from "./wje-toggle.js";
88
+ import { default as Pr } from "./wje-toggle.js";
89
89
  import { default as Gr } from "./wje-toolbar.js";
90
90
  import { default as $r } from "./wje-toolbar-action.js";
91
- import { default as Ur } from "./wje-tooltip.js";
92
- import { default as Jr } from "./wje-visually-hidden.js";
91
+ import { default as Wr } from "./wje-tooltip.js";
92
+ import { default as Qr } from "./wje-visually-hidden.js";
93
93
  import { P as Kr } from "./popup.element-CWsSOxs2.js";
94
94
  const A = {
95
95
  code: "sk",
@@ -100,7 +100,7 @@ const A = {
100
100
  "wj.file.upload.uploaded": "Nahraných: ",
101
101
  "wj.file.upload.from": "z"
102
102
  };
103
- S.registerTranslation(A);
103
+ j.registerTranslation(A);
104
104
  const E = {
105
105
  code: "en",
106
106
  name: "English",
@@ -110,9 +110,9 @@ const E = {
110
110
  "wj.file.upload.uploaded": "Uploaded: ",
111
111
  "wj.file.upload.from": "from"
112
112
  };
113
- S.registerTranslation(E);
113
+ j.registerTranslation(E);
114
114
  const L = "";
115
- class g extends x {
115
+ class v extends g {
116
116
  constructor() {
117
117
  super();
118
118
  f(this, "className", "Step");
@@ -124,54 +124,54 @@ class g extends x {
124
124
  this.isShadowRoot = "open";
125
125
  }
126
126
  draw() {
127
- let e = document.createDocumentFragment(), a = document.createElement("div");
128
- const o = document.createElement("slot");
129
- return a.appendChild(o), e.appendChild(a), e;
127
+ let e = document.createDocumentFragment(), r = document.createElement("div");
128
+ const s = document.createElement("slot");
129
+ return r.appendChild(s), e.appendChild(r), e;
130
130
  }
131
131
  }
132
- g.define("wje-step", g);
133
- const R = ".stepper-container{display:flex;flex-direction:column}.step-headers{display:flex;justify-content:space-between;margin-bottom:var(--wje-spacing-medium)}.step-header{display:flex;padding:var(--wje-spacing-medium);gap:var(--wje-spacing-x-small);color:var(--wje-color-contrast-5);flex-grow:1;text-align:center}.pointer{cursor:pointer}.active{color:var(--wje-color-contrast-11)}.steps-content{margin-bottom:var(--wje-spacing-medium)}.arrow-icon{margin-top:var(--wje-stepper-margin)}.step{padding:var(--wje-spacing-medium);text-align:center}.done{color:var(--wje-color-contrast-11)}.nav-buttons{display:flex;justify-content:space-between}";
134
- class w extends x {
132
+ v.define("wje-step", v);
133
+ const M = ".stepper-container{display:flex;flex-direction:column}.step-headers{display:flex;justify-content:space-between;margin-bottom:var(--wje-spacing-medium)}.step-header{display:flex;padding:var(--wje-spacing-medium);gap:var(--wje-spacing-x-small);color:var(--wje-color-contrast-5);flex-grow:1;text-align:center}.pointer{cursor:pointer}.active{color:var(--wje-color-contrast-11)}.steps-content{margin-bottom:var(--wje-spacing-medium)}.arrow-icon{margin-top:var(--wje-stepper-margin)}.step{padding:var(--wje-spacing-medium);text-align:center}.done{color:var(--wje-color-contrast-11)}.nav-buttons{display:flex;justify-content:space-between}";
134
+ class w extends g {
135
135
  constructor() {
136
136
  super();
137
137
  f(this, "className", "Stepper");
138
138
  this.currentStep = 0, this.completedSteps = [];
139
139
  }
140
140
  static get cssStyleSheet() {
141
- return R;
141
+ return M;
142
142
  }
143
143
  setupAttributes() {
144
144
  this.isShadowRoot = "open";
145
145
  }
146
146
  draw() {
147
147
  let e = document.createDocumentFragment();
148
- const a = document.createElement("div");
149
- a.className = "stepper-container";
150
- const o = document.createElement("div");
151
- o.className = "step-headers";
152
148
  const r = document.createElement("div");
153
- r.className = "steps-content";
149
+ r.className = "stepper-container";
150
+ const s = document.createElement("div");
151
+ s.className = "step-headers";
152
+ const a = document.createElement("div");
153
+ a.className = "steps-content";
154
154
  const t = Array.from(this.children);
155
- this.steps = t.map((d, i) => {
156
- if (d.nodeName === "WJE-STEP") {
157
- const m = document.createElement("div");
158
- m.className = "step-header";
155
+ this.steps = t.map((c, m) => {
156
+ if (c.nodeName === "WJE-STEP") {
157
+ const i = document.createElement("div");
158
+ i.className = "step-header";
159
159
  const u = document.createElement("wje-badge");
160
- u.className = "step-badge", u.setAttribute("label", (i + 1).toString()), u.innerHTML = "12";
161
- const v = document.createElement("span");
162
- if (v.innerText = d.getAttribute("label") || `Step ${i + 1}`, i === this.currentStep && (m.classList.add("active"), u.setAttribute("color", "primary")), d.hasAttribute("disabled") || (m.addEventListener("click", () => this.gotoStep(i)), m.classList.add("pointer")), m.appendChild(u), m.appendChild(v), o.appendChild(m), i < t.length - 1) {
160
+ u.className = "step-badge", u.setAttribute("label", (m + 1).toString()), u.innerHTML = "12";
161
+ const x = document.createElement("span");
162
+ if (x.innerText = c.getAttribute("label") || `Step ${m + 1}`, m === this.currentStep && (i.classList.add("active"), u.setAttribute("color", "primary")), c.hasAttribute("disabled") || (i.addEventListener("click", () => this.gotoStep(m)), i.classList.add("pointer")), i.appendChild(u), i.appendChild(x), s.appendChild(i), m < t.length - 1) {
163
163
  const h = document.createElement("wje-icon");
164
- h.setAttribute("name", "chevron-right"), h.classList.add("arrow-icon"), h.setAttribute("size", "small"), o.appendChild(h);
164
+ h.setAttribute("name", "chevron-right"), h.classList.add("arrow-icon"), h.setAttribute("size", "small"), s.appendChild(h);
165
165
  }
166
- return d.classList.add("step"), i !== this.currentStep && (d.style.display = "none"), d;
166
+ return c.classList.add("step"), m !== this.currentStep && (c.style.display = "none"), c;
167
167
  }
168
- }), this.steps.forEach((d) => r.appendChild(d));
169
- const s = document.createElement("div");
170
- s.className = "nav-buttons";
171
- const l = document.createElement("wje-button");
172
- l.setAttribute("label", "Previous"), l.disabled = this.currentStep === 0, l.addEventListener("click", () => this.navigate(-1)), l.innerHTML = "Prev";
168
+ }), this.steps.forEach((c) => a.appendChild(c));
169
+ const l = document.createElement("div");
170
+ l.className = "nav-buttons";
171
+ const d = document.createElement("wje-button");
172
+ d.setAttribute("label", "Previous"), d.disabled = this.currentStep === 0, d.addEventListener("click", () => this.navigate(-1)), d.innerHTML = "Prev";
173
173
  const p = document.createElement("wje-button");
174
- return p.setAttribute("label", "Next"), p.disabled = this.currentStep === this.steps.length - 1, p.addEventListener("click", () => this.navigate(1)), p.innerHTML = "Next", s.appendChild(l), s.appendChild(p), a.appendChild(o), a.appendChild(r), a.appendChild(s), e.appendChild(a), e;
174
+ return p.setAttribute("label", "Next"), p.disabled = this.currentStep === this.steps.length - 1, p.addEventListener("click", () => this.navigate(1)), p.innerHTML = "Next", l.appendChild(d), l.appendChild(p), r.appendChild(s), r.appendChild(a), r.appendChild(l), e.appendChild(r), e;
175
175
  }
176
176
  navigate(e) {
177
177
  this.gotoStep(this.currentStep + e);
@@ -179,31 +179,31 @@ class w extends x {
179
179
  gotoStep(e) {
180
180
  if (e >= 0 && e < this.steps.length) {
181
181
  e > this.currentStep && (this.completedSteps[this.currentStep] = !0), this.steps[this.currentStep].style.display = "none", this.steps[e].style.display = "block";
182
- const a = this.shadowRoot.querySelectorAll(".step-header");
183
- a[this.currentStep].classList.remove("active"), a[this.currentStep].classList.add("done"), a[e].classList.add("active");
184
- const o = this.shadowRoot.querySelectorAll("wje-badge");
185
- o[this.currentStep].shadowRoot.querySelector("div").classList.remove("wje-color-primary"), this.currentStep = e, o[this.currentStep].shadowRoot.querySelector("div").classList.add("wje-color-primary");
186
- const r = this.shadowRoot.querySelectorAll("wje-button");
187
- r[0].disabled = this.currentStep === 0, r[1].disabled = this.currentStep === this.steps.length - 1, this.updateBadges();
182
+ const r = this.shadowRoot.querySelectorAll(".step-header");
183
+ r[this.currentStep].classList.remove("active"), r[this.currentStep].classList.add("done"), r[e].classList.add("active");
184
+ const s = this.shadowRoot.querySelectorAll("wje-badge");
185
+ s[this.currentStep].shadowRoot.querySelector("div").classList.remove("wje-color-primary"), this.currentStep = e, s[this.currentStep].shadowRoot.querySelector("div").classList.add("wje-color-primary");
186
+ const a = this.shadowRoot.querySelectorAll("wje-button");
187
+ a[0].disabled = this.currentStep === 0, a[1].disabled = this.currentStep === this.steps.length - 1, this.updateBadges();
188
188
  }
189
189
  }
190
190
  updateBadges() {
191
- this.shadowRoot.querySelectorAll(".step-header").forEach((a, o) => {
192
- const r = a.querySelector("wje-badge");
193
- if (this.completedSteps[o]) {
194
- if (!r.querySelector("wje-status")) {
195
- r.innerHTML = "";
191
+ this.shadowRoot.querySelectorAll(".step-header").forEach((r, s) => {
192
+ const a = r.querySelector("wje-badge");
193
+ if (this.completedSteps[s]) {
194
+ if (!a.querySelector("wje-status")) {
195
+ a.innerHTML = "";
196
196
  const t = document.createElement("wje-icon");
197
- t.setAttribute("name", "check"), t.setAttribute("color", "success"), t.setAttribute("size", "medium"), r.shadowRoot.querySelector("div").classList.add("wje-color-success"), r.appendChild(t);
197
+ t.setAttribute("name", "check"), t.setAttribute("color", "success"), t.setAttribute("size", "medium"), a.shadowRoot.querySelector("div").classList.add("wje-color-success"), a.appendChild(t);
198
198
  }
199
199
  } else
200
- r.innerHTML = "12";
200
+ a.innerHTML = "12";
201
201
  });
202
202
  }
203
203
  }
204
204
  w.define("wje-stepper", w);
205
- const T = ".native-timeline{position:relative}.vertical-line{position:absolute;margin-left:calc(var(--wje-spacing-x-large) + 1px);top:0;bottom:0;width:1px;background-color:var(--wje-color-info-3)}";
206
- class b extends x {
205
+ const R = ".native-timeline{position:relative}.vertical-line{position:absolute;margin-left:calc(var(--wje-spacing-x-large) + 1px);top:0;bottom:0;width:1px;background-color:var(--wje-color-info-3)}";
206
+ class b extends g {
207
207
  constructor() {
208
208
  super();
209
209
  /**
@@ -220,7 +220,7 @@ class b extends x {
220
220
  * @returns {CSSStyleSheet}
221
221
  */
222
222
  static get cssStyleSheet() {
223
- return T;
223
+ return R;
224
224
  }
225
225
  /**
226
226
  * Sets up the attributes for the component.
@@ -236,19 +236,44 @@ class b extends x {
236
236
  * @param {Object} params - The parameters for drawing.
237
237
  * @returns {DocumentFragment}
238
238
  */
239
- draw(e, a, o) {
240
- let r = document.createDocumentFragment();
239
+ draw(e, r, s) {
240
+ let a = document.createDocumentFragment();
241
241
  const t = document.createElement("div");
242
242
  t.setAttribute("part", "native"), t.classList.add("native-timeline");
243
- const s = document.createElement("div");
244
- s.classList.add("vertical-line");
245
- const l = document.createElement("slot");
246
- return t.appendChild(s), t.appendChild(l), r.appendChild(t), r;
243
+ const l = document.createElement("div");
244
+ l.classList.add("vertical-line");
245
+ const d = document.createElement("slot");
246
+ return t.appendChild(l), t.appendChild(d), a.appendChild(t), a;
247
247
  }
248
248
  }
249
249
  b.define("wje-timeline", b);
250
+ function T(o, n) {
251
+ let e;
252
+ if (typeof o == "string")
253
+ e = new Date(o);
254
+ else if (typeof o == "number")
255
+ e = new Date(o);
256
+ else if (o instanceof Date)
257
+ e = o;
258
+ else
259
+ throw new Error("Invalid date input");
260
+ const r = {
261
+ yyyy: e.getFullYear(),
262
+ MM: String(e.getMonth() + 1).padStart(2, "0"),
263
+ // Mesiace sú indexované od 0
264
+ dd: String(e.getDate()).padStart(2, "0"),
265
+ HH: String(e.getHours()).padStart(2, "0"),
266
+ mm: String(e.getMinutes()).padStart(2, "0"),
267
+ ss: String(e.getSeconds()).padStart(2, "0"),
268
+ MMMM: e.toLocaleString("en-US", { month: "long" }),
269
+ // Full month name
270
+ MMM: e.toLocaleString("en-US", { month: "short" })
271
+ // Short month name
272
+ };
273
+ return n.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (s) => r[s]);
274
+ }
250
275
  const k = ":host{--wje-card-content-padding: var(--wje-spacing-medium);margin-bottom:.5rem;display:block}.native-timeline-item>wje-icon{color:var(--wje-color-contrast-5)!important}.timeline-items{display:flex;flex-direction:column}.native-timeline-item{display:flex;position:relative;padding:var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);gap:var(--wje-spacing-medium);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--wje-border-radius-large)}:host .native-timeline-item:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-3)}:host([active]) .native-timeline-item{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-3)}:host([active]) .native-timeline-item:hover{background-color:var(--wje-color-primary-2)}.icon-container{position:absolute;display:flex;width:var(--wje-size-small);height:var(--wje-size-small);padding:var(--wje-spacing-2x-small);border-radius:var(--wje-border-radius-circle);opacity:0}.content-container{height:fit-content;gap:var(--wje-spacing-small)}.event{margin:0;font-size:var(--wje-font-size-large);font-weight:var(--wje-font-weight-bold);line-height:var(--wje-line-height-dense);letter-spacing:var(--wje-spacing-4x-small)}.additional-content{font-size:var(--wje-font-size-medium);margin-top:1rem}wje-status{position:relative;z-index:1}wje-relative-time{display:block;margin-bottom:var(--wje-spacing-2x-small)}";
251
- class j extends x {
276
+ class S extends g {
252
277
  constructor() {
253
278
  super();
254
279
  /**
@@ -271,7 +296,7 @@ class j extends x {
271
296
  * Sets up the attributes for the component.
272
297
  */
273
298
  setupAttributes() {
274
- this.isShadowRoot = "open";
299
+ this.isShadowRoot = "open", this.setAttribute("relative-time", "");
275
300
  }
276
301
  /**
277
302
  * Draws the component.
@@ -281,114 +306,116 @@ class j extends x {
281
306
  * @param {Object} params - The parameters for drawing.
282
307
  * @returns {DocumentFragment}
283
308
  */
284
- draw(e, a, o) {
285
- let r = document.createDocumentFragment(), t = document.createElement("div");
309
+ draw(e, r, s) {
310
+ let a = document.createDocumentFragment(), t = document.createElement("div");
286
311
  t.setAttribute("part", "native"), t.classList.add("native-timeline-item");
287
- let s = document.createElement("div");
288
- s.classList.add("content-container");
289
- let l = document.createElement("wje-relative-time");
290
- l.setAttribute("date", this.getAttribute("datetime") || "");
291
- let p = document.createElement("h3");
292
- p.classList.add("event"), p.textContent = this.getAttribute("event") || "";
293
- let d = document.createElement("slot"), i = document.createElement("wje-icon");
294
- return i.setAttribute("name", "circle-dot"), i.setAttribute("filled", ""), i.setAttribute("part", "default-icon"), this.querySelector('[slot="status"]') && (i = document.createElement("slot"), i.setAttribute("name", "status")), s.appendChild(l), s.appendChild(p), s.appendChild(d), t.appendChild(i), t.appendChild(s), r.appendChild(t), r;
312
+ let l = document.createElement("div");
313
+ l.classList.add("content-container");
314
+ let d = document.createElement("wje-tooltip");
315
+ d.setAttribute("text", this.getAttribute("tooltip") || ""), d.setAttribute("position", "top"), d.setAttribute("content", T(this.datetime, "dd.MM.yyyy HH:mm"));
316
+ let p = document.createElement("wje-relative-time");
317
+ p.setAttribute("date", this.datetime || ""), p.setAttribute("format", this.getAttribute("format") || ""), d.appendChild(p);
318
+ let c = document.createElement("h3");
319
+ c.classList.add("event"), c.textContent = this.getAttribute("event") || "";
320
+ let m = document.createElement("slot"), i = document.createElement("wje-icon");
321
+ return i.setAttribute("name", "circle-dot"), i.setAttribute("filled", ""), i.setAttribute("part", "default-icon"), this.querySelector('[slot="status"]') && (i = document.createElement("slot"), i.setAttribute("name", "status")), l.appendChild(d), l.appendChild(c), l.appendChild(m), t.appendChild(i), t.appendChild(l), a.appendChild(t), a;
295
322
  }
296
323
  }
297
- j.define("wje-timeline-item", j);
324
+ S.define("wje-timeline-item", S);
298
325
  export {
299
- J as Accordion,
326
+ Q as Accordion,
300
327
  K as AccordionItem,
301
- Y as Animation,
302
- _ as Aside,
303
- te as Avatar,
304
- ae as Badge,
305
- se as Breadcrumb,
306
- ne as Breadcrumbs,
307
- de as Button,
308
- pe as ButtonGroup,
309
- ue as Card,
310
- he as CardContent,
328
+ Z as Animation,
329
+ ee as Aside,
330
+ re as Avatar,
331
+ oe as Badge,
332
+ ie as Breadcrumb,
333
+ le as Breadcrumbs,
334
+ ce as Button,
335
+ me as ButtonGroup,
336
+ fe as Card,
337
+ ge as CardContent,
311
338
  ve as CardControls,
312
- we as CardHeader,
339
+ be as CardHeader,
313
340
  je as CardSubtitle,
314
- ye as CardTitle,
315
- Ae as Carousel,
316
- Le as CarouselItem,
341
+ Ce as CardTitle,
342
+ Ee as Carousel,
343
+ Me as CarouselItem,
317
344
  Te as Checkbox,
318
- Be as Chip,
319
- Ie as Col,
320
- He as ColorPicker,
345
+ He as Chip,
346
+ De as Col,
347
+ Ne as ColorPicker,
321
348
  qe as Container,
322
- De as CopyButton,
349
+ Pe as CopyButton,
323
350
  Ge as Dialog,
324
351
  $e as Divider,
325
- Ue as Dropdown,
326
- Je as FileUpload,
352
+ We as Dropdown,
353
+ Qe as FileUpload,
327
354
  Ke as FileUploadItem,
328
- Ye as Footer,
329
- _e as FormatDigital,
330
- tt as Grid,
331
- at as Header,
332
- st as Icon,
333
- nt as IconPicker,
334
- dt as Img,
335
- pt as ImgComparer,
336
- ut as InfiniteScroll,
337
- ht as InlineEdit,
355
+ Ze as Footer,
356
+ et as FormatDigital,
357
+ rt as Grid,
358
+ ot as Header,
359
+ it as Icon,
360
+ lt as IconPicker,
361
+ ct as Img,
362
+ mt as ImgComparer,
363
+ ft as InfiniteScroll,
364
+ gt as InlineEdit,
338
365
  vt as Input,
339
- wt as InputFile,
366
+ bt as InputFile,
340
367
  jt as Item,
341
- yt as Label,
342
- At as List,
343
- S as Localizer,
344
- Lt as Main,
368
+ Ct as Label,
369
+ Et as List,
370
+ j as Localizer,
371
+ Mt as Main,
345
372
  Tt as Masonry,
346
- Bt as Menu,
347
- It as MenuButton,
348
- Ht as MenuItem,
373
+ Ht as Menu,
374
+ Dt as MenuButton,
375
+ Nt as MenuItem,
349
376
  qt as MenuLabel,
350
- Dt as Option,
377
+ Pt as Option,
351
378
  Gt as Options,
352
379
  Kr as Popup,
353
380
  $t as ProgressBar,
354
- Ut as QrCode,
355
- Jt as Radio,
381
+ Wt as QrCode,
382
+ Qt as Radio,
356
383
  Kt as RadioGroup,
357
- Yt as Rate,
358
- _t as RelativeTime,
359
- tr as Reorder,
360
- ar as ReorderDropzone,
361
- sr as ReorderHandle,
362
- nr as ReorderItem,
363
- dr as Route,
364
- ur as RouterLink,
365
- hr as RouterOutlet,
366
- pr as Routerx,
384
+ Zt as Rate,
385
+ er as RelativeTime,
386
+ rr as Reorder,
387
+ or as ReorderDropzone,
388
+ ir as ReorderHandle,
389
+ lr as ReorderItem,
390
+ cr as Route,
391
+ fr as RouterLink,
392
+ gr as RouterOutlet,
393
+ mr as Routerx,
367
394
  vr as Row,
368
- wr as Select,
395
+ br as Select,
369
396
  jr as Slider,
370
- yr as SplitView,
371
- Ar as Status,
372
- g as Step,
397
+ Cr as SplitView,
398
+ Er as Status,
399
+ v as Step,
373
400
  w as Stepper,
374
- Lr as Tab,
401
+ Mr as Tab,
375
402
  Tr as TabGroup,
376
- Br as TabPanel,
377
- Ir as Textarea,
378
- Hr as Thumbnail,
403
+ Hr as TabPanel,
404
+ Dr as Textarea,
405
+ Nr as Thumbnail,
379
406
  b as Timeline,
380
- j as TimelineItem,
407
+ S as TimelineItem,
381
408
  qr as Toast,
382
- Dr as Toggle,
409
+ Pr as Toggle,
383
410
  Gr as Toolbar,
384
411
  $r as ToolbarAction,
385
- Ur as Tooltip,
386
- Jr as VisuallyHidden,
387
- x as WJElement,
412
+ Wr as Tooltip,
413
+ Qr as VisuallyHidden,
414
+ g as WJElement,
388
415
  V as bindRouterLinks,
389
- D as defaultStoreActions,
416
+ P as defaultStoreActions,
390
417
  q as event,
391
- U as fetchAndParseCSS,
392
- F as store,
418
+ W as fetchAndParseCSS,
419
+ U as store,
393
420
  $ as withRouterLinks
394
421
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "wj-elements",
3
3
  "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
4
- "version": "0.1.43",
4
+ "version": "0.1.44",
5
5
  "homepage": "https://github.com/lencys/wj-elements",
6
6
  "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
7
7
  "license": "MIT",