@brytdesigns/web-component-drawer 1.1.11 → 3.0.0
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/main/components/drawer-backdrop.js +50 -77
- package/dist/main/components/drawer-backdrop.js.map +1 -1
- package/dist/main/components/drawer-content.js +60 -83
- package/dist/main/components/drawer-content.js.map +1 -1
- package/dist/main/components/drawer-context.js +119 -113
- package/dist/main/components/drawer-context.js.map +1 -1
- package/dist/main/components/drawer-trigger.js +90 -71
- package/dist/main/components/drawer-trigger.js.map +1 -1
- package/dist/main/components/index.js +4 -10
- package/dist/main/consts.js +8 -13
- package/dist/main/consts.js.map +1 -1
- package/dist/main/hooks/index.js +2 -3
- package/dist/main/hooks/useDrawer.js +85 -81
- package/dist/main/hooks/useDrawer.js.map +1 -1
- package/dist/main/index.d.ts +32 -30
- package/dist/main/index.js +27 -31
- package/dist/main/index.js.map +1 -1
- package/dist/main/utils.js +5 -4
- package/dist/main/utils.js.map +1 -1
- package/package.json +8 -9
- package/dist/esm/index.js +0 -491
- package/dist/esm/index.js.map +0 -1
- package/dist/main/components/index.js.map +0 -1
- package/dist/main/hooks/index.js.map +0 -1
|
@@ -1,80 +1,53 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
function exit(element2) {
|
|
52
|
-
const style = window.getComputedStyle(element2);
|
|
53
|
-
const options = getTransitionConfig(style);
|
|
54
|
-
return animate(
|
|
55
|
-
element2,
|
|
56
|
-
{
|
|
57
|
-
opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`]
|
|
58
|
-
},
|
|
59
|
-
options
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
element.addEventListener(
|
|
63
|
-
"click",
|
|
64
|
-
() => {
|
|
65
|
-
if (state.isAnimating) return;
|
|
66
|
-
close();
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
signal: controller.signal
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
onCleanup(() => {
|
|
73
|
-
controller.abort();
|
|
74
|
-
});
|
|
75
|
-
isFirstRender = false;
|
|
1
|
+
import { useDrawer } from "../hooks/useDrawer.js";
|
|
2
|
+
import "../hooks/index.js";
|
|
3
|
+
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
4
|
+
import { getTransitionConfig } from "@brytdesigns/web-component-core/animation";
|
|
5
|
+
import { animate } from "motion";
|
|
6
|
+
import { onCleanup, onSettled } from "solid-js";
|
|
7
|
+
//#region src/components/drawer-backdrop.ts
|
|
8
|
+
var Name = `drawer-backdrop`;
|
|
9
|
+
var Component = (_, { element }) => {
|
|
10
|
+
const [state, { updateAnimationQueue, close }] = useDrawer(element);
|
|
11
|
+
const controller = new AbortController();
|
|
12
|
+
let isFirstRender = true;
|
|
13
|
+
createGuardedEffect(() => state.isOpen, (isOpen) => {
|
|
14
|
+
if (!isOpen || isFirstRender) return;
|
|
15
|
+
const animation = enter(element);
|
|
16
|
+
updateAnimationQueue(animation);
|
|
17
|
+
return () => {
|
|
18
|
+
if (animation.state !== "finished") animation.complete();
|
|
19
|
+
};
|
|
20
|
+
});
|
|
21
|
+
createGuardedEffect(() => state.isOpen, (isOpen) => {
|
|
22
|
+
if (isOpen || isFirstRender) return;
|
|
23
|
+
const animation = exit(element);
|
|
24
|
+
updateAnimationQueue(animation);
|
|
25
|
+
return () => {
|
|
26
|
+
if (animation.state !== "finished") animation.complete();
|
|
27
|
+
};
|
|
28
|
+
});
|
|
29
|
+
onSettled(() => {
|
|
30
|
+
isFirstRender = false;
|
|
31
|
+
});
|
|
32
|
+
function enter(element) {
|
|
33
|
+
const style = window.getComputedStyle(element);
|
|
34
|
+
const options = getTransitionConfig(style);
|
|
35
|
+
return animate(element, { opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`] }, options);
|
|
36
|
+
}
|
|
37
|
+
function exit(element) {
|
|
38
|
+
const style = window.getComputedStyle(element);
|
|
39
|
+
const options = getTransitionConfig(style);
|
|
40
|
+
return animate(element, { opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`] }, options);
|
|
41
|
+
}
|
|
42
|
+
element.addEventListener("click", () => {
|
|
43
|
+
if (state.isAnimating) return;
|
|
44
|
+
close();
|
|
45
|
+
}, { signal: controller.signal });
|
|
46
|
+
onCleanup(() => {
|
|
47
|
+
controller.abort();
|
|
48
|
+
});
|
|
76
49
|
};
|
|
77
|
-
|
|
50
|
+
//#endregion
|
|
78
51
|
export { Component, Name };
|
|
79
|
-
|
|
52
|
+
|
|
80
53
|
//# sourceMappingURL=drawer-backdrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"drawer-backdrop.js","names":[],"sources":["../../../src/components/drawer-backdrop.ts"],"sourcesContent":["import { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { animate } from \"motion\";\nimport { onCleanup, onSettled } from \"solid-js\";\n\nimport { useDrawer } from \"../hooks/index.js\";\n\nexport type Props = {};\n\nexport const Name = `drawer-backdrop`;\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n\tconst [state, { updateAnimationQueue, close }] = useDrawer(element);\n\tconst controller = new AbortController();\n\n\tlet isFirstRender = true;\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (!isOpen || isFirstRender) return;\n\t\t\tconst animation = enter(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (isOpen || isFirstRender) return;\n\t\t\tconst animation = exit(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tonSettled(() => {\n\t\tisFirstRender = false;\n\t});\n\n\tfunction enter(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst options = getTransitionConfig(style);\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\topacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`],\n\t\t\t},\n\t\t\toptions,\n\t\t);\n\t}\n\n\tfunction exit(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst options = getTransitionConfig(style);\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\topacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\n\t\t\t},\n\t\t\toptions,\n\t\t);\n\t}\n\n\telement.addEventListener(\n\t\t\"click\",\n\t\t() => {\n\t\t\tif (state.isAnimating) return;\n\t\t\tclose();\n\t\t},\n\t\t{\n\t\t\tsignal: controller.signal,\n\t\t},\n\t);\n\n\tonCleanup(() => {\n\t\tcontroller.abort();\n\t});\n};\n"],"mappings":";;;;;;;AAUA,IAAa,OAAO;AAEpB,IAAa,aAA0C,GAAG,EAAE,cAAc;CACzE,MAAM,CAAC,OAAO,EAAE,sBAAsB,WAAW,UAAU,OAAO;CAClE,MAAM,aAAa,IAAI,gBAAgB;CAEvC,IAAI,gBAAgB;CAEpB,0BACO,MAAM,SACX,WAAW;EACX,IAAI,CAAC,UAAU,eAAe;EAC9B,MAAM,YAAY,MAAM,OAAO;EAC/B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,IAAI,UAAU,eAAe;EAC7B,MAAM,YAAY,KAAK,OAAO;EAC9B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,gBAAgB;EACf,gBAAgB;CACjB,CAAC;CAED,SAAS,MAAM,SAAsB;EACpC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,UAAU,oBAAoB,KAAK;EACzC,OAAO,QACN,SACA,EACC,SAAS,CAAC,+BAA+B,2BAA2B,EACrE,GACA,OACD;CACD;CAEA,SAAS,KAAK,SAAsB;EACnC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,UAAU,oBAAoB,KAAK;EACzC,OAAO,QACN,SACA,EACC,SAAS,CAAC,6BAA6B,6BAA6B,EACrE,GACA,OACD;CACD;CAEA,QAAQ,iBACP,eACM;EACL,IAAI,MAAM,aAAa;EACvB,MAAM;CACP,GACA,EACC,QAAQ,WAAW,OACpB,CACD;CAEA,gBAAgB;EACf,WAAW,MAAM;CAClB,CAAC;AACF"}
|
|
@@ -1,86 +1,63 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
function exit(element2) {
|
|
62
|
-
const style = window.getComputedStyle(element2);
|
|
63
|
-
const transition = getTransitionConfig(style);
|
|
64
|
-
let position = style.getPropertyValue(`--drawer--position`);
|
|
65
|
-
if (!position) position = POSITION.LEFT;
|
|
66
|
-
let transform = {
|
|
67
|
-
x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`]
|
|
68
|
-
};
|
|
69
|
-
if (position === POSITION.TOP || position === POSITION.BOTTOM) {
|
|
70
|
-
transform = {
|
|
71
|
-
y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`]
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
return animate(
|
|
75
|
-
element2,
|
|
76
|
-
{
|
|
77
|
-
...transform
|
|
78
|
-
},
|
|
79
|
-
transition
|
|
80
|
-
);
|
|
81
|
-
}
|
|
1
|
+
import { useDrawer } from "../hooks/useDrawer.js";
|
|
2
|
+
import "../hooks/index.js";
|
|
3
|
+
import { POSITION } from "../consts.js";
|
|
4
|
+
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
5
|
+
import { getTransitionConfig } from "@brytdesigns/web-component-core/animation";
|
|
6
|
+
import { animate } from "motion";
|
|
7
|
+
import { onSettled } from "solid-js";
|
|
8
|
+
//#region src/components/drawer-content.ts
|
|
9
|
+
var Name = `drawer-content`;
|
|
10
|
+
var Component = (_, { element }) => {
|
|
11
|
+
const [state, { updateAnimationQueue }] = useDrawer(element);
|
|
12
|
+
let isFirstRender = true;
|
|
13
|
+
if (!element.hasAttribute("role")) element.setAttribute("role", "dialog");
|
|
14
|
+
if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
|
|
15
|
+
onSettled(() => {
|
|
16
|
+
if (!(element.hasAttribute("aria-labelledby") || element.hasAttribute("aria-label"))) console.warn("drawer-content: no accessible name. Add an aria-label, or an aria-labelledby pointing at the heading inside it.", element);
|
|
17
|
+
});
|
|
18
|
+
createGuardedEffect(() => state.isOpen, (isOpen) => {
|
|
19
|
+
if (isOpen) element.setAttribute("aria-modal", "true");
|
|
20
|
+
else element.removeAttribute("aria-modal");
|
|
21
|
+
});
|
|
22
|
+
createGuardedEffect(() => state.isOpen, (isOpen) => {
|
|
23
|
+
if (!isOpen || isFirstRender) return;
|
|
24
|
+
const animation = enter(element);
|
|
25
|
+
updateAnimationQueue(animation);
|
|
26
|
+
return () => {
|
|
27
|
+
if (animation.state !== "finished") animation.complete();
|
|
28
|
+
};
|
|
29
|
+
});
|
|
30
|
+
createGuardedEffect(() => state.isOpen, (isOpen) => {
|
|
31
|
+
if (isOpen || isFirstRender) return;
|
|
32
|
+
const animation = exit(element);
|
|
33
|
+
updateAnimationQueue(animation);
|
|
34
|
+
return () => {
|
|
35
|
+
if (animation.state !== "finished") animation.complete();
|
|
36
|
+
};
|
|
37
|
+
});
|
|
38
|
+
onSettled(() => {
|
|
39
|
+
isFirstRender = false;
|
|
40
|
+
});
|
|
41
|
+
function enter(element) {
|
|
42
|
+
const style = window.getComputedStyle(element);
|
|
43
|
+
const transition = getTransitionConfig(style);
|
|
44
|
+
let position = style.getPropertyValue(`--drawer--position`);
|
|
45
|
+
if (!position) position = POSITION.LEFT;
|
|
46
|
+
let transform = { x: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`] };
|
|
47
|
+
if (position === POSITION.TOP || position === POSITION.BOTTOM) transform = { y: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`] };
|
|
48
|
+
return animate(element, { ...transform }, transition);
|
|
49
|
+
}
|
|
50
|
+
function exit(element) {
|
|
51
|
+
const style = window.getComputedStyle(element);
|
|
52
|
+
const transition = getTransitionConfig(style);
|
|
53
|
+
let position = style.getPropertyValue(`--drawer--position`);
|
|
54
|
+
if (!position) position = POSITION.LEFT;
|
|
55
|
+
let transform = { x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`] };
|
|
56
|
+
if (position === POSITION.TOP || position === POSITION.BOTTOM) transform = { y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`] };
|
|
57
|
+
return animate(element, { ...transform }, transition);
|
|
58
|
+
}
|
|
82
59
|
};
|
|
83
|
-
|
|
60
|
+
//#endregion
|
|
84
61
|
export { Component, Name };
|
|
85
|
-
|
|
62
|
+
|
|
86
63
|
//# sourceMappingURL=drawer-content.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"drawer-content.js","names":[],"sources":["../../../src/components/drawer-content.ts"],"sourcesContent":["import { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { animate } from \"motion\";\nimport { onSettled } from \"solid-js\";\nimport { POSITION, type Position } from \"../consts.js\";\nimport { useDrawer } from \"../hooks/index.js\";\n\nexport type Props = {};\n\nexport const Name = `drawer-content`;\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n\tconst [state, { updateAnimationQueue }] = useDrawer(element);\n\n\tlet isFirstRender = true;\n\n\t// The element that *is* the dialog, as far as assistive tech is concerned.\n\t// Until now this published nothing: no role, no name, no aria-modal, so a\n\t// screen reader saw an unlabelled div that happened to hold the focus.\n\t//\n\t// An authored role or tabindex is left alone — a theme that already made\n\t// this an alertdialog knows something this component does not.\n\tif (!element.hasAttribute(\"role\")) element.setAttribute(\"role\", \"dialog\");\n\tif (!element.hasAttribute(\"tabindex\")) element.setAttribute(\"tabindex\", \"-1\");\n\n\tonSettled(() => {\n\t\tconst named =\n\t\t\telement.hasAttribute(\"aria-labelledby\") ||\n\t\t\telement.hasAttribute(\"aria-label\");\n\t\tif (!named) {\n\t\t\tconsole.warn(\n\t\t\t\t\"drawer-content: no accessible name. Add an aria-label, or an aria-labelledby pointing at the heading inside it.\",\n\t\t\t\telement,\n\t\t\t);\n\t\t}\n\t});\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\t// `aria-modal` claims focus is confined to this subtree, which is only\n\t\t\t// true while it is open. Left on a closed overlay it tells assistive\n\t\t\t// tech the rest of the page is unavailable when it is not.\n\t\t\tif (isOpen) element.setAttribute(\"aria-modal\", \"true\");\n\t\t\telse element.removeAttribute(\"aria-modal\");\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (!isOpen || isFirstRender) return;\n\t\t\tconst animation = enter(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (isOpen || isFirstRender) return;\n\t\t\tconst animation = exit(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tonSettled(() => {\n\t\tisFirstRender = false;\n\t});\n\n\tfunction enter(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst transition = getTransitionConfig(style);\n\t\tlet position = style.getPropertyValue(`--drawer--position`) as Position;\n\t\tif (!position) position = POSITION.LEFT;\n\n\t\tlet transform: Record<string, string[]> = {\n\t\t\tx: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\n\t\t};\n\n\t\tif (position === POSITION.TOP || position === POSITION.BOTTOM) {\n\t\t\ttransform = {\n\t\t\t\ty: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\n\t\t\t};\n\t\t}\n\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\t...transform,\n\t\t\t},\n\t\t\ttransition,\n\t\t);\n\t}\n\n\tfunction exit(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst transition = getTransitionConfig(style);\n\t\tlet position = style.getPropertyValue(`--drawer--position`) as Position;\n\t\tif (!position) position = POSITION.LEFT;\n\n\t\tlet transform: Record<string, string[]> = {\n\t\t\tx: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\n\t\t};\n\n\t\tif (position === POSITION.TOP || position === POSITION.BOTTOM) {\n\t\t\ttransform = {\n\t\t\t\ty: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\n\t\t\t};\n\t\t}\n\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\t...transform,\n\t\t\t},\n\t\t\ttransition,\n\t\t);\n\t}\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,OAAO;AAEpB,IAAa,aAA0C,GAAG,EAAE,cAAc;CACzE,MAAM,CAAC,OAAO,EAAE,0BAA0B,UAAU,OAAO;CAE3D,IAAI,gBAAgB;CAQpB,IAAI,CAAC,QAAQ,aAAa,MAAM,GAAG,QAAQ,aAAa,QAAQ,QAAQ;CACxE,IAAI,CAAC,QAAQ,aAAa,UAAU,GAAG,QAAQ,aAAa,YAAY,IAAI;CAE5E,gBAAgB;EAIf,IAAI,EAFH,QAAQ,aAAa,iBAAiB,KACtC,QAAQ,aAAa,YAAY,IAEjC,QAAQ,KACP,mHACA,OACD;CAEF,CAAC;CAED,0BACO,MAAM,SACX,WAAW;EAIX,IAAI,QAAQ,QAAQ,aAAa,cAAc,MAAM;OAChD,QAAQ,gBAAgB,YAAY;CAC1C,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,IAAI,CAAC,UAAU,eAAe;EAC9B,MAAM,YAAY,MAAM,OAAO;EAC/B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,IAAI,UAAU,eAAe;EAC7B,MAAM,YAAY,KAAK,OAAO;EAC9B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,gBAAgB;EACf,gBAAgB;CACjB,CAAC;CAED,SAAS,MAAM,SAAsB;EACpC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,aAAa,oBAAoB,KAAK;EAC5C,IAAI,WAAW,MAAM,iBAAiB,oBAAoB;EAC1D,IAAI,CAAC,UAAU,WAAW,SAAS;EAEnC,IAAI,YAAsC,EACzC,GAAG,CAAC,6BAA6B,yBAAyB,EAC3D;EAEA,IAAI,aAAa,SAAS,OAAO,aAAa,SAAS,QACtD,YAAY,EACX,GAAG,CAAC,6BAA6B,yBAAyB,EAC3D;EAGD,OAAO,QACN,SACA,EACC,GAAG,UACJ,GACA,UACD;CACD;CAEA,SAAS,KAAK,SAAsB;EACnC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,aAAa,oBAAoB,KAAK;EAC5C,IAAI,WAAW,MAAM,iBAAiB,oBAAoB;EAC1D,IAAI,CAAC,UAAU,WAAW,SAAS;EAEnC,IAAI,YAAsC,EACzC,GAAG,CAAC,2BAA2B,2BAA2B,EAC3D;EAEA,IAAI,aAAa,SAAS,OAAO,aAAa,SAAS,QACtD,YAAY,EACX,GAAG,CAAC,2BAA2B,2BAA2B,EAC3D;EAGD,OAAO,QACN,SACA,EACC,GAAG,UACJ,GACA,UACD;CACD;AACD"}
|
|
@@ -1,116 +1,122 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
1
|
+
import { provideDrawerContext, useDrawerContext } from "../hooks/useDrawer.js";
|
|
2
|
+
import "../hooks/index.js";
|
|
3
|
+
import { hideElement, showElement } from "../utils.js";
|
|
4
|
+
import { closeNestedOverlays, createEscapeHandler, createFocusReturn, createGuardedEffect, disableBodyScroll, enableBodyScroll, findOverlayPanel } from "@brytdesigns/web-component-core/utils";
|
|
5
|
+
import { omit, onCleanup, untrack } from "solid-js";
|
|
6
|
+
import { createFocusTrap } from "@brytdesigns/web-component-core/focusTrap";
|
|
7
|
+
//#region src/components/drawer-context.ts
|
|
8
|
+
var Name = `drawer-context`;
|
|
9
|
+
var Component = (props, { element }) => {
|
|
10
|
+
const debug = untrack(() => props.debug);
|
|
11
|
+
const restProps = omit(props, "isOpen", "isAnimating");
|
|
12
|
+
const context = provideDrawerContext({
|
|
13
|
+
get isOpen() {
|
|
14
|
+
return props.isOpen;
|
|
15
|
+
},
|
|
16
|
+
get isAnimating() {
|
|
17
|
+
return props.isAnimating;
|
|
18
|
+
}
|
|
19
|
+
}, element);
|
|
20
|
+
const [state, { setElementState }] = context;
|
|
21
|
+
const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);
|
|
22
|
+
element.actions = events;
|
|
23
|
+
const panel = () => findOverlayPanel(element, "drawer-content");
|
|
24
|
+
const focusReturn = createFocusReturn(element);
|
|
25
|
+
const focusTrap = createFocusTrap(element, () => ({
|
|
26
|
+
allowOutsideClick: true,
|
|
27
|
+
escapeDeactivates: false,
|
|
28
|
+
returnFocusOnDeactivate: false,
|
|
29
|
+
initialFocus: () => panel() ?? false,
|
|
30
|
+
fallbackFocus: () => panel() ?? element
|
|
31
|
+
}));
|
|
32
|
+
createGuardedEffect(() => ({
|
|
33
|
+
isOpen: state.isOpen,
|
|
34
|
+
closeOnEscape: restProps.closeOnEscape
|
|
35
|
+
}), ({ isOpen, closeOnEscape }) => {
|
|
36
|
+
if (!isOpen || !closeOnEscape) return;
|
|
37
|
+
return createEscapeHandler({
|
|
38
|
+
element,
|
|
39
|
+
onEscape: () => setElementState("isOpen", false)
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
createGuardedEffect(() => ({
|
|
43
|
+
debug,
|
|
44
|
+
snapshot: { ...state }
|
|
45
|
+
}), ({ debug, snapshot }) => {
|
|
46
|
+
if (!debug) return;
|
|
47
|
+
console.table(snapshot);
|
|
48
|
+
});
|
|
49
|
+
createGuardedEffect(() => state.isOpen, (isOpen) => {
|
|
50
|
+
const eventName = isOpen ? "drawer:open" : "drawer:close";
|
|
51
|
+
element.dispatchEvent(new CustomEvent(eventName, {
|
|
52
|
+
bubbles: true,
|
|
53
|
+
detail: {
|
|
54
|
+
isOpen,
|
|
55
|
+
relatedTarget: element
|
|
56
|
+
}
|
|
57
|
+
}));
|
|
58
|
+
element.dispatchEvent(new CustomEvent("drawer:toggle", {
|
|
59
|
+
bubbles: true,
|
|
60
|
+
detail: {
|
|
61
|
+
isOpen,
|
|
62
|
+
relatedTarget: element
|
|
63
|
+
}
|
|
64
|
+
}));
|
|
65
|
+
});
|
|
66
|
+
createGuardedEffect(() => ({
|
|
67
|
+
isOpen: state.isOpen,
|
|
68
|
+
isAnimating: state.isAnimating,
|
|
69
|
+
focusTrap: focusTrap(),
|
|
70
|
+
shouldTrapFocus: restProps.shouldTrapFocus
|
|
71
|
+
}), ({ isOpen, isAnimating, focusTrap, shouldTrapFocus }) => {
|
|
72
|
+
if (!isOpen) return;
|
|
73
|
+
if (debug) console.log("Showing element", element);
|
|
74
|
+
showElement(element);
|
|
75
|
+
if (!shouldTrapFocus || isAnimating) return;
|
|
76
|
+
focusReturn.record();
|
|
77
|
+
focusTrap.activate();
|
|
78
|
+
return () => {
|
|
79
|
+
focusTrap.deactivate();
|
|
80
|
+
focusReturn.restore();
|
|
81
|
+
};
|
|
82
|
+
});
|
|
83
|
+
createGuardedEffect(() => ({
|
|
84
|
+
isOpen: state.isOpen,
|
|
85
|
+
isAnimating: state.isAnimating,
|
|
86
|
+
shouldTrapFocus: props.shouldTrapFocus
|
|
87
|
+
}), ({ isOpen, isAnimating, shouldTrapFocus }) => {
|
|
88
|
+
if (!isOpen || isAnimating || !shouldTrapFocus) return;
|
|
89
|
+
disableBodyScroll(element, { allowTouchMove: (el) => {
|
|
90
|
+
if (el instanceof HTMLElement) {
|
|
91
|
+
let element = el;
|
|
92
|
+
while (element && element !== document.body) {
|
|
93
|
+
if (element.tagName === "DRAWER-CONTENT") return true;
|
|
94
|
+
element = element.parentElement;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
return false;
|
|
98
|
+
} });
|
|
99
|
+
return () => enableBodyScroll(element);
|
|
100
|
+
});
|
|
101
|
+
createGuardedEffect(() => state.isOpen, (isOpen, previous) => {
|
|
102
|
+
if (previous === void 0 || isOpen) return;
|
|
103
|
+
closeNestedOverlays(element);
|
|
104
|
+
});
|
|
105
|
+
createGuardedEffect(() => ({
|
|
106
|
+
isOpen: state.isOpen,
|
|
107
|
+
animationQueue: state.animationQueue
|
|
108
|
+
}), ({ isOpen, animationQueue }) => {
|
|
109
|
+
if (isOpen) return;
|
|
110
|
+
if (debug) console.log("Waiting for animations to complete...", animationQueue);
|
|
111
|
+
Promise.all(animationQueue).then(() => hideElement(element)).then(() => {
|
|
112
|
+
if (debug) console.log("Hiding element", element);
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
onCleanup(() => {
|
|
116
|
+
enableBodyScroll(element);
|
|
117
|
+
});
|
|
112
118
|
};
|
|
113
|
-
|
|
119
|
+
//#endregion
|
|
114
120
|
export { Component, Name };
|
|
115
|
-
|
|
121
|
+
|
|
116
122
|
//# sourceMappingURL=drawer-context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"drawer-context.js","names":[],"sources":["../../../src/components/drawer-context.ts"],"sourcesContent":["import { createFocusTrap } from \"@brytdesigns/web-component-core/focusTrap\";\nimport {\n\ttype CorrectComponentType,\n\tcloseNestedOverlays,\n\tcreateEscapeHandler,\n\tcreateFocusReturn,\n\tcreateGuardedEffect,\n\tdisableBodyScroll,\n\tenableBodyScroll,\n\tfindOverlayPanel,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { omit, onCleanup, onSettled, untrack } from \"solid-js\";\n\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\nimport { hideElement, showElement } from \"../utils.js\";\n\nexport type Props = {\n\tisOpen: boolean;\n\tid: string;\n\tcloseOnEscape: boolean;\n\tshouldTrapFocus: boolean;\n\tisAnimating: boolean;\n\tdebug?: boolean;\n};\n\nexport const Name = `drawer-context`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\t// `debug` is a mount-time switch; snapshot it rather than tracking.\n\tconst debug = untrack(() => props.debug);\n\t// `splitProps` is gone. `omit` gives the rest; the picked half is a getter\n\t// object so it stays reactive, which is what splitProps returned.\n\tconst restProps = omit(props, \"isOpen\", \"isAnimating\");\n\tconst contextProps = {\n\t\tget isOpen() {\n\t\t\treturn props.isOpen;\n\t\t},\n\t\tget isAnimating() {\n\t\t\treturn props.isAnimating;\n\t\t},\n\t};\n\n\tconst context = provideDrawerContext(contextProps, element);\n\n\tconst [state, { setElementState }] = context;\n\n\tconst [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\n\n\telement.actions = events;\n\n\tconst panel = () => findOverlayPanel(element, \"drawer-content\");\n\tconst focusReturn = createFocusReturn(element);\n\n\tconst focusTrap = createFocusTrap(element, () => ({\n\t\tallowOutsideClick: true,\n\t\t// Escape and focus return are handled explicitly below rather than as\n\t\t// focus-trap options. As options they only applied while a trap was\n\t\t// active, so `close-on-escape=\"true\" should-trap-focus=\"false\"` silently\n\t\t// did nothing, and returning focus was a side effect of trapping it.\n\t\tescapeDeactivates: false,\n\t\treturnFocusOnDeactivate: false,\n\t\t// The panel, not its first button: a screen reader then announces the\n\t\t// dialog's name and role on open instead of \"Close\".\n\t\tinitialFocus: () => panel() ?? false,\n\t\t// Without this, an overlay holding nothing tabbable throws on activate.\n\t\tfallbackFocus: () => panel() ?? element,\n\t\t// No `onDeactivate`. It used to close the overlay, because deactivation\n\t\t// was how focus-trap's `escapeDeactivates` reported an Escape press —\n\t\t// and with Escape handled explicitly above, closing on *any* deactivation\n\t\t// is actively wrong: the trap is also deactivated whenever this effect\n\t\t// re-runs, so an overlay would close itself the moment it started\n\t\t// animating open.\n\t}));\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tisOpen: state.isOpen,\n\t\t\tcloseOnEscape: restProps.closeOnEscape,\n\t\t}),\n\t\t({ isOpen, closeOnEscape }) => {\n\t\t\tif (!isOpen || !closeOnEscape) return;\n\t\t\t// Only the innermost open overlay responds, so Escape inside a nested\n\t\t\t// overlay closes that one rather than collapsing the whole stack.\n\t\t\treturn createEscapeHandler({\n\t\t\t\telement,\n\t\t\t\tonEscape: () => setElementState(\"isOpen\", false),\n\t\t\t});\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ debug: debug, snapshot: { ...state } }),\n\t\t({ debug, snapshot }) => {\n\t\t\tif (!debug) return;\n\t\t\tconsole.table(snapshot);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tconst eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\n\t\t\telement.dispatchEvent(\n\t\t\t\tnew CustomEvent(eventName, {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tdetail: { isOpen, relatedTarget: element },\n\t\t\t\t}),\n\t\t\t);\n\t\t\telement.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"drawer:toggle\", {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tdetail: { isOpen, relatedTarget: element },\n\t\t\t\t}),\n\t\t\t);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tisOpen: state.isOpen,\n\t\t\tisAnimating: state.isAnimating,\n\t\t\tfocusTrap: focusTrap(),\n\t\t\tshouldTrapFocus: restProps.shouldTrapFocus,\n\t\t}),\n\t\t({ isOpen, isAnimating, focusTrap, shouldTrapFocus }) => {\n\t\t\tif (!isOpen) return;\n\t\t\tif (debug) console.log(\"Showing element\", element);\n\t\t\tshowElement(element);\n\t\t\t// Waiting out the enter animation keeps the trap off content that is\n\t\t\t// still transitioning, and means `record()` reads the trigger rather\n\t\t\t// than whatever the animation left focused.\n\t\t\tif (!shouldTrapFocus || isAnimating) return;\n\t\t\tfocusReturn.record();\n\t\t\tfocusTrap.activate();\n\t\t\t// The apply phase is not a computation, so `onCleanup` here would\n\t\t\t// never register. Its return value IS the cleanup.\n\t\t\treturn () => {\n\t\t\t\tfocusTrap.deactivate();\n\t\t\t\tfocusReturn.restore();\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tisOpen: state.isOpen,\n\t\t\tisAnimating: state.isAnimating,\n\t\t\tshouldTrapFocus: props.shouldTrapFocus,\n\t\t}),\n\t\t({ isOpen, isAnimating, shouldTrapFocus }) => {\n\t\t\tif (!isOpen || isAnimating || !shouldTrapFocus) return;\n\n\t\t\tdisableBodyScroll(element, {\n\t\t\t\tallowTouchMove: (el: EventTarget) => {\n\t\t\t\t\tif (el instanceof HTMLElement) {\n\t\t\t\t\t\tlet element = el as (EventTarget & HTMLElement) | null;\n\t\t\t\t\t\twhile (element && element !== document.body) {\n\t\t\t\t\t\t\tif (element.tagName === \"DRAWER-CONTENT\") {\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\telement = element.parentElement;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\t},\n\t\t\t});\n\n\t\t\t// The apply phase’s return value IS the cleanup, and\n\t\t\t// `disableBodyScroll` returns void — so returning its call registered\n\t\t\t// no cleanup at all. The lock was only released on the *next* run’s\n\t\t\t// cleanup, i.e. when the drawer reopened, so closing it left the page\n\t\t\t// unscrollable.\n\t\t\treturn () => enableBodyScroll(element);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen, previous) => {\n\t\t\t// Nothing to close on the mount run: a descendant that starts open was\n\t\t\t// authored that way, and closing it here would fight the markup.\n\t\t\tif (previous === undefined || isOpen) return;\n\t\t\t// Closing this one hides everything inside it, but a nested overlay\n\t\t\t// keeps its own `isOpen` until something changes it — so it would stay\n\t\t\t// \"open\" while invisible, never fire its close event, and reappear\n\t\t\t// still open when this one is opened again.\n\t\t\tcloseNestedOverlays(element);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\n\t\t({ isOpen, animationQueue }) => {\n\t\t\tif (isOpen) return;\n\t\t\tif (debug)\n\t\t\t\tconsole.log(\"Waiting for animations to complete...\", animationQueue);\n\t\t\t// Deliberately not returned: in v2 the apply phase's return value is\n\t\t\t// the cleanup function, and this is a promise chain.\n\t\t\tvoid Promise.all(animationQueue)\n\t\t\t\t.then(() => hideElement(element))\n\t\t\t\t.then(() => {\n\t\t\t\t\tif (debug) console.log(\"Hiding element\", element);\n\t\t\t\t});\n\t\t},\n\t);\n\n\tonCleanup(() => {\n\t\tenableBodyScroll(element);\n\t});\n};\n"],"mappings":";;;;;;;AAyBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAE7E,MAAM,QAAQ,cAAc,MAAM,KAAK;CAGvC,MAAM,YAAY,KAAK,OAAO,UAAU,aAAa;CAUrD,MAAM,UAAU,qBAAqB;EARpC,IAAI,SAAS;GACZ,OAAO,MAAM;EACd;EACA,IAAI,cAAc;GACjB,OAAO,MAAM;EACd;CAGoC,GAAc,OAAO;CAE1D,MAAM,CAAC,OAAO,EAAE,qBAAqB;CAErC,MAAM,CAAC,GAAG,EAAE,sBAAsB,GAAG,YAAY,iBAAiB,OAAO;CAEzE,QAAQ,UAAU;CAElB,MAAM,cAAc,iBAAiB,SAAS,gBAAgB;CAC9D,MAAM,cAAc,kBAAkB,OAAO;CAE7C,MAAM,YAAY,gBAAgB,gBAAgB;EACjD,mBAAmB;EAKnB,mBAAmB;EACnB,yBAAyB;EAGzB,oBAAoB,MAAM,KAAK;EAE/B,qBAAqB,MAAM,KAAK;CAOjC,EAAE;CAEF,2BACQ;EACN,QAAQ,MAAM;EACd,eAAe,UAAU;CAC1B,KACC,EAAE,QAAQ,oBAAoB;EAC9B,IAAI,CAAC,UAAU,CAAC,eAAe;EAG/B,OAAO,oBAAoB;GAC1B;GACA,gBAAgB,gBAAgB,UAAU,KAAK;EAChD,CAAC;CACF,CACD;CAEA,2BACQ;EAAS;EAAO,UAAU,EAAE,GAAG,MAAM;CAAE,KAC7C,EAAE,OAAO,eAAe;EACxB,IAAI,CAAC,OAAO;EACZ,QAAQ,MAAM,QAAQ;CACvB,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,MAAM,YAAY,SAAS,gBAAgB;EAC3C,QAAQ,cACP,IAAI,YAAY,WAAW;GAC1B,SAAS;GACT,QAAQ;IAAE;IAAQ,eAAe;GAAQ;EAC1C,CAAC,CACF;EACA,QAAQ,cACP,IAAI,YAAY,iBAAiB;GAChC,SAAS;GACT,QAAQ;IAAE;IAAQ,eAAe;GAAQ;EAC1C,CAAC,CACF;CACD,CACD;CAEA,2BACQ;EACN,QAAQ,MAAM;EACd,aAAa,MAAM;EACnB,WAAW,UAAU;EACrB,iBAAiB,UAAU;CAC5B,KACC,EAAE,QAAQ,aAAa,WAAW,sBAAsB;EACxD,IAAI,CAAC,QAAQ;EACb,IAAI,OAAO,QAAQ,IAAI,mBAAmB,OAAO;EACjD,YAAY,OAAO;EAInB,IAAI,CAAC,mBAAmB,aAAa;EACrC,YAAY,OAAO;EACnB,UAAU,SAAS;EAGnB,aAAa;GACZ,UAAU,WAAW;GACrB,YAAY,QAAQ;EACrB;CACD,CACD;CAEA,2BACQ;EACN,QAAQ,MAAM;EACd,aAAa,MAAM;EACnB,iBAAiB,MAAM;CACxB,KACC,EAAE,QAAQ,aAAa,sBAAsB;EAC7C,IAAI,CAAC,UAAU,eAAe,CAAC,iBAAiB;EAEhD,kBAAkB,SAAS,EAC1B,iBAAiB,OAAoB;GACpC,IAAI,cAAc,aAAa;IAC9B,IAAI,UAAU;IACd,OAAO,WAAW,YAAY,SAAS,MAAM;KAC5C,IAAI,QAAQ,YAAY,kBACvB,OAAO;KAGR,UAAU,QAAQ;IACnB;GACD;GACA,OAAO;EACR,EACD,CAAC;EAOD,aAAa,iBAAiB,OAAO;CACtC,CACD;CAEA,0BACO,MAAM,SACX,QAAQ,aAAa;EAGrB,IAAI,aAAa,KAAA,KAAa,QAAQ;EAKtC,oBAAoB,OAAO;CAC5B,CACD;CAEA,2BACQ;EAAE,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;CAAe,KACnE,EAAE,QAAQ,qBAAqB;EAC/B,IAAI,QAAQ;EACZ,IAAI,OACH,QAAQ,IAAI,yCAAyC,cAAc;EAGpE,QAAa,IAAI,cAAc,CAAC,CAC9B,WAAW,YAAY,OAAO,CAAC,CAAC,CAChC,WAAW;GACX,IAAI,OAAO,QAAQ,IAAI,kBAAkB,OAAO;EACjD,CAAC;CACH,CACD;CAEA,gBAAgB;EACf,iBAAiB,OAAO;CACzB,CAAC;AACF"}
|