npm - @universityofmaryland/web-elements-library - Versions diffs - 1.6.16 → 1.7.0 - Mend

@universityofmaryland/web-elements-library 1.6.16 → 1.7.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.

Files changed (198) hide show

package/dist/composite/card/event-time.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"event-time.js","sources":["../../../source/composite/card/event-time.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { parseDateFromElement } from '@universityofmaryland/web-utilities-library/date';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { info as iconInfo } from '@universityofmaryland/web-icons-library/indicators';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { textLockup, assets } from 'atomic';\nimport { CardEventTimeProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst MakeDetailItem = (props: {\n icon: string;\n text: string;\n isThemeDark?: boolean;\n}) => {\n const { icon, text, isThemeDark } = props;\n\n const iconElement = new ElementBuilder('span').withHTML(icon).build();\n const textElement = new ElementBuilder('span').withHTML(text).build();\n\n return new ElementBuilder('p')\n .styled(\n elementStyles.event.meta.composeItem({\n theme: isThemeDark ? 'dark' : 'light',\n }),\n )\n .withStyles({\n element: {\n display: 'flex',\n alignItems: 'flex-start',\n\n [`& + .${elementStyles.event.meta.item.className}, & + .${elementStyles.event.meta.itemDark.className}`]:\n {\n marginTop: '5px',\n },\n\n ['& span ']: {\n marginLeft: '0 !important',\n marginTop: '0 !important',\n },\n },\n })\n .withChildren(iconElement, textElement)\n .build();\n};\n\nconst makeTimeRow = ({\n startTime,\n endTime,\n isThemeDark,\n}: {\n startTime: CardEventTimeProps['startTime'];\n endTime?: CardEventTimeProps['endTime'];\n isThemeDark?: boolean;\n}) => {\n const startParsed = parseDateFromElement({ element: startTime });\n if (!startParsed) return null;\n\n let timeText = startParsed.time;\n const endParsed = parseDateFromElement({ element: endTime ?? null });\n\n if (endParsed && endParsed.time !== startParsed.time) {\n timeText = `${timeText} - ${endParsed.time}`;\n }\n\n return new ElementBuilder('p')\n .withClassName('card-event-time-row')\n .styled(\n typography.sans.compose('small', {\n theme: isThemeDark ? 'dark' : 'light',\n }),\n )\n .withStyles({\n element: {\n marginBottom: token.spacing.sm,\n textTransform: 'uppercase',\n fontWeight: token.font.weight.bold,\n },\n })\n .withHTML(timeText)\n .build();\n};\n\nconst makeMetaRow = ({\n location,\n information,\n isThemeDark,\n}: {\n location?: CardEventTimeProps['location'];\n information?: CardEventTimeProps['information'];\n isThemeDark?: boolean;\n}) => {\n const children: UMDElement[] = [];\n\n if (location?.textContent) {\n children.push(\n MakeDetailItem({\n icon: iconPin,\n text: location.textContent,\n isThemeDark,\n }),\n );\n }\n\n if (information?.textContent) {\n children.push(\n MakeDetailItem({\n icon: iconInfo,\n text: information.textContent,\n isThemeDark,\n }),\n );\n }\n\n if (children.length === 0) return null;\n\n return new ElementBuilder()\n .withClassName('card-event-time-meta')\n .withStyles({\n element: {\n marginBottom: token.spacing.sm,\n\n '> :not(:first-child)': {\n [`@container (min-width: 650px)`]: {\n width: 'auto',\n },\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardEventTimeProps['image']>;\n isAligned?: CardEventTimeProps['isAligned'];\n}) => {\n const backgroundImage = assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n imageLoading: 'lazy',\n });\n\n return new ElementBuilder()\n .withClassName('card-event-time-image-wrapper')\n .withStyles({\n element: {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.min,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n position: 'relative',\n zIndex: 99,\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n width: '160px',\n order: '2',\n\n ...(isAligned && {\n height: '160px',\n }),\n }),\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChild(backgroundImage)\n .build();\n};\n\nexport const createCompositeCardEventTime = (props: CardEventTimeProps) => {\n const {\n headline,\n startTime,\n endTime,\n location,\n information,\n text,\n actions,\n image,\n isAligned,\n isThemeDark,\n } = props;\n\n const contentChildren: UMDElement[] = [];\n\n const timeRow = makeTimeRow({ startTime, endTime, isThemeDark });\n if (timeRow) contentChildren.push(timeRow);\n\n if (headline) {\n const composeHeadlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const headlineElement = new ElementBuilder(headline)\n .styled(composeHeadlineStyles)\n .withStyles({\n element: {\n fontWeight: '700',\n\n [`& + `]: {\n marginTop: token.spacing.sm,\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n contentChildren.push(headlineElement);\n }\n\n const metaRow = makeMetaRow({ location, information, isThemeDark });\n if (metaRow) contentChildren.push(metaRow);\n\n const lockup = textLockup.small({\n text: text \|\| null,\n actions: actions \|\| null,\n isThemeDark,\n });\n contentChildren.push(lockup);\n\n const contentColumn = new ElementBuilder()\n .withClassName('card-event-time-content')\n .withStyles({\n element: {\n flex: '1 0',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingRight: token.spacing.md,\n order: '1',\n }),\n },\n })\n .withChildren(...contentChildren)\n .build();\n\n const children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n children.push(contentColumn);\n\n const wrapper = new ElementBuilder()\n .withClassName('card-event-time-wrapper')\n .withStyles({\n element: {\n containerType: 'inline-size',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'flex',\n justifyContent: 'space-between',\n }),\n },\n })\n .withChildren(...children)\n .build();\n\n return new ElementBuilder()\n .withClassName('card-event-time-container')\n .withStyles({\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: token.color.black,\n color: token.color.white,\n }),\n },\n })\n .withChild(wrapper)\n .build();\n};\n"],"names":["iconPin","iconInfo","assets.image.background","animationStyles","textLockup.small"],"mappings":"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"}
1	+ {"version":3,"file":"event-time.js","sources":["../../../source/composite/card/event-time.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { parseDateFromElement } from '@universityofmaryland/web-utilities-library/date';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { info as iconInfo } from '@universityofmaryland/web-icons-library/indicators';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { textLockup, assets } from 'atomic';\nimport { CardEventTimeProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst MakeDetailItem = (props: {\n icon: string;\n text: string;\n isThemeDark?: boolean;\n}) => {\n const { icon, text, isThemeDark } = props;\n\n const iconElement = new ElementBuilder('span').withHTML(icon).build();\n const textElement = new ElementBuilder('span').withHTML(text).build();\n\n return new ElementBuilder('p')\n .styled(\n elementStyles.event.meta.composeItem({\n theme: isThemeDark ? 'dark' : 'light',\n }),\n )\n .withStyles({\n element: {\n display: 'flex',\n alignItems: 'flex-start',\n\n [`& + .${elementStyles.event.meta.item.className}, & + .${elementStyles.event.meta.itemDark.className}`]:\n {\n marginTop: '5px',\n },\n\n ['& span ']: {\n marginLeft: '0 !important',\n marginTop: '0 !important',\n },\n },\n })\n .withChildren(iconElement, textElement)\n .build();\n};\n\nconst makeTimeRow = ({\n startTime,\n endTime,\n isThemeDark,\n}: {\n startTime: CardEventTimeProps['startTime'];\n endTime?: CardEventTimeProps['endTime'];\n isThemeDark?: boolean;\n}) => {\n const startParsed = parseDateFromElement({ element: startTime });\n if (!startParsed) return null;\n\n let timeText = startParsed.time;\n const endParsed = parseDateFromElement({ element: endTime ?? null });\n\n if (endParsed && endParsed.time !== startParsed.time) {\n timeText = `${timeText} - ${endParsed.time}`;\n }\n\n return new ElementBuilder('p')\n .withClassName('card-event-time-row')\n .styled(\n typography.sans.compose('small', {\n theme: isThemeDark ? 'dark' : 'light',\n }),\n )\n .withStyles({\n element: {\n marginBottom: token.spacing.sm,\n textTransform: 'uppercase',\n fontWeight: token.font.weight.bold,\n },\n })\n .withHTML(timeText)\n .build();\n};\n\nconst makeMetaRow = ({\n location,\n information,\n isThemeDark,\n}: {\n location?: CardEventTimeProps['location'];\n information?: CardEventTimeProps['information'];\n isThemeDark?: boolean;\n}) => {\n const children: UMDElement[] = [];\n\n if (location?.textContent) {\n children.push(\n MakeDetailItem({\n icon: iconPin,\n text: location.textContent,\n isThemeDark,\n }),\n );\n }\n\n if (information?.textContent) {\n children.push(\n MakeDetailItem({\n icon: iconInfo,\n text: information.textContent,\n isThemeDark,\n }),\n );\n }\n\n if (children.length === 0) return null;\n\n return new ElementBuilder()\n .withClassName('card-event-time-meta')\n .withStyles({\n element: {\n marginBottom: token.spacing.sm,\n\n '> :not(:first-child)': {\n [`@container (min-width: 650px)`]: {\n width: 'auto',\n },\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardEventTimeProps['image']>;\n isAligned?: CardEventTimeProps['isAligned'];\n}) => {\n const backgroundImage = assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n imageLoading: 'lazy',\n });\n\n return new ElementBuilder()\n .withClassName('card-event-time-image-wrapper')\n .withStyles({\n element: {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.min,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n position: 'relative',\n zIndex: 99,\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n width: '160px',\n order: '2',\n\n ...(isAligned && {\n height: '160px',\n }),\n }),\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChild(backgroundImage)\n .build();\n};\n\nexport const createCompositeCardEventTime = (props: CardEventTimeProps) => {\n const {\n headline,\n startTime,\n endTime,\n location,\n information,\n text,\n actions,\n image,\n isAligned,\n isThemeDark,\n } = props;\n\n const contentChildren: UMDElement[] = [];\n\n const timeRow = makeTimeRow({ startTime, endTime, isThemeDark });\n if (timeRow) contentChildren.push(timeRow);\n\n if (headline) {\n const composeHeadlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const headlineElement = new ElementBuilder(headline)\n .styled(composeHeadlineStyles)\n .withStyles({\n element: {\n fontWeight: '700',\n\n [`& + `]: {\n marginTop: token.spacing.sm,\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n contentChildren.push(headlineElement);\n }\n\n const metaRow = makeMetaRow({ location, information, isThemeDark });\n if (metaRow) contentChildren.push(metaRow);\n\n const lockup = textLockup.small({\n text: text \|\| null,\n actions: actions \|\| null,\n isThemeDark,\n });\n contentChildren.push(lockup);\n\n const contentColumn = new ElementBuilder()\n .withClassName('card-event-time-content')\n .withStyles({\n element: {\n flex: '1 0',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingRight: token.spacing.md,\n order: '1',\n }),\n },\n })\n .withChildren(...contentChildren)\n .build();\n\n const children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n children.push(contentColumn);\n\n const wrapper = new ElementBuilder()\n .withClassName('card-event-time-wrapper')\n .withStyles({\n element: {\n containerType: 'inline-size',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'flex',\n justifyContent: 'space-between',\n }),\n },\n })\n .withChildren(...children)\n .build();\n\n return new ElementBuilder()\n .withClassName('card-event-time-container')\n .withStyles({\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: token.color.black,\n color: token.color.white,\n }),\n },\n })\n .withChild(wrapper)\n .build();\n};\n"],"names":["iconPin","iconInfo","assets.image.background","animationStyles","textLockup.small"],"mappings":"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"}

