@universityofmaryland/web-elements-library 1.7.0 → 1.7.2
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 +1 -1
- package/dist/atomic/layout/block/stacked.d.ts.map +1 -1
- package/dist/atomic/layout/block/stacked.js +0 -5
- package/dist/atomic/layout/block/stacked.js.map +1 -1
- package/dist/atomic/layout/overlay/modal.d.ts +2 -1
- package/dist/atomic/layout/overlay/modal.d.ts.map +1 -1
- package/dist/atomic/layout/overlay/modal.js +14 -1
- package/dist/atomic/layout/overlay/modal.js.map +1 -1
- package/dist/composite/carousel/elements/full-screen.d.ts +1 -1
- package/dist/composite/carousel/elements/full-screen.d.ts.map +1 -1
- package/dist/composite/carousel/elements/full-screen.js +5 -2
- package/dist/composite/carousel/elements/full-screen.js.map +1 -1
- package/dist/composite/carousel/elements/overlay.d.ts.map +1 -1
- package/dist/composite/carousel/elements/overlay.js +23 -15
- package/dist/composite/carousel/elements/overlay.js.map +1 -1
- package/package.json +4 -4
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":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC,kFAgDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,8EAO3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,
|
|
1
|
+
{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC,kFAgDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,8EAO3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFA2BA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAyCA,CAAC"}
|
|
@@ -62,11 +62,6 @@ const textContainer = ({
|
|
|
62
62
|
...createMediaQuery("min-width", mediumBreakpointStart, {
|
|
63
63
|
...hasImage && {
|
|
64
64
|
paddingTop: token.spacing.md
|
|
65
|
-
}
|
|
66
|
-
}),
|
|
67
|
-
...createMediaQuery("min-width", mediumBreakpointStart, {
|
|
68
|
-
...hasImage && {
|
|
69
|
-
paddingTop: token.spacing.lg
|
|
70
65
|
},
|
|
71
66
|
...hasBorder && {
|
|
72
67
|
padding: token.spacing.md
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n createMediaQuery,\n createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n hasImage?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: ElementModel[];\n customStyles?: Record<string, any>;\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-image')\n .withStyles({\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${assetElement.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.sm,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n }),\n\n ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n ...(hasBorder && {\n marginLeft: token.spacing.sm,\n }),\n }),\n\n ...customStyles,\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n hasImage = true,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-text')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n ...(hasImage && {\n paddingTop: token.spacing.md,\n }),\n
|
|
1
|
+
{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n createMediaQuery,\n createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n hasImage?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: ElementModel[];\n customStyles?: Record<string, any>;\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-image')\n .withStyles({\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${assetElement.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.sm,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n }),\n\n ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n ...(hasBorder && {\n marginLeft: token.spacing.sm,\n }),\n }),\n\n ...customStyles,\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n hasImage = true,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-text')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n ...(hasImage && {\n paddingTop: token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-container')\n .withStyles({\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${token.color.gray.darker}`,\n }),\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n"],"names":["assetElement"],"mappings":"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"}
|
|
@@ -2,7 +2,8 @@ type TypeFixedFullScreenProps = {
|
|
|
2
2
|
content: HTMLElement | null;
|
|
3
3
|
isHidden?: boolean;
|
|
4
4
|
context?: HTMLElement | null;
|
|
5
|
+
onHide?: () => void;
|
|
5
6
|
};
|
|
6
|
-
export declare const createModal: ({ content, isHidden, context, }: TypeFixedFullScreenProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
|
|
7
|
+
export declare const createModal: ({ content, isHidden, context, onHide, }: TypeFixedFullScreenProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
|
|
7
8
|
export {};
|
|
8
9
|
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yCAKzB,wBAAwB,kFAoG1B,CAAC"}
|
|
@@ -4,12 +4,14 @@ import { trapFocus } from "@universityofmaryland/web-utilities-library/accessibi
|
|
|
4
4
|
const createModal = ({
|
|
5
5
|
content,
|
|
6
6
|
isHidden,
|
|
7
|
-
context
|
|
7
|
+
context,
|
|
8
|
+
onHide
|
|
8
9
|
}) => {
|
|
9
10
|
const body = document.body;
|
|
10
11
|
const html = document.documentElement;
|
|
11
12
|
let eventReference = null;
|
|
12
13
|
let accessibiltyEventReference = null;
|
|
14
|
+
let scrollPosition = 0;
|
|
13
15
|
const backgroundBuilder = new ElementBuilder().withClassName("modal-screen-container-background").withStyles({
|
|
14
16
|
element: {
|
|
15
17
|
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
|
@@ -34,7 +36,12 @@ const createModal = ({
|
|
|
34
36
|
}).withChild(backgroundBuilder);
|
|
35
37
|
const container = containerBuilder.getElement();
|
|
36
38
|
const show = () => {
|
|
39
|
+
scrollPosition = window.scrollY;
|
|
37
40
|
container.style.display = "block";
|
|
41
|
+
body.style.position = "fixed";
|
|
42
|
+
body.style.top = `-${scrollPosition}px`;
|
|
43
|
+
body.style.left = "0";
|
|
44
|
+
body.style.right = "0";
|
|
38
45
|
body.style.overflow = "hidden";
|
|
39
46
|
body.style.height = "100%";
|
|
40
47
|
html.style.overflow = "hidden";
|
|
@@ -54,13 +61,19 @@ const createModal = ({
|
|
|
54
61
|
}, 100);
|
|
55
62
|
};
|
|
56
63
|
const hide = () => {
|
|
64
|
+
body.style.position = "";
|
|
65
|
+
body.style.top = "";
|
|
66
|
+
body.style.left = "";
|
|
67
|
+
body.style.right = "";
|
|
57
68
|
body.style.overflow = "visible";
|
|
58
69
|
body.style.height = "inherit";
|
|
59
70
|
html.style.overflow = "visible";
|
|
60
71
|
html.style.height = "inherit";
|
|
61
72
|
container.style.display = "none";
|
|
73
|
+
window.scrollTo(0, scrollPosition);
|
|
62
74
|
if (accessibiltyEventReference) accessibiltyEventReference();
|
|
63
75
|
if (eventReference) eventReference.removeEventListener("click", () => hide());
|
|
76
|
+
if (onHide) onHide();
|
|
64
77
|
if (context) context.dispatchEvent(new CustomEvent("modal:hide", { bubbles: true, composed: true }));
|
|
65
78
|
setTimeout(() => {
|
|
66
79
|
if (context) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement | null;\n isHidden?: boolean;\n context?: HTMLElement | null;\n};\n\nexport const createModal = ({\n content,\n isHidden,\n context,\n}: TypeFixedFullScreenProps) => {\n const body = document.body;\n const html = document.documentElement;\n let eventReference: any = null;\n let accessibiltyEventReference: any = null;\n\n const backgroundBuilder = new ElementBuilder()\n .withClassName('modal-screen-container-background')\n .withStyles({\n element: {\n backgroundColor: 'rgba(0, 0, 0, 0.9)',\n padding: `${token.spacing.xl} ${token.spacing.md}`,\n width: '100%',\n height: '100%',\n [`@media (${token.media.queries.tablet.min})`]: {\n padding: '10vh 10vw',\n },\n },\n })\n .withChildIf(!!content, content as HTMLElement);\n\n const containerBuilder = new ElementBuilder()\n .withClassName('modal-screen-container')\n .withStyles({\n element: {\n display: 'none',\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 999999,\n },\n })\n .withChild(backgroundBuilder);\n\n const container = containerBuilder.getElement();\n\n const show = () => {\n container.style.display = 'block';\n body.style.overflow = 'hidden';\n body.style.height = '100%';\n html.style.overflow = 'hidden';\n html.style.height = '100%';\n eventReference = container.addEventListener('click', (event) => {\n const target = event.target as HTMLElement;\n\n if (target === container) hide();\n });\n\n accessibiltyEventReference = trapFocus({\n element: container,\n action: hide,\n shadowDomContext: context || null,\n });\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:show', {bubbles: true, composed: true}))\n\n setTimeout(() => {\n if (content) content.focus();\n }, 100);\n };\n\n const hide = () => {\n body.style.overflow = 'visible';\n body.style.height = 'inherit';\n html.style.overflow = 'visible';\n html.style.height = 'inherit';\n container.style.display = 'none';\n\n if (accessibiltyEventReference) accessibiltyEventReference();\n\
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement | null;\n isHidden?: boolean;\n context?: HTMLElement | null;\n onHide?: () => void;\n};\n\nexport const createModal = ({\n content,\n isHidden,\n context,\n onHide,\n}: TypeFixedFullScreenProps) => {\n const body = document.body;\n const html = document.documentElement;\n let eventReference: any = null;\n let accessibiltyEventReference: any = null;\n let scrollPosition = 0;\n\n const backgroundBuilder = new ElementBuilder()\n .withClassName('modal-screen-container-background')\n .withStyles({\n element: {\n backgroundColor: 'rgba(0, 0, 0, 0.9)',\n padding: `${token.spacing.xl} ${token.spacing.md}`,\n width: '100%',\n height: '100%',\n [`@media (${token.media.queries.tablet.min})`]: {\n padding: '10vh 10vw',\n },\n },\n })\n .withChildIf(!!content, content as HTMLElement);\n\n const containerBuilder = new ElementBuilder()\n .withClassName('modal-screen-container')\n .withStyles({\n element: {\n display: 'none',\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 999999,\n },\n })\n .withChild(backgroundBuilder);\n\n const container = containerBuilder.getElement();\n\n const show = () => {\n scrollPosition = window.scrollY;\n container.style.display = 'block';\n body.style.position = 'fixed';\n body.style.top = `-${scrollPosition}px`;\n body.style.left = '0';\n body.style.right = '0';\n body.style.overflow = 'hidden';\n body.style.height = '100%';\n html.style.overflow = 'hidden';\n html.style.height = '100%';\n eventReference = container.addEventListener('click', (event) => {\n const target = event.target as HTMLElement;\n\n if (target === container) hide();\n });\n\n accessibiltyEventReference = trapFocus({\n element: container,\n action: hide,\n shadowDomContext: context || null,\n });\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:show', {bubbles: true, composed: true}))\n\n setTimeout(() => {\n if (content) content.focus();\n }, 100);\n };\n\n const hide = () => {\n body.style.position = '';\n body.style.top = '';\n body.style.left = '';\n body.style.right = '';\n body.style.overflow = 'visible';\n body.style.height = 'inherit';\n html.style.overflow = 'visible';\n html.style.height = 'inherit';\n container.style.display = 'none';\n window.scrollTo(0, scrollPosition);\n\n if (accessibiltyEventReference) accessibiltyEventReference();\n\n if (eventReference) eventReference.removeEventListener('click', () => hide());\n\n if (onHide) onHide();\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:hide', {bubbles: true, composed: true}))\n \n\t\tsetTimeout(() => {\n if (context) {\n const firstItem = context.querySelector('button, a') as HTMLElement;\n firstItem?.focus();\n }\n }, 100);\n };\n\n if (isHidden) container.style.display = 'none';\n\n return containerBuilder.withEvents({ show, hide }).build();\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AACtC,MAAI,iBAAiB;AAErB,QAAM,oBAAoB,IAAI,eAAA,EAC3B,cAAc,mCAAmC,EACjD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,MAChD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,CACD,EACA,YAAY,CAAC,CAAC,SAAS,OAAsB;AAEhD,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,wBAAwB,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACV,CACD,EACA,UAAU,iBAAiB;AAE9B,QAAM,YAAY,iBAAiB,WAAA;AAEnC,QAAM,OAAO,MAAM;AACjB,qBAAiB,OAAO;AACxB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,MAAM,IAAI,cAAc;AACnC,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,QAAQ;AACnB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6B,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAEH,QAAI,QAAS,SAAQ,cAAc,IAAI,YAAY,cAAc,EAAC,SAAS,MAAM,UAAU,KAAA,CAAK,CAAC;AAE/F,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,MAAM;AACjB,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,QAAQ;AACnB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAC1B,WAAO,SAAS,GAAG,cAAc;AAEjC,QAAI,2BAA4B,4BAAA;AAEhC,QAAI,eAAgB,gBAAe,oBAAoB,SAAS,MAAM,MAAM;AAE5E,QAAI,OAAQ,QAAA;AAEd,QAAI,QAAS,SAAQ,cAAc,IAAI,YAAY,cAAc,EAAC,SAAS,MAAM,UAAU,KAAA,CAAK,CAAC;AAEjG,eAAW,MAAM;AACb,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO,iBAAiB,WAAW,EAAE,MAAM,KAAA,CAAM,EAAE,MAAA;AACrD;"}
|
|
@@ -10,6 +10,6 @@ type FullScreenModel = {
|
|
|
10
10
|
hide: () => void;
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
|
-
export declare const createCompositeCarouselFullScreen: ({ content }: TypeFixedFullScreenProps) => FullScreenModel;
|
|
13
|
+
export declare const createCompositeCarouselFullScreen: ({ content, callback, }: TypeFixedFullScreenProps) => FullScreenModel;
|
|
14
14
|
export {};
|
|
15
15
|
//# sourceMappingURL=full-screen.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAMA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,
|
|
1
|
+
{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAMA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,wBAG/C,wBAAwB,KA0CpB,eACN,CAAC"}
|
|
@@ -26,8 +26,11 @@ import "@universityofmaryland/web-icons-library/social";
|
|
|
26
26
|
import "@universityofmaryland/web-utilities-library/string";
|
|
27
27
|
import "@universityofmaryland/web-utilities-library/animation";
|
|
28
28
|
import "../../../atomic/text-lockup/small.js";
|
|
29
|
-
const createCompositeCarouselFullScreen = ({
|
|
30
|
-
|
|
29
|
+
const createCompositeCarouselFullScreen = ({
|
|
30
|
+
content,
|
|
31
|
+
callback
|
|
32
|
+
}) => {
|
|
33
|
+
const modal = createModal({ content, onHide: callback });
|
|
31
34
|
const modalEvents = modal.events;
|
|
32
35
|
const closeButtonModel = new ElementBuilder("button").withClassName("carousel-fixed-screen-button").withAttribute("type", "button").withAria({ label: "Close" }).withHTML(close_large).withStyles({
|
|
33
36
|
element: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement;\n callback: () => void;\n};\n\ntype FullScreenModel = {\n element: HTMLElement;\n styles: string;\n events: {\n show: () => void;\n hide: () => void;\n };\n};\n\nexport const createCompositeCarouselFullScreen = ({
|
|
1
|
+
{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n content: HTMLElement;\n callback: () => void;\n};\n\ntype FullScreenModel = {\n element: HTMLElement;\n styles: string;\n events: {\n show: () => void;\n hide: () => void;\n };\n};\n\nexport const createCompositeCarouselFullScreen = ({\n content,\n callback,\n}: TypeFixedFullScreenProps) => {\n const modal = layout.overlay.modal({ content, onHide: callback });\n const modalEvents = modal.events;\n\n const closeButtonModel = new ElementBuilder('button')\n .withClassName('carousel-fixed-screen-button')\n .withAttribute('type', 'button')\n .withAria({ label: 'Close' })\n .withHTML(iconCloseLarge)\n .withStyles({\n element: {\n position: 'absolute',\n top: '10px',\n right: '10px',\n [`@media (${token.media.queries.tablet.min})`]: {\n top: 'calc(10vh - 22px)',\n right: 'calc(10vw - 22px)',\n },\n '& svg': {\n fill: token.color.white,\n width: '20px',\n height: '20px',\n },\n },\n })\n .on('click', () => {\n if (!modalEvents) {\n return;\n }\n modalEvents.hide();\n })\n .build();\n\n modal.element.appendChild(closeButtonModel.element);\n\n const show = modalEvents ? modalEvents.show : () => {};\n const hide = modalEvents ? modalEvents.hide : () => {};\n\n return {\n element: modal.element,\n styles: combineStyles(modal.styles, closeButtonModel.styles),\n events: { show, hide },\n } as FullScreenModel;\n};\n"],"names":["layout.overlay.modal","iconCloseLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,oCAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,QAAQA,YAAqB,EAAE,SAAS,QAAQ,UAAU;AAChE,QAAM,cAAc,MAAM;AAE1B,QAAM,mBAAmB,IAAI,eAAe,QAAQ,EACjD,cAAc,8BAA8B,EAC5C,cAAc,QAAQ,QAAQ,EAC9B,SAAS,EAAE,OAAO,QAAA,CAAS,EAC3B,SAASC,WAAc,EACvB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,KAAK;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,MAAM,MAAM,MAAM;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACA,gBAAY,KAAA;AAAA,EACd,CAAC,EACA,MAAA;AAEH,QAAM,QAAQ,YAAY,iBAAiB,OAAO;AAElD,QAAM,OAAO,cAAc,YAAY,OAAO,MAAM;AAAA,EAAC;AACrD,QAAM,OAAO,cAAc,YAAY,OAAO,MAAM;AAAA,EAAC;AAErD,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,QAAQ,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAC3D,QAAQ,EAAE,MAAM,KAAA;AAAA,EAAK;AAEzB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,8BAA8B,GAAI,8BAG5C;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;+BAIiC,MAAM;;
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,8BAA8B,GAAI,8BAG5C;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;+BAIiC,MAAM;;CAgElC,CAAC"}
|
|
@@ -62,28 +62,31 @@ const createCompositeCarouselOverlay = ({
|
|
|
62
62
|
images,
|
|
63
63
|
isToggleCaption = true
|
|
64
64
|
}) => (() => {
|
|
65
|
+
let isFullScreenEvents = null;
|
|
65
66
|
const setFullScreen = (index) => {
|
|
66
67
|
let canMove = true;
|
|
68
|
+
if (isFullScreenEvents) {
|
|
69
|
+
window.removeEventListener("keyup", isFullScreenEvents);
|
|
70
|
+
}
|
|
67
71
|
overlayCarousel.events.EventMoveTo(index);
|
|
68
72
|
setTimeout(() => fixedFullScreen.events.show(), 100);
|
|
69
73
|
setTimeout(() => {
|
|
70
74
|
overlayCarousel.events.EventResize();
|
|
71
75
|
}, 100);
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
} else if (event.key === "ArrowRight") {
|
|
80
|
-
overlayCarousel.events.EventSlideRight();
|
|
81
|
-
}
|
|
82
|
-
setTimeout(() => {
|
|
83
|
-
canMove = true;
|
|
84
|
-
}, 700);
|
|
76
|
+
const handleKeyup = (event) => {
|
|
77
|
+
if (!canMove) return;
|
|
78
|
+
canMove = false;
|
|
79
|
+
if (event.key === "ArrowLeft") {
|
|
80
|
+
overlayCarousel.events.EventSlideLeft();
|
|
81
|
+
} else if (event.key === "ArrowRight") {
|
|
82
|
+
overlayCarousel.events.EventSlideRight();
|
|
85
83
|
}
|
|
86
|
-
|
|
84
|
+
setTimeout(() => {
|
|
85
|
+
canMove = true;
|
|
86
|
+
}, 700);
|
|
87
|
+
};
|
|
88
|
+
isFullScreenEvents = handleKeyup;
|
|
89
|
+
window.addEventListener("keyup", handleKeyup);
|
|
87
90
|
};
|
|
88
91
|
const overlaySlideModels = CreateOverlaySlide({ images, isToggleCaption });
|
|
89
92
|
const overlaySlides = overlaySlideModels.map((model) => model.element);
|
|
@@ -94,7 +97,12 @@ const createCompositeCarouselOverlay = ({
|
|
|
94
97
|
maxHeight: window.innerHeight / 10 * 8
|
|
95
98
|
});
|
|
96
99
|
const fixedFullScreen = createCompositeCarouselFullScreen({
|
|
97
|
-
content: overlayCarousel.element
|
|
100
|
+
content: overlayCarousel.element,
|
|
101
|
+
callback: () => {
|
|
102
|
+
if (isFullScreenEvents) {
|
|
103
|
+
window.removeEventListener("keyup", isFullScreenEvents);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
98
106
|
});
|
|
99
107
|
return {
|
|
100
108
|
element: fixedFullScreen.element,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { createLayoutImageContainer } from 'layout';\n\nconst CreateOverlaySlide = ({\n images,\n isToggleCaption,\n}: {\n images: HTMLImageElement[];\n isToggleCaption: boolean;\n}) =>\n images.map((image) => {\n const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n\n const imageContainerModel = new ElementBuilder()\n .withClassName('carousel-overlay-container')\n .withStyles({\n element: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: token.color.gray.dark,\n\n '& > *': {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n '& img': {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%',\n },\n },\n })\n .withChild(imageBlock)\n .build();\n\n return imageContainerModel;\n });\n\nexport const createCompositeCarouselOverlay = ({\n images,\n isToggleCaption = true,\n}: {\n images: HTMLImageElement[];\n isToggleCaption?: boolean;\n}) =>\n (() => {\n let isFullScreenEvents: any = null;\n\n const setFullScreen = (index: number) => {\n let canMove = true;\n\n overlayCarousel.events.EventMoveTo(index);\n\n setTimeout(() => fixedFullScreen.events.show(), 100);\n\n setTimeout(() => {\n overlayCarousel.events.EventResize();\n }, 100);\n\n
|
|
1
|
+
{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { createLayoutImageContainer } from 'layout';\n\nconst CreateOverlaySlide = ({\n images,\n isToggleCaption,\n}: {\n images: HTMLImageElement[];\n isToggleCaption: boolean;\n}) =>\n images.map((image) => {\n const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n\n const imageContainerModel = new ElementBuilder()\n .withClassName('carousel-overlay-container')\n .withStyles({\n element: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: token.color.gray.dark,\n\n '& > *': {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n '& img': {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%',\n },\n },\n })\n .withChild(imageBlock)\n .build();\n\n return imageContainerModel;\n });\n\nexport const createCompositeCarouselOverlay = ({\n images,\n isToggleCaption = true,\n}: {\n images: HTMLImageElement[];\n isToggleCaption?: boolean;\n}) =>\n (() => {\n let isFullScreenEvents: any = null;\n\n const setFullScreen = (index: number) => {\n let canMove = true;\n\n if (isFullScreenEvents) {\n window.removeEventListener('keyup', isFullScreenEvents);\n }\n\n overlayCarousel.events.EventMoveTo(index);\n\n setTimeout(() => fixedFullScreen.events.show(), 100);\n\n setTimeout(() => {\n overlayCarousel.events.EventResize();\n }, 100);\n\n const handleKeyup = (event: KeyboardEvent) => {\n if (!canMove) return;\n\n canMove = false;\n if (event.key === 'ArrowLeft') {\n overlayCarousel.events.EventSlideLeft();\n } else if (event.key === 'ArrowRight') {\n overlayCarousel.events.EventSlideRight();\n }\n\n setTimeout(() => {\n canMove = true;\n }, 700);\n };\n\n isFullScreenEvents = handleKeyup;\n window.addEventListener('keyup', handleKeyup);\n };\n\n const overlaySlideModels = CreateOverlaySlide({ images, isToggleCaption });\n const overlaySlides = overlaySlideModels.map((model) => model.element);\n const firstSlide = overlaySlideModels[0];\n const slideStyles = firstSlide ? firstSlide.styles : '';\n\n const overlayCarousel = carouselElements.image({\n slides: overlaySlides,\n maxHeight: (window.innerHeight / 10) * 8,\n });\n\n const fixedFullScreen = carouselElements.fullScreen({\n content: overlayCarousel.element,\n callback: () => {\n if (isFullScreenEvents) {\n window.removeEventListener('keyup', isFullScreenEvents);\n }\n },\n });\n\n return {\n element: fixedFullScreen.element,\n styles: combineStyles(\n slideStyles,\n overlayCarousel.styles,\n fixedFullScreen.styles,\n ),\n events: {\n setFullScreen,\n },\n };\n })();\n"],"names":["carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAIE,OAAO,IAAI,CAAC,UAAU;AACpB,QAAM,aAAa,2BAA2B,EAAE,OAAO,aAAa,MAAM,iBAAiB;AAE3F,QAAM,sBAAsB,IAAI,eAAA,EAC7B,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAElC,SAAS;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,MAGd,SAAS;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD,EACA,UAAU,UAAU,EACpB,MAAA;AAEH,SAAO;AACT,CAAC;AAEI,MAAM,iCAAiC,CAAC;AAAA,EAC7C;AAAA,EACA,kBAAkB;AACpB,OAIG,MAAM;AACL,MAAI,qBAA0B;AAE9B,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,QAAI,oBAAoB;AACtB,aAAO,oBAAoB,SAAS,kBAAkB;AAAA,IACxD;AAEA,oBAAgB,OAAO,YAAY,KAAK;AAExC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,UAAM,cAAc,CAAC,UAAyB;AAC5C,UAAI,CAAC,QAAS;AAEd,gBAAU;AACV,UAAI,MAAM,QAAQ,aAAa;AAC7B,wBAAgB,OAAO,eAAA;AAAA,MACzB,WAAW,MAAM,QAAQ,cAAc;AACrC,wBAAgB,OAAO,gBAAA;AAAA,MACzB;AAEA,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,yBAAqB;AACrB,WAAO,iBAAiB,SAAS,WAAW;AAAA,EAC9C;AAEA,QAAM,qBAAqB,mBAAmB,EAAE,QAAQ,iBAAiB;AACzE,QAAM,gBAAgB,mBAAmB,IAAI,CAAC,UAAU,MAAM,OAAO;AACrE,QAAM,aAAa,mBAAmB,CAAC;AACvC,QAAM,cAAc,aAAa,WAAW,SAAS;AAErD,QAAM,kBAAkBA,6BAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,QAAM,kBAAkBC,kCAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI,oBAAoB;AACtB,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,MACxD;AAAA,IACF;AAAA,EAAA,CACD;AAED,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB,QAAQ;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,IAElB,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universityofmaryland/web-elements-library",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"description": "UMD Web Elements",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@types/postcss-js": "^4.0.4",
|
|
42
|
-
"@universityofmaryland/web-
|
|
42
|
+
"@universityofmaryland/web-builder-library": "^1.0.4",
|
|
43
|
+
"@universityofmaryland/web-styles-library": "^1.8.14",
|
|
43
44
|
"@universityofmaryland/web-token-library": "^1.0.3",
|
|
44
45
|
"@universityofmaryland/web-utilities-library": "^1.0.6",
|
|
45
|
-
"@universityofmaryland/web-
|
|
46
|
-
"@universityofmaryland/web-styles-library": "^1.8.14"
|
|
46
|
+
"@universityofmaryland/web-icons-library": "^1.0.4"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@universityofmaryland/web-builder-library": "^1.0.0",
|