wj-elements 0.1.49 → 0.1.50
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-img.js +11 -11
- package/dist/wje-select.js +77 -62
- package/dist/wje-sliding-container.js +21 -17
- package/package.json +1 -1
- package/dist/custom-elements.json +0 -14058
- package/dist/web-types.json +0 -3122
package/dist/wje-img.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var l = Object.defineProperty;
|
|
2
|
-
var d = (r, e,
|
|
3
|
-
var o = (r, e,
|
|
4
|
-
import
|
|
2
|
+
var d = (r, e, s) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s;
|
|
3
|
+
var o = (r, e, s) => (d(r, typeof e != "symbol" ? e + "" : e, s), s);
|
|
4
|
+
import g from "./wje-element.js";
|
|
5
5
|
const h = "img{display:block;width:var(--wje-img-width, 100%);height:var(--wje-img-height, auto);max-width:100%;object-fit:inherit;border-radius:var(--wje-img-border-radius, 0)}";
|
|
6
|
-
class m extends
|
|
6
|
+
class m extends g {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of Img.
|
|
9
9
|
*
|
|
@@ -36,20 +36,20 @@ class m extends n {
|
|
|
36
36
|
* @param {Object} params - The parameters for drawing.
|
|
37
37
|
* @returns {DocumentFragment}
|
|
38
38
|
*/
|
|
39
|
-
draw(
|
|
40
|
-
let a = document.createDocumentFragment(),
|
|
41
|
-
return
|
|
39
|
+
draw(s, n, c) {
|
|
40
|
+
let a = document.createDocumentFragment(), t = document.createElement("img");
|
|
41
|
+
return t.setAttribute("part", "native"), t.setAttribute("src", this.loader || "./assets/img/image-loader.gif"), t.setAttribute("alt", this.alt || ""), t.classList.add("lazy-loaded-image", "lazy"), this.native = t, a.appendChild(t), a;
|
|
42
42
|
}
|
|
43
43
|
/**
|
|
44
44
|
* Called after the component has been drawn.
|
|
45
45
|
*/
|
|
46
|
-
afterDraw(
|
|
47
|
-
let a = new IntersectionObserver((
|
|
48
|
-
|
|
46
|
+
afterDraw(s, n, c) {
|
|
47
|
+
let a = new IntersectionObserver((t, u) => {
|
|
48
|
+
t.forEach((i) => {
|
|
49
49
|
i.isIntersecting && (i.target.src = this.src, this.classList.remove("lazy"), a.unobserve(i.target));
|
|
50
50
|
});
|
|
51
51
|
});
|
|
52
|
-
a.observe(this.
|
|
52
|
+
a.observe(this.native);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
m.define("wje-img", m);
|
package/dist/wje-select.js
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
var E = Object.defineProperty;
|
|
2
|
+
var x = (d, n, e) => n in d ? E(d, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[n] = e;
|
|
3
|
+
var m = (d, n, e) => (x(d, typeof n != "symbol" ? n + "" : n, e), e);
|
|
4
|
+
import y, { event as C } from "./wje-element.js";
|
|
5
|
+
import L from "./wje-button.js";
|
|
6
6
|
import "./wje-popup.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
import O from "./wje-icon.js";
|
|
8
|
+
import k from "./wje-label.js";
|
|
9
|
+
import S from "./wje-chip.js";
|
|
10
|
+
import T from "./wje-input.js";
|
|
11
|
+
import z from "./wje-option.js";
|
|
12
|
+
import H from "./wje-options.js";
|
|
13
|
+
import { P as M } from "./popup.element-CWsSOxs2.js";
|
|
14
|
+
const P = ":host{--wje-select-border-width: 1px;--wje-select-border-style: solid;--wje-select-border-color: var(--wje-border-color);--wje-select-options-border-width: 1px;--wje-select-options-border-style: var(--wje-border-style);--wje-select-options-border-color: var(--wje-border-color);--wje-select-background: var(--wje-background);--wje-select-line-height: 20px;--wje-select-color: var(--wje-color);--wje-select-border-radius: var(--wje-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius);padding-inline:.5rem;padding-top:.125rem;padding-bottom:.125rem}.native-select.default .input-wrapper{padding:0;min-height:28px;margin-top:-4px}.native-select.default.focused wje-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wje-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wje-select-line-height)}.native-select.default wje-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .wrapper{border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius)}.native-select.standard .input-wrapper{background:transparent;width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wje-select-background);min-height:28px;color:var(--wje-select-color);line-height:var(--wje-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px!important;font-weight:400;vertical-align:middle}input{color:var(--wje-select-color);line-height:var(--wje-select-line-height);font-weight:400;letter-spacing:.01em;border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0;font-size:14px!important}::placeholder{opacity:1}:host [active] .wrapper{border-radius:var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.options-wrapper{border-width:var(--wje-select-options-border-width);border-style:var(--wje-select-options-border-style);border-color:var(--wje-select-options-border-color);border-radius:0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);margin-top:-1px;background:var(--wje-select-background)}.find{--wje-input-border-radius: 0;--wje-input-border-width: 0 0 1px 0}.list{overflow:auto;height:100%}.options-wrapper:has(.find) .list{height:calc(100% - 32px - .5rem)}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wje-chip{--wje-chip-margin: 0 .25rem 0 0}wje-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}";
|
|
15
|
+
class j extends y {
|
|
13
16
|
/**
|
|
14
17
|
* Creates an instance of Select.
|
|
15
18
|
*
|
|
@@ -17,23 +20,26 @@ class j extends x {
|
|
|
17
20
|
*/
|
|
18
21
|
constructor() {
|
|
19
22
|
super();
|
|
20
|
-
|
|
21
|
-
"wje-button":
|
|
22
|
-
"wje-popup":
|
|
23
|
-
"wje-icon":
|
|
24
|
-
"wje-label":
|
|
25
|
-
"wje-chip":
|
|
23
|
+
m(this, "depandencies", {
|
|
24
|
+
"wje-button": L,
|
|
25
|
+
"wje-popup": M,
|
|
26
|
+
"wje-icon": O,
|
|
27
|
+
"wje-label": k,
|
|
28
|
+
"wje-chip": S,
|
|
29
|
+
"wje-input": T,
|
|
30
|
+
"wje-option": z,
|
|
31
|
+
"wje-options": H
|
|
26
32
|
});
|
|
27
|
-
|
|
33
|
+
m(this, "className", "Select");
|
|
28
34
|
/**
|
|
29
35
|
* Handles the option change event.
|
|
30
36
|
*
|
|
31
37
|
* @param {Event} e - The event.
|
|
32
38
|
*/
|
|
33
|
-
|
|
39
|
+
m(this, "optionChange", (e) => {
|
|
34
40
|
let t = this.getAllOptions();
|
|
35
|
-
this.hasAttribute("multiple") || (t.forEach((
|
|
36
|
-
|
|
41
|
+
this.hasAttribute("multiple") || (t.forEach((i) => {
|
|
42
|
+
i.selected = !1, i.removeAttribute("selected");
|
|
37
43
|
}), this.popup.removeAttribute("active")), e.target.selected = !e.target.hasAttribute("selected"), this.selections(e.target);
|
|
38
44
|
});
|
|
39
45
|
/**
|
|
@@ -41,7 +47,7 @@ class j extends x {
|
|
|
41
47
|
*
|
|
42
48
|
* @param {Event} e - The event.
|
|
43
49
|
*/
|
|
44
|
-
|
|
50
|
+
m(this, "removeChip", (e) => {
|
|
45
51
|
let t = e.target.option;
|
|
46
52
|
t.selected = !1, t.removeAttribute("selected"), e.target.parentNode.removeChild(e.target), this.selections(null, 0);
|
|
47
53
|
});
|
|
@@ -86,7 +92,7 @@ class j extends x {
|
|
|
86
92
|
* @returns {CSSStyleSheet}
|
|
87
93
|
*/
|
|
88
94
|
static get cssStyleSheet() {
|
|
89
|
-
return
|
|
95
|
+
return P;
|
|
90
96
|
}
|
|
91
97
|
/**
|
|
92
98
|
* Returns the list of attributes to observe for changes.
|
|
@@ -111,33 +117,37 @@ class j extends x {
|
|
|
111
117
|
* @param {Object} params - The parameters for drawing.
|
|
112
118
|
* @returns {DocumentFragment}
|
|
113
119
|
*/
|
|
114
|
-
draw(e, t,
|
|
115
|
-
let
|
|
120
|
+
draw(e, t, i) {
|
|
121
|
+
let r = document.createDocumentFragment();
|
|
116
122
|
this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
|
|
117
123
|
let s = document.createElement("div");
|
|
118
124
|
s.setAttribute("part", "native"), s.classList.add("native-select", this.variant || "default");
|
|
119
|
-
let
|
|
120
|
-
|
|
121
|
-
let
|
|
122
|
-
|
|
123
|
-
let
|
|
124
|
-
|
|
125
|
+
let l = document.createElement("div");
|
|
126
|
+
l.classList.add("wrapper"), l.setAttribute("slot", "anchor");
|
|
127
|
+
let b = document.createElement("wje-label");
|
|
128
|
+
b.innerText = this.label || "";
|
|
129
|
+
let p = document.createElement("div");
|
|
130
|
+
p.classList.add("input-wrapper");
|
|
125
131
|
let o = document.createElement("input");
|
|
126
132
|
o.setAttribute("type", "text"), o.setAttribute("part", "input"), o.setAttribute("autocomplete", "off"), o.setAttribute("readonly", ""), o.setAttribute("placeholder", this.placeholder || "");
|
|
127
|
-
let w = document.createElement("wje-icon");
|
|
128
|
-
w.setAttribute("name", "chevron-down"), w.setAttribute("slot", "arrow");
|
|
129
|
-
let b = document.createElement("div");
|
|
130
|
-
b.classList.add("chips"), b.innerText = this.placeholder || "";
|
|
131
|
-
let p = document.createElement("div");
|
|
132
|
-
p.classList.add("option-wrapper"), p.style.setProperty("height", this.maxHeight || "auto");
|
|
133
|
-
let f = document.createElement("slot"), g = document.createElement("slot");
|
|
134
|
-
g.setAttribute("name", "find");
|
|
135
|
-
let h = document.createElement("wje-button");
|
|
136
|
-
h.setAttribute("fill", "link"), h.setAttribute("part", "clear");
|
|
137
133
|
let v = document.createElement("wje-icon");
|
|
138
|
-
v.setAttribute("name", "
|
|
139
|
-
let
|
|
140
|
-
|
|
134
|
+
v.setAttribute("name", "chevron-down"), v.setAttribute("slot", "arrow");
|
|
135
|
+
let w = document.createElement("div");
|
|
136
|
+
w.classList.add("chips"), w.innerText = this.placeholder || "";
|
|
137
|
+
let c = document.createElement("div");
|
|
138
|
+
c.classList.add("options-wrapper"), c.style.setProperty("height", this.maxHeight || "auto");
|
|
139
|
+
let g = document.createElement("div");
|
|
140
|
+
g.classList.add("list");
|
|
141
|
+
let A = document.createElement("slot"), h = document.createElement("wje-button");
|
|
142
|
+
h.setAttribute("fill", "link"), h.setAttribute("part", "clear");
|
|
143
|
+
let f = document.createElement("wje-icon");
|
|
144
|
+
f.setAttribute("name", "x"), h.appendChild(f);
|
|
145
|
+
let a = document.createElement("wje-popup");
|
|
146
|
+
if (a.setAttribute("placement", "bottom-start"), a.setAttribute("manual", ""), a.setAttribute("size", ""), this.hasAttribute("disabled") && a.setAttribute("disabled", ""), this.variant === "standard" ? this.hasAttribute("label") && s.appendChild(b) : l.appendChild(b), p.appendChild(o), this.hasAttribute("multiple") && p.appendChild(w), this.hasAttribute("clearable") && p.appendChild(h), p.appendChild(v), g.appendChild(A), this.hasAttribute("find")) {
|
|
147
|
+
let u = document.createElement("wje-input");
|
|
148
|
+
u.setAttribute("variant", "standard"), u.setAttribute("placeholder", "Hľadať"), u.classList.add("find"), c.appendChild(u), this.findEl = u;
|
|
149
|
+
}
|
|
150
|
+
return c.appendChild(g), l.appendChild(p), a.appendChild(l), a.appendChild(c), this.trigger === "click" && a.setAttribute("manual", ""), s.appendChild(a), this.native = s, this.popup = a, this.labelElement = b, this.input = o, this.optionsWrapper = c, this.chips = w, this.clear = h, this.list = g, r.appendChild(s), r;
|
|
141
151
|
}
|
|
142
152
|
/**
|
|
143
153
|
* Sets up the event listeners after the component is drawn.
|
|
@@ -146,17 +156,22 @@ class j extends x {
|
|
|
146
156
|
* @param {Object} store - The store for drawing.
|
|
147
157
|
* @param {Object} params - The parameters for drawing.
|
|
148
158
|
*/
|
|
149
|
-
afterDraw(e, t,
|
|
150
|
-
this.input.addEventListener("focus", (
|
|
159
|
+
afterDraw(e, t, i) {
|
|
160
|
+
this.input.addEventListener("focus", (r) => {
|
|
151
161
|
this.labelElement.classList.add("fade"), this.native.classList.add("focused");
|
|
152
|
-
}), this.input.addEventListener("blur", (
|
|
153
|
-
this.native.classList.remove("focused"),
|
|
154
|
-
}), this.addEventListener("wje:option-change", this.optionChange), this.clear.addEventListener("wje-button:click", (
|
|
162
|
+
}), this.input.addEventListener("blur", (r) => {
|
|
163
|
+
this.native.classList.remove("focused"), r.target.value || this.labelElement.classList.remove("fade");
|
|
164
|
+
}), this.addEventListener("wje:option-change", this.optionChange), this.clear.addEventListener("wje-button:click", (r) => {
|
|
155
165
|
this.getAllOptions().forEach((s) => {
|
|
156
166
|
s.selected = !1, s.removeAttribute("selected");
|
|
157
|
-
}), this.selections(),
|
|
158
|
-
}), this.selections(), this.
|
|
159
|
-
this.
|
|
167
|
+
}), this.selections(), r.stopPropagation();
|
|
168
|
+
}), this.selections(), this.list.addEventListener("wje-options:load", (r) => {
|
|
169
|
+
this.list.scrollTo(0, 0);
|
|
170
|
+
}), this.hasAttribute("find") && this.findEl instanceof HTMLElement && C.addListener(this.findEl, "keyup", "", (r) => {
|
|
171
|
+
let s = r.target.value.trim().toLowerCase();
|
|
172
|
+
this.getAllOptions().forEach((l) => {
|
|
173
|
+
l.textContent.trim().toLowerCase().includes(s) ? l.style.display = "block" : l.style.display = "none";
|
|
174
|
+
});
|
|
160
175
|
});
|
|
161
176
|
}
|
|
162
177
|
/**
|
|
@@ -183,9 +198,9 @@ class j extends x {
|
|
|
183
198
|
*/
|
|
184
199
|
getSelected(e) {
|
|
185
200
|
let t = this.getSelectedOptions();
|
|
186
|
-
return t = Array.isArray(t) ? t : Array.from(t), t = t.map((
|
|
187
|
-
value:
|
|
188
|
-
text:
|
|
201
|
+
return t = Array.isArray(t) ? t : Array.from(t), t = t.map((i) => ({
|
|
202
|
+
value: i.value,
|
|
203
|
+
text: i.textContent.trim()
|
|
189
204
|
})), t;
|
|
190
205
|
}
|
|
191
206
|
/**
|
|
@@ -196,10 +211,10 @@ class j extends x {
|
|
|
196
211
|
*/
|
|
197
212
|
selectionChanged(e = null, t = 0) {
|
|
198
213
|
if (this.hasAttribute("multiple"))
|
|
199
|
-
this.value = this.selectedOptions.map((
|
|
214
|
+
this.value = this.selectedOptions.map((i) => i).reverse(), this.placeholder && t === 0 ? (this.chips.innerHTML = this.placeholder, this.input.value = "") : this.counterEl instanceof HTMLElement || t > +this.maxOptions ? this.counter() : e != null && this.chips.appendChild(this.getChip(e));
|
|
200
215
|
else {
|
|
201
|
-
let
|
|
202
|
-
this.value =
|
|
216
|
+
let i = (e == null ? void 0 : e.textContent.trim()) || "";
|
|
217
|
+
this.value = i, this.input.value = i;
|
|
203
218
|
}
|
|
204
219
|
}
|
|
205
220
|
/**
|
|
@@ -209,8 +224,8 @@ class j extends x {
|
|
|
209
224
|
*/
|
|
210
225
|
selections(e) {
|
|
211
226
|
let t = this.getSelectedOptions();
|
|
212
|
-
this.selectedOptions = Array.isArray(t) ? t : Array.from(t), this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips.innerHTML = "", this.selectedOptions.length > 0 ? this.selectedOptions.forEach((
|
|
213
|
-
this.selectionChanged(
|
|
227
|
+
this.selectedOptions = Array.isArray(t) ? t : Array.from(t), this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips.innerHTML = "", this.selectedOptions.length > 0 ? this.selectedOptions.forEach((i, r) => {
|
|
228
|
+
this.selectionChanged(i, ++r);
|
|
214
229
|
}) : this.selectionChanged();
|
|
215
230
|
}
|
|
216
231
|
/**
|
|
@@ -232,8 +247,8 @@ class j extends x {
|
|
|
232
247
|
getChip(e) {
|
|
233
248
|
let t = document.createElement("wje-chip");
|
|
234
249
|
t.setAttribute("removable", ""), t.addEventListener("wje:chip-remove", this.removeChip), t.option = e;
|
|
235
|
-
let
|
|
236
|
-
return
|
|
250
|
+
let i = document.createElement("wje-label");
|
|
251
|
+
return i.innerText = e.textContent.trim(), t.appendChild(i), t;
|
|
237
252
|
}
|
|
238
253
|
}
|
|
239
254
|
j.define("wje-select", j);
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var p = Object.defineProperty;
|
|
2
|
-
var u = (
|
|
3
|
-
var h = (
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
class l extends
|
|
2
|
+
var u = (n, s, t) => s in n ? p(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
|
|
3
|
+
var h = (n, s, t) => (u(n, typeof s != "symbol" ? s + "" : s, t), t);
|
|
4
|
+
import v from "./wje-element.js";
|
|
5
|
+
const f = ":host{display:block}.sliding-container-wrapper{height:100%;position:relative;overflow:hidden}.native-sliding-container{overflow:auto}";
|
|
6
|
+
class l extends v {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of SlidingContainer.
|
|
9
9
|
*
|
|
@@ -80,6 +80,12 @@ class l extends f {
|
|
|
80
80
|
get hasOpacity() {
|
|
81
81
|
return this.hasAttribute("has-opacity") ?? !1;
|
|
82
82
|
}
|
|
83
|
+
get addToHeight() {
|
|
84
|
+
return this.getAttribute("add-to-height") ?? "0";
|
|
85
|
+
}
|
|
86
|
+
set addToHeight(t) {
|
|
87
|
+
this.setAttribute("add-to-height", t);
|
|
88
|
+
}
|
|
83
89
|
/**
|
|
84
90
|
* Returns the observed attributes for the component.
|
|
85
91
|
* @returns {string[]}
|
|
@@ -94,7 +100,7 @@ class l extends f {
|
|
|
94
100
|
* @returns {CSSStyleSheet}
|
|
95
101
|
*/
|
|
96
102
|
static get cssStyleSheet() {
|
|
97
|
-
return
|
|
103
|
+
return f;
|
|
98
104
|
}
|
|
99
105
|
/**
|
|
100
106
|
* Sets up the attributes for the component.
|
|
@@ -111,12 +117,12 @@ class l extends f {
|
|
|
111
117
|
* @returns {DocumentFragment}
|
|
112
118
|
*/
|
|
113
119
|
draw(t, i, a) {
|
|
114
|
-
let
|
|
115
|
-
this.style.position = "relative", this.style.height = "100%", this.transparentDiv = document.createElement("div"), this.transparentDiv.classList.add("sliding-container-transparent");
|
|
120
|
+
let r = document.createDocumentFragment();
|
|
121
|
+
this.style.position = "relative", this.style.height = "100%", this.wrapperDiv = document.createElement("div"), this.wrapperDiv.classList.add("sliding-container-wrapper"), this.transparentDiv = document.createElement("div"), this.transparentDiv.classList.add("sliding-container-transparent");
|
|
116
122
|
let e = document.createElement("div");
|
|
117
123
|
e.style.position = "absolute", e.style.width = this.maxWidth, this.hasOpacity && (e.style.opacity = 0), e.style.height = "100%", e.classList.add("native-sliding-container"), e.setAttribute("part", "sliding-container"), this.direction === "right" ? e.style.right = 0 : e.style.left = 0;
|
|
118
124
|
let o = document.createElement("slot");
|
|
119
|
-
return e.appendChild(this.getCloseButton()), e.appendChild(o),
|
|
125
|
+
return e.appendChild(this.getCloseButton()), e.appendChild(o), this.wrapperDiv.appendChild(this.transparentDiv), this.wrapperDiv.appendChild(e), r.appendChild(this.wrapperDiv), this.nativeElement = e, r;
|
|
120
126
|
}
|
|
121
127
|
/**
|
|
122
128
|
* Creates and returns a close button element.
|
|
@@ -159,10 +165,10 @@ class l extends f {
|
|
|
159
165
|
var i, a;
|
|
160
166
|
if (t === "over") {
|
|
161
167
|
this.style.position = "fixed";
|
|
162
|
-
let
|
|
163
|
-
this.style.height = o + "px", this.style.top =
|
|
164
|
-
let
|
|
165
|
-
|
|
168
|
+
let r = window.getComputedStyle(this.getParentElement()), e = this.getParentElement().getBoundingClientRect(), o = parseFloat(r.height), d = parseFloat(r.width), g = parseFloat(r.top);
|
|
169
|
+
this.style.height = o + +this.addToHeight + "px", this.wrapperDiv.style.height = o + +this.addToHeight + "px", this.style.top = g + "px";
|
|
170
|
+
let m = this.getParentElement().firstElementChild === this || ((i = this.getParentElement().shadowRoot) == null ? void 0 : i.firstElementChild) === this, c = this.getParentElement().lastElementChild === this || ((a = this.getParentElement().shadowRoot) == null ? void 0 : a.lastElementChild) === this;
|
|
171
|
+
m && (this.direction === "right" ? this.style.left = e.left + "px" : this.style.right = window.innerWidth - (e.left + e.width) + d + "px"), c && (this.style.right = window.innerWidth - (e.left + e.width) + "px");
|
|
166
172
|
}
|
|
167
173
|
}
|
|
168
174
|
/**
|
|
@@ -209,12 +215,10 @@ class l extends f {
|
|
|
209
215
|
}
|
|
210
216
|
this.animation = this.transparentDiv.animate([
|
|
211
217
|
{
|
|
212
|
-
width: 0
|
|
213
|
-
opacity: 0
|
|
218
|
+
width: 0
|
|
214
219
|
},
|
|
215
220
|
{
|
|
216
|
-
width: this.maxWidth
|
|
217
|
-
opacity: +this.containerOpacity
|
|
221
|
+
width: this.maxWidth
|
|
218
222
|
}
|
|
219
223
|
], t), this.hasOpacity && (this.nativeAnimation = this.nativeElement.animate([
|
|
220
224
|
{
|
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.
|
|
4
|
+
"version": "0.1.50",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|