package/dist/composite/card/list.js CHANGED Viewed

@@ -13,7 +13,6 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../atomic/animations/brand/chevron-scroll.js";
 import "../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../atomic/assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
@@ -22,10 +21,10 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../atomic/layout/block/stacked.js";
-import "../../atomic/layout/overlay/modal.js";
 import "../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import { createTextLockupSmall } from "../../atomic/text-lockup/small.js";
 const smallBreakpoint = token.media.breakpointValues.small.max;
 const mediumBreakpointStart = token.media.breakpointValues.medium.min;

package/dist/composite/card/list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { CardListProps } from './_types';\nimport { type UMDElement } 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\nconst makeDateColumn = (dateSign: UMDElement) =>\n new ElementBuilder()\n .withClassName('card-list-date-sign-wrapper')\n .withStyles({\n element: {\n width: `${token.spacing.xl}`,\n order: 1,\n alignSelf: 'flex-start',\n\n ...createMediaQuery('max-width', mediumBreakpoint, {\n display: 'none',\n }),\n ...createMediaQuery('min-width', mediumBreakpoint, {\n width: `${token.spacing['8xl']}`,\n }),\n },\n })\n .withChild(dateSign)\n .build();\n\nconst makeTextColumn = (props: CardListProps) => {\n const lockup = textLockup.small(props);\n\n return new ElementBuilder()\n .withClassName('card-list-text-wrapper')\n .withStyles({\n element: {\n flex: '1 0',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingRight: `${token.spacing.md}`,\n order: '2',\n }),\n\n ...createMediaQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n },\n })\n .withChild(lockup)\n .build();\n};\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardListProps['image']>;\n isAligned?: CardListProps['isAligned'];\n}) => {\n const backgroundImage = assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n imageLoading: 'lazy',\n });\n\n return new ElementBuilder()\n .withClassName('card-list-image-wrapper')\n .withStyles({\n element: {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.min,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n position: 'relative',\n zIndex: 99,\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n width: '160px',\n order: '3',\n\n ...(isAligned && {\n height: '160px',\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChild(backgroundImage)\n .build();\n};\n\nexport const createCompositeCardList = (props: CardListProps) => {\n const { image, isAligned, isThemeDark, dateSign } = props;\n let children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n if (dateSign) {\n children.push(makeDateColumn(dateSign));\n }\n\n children.push(makeTextColumn(props));\n\n const wrapper = new ElementBuilder()\n .withClassName('card-list-wrapper')\n .withStyles({\n element: {\n containerType: 'inline-size',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'flex',\n justifyContent: 'space-between',\n }),\n },\n })\n .withChildren(...children)\n .build();\n\n return new ElementBuilder()\n .withClassName('card-list-container')\n .withStyles({\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: token.color.black,\n color: token.color.white,\n }),\n },\n })\n .withChild(wrapper)\n .build();\n};\n"],"names":["textLockup.small","assets.image.background"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { CardListProps } from './_types';\nimport { type UMDElement } 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\nconst makeDateColumn = (dateSign: UMDElement) =>\n new ElementBuilder()\n .withClassName('card-list-date-sign-wrapper')\n .withStyles({\n element: {\n width: `${token.spacing.xl}`,\n order: 1,\n alignSelf: 'flex-start',\n\n ...createMediaQuery('max-width', mediumBreakpoint, {\n display: 'none',\n }),\n ...createMediaQuery('min-width', mediumBreakpoint, {\n width: `${token.spacing['8xl']}`,\n }),\n },\n })\n .withChild(dateSign)\n .build();\n\nconst makeTextColumn = (props: CardListProps) => {\n const lockup = textLockup.small(props);\n\n return new ElementBuilder()\n .withClassName('card-list-text-wrapper')\n .withStyles({\n element: {\n flex: '1 0',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingRight: `${token.spacing.md}`,\n order: '2',\n }),\n\n ...createMediaQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n },\n })\n .withChild(lockup)\n .build();\n};\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardListProps['image']>;\n isAligned?: CardListProps['isAligned'];\n}) => {\n const backgroundImage = assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n imageLoading: 'lazy',\n });\n\n return new ElementBuilder()\n .withClassName('card-list-image-wrapper')\n .withStyles({\n element: {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.min,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n position: 'relative',\n zIndex: 99,\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n width: '160px',\n order: '3',\n\n ...(isAligned && {\n height: '160px',\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChild(backgroundImage)\n .build();\n};\n\nexport const createCompositeCardList = (props: CardListProps) => {\n const { image, isAligned, isThemeDark, dateSign } = props;\n let children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n if (dateSign) {\n children.push(makeDateColumn(dateSign));\n }\n\n children.push(makeTextColumn(props));\n\n const wrapper = new ElementBuilder()\n .withClassName('card-list-wrapper')\n .withStyles({\n element: {\n containerType: 'inline-size',\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'flex',\n justifyContent: 'space-between',\n }),\n },\n })\n .withChildren(...children)\n .build();\n\n return new ElementBuilder()\n .withClassName('card-list-container')\n .withStyles({\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: token.color.black,\n color: token.color.white,\n }),\n },\n })\n .withChild(wrapper)\n .build();\n};\n"],"names":["textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/overlay/color.js CHANGED Viewed

@@ -12,7 +12,7 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import { createActionIcon } from "../../../atomic/actions/icon.js";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
+import "@universityofmaryland/web-utilities-library/styles";
 import "../../../atomic/animations/brand/card-stack.js";
 import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/accessibility";
@@ -20,10 +20,10 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
 import { createTextLockupSmallScaling } from "../../../atomic/text-lockup/small-scaling.js";
 const createCompositeCardOverlayColor = (props) => {

package/dist/composite/card/overlay/icon.js CHANGED Viewed

@@ -12,7 +12,7 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
+import "@universityofmaryland/web-utilities-library/styles";
 import "../../../atomic/animations/brand/card-stack.js";
 import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/accessibility";
@@ -20,10 +20,10 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
 import { createTextLockupSmallScaling } from "../../../atomic/text-lockup/small-scaling.js";
 const createCompositeCardOverlayIcon = (props) => {

package/dist/composite/card/overlay/image.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/image.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,eAAO,MAAM,QAAQ,uBAAuB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB;;;;;;;;~~CAmN7D~~,CAAC"}
1	+ {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/image.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,eAAO,MAAM,QAAQ,uBAAuB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB;;;;;;;;CAgN7D,CAAC"}

package/dist/composite/card/overlay/image.js CHANGED Viewed

@@ -15,7 +15,6 @@ import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import { createActionIcon } from "../../../atomic/actions/icon.js";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../../atomic/assets/image/background.js";
 import "@universityofmaryland/web-utilities-library/accessibility";
@@ -23,10 +22,9 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
 import { createTextLockupSmallScaling } from "../../../atomic/text-lockup/small-scaling.js";
 const classRef = "card-overlay-image";
@@ -92,9 +90,6 @@ const createCardOverlayImage = (props) => {
         },
         [`&[data-size="large"]:before`]: {
           background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)"
-        },
-        [`img`]: {
-          transform: "scale(1.025)"
         }
       }
     });
