@universityofmaryland/web-elements-library 1.6.5 → 1.6.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAuTnD,eAAO,MAAM,4BAA4B,UA9BE,kBAAkB,8BA8BS,CAAC"}
|
|
@@ -12,17 +12,15 @@ const createFacebookButton = () => {
|
|
|
12
12
|
height: "30px"
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
}).withAria({ label: "share this page on facebook" }).
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
);
|
|
25
|
-
}
|
|
15
|
+
}).withAria({ label: "share this page on facebook" }).on("click", () => {
|
|
16
|
+
const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
|
|
17
|
+
window.location.toString()
|
|
18
|
+
)}`;
|
|
19
|
+
window.open(
|
|
20
|
+
shareURL,
|
|
21
|
+
"Facebook",
|
|
22
|
+
"toolbar=0,status=0,width=626,height=436"
|
|
23
|
+
);
|
|
26
24
|
}).build();
|
|
27
25
|
return model;
|
|
28
26
|
};
|
|
@@ -30,15 +28,13 @@ const createTwitterButton = ({
|
|
|
30
28
|
url,
|
|
31
29
|
title
|
|
32
30
|
}) => {
|
|
33
|
-
const model = new ElementBuilder("button").withHTML(x).withAria({ label: "share this page on twitter" }).
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
);
|
|
41
|
-
}
|
|
31
|
+
const model = new ElementBuilder("button").withHTML(x).withAria({ label: "share this page on twitter" }).on("click", () => {
|
|
32
|
+
const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
|
|
33
|
+
window.open(
|
|
34
|
+
shareURL,
|
|
35
|
+
"sharer",
|
|
36
|
+
"toolbar=0,status=0,width=626,height=436"
|
|
37
|
+
);
|
|
42
38
|
}).build();
|
|
43
39
|
return model;
|
|
44
40
|
};
|
|
@@ -57,9 +53,7 @@ const createEmailLink = ({
|
|
|
57
53
|
target: "_blank"
|
|
58
54
|
}).withAria({ label: "email this page" }).build();
|
|
59
55
|
const createPrintButton = () => {
|
|
60
|
-
const model = new ElementBuilder("button").withHTML(print).withAria({ label: "print this page" }).
|
|
61
|
-
click: () => window.print()
|
|
62
|
-
}).build();
|
|
56
|
+
const model = new ElementBuilder("button").withHTML(print).withAria({ label: "print this page" }).on("click", () => window.print()).build();
|
|
63
57
|
return model;
|
|
64
58
|
};
|
|
65
59
|
const createContainer = (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\nimport {\n facebook as iconFacebook,\n x as iconX,\n} from '@universityofmaryland/web-icons-library/social';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport type { ElementModel } from '../../_types';\nimport type { SocialSharingProps } from './_types';\n\nconst createFacebookButton = (): ElementModel<HTMLButtonElement> => {\n const model = new ElementBuilder<HTMLButtonElement>('button')\n .withClassName('social-sharing-facebook')\n .withHTML(iconFacebook)\n .withStyles({\n element: {\n ['& svg']: {\n width: '34px',\n height: '30px',\n },\n },\n })\n .withAria({ label: 'share this page on facebook' })\n .withEvents({\n click: () => {\n const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n window.location.toString(),\n )}`;\n\n window.open(\n shareURL,\n 'Facebook',\n 'toolbar=0,status=0,width=626,height=436',\n );\n },\n })\n .build();\n\n return model;\n};\n\nconst createTwitterButton = ({\n url,\n title,\n}: Pick<\n SocialSharingProps,\n 'url' | 'title'\n>): ElementModel<HTMLButtonElement> => {\n const model = new ElementBuilder<HTMLButtonElement>('button')\n .withHTML(iconX)\n .withAria({ label: 'share this page on twitter' })\n .withEvents({\n click: () => {\n const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n window.open(\n shareURL,\n 'sharer',\n 'toolbar=0,status=0,width=626,height=436',\n );\n },\n })\n .build();\n\n return model;\n};\n\nconst createEmailLink = ({\n url,\n title,\n}: Pick<\n SocialSharingProps,\n 'url' | 'title'\n>): ElementModel<HTMLAnchorElement> =>\n new ElementBuilder<HTMLAnchorElement>('a')\n .withClassName('social-sharing-email')\n .withStyles({\n element: {\n ['& svg']: {\n width: '21px',\n height: '20px',\n },\n },\n })\n .withHTML(iconEmail)\n .withAttributes({\n href: `mailto:?subject=${title}&body=${url}`,\n target: '_blank',\n })\n .withAria({ label: 'email this page' })\n .build();\n\nconst createPrintButton = (): ElementModel<HTMLButtonElement> => {\n const model = new ElementBuilder<HTMLButtonElement>('button')\n .withHTML(iconPrint)\n .withAria({ label: 'print this page' })\n .withEvents({\n click: () => window.print(),\n })\n .build();\n\n return model;\n};\n\nconst createContainer = (\n props: SocialSharingProps,\n): ElementModel<HTMLElement> => {\n const {\n includeFacebook = true,\n includeTwitter = true,\n includeEmail = false,\n includePrint = false,\n isFixed = false,\n title: defaultTitle,\n url: defaultUrl,\n } = props;\n\n const title = defaultTitle || document.title;\n const url = defaultUrl || window.location.toString();\n\n const container = new ElementBuilder()\n .withClassName('social-sharing-container')\n .withStyles({\n element: {\n display: 'flex',\n transition: 'transform 250ms ease-in-out',\n\n ['& > *']: {\n height: token.spacing['2xl'],\n width: token.spacing['2xl'],\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n border: `1px solid ${token.color.gray.light}`,\n backgroundColor: token.color.white,\n transition: 'background-color 250ms ease-in-out',\n },\n\n ['& > button:hover, & > button:focus, & > a:hover, & > a:focus']: {\n backgroundColor: token.color.gray.dark,\n\n ['svg path']: {\n fill: token.color.white,\n },\n },\n\n ['& > *:not(:last-child)']: {\n borderRight: 'none',\n },\n\n ['& svg']: {\n display: 'block',\n transition: 'fill 250ms ease-in-out',\n },\n\n ['& svg path']: {\n fill: token.color.black,\n },\n\n [`@media (${token.media.queries.tablet.min})`]: {\n ['&[fixed]']: {\n flexDirection: 'column',\n },\n\n ['&[fixed] > *:not(:last-child)']: {\n borderRight: `1px solid ${token.color.gray.light}`,\n borderBottom: 'none',\n },\n },\n },\n });\n\n if (isFixed) {\n container.withAttribute('fixed', '');\n }\n\n if (includeFacebook) {\n container.withChild(createFacebookButton());\n }\n\n if (includeTwitter) {\n container.withChild(\n createTwitterButton({\n title,\n url,\n }),\n );\n }\n\n if (includeEmail) {\n container.withChild(\n createEmailLink({\n title,\n url,\n }),\n );\n }\n\n if (includePrint) {\n container.withChild(createPrintButton());\n }\n\n return container.build();\n};\n\nconst setupFixedBehaviour = ({\n container,\n declaration,\n}: {\n container: HTMLElement;\n declaration: HTMLElement;\n}) => {\n const defaultStartingPosition = -100;\n\n const getSpacing = () => {\n if (window.innerWidth > 768) {\n return 40;\n }\n\n return 8;\n };\n let startingPosition: number | null = null;\n let isShowing = false;\n\n const setVisiblePosition = () => {\n if (!isShowing) {\n container.style.transform = 'translateX(0)';\n isShowing = true;\n }\n };\n\n const setHiddenPosition = () => {\n if (isShowing) {\n isShowing = false;\n\n if (startingPosition) {\n const spacing = getSpacing();\n const translateAmount = window.innerWidth - startingPosition;\n const position = translateAmount + spacing + container.offsetWidth;\n\n container.style.transform = `translateX(-${position}px)`;\n } else {\n container.style.transform = `translateX(${defaultStartingPosition}vh)`;\n }\n }\n };\n\n const eventResize = () => {\n startingPosition = declaration.getBoundingClientRect().left;\n };\n\n const eventScroll = () => {\n const windowHeight = window.innerHeight;\n const pagePosition = window.scrollY;\n const isNearBottom =\n pagePosition + windowHeight >=\n document.body.scrollHeight - windowHeight / 2;\n\n const shouldShow = !isNearBottom;\n\n if (shouldShow) {\n setVisiblePosition();\n } else {\n setHiddenPosition();\n }\n };\n\n const load = () => {\n startingPosition = declaration.getBoundingClientRect().left;\n container.style.transition = 'none';\n setHiddenPosition();\n\n setTimeout(() => {\n container.style.transition = 'transform 250ms ease-in-out';\n }, 100);\n };\n\n window.addEventListener(\n 'scroll',\n debounce(() => eventScroll(), 20),\n );\n\n window.addEventListener(\n 'resize',\n debounce(() => eventResize(), 20),\n );\n\n return {\n load,\n onScroll: eventScroll,\n onResize: eventResize,\n setHiddenPosition,\n };\n};\n\nconst CreateSocialSharingElement = (props: SocialSharingProps) => {\n const { isFixed = false } = props;\n const containerModel = createContainer(props);\n\n const declarationModel = new ElementBuilder()\n .withClassName('social-sharing-declarion')\n .withChild(containerModel)\n .withStyles({\n element: {\n container: 'umd-element-social-sharing / inline-size',\n },\n })\n .build();\n\n const model: ElementModel<HTMLElement> = {\n ...declarationModel,\n };\n\n if (isFixed) {\n const { load } = setupFixedBehaviour({\n container: containerModel.element,\n declaration: declarationModel.element,\n });\n\n model.events = { load };\n }\n\n return model;\n};\n\nexport const createCompositeSocialSharing = CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\nimport {\n facebook as iconFacebook,\n x as iconX,\n} from '@universityofmaryland/web-icons-library/social';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport type { ElementModel } from '../../_types';\nimport type { SocialSharingProps } from './_types';\n\nconst createFacebookButton = (): ElementModel<HTMLButtonElement> => {\n const model = new ElementBuilder<HTMLButtonElement>('button')\n .withClassName('social-sharing-facebook')\n .withHTML(iconFacebook)\n .withStyles({\n element: {\n ['& svg']: {\n width: '34px',\n height: '30px',\n },\n },\n })\n .withAria({ label: 'share this page on facebook' })\n .on('click', () => {\n const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n window.location.toString(),\n )}`;\n\n window.open(\n shareURL,\n 'Facebook',\n 'toolbar=0,status=0,width=626,height=436',\n );\n })\n .build();\n\n return model;\n};\n\nconst createTwitterButton = ({\n url,\n title,\n}: Pick<\n SocialSharingProps,\n 'url' | 'title'\n>): ElementModel<HTMLButtonElement> => {\n const model = new ElementBuilder<HTMLButtonElement>('button')\n .withHTML(iconX)\n .withAria({ label: 'share this page on twitter' })\n .on('click', () => {\n const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n window.open(\n shareURL,\n 'sharer',\n 'toolbar=0,status=0,width=626,height=436',\n );\n })\n .build();\n\n return model;\n};\n\nconst createEmailLink = ({\n url,\n title,\n}: Pick<\n SocialSharingProps,\n 'url' | 'title'\n>): ElementModel<HTMLAnchorElement> =>\n new ElementBuilder<HTMLAnchorElement>('a')\n .withClassName('social-sharing-email')\n .withStyles({\n element: {\n ['& svg']: {\n width: '21px',\n height: '20px',\n },\n },\n })\n .withHTML(iconEmail)\n .withAttributes({\n href: `mailto:?subject=${title}&body=${url}`,\n target: '_blank',\n })\n .withAria({ label: 'email this page' })\n .build();\n\nconst createPrintButton = (): ElementModel<HTMLButtonElement> => {\n const model = new ElementBuilder<HTMLButtonElement>('button')\n .withHTML(iconPrint)\n .withAria({ label: 'print this page' })\n .on('click', () => window.print())\n .build();\n\n return model;\n};\n\nconst createContainer = (\n props: SocialSharingProps,\n): ElementModel<HTMLElement> => {\n const {\n includeFacebook = true,\n includeTwitter = true,\n includeEmail = false,\n includePrint = false,\n isFixed = false,\n title: defaultTitle,\n url: defaultUrl,\n } = props;\n\n const title = defaultTitle || document.title;\n const url = defaultUrl || window.location.toString();\n\n const container = new ElementBuilder()\n .withClassName('social-sharing-container')\n .withStyles({\n element: {\n display: 'flex',\n transition: 'transform 250ms ease-in-out',\n\n ['& > *']: {\n height: token.spacing['2xl'],\n width: token.spacing['2xl'],\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n border: `1px solid ${token.color.gray.light}`,\n backgroundColor: token.color.white,\n transition: 'background-color 250ms ease-in-out',\n },\n\n ['& > button:hover, & > button:focus, & > a:hover, & > a:focus']: {\n backgroundColor: token.color.gray.dark,\n\n ['svg path']: {\n fill: token.color.white,\n },\n },\n\n ['& > *:not(:last-child)']: {\n borderRight: 'none',\n },\n\n ['& svg']: {\n display: 'block',\n transition: 'fill 250ms ease-in-out',\n },\n\n ['& svg path']: {\n fill: token.color.black,\n },\n\n [`@media (${token.media.queries.tablet.min})`]: {\n ['&[fixed]']: {\n flexDirection: 'column',\n },\n\n ['&[fixed] > *:not(:last-child)']: {\n borderRight: `1px solid ${token.color.gray.light}`,\n borderBottom: 'none',\n },\n },\n },\n });\n\n if (isFixed) {\n container.withAttribute('fixed', '');\n }\n\n if (includeFacebook) {\n container.withChild(createFacebookButton());\n }\n\n if (includeTwitter) {\n container.withChild(\n createTwitterButton({\n title,\n url,\n }),\n );\n }\n\n if (includeEmail) {\n container.withChild(\n createEmailLink({\n title,\n url,\n }),\n );\n }\n\n if (includePrint) {\n container.withChild(createPrintButton());\n }\n\n return container.build();\n};\n\nconst setupFixedBehaviour = ({\n container,\n declaration,\n}: {\n container: HTMLElement;\n declaration: HTMLElement;\n}) => {\n const defaultStartingPosition = -100;\n\n const getSpacing = () => {\n if (window.innerWidth > 768) {\n return 40;\n }\n\n return 8;\n };\n let startingPosition: number | null = null;\n let isShowing = false;\n\n const setVisiblePosition = () => {\n if (!isShowing) {\n container.style.transform = 'translateX(0)';\n isShowing = true;\n }\n };\n\n const setHiddenPosition = () => {\n if (isShowing) {\n isShowing = false;\n\n if (startingPosition) {\n const spacing = getSpacing();\n const translateAmount = window.innerWidth - startingPosition;\n const position = translateAmount + spacing + container.offsetWidth;\n\n container.style.transform = `translateX(-${position}px)`;\n } else {\n container.style.transform = `translateX(${defaultStartingPosition}vh)`;\n }\n }\n };\n\n const eventResize = () => {\n startingPosition = declaration.getBoundingClientRect().left;\n };\n\n const eventScroll = () => {\n const windowHeight = window.innerHeight;\n const pagePosition = window.scrollY;\n const isNearBottom =\n pagePosition + windowHeight >=\n document.body.scrollHeight - windowHeight / 2;\n\n const shouldShow = !isNearBottom;\n\n if (shouldShow) {\n setVisiblePosition();\n } else {\n setHiddenPosition();\n }\n };\n\n const load = () => {\n startingPosition = declaration.getBoundingClientRect().left;\n container.style.transition = 'none';\n setHiddenPosition();\n\n setTimeout(() => {\n container.style.transition = 'transform 250ms ease-in-out';\n }, 100);\n };\n\n window.addEventListener(\n 'scroll',\n debounce(() => eventScroll(), 20),\n );\n\n window.addEventListener(\n 'resize',\n debounce(() => eventResize(), 20),\n );\n\n return {\n load,\n onScroll: eventScroll,\n onResize: eventResize,\n setHiddenPosition,\n };\n};\n\nconst CreateSocialSharingElement = (props: SocialSharingProps) => {\n const { isFixed = false } = props;\n const containerModel = createContainer(props);\n\n const declarationModel = new ElementBuilder()\n .withClassName('social-sharing-declarion')\n .withChild(containerModel)\n .withStyles({\n element: {\n container: 'umd-element-social-sharing / inline-size',\n },\n })\n .build();\n\n const model: ElementModel<HTMLElement> = {\n ...declarationModel,\n };\n\n if (isFixed) {\n const { load } = setupFixedBehaviour({\n container: containerModel.element,\n declaration: declarationModel.element,\n });\n\n model.events = { load };\n }\n\n return model;\n};\n\nexport const createCompositeSocialSharing = CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":";;;;;;AAYA,MAAM,uBAAuB,MAAuC;AAClE,QAAM,QAAQ,IAAI,eAAkC,QAAQ,EACzD,cAAc,yBAAyB,EACvC,SAASA,QAAY,EACrB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD,EACA,SAAS,EAAE,OAAO,+BAA+B,EACjD,GAAG,SAAS,MAAM;AACjB,UAAM,WAAW,uCAAuC;AAAA,MACtD,OAAO,SAAS,SAAA;AAAA,IAAS,CAC1B;AAED,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC,EACA,MAAA;AAEH,SAAO;AACT;AAEA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGuC;AACrC,QAAM,QAAQ,IAAI,eAAkC,QAAQ,EACzD,SAASC,CAAK,EACd,SAAS,EAAE,OAAO,6BAAA,CAA8B,EAChD,GAAG,SAAS,MAAM;AACjB,UAAM,WAAW,gCAAgC,GAAG,SAAS,KAAK;AAElE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC,EACA,MAAA;AAEH,SAAO;AACT;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAIE,IAAI,eAAkC,GAAG,EACtC,cAAc,sBAAsB,EACpC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,CAAC,OAAO,GAAG;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,EACA,SAASC,KAAS,EAClB,eAAe;AAAA,EACd,MAAM,mBAAmB,KAAK,SAAS,GAAG;AAAA,EAC1C,QAAQ;AACV,CAAC,EACA,SAAS,EAAE,OAAO,kBAAA,CAAmB,EACrC,MAAA;AAEL,MAAM,oBAAoB,MAAuC;AAC/D,QAAM,QAAQ,IAAI,eAAkC,QAAQ,EACzD,SAASC,KAAS,EAClB,SAAS,EAAE,OAAO,kBAAA,CAAmB,EACrC,GAAG,SAAS,MAAM,OAAO,MAAA,CAAO,EAChC,MAAA;AAEH,SAAO;AACT;AAEA,MAAM,kBAAkB,CACtB,UAC8B;AAC9B,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA,IACH;AAEJ,QAAM,QAAQ,gBAAgB,SAAS;AACvC,QAAM,MAAM,cAAc,OAAO,SAAS,SAAA;AAE1C,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MAEZ,CAAC,OAAO,GAAG;AAAA,QACT,QAAQ,MAAM,QAAQ,KAAK;AAAA,QAC3B,OAAO,MAAM,QAAQ,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ,aAAa,MAAM,MAAM,KAAK,KAAK;AAAA,QAC3C,iBAAiB,MAAM,MAAM;AAAA,QAC7B,YAAY;AAAA,MAAA;AAAA,MAGd,CAAC,8DAA8D,GAAG;AAAA,QAChE,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAElC,CAAC,UAAU,GAAG;AAAA,UACZ,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,MAGF,CAAC,wBAAwB,GAAG;AAAA,QAC1B,aAAa;AAAA,MAAA;AAAA,MAGf,CAAC,OAAO,GAAG;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,MAGd,CAAC,YAAY,GAAG;AAAA,QACd,MAAM,MAAM,MAAM;AAAA,MAAA;AAAA,MAGpB,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,CAAC,UAAU,GAAG;AAAA,UACZ,eAAe;AAAA,QAAA;AAAA,QAGjB,CAAC,+BAA+B,GAAG;AAAA,UACjC,aAAa,aAAa,MAAM,MAAM,KAAK,KAAK;AAAA,UAChD,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,SAAS;AACX,cAAU,cAAc,SAAS,EAAE;AAAA,EACrC;AAEA,MAAI,iBAAiB;AACnB,cAAU,UAAU,sBAAsB;AAAA,EAC5C;AAEA,MAAI,gBAAgB;AAClB,cAAU;AAAA,MACR,oBAAoB;AAAA,QAClB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,cAAc;AAChB,cAAU;AAAA,MACR,gBAAgB;AAAA,QACd;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,cAAc;AAChB,cAAU,UAAU,mBAAmB;AAAA,EACzC;AAEA,SAAO,UAAU,MAAA;AACnB;AAEA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,0BAA0B;AAEhC,QAAM,aAAa,MAAM;AACvB,QAAI,OAAO,aAAa,KAAK;AAC3B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AACA,MAAI,mBAAkC;AACtC,MAAI,YAAY;AAEhB,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,YAAY;AAC5B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,WAAW;AACb,kBAAY;AAEZ,UAAI,kBAAkB;AACpB,cAAM,UAAU,WAAA;AAChB,cAAM,kBAAkB,OAAO,aAAa;AAC5C,cAAM,WAAW,kBAAkB,UAAU,UAAU;AAEvD,kBAAU,MAAM,YAAY,eAAe,QAAQ;AAAA,MACrD,OAAO;AACL,kBAAU,MAAM,YAAY,cAAc,uBAAuB;AAAA,MACnE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,uBAAmB,YAAY,wBAAwB;AAAA,EACzD;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,eAAe,OAAO;AAC5B,UAAM,eAAe,OAAO;AAC5B,UAAM,eACJ,eAAe,gBACf,SAAS,KAAK,eAAe,eAAe;AAE9C,UAAM,aAAa,CAAC;AAEpB,QAAI,YAAY;AACd,yBAAA;AAAA,IACF,OAAO;AACL,wBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,MAAM;AACjB,uBAAmB,YAAY,wBAAwB;AACvD,cAAU,MAAM,aAAa;AAC7B,sBAAA;AAEA,eAAW,MAAM;AACf,gBAAU,MAAM,aAAa;AAAA,IAC/B,GAAG,GAAG;AAAA,EACR;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM,YAAA,GAAe,EAAE;AAAA,EAAA;AAGlC,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM,YAAA,GAAe,EAAE;AAAA,EAAA;AAGlC,SAAO;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,EAAA;AAEJ;AAEA,MAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAM,EAAE,UAAU,MAAA,IAAU;AAC5B,QAAM,iBAAiB,gBAAgB,KAAK;AAE5C,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,0BAA0B,EACxC,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,QAAmC;AAAA,IACvC,GAAG;AAAA,EAAA;AAGL,MAAI,SAAS;AACX,UAAM,EAAE,KAAA,IAAS,oBAAoB;AAAA,MACnC,WAAW,eAAe;AAAA,MAC1B,aAAa,iBAAiB;AAAA,IAAA,CAC/B;AAED,UAAM,SAAS,EAAE,KAAA;AAAA,EACnB;AAEA,SAAO;AACT;AAEO,MAAM,+BAA+B;"}
|