@e280/shiny 0.1.0-4 → 0.1.0-6
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/README.md +8 -8
- package/package.json +3 -3
- package/s/components/drawer/component.ts +11 -3
- package/s/components/drawer/style.css.ts +11 -0
- package/s/demo/demo.bundle.ts +13 -7
- package/s/{install.bundle.ts → install/basic.bundle.ts} +2 -2
- package/s/themes/index.ts +1 -0
- package/x/components/drawer/component.d.ts +5 -3
- package/x/components/drawer/component.js +6 -3
- package/x/components/drawer/component.js.map +1 -1
- package/x/components/drawer/style.css.js +11 -0
- package/x/components/drawer/style.css.js.map +1 -1
- package/x/demo/demo.bundle.js +11 -7
- package/x/demo/demo.bundle.js.map +1 -1
- package/x/demo/demo.bundle.min.js +36 -22
- package/x/demo/demo.bundle.min.js.map +4 -4
- package/x/index.html +2 -2
- package/x/install/basic.bundle.js +5 -0
- package/x/install/basic.bundle.js.map +1 -0
- package/x/{install.bundle.min.js → install/basic.bundle.min.js} +24 -13
- package/x/{install.bundle.min.js.map → install/basic.bundle.min.js.map} +4 -4
- package/x/shiny.d.ts +14 -8
- package/x/themes/index.d.ts +1 -0
- package/x/install.bundle.js +0 -5
- package/x/install.bundle.js.map +0 -1
- /package/x/{install.bundle.d.ts → install/basic.bundle.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
# ✨shiny
|
|
4
|
+
# ✨shiny✨
|
|
5
5
|
> *web ui components*
|
|
6
6
|
|
|
7
7
|
- 💁 ***see all the components at https://shiny.e280.org/*** 👈
|
|
8
8
|
- 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
|
|
9
|
-
-
|
|
9
|
+
- 🎭 duality: all components are available as ***web components*** or ***sly views***
|
|
10
10
|
- 🧑💻 a project by https://e280.org/
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
<br/><br/>
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## 🍭 instant html installation
|
|
17
17
|
- put this in your html `<head>`
|
|
18
18
|
```html
|
|
19
|
-
<script async src="https://shiny.e280.org/install.bundle.min.js"></script>
|
|
19
|
+
<script async src="https://shiny.e280.org/install/basic.bundle.min.js"></script>
|
|
20
20
|
```
|
|
21
21
|
- you're ready to put shiny components in your html `<body>`
|
|
22
22
|
```html
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
<br/><br/>
|
|
30
30
|
|
|
31
|
-
##
|
|
31
|
+
## 🍬 web app installation
|
|
32
32
|
- install shiny and friends
|
|
33
33
|
```sh
|
|
34
34
|
npm install @e280/shiny @e280/sly lit
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
<br/><br/>
|
|
53
53
|
|
|
54
|
-
##
|
|
54
|
+
## 😎 views are for the cool kids
|
|
55
55
|
- hey, remember those `views` you got from the install snippet?
|
|
56
56
|
```ts
|
|
57
57
|
const {components, views} = shiny({theme: themes.basic})
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
<br/><br/>
|
|
84
84
|
|
|
85
|
-
##
|
|
85
|
+
## 💅 page-wide css customization
|
|
86
86
|
- put this in your `<head>` and you can customize colors and stuff
|
|
87
87
|
```html
|
|
88
88
|
<style>
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
|
|
102
102
|
<br/><br/>
|
|
103
103
|
|
|
104
|
-
##
|
|
104
|
+
## 🧑💻 by e280
|
|
105
105
|
reward us with github stars
|
|
106
106
|
build with us at https://e280.org/ if you're good at dev
|
|
107
107
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@e280/shiny",
|
|
3
|
-
"version": "0.1.0-
|
|
3
|
+
"version": "0.1.0-6",
|
|
4
4
|
"description": "✨ web ui components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"s"
|
|
15
15
|
],
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@e280/sly": "^0.2.0-
|
|
17
|
+
"@e280/sly": "^0.2.0-25",
|
|
18
18
|
"lit": "^3.3.1"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@e280/strata": "^0.2.0-14",
|
|
22
|
-
"@e280/stz": "^0.2.
|
|
22
|
+
"@e280/stz": "^0.2.9"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@e280/science": "^0.1.2",
|
|
@@ -9,11 +9,17 @@ import menu2Svg from "../../icons/tabler/menu-2.svg.js"
|
|
|
9
9
|
import {ShinyContext, ShinyElement} from "../framework.js"
|
|
10
10
|
|
|
11
11
|
export class ShinyDrawer extends (
|
|
12
|
-
view(use => (context: ShinyContext, options: {
|
|
12
|
+
view(use => (context: ShinyContext, options: {
|
|
13
|
+
button: boolean
|
|
14
|
+
side?: "left" | "right"
|
|
15
|
+
drawer?: Drawer
|
|
16
|
+
}) => {
|
|
17
|
+
|
|
13
18
|
use.name("shiny-drawer")
|
|
14
19
|
use.styles(context.theme, styleCss)
|
|
15
20
|
|
|
16
|
-
const button = options.button
|
|
21
|
+
const button = options.button
|
|
22
|
+
const side = options.side ?? "left"
|
|
17
23
|
const drawer = use.once(() => (options.drawer ?? new Drawer()))
|
|
18
24
|
|
|
19
25
|
use.mount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
|
|
@@ -24,7 +30,7 @@ export class ShinyDrawer extends (
|
|
|
24
30
|
dom.attrs(use.element).booleans.open = drawer.isOpen
|
|
25
31
|
|
|
26
32
|
return html`
|
|
27
|
-
<div class=shell ?data-open="${drawer.isOpen}">
|
|
33
|
+
<div class=shell ?data-open="${drawer.isOpen}" data-side="${side}">
|
|
28
34
|
<slot name=plate ?inert="${drawer.isOpen}"></slot>
|
|
29
35
|
|
|
30
36
|
<div class=clipper>
|
|
@@ -59,6 +65,7 @@ export class ShinyDrawer extends (
|
|
|
59
65
|
attrs = dom.attrs(this).spec({
|
|
60
66
|
open: Boolean,
|
|
61
67
|
button: Boolean,
|
|
68
|
+
side: String,
|
|
62
69
|
})
|
|
63
70
|
drawer = new Drawer(this.attrs.open)
|
|
64
71
|
get isOpen() { return this.drawer.isOpen }
|
|
@@ -69,6 +76,7 @@ export class ShinyDrawer extends (
|
|
|
69
76
|
.props(el => [el.context, {
|
|
70
77
|
drawer: el.drawer,
|
|
71
78
|
button: el.attrs.button,
|
|
79
|
+
side: el.attrs.side === "right" ? "right" : "left",
|
|
72
80
|
}] as const)
|
|
73
81
|
) {}
|
|
74
82
|
|
|
@@ -86,6 +86,17 @@ export default css`
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
+
&[data-side="right"] {
|
|
90
|
+
[part="tray"] {
|
|
91
|
+
right: 0;
|
|
92
|
+
transform: translateX(100%);
|
|
93
|
+
> button {
|
|
94
|
+
left: unset;
|
|
95
|
+
right: 100%;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
89
100
|
slot[name="plate"] {
|
|
90
101
|
display: block;
|
|
91
102
|
width: 100%;
|
package/s/demo/demo.bundle.ts
CHANGED
|
@@ -3,8 +3,9 @@ import {css, html} from "lit"
|
|
|
3
3
|
import {dom, view} from "@e280/sly"
|
|
4
4
|
import {shiny} from "../shiny.js"
|
|
5
5
|
import {basic} from "../themes/basic.css.js"
|
|
6
|
+
import {makeLipsumDispenser} from "./utils/lipsum.js"
|
|
6
7
|
import {Demonstration} from "./views/demonstration/view.js"
|
|
7
|
-
import {
|
|
8
|
+
import { Drawer } from "../components/drawer/drawer.js"
|
|
8
9
|
|
|
9
10
|
const {views} = shiny({theme: basic})
|
|
10
11
|
|
|
@@ -59,6 +60,7 @@ dom.register({ShinyDemo: view.component(use => {
|
|
|
59
60
|
}
|
|
60
61
|
`,
|
|
61
62
|
}),
|
|
63
|
+
|
|
62
64
|
Demonstration({
|
|
63
65
|
views,
|
|
64
66
|
name: "shiny-drawer",
|
|
@@ -67,16 +69,19 @@ dom.register({ShinyDemo: view.component(use => {
|
|
|
67
69
|
`,
|
|
68
70
|
snippets: [
|
|
69
71
|
[labels.html, `
|
|
70
|
-
<shiny-drawer button>
|
|
72
|
+
<shiny-drawer button side=left>
|
|
71
73
|
<header>example</header>
|
|
72
74
|
<section slot=plate>lorem kettlebell..</section>
|
|
73
75
|
</shiny-drawer>
|
|
74
76
|
`],
|
|
75
77
|
[labels.view, `
|
|
76
|
-
ShinyDrawer
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
ShinyDrawer
|
|
79
|
+
.props({button: true, side: "left"})
|
|
80
|
+
.children(html\`
|
|
81
|
+
<header>example</header>
|
|
82
|
+
<section slot=plate>lorem kettlebell..</section>
|
|
83
|
+
\`)
|
|
84
|
+
.render()
|
|
80
85
|
`],
|
|
81
86
|
[labels.css, `
|
|
82
87
|
shiny-drawer {
|
|
@@ -89,7 +94,8 @@ dom.register({ShinyDemo: view.component(use => {
|
|
|
89
94
|
}
|
|
90
95
|
`],
|
|
91
96
|
],
|
|
92
|
-
content: views.ShinyDrawer
|
|
97
|
+
content: views.ShinyDrawer
|
|
98
|
+
.props({button: true})
|
|
93
99
|
.children(html`
|
|
94
100
|
<header>
|
|
95
101
|
<h2>example drawer</h2>
|
package/s/themes/index.ts
CHANGED
|
@@ -5,6 +5,7 @@ declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
|
|
|
5
5
|
attrs: import("@e280/sly").AttrTypes<{
|
|
6
6
|
open: BooleanConstructor;
|
|
7
7
|
button: BooleanConstructor;
|
|
8
|
+
side: StringConstructor;
|
|
8
9
|
}>;
|
|
9
10
|
drawer: Drawer;
|
|
10
11
|
get isOpen(): boolean;
|
|
@@ -372,10 +373,11 @@ declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
|
|
|
372
373
|
focus(options?: FocusOptions): void;
|
|
373
374
|
};
|
|
374
375
|
styles: import("lit").CSSResultGroup | undefined;
|
|
375
|
-
}, [context: ShinyContext, options
|
|
376
|
-
button
|
|
376
|
+
}, [context: ShinyContext, options: {
|
|
377
|
+
button: boolean;
|
|
378
|
+
side?: "left" | "right";
|
|
377
379
|
drawer?: Drawer;
|
|
378
|
-
}
|
|
380
|
+
}]>;
|
|
379
381
|
export declare class ShinyDrawer extends ShinyDrawer_base {
|
|
380
382
|
}
|
|
381
383
|
export {};
|
|
@@ -5,10 +5,11 @@ import styleCss from "./style.css.js";
|
|
|
5
5
|
import xSvg from "../../icons/tabler/x.svg.js";
|
|
6
6
|
import menu2Svg from "../../icons/tabler/menu-2.svg.js";
|
|
7
7
|
import { ShinyElement } from "../framework.js";
|
|
8
|
-
export class ShinyDrawer extends (view(use => (context, options
|
|
8
|
+
export class ShinyDrawer extends (view(use => (context, options) => {
|
|
9
9
|
use.name("shiny-drawer");
|
|
10
10
|
use.styles(context.theme, styleCss);
|
|
11
|
-
const button = options.button
|
|
11
|
+
const button = options.button;
|
|
12
|
+
const side = options.side ?? "left";
|
|
12
13
|
const drawer = use.once(() => (options.drawer ?? new Drawer()));
|
|
13
14
|
use.mount(() => dom.events(window, { keydown: (event) => {
|
|
14
15
|
if (event.code === "Escape")
|
|
@@ -16,7 +17,7 @@ export class ShinyDrawer extends (view(use => (context, options = {}) => {
|
|
|
16
17
|
} }));
|
|
17
18
|
dom.attrs(use.element).booleans.open = drawer.isOpen;
|
|
18
19
|
return html `
|
|
19
|
-
<div class=shell ?data-open="${drawer.isOpen}">
|
|
20
|
+
<div class=shell ?data-open="${drawer.isOpen}" data-side="${side}">
|
|
20
21
|
<slot name=plate ?inert="${drawer.isOpen}"></slot>
|
|
21
22
|
|
|
22
23
|
<div class=clipper>
|
|
@@ -51,6 +52,7 @@ export class ShinyDrawer extends (view(use => (context, options = {}) => {
|
|
|
51
52
|
attrs = dom.attrs(this).spec({
|
|
52
53
|
open: Boolean,
|
|
53
54
|
button: Boolean,
|
|
55
|
+
side: String,
|
|
54
56
|
});
|
|
55
57
|
drawer = new Drawer(this.attrs.open);
|
|
56
58
|
get isOpen() { return this.drawer.isOpen; }
|
|
@@ -61,6 +63,7 @@ export class ShinyDrawer extends (view(use => (context, options = {}) => {
|
|
|
61
63
|
.props(el => [el.context, {
|
|
62
64
|
drawer: el.drawer,
|
|
63
65
|
button: el.attrs.button,
|
|
66
|
+
side: el.attrs.side === "right" ? "right" : "left",
|
|
64
67
|
}])) {
|
|
65
68
|
}
|
|
66
69
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/drawer/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,IAAI,MAAM,6BAA6B,CAAA;AAC9C,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AACvD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,WAAY,SAAQ,CAChC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/drawer/component.ts"],"names":[],"mappings":"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"}
|
|
@@ -85,6 +85,17 @@ export default css `
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
&[data-side="right"] {
|
|
89
|
+
[part="tray"] {
|
|
90
|
+
right: 0;
|
|
91
|
+
transform: translateX(100%);
|
|
92
|
+
> button {
|
|
93
|
+
left: unset;
|
|
94
|
+
right: 100%;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
88
99
|
slot[name="plate"] {
|
|
89
100
|
display: block;
|
|
90
101
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/drawer/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/drawer/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAA"}
|
package/x/demo/demo.bundle.js
CHANGED
|
@@ -2,8 +2,8 @@ import { css, html } from "lit";
|
|
|
2
2
|
import { dom, view } from "@e280/sly";
|
|
3
3
|
import { shiny } from "../shiny.js";
|
|
4
4
|
import { basic } from "../themes/basic.css.js";
|
|
5
|
-
import { Demonstration } from "./views/demonstration/view.js";
|
|
6
5
|
import { makeLipsumDispenser } from "./utils/lipsum.js";
|
|
6
|
+
import { Demonstration } from "./views/demonstration/view.js";
|
|
7
7
|
const { views } = shiny({ theme: basic });
|
|
8
8
|
const labels = {
|
|
9
9
|
html: "html web component",
|
|
@@ -61,16 +61,19 @@ dom.register({ ShinyDemo: view.component(use => {
|
|
|
61
61
|
`,
|
|
62
62
|
snippets: [
|
|
63
63
|
[labels.html, `
|
|
64
|
-
<shiny-drawer button>
|
|
64
|
+
<shiny-drawer button side=left>
|
|
65
65
|
<header>example</header>
|
|
66
66
|
<section slot=plate>lorem kettlebell..</section>
|
|
67
67
|
</shiny-drawer>
|
|
68
68
|
`],
|
|
69
69
|
[labels.view, `
|
|
70
|
-
ShinyDrawer
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
ShinyDrawer
|
|
71
|
+
.props({button: true, side: "left"})
|
|
72
|
+
.children(html\`
|
|
73
|
+
<header>example</header>
|
|
74
|
+
<section slot=plate>lorem kettlebell..</section>
|
|
75
|
+
\`)
|
|
76
|
+
.render()
|
|
74
77
|
`],
|
|
75
78
|
[labels.css, `
|
|
76
79
|
shiny-drawer {
|
|
@@ -83,7 +86,8 @@ dom.register({ ShinyDemo: view.component(use => {
|
|
|
83
86
|
}
|
|
84
87
|
`],
|
|
85
88
|
],
|
|
86
|
-
content: views.ShinyDrawer
|
|
89
|
+
content: views.ShinyDrawer
|
|
90
|
+
.props({ button: true })
|
|
87
91
|
.children(html `
|
|
88
92
|
<header>
|
|
89
93
|
<h2>example drawer</h2>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAG3D,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AAErC,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,oBAAoB;IAC1B,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,YAAY;CACjB,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE;IACpB,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAA;IACvC,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE,CAAA;AACpC,CAAC,CAAC,EAAE,CAAA;AAEJ,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;EAMb,CAAC,CAAA;QAEF,OAAO;YACN,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,QAAQ,EAAE;oBACT,CAAC,MAAM,CAAC,IAAI,EAAE;;KAEb,CAAC;oBACF,CAAC,MAAM,CAAC,IAAI,EAAE;;KAEb,CAAC;oBACF,CAAC,MAAM,CAAC,GAAG,EAAE;;;;;;;;KAQZ,CAAC;iBACF;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;gBACvC,KAAK,EAAE,GAAG,CAAA;;;;IAIT;aACD,CAAC;YAEF,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,QAAQ,EAAE;oBACT,CAAC,MAAM,CAAC,IAAI,EAAE;;;;;KAKb,CAAC;oBACF,CAAC,MAAM,CAAC,IAAI,EAAE;;;;;;;;KAQb,CAAC;oBACF,CAAC,MAAM,CAAC,GAAG,EAAE;;;;;;;;;KASZ,CAAC;iBACF;gBACD,OAAO,EAAE,KAAK,CAAC,WAAW;qBACxB,KAAK,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC;qBACrB,QAAQ,CAAC,IAAI,CAAA;;;;wBAIM,MAAM,EAAE;;;wBAGR,MAAM,EAAE;;KAE3B,CAAC;qBACD,MAAM,EAAE;gBACV,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCT;aACD,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}
|