vanilla-drawers 1.0.2 → 1.0.3
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/drawers.es.js +465 -465
- package/dist/drawers.umd.js +6 -6
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/drawers.es.js
CHANGED
|
@@ -1,465 +1,465 @@
|
|
|
1
|
-
var
|
|
2
|
-
if (!t.has(r))
|
|
3
|
-
throw TypeError("Cannot " + e);
|
|
4
|
-
};
|
|
5
|
-
var n = (r, t, e) => (
|
|
6
|
-
if (t.has(r))
|
|
7
|
-
throw TypeError("Cannot add the same private member more than once");
|
|
8
|
-
t instanceof WeakSet ? t.add(r) : t.set(r, e);
|
|
9
|
-
}, m = (r, t, e,
|
|
10
|
-
function te(r) {
|
|
11
|
-
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
|
|
12
|
-
}
|
|
13
|
-
var ne = { exports: {} };
|
|
14
|
-
(function(r) {
|
|
15
|
-
var t = Object.prototype.hasOwnProperty, e = "~";
|
|
16
|
-
function
|
|
17
|
-
}
|
|
18
|
-
Object.create && (
|
|
19
|
-
function s(h, i, o) {
|
|
20
|
-
this.fn = h, this.context = i, this.once = o || !1;
|
|
21
|
-
}
|
|
22
|
-
function f(h, i, o, c, v) {
|
|
23
|
-
if (typeof o != "function")
|
|
24
|
-
throw new TypeError("The listener must be a function");
|
|
25
|
-
var g = new s(o, c || h, v), w = e ? e + i : i;
|
|
26
|
-
return h._events[w] ? h._events[w].fn ? h._events[w] = [h._events[w], g] : h._events[w].push(g) : (h._events[w] = g, h._eventsCount++), h;
|
|
27
|
-
}
|
|
28
|
-
function d(h, i) {
|
|
29
|
-
--h._eventsCount === 0 ? h._events = new
|
|
30
|
-
}
|
|
31
|
-
function u() {
|
|
32
|
-
this._events = new
|
|
33
|
-
}
|
|
34
|
-
u.prototype.eventNames = function() {
|
|
35
|
-
var i = [], o, c;
|
|
36
|
-
if (this._eventsCount === 0)
|
|
37
|
-
return i;
|
|
38
|
-
for (c in o = this._events)
|
|
39
|
-
t.call(o, c) && i.push(e ? c.slice(1) : c);
|
|
40
|
-
return Object.getOwnPropertySymbols ? i.concat(Object.getOwnPropertySymbols(o)) : i;
|
|
41
|
-
}, u.prototype.listeners = function(i) {
|
|
42
|
-
var o = e ? e + i : i, c = this._events[o];
|
|
43
|
-
if (!c)
|
|
44
|
-
return [];
|
|
45
|
-
if (c.fn)
|
|
46
|
-
return [c.fn];
|
|
47
|
-
for (var v = 0, g = c.length, w = new Array(g); v < g; v++)
|
|
48
|
-
w[v] = c[v].fn;
|
|
49
|
-
return w;
|
|
50
|
-
}, u.prototype.listenerCount = function(i) {
|
|
51
|
-
var o = e ? e + i : i, c = this._events[o];
|
|
52
|
-
return c ? c.fn ? 1 : c.length : 0;
|
|
53
|
-
}, u.prototype.emit = function(i, o, c, v, g, w) {
|
|
54
|
-
var j = e ? e + i : i;
|
|
55
|
-
if (!this._events[j])
|
|
56
|
-
return !1;
|
|
57
|
-
var
|
|
58
|
-
if (
|
|
59
|
-
switch (
|
|
60
|
-
case 1:
|
|
61
|
-
return
|
|
62
|
-
case 2:
|
|
63
|
-
return
|
|
64
|
-
case 3:
|
|
65
|
-
return
|
|
66
|
-
case 4:
|
|
67
|
-
return
|
|
68
|
-
case 5:
|
|
69
|
-
return
|
|
70
|
-
case 6:
|
|
71
|
-
return
|
|
72
|
-
}
|
|
73
|
-
for (y = 1,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
} else {
|
|
77
|
-
var se =
|
|
78
|
-
for (y = 0; y < se; y++)
|
|
79
|
-
switch (
|
|
80
|
-
case 1:
|
|
81
|
-
|
|
82
|
-
break;
|
|
83
|
-
case 2:
|
|
84
|
-
|
|
85
|
-
break;
|
|
86
|
-
case 3:
|
|
87
|
-
|
|
88
|
-
break;
|
|
89
|
-
case 4:
|
|
90
|
-
|
|
91
|
-
break;
|
|
92
|
-
default:
|
|
93
|
-
if (!
|
|
94
|
-
for (I = 1,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
return !0;
|
|
100
|
-
}, u.prototype.on = function(i, o, c) {
|
|
101
|
-
return f(this, i, o, c, !1);
|
|
102
|
-
}, u.prototype.once = function(i, o, c) {
|
|
103
|
-
return f(this, i, o, c, !0);
|
|
104
|
-
}, u.prototype.removeListener = function(i, o, c, v) {
|
|
105
|
-
var g = e ? e + i : i;
|
|
106
|
-
if (!this._events[g])
|
|
107
|
-
return this;
|
|
108
|
-
if (!o)
|
|
109
|
-
return d(this, g), this;
|
|
110
|
-
var w = this._events[g];
|
|
111
|
-
if (w.fn)
|
|
112
|
-
w.fn === o && (!v || w.once) && (!c || w.context === c) && d(this, g);
|
|
113
|
-
else {
|
|
114
|
-
for (var j = 0,
|
|
115
|
-
(w[j].fn !== o || v && !w[j].once || c && w[j].context !== c) &&
|
|
116
|
-
|
|
117
|
-
}
|
|
118
|
-
return this;
|
|
119
|
-
}, u.prototype.removeAllListeners = function(i) {
|
|
120
|
-
var o;
|
|
121
|
-
return i ? (o = e ? e + i : i, this._events[o] && d(this, o)) : (this._events = new
|
|
122
|
-
}, u.prototype.off = u.prototype.removeListener, u.prototype.addListener = u.prototype.on, u.prefixed = e, u.EventEmitter = u, r.exports = u;
|
|
123
|
-
})(ne);
|
|
124
|
-
var ie = ne.exports;
|
|
125
|
-
const oe = /* @__PURE__ */ te(ie);
|
|
126
|
-
var
|
|
127
|
-
return
|
|
128
|
-
};
|
|
129
|
-
function
|
|
130
|
-
return !!r && typeof r == "object";
|
|
131
|
-
}
|
|
132
|
-
function ce(r) {
|
|
133
|
-
var t = Object.prototype.toString.call(r);
|
|
134
|
-
return t === "[object RegExp]" || t === "[object Date]" || fe(r);
|
|
135
|
-
}
|
|
136
|
-
var he = typeof Symbol == "function" && Symbol.for, ue = he ? Symbol.for("react.element") : 60103;
|
|
137
|
-
function fe(r) {
|
|
138
|
-
return r.$$typeof === ue;
|
|
139
|
-
}
|
|
140
|
-
function de(r) {
|
|
141
|
-
return Array.isArray(r) ? [] : {};
|
|
142
|
-
}
|
|
143
|
-
function U(r, t) {
|
|
144
|
-
return t.clone !== !1 && t.isMergeableObject(r) ? D(de(r), r, t) : r;
|
|
145
|
-
}
|
|
146
|
-
function pe(r, t, e) {
|
|
147
|
-
return r.concat(t).map(function(
|
|
148
|
-
return U(
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
function we(r, t) {
|
|
152
|
-
if (!t.customMerge)
|
|
153
|
-
return D;
|
|
154
|
-
var e = t.customMerge(r);
|
|
155
|
-
return typeof e == "function" ? e : D;
|
|
156
|
-
}
|
|
157
|
-
function ye(r) {
|
|
158
|
-
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(r).filter(function(t) {
|
|
159
|
-
return Object.propertyIsEnumerable.call(r, t);
|
|
160
|
-
}) : [];
|
|
161
|
-
}
|
|
162
|
-
function
|
|
163
|
-
return Object.keys(r).concat(ye(r));
|
|
164
|
-
}
|
|
165
|
-
function re(r, t) {
|
|
166
|
-
try {
|
|
167
|
-
return t in r;
|
|
168
|
-
} catch {
|
|
169
|
-
return !1;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
function be(r, t) {
|
|
173
|
-
return re(r, t) && !(Object.hasOwnProperty.call(r, t) && Object.propertyIsEnumerable.call(r, t));
|
|
174
|
-
}
|
|
175
|
-
function me(r, t, e) {
|
|
176
|
-
var
|
|
177
|
-
return e.isMergeableObject(r) &&
|
|
178
|
-
|
|
179
|
-
}),
|
|
180
|
-
be(r, s) || (re(r, s) && e.isMergeableObject(t[s]) ?
|
|
181
|
-
}),
|
|
182
|
-
}
|
|
183
|
-
function D(r, t, e) {
|
|
184
|
-
e = e || {}, e.arrayMerge = e.arrayMerge || pe, e.isMergeableObject = e.isMergeableObject ||
|
|
185
|
-
var
|
|
186
|
-
return f ?
|
|
187
|
-
}
|
|
188
|
-
D.all = function(t, e) {
|
|
189
|
-
if (!Array.isArray(t))
|
|
190
|
-
throw new Error("first argument should be an array");
|
|
191
|
-
return t.reduce(function(
|
|
192
|
-
return D(
|
|
193
|
-
}, {});
|
|
194
|
-
};
|
|
195
|
-
var ge = D, Oe = ge;
|
|
196
|
-
const ve = /* @__PURE__ */ te(Oe);
|
|
197
|
-
/*!
|
|
198
|
-
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
|
199
|
-
*
|
|
200
|
-
* Copyright (c) 2014-2017, Jon Schlinkert.
|
|
201
|
-
* Released under the MIT License.
|
|
202
|
-
*/
|
|
203
|
-
function
|
|
204
|
-
return Object.prototype.toString.call(r) === "[object Object]";
|
|
205
|
-
}
|
|
206
|
-
function Ae(r) {
|
|
207
|
-
var t, e;
|
|
208
|
-
return
|
|
209
|
-
}
|
|
210
|
-
function
|
|
211
|
-
return r instanceof Element ? r : document.querySelector(r);
|
|
212
|
-
}
|
|
213
|
-
async function
|
|
214
|
-
return await new Promise((t) => setTimeout(t, r));
|
|
215
|
-
}
|
|
216
|
-
const Ee = '[data-elem="drawer.panel"]', $ = "data-drawers-group", Ce = [
|
|
217
|
-
"a[href]",
|
|
218
|
-
"area[href]",
|
|
219
|
-
'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
|
|
220
|
-
"select:not([disabled]):not([aria-hidden])",
|
|
221
|
-
"textarea:not([disabled]):not([aria-hidden])",
|
|
222
|
-
"button:not([disabled]):not([aria-hidden])",
|
|
223
|
-
"iframe",
|
|
224
|
-
"object",
|
|
225
|
-
"embed",
|
|
226
|
-
"[contenteditable]",
|
|
227
|
-
'[tabindex]:not([tabindex^="-"])'
|
|
228
|
-
], Z = {
|
|
229
|
-
modal: !0,
|
|
230
|
-
focusOnChild: !0,
|
|
231
|
-
closeOnEsc: !0,
|
|
232
|
-
closeOnOutsideClick: !0,
|
|
233
|
-
closeOnUnderlayClick: !0,
|
|
234
|
-
onCloseConfirm: () => !0,
|
|
235
|
-
onBeforeClose: null,
|
|
236
|
-
onClose: null,
|
|
237
|
-
onCloseAnimationEnd: null,
|
|
238
|
-
onBeforeOpen: null,
|
|
239
|
-
onOpen: null,
|
|
240
|
-
onOpenAnimationEnd: null,
|
|
241
|
-
openClass: "drawer_open",
|
|
242
|
-
openAnimationDuration: 0,
|
|
243
|
-
closeAnimationDuration: 0,
|
|
244
|
-
lockPageScroll: !0
|
|
245
|
-
};
|
|
246
|
-
function ee(r) {
|
|
247
|
-
return ve.all(r, {
|
|
248
|
-
isMergeableObject: Ae
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
var E, A, P, N;
|
|
252
|
-
class
|
|
253
|
-
constructor({ target: t, type: e, owner:
|
|
254
|
-
b(this, E, void 0);
|
|
255
|
-
b(this, A, void 0);
|
|
256
|
-
b(this, P, void 0);
|
|
257
|
-
b(this, N, !1);
|
|
258
|
-
const s =
|
|
259
|
-
if (!s)
|
|
260
|
-
throw new Error("Trigger element cannot be found");
|
|
261
|
-
m(this, E, s), m(this, A,
|
|
262
|
-
}
|
|
263
|
-
// Accessors
|
|
264
|
-
get isActive() {
|
|
265
|
-
return n(this, N);
|
|
266
|
-
}
|
|
267
|
-
get owner() {
|
|
268
|
-
return n(this, A);
|
|
269
|
-
}
|
|
270
|
-
// Methods
|
|
271
|
-
init() {
|
|
272
|
-
n(this, E).addEventListener("click", (t) => this.clickHandler(t)), n(this, A).on("open", () => this.setActive(!0)), n(this, A).on("close", () => this.setActive(!1));
|
|
273
|
-
}
|
|
274
|
-
clickHandler(t) {
|
|
275
|
-
t.__drawerTrigger = this, n(this, P) === "open" ? n(this, A).isOpen || n(this, A).open(n(this, E)) : n(this, P) === "close" ? n(this, A).isOpen && n(this, A).close(n(this, E)) : n(this, A).isOpen ? n(this, A).close(n(this, E)) : n(this, A).open(n(this, E));
|
|
276
|
-
}
|
|
277
|
-
setActive(t) {
|
|
278
|
-
m(this, N, t), t ? n(this, E).classList.add("drawer-trigger_active") : n(this, E).classList.remove("drawer-trigger_active");
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
E = new WeakMap(), A = new WeakMap(), P = new WeakMap(), N = new WeakMap();
|
|
282
|
-
var p, q, O, x, F, R;
|
|
283
|
-
class _e extends oe {
|
|
284
|
-
constructor({ target: e, options:
|
|
285
|
-
super();
|
|
286
|
-
b(this, p, void 0);
|
|
287
|
-
b(this, q, void 0);
|
|
288
|
-
b(this, O, void 0);
|
|
289
|
-
b(this, x, void 0);
|
|
290
|
-
b(this, F, void 0);
|
|
291
|
-
b(this, R, void 0);
|
|
292
|
-
this.handleDocumentClick = async (u) => {
|
|
293
|
-
var o;
|
|
294
|
-
if (((o = u.__drawerTrigger) == null ? void 0 : o.owner) === this)
|
|
295
|
-
return;
|
|
296
|
-
const h = u.target;
|
|
297
|
-
if (u.composedPath(), n(this, O).panel.contains(h))
|
|
298
|
-
return;
|
|
299
|
-
const i = h == null ? void 0 : h.closest("[data-drawer]");
|
|
300
|
-
i ? i.getAttribute("data-drawer") === n(this, R) ? this.handleUnderlayClick(u) : this.handleOtherDrawerClick(u) : this.handleOutsideClick(u);
|
|
301
|
-
}, this.handleKeydown = (u) => {
|
|
302
|
-
n(this, p).closeOnEsc && u.key === "Escape" && this.close();
|
|
303
|
-
};
|
|
304
|
-
const s = ee(
|
|
305
|
-
if (f === null)
|
|
306
|
-
throw new Error("Drawer's root cannot be found");
|
|
307
|
-
const d = f.querySelector(Ee);
|
|
308
|
-
if (d === null)
|
|
309
|
-
throw new Error("Drawer's panel cannot be found");
|
|
310
|
-
m(this, O, {
|
|
311
|
-
root: f,
|
|
312
|
-
panel: d
|
|
313
|
-
}), m(this, R, f.getAttribute("data-drawer")), this.setOptions(s), n(this, O).panel.setAttribute("tabindex", "-1"), n(this, O).root.classList.add("drawer_initialized");
|
|
314
|
-
}
|
|
315
|
-
addEventListeners() {
|
|
316
|
-
n(this, O).root.addEventListener("keydown", this.handleKeydown), document.addEventListener("click", this.handleDocumentClick);
|
|
317
|
-
}
|
|
318
|
-
removeEventListeners() {
|
|
319
|
-
n(this, O).root.removeEventListener("keydown", this.handleKeydown), document.removeEventListener("click", this.handleDocumentClick);
|
|
320
|
-
}
|
|
321
|
-
// Accessors
|
|
322
|
-
get isOpen() {
|
|
323
|
-
return n(this, x);
|
|
324
|
-
}
|
|
325
|
-
get isModal() {
|
|
326
|
-
return n(this, p).modal;
|
|
327
|
-
}
|
|
328
|
-
set isModal(e) {
|
|
329
|
-
n(this, O).root.classList[e ? "add" : "remove"]("drawer_modal");
|
|
330
|
-
}
|
|
331
|
-
set zIndex(e) {
|
|
332
|
-
n(this, O).root.style.setProperty("--z-index", String(e)), m(this, q, e);
|
|
333
|
-
}
|
|
334
|
-
get zIndex() {
|
|
335
|
-
return n(this, q);
|
|
336
|
-
}
|
|
337
|
-
// Methods
|
|
338
|
-
async open(e) {
|
|
339
|
-
n(this, x)
|
|
340
|
-
}
|
|
341
|
-
async close(e) {
|
|
342
|
-
n(this, p).onCloseConfirm && !n(this, p).onCloseConfirm(this, e) || (this.emit("beforeClose", { drawer: this, trigger: e }), this.removeEventListeners(), m(this, x, !1), n(this, O).root.classList.remove(n(this, p).openClass), this.emit("close", { drawer: this, trigger: e }), typeof n(this, p).closeAnimationDuration == "number" &&
|
|
343
|
-
}
|
|
344
|
-
handleOtherDrawerClick(e) {
|
|
345
|
-
}
|
|
346
|
-
handleOutsideClick(e) {
|
|
347
|
-
|
|
348
|
-
}
|
|
349
|
-
handleUnderlayClick(e) {
|
|
350
|
-
n(this, p).closeOnOutsideClick && this.close();
|
|
351
|
-
}
|
|
352
|
-
focus() {
|
|
353
|
-
n(this, p).focusOnChild && this.focusChild() || this.focusSelf();
|
|
354
|
-
}
|
|
355
|
-
focusSelf() {
|
|
356
|
-
n(this, O).panel.focus();
|
|
357
|
-
}
|
|
358
|
-
focusChild() {
|
|
359
|
-
const e = n(this, O).panel.querySelector(Ce.join(","));
|
|
360
|
-
return e ? (e.focus(), !0) : !1;
|
|
361
|
-
}
|
|
362
|
-
setOptions(e) {
|
|
363
|
-
var
|
|
364
|
-
e.hasOwnProperty("modal") && ((
|
|
365
|
-
}
|
|
366
|
-
assignGroup(e) {
|
|
367
|
-
m(this, F, e);
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
p = new WeakMap(), q = new WeakMap(), O = new WeakMap(), x = new WeakMap(), F = new WeakMap(), R = new WeakMap();
|
|
371
|
-
var B, C, _, T, L,
|
|
372
|
-
class je {
|
|
373
|
-
constructor(t) {
|
|
374
|
-
b(this, B, void 0);
|
|
375
|
-
b(this, C, void 0);
|
|
376
|
-
b(this, _, void 0);
|
|
377
|
-
b(this, T, void 0);
|
|
378
|
-
b(this, L, void 0);
|
|
379
|
-
b(this,
|
|
380
|
-
m(this, C, []), m(this, _, []), m(this, L, /* @__PURE__ */ new Set()), m(this,
|
|
381
|
-
s.isModal ? (n(this,
|
|
382
|
-
}, this.onCloseAnimationEnd = ({ drawer: s, trigger: f }) => {
|
|
383
|
-
const d = s.isModal ? n(this, C) : n(this, _);
|
|
384
|
-
for (delete d[n(this,
|
|
385
|
-
d.pop();
|
|
386
|
-
n(this,
|
|
387
|
-
};
|
|
388
|
-
const e =
|
|
389
|
-
if (e === null)
|
|
390
|
-
throw new Error("Drawer's group root cannot be found");
|
|
391
|
-
m(this, B, e);
|
|
392
|
-
const
|
|
393
|
-
if (
|
|
394
|
-
throw new Error("Scrollable container for group root cannot be found");
|
|
395
|
-
m(this, T,
|
|
396
|
-
}
|
|
397
|
-
add(t) {
|
|
398
|
-
t.on("beforeOpen", this.onBeforeOpen), t.on("closeAnimationEnd", this.onCloseAnimationEnd), t.assignGroup(this);
|
|
399
|
-
}
|
|
400
|
-
lockScroll(t) {
|
|
401
|
-
n(this, L).size === 0 && n(this, T).classList.add("scroll-lock-by-drawer"), n(this, L).add(t);
|
|
402
|
-
}
|
|
403
|
-
unlockScroll(t) {
|
|
404
|
-
n(this, L).delete(t), n(this, L).size === 0 && n(this, T).classList.remove("scroll-lock-by-drawer");
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
B = new WeakMap(), C = new WeakMap(), _ = new WeakMap(), T = new WeakMap(), L = new WeakMap(),
|
|
408
|
-
var G, K;
|
|
409
|
-
const z = class z {
|
|
410
|
-
constructor() {
|
|
411
|
-
b(this, G, /* @__PURE__ */ new Map());
|
|
412
|
-
b(this, K, /* @__PURE__ */ new Map());
|
|
413
|
-
if (z.instance)
|
|
414
|
-
return z.instance;
|
|
415
|
-
z.instance = this;
|
|
416
|
-
}
|
|
417
|
-
init(t) {
|
|
418
|
-
document.querySelectorAll(`[${$}]`).forEach((f) => {
|
|
419
|
-
const d = f.getAttribute($);
|
|
420
|
-
typeof d == "string" && n(this, K).set(d, new je(f));
|
|
421
|
-
}), document.querySelectorAll("[data-drawer]").forEach((f) => {
|
|
422
|
-
var o;
|
|
423
|
-
const d = f.getAttribute("data-drawer");
|
|
424
|
-
if (typeof d != "string")
|
|
425
|
-
return;
|
|
426
|
-
const u = new _e({ target: f, options: t });
|
|
427
|
-
n(this, G).set(d, u);
|
|
428
|
-
const h = f.closest(`[${$}]`), i = h == null ? void 0 : h.getAttribute($);
|
|
429
|
-
if (typeof i != "string")
|
|
430
|
-
throw new Error("Group doesn't have alias set correctly");
|
|
431
|
-
(o = n(this, K).get(i)) == null || o.add(u);
|
|
432
|
-
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((f) => {
|
|
433
|
-
if (f.hasAttribute("data-drawer-open")) {
|
|
434
|
-
const d = f.getAttribute("data-drawer-open");
|
|
435
|
-
new
|
|
436
|
-
} else if (f.hasAttribute("data-drawer-close")) {
|
|
437
|
-
const d = f.getAttribute("data-drawer-close");
|
|
438
|
-
new
|
|
439
|
-
} else {
|
|
440
|
-
const d = f.getAttribute("data-drawer-toggle");
|
|
441
|
-
new
|
|
442
|
-
}
|
|
443
|
-
});
|
|
444
|
-
}
|
|
445
|
-
open(t, { trigger: e, options:
|
|
446
|
-
var s;
|
|
447
|
-
(s = this.get(t)) == null || s.open(e);
|
|
448
|
-
}
|
|
449
|
-
close(t, { trigger: e, options:
|
|
450
|
-
var s;
|
|
451
|
-
(s = this.get(t)) == null || s.close(e);
|
|
452
|
-
}
|
|
453
|
-
get(t) {
|
|
454
|
-
return typeof t == "string" && n(this, G).get(t) || null;
|
|
455
|
-
}
|
|
456
|
-
};
|
|
457
|
-
G = new WeakMap(), K = new WeakMap();
|
|
458
|
-
let
|
|
459
|
-
typeof window < "u" && (window.hasOwnProperty("app") || (window.app = {}), window.app.drawers = new
|
|
460
|
-
export {
|
|
461
|
-
_e as Drawer,
|
|
462
|
-
je as DrawersGroup,
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
};
|
|
1
|
+
var Q = (r, t, e) => {
|
|
2
|
+
if (!t.has(r))
|
|
3
|
+
throw TypeError("Cannot " + e);
|
|
4
|
+
};
|
|
5
|
+
var n = (r, t, e) => (Q(r, t, "read from private field"), e ? e.call(r) : t.get(r)), b = (r, t, e) => {
|
|
6
|
+
if (t.has(r))
|
|
7
|
+
throw TypeError("Cannot add the same private member more than once");
|
|
8
|
+
t instanceof WeakSet ? t.add(r) : t.set(r, e);
|
|
9
|
+
}, m = (r, t, e, l) => (Q(r, t, "write to private field"), l ? l.call(r, e) : t.set(r, e), e);
|
|
10
|
+
function te(r) {
|
|
11
|
+
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
|
|
12
|
+
}
|
|
13
|
+
var ne = { exports: {} };
|
|
14
|
+
(function(r) {
|
|
15
|
+
var t = Object.prototype.hasOwnProperty, e = "~";
|
|
16
|
+
function l() {
|
|
17
|
+
}
|
|
18
|
+
Object.create && (l.prototype = /* @__PURE__ */ Object.create(null), new l().__proto__ || (e = !1));
|
|
19
|
+
function s(h, i, o) {
|
|
20
|
+
this.fn = h, this.context = i, this.once = o || !1;
|
|
21
|
+
}
|
|
22
|
+
function f(h, i, o, c, v) {
|
|
23
|
+
if (typeof o != "function")
|
|
24
|
+
throw new TypeError("The listener must be a function");
|
|
25
|
+
var g = new s(o, c || h, v), w = e ? e + i : i;
|
|
26
|
+
return h._events[w] ? h._events[w].fn ? h._events[w] = [h._events[w], g] : h._events[w].push(g) : (h._events[w] = g, h._eventsCount++), h;
|
|
27
|
+
}
|
|
28
|
+
function d(h, i) {
|
|
29
|
+
--h._eventsCount === 0 ? h._events = new l() : delete h._events[i];
|
|
30
|
+
}
|
|
31
|
+
function u() {
|
|
32
|
+
this._events = new l(), this._eventsCount = 0;
|
|
33
|
+
}
|
|
34
|
+
u.prototype.eventNames = function() {
|
|
35
|
+
var i = [], o, c;
|
|
36
|
+
if (this._eventsCount === 0)
|
|
37
|
+
return i;
|
|
38
|
+
for (c in o = this._events)
|
|
39
|
+
t.call(o, c) && i.push(e ? c.slice(1) : c);
|
|
40
|
+
return Object.getOwnPropertySymbols ? i.concat(Object.getOwnPropertySymbols(o)) : i;
|
|
41
|
+
}, u.prototype.listeners = function(i) {
|
|
42
|
+
var o = e ? e + i : i, c = this._events[o];
|
|
43
|
+
if (!c)
|
|
44
|
+
return [];
|
|
45
|
+
if (c.fn)
|
|
46
|
+
return [c.fn];
|
|
47
|
+
for (var v = 0, g = c.length, w = new Array(g); v < g; v++)
|
|
48
|
+
w[v] = c[v].fn;
|
|
49
|
+
return w;
|
|
50
|
+
}, u.prototype.listenerCount = function(i) {
|
|
51
|
+
var o = e ? e + i : i, c = this._events[o];
|
|
52
|
+
return c ? c.fn ? 1 : c.length : 0;
|
|
53
|
+
}, u.prototype.emit = function(i, o, c, v, g, w) {
|
|
54
|
+
var j = e ? e + i : i;
|
|
55
|
+
if (!this._events[j])
|
|
56
|
+
return !1;
|
|
57
|
+
var a = this._events[j], S = arguments.length, k, y;
|
|
58
|
+
if (a.fn) {
|
|
59
|
+
switch (a.once && this.removeListener(i, a.fn, void 0, !0), S) {
|
|
60
|
+
case 1:
|
|
61
|
+
return a.fn.call(a.context), !0;
|
|
62
|
+
case 2:
|
|
63
|
+
return a.fn.call(a.context, o), !0;
|
|
64
|
+
case 3:
|
|
65
|
+
return a.fn.call(a.context, o, c), !0;
|
|
66
|
+
case 4:
|
|
67
|
+
return a.fn.call(a.context, o, c, v), !0;
|
|
68
|
+
case 5:
|
|
69
|
+
return a.fn.call(a.context, o, c, v, g), !0;
|
|
70
|
+
case 6:
|
|
71
|
+
return a.fn.call(a.context, o, c, v, g, w), !0;
|
|
72
|
+
}
|
|
73
|
+
for (y = 1, k = new Array(S - 1); y < S; y++)
|
|
74
|
+
k[y - 1] = arguments[y];
|
|
75
|
+
a.fn.apply(a.context, k);
|
|
76
|
+
} else {
|
|
77
|
+
var se = a.length, I;
|
|
78
|
+
for (y = 0; y < se; y++)
|
|
79
|
+
switch (a[y].once && this.removeListener(i, a[y].fn, void 0, !0), S) {
|
|
80
|
+
case 1:
|
|
81
|
+
a[y].fn.call(a[y].context);
|
|
82
|
+
break;
|
|
83
|
+
case 2:
|
|
84
|
+
a[y].fn.call(a[y].context, o);
|
|
85
|
+
break;
|
|
86
|
+
case 3:
|
|
87
|
+
a[y].fn.call(a[y].context, o, c);
|
|
88
|
+
break;
|
|
89
|
+
case 4:
|
|
90
|
+
a[y].fn.call(a[y].context, o, c, v);
|
|
91
|
+
break;
|
|
92
|
+
default:
|
|
93
|
+
if (!k)
|
|
94
|
+
for (I = 1, k = new Array(S - 1); I < S; I++)
|
|
95
|
+
k[I - 1] = arguments[I];
|
|
96
|
+
a[y].fn.apply(a[y].context, k);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return !0;
|
|
100
|
+
}, u.prototype.on = function(i, o, c) {
|
|
101
|
+
return f(this, i, o, c, !1);
|
|
102
|
+
}, u.prototype.once = function(i, o, c) {
|
|
103
|
+
return f(this, i, o, c, !0);
|
|
104
|
+
}, u.prototype.removeListener = function(i, o, c, v) {
|
|
105
|
+
var g = e ? e + i : i;
|
|
106
|
+
if (!this._events[g])
|
|
107
|
+
return this;
|
|
108
|
+
if (!o)
|
|
109
|
+
return d(this, g), this;
|
|
110
|
+
var w = this._events[g];
|
|
111
|
+
if (w.fn)
|
|
112
|
+
w.fn === o && (!v || w.once) && (!c || w.context === c) && d(this, g);
|
|
113
|
+
else {
|
|
114
|
+
for (var j = 0, a = [], S = w.length; j < S; j++)
|
|
115
|
+
(w[j].fn !== o || v && !w[j].once || c && w[j].context !== c) && a.push(w[j]);
|
|
116
|
+
a.length ? this._events[g] = a.length === 1 ? a[0] : a : d(this, g);
|
|
117
|
+
}
|
|
118
|
+
return this;
|
|
119
|
+
}, u.prototype.removeAllListeners = function(i) {
|
|
120
|
+
var o;
|
|
121
|
+
return i ? (o = e ? e + i : i, this._events[o] && d(this, o)) : (this._events = new l(), this._eventsCount = 0), this;
|
|
122
|
+
}, u.prototype.off = u.prototype.removeListener, u.prototype.addListener = u.prototype.on, u.prefixed = e, u.EventEmitter = u, r.exports = u;
|
|
123
|
+
})(ne);
|
|
124
|
+
var ie = ne.exports;
|
|
125
|
+
const oe = /* @__PURE__ */ te(ie);
|
|
126
|
+
var ae = function(t) {
|
|
127
|
+
return le(t) && !ce(t);
|
|
128
|
+
};
|
|
129
|
+
function le(r) {
|
|
130
|
+
return !!r && typeof r == "object";
|
|
131
|
+
}
|
|
132
|
+
function ce(r) {
|
|
133
|
+
var t = Object.prototype.toString.call(r);
|
|
134
|
+
return t === "[object RegExp]" || t === "[object Date]" || fe(r);
|
|
135
|
+
}
|
|
136
|
+
var he = typeof Symbol == "function" && Symbol.for, ue = he ? Symbol.for("react.element") : 60103;
|
|
137
|
+
function fe(r) {
|
|
138
|
+
return r.$$typeof === ue;
|
|
139
|
+
}
|
|
140
|
+
function de(r) {
|
|
141
|
+
return Array.isArray(r) ? [] : {};
|
|
142
|
+
}
|
|
143
|
+
function U(r, t) {
|
|
144
|
+
return t.clone !== !1 && t.isMergeableObject(r) ? D(de(r), r, t) : r;
|
|
145
|
+
}
|
|
146
|
+
function pe(r, t, e) {
|
|
147
|
+
return r.concat(t).map(function(l) {
|
|
148
|
+
return U(l, e);
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
function we(r, t) {
|
|
152
|
+
if (!t.customMerge)
|
|
153
|
+
return D;
|
|
154
|
+
var e = t.customMerge(r);
|
|
155
|
+
return typeof e == "function" ? e : D;
|
|
156
|
+
}
|
|
157
|
+
function ye(r) {
|
|
158
|
+
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(r).filter(function(t) {
|
|
159
|
+
return Object.propertyIsEnumerable.call(r, t);
|
|
160
|
+
}) : [];
|
|
161
|
+
}
|
|
162
|
+
function W(r) {
|
|
163
|
+
return Object.keys(r).concat(ye(r));
|
|
164
|
+
}
|
|
165
|
+
function re(r, t) {
|
|
166
|
+
try {
|
|
167
|
+
return t in r;
|
|
168
|
+
} catch {
|
|
169
|
+
return !1;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
function be(r, t) {
|
|
173
|
+
return re(r, t) && !(Object.hasOwnProperty.call(r, t) && Object.propertyIsEnumerable.call(r, t));
|
|
174
|
+
}
|
|
175
|
+
function me(r, t, e) {
|
|
176
|
+
var l = {};
|
|
177
|
+
return e.isMergeableObject(r) && W(r).forEach(function(s) {
|
|
178
|
+
l[s] = U(r[s], e);
|
|
179
|
+
}), W(t).forEach(function(s) {
|
|
180
|
+
be(r, s) || (re(r, s) && e.isMergeableObject(t[s]) ? l[s] = we(s, e)(r[s], t[s], e) : l[s] = U(t[s], e));
|
|
181
|
+
}), l;
|
|
182
|
+
}
|
|
183
|
+
function D(r, t, e) {
|
|
184
|
+
e = e || {}, e.arrayMerge = e.arrayMerge || pe, e.isMergeableObject = e.isMergeableObject || ae, e.cloneUnlessOtherwiseSpecified = U;
|
|
185
|
+
var l = Array.isArray(t), s = Array.isArray(r), f = l === s;
|
|
186
|
+
return f ? l ? e.arrayMerge(r, t, e) : me(r, t, e) : U(t, e);
|
|
187
|
+
}
|
|
188
|
+
D.all = function(t, e) {
|
|
189
|
+
if (!Array.isArray(t))
|
|
190
|
+
throw new Error("first argument should be an array");
|
|
191
|
+
return t.reduce(function(l, s) {
|
|
192
|
+
return D(l, s, e);
|
|
193
|
+
}, {});
|
|
194
|
+
};
|
|
195
|
+
var ge = D, Oe = ge;
|
|
196
|
+
const ve = /* @__PURE__ */ te(Oe);
|
|
197
|
+
/*!
|
|
198
|
+
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
|
199
|
+
*
|
|
200
|
+
* Copyright (c) 2014-2017, Jon Schlinkert.
|
|
201
|
+
* Released under the MIT License.
|
|
202
|
+
*/
|
|
203
|
+
function X(r) {
|
|
204
|
+
return Object.prototype.toString.call(r) === "[object Object]";
|
|
205
|
+
}
|
|
206
|
+
function Ae(r) {
|
|
207
|
+
var t, e;
|
|
208
|
+
return X(r) === !1 ? !1 : (t = r.constructor, t === void 0 ? !0 : (e = t.prototype, !(X(e) === !1 || e.hasOwnProperty("isPrototypeOf") === !1)));
|
|
209
|
+
}
|
|
210
|
+
function J(r) {
|
|
211
|
+
return r instanceof Element ? r : document.querySelector(r);
|
|
212
|
+
}
|
|
213
|
+
async function H(r) {
|
|
214
|
+
return await new Promise((t) => setTimeout(t, r));
|
|
215
|
+
}
|
|
216
|
+
const Ee = '[data-elem="drawer.panel"]', $ = "data-drawers-group", Ce = [
|
|
217
|
+
"a[href]",
|
|
218
|
+
"area[href]",
|
|
219
|
+
'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
|
|
220
|
+
"select:not([disabled]):not([aria-hidden])",
|
|
221
|
+
"textarea:not([disabled]):not([aria-hidden])",
|
|
222
|
+
"button:not([disabled]):not([aria-hidden])",
|
|
223
|
+
"iframe",
|
|
224
|
+
"object",
|
|
225
|
+
"embed",
|
|
226
|
+
"[contenteditable]",
|
|
227
|
+
'[tabindex]:not([tabindex^="-"])'
|
|
228
|
+
], Z = {
|
|
229
|
+
modal: !0,
|
|
230
|
+
focusOnChild: !0,
|
|
231
|
+
closeOnEsc: !0,
|
|
232
|
+
closeOnOutsideClick: !0,
|
|
233
|
+
closeOnUnderlayClick: !0,
|
|
234
|
+
onCloseConfirm: () => !0,
|
|
235
|
+
onBeforeClose: null,
|
|
236
|
+
onClose: null,
|
|
237
|
+
onCloseAnimationEnd: null,
|
|
238
|
+
onBeforeOpen: null,
|
|
239
|
+
onOpen: null,
|
|
240
|
+
onOpenAnimationEnd: null,
|
|
241
|
+
openClass: "drawer_open",
|
|
242
|
+
openAnimationDuration: 0,
|
|
243
|
+
closeAnimationDuration: 0,
|
|
244
|
+
lockPageScroll: !0
|
|
245
|
+
};
|
|
246
|
+
function ee(r) {
|
|
247
|
+
return ve.all(r, {
|
|
248
|
+
isMergeableObject: Ae
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
var E, A, P, N;
|
|
252
|
+
class V {
|
|
253
|
+
constructor({ target: t, type: e, owner: l }) {
|
|
254
|
+
b(this, E, void 0);
|
|
255
|
+
b(this, A, void 0);
|
|
256
|
+
b(this, P, void 0);
|
|
257
|
+
b(this, N, !1);
|
|
258
|
+
const s = J(t);
|
|
259
|
+
if (!s)
|
|
260
|
+
throw new Error("Trigger element cannot be found");
|
|
261
|
+
m(this, E, s), m(this, A, l), m(this, P, e), this.init();
|
|
262
|
+
}
|
|
263
|
+
// Accessors
|
|
264
|
+
get isActive() {
|
|
265
|
+
return n(this, N);
|
|
266
|
+
}
|
|
267
|
+
get owner() {
|
|
268
|
+
return n(this, A);
|
|
269
|
+
}
|
|
270
|
+
// Methods
|
|
271
|
+
init() {
|
|
272
|
+
n(this, E).addEventListener("click", (t) => this.clickHandler(t)), n(this, A).on("open", () => this.setActive(!0)), n(this, A).on("close", () => this.setActive(!1));
|
|
273
|
+
}
|
|
274
|
+
clickHandler(t) {
|
|
275
|
+
t.__drawerTrigger = this, n(this, P) === "open" ? n(this, A).isOpen || n(this, A).open(n(this, E)) : n(this, P) === "close" ? n(this, A).isOpen && n(this, A).close(n(this, E)) : n(this, A).isOpen ? n(this, A).close(n(this, E)) : n(this, A).open(n(this, E));
|
|
276
|
+
}
|
|
277
|
+
setActive(t) {
|
|
278
|
+
m(this, N, t), t ? n(this, E).classList.add("drawer-trigger_active") : n(this, E).classList.remove("drawer-trigger_active");
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
E = new WeakMap(), A = new WeakMap(), P = new WeakMap(), N = new WeakMap();
|
|
282
|
+
var p, q, O, x, F, R;
|
|
283
|
+
class _e extends oe {
|
|
284
|
+
constructor({ target: e, options: l }) {
|
|
285
|
+
super();
|
|
286
|
+
b(this, p, void 0);
|
|
287
|
+
b(this, q, void 0);
|
|
288
|
+
b(this, O, void 0);
|
|
289
|
+
b(this, x, void 0);
|
|
290
|
+
b(this, F, void 0);
|
|
291
|
+
b(this, R, void 0);
|
|
292
|
+
this.handleDocumentClick = async (u) => {
|
|
293
|
+
var o;
|
|
294
|
+
if (((o = u.__drawerTrigger) == null ? void 0 : o.owner) === this)
|
|
295
|
+
return;
|
|
296
|
+
const h = u.target;
|
|
297
|
+
if (u.composedPath(), n(this, O).panel.contains(h))
|
|
298
|
+
return;
|
|
299
|
+
const i = h == null ? void 0 : h.closest("[data-drawer]");
|
|
300
|
+
i ? i.getAttribute("data-drawer") === n(this, R) ? this.handleUnderlayClick(u) : this.handleOtherDrawerClick(u) : this.handleOutsideClick(u);
|
|
301
|
+
}, this.handleKeydown = (u) => {
|
|
302
|
+
n(this, p).closeOnEsc && u.key === "Escape" && this.close();
|
|
303
|
+
};
|
|
304
|
+
const s = ee(l ? [Z, l] : [Z]), f = J(e);
|
|
305
|
+
if (f === null)
|
|
306
|
+
throw new Error("Drawer's root cannot be found");
|
|
307
|
+
const d = f.querySelector(Ee);
|
|
308
|
+
if (d === null)
|
|
309
|
+
throw new Error("Drawer's panel cannot be found");
|
|
310
|
+
m(this, O, {
|
|
311
|
+
root: f,
|
|
312
|
+
panel: d
|
|
313
|
+
}), m(this, R, f.getAttribute("data-drawer")), this.setOptions(s), n(this, O).panel.setAttribute("tabindex", "-1"), n(this, O).root.classList.add("drawer_initialized");
|
|
314
|
+
}
|
|
315
|
+
addEventListeners() {
|
|
316
|
+
n(this, O).root.addEventListener("keydown", this.handleKeydown), document.addEventListener("click", this.handleDocumentClick);
|
|
317
|
+
}
|
|
318
|
+
removeEventListeners() {
|
|
319
|
+
n(this, O).root.removeEventListener("keydown", this.handleKeydown), document.removeEventListener("click", this.handleDocumentClick);
|
|
320
|
+
}
|
|
321
|
+
// Accessors
|
|
322
|
+
get isOpen() {
|
|
323
|
+
return n(this, x);
|
|
324
|
+
}
|
|
325
|
+
get isModal() {
|
|
326
|
+
return n(this, p).modal;
|
|
327
|
+
}
|
|
328
|
+
set isModal(e) {
|
|
329
|
+
n(this, O).root.classList[e ? "add" : "remove"]("drawer_modal");
|
|
330
|
+
}
|
|
331
|
+
set zIndex(e) {
|
|
332
|
+
n(this, O).root.style.setProperty("--z-index", String(e)), m(this, q, e);
|
|
333
|
+
}
|
|
334
|
+
get zIndex() {
|
|
335
|
+
return n(this, q);
|
|
336
|
+
}
|
|
337
|
+
// Methods
|
|
338
|
+
async open(e) {
|
|
339
|
+
H(1), !n(this, x) && (this.emit("beforeOpen", { drawer: this, trigger: e }), m(this, x, !0), n(this, O).root.classList.add(n(this, p).openClass), this.emit("open", { drawer: this, trigger: e }), typeof n(this, p).openAnimationDuration == "number" && H(n(this, p).openAnimationDuration), this.emit("openAnimationEnd", { drawer: this, trigger: e }), this.focus(), this.addEventListeners());
|
|
340
|
+
}
|
|
341
|
+
async close(e) {
|
|
342
|
+
n(this, p).onCloseConfirm && !n(this, p).onCloseConfirm(this, e) || (this.emit("beforeClose", { drawer: this, trigger: e }), this.removeEventListeners(), m(this, x, !1), n(this, O).root.classList.remove(n(this, p).openClass), this.emit("close", { drawer: this, trigger: e }), typeof n(this, p).closeAnimationDuration == "number" && H(n(this, p).closeAnimationDuration), this.emit("closeAnimationEnd", { drawer: this, trigger: e }));
|
|
343
|
+
}
|
|
344
|
+
handleOtherDrawerClick(e) {
|
|
345
|
+
}
|
|
346
|
+
handleOutsideClick(e) {
|
|
347
|
+
n(this, p).closeOnOutsideClick && (typeof n(this, p).closeOnOutsideClick == "object" && n(this, p).closeOnOutsideClick.hasOwnProperty("checkTarget") ? n(this, p).closeOnOutsideClick.checkTarget(e.target) && this.close() : this.close());
|
|
348
|
+
}
|
|
349
|
+
handleUnderlayClick(e) {
|
|
350
|
+
n(this, p).closeOnOutsideClick && this.close();
|
|
351
|
+
}
|
|
352
|
+
focus() {
|
|
353
|
+
n(this, p).focusOnChild && this.focusChild() || this.focusSelf();
|
|
354
|
+
}
|
|
355
|
+
focusSelf() {
|
|
356
|
+
n(this, O).panel.focus();
|
|
357
|
+
}
|
|
358
|
+
focusChild() {
|
|
359
|
+
const e = n(this, O).panel.querySelector(Ce.join(","));
|
|
360
|
+
return e ? (e.focus(), !0) : !1;
|
|
361
|
+
}
|
|
362
|
+
setOptions(e) {
|
|
363
|
+
var l;
|
|
364
|
+
e.hasOwnProperty("modal") && ((l = n(this, p)) == null ? void 0 : l.modal) !== e.modal && (this.isModal = e.modal), m(this, p, n(this, p) ? ee([n(this, p), e]) : e);
|
|
365
|
+
}
|
|
366
|
+
assignGroup(e) {
|
|
367
|
+
m(this, F, e);
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
p = new WeakMap(), q = new WeakMap(), O = new WeakMap(), x = new WeakMap(), F = new WeakMap(), R = new WeakMap();
|
|
371
|
+
var B, C, _, T, L, M;
|
|
372
|
+
class je {
|
|
373
|
+
constructor(t) {
|
|
374
|
+
b(this, B, void 0);
|
|
375
|
+
b(this, C, void 0);
|
|
376
|
+
b(this, _, void 0);
|
|
377
|
+
b(this, T, void 0);
|
|
378
|
+
b(this, L, void 0);
|
|
379
|
+
b(this, M, void 0);
|
|
380
|
+
m(this, C, []), m(this, _, []), m(this, L, /* @__PURE__ */ new Set()), m(this, M, /* @__PURE__ */ new Map()), this.onBeforeOpen = ({ drawer: s, trigger: f }) => {
|
|
381
|
+
s.isModal ? (n(this, M).set(s, n(this, C).length), n(this, C).push(s), s.zIndex = n(this, _).length + n(this, C).length) : (n(this, M).set(s, n(this, _).length), n(this, _).push(s), s.zIndex = n(this, _).length, n(this, C).length > 0 && n(this, C).forEach((d, u) => d.zIndex = n(this, _).length + u + 1)), this.lockScroll(s);
|
|
382
|
+
}, this.onCloseAnimationEnd = ({ drawer: s, trigger: f }) => {
|
|
383
|
+
const d = s.isModal ? n(this, C) : n(this, _);
|
|
384
|
+
for (delete d[n(this, M).get(s)]; d.length && !d.at(-1); )
|
|
385
|
+
d.pop();
|
|
386
|
+
n(this, M).delete(s), this.unlockScroll(s);
|
|
387
|
+
};
|
|
388
|
+
const e = J(t);
|
|
389
|
+
if (e === null)
|
|
390
|
+
throw new Error("Drawer's group root cannot be found");
|
|
391
|
+
m(this, B, e);
|
|
392
|
+
const l = n(this, B).closest("[data-scrollable], html");
|
|
393
|
+
if (l === null)
|
|
394
|
+
throw new Error("Scrollable container for group root cannot be found");
|
|
395
|
+
m(this, T, l);
|
|
396
|
+
}
|
|
397
|
+
add(t) {
|
|
398
|
+
t.on("beforeOpen", this.onBeforeOpen), t.on("closeAnimationEnd", this.onCloseAnimationEnd), t.assignGroup(this);
|
|
399
|
+
}
|
|
400
|
+
lockScroll(t) {
|
|
401
|
+
n(this, L).size === 0 && n(this, T).classList.add("scroll-lock-by-drawer"), n(this, L).add(t);
|
|
402
|
+
}
|
|
403
|
+
unlockScroll(t) {
|
|
404
|
+
n(this, L).delete(t), n(this, L).size === 0 && n(this, T).classList.remove("scroll-lock-by-drawer");
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
B = new WeakMap(), C = new WeakMap(), _ = new WeakMap(), T = new WeakMap(), L = new WeakMap(), M = new WeakMap();
|
|
408
|
+
var G, K;
|
|
409
|
+
const z = class z {
|
|
410
|
+
constructor() {
|
|
411
|
+
b(this, G, /* @__PURE__ */ new Map());
|
|
412
|
+
b(this, K, /* @__PURE__ */ new Map());
|
|
413
|
+
if (z.instance)
|
|
414
|
+
return z.instance;
|
|
415
|
+
z.instance = this;
|
|
416
|
+
}
|
|
417
|
+
init(t) {
|
|
418
|
+
document.querySelectorAll(`[${$}]`).forEach((f) => {
|
|
419
|
+
const d = f.getAttribute($);
|
|
420
|
+
typeof d == "string" && n(this, K).set(d, new je(f));
|
|
421
|
+
}), document.querySelectorAll("[data-drawer]").forEach((f) => {
|
|
422
|
+
var o;
|
|
423
|
+
const d = f.getAttribute("data-drawer");
|
|
424
|
+
if (typeof d != "string")
|
|
425
|
+
return;
|
|
426
|
+
const u = new _e({ target: f, options: t });
|
|
427
|
+
n(this, G).set(d, u);
|
|
428
|
+
const h = f.closest(`[${$}]`), i = h == null ? void 0 : h.getAttribute($);
|
|
429
|
+
if (typeof i != "string")
|
|
430
|
+
throw new Error("Group doesn't have alias set correctly");
|
|
431
|
+
(o = n(this, K).get(i)) == null || o.add(u);
|
|
432
|
+
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((f) => {
|
|
433
|
+
if (f.hasAttribute("data-drawer-open")) {
|
|
434
|
+
const d = f.getAttribute("data-drawer-open");
|
|
435
|
+
new V({ target: f, type: "open", owner: this.get(d) });
|
|
436
|
+
} else if (f.hasAttribute("data-drawer-close")) {
|
|
437
|
+
const d = f.getAttribute("data-drawer-close");
|
|
438
|
+
new V({ target: f, type: "close", owner: this.get(d) });
|
|
439
|
+
} else {
|
|
440
|
+
const d = f.getAttribute("data-drawer-toggle");
|
|
441
|
+
new V({ target: f, type: "toggle", owner: this.get(d) });
|
|
442
|
+
}
|
|
443
|
+
});
|
|
444
|
+
}
|
|
445
|
+
open(t, { trigger: e, options: l } = {}) {
|
|
446
|
+
var s;
|
|
447
|
+
(s = this.get(t)) == null || s.open(e);
|
|
448
|
+
}
|
|
449
|
+
close(t, { trigger: e, options: l } = {}) {
|
|
450
|
+
var s;
|
|
451
|
+
(s = this.get(t)) == null || s.close(e);
|
|
452
|
+
}
|
|
453
|
+
get(t) {
|
|
454
|
+
return typeof t == "string" && n(this, G).get(t) || null;
|
|
455
|
+
}
|
|
456
|
+
};
|
|
457
|
+
G = new WeakMap(), K = new WeakMap();
|
|
458
|
+
let Y = z;
|
|
459
|
+
typeof window < "u" && (window.hasOwnProperty("app") || (window.app = {}), window.app.drawers = new Y());
|
|
460
|
+
export {
|
|
461
|
+
_e as Drawer,
|
|
462
|
+
je as DrawersGroup,
|
|
463
|
+
V as Trigger,
|
|
464
|
+
Y as default
|
|
465
|
+
};
|
package/dist/drawers.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(p,
|
|
2
|
-
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) 2014-2017, Jon Schlinkert.
|
|
5
|
-
* Released under the MIT License.
|
|
6
|
-
*/function
|
|
1
|
+
(function(p,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(p=typeof globalThis<"u"?globalThis:p||self,m(p.Drawers={}))})(this,function(p){"use strict";var le=(p,m,_)=>{if(!m.has(p))throw TypeError("Cannot "+_)};var t=(p,m,_)=>(le(p,m,"read from private field"),_?_.call(p):m.get(p)),g=(p,m,_)=>{if(m.has(p))throw TypeError("Cannot add the same private member more than once");m instanceof WeakSet?m.add(p):m.set(p,_)},O=(p,m,_,V)=>(le(p,m,"write to private field"),V?V.call(p,_):m.set(p,_),_);var j,E,z,q,w,G,A,P,W,R,B,S,L,U,k,x,K,$;function m(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var _={exports:{}};(function(r){var n=Object.prototype.hasOwnProperty,e="~";function u(){}Object.create&&(u.prototype=Object.create(null),new u().__proto__||(e=!1));function s(c,i,o){this.fn=c,this.context=i,this.once=o||!1}function f(c,i,o,a,C){if(typeof o!="function")throw new TypeError("The listener must be a function");var v=new s(o,a||c,C),y=e?e+i:i;return c._events[y]?c._events[y].fn?c._events[y]=[c._events[y],v]:c._events[y].push(v):(c._events[y]=v,c._eventsCount++),c}function d(c,i){--c._eventsCount===0?c._events=new u:delete c._events[i]}function h(){this._events=new u,this._eventsCount=0}h.prototype.eventNames=function(){var i=[],o,a;if(this._eventsCount===0)return i;for(a in o=this._events)n.call(o,a)&&i.push(e?a.slice(1):a);return Object.getOwnPropertySymbols?i.concat(Object.getOwnPropertySymbols(o)):i},h.prototype.listeners=function(i){var o=e?e+i:i,a=this._events[o];if(!a)return[];if(a.fn)return[a.fn];for(var C=0,v=a.length,y=new Array(v);C<v;C++)y[C]=a[C].fn;return y},h.prototype.listenerCount=function(i){var o=e?e+i:i,a=this._events[o];return a?a.fn?1:a.length:0},h.prototype.emit=function(i,o,a,C,v,y){var M=e?e+i:i;if(!this._events[M])return!1;var l=this._events[M],T=arguments.length,D,b;if(l.fn){switch(l.once&&this.removeListener(i,l.fn,void 0,!0),T){case 1:return l.fn.call(l.context),!0;case 2:return l.fn.call(l.context,o),!0;case 3:return l.fn.call(l.context,o,a),!0;case 4:return l.fn.call(l.context,o,a,C),!0;case 5:return l.fn.call(l.context,o,a,C,v),!0;case 6:return l.fn.call(l.context,o,a,C,v,y),!0}for(b=1,D=new Array(T-1);b<T;b++)D[b-1]=arguments[b];l.fn.apply(l.context,D)}else{var Se=l.length,H;for(b=0;b<Se;b++)switch(l[b].once&&this.removeListener(i,l[b].fn,void 0,!0),T){case 1:l[b].fn.call(l[b].context);break;case 2:l[b].fn.call(l[b].context,o);break;case 3:l[b].fn.call(l[b].context,o,a);break;case 4:l[b].fn.call(l[b].context,o,a,C);break;default:if(!D)for(H=1,D=new Array(T-1);H<T;H++)D[H-1]=arguments[H];l[b].fn.apply(l[b].context,D)}}return!0},h.prototype.on=function(i,o,a){return f(this,i,o,a,!1)},h.prototype.once=function(i,o,a){return f(this,i,o,a,!0)},h.prototype.removeListener=function(i,o,a,C){var v=e?e+i:i;if(!this._events[v])return this;if(!o)return d(this,v),this;var y=this._events[v];if(y.fn)y.fn===o&&(!C||y.once)&&(!a||y.context===a)&&d(this,v);else{for(var M=0,l=[],T=y.length;M<T;M++)(y[M].fn!==o||C&&!y[M].once||a&&y[M].context!==a)&&l.push(y[M]);l.length?this._events[v]=l.length===1?l[0]:l:d(this,v)}return this},h.prototype.removeAllListeners=function(i){var o;return i?(o=e?e+i:i,this._events[o]&&d(this,o)):(this._events=new u,this._eventsCount=0),this},h.prototype.off=h.prototype.removeListener,h.prototype.addListener=h.prototype.on,h.prefixed=e,h.EventEmitter=h,r.exports=h})(_);var V=_.exports;const ae=m(V);var ce=function(n){return ue(n)&&!he(n)};function ue(r){return!!r&&typeof r=="object"}function he(r){var n=Object.prototype.toString.call(r);return n==="[object RegExp]"||n==="[object Date]"||pe(r)}var fe=typeof Symbol=="function"&&Symbol.for,de=fe?Symbol.for("react.element"):60103;function pe(r){return r.$$typeof===de}function we(r){return Array.isArray(r)?[]:{}}function N(r,n){return n.clone!==!1&&n.isMergeableObject(r)?I(we(r),r,n):r}function ye(r,n,e){return r.concat(n).map(function(u){return N(u,e)})}function be(r,n){if(!n.customMerge)return I;var e=n.customMerge(r);return typeof e=="function"?e:I}function me(r){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(r).filter(function(n){return Object.propertyIsEnumerable.call(r,n)}):[]}function ee(r){return Object.keys(r).concat(me(r))}function te(r,n){try{return n in r}catch{return!1}}function ge(r,n){return te(r,n)&&!(Object.hasOwnProperty.call(r,n)&&Object.propertyIsEnumerable.call(r,n))}function Oe(r,n,e){var u={};return e.isMergeableObject(r)&&ee(r).forEach(function(s){u[s]=N(r[s],e)}),ee(n).forEach(function(s){ge(r,s)||(te(r,s)&&e.isMergeableObject(n[s])?u[s]=be(s,e)(r[s],n[s],e):u[s]=N(n[s],e))}),u}function I(r,n,e){e=e||{},e.arrayMerge=e.arrayMerge||ye,e.isMergeableObject=e.isMergeableObject||ce,e.cloneUnlessOtherwiseSpecified=N;var u=Array.isArray(n),s=Array.isArray(r),f=u===s;return f?u?e.arrayMerge(r,n,e):Oe(r,n,e):N(n,e)}I.all=function(n,e){if(!Array.isArray(n))throw new Error("first argument should be an array");return n.reduce(function(u,s){return I(u,s,e)},{})};var ve=I,Ae=ve;const Ee=m(Ae);/*!
|
|
2
|
+
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2014-2017, Jon Schlinkert.
|
|
5
|
+
* Released under the MIT License.
|
|
6
|
+
*/function ne(r){return Object.prototype.toString.call(r)==="[object Object]"}function Ce(r){var n,e;return ne(r)===!1?!1:(n=r.constructor,n===void 0?!0:(e=n.prototype,!(ne(e)===!1||e.hasOwnProperty("isPrototypeOf")===!1)))}function X(r){return r instanceof Element?r:document.querySelector(r)}async function Z(r){return await new Promise(n=>setTimeout(n,r))}const _e='[data-elem="drawer.panel"]',Y="data-drawers-group",je=["a[href]","area[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],re={modal:!0,focusOnChild:!0,closeOnEsc:!0,closeOnOutsideClick:!0,closeOnUnderlayClick:!0,onCloseConfirm:()=>!0,onBeforeClose:null,onClose:null,onCloseAnimationEnd:null,onBeforeOpen:null,onOpen:null,onOpenAnimationEnd:null,openClass:"drawer_open",openAnimationDuration:0,closeAnimationDuration:0,lockPageScroll:!0};function se(r){return Ee.all(r,{isMergeableObject:Ce})}class J{constructor({target:n,type:e,owner:u}){g(this,j,void 0);g(this,E,void 0);g(this,z,void 0);g(this,q,!1);const s=X(n);if(!s)throw new Error("Trigger element cannot be found");O(this,j,s),O(this,E,u),O(this,z,e),this.init()}get isActive(){return t(this,q)}get owner(){return t(this,E)}init(){t(this,j).addEventListener("click",n=>this.clickHandler(n)),t(this,E).on("open",()=>this.setActive(!0)),t(this,E).on("close",()=>this.setActive(!1))}clickHandler(n){n.__drawerTrigger=this,t(this,z)==="open"?t(this,E).isOpen||t(this,E).open(t(this,j)):t(this,z)==="close"?t(this,E).isOpen&&t(this,E).close(t(this,j)):t(this,E).isOpen?t(this,E).close(t(this,j)):t(this,E).open(t(this,j))}setActive(n){O(this,q,n),n?t(this,j).classList.add("drawer-trigger_active"):t(this,j).classList.remove("drawer-trigger_active")}}j=new WeakMap,E=new WeakMap,z=new WeakMap,q=new WeakMap;class ie extends ae{constructor({target:e,options:u}){super();g(this,w,void 0);g(this,G,void 0);g(this,A,void 0);g(this,P,void 0);g(this,W,void 0);g(this,R,void 0);this.handleDocumentClick=async h=>{var o;if(((o=h.__drawerTrigger)==null?void 0:o.owner)===this)return;const c=h.target;if(h.composedPath(),t(this,A).panel.contains(c))return;const i=c==null?void 0:c.closest("[data-drawer]");i?i.getAttribute("data-drawer")===t(this,R)?this.handleUnderlayClick(h):this.handleOtherDrawerClick(h):this.handleOutsideClick(h)},this.handleKeydown=h=>{t(this,w).closeOnEsc&&h.key==="Escape"&&this.close()};const s=se(u?[re,u]:[re]),f=X(e);if(f===null)throw new Error("Drawer's root cannot be found");const d=f.querySelector(_e);if(d===null)throw new Error("Drawer's panel cannot be found");O(this,A,{root:f,panel:d}),O(this,R,f.getAttribute("data-drawer")),this.setOptions(s),t(this,A).panel.setAttribute("tabindex","-1"),t(this,A).root.classList.add("drawer_initialized")}addEventListeners(){t(this,A).root.addEventListener("keydown",this.handleKeydown),document.addEventListener("click",this.handleDocumentClick)}removeEventListeners(){t(this,A).root.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("click",this.handleDocumentClick)}get isOpen(){return t(this,P)}get isModal(){return t(this,w).modal}set isModal(e){t(this,A).root.classList[e?"add":"remove"]("drawer_modal")}set zIndex(e){t(this,A).root.style.setProperty("--z-index",String(e)),O(this,G,e)}get zIndex(){return t(this,G)}async open(e){Z(1),!t(this,P)&&(this.emit("beforeOpen",{drawer:this,trigger:e}),O(this,P,!0),t(this,A).root.classList.add(t(this,w).openClass),this.emit("open",{drawer:this,trigger:e}),typeof t(this,w).openAnimationDuration=="number"&&Z(t(this,w).openAnimationDuration),this.emit("openAnimationEnd",{drawer:this,trigger:e}),this.focus(),this.addEventListeners())}async close(e){t(this,w).onCloseConfirm&&!t(this,w).onCloseConfirm(this,e)||(this.emit("beforeClose",{drawer:this,trigger:e}),this.removeEventListeners(),O(this,P,!1),t(this,A).root.classList.remove(t(this,w).openClass),this.emit("close",{drawer:this,trigger:e}),typeof t(this,w).closeAnimationDuration=="number"&&Z(t(this,w).closeAnimationDuration),this.emit("closeAnimationEnd",{drawer:this,trigger:e}))}handleOtherDrawerClick(e){}handleOutsideClick(e){t(this,w).closeOnOutsideClick&&(typeof t(this,w).closeOnOutsideClick=="object"&&t(this,w).closeOnOutsideClick.hasOwnProperty("checkTarget")?t(this,w).closeOnOutsideClick.checkTarget(e.target)&&this.close():this.close())}handleUnderlayClick(e){t(this,w).closeOnOutsideClick&&this.close()}focus(){t(this,w).focusOnChild&&this.focusChild()||this.focusSelf()}focusSelf(){t(this,A).panel.focus()}focusChild(){const e=t(this,A).panel.querySelector(je.join(","));return e?(e.focus(),!0):!1}setOptions(e){var u;e.hasOwnProperty("modal")&&((u=t(this,w))==null?void 0:u.modal)!==e.modal&&(this.isModal=e.modal),O(this,w,t(this,w)?se([t(this,w),e]):e)}assignGroup(e){O(this,W,e)}}w=new WeakMap,G=new WeakMap,A=new WeakMap,P=new WeakMap,W=new WeakMap,R=new WeakMap;class oe{constructor(n){g(this,B,void 0);g(this,S,void 0);g(this,L,void 0);g(this,U,void 0);g(this,k,void 0);g(this,x,void 0);O(this,S,[]),O(this,L,[]),O(this,k,new Set),O(this,x,new Map),this.onBeforeOpen=({drawer:s,trigger:f})=>{s.isModal?(t(this,x).set(s,t(this,S).length),t(this,S).push(s),s.zIndex=t(this,L).length+t(this,S).length):(t(this,x).set(s,t(this,L).length),t(this,L).push(s),s.zIndex=t(this,L).length,t(this,S).length>0&&t(this,S).forEach((d,h)=>d.zIndex=t(this,L).length+h+1)),this.lockScroll(s)},this.onCloseAnimationEnd=({drawer:s,trigger:f})=>{const d=s.isModal?t(this,S):t(this,L);for(delete d[t(this,x).get(s)];d.length&&!d.at(-1);)d.pop();t(this,x).delete(s),this.unlockScroll(s)};const e=X(n);if(e===null)throw new Error("Drawer's group root cannot be found");O(this,B,e);const u=t(this,B).closest("[data-scrollable], html");if(u===null)throw new Error("Scrollable container for group root cannot be found");O(this,U,u)}add(n){n.on("beforeOpen",this.onBeforeOpen),n.on("closeAnimationEnd",this.onCloseAnimationEnd),n.assignGroup(this)}lockScroll(n){t(this,k).size===0&&t(this,U).classList.add("scroll-lock-by-drawer"),t(this,k).add(n)}unlockScroll(n){t(this,k).delete(n),t(this,k).size===0&&t(this,U).classList.remove("scroll-lock-by-drawer")}}B=new WeakMap,S=new WeakMap,L=new WeakMap,U=new WeakMap,k=new WeakMap,x=new WeakMap;const F=class F{constructor(){g(this,K,new Map);g(this,$,new Map);if(F.instance)return F.instance;F.instance=this}init(n){document.querySelectorAll(`[${Y}]`).forEach(f=>{const d=f.getAttribute(Y);typeof d=="string"&&t(this,$).set(d,new oe(f))}),document.querySelectorAll("[data-drawer]").forEach(f=>{var o;const d=f.getAttribute("data-drawer");if(typeof d!="string")return;const h=new ie({target:f,options:n});t(this,K).set(d,h);const c=f.closest(`[${Y}]`),i=c==null?void 0:c.getAttribute(Y);if(typeof i!="string")throw new Error("Group doesn't have alias set correctly");(o=t(this,$).get(i))==null||o.add(h)}),document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach(f=>{if(f.hasAttribute("data-drawer-open")){const d=f.getAttribute("data-drawer-open");new J({target:f,type:"open",owner:this.get(d)})}else if(f.hasAttribute("data-drawer-close")){const d=f.getAttribute("data-drawer-close");new J({target:f,type:"close",owner:this.get(d)})}else{const d=f.getAttribute("data-drawer-toggle");new J({target:f,type:"toggle",owner:this.get(d)})}})}open(n,{trigger:e,options:u}={}){var s;(s=this.get(n))==null||s.open(e)}close(n,{trigger:e,options:u}={}){var s;(s=this.get(n))==null||s.close(e)}get(n){return typeof n=="string"&&t(this,K).get(n)||null}};K=new WeakMap,$=new WeakMap;let Q=F;typeof window<"u"&&(window.hasOwnProperty("app")||(window.app={}),window.app.drawers=new Q),p.Drawer=ie,p.DrawersGroup=oe,p.Trigger=J,p.default=Q,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html{overflow-x:hidden;scroll-behavior:auto}body{position:fixed;left:0;top:0;width:100%;background-color:#fff;height:100vh;overflow:hidden;margin:0;scroll-behavior:auto}.drawers-group{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}.drawers{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}.drawer:nth-child(1) .drawer__body{background-color:#0ff}.drawer:nth-child(2) .drawer__body{background-color:#8a2be2}.drawer:nth-child(3) .drawer__body{background-color:brown}.drawer{display:flex;justify-content:center;position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:all;background-color:#4e4e4e57;z-index:var(--z-index)}.drawer:not(.transition,.drawer_open){visibility:hidden}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;visibility:hidden;opacity:0}.drawer__body{flex:1 1 auto;padding:20px}.drawer.transition .drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer_open .drawer__panel{visibility:visible;opacity:1;transform:none}
|
|
1
|
+
html{overflow-x:hidden;scroll-behavior:auto}body{position:fixed;left:0;top:0;width:100%;background-color:#fff;height:100vh;overflow:hidden;margin:0;scroll-behavior:auto}.drawers-group{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}.drawers{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}.drawer:nth-child(1) .drawer__body{background-color:#0ff}.drawer:nth-child(2) .drawer__body{background-color:#8a2be2}.drawer:nth-child(3) .drawer__body{background-color:brown}.drawer{display:flex;justify-content:center;position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:all;background-color:#4e4e4e57;z-index:var(--z-index)}.drawer:not(.transition,.drawer_open){visibility:hidden}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;visibility:hidden;opacity:0}.drawer__body{flex:1 1 auto;padding:20px}.drawer.transition .drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer_open .drawer__panel{visibility:visible;opacity:1;transform:none}
|