@@ -176,12 +171,14 @@ const createCardOverlayImage = (props) => {
     element: {
       height: "100%",
       containerType: "inline-size",
-      [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
-        opacity: 0.7
-      },
-      ["&:hover img, &:focus img"]: {
-        transform: "scale(1)",
-        transition: "transform 0.5s ease-in-out"
+      [`&:hover, &:focus`]: {
+        [`& .${imageContainerClass}:before`]: {
+          opacity: 0.7
+        },
+        ["& img"]: {
+          transform: "scale(1.025)",
+          transition: "transform 0.5s ease-in-out"
+        }
       }
     }
   }).withChild(container).build();

package/dist/composite/card/overlay/image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n const {\n isQuote,\n ctaIcon,\n dateSign,\n backgroundImage,\n text,\n imageLoading = 'lazy',\n } = props;\n const children: UMDElement[] = [];\n const wrapperChildren: UMDElement[] = [];\n const load = () => {\n const sizeElements = () => {\n const textCopy = text?.innerHTML;\n if (text && textCopy) {\n const modifiedText = truncateTextBasedOnSize({\n text: textCopy,\n size: composite.element.offsetWidth,\n });\n\n text.innerHTML = modifiedText;\n\n if (modifiedText.length >= 220) {\n const assetContainer = composite.element.querySelector(\n `.${imageContainerClass}`,\n );\n if (assetContainer) {\n assetContainer.setAttribute('data-size', 'large');\n }\n }\n }\n };\n\n sizeElements();\n };\n let imageContainerClass: string \| null = null;\n\n if (ctaIcon && ctaIcon instanceof HTMLElement) {\n children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n }\n\n if (backgroundImage) {\n const imageContainer = assets.image.background({\n element: backgroundImage,\n isScaled: true,\n isGifAllowed: true,\n imageLoading,\n customStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n [`&:before`]: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 1,\n opacity: 1,\n transition: `opacity 0.5s ease-in-out`,\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n },\n\n [`&[data-size=\"large\"]:before`]: {\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n },\n~~\n [`img`]: {\n transform: 'scale(1.025)',\n },\n~~ },\n });\n\n children.push(imageContainer);\n imageContainerClass = imageContainer.element.className;\n }\n\n if (dateSign) {\n wrapperChildren.push(\n new ElementBuilder()\n .styled(Styles.layout.background.box.white)\n .withStyles({\n element: {\n alignSelf: `flex-start`,\n },\n siblingAfter: {\n marginTop: `${token.spacing.min}`,\n },\n })\n .withChild(dateSign)\n .build(),\n );\n }\n\n if (isQuote) {\n const quoteWrapper = new ElementBuilder()\n .withClassName('card-overlay-image-quote-wrapper')\n .withStyles({\n element: {\n width: '41px',\n height: '30px',\n marginBottom: `${token.spacing.xs}`,\n\n '& svg': {\n fill: `${token.color.red}`,\n },\n },\n })\n .withHTML(iconQuote)\n .build();\n\n wrapperChildren.push(quoteWrapper);\n }\n\n wrapperChildren.push(\n textLockup.smallScaling({\n ...props,\n isThemeDark: true,\n }),\n );\n\n const textContent = new ElementBuilder()\n .withClassName('card-overlay-image-text-content')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n zIndex: 9,\n position: 'relative',\n\n [' & * ']: {\n color: `${token.color.white}`,\n },\n },\n })\n .withChildren(...wrapperChildren)\n .build();\n\n const textWrapper = new ElementBuilder()\n .withClassName('card-overlay-image-text-wrapper')\n .withStyles({\n element: {\n height: 'auto',\n paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n },\n })\n .withChild(textContent)\n .build();\n\n const container = new ElementBuilder()\n .withClassName('card-overlay-image-container')\n .withStyles({\n element: {\n position: 'relative',\n padding: `${token.spacing.lg} ${token.spacing.md}`,\n paddingTop: `${token.spacing['4xl']}`,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n minHeight: '360px',\n height: '100%',\n overflow: 'hidden',\n\n ...createMediaQuery(\n 'min-width',\n token.media.breakpointValues.medium.min,\n {\n paddingTop: `${token.spacing['8xl']}`,\n minHeight: `424px`,\n },\n ),\n },\n })\n .withChildren(...children, textWrapper)\n .build();\n\n const composite = new ElementBuilder()\n .withClassName(classRef)\n .withStyles({\n element: {\n height: '100%',\n containerType: 'inline-size',\n\n [`&:hover ~~.${imageContainerClass}:before~~, &:focus .${imageContainerClass}:before`]~~:\n~~ {\n opacity: 0.7,\n },\n\n ['~~&:hover~~ img~~, &:focus img~~']: {\n transform: 'scale(1)',\n transition: 'transform 0.5s ease-in-out',\n },\n },\n })\n .withChild(container)\n .build();\n\n return {\n ...composite,\n events: {\n load,\n },\n };\n};\n"],"names":["actions.icon","assets.image.background","iconQuote","textLockup.smallScaling"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAUO,MAAM,WAAW;AAEjB,MAAM,yBAAyB,CAAC,UAA4B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EAAA,IACb;AACJ,QAAM,WAAyB,CAAA;AAC/B,QAAM,kBAAgC,CAAA;AACtC,QAAM,OAAO,MAAM;AACjB,UAAM,eAAe,MAAM;AACzB,YAAM,WAAW,MAAM;AACvB,UAAI,QAAQ,UAAU;AACpB,cAAM,eAAe,wBAAwB;AAAA,UAC3C,MAAM;AAAA,UACN,MAAM,UAAU,QAAQ;AAAA,QAAA,CACzB;AAED,aAAK,YAAY;AAEjB,YAAI,aAAa,UAAU,KAAK;AAC9B,gBAAM,iBAAiB,UAAU,QAAQ;AAAA,YACvC,IAAI,mBAAmB;AAAA,UAAA;AAEzB,cAAI,gBAAgB;AAClB,2BAAe,aAAa,aAAa,OAAO;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,iBAAA;AAAA,EACF;AACA,MAAI,sBAAqC;AAEzC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS,KAAKA,iBAAa,EAAE,GAAG,OAAO,SAAS,cAAc,MAAA,CAAO,CAAC;AAAA,EACxE;AAEA,MAAI,iBAAiB;AACnB,UAAM,iBAAiBC,sBAAwB;AAAA,MAC7C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,MACd;AAAA,MACA,cAAc;AAAA,QACZ,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,CAAC,UAAU,GAAG;AAAA,UACZ,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,YACE;AAAA,QAAA;AAAA,QAGJ,CAAC,6BAA6B,GAAG;AAAA,UAC/B,YACE;AAAA,QAAA;AAAA,~~QAGJ,CAAC,KAAK,GAAG~~;AAAA,~~UACP,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,~~IACF,CACD;AAED,aAAS,KAAK,cAAc;AAC5B,0BAAsB,eAAe,QAAQ;AAAA,EAC/C;AAEA,MAAI,UAAU;AACZ,oBAAgB;AAAA,MACd,IAAI,eAAA,EACD,OAAO,OAAO,OAAO,WAAW,IAAI,KAAK,EACzC,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW;AAAA,QAAA;AAAA,QAEb,cAAc;AAAA,UACZ,WAAW,GAAG,MAAM,QAAQ,GAAG;AAAA,QAAA;AAAA,MACjC,CACD,EACA,UAAU,QAAQ,EAClB,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,SAAS;AACX,UAAM,eAAe,IAAI,eAAA,EACtB,cAAc,kCAAkC,EAChD,WAAW;AAAA,MACV,SAAS;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,QAEjC,SAAS;AAAA,UACP,MAAM,GAAG,MAAM,MAAM,GAAG;AAAA,QAAA;AAAA,MAC1B;AAAA,IACF,CACD,EACA,SAASC,KAAS,EAClB,MAAA;AAEH,oBAAgB,KAAK,YAAY;AAAA,EACnC;AAEA,kBAAgB;AAAA,IACdC,6BAAwB;AAAA,MACtB,GAAG;AAAA,MACH,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAGH,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,iCAAiC,EAC/C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU,GAAG,MAAM,QAAQ,SAAS,QAAQ;AAAA,MAC5C,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,UAAU;AAAA,MAEV,CAAC,OAAO,GAAG;AAAA,QACT,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,CACD,EACA,aAAa,GAAG,eAAe,EAC/B,MAAA;AAEH,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,iCAAiC,EAC/C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,GAAG,UAAU,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,IAAA;AAAA,EACrD,CACD,EACA,UAAU,WAAW,EACrB,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,MAChD,YAAY,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,MACnC,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,UAAU;AAAA,MAEV,GAAG;AAAA,QACD;AAAA,QACA,MAAM,MAAM,iBAAiB,OAAO;AAAA,QACpC;AAAA,UACE,YAAY,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,UACnC,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,GAAG,UAAU,WAAW,EACrC,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,QAAQ,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,eAAe;AAAA,MAEf,CAAC,~~YAAY~~,~~mBAAmB~~,~~qBAAqB~~,mBAAmB,SAAS,~~GAC/E~~;AAAA,~~QACE~~,SAAS;AAAA,~~MAAA~~;AAAA,~~MAGb~~,CAAC,~~0BAA0B~~,GAAG;AAAA,~~QAC5B~~,WAAW;AAAA,~~QACX~~,YAAY;AAAA,~~MAAA~~;AAAA,~~IACd~~;AAAA,EACF,CACD,EACA,UAAU,SAAS,EACnB,MAAA;AAEH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n const {\n isQuote,\n ctaIcon,\n dateSign,\n backgroundImage,\n text,\n imageLoading = 'lazy',\n } = props;\n const children: UMDElement[] = [];\n const wrapperChildren: UMDElement[] = [];\n const load = () => {\n const sizeElements = () => {\n const textCopy = text?.innerHTML;\n if (text && textCopy) {\n const modifiedText = truncateTextBasedOnSize({\n text: textCopy,\n size: composite.element.offsetWidth,\n });\n\n text.innerHTML = modifiedText;\n\n if (modifiedText.length >= 220) {\n const assetContainer = composite.element.querySelector(\n `.${imageContainerClass}`,\n );\n if (assetContainer) {\n assetContainer.setAttribute('data-size', 'large');\n }\n }\n }\n };\n\n sizeElements();\n };\n let imageContainerClass: string \| null = null;\n\n if (ctaIcon && ctaIcon instanceof HTMLElement) {\n children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n }\n\n if (backgroundImage) {\n const imageContainer = assets.image.background({\n element: backgroundImage,\n isScaled: true,\n isGifAllowed: true,\n imageLoading,\n customStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n [`&:before`]: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 1,\n opacity: 1,\n transition: `opacity 0.5s ease-in-out`,\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n },\n\n [`&[data-size=\"large\"]:before`]: {\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n },\n },\n });\n\n children.push(imageContainer);\n imageContainerClass = imageContainer.element.className;\n }\n\n if (dateSign) {\n wrapperChildren.push(\n new ElementBuilder()\n .styled(Styles.layout.background.box.white)\n .withStyles({\n element: {\n alignSelf: `flex-start`,\n },\n siblingAfter: {\n marginTop: `${token.spacing.min}`,\n },\n })\n .withChild(dateSign)\n .build(),\n );\n }\n\n if (isQuote) {\n const quoteWrapper = new ElementBuilder()\n .withClassName('card-overlay-image-quote-wrapper')\n .withStyles({\n element: {\n width: '41px',\n height: '30px',\n marginBottom: `${token.spacing.xs}`,\n\n '& svg': {\n fill: `${token.color.red}`,\n },\n },\n })\n .withHTML(iconQuote)\n .build();\n\n wrapperChildren.push(quoteWrapper);\n }\n\n wrapperChildren.push(\n textLockup.smallScaling({\n ...props,\n isThemeDark: true,\n }),\n );\n\n const textContent = new ElementBuilder()\n .withClassName('card-overlay-image-text-content')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n zIndex: 9,\n position: 'relative',\n\n [' & * ']: {\n color: `${token.color.white}`,\n },\n },\n })\n .withChildren(...wrapperChildren)\n .build();\n\n const textWrapper = new ElementBuilder()\n .withClassName('card-overlay-image-text-wrapper')\n .withStyles({\n element: {\n height: 'auto',\n paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n },\n })\n .withChild(textContent)\n .build();\n\n const container = new ElementBuilder()\n .withClassName('card-overlay-image-container')\n .withStyles({\n element: {\n position: 'relative',\n padding: `${token.spacing.lg} ${token.spacing.md}`,\n paddingTop: `${token.spacing['4xl']}`,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n minHeight: '360px',\n height: '100%',\n overflow: 'hidden',\n\n ...createMediaQuery(\n 'min-width',\n token.media.breakpointValues.medium.min,\n {\n paddingTop: `${token.spacing['8xl']}`,\n minHeight: `424px`,\n },\n ),\n },\n })\n .withChildren(...children, textWrapper)\n .build();\n\n const composite = new ElementBuilder()\n .withClassName(classRef)\n .withStyles({\n element: {\n height: '100%',\n containerType: 'inline-size',\n\n [`&:hover, &:focus`]: {\n [`& .${imageContainerClass}:before`]: {\n opacity: 0.7,\n },\n\n ['& img']: {\n transform: 'scale(1.025)',\n transition: 'transform 0.5s ease-in-out',\n },\n },\n },\n })\n .withChild(container)\n .build();\n\n return {\n ...composite,\n events: {\n load,\n },\n };\n};\n"],"names":["actions.icon","assets.image.background","iconQuote","textLockup.smallScaling"],"mappings":"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"}

