wj-elements 0.1.43 → 0.1.45
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.
- package/dist/wje-button.js +9 -9
- package/dist/wje-dialog.js +20 -20
- package/dist/wje-infinite-scroll.js +63 -55
- package/dist/wje-inline-edit.js +57 -32
- package/dist/wje-input.js +5 -5
- package/dist/wje-item.js +1 -1
- package/dist/wje-master.js +231 -202
- package/dist/wje-menu-item.js +5 -0
- package/dist/wje-sliding-container.js +245 -0
- package/package.json +1 -2
package/dist/wje-button.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var j = Object.defineProperty;
|
|
2
|
-
var g = (e,
|
|
3
|
-
var s = (e,
|
|
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:
|
|
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
|
|
164
|
-
|
|
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
|
|
169
|
-
|
|
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
|
|
176
|
-
|
|
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
|
|
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
|
|
7
|
+
class c extends v {
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
10
|
s(this, "className", "Dialog");
|
|
11
|
-
s(this, "onOpen", (
|
|
12
|
-
|
|
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", (
|
|
17
|
-
Promise.resolve(this.beforeClose(this)).then((
|
|
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,
|
|
44
|
-
let
|
|
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
|
|
49
|
-
|
|
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(
|
|
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
|
|
57
|
-
|
|
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
|
|
63
|
-
return
|
|
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,
|
|
69
|
-
this.button = document.querySelector(`[dialog=${r.trigger}]`), r.trigger &&
|
|
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
|
-
|
|
80
|
+
h.removeElement(this.button), h.removeElement(this.dialog);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
c.define("wje-dialog", c);
|
|
84
84
|
export {
|
|
85
|
-
|
|
85
|
+
c as default
|
|
86
86
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
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(
|
|
13
|
+
constructor(e = {}) {
|
|
14
14
|
super();
|
|
15
|
-
|
|
15
|
+
o(this, "className", "InfiniteScroll");
|
|
16
16
|
/**
|
|
17
17
|
* Adds the scroll event listener.
|
|
18
18
|
*/
|
|
19
|
-
|
|
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
|
-
|
|
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
|
-
|
|
34
|
-
const { scrollTop:
|
|
35
|
-
|
|
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
|
-
|
|
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
|
|
41
|
-
let c =
|
|
42
|
-
c.split(".").forEach((
|
|
43
|
-
|
|
44
|
-
}), i = i.replace(
|
|
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(
|
|
50
|
-
this._infiniteScrollTemplate =
|
|
63
|
+
set infiniteScrollTemplate(e) {
|
|
64
|
+
this._infiniteScrollTemplate = e;
|
|
51
65
|
}
|
|
52
66
|
get infiniteScrollTemplate() {
|
|
53
67
|
return this._infiniteScrollTemplate;
|
|
54
68
|
}
|
|
55
|
-
set response(
|
|
56
|
-
this._response =
|
|
69
|
+
set response(e) {
|
|
70
|
+
this._response = e;
|
|
57
71
|
}
|
|
58
72
|
get response() {
|
|
59
73
|
return this._response;
|
|
60
74
|
}
|
|
61
|
-
set objectName(
|
|
62
|
-
this.setAttribute("object-name",
|
|
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(
|
|
99
|
-
var s,
|
|
100
|
-
this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = (s = this.iterate) == null ? void 0 : s.outerHTML, (
|
|
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(
|
|
111
|
-
let s = document.createDocumentFragment(),
|
|
112
|
-
|
|
113
|
-
let c = document.createElement("slot"),
|
|
114
|
-
if (
|
|
115
|
-
let
|
|
116
|
-
|
|
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"),
|
|
132
|
+
m.setAttribute("name", "loader"), r.appendChild(m), this.loadingEl = r, s.appendChild(r);
|
|
119
133
|
}
|
|
120
|
-
return
|
|
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(
|
|
135
|
-
let
|
|
136
|
-
const i = await fetch(`${this.url}${
|
|
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
|
|
146
|
-
(
|
|
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
|
|
153
|
-
(
|
|
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(
|
|
162
|
-
return this.totalPages === 0 ||
|
|
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(
|
|
183
|
+
async loadPages(e) {
|
|
170
184
|
this.showLoader();
|
|
171
185
|
try {
|
|
172
|
-
if (this.hasMorePages(
|
|
173
|
-
let
|
|
174
|
-
typeof this.setCustomData == "function" ?
|
|
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 (
|
|
184
|
-
console.log(
|
|
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
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
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
|
-
*
|
|
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
|
|
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
|
|
57
|
+
* Sets up the attributes for the checkbox.
|
|
49
58
|
*/
|
|
50
59
|
setupAttributes() {
|
|
51
60
|
this.isShadowRoot = "open";
|
|
52
61
|
}
|
|
53
|
-
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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.
|
|
60
|
-
}), this.
|
|
61
|
-
i.preventDefault(), i.stopImmediatePropagation(), i.stopPropagation(),
|
|
62
|
-
}), this.
|
|
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.
|
|
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
|
-
|
|
142
|
+
l.define("wje-inline-edit", l);
|
|
118
143
|
export {
|
|
119
|
-
|
|
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")
|
|
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
|
-
|
|
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(
|
|
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>
|