package/dist/composite/card/video/block.js CHANGED Viewed

@@ -12,18 +12,19 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
+import "@universityofmaryland/web-utilities-library/styles";
 import "../../../atomic/animations/brand/card-stack.js";
 import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/accessibility";
 import { createVideoObservedAutoPlay } from "../../../atomic/assets/video/observed-auto-play.js";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
 const createCompositeCardVideoBlock = (props) => (() => createVideoObservedAutoPlay({
   ...props,

package/dist/composite/card/video/block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n video: HTMLVideoElement;\n isAutoplay?: boolean;\n}\n\nexport const createCompositeCardVideoBlock = (props: CardVideoShortProps) =>\n (() =>\n assets.video.observedAutoPlay({\n ...props,\n additionalElementStyles: {\n width: '100%',\n aspectRatio: '1 / 1',\n position: 'relative',\n overflow: 'hidden',\n\n [`& video`]: {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n },\n },\n }))();\n"],"names":["assets.video.observedAutoPlay"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAOO,MAAM,gCAAgC,CAAC,WAC3C,MACCA,4BAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}
1	+ {"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n video: HTMLVideoElement;\n isAutoplay?: boolean;\n}\n\nexport const createCompositeCardVideoBlock = (props: CardVideoShortProps) =>\n (() =>\n assets.video.observedAutoPlay({\n ...props,\n additionalElementStyles: {\n width: '100%',\n aspectRatio: '1 / 1',\n position: 'relative',\n overflow: 'hidden',\n\n [`& video`]: {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n },\n },\n }))();\n"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,gCAAgC,CAAC,WAC3C,MACCA,4BAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}

package/dist/composite/carousel/cards/index.d.ts CHANGED Viewed

@@ -6,13 +6,6 @@ type TypeCarouselCardsRequirements = {
     shadowRef?: HTMLElement;
     cards: HTMLElement[];
 };
-export declare const createCompositeCarouselCards: (props: TypeCarouselCardsRequirements) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        resize: () => void;
-        load: () => void;
-    };
-};
+export declare const createCompositeCarouselCards: (props: TypeCarouselCardsRequirements) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/carousel/cards/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/cards/index.ts"],"names":[],"mappings":"~~AASA~~,KAAK,6BAA6B,GAAG;IACnC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;~~AA2RF~~,eAAO,MAAM,4BAA4B,GAAI,OAAO,6BAA6B~~;;;;;;;CA8C3E~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/cards/index.ts"],"names":[],"mappings":"AAUA,KAAK,6BAA6B,GAAG;IACnC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AA8FF,eAAO,MAAM,4BAA4B,GAAI,OAAO,6BAA6B,kFAkH3E,CAAC"}