@universityofmaryland/web-elements-library 1.5.1 → 1.5.3
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/composite/carousel/image/standard.d.ts.map +1 -1
- package/dist/composite/carousel/image/standard.js +11 -0
- package/dist/composite/carousel/image/standard.js.map +1 -1
- package/dist/composite/carousel/image/standard.mjs +12 -1
- package/dist/composite/carousel/image/standard.mjs.map +1 -1
- package/dist/composite/footer/_types.d.ts +1 -0
- package/dist/composite/footer/_types.d.ts.map +1 -1
- package/dist/composite/footer/elements/main-section/campaign.d.ts +2 -2
- package/dist/composite/footer/elements/main-section/campaign.d.ts.map +1 -1
- package/dist/composite/footer/elements/main-section/campaign.js +29 -2
- package/dist/composite/footer/elements/main-section/campaign.js.map +1 -1
- package/dist/composite/footer/elements/main-section/campaign.mjs +29 -2
- package/dist/composite/footer/elements/main-section/campaign.mjs.map +1 -1
- package/dist/composite/footer/elements/main-section/index.d.ts.map +1 -1
- package/dist/composite/footer/elements/main-section/index.js.map +1 -1
- package/dist/composite/footer/elements/main-section/index.mjs.map +1 -1
- package/dist/composite/footer/elements/utility-section/index.d.ts +7 -4
- package/dist/composite/footer/elements/utility-section/index.d.ts.map +1 -1
- package/dist/composite/footer/elements/utility-section/index.js +1 -2
- package/dist/composite/footer/elements/utility-section/index.js.map +1 -1
- package/dist/composite/footer/elements/utility-section/index.mjs +1 -2
- package/dist/composite/footer/elements/utility-section/index.mjs.map +1 -1
- package/package.json +1 -1
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":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/standard.ts"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;CAC9B,CAAC;AAYF,KAAK,8BAA8B,GAAG,gBAAgB,GACpD,cAAc,GAAG;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;
|
|
1
|
+
{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/standard.ts"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;CAC9B,CAAC;AAYF,KAAK,8BAA8B,GAAG,gBAAgB,GACpD,cAAc,GAAG;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBAqLY,OAAO,8BAA8B;;;;;;;AAArD,wBAuKO"}
|
|
@@ -50,6 +50,7 @@ const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
|
|
|
50
50
|
const ELEMENT_CAROUSEL_INDICATOR_WRAPPER = "carousel-indicator-wrapper";
|
|
51
51
|
const ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER = "carousel-overlay-image-container";
|
|
52
52
|
const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;
|
|
53
|
+
const OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;
|
|
53
54
|
const OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;
|
|
54
55
|
const OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;
|
|
55
56
|
const OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;
|
|
@@ -76,6 +77,16 @@ const OverwriteThemeDark = `
|
|
|
76
77
|
${OVERWRITE_THEME_DARK_BUTTON} > svg {
|
|
77
78
|
fill: ${Styles.token.color.white};
|
|
78
79
|
}
|
|
80
|
+
|
|
81
|
+
${OVERWRITE_THEME_DARK_RICH_TEXT} {
|
|
82
|
+
color: ${Styles.token.color.white};
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
${styles.jssToCSS({
|
|
86
|
+
styleObj: {
|
|
87
|
+
[`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: Styles.element.text.rich.advancedDark
|
|
88
|
+
}
|
|
89
|
+
})}
|
|
79
90
|
`;
|
|
80
91
|
const IndicatorContainerStyles = `
|
|
81
92
|
.${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.js","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeImage = {\n image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n images: HTMLImageElement[];\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n TypeFullScreen &\n TypesetFullScreen & {\n index: number;\n };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n TypesetFullScreen &\n TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n TypeFullScreen & {\n isThemeDark?: boolean;\n };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n 'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n 'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER},\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n ${OVERWRITE_THEME_DARK_INDICATOR} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n background-color: ${token.color.gray.dark};\n }\n\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n color: ${token.color.white};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n fill: ${token.color.white};\n }\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.md};\n background-color: ${token.color.gray.lightest};\n display: flex;\n justify-content: center;\n }\n \n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.lg};\n }\n }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ${token.color.gray.dark};\n }\n\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.md};\n padding-bottom: 0;\n background-color: ${token.color.gray.lightest};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.lg};\n padding-bottom: 0;\n }\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n },\n })}\n\n .${ELEMENT_SLIDE_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n color: ${token.color.gray.dark}\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n position: relative;\n background-color: ${token.color.black};\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n height: 100%;\n }\n\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n overflow: hidden;\n background-color: ${token.color.gray.lightest};\n }\n\n ${LayoutImage.Styles}\n ${ImageContainerStyles}\n ${TextContainerStyles}\n ${OverlayImageContainerStyles}\n ${IndicatorContainerStyles}\n ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n (() => {\n const { images, isThemeDark, isFullScreenOption } = props;\n const elementDeclaration = document.createElement('div');\n const elementContainer = document.createElement('div');\n const elementIndicator = document.createElement('div');\n const overlayCarousel = carouselElements.overlay({\n images,\n });\n let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n styles += overlayCarousel.styles;\n\n const CreateTextContainer = ({\n headlines,\n texts,\n reference,\n }: {\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n reference: string | null;\n }) => {\n const textContainer = document.createElement('div');\n\n const headline = headlines?.find(\n (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n const richText = texts?.find(\n (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n\n textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n if (headline || richText) {\n if (headline) {\n headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n textContainer.appendChild(headline);\n }\n\n if (richText) {\n richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n textContainer.appendChild(richText);\n }\n\n return textContainer;\n }\n\n return null;\n };\n\n const CreateImageContainer = ({\n image,\n isFullScreenOption,\n setFullScreen,\n index,\n }: TypeImageContainerProps) => {\n const imageContainer = document.createElement('div');\n const imageWrapper = document.createElement('div');\n const imageBlock = LayoutImage.CreateElement({\n image,\n showCaption: true,\n });\n\n imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n imageWrapper.appendChild(imageBlock);\n\n if (isFullScreenOption) {\n const button = buttons.fullscreen.create({\n callback: setFullScreen,\n index,\n });\n imageBlock.appendChild(button.element);\n\n styles += button.styles;\n }\n\n imageContainer.appendChild(imageWrapper);\n\n return imageContainer;\n };\n\n const CreateSlide = (props: TypeCarouselSlideProps) => {\n const { images, setFullScreen } = props;\n const clonedImages = images.map((image) =>\n image.cloneNode(true),\n ) as HTMLImageElement[];\n\n return clonedImages.map((image, index) => {\n const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n const slide = document.createElement('div');\n const imageContainer = CreateImageContainer({\n ...props,\n image,\n setFullScreen,\n index,\n });\n const textContainer = CreateTextContainer({ ...props, reference });\n\n slide.classList.add(ELEMENT_SLIDE);\n slide.appendChild(imageContainer);\n if (textContainer) slide.appendChild(textContainer);\n\n return slide;\n });\n };\n\n const slides = CreateSlide({\n ...props,\n setFullScreen: overlayCarousel.events.setFullScreen,\n });\n const carousel = carouselElements.image({\n slides,\n callback: (activeIndex) => {\n indicator.position(activeIndex);\n },\n maxHeight: 500,\n });\n\n styles += carousel.styles;\n\n const indicator = animations.actions.indicator({\n count: images.length || 0,\n callback: carousel.events.EventMoveTo,\n isThemeDark,\n isThemeLight: !isThemeDark,\n });\n\n styles += indicator.styles;\n\n elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n elementIndicator.appendChild(indicator.element);\n\n elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n elementContainer.appendChild(carousel.element);\n elementContainer.appendChild(elementIndicator);\n if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n elementDeclaration.appendChild(elementContainer);\n\n images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n const responseOptions = {\n styles,\n events: {\n SetEventReize: carousel.events.EventResize,\n },\n };\n\n if (isFullScreenOption) {\n const element = document.createElement('div');\n\n element.appendChild(overlayCarousel.element);\n element.appendChild(elementDeclaration);\n\n return {\n element,\n ...responseOptions,\n };\n }\n\n return {\n element: elementDeclaration,\n ...responseOptions,\n };\n })();\n"],"names":["token","jssToCSS","typography","element","LayoutImage","carouselElements.overlay","styles","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"standard.js","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeImage = {\n image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n images: HTMLImageElement[];\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n TypeFullScreen &\n TypesetFullScreen & {\n index: number;\n };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n TypesetFullScreen &\n TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n TypeFullScreen & {\n isThemeDark?: boolean;\n };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n 'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n 'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER},\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n ${OVERWRITE_THEME_DARK_INDICATOR} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n background-color: ${token.color.gray.dark};\n }\n\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n color: ${token.color.white};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n fill: ${token.color.white};\n }\n\n ${OVERWRITE_THEME_DARK_RICH_TEXT} {\n color: ${token.color.white};\n }\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n },\n })}\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.md};\n background-color: ${token.color.gray.lightest};\n display: flex;\n justify-content: center;\n }\n \n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.lg};\n }\n }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ${token.color.gray.dark};\n }\n\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.md};\n padding-bottom: 0;\n background-color: ${token.color.gray.lightest};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.lg};\n padding-bottom: 0;\n }\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n },\n })}\n\n .${ELEMENT_SLIDE_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n color: ${token.color.gray.dark}\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n position: relative;\n background-color: ${token.color.black};\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n height: 100%;\n }\n\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n overflow: hidden;\n background-color: ${token.color.gray.lightest};\n }\n\n ${LayoutImage.Styles}\n ${ImageContainerStyles}\n ${TextContainerStyles}\n ${OverlayImageContainerStyles}\n ${IndicatorContainerStyles}\n ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n (() => {\n const { images, isThemeDark, isFullScreenOption } = props;\n const elementDeclaration = document.createElement('div');\n const elementContainer = document.createElement('div');\n const elementIndicator = document.createElement('div');\n const overlayCarousel = carouselElements.overlay({\n images,\n });\n let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n styles += overlayCarousel.styles;\n\n const CreateTextContainer = ({\n headlines,\n texts,\n reference,\n }: {\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n reference: string | null;\n }) => {\n const textContainer = document.createElement('div');\n\n const headline = headlines?.find(\n (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n const richText = texts?.find(\n (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n\n textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n if (headline || richText) {\n if (headline) {\n headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n textContainer.appendChild(headline);\n }\n\n if (richText) {\n richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n textContainer.appendChild(richText);\n }\n\n return textContainer;\n }\n\n return null;\n };\n\n const CreateImageContainer = ({\n image,\n isFullScreenOption,\n setFullScreen,\n index,\n }: TypeImageContainerProps) => {\n const imageContainer = document.createElement('div');\n const imageWrapper = document.createElement('div');\n const imageBlock = LayoutImage.CreateElement({\n image,\n showCaption: true,\n });\n\n imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n imageWrapper.appendChild(imageBlock);\n\n if (isFullScreenOption) {\n const button = buttons.fullscreen.create({\n callback: setFullScreen,\n index,\n });\n imageBlock.appendChild(button.element);\n\n styles += button.styles;\n }\n\n imageContainer.appendChild(imageWrapper);\n\n return imageContainer;\n };\n\n const CreateSlide = (props: TypeCarouselSlideProps) => {\n const { images, setFullScreen } = props;\n const clonedImages = images.map((image) =>\n image.cloneNode(true),\n ) as HTMLImageElement[];\n\n return clonedImages.map((image, index) => {\n const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n const slide = document.createElement('div');\n const imageContainer = CreateImageContainer({\n ...props,\n image,\n setFullScreen,\n index,\n });\n const textContainer = CreateTextContainer({ ...props, reference });\n\n slide.classList.add(ELEMENT_SLIDE);\n slide.appendChild(imageContainer);\n if (textContainer) slide.appendChild(textContainer);\n\n return slide;\n });\n };\n\n const slides = CreateSlide({\n ...props,\n setFullScreen: overlayCarousel.events.setFullScreen,\n });\n const carousel = carouselElements.image({\n slides,\n callback: (activeIndex) => {\n indicator.position(activeIndex);\n },\n maxHeight: 500,\n });\n\n styles += carousel.styles;\n\n const indicator = animations.actions.indicator({\n count: images.length || 0,\n callback: carousel.events.EventMoveTo,\n isThemeDark,\n isThemeLight: !isThemeDark,\n });\n\n styles += indicator.styles;\n\n elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n elementIndicator.appendChild(indicator.element);\n\n elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n elementContainer.appendChild(carousel.element);\n elementContainer.appendChild(elementIndicator);\n if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n elementDeclaration.appendChild(elementContainer);\n\n images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n const responseOptions = {\n styles,\n events: {\n SetEventReize: carousel.events.EventResize,\n },\n };\n\n if (isFullScreenOption) {\n const element = document.createElement('div');\n\n element.appendChild(overlayCarousel.element);\n element.appendChild(elementDeclaration);\n\n return {\n element,\n ...responseOptions,\n };\n }\n\n return {\n element: elementDeclaration,\n ...responseOptions,\n };\n })();\n"],"names":["token","jssToCSS","element","typography","LayoutImage","carouselElements.overlay","styles","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { token,
|
|
1
|
+
import { token, element, typography } from "@universityofmaryland/web-styles-library";
|
|
2
2
|
import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
|
|
3
3
|
import "@universityofmaryland/web-styles-library/token";
|
|
4
4
|
import "@universityofmaryland/web-styles-library/element";
|
|
@@ -49,6 +49,7 @@ const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
|
|
|
49
49
|
const ELEMENT_CAROUSEL_INDICATOR_WRAPPER = "carousel-indicator-wrapper";
|
|
50
50
|
const ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER = "carousel-overlay-image-container";
|
|
51
51
|
const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;
|
|
52
|
+
const OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;
|
|
52
53
|
const OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;
|
|
53
54
|
const OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;
|
|
54
55
|
const OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;
|
|
@@ -75,6 +76,16 @@ const OverwriteThemeDark = `
|
|
|
75
76
|
${OVERWRITE_THEME_DARK_BUTTON} > svg {
|
|
76
77
|
fill: ${token.color.white};
|
|
77
78
|
}
|
|
79
|
+
|
|
80
|
+
${OVERWRITE_THEME_DARK_RICH_TEXT} {
|
|
81
|
+
color: ${token.color.white};
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
${jssToCSS({
|
|
85
|
+
styleObj: {
|
|
86
|
+
[`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark
|
|
87
|
+
}
|
|
88
|
+
})}
|
|
78
89
|
`;
|
|
79
90
|
const IndicatorContainerStyles = `
|
|
80
91
|
.${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeImage = {\n image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n images: HTMLImageElement[];\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n TypeFullScreen &\n TypesetFullScreen & {\n index: number;\n };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n TypesetFullScreen &\n TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n TypeFullScreen & {\n isThemeDark?: boolean;\n };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n 'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n 'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER},\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n ${OVERWRITE_THEME_DARK_INDICATOR} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n background-color: ${token.color.gray.dark};\n }\n\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n color: ${token.color.white};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n fill: ${token.color.white};\n }\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.md};\n background-color: ${token.color.gray.lightest};\n display: flex;\n justify-content: center;\n }\n \n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.lg};\n }\n }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ${token.color.gray.dark};\n }\n\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.md};\n padding-bottom: 0;\n background-color: ${token.color.gray.lightest};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.lg};\n padding-bottom: 0;\n }\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n },\n })}\n\n .${ELEMENT_SLIDE_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n color: ${token.color.gray.dark}\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n position: relative;\n background-color: ${token.color.black};\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n height: 100%;\n }\n\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n overflow: hidden;\n background-color: ${token.color.gray.lightest};\n }\n\n ${LayoutImage.Styles}\n ${ImageContainerStyles}\n ${TextContainerStyles}\n ${OverlayImageContainerStyles}\n ${IndicatorContainerStyles}\n ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n (() => {\n const { images, isThemeDark, isFullScreenOption } = props;\n const elementDeclaration = document.createElement('div');\n const elementContainer = document.createElement('div');\n const elementIndicator = document.createElement('div');\n const overlayCarousel = carouselElements.overlay({\n images,\n });\n let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n styles += overlayCarousel.styles;\n\n const CreateTextContainer = ({\n headlines,\n texts,\n reference,\n }: {\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n reference: string | null;\n }) => {\n const textContainer = document.createElement('div');\n\n const headline = headlines?.find(\n (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n const richText = texts?.find(\n (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n\n textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n if (headline || richText) {\n if (headline) {\n headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n textContainer.appendChild(headline);\n }\n\n if (richText) {\n richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n textContainer.appendChild(richText);\n }\n\n return textContainer;\n }\n\n return null;\n };\n\n const CreateImageContainer = ({\n image,\n isFullScreenOption,\n setFullScreen,\n index,\n }: TypeImageContainerProps) => {\n const imageContainer = document.createElement('div');\n const imageWrapper = document.createElement('div');\n const imageBlock = LayoutImage.CreateElement({\n image,\n showCaption: true,\n });\n\n imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n imageWrapper.appendChild(imageBlock);\n\n if (isFullScreenOption) {\n const button = buttons.fullscreen.create({\n callback: setFullScreen,\n index,\n });\n imageBlock.appendChild(button.element);\n\n styles += button.styles;\n }\n\n imageContainer.appendChild(imageWrapper);\n\n return imageContainer;\n };\n\n const CreateSlide = (props: TypeCarouselSlideProps) => {\n const { images, setFullScreen } = props;\n const clonedImages = images.map((image) =>\n image.cloneNode(true),\n ) as HTMLImageElement[];\n\n return clonedImages.map((image, index) => {\n const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n const slide = document.createElement('div');\n const imageContainer = CreateImageContainer({\n ...props,\n image,\n setFullScreen,\n index,\n });\n const textContainer = CreateTextContainer({ ...props, reference });\n\n slide.classList.add(ELEMENT_SLIDE);\n slide.appendChild(imageContainer);\n if (textContainer) slide.appendChild(textContainer);\n\n return slide;\n });\n };\n\n const slides = CreateSlide({\n ...props,\n setFullScreen: overlayCarousel.events.setFullScreen,\n });\n const carousel = carouselElements.image({\n slides,\n callback: (activeIndex) => {\n indicator.position(activeIndex);\n },\n maxHeight: 500,\n });\n\n styles += carousel.styles;\n\n const indicator = animations.actions.indicator({\n count: images.length || 0,\n callback: carousel.events.EventMoveTo,\n isThemeDark,\n isThemeLight: !isThemeDark,\n });\n\n styles += indicator.styles;\n\n elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n elementIndicator.appendChild(indicator.element);\n\n elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n elementContainer.appendChild(carousel.element);\n elementContainer.appendChild(elementIndicator);\n if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n elementDeclaration.appendChild(elementContainer);\n\n images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n const responseOptions = {\n styles,\n events: {\n SetEventReize: carousel.events.EventResize,\n },\n };\n\n if (isFullScreenOption) {\n const element = document.createElement('div');\n\n element.appendChild(overlayCarousel.element);\n element.appendChild(elementDeclaration);\n\n return {\n element,\n ...responseOptions,\n };\n }\n\n return {\n element: elementDeclaration,\n ...responseOptions,\n };\n })();\n"],"names":["carouselElements.overlay","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator","element"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n element,\n token,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeImage = {\n image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n images: HTMLImageElement[];\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n TypeFullScreen &\n TypesetFullScreen & {\n index: number;\n };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n TypesetFullScreen &\n TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n TypeFullScreen & {\n isThemeDark?: boolean;\n };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n 'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n 'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n ${OVERWRITE_THEME_DARK_CONTAINER},\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n ${OVERWRITE_THEME_DARK_INDICATOR} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n background-color: ${token.color.gray.dark};\n }\n\n ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n color: ${token.color.white};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} {\n background-color: ${token.color.black};\n }\n\n ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n fill: ${token.color.white};\n }\n\n ${OVERWRITE_THEME_DARK_RICH_TEXT} {\n color: ${token.color.white};\n }\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n },\n })}\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.md};\n background-color: ${token.color.gray.lightest};\n display: flex;\n justify-content: center;\n }\n \n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n padding: ${token.spacing.lg};\n }\n }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ${token.color.gray.dark};\n }\n\n .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.md};\n padding-bottom: 0;\n background-color: ${token.color.gray.lightest};\n }\n\n @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n padding: ${token.spacing.lg};\n padding-bottom: 0;\n }\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n },\n })}\n\n .${ELEMENT_SLIDE_RICH_TEXT} {\n margin-top: ${token.spacing.min};\n color: ${token.color.gray.dark}\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n },\n })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n position: relative;\n background-color: ${token.color.black};\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n height: 100%;\n }\n\n .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n object-fit: contain;\n max-height: 100%;\n }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n overflow: hidden;\n background-color: ${token.color.gray.lightest};\n }\n\n ${LayoutImage.Styles}\n ${ImageContainerStyles}\n ${TextContainerStyles}\n ${OverlayImageContainerStyles}\n ${IndicatorContainerStyles}\n ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n (() => {\n const { images, isThemeDark, isFullScreenOption } = props;\n const elementDeclaration = document.createElement('div');\n const elementContainer = document.createElement('div');\n const elementIndicator = document.createElement('div');\n const overlayCarousel = carouselElements.overlay({\n images,\n });\n let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n styles += overlayCarousel.styles;\n\n const CreateTextContainer = ({\n headlines,\n texts,\n reference,\n }: {\n headlines?: HTMLElement[] | null;\n texts?: HTMLElement[] | null;\n reference: string | null;\n }) => {\n const textContainer = document.createElement('div');\n\n const headline = headlines?.find(\n (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n const richText = texts?.find(\n (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n );\n\n textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n if (headline || richText) {\n if (headline) {\n headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n textContainer.appendChild(headline);\n }\n\n if (richText) {\n richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n textContainer.appendChild(richText);\n }\n\n return textContainer;\n }\n\n return null;\n };\n\n const CreateImageContainer = ({\n image,\n isFullScreenOption,\n setFullScreen,\n index,\n }: TypeImageContainerProps) => {\n const imageContainer = document.createElement('div');\n const imageWrapper = document.createElement('div');\n const imageBlock = LayoutImage.CreateElement({\n image,\n showCaption: true,\n });\n\n imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n imageWrapper.appendChild(imageBlock);\n\n if (isFullScreenOption) {\n const button = buttons.fullscreen.create({\n callback: setFullScreen,\n index,\n });\n imageBlock.appendChild(button.element);\n\n styles += button.styles;\n }\n\n imageContainer.appendChild(imageWrapper);\n\n return imageContainer;\n };\n\n const CreateSlide = (props: TypeCarouselSlideProps) => {\n const { images, setFullScreen } = props;\n const clonedImages = images.map((image) =>\n image.cloneNode(true),\n ) as HTMLImageElement[];\n\n return clonedImages.map((image, index) => {\n const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n const slide = document.createElement('div');\n const imageContainer = CreateImageContainer({\n ...props,\n image,\n setFullScreen,\n index,\n });\n const textContainer = CreateTextContainer({ ...props, reference });\n\n slide.classList.add(ELEMENT_SLIDE);\n slide.appendChild(imageContainer);\n if (textContainer) slide.appendChild(textContainer);\n\n return slide;\n });\n };\n\n const slides = CreateSlide({\n ...props,\n setFullScreen: overlayCarousel.events.setFullScreen,\n });\n const carousel = carouselElements.image({\n slides,\n callback: (activeIndex) => {\n indicator.position(activeIndex);\n },\n maxHeight: 500,\n });\n\n styles += carousel.styles;\n\n const indicator = animations.actions.indicator({\n count: images.length || 0,\n callback: carousel.events.EventMoveTo,\n isThemeDark,\n isThemeLight: !isThemeDark,\n });\n\n styles += indicator.styles;\n\n elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n elementIndicator.appendChild(indicator.element);\n\n elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n elementContainer.appendChild(carousel.element);\n elementContainer.appendChild(elementIndicator);\n if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n elementDeclaration.appendChild(elementContainer);\n\n images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n const responseOptions = {\n styles,\n events: {\n SetEventReize: carousel.events.EventResize,\n },\n };\n\n if (isFullScreenOption) {\n const element = document.createElement('div');\n\n element.appendChild(overlayCarousel.element);\n element.appendChild(elementDeclaration);\n\n return {\n element,\n ...responseOptions,\n };\n }\n\n return {\n element: elementDeclaration,\n ...responseOptions,\n };\n })();\n"],"names":["carouselElements.overlay","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator","element"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/_types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/_types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseProps } from '../../_types';
|
|
2
2
|
import { ElementVisual } from '../../../../_types';
|
|
3
|
-
export interface CampaignProps extends BaseProps {
|
|
3
|
+
export interface CampaignProps extends Pick<BaseProps, 'isThemeLight' | 'isCampaignForward'> {
|
|
4
4
|
}
|
|
5
|
-
declare const _default: ({ isThemeLight }: CampaignProps) => ElementVisual;
|
|
5
|
+
declare const _default: ({ isThemeLight, isCampaignForward, }: CampaignProps) => ElementVisual;
|
|
6
6
|
export default _default;
|
|
7
7
|
//# sourceMappingURL=campaign.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"campaign.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"campaign.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,mBAAmB,CAAC;CAAG;yBAyClD,sCAGb,aAAa,KAAG,aAAa;AAHhC,wBAgDE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const token = require("@universityofmaryland/web-styles-library/token");
|
|
3
3
|
const Logos = require("@universityofmaryland/web-icons-library/logos");
|
|
4
|
+
const media = require("@universityofmaryland/web-utilities-library/media");
|
|
4
5
|
const index = require("../../../../model/elements/index.js");
|
|
5
6
|
const globals = require("../../globals.js");
|
|
6
7
|
function _interopNamespaceDefault(e) {
|
|
@@ -22,8 +23,11 @@ function _interopNamespaceDefault(e) {
|
|
|
22
23
|
const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
|
|
23
24
|
const Logos__namespace = /* @__PURE__ */ _interopNamespaceDefault(Logos);
|
|
24
25
|
const { LARGE } = globals.BREAKPOINTS;
|
|
25
|
-
const
|
|
26
|
+
const createFearlesslyForwardCampaign = (isThemeLight) => {
|
|
27
|
+
const SVG = !isThemeLight && Logos__namespace.campaign.light || Logos__namespace.campaign.dark;
|
|
28
|
+
const img = media.imageFromSvg({ SVG });
|
|
26
29
|
const link = document.createElement("a");
|
|
30
|
+
img.alt = "University of Maryland Fearlessly Forward Campaign Logo";
|
|
27
31
|
link.href = "https://fearlesslyforward.umd.edu";
|
|
28
32
|
link.setAttribute("target", "_blank");
|
|
29
33
|
link.setAttribute("rel", "noopener noreferrer");
|
|
@@ -31,7 +35,26 @@ const createCampaignRow = ({ isThemeLight }) => {
|
|
|
31
35
|
"aria-label",
|
|
32
36
|
"Link to the Fearlessly Forward Brand website"
|
|
33
37
|
);
|
|
34
|
-
link.
|
|
38
|
+
link.appendChild(img);
|
|
39
|
+
return link;
|
|
40
|
+
};
|
|
41
|
+
const createForwardCampaign = (isThemeLight) => {
|
|
42
|
+
const SVG = !isThemeLight && Logos__namespace.forward.light || Logos__namespace.forward.dark;
|
|
43
|
+
const img = media.imageFromSvg({ SVG });
|
|
44
|
+
const link = document.createElement("a");
|
|
45
|
+
img.alt = `University of Maryland's Forward Campaign Logo`;
|
|
46
|
+
link.href = "https://forward.umd.edu";
|
|
47
|
+
link.setAttribute("target", "_blank");
|
|
48
|
+
link.setAttribute("rel", "noopener noreferrer");
|
|
49
|
+
link.setAttribute("aria-label", "Link to the Forward Brand website");
|
|
50
|
+
link.appendChild(img);
|
|
51
|
+
return link;
|
|
52
|
+
};
|
|
53
|
+
const createCampaignRow = ({
|
|
54
|
+
isThemeLight,
|
|
55
|
+
isCampaignForward
|
|
56
|
+
}) => {
|
|
57
|
+
const link = isCampaignForward ? createForwardCampaign(!!isThemeLight) : createFearlesslyForwardCampaign(!!isThemeLight);
|
|
35
58
|
const linkElement = index.create({
|
|
36
59
|
element: link,
|
|
37
60
|
className: "campaign-column-link",
|
|
@@ -48,6 +71,10 @@ const createCampaignRow = ({ isThemeLight }) => {
|
|
|
48
71
|
children: [linkElement],
|
|
49
72
|
elementStyles: {
|
|
50
73
|
element: {
|
|
74
|
+
[`& img`]: {
|
|
75
|
+
maxWidth: "144px",
|
|
76
|
+
width: "100%"
|
|
77
|
+
},
|
|
51
78
|
[`@container (min-width: ${LARGE}px)`]: {
|
|
52
79
|
display: "flex",
|
|
53
80
|
justifyContent: "flex-end",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"campaign.js","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport { ElementModel } from 'model';\nimport { BaseProps } from '../../_types';\nimport { BREAKPOINTS } from '../../globals';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface CampaignProps
|
|
1
|
+
{"version":3,"file":"campaign.js","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { ElementModel } from 'model';\nimport { BaseProps } from '../../_types';\nimport { BREAKPOINTS } from '../../globals';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface CampaignProps\n extends Pick<BaseProps, 'isThemeLight' | 'isCampaignForward'> {}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst createFearlesslyForwardCampaign = (isThemeLight: boolean) => {\n const SVG = (!isThemeLight && Logos.campaign.light) || Logos.campaign.dark;\n const img = imageFromSvg({ SVG });\n const link = document.createElement('a');\n\n img.alt = 'University of Maryland Fearlessly Forward Campaign Logo';\n\n link.href = 'https://fearlesslyforward.umd.edu';\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n link.setAttribute(\n 'aria-label',\n 'Link to the Fearlessly Forward Brand website',\n );\n\n link.appendChild(img);\n\n return link;\n};\n\nconst createForwardCampaign = (isThemeLight: boolean) => {\n const SVG = (!isThemeLight && Logos.forward.light) || Logos.forward.dark;\n const img = imageFromSvg({ SVG });\n const link = document.createElement('a');\n\n img.alt = `University of Maryland's Forward Campaign Logo`;\n\n link.href = 'https://forward.umd.edu';\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n link.setAttribute('aria-label', 'Link to the Forward Brand website');\n\n link.appendChild(img);\n\n return link;\n};\n\nexport default ({\n isThemeLight,\n isCampaignForward,\n}: CampaignProps): ElementVisual => {\n const link = isCampaignForward\n ? createForwardCampaign(!!isThemeLight)\n : createFearlesslyForwardCampaign(!!isThemeLight);\n\n const linkElement = ElementModel.create({\n element: link,\n className: 'campaign-column-link',\n elementStyles: {\n element: {\n display: 'block',\n marginTop: token.spacing.lg,\n maxWidth: '250px',\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'campaign-column-wrapper',\n children: [linkElement],\n elementStyles: {\n element: {\n [`& img`]: {\n maxWidth: '144px',\n width: '100%',\n },\n\n [`@container (min-width: ${LARGE}px)`]: {\n display: 'flex',\n justifyContent: 'flex-end',\n marginLeft: 'auto',\n\n [`& .umd-footer-logo-container`]: {\n display: 'none',\n },\n },\n\n [`@container (max-width: ${LARGE - 1}px)`]: {\n [`& .umd-footer-social-column_wrapper &`]: {\n display: 'none',\n },\n },\n },\n },\n });\n};\n"],"names":["BREAKPOINTS","Logos","imageFromSvg","ElementModel.create","token","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,EAAE,UAAUA,QAAAA;AAElB,MAAM,kCAAkC,CAAC,iBAA0B;AACjE,QAAM,MAAO,CAAC,gBAAgBC,iBAAM,SAAS,SAAUA,iBAAM,SAAS;AACtE,QAAM,MAAMC,MAAAA,aAAa,EAAE,KAAK;AAChC,QAAM,OAAO,SAAS,cAAc,GAAG;AAEvC,MAAI,MAAM;AAEV,OAAK,OAAO;AACZ,OAAK,aAAa,UAAU,QAAQ;AACpC,OAAK,aAAa,OAAO,qBAAqB;AAC9C,OAAK;AAAA,IACH;AAAA,IACA;AAAA,EAAA;AAGF,OAAK,YAAY,GAAG;AAEpB,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC,iBAA0B;AACvD,QAAM,MAAO,CAAC,gBAAgBD,iBAAM,QAAQ,SAAUA,iBAAM,QAAQ;AACpE,QAAM,MAAMC,MAAAA,aAAa,EAAE,KAAK;AAChC,QAAM,OAAO,SAAS,cAAc,GAAG;AAEvC,MAAI,MAAM;AAEV,OAAK,OAAO;AACZ,OAAK,aAAa,UAAU,QAAQ;AACpC,OAAK,aAAa,OAAO,qBAAqB;AAC9C,OAAK,aAAa,cAAc,mCAAmC;AAEnE,OAAK,YAAY,GAAG;AAEpB,SAAO;AACT;AAEA,MAAA,oBAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,OAAO,oBACT,sBAAsB,CAAC,CAAC,YAAY,IACpC,gCAAgC,CAAC,CAAC,YAAY;AAElD,QAAM,cAAcC,MAAAA,OAAoB;AAAA,IACtC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAWC,iBAAM,QAAQ;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,WAAW;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,OAAO,GAAG;AAAA,UACT,UAAU;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,QAGT,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UAEZ,CAAC,8BAA8B,GAAG;AAAA,YAChC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,CAAC,uCAAuC,GAAG;AAAA,YACzC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import * as token from "@universityofmaryland/web-styles-library/token";
|
|
2
2
|
import * as Logos from "@universityofmaryland/web-icons-library/logos";
|
|
3
|
+
import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
|
|
3
4
|
import { create, createDiv } from "../../../../model/elements/index.mjs";
|
|
4
5
|
import { BREAKPOINTS } from "../../globals.mjs";
|
|
5
6
|
const { LARGE } = BREAKPOINTS;
|
|
6
|
-
const
|
|
7
|
+
const createFearlesslyForwardCampaign = (isThemeLight) => {
|
|
8
|
+
const SVG = !isThemeLight && Logos.campaign.light || Logos.campaign.dark;
|
|
9
|
+
const img = imageFromSvg({ SVG });
|
|
7
10
|
const link = document.createElement("a");
|
|
11
|
+
img.alt = "University of Maryland Fearlessly Forward Campaign Logo";
|
|
8
12
|
link.href = "https://fearlesslyforward.umd.edu";
|
|
9
13
|
link.setAttribute("target", "_blank");
|
|
10
14
|
link.setAttribute("rel", "noopener noreferrer");
|
|
@@ -12,7 +16,26 @@ const createCampaignRow = ({ isThemeLight }) => {
|
|
|
12
16
|
"aria-label",
|
|
13
17
|
"Link to the Fearlessly Forward Brand website"
|
|
14
18
|
);
|
|
15
|
-
link.
|
|
19
|
+
link.appendChild(img);
|
|
20
|
+
return link;
|
|
21
|
+
};
|
|
22
|
+
const createForwardCampaign = (isThemeLight) => {
|
|
23
|
+
const SVG = !isThemeLight && Logos.forward.light || Logos.forward.dark;
|
|
24
|
+
const img = imageFromSvg({ SVG });
|
|
25
|
+
const link = document.createElement("a");
|
|
26
|
+
img.alt = `University of Maryland's Forward Campaign Logo`;
|
|
27
|
+
link.href = "https://forward.umd.edu";
|
|
28
|
+
link.setAttribute("target", "_blank");
|
|
29
|
+
link.setAttribute("rel", "noopener noreferrer");
|
|
30
|
+
link.setAttribute("aria-label", "Link to the Forward Brand website");
|
|
31
|
+
link.appendChild(img);
|
|
32
|
+
return link;
|
|
33
|
+
};
|
|
34
|
+
const createCampaignRow = ({
|
|
35
|
+
isThemeLight,
|
|
36
|
+
isCampaignForward
|
|
37
|
+
}) => {
|
|
38
|
+
const link = isCampaignForward ? createForwardCampaign(!!isThemeLight) : createFearlesslyForwardCampaign(!!isThemeLight);
|
|
16
39
|
const linkElement = create({
|
|
17
40
|
element: link,
|
|
18
41
|
className: "campaign-column-link",
|
|
@@ -29,6 +52,10 @@ const createCampaignRow = ({ isThemeLight }) => {
|
|
|
29
52
|
children: [linkElement],
|
|
30
53
|
elementStyles: {
|
|
31
54
|
element: {
|
|
55
|
+
[`& img`]: {
|
|
56
|
+
maxWidth: "144px",
|
|
57
|
+
width: "100%"
|
|
58
|
+
},
|
|
32
59
|
[`@container (min-width: ${LARGE}px)`]: {
|
|
33
60
|
display: "flex",
|
|
34
61
|
justifyContent: "flex-end",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"campaign.mjs","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport { ElementModel } from 'model';\nimport { BaseProps } from '../../_types';\nimport { BREAKPOINTS } from '../../globals';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface CampaignProps
|
|
1
|
+
{"version":3,"file":"campaign.mjs","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { ElementModel } from 'model';\nimport { BaseProps } from '../../_types';\nimport { BREAKPOINTS } from '../../globals';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface CampaignProps\n extends Pick<BaseProps, 'isThemeLight' | 'isCampaignForward'> {}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst createFearlesslyForwardCampaign = (isThemeLight: boolean) => {\n const SVG = (!isThemeLight && Logos.campaign.light) || Logos.campaign.dark;\n const img = imageFromSvg({ SVG });\n const link = document.createElement('a');\n\n img.alt = 'University of Maryland Fearlessly Forward Campaign Logo';\n\n link.href = 'https://fearlesslyforward.umd.edu';\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n link.setAttribute(\n 'aria-label',\n 'Link to the Fearlessly Forward Brand website',\n );\n\n link.appendChild(img);\n\n return link;\n};\n\nconst createForwardCampaign = (isThemeLight: boolean) => {\n const SVG = (!isThemeLight && Logos.forward.light) || Logos.forward.dark;\n const img = imageFromSvg({ SVG });\n const link = document.createElement('a');\n\n img.alt = `University of Maryland's Forward Campaign Logo`;\n\n link.href = 'https://forward.umd.edu';\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n link.setAttribute('aria-label', 'Link to the Forward Brand website');\n\n link.appendChild(img);\n\n return link;\n};\n\nexport default ({\n isThemeLight,\n isCampaignForward,\n}: CampaignProps): ElementVisual => {\n const link = isCampaignForward\n ? createForwardCampaign(!!isThemeLight)\n : createFearlesslyForwardCampaign(!!isThemeLight);\n\n const linkElement = ElementModel.create({\n element: link,\n className: 'campaign-column-link',\n elementStyles: {\n element: {\n display: 'block',\n marginTop: token.spacing.lg,\n maxWidth: '250px',\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'campaign-column-wrapper',\n children: [linkElement],\n elementStyles: {\n element: {\n [`& img`]: {\n maxWidth: '144px',\n width: '100%',\n },\n\n [`@container (min-width: ${LARGE}px)`]: {\n display: 'flex',\n justifyContent: 'flex-end',\n marginLeft: 'auto',\n\n [`& .umd-footer-logo-container`]: {\n display: 'none',\n },\n },\n\n [`@container (max-width: ${LARGE - 1}px)`]: {\n [`& .umd-footer-social-column_wrapper &`]: {\n display: 'none',\n },\n },\n },\n },\n });\n};\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":";;;;;AAWA,MAAM,EAAE,UAAU;AAElB,MAAM,kCAAkC,CAAC,iBAA0B;AACjE,QAAM,MAAO,CAAC,gBAAgB,MAAM,SAAS,SAAU,MAAM,SAAS;AACtE,QAAM,MAAM,aAAa,EAAE,KAAK;AAChC,QAAM,OAAO,SAAS,cAAc,GAAG;AAEvC,MAAI,MAAM;AAEV,OAAK,OAAO;AACZ,OAAK,aAAa,UAAU,QAAQ;AACpC,OAAK,aAAa,OAAO,qBAAqB;AAC9C,OAAK;AAAA,IACH;AAAA,IACA;AAAA,EAAA;AAGF,OAAK,YAAY,GAAG;AAEpB,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC,iBAA0B;AACvD,QAAM,MAAO,CAAC,gBAAgB,MAAM,QAAQ,SAAU,MAAM,QAAQ;AACpE,QAAM,MAAM,aAAa,EAAE,KAAK;AAChC,QAAM,OAAO,SAAS,cAAc,GAAG;AAEvC,MAAI,MAAM;AAEV,OAAK,OAAO;AACZ,OAAK,aAAa,UAAU,QAAQ;AACpC,OAAK,aAAa,OAAO,qBAAqB;AAC9C,OAAK,aAAa,cAAc,mCAAmC;AAEnE,OAAK,YAAY,GAAG;AAEpB,SAAO;AACT;AAEA,MAAA,oBAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,OAAO,oBACT,sBAAsB,CAAC,CAAC,YAAY,IACpC,gCAAgC,CAAC,CAAC,YAAY;AAElD,QAAM,cAAcA,OAAoB;AAAA,IACtC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,WAAW;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,OAAO,GAAG;AAAA,UACT,UAAU;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,QAGT,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UAEZ,CAAC,8BAA8B,GAAG;AAAA,YAChC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,CAAC,uCAAuC,GAAG;AAAA,YACzC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"names":[],"mappings":"AACA,OAAsB,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,gBACf,SAAQ,SAAS,EACf,aAAa,EACb,YAAY;IACd,eAAe,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1C;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"names":[],"mappings":"AACA,OAAsB,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,gBACf,SAAQ,SAAS,EACf,aAAa,EACb,YAAY;IACd,eAAe,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1C;yBAmGe,OAAO,gBAAgB,KAAG,aAAa;AAAvD,wBAYE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL('../../assets/visual-default.jpg'
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL(\n '../../assets/visual-default.jpg',\n import.meta.url as any,\n ).href;\n }\n\n if (!imageSrc || !altText) return;\n\n const gradientElement = ElementModel.createDiv({\n className: 'umd-footer-background-image-graident',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n left: 0,\n top: '2px',\n width: '500vw',\n height: '100px',\n background: `linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100%)`,\n },\n },\n });\n\n const imageElement = ElementModel.create({\n element: document.createElement('img'),\n className: 'umd-footer-background-image',\n elementStyles: {\n element: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n });\n\n imageElement.element.setAttribute('src', imageSrc);\n imageElement.element.setAttribute('alt', altText);\n\n return ElementModel.createDiv({\n className: 'umd-footer-background-image-container',\n children: [gradientElement, imageElement],\n elementStyles: {\n element: {\n position: 'relative',\n paddingTop: '100px',\n\n [`& img`]: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n },\n });\n};\n\nconst createContainer = (\n logoRow: ElementVisual,\n visualContainerElement?: ElementVisual,\n linksRowElement?: ElementVisual,\n): ElementVisual => {\n return ElementModel.createDiv({\n className: 'umd-footer-main-container',\n children: [visualContainerElement, logoRow, linksRowElement].filter(\n Boolean,\n ) as ElementVisual[],\n });\n};\n\nexport default (props: MainSectionProps): ElementVisual => {\n const { isTypeMega, isTypeVisual } = props;\n\n const logoRow = createRowLogo(props);\n const visualContainerElement = createVisualContainer(props);\n const linksRowElement = (isTypeMega || isTypeVisual) && createRowLinks(props);\n\n return createContainer(\n logoRow,\n visualContainerElement,\n linksRowElement || undefined,\n );\n};\n"],"names":["ElementModel.createDiv","ElementModel.create","createRowLogo","createRowLinks"],"mappings":";;;;;AAaA,MAAM,wBAAwB,CAC5B,UAI8B;AAC9B,QAAM,EAAE,cAAc,cAAc,gBAAA,IAAoB;AACxD,QAAM,oBAAoB,gBAAgB;AAE1C,MAAI,CAAC,kBAAmB;AAExB,MAAI,UAAyB;AAC7B,MAAI,WAA0B;AAE9B,MAAI,iBAAiB;AACnB,UAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,UAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,QAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,iBAAW;AAAA,IACb;AACA,QAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,gBAAU;AAAA,IACZ;AAAA,EACF,WAAW,cAAc;AACvB,cAAU;AACV,eAAW,IAAA,IAAA,+85IAAA,OAAA,aAAA,cAAA,QAAA,KAAA,EAAA,cAAA,UAAA,EAAA,OAAA,0BAAA,uBAAA,QAAA,YAAA,MAAA,YAAA,uBAAA,OAAA,IAAA,IAAA,mDAAA,SAAA,OAAA,EAAA,IAAA,EAGT;AAAA,EACJ;AAEA,MAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,QAAM,kBAAkBA,QAAAA,UAAuB;AAAA,IAC7C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,QAAM,eAAeC,QAAAA,OAAoB;AAAA,IACvC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,eAAa,QAAQ,aAAa,OAAO,QAAQ;AACjD,eAAa,QAAQ,aAAa,OAAO,OAAO;AAEhD,SAAOD,kBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,YAAY;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,SACA,wBACA,oBACkB;AAClB,SAAOA,kBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,wBAAwB,SAAS,eAAe,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAA,aAAe,CAAC,UAA2C;AACzD,QAAM,EAAE,YAAY,aAAA,IAAiB;AAErC,QAAM,UAAUE,MAAc,KAAK;AACnC,QAAM,yBAAyB,sBAAsB,KAAK;AAC1D,QAAM,mBAAmB,cAAc,iBAAiBC,QAAe,KAAK;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA;AAEvB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL('../../assets/visual-default.jpg'
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL(\n '../../assets/visual-default.jpg',\n import.meta.url as any,\n ).href;\n }\n\n if (!imageSrc || !altText) return;\n\n const gradientElement = ElementModel.createDiv({\n className: 'umd-footer-background-image-graident',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n left: 0,\n top: '2px',\n width: '500vw',\n height: '100px',\n background: `linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100%)`,\n },\n },\n });\n\n const imageElement = ElementModel.create({\n element: document.createElement('img'),\n className: 'umd-footer-background-image',\n elementStyles: {\n element: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n });\n\n imageElement.element.setAttribute('src', imageSrc);\n imageElement.element.setAttribute('alt', altText);\n\n return ElementModel.createDiv({\n className: 'umd-footer-background-image-container',\n children: [gradientElement, imageElement],\n elementStyles: {\n element: {\n position: 'relative',\n paddingTop: '100px',\n\n [`& img`]: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n },\n });\n};\n\nconst createContainer = (\n logoRow: ElementVisual,\n visualContainerElement?: ElementVisual,\n linksRowElement?: ElementVisual,\n): ElementVisual => {\n return ElementModel.createDiv({\n className: 'umd-footer-main-container',\n children: [visualContainerElement, logoRow, linksRowElement].filter(\n Boolean,\n ) as ElementVisual[],\n });\n};\n\nexport default (props: MainSectionProps): ElementVisual => {\n const { isTypeMega, isTypeVisual } = props;\n\n const logoRow = createRowLogo(props);\n const visualContainerElement = createVisualContainer(props);\n const linksRowElement = (isTypeMega || isTypeVisual) && createRowLinks(props);\n\n return createContainer(\n logoRow,\n visualContainerElement,\n linksRowElement || undefined,\n );\n};\n"],"names":["ElementModel.createDiv","ElementModel.create"],"mappings":";;;AAaA,MAAM,wBAAwB,CAC5B,UAI8B;AAC9B,QAAM,EAAE,cAAc,cAAc,gBAAA,IAAoB;AACxD,QAAM,oBAAoB,gBAAgB;AAE1C,MAAI,CAAC,kBAAmB;AAExB,MAAI,UAAyB;AAC7B,MAAI,WAA0B;AAE9B,MAAI,iBAAiB;AACnB,UAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,UAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,QAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,iBAAW;AAAA,IACb;AACA,QAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,gBAAU;AAAA,IACZ;AAAA,EACF,WAAW,cAAc;AACvB,cAAU;AACV,eAAW,IAAA,IAAA,+85IAAA,YAAA,GAAA,EAGT;AAAA,EACJ;AAEA,MAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,QAAM,kBAAkBA,UAAuB;AAAA,IAC7C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,eAAa,QAAQ,aAAa,OAAO,QAAQ;AACjD,eAAa,QAAQ,aAAa,OAAO,OAAO;AAEhD,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,YAAY;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,SACA,wBACA,oBACkB;AAClB,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,wBAAwB,SAAS,eAAe,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAA,aAAe,CAAC,UAA2C;AACzD,QAAM,EAAE,YAAY,aAAA,IAAiB;AAErC,QAAM,UAAU,cAAc,KAAK;AACnC,QAAM,yBAAyB,sBAAsB,KAAK;AAC1D,QAAM,mBAAmB,cAAc,iBAAiB,eAAe,KAAK;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA;AAEvB;"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export interface UtilityProps {
|
|
1
|
+
import { BaseProps } from '../../_types';
|
|
2
|
+
export interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {
|
|
4
3
|
slotUtilityLinks?: HTMLElement | null;
|
|
5
4
|
}
|
|
6
|
-
declare const _default: (props:
|
|
5
|
+
declare const _default: (props: UtilityProps) => {
|
|
6
|
+
element: HTMLElement;
|
|
7
|
+
className: string;
|
|
8
|
+
styles: string;
|
|
9
|
+
};
|
|
7
10
|
export default _default;
|
|
8
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACnE,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;yBAkDe,OAAO,YAAY;;;;;AAAnC,wBAiGE"}
|
|
@@ -100,7 +100,7 @@ const createUtility = (props) => {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
});
|
|
103
|
-
|
|
103
|
+
return index.createDiv({
|
|
104
104
|
className: "umd-footer-utility-container",
|
|
105
105
|
children: [wrapper],
|
|
106
106
|
elementStyles: {
|
|
@@ -124,7 +124,6 @@ const createUtility = (props) => {
|
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
});
|
|
127
|
-
return container;
|
|
128
127
|
};
|
|
129
128
|
module.exports = createUtility;
|
|
130
129
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n token,\n layout,\n animation,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n token,\n layout,\n animation,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { type BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {\n slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n {\n title: 'Privacy Policy',\n url: 'https://www.umd.edu/privacy-notice',\n },\n {\n title: 'Web Accessibility',\n url: 'https://www.umd.edu/web-accessibility',\n },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n return ElementModel.create({\n element: link,\n className: 'umd-footer-utility-container-link',\n });\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n const span = ElementModel.createSpan({\n className: 'umd-footer-utility-container-sublink-text',\n });\n\n const link = ElementModel.create({\n element: document.createElement('a'),\n className: 'umd-footer-utility-container-sublink',\n children: [span],\n attributes: [\n {\n href: url,\n },\n {\n target: '_blank',\n },\n { rel: 'noopener noreferrer' },\n ],\n });\n\n span.element.innerText = title;\n\n return ElementModel.createDiv({\n className: 'umd-footer-utility-container-link-wrapper',\n children: [createUtilityContainerLink(link.element)],\n });\n};\n\nexport default (props: UtilityProps) => {\n const { isThemeLight, slotUtilityLinks } = props;\n const linkElements: ElementVisual[] = [];\n const copyRightElement = ElementModel.createParagraph({\n className: 'umd-footer-utility-container-copyright',\n });\n if (slotUtilityLinks) {\n const slottedLinks = Array.from(\n slotUtilityLinks.querySelectorAll('a'),\n ) as HTMLAnchorElement[];\n\n slottedLinks.forEach((link) => {\n wrapLinkForAnimation({ element: link });\n linkElements.push(createUtilityContainerLink(link));\n });\n }\n const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n requiredSubLinks.forEach((link) => {\n linkElements.push(createSubLink(link));\n });\n\n copyRightElement.element.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n linkElements.push(copyRight);\n\n const wrapper = ElementModel.createDiv({\n className: 'umd-footer-utility-container-lock',\n children: linkElements,\n elementStyles: {\n element: {\n ...layout.space.horizontal.larger,\n\n [`@container (max-width: ${LARGE - 1}px)`]: {\n '& > *:not(:first-child)': {\n marginTop: token.spacing.sm,\n },\n },\n\n [`@container (min-width: ${LARGE}px)`]: {\n display: 'flex',\n alignItems: 'center',\n\n [`& > *:not(:first-child)`]: {\n marginLeft: token.spacing.sm,\n paddingLeft: token.spacing.sm,\n backgroundPosition: `${token.spacing.sm} 100%`,\n borderLeft: `1px solid ${token.color.gray.dark}`,\n },\n },\n\n ['& a, & p']: {\n color: token.color.gray.light,\n },\n\n ['& a']: {\n ...(isThemeLight && { color: token.color.gray.dark }),\n },\n\n ['& p']: {\n display: 'flex',\n alignItems: 'center',\n\n ...(isThemeLight && { color: token.color.black }),\n },\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'umd-footer-utility-container',\n children: [wrapper],\n elementStyles: {\n element: {\n padding: `${token.spacing.sm} 0`,\n backgroundColor: token.color.gray.darker,\n\n ...(isThemeLight && {\n backgroundColor: token.color.gray.light,\n }),\n\n ['& *']: {\n ...typography.sans.smaller,\n },\n\n ['& a']: {\n display: 'block',\n ...animation.line.slideUnderWhite,\n\n ...(isThemeLight && {\n color: token.color.black,\n ...animation.line.slideUnderBlack,\n }),\n },\n },\n },\n });\n};\n"],"names":["BREAKPOINTS","ElementModel.create","ElementModel.createSpan","ElementModel.createDiv","ElementModel.createParagraph","wrapLinkForAnimation","layout","token","typography","animation"],"mappings":"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"}
|
|
@@ -99,7 +99,7 @@ const createUtility = (props) => {
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
|
-
|
|
102
|
+
return createDiv({
|
|
103
103
|
className: "umd-footer-utility-container",
|
|
104
104
|
children: [wrapper],
|
|
105
105
|
elementStyles: {
|
|
@@ -123,7 +123,6 @@ const createUtility = (props) => {
|
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
|
-
return container;
|
|
127
126
|
};
|
|
128
127
|
export {
|
|
129
128
|
createUtility as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n token,\n layout,\n animation,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport {
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n token,\n layout,\n animation,\n typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { type BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {\n slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n {\n title: 'Privacy Policy',\n url: 'https://www.umd.edu/privacy-notice',\n },\n {\n title: 'Web Accessibility',\n url: 'https://www.umd.edu/web-accessibility',\n },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n return ElementModel.create({\n element: link,\n className: 'umd-footer-utility-container-link',\n });\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n const span = ElementModel.createSpan({\n className: 'umd-footer-utility-container-sublink-text',\n });\n\n const link = ElementModel.create({\n element: document.createElement('a'),\n className: 'umd-footer-utility-container-sublink',\n children: [span],\n attributes: [\n {\n href: url,\n },\n {\n target: '_blank',\n },\n { rel: 'noopener noreferrer' },\n ],\n });\n\n span.element.innerText = title;\n\n return ElementModel.createDiv({\n className: 'umd-footer-utility-container-link-wrapper',\n children: [createUtilityContainerLink(link.element)],\n });\n};\n\nexport default (props: UtilityProps) => {\n const { isThemeLight, slotUtilityLinks } = props;\n const linkElements: ElementVisual[] = [];\n const copyRightElement = ElementModel.createParagraph({\n className: 'umd-footer-utility-container-copyright',\n });\n if (slotUtilityLinks) {\n const slottedLinks = Array.from(\n slotUtilityLinks.querySelectorAll('a'),\n ) as HTMLAnchorElement[];\n\n slottedLinks.forEach((link) => {\n wrapLinkForAnimation({ element: link });\n linkElements.push(createUtilityContainerLink(link));\n });\n }\n const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n requiredSubLinks.forEach((link) => {\n linkElements.push(createSubLink(link));\n });\n\n copyRightElement.element.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n linkElements.push(copyRight);\n\n const wrapper = ElementModel.createDiv({\n className: 'umd-footer-utility-container-lock',\n children: linkElements,\n elementStyles: {\n element: {\n ...layout.space.horizontal.larger,\n\n [`@container (max-width: ${LARGE - 1}px)`]: {\n '& > *:not(:first-child)': {\n marginTop: token.spacing.sm,\n },\n },\n\n [`@container (min-width: ${LARGE}px)`]: {\n display: 'flex',\n alignItems: 'center',\n\n [`& > *:not(:first-child)`]: {\n marginLeft: token.spacing.sm,\n paddingLeft: token.spacing.sm,\n backgroundPosition: `${token.spacing.sm} 100%`,\n borderLeft: `1px solid ${token.color.gray.dark}`,\n },\n },\n\n ['& a, & p']: {\n color: token.color.gray.light,\n },\n\n ['& a']: {\n ...(isThemeLight && { color: token.color.gray.dark }),\n },\n\n ['& p']: {\n display: 'flex',\n alignItems: 'center',\n\n ...(isThemeLight && { color: token.color.black }),\n },\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'umd-footer-utility-container',\n children: [wrapper],\n elementStyles: {\n element: {\n padding: `${token.spacing.sm} 0`,\n backgroundColor: token.color.gray.darker,\n\n ...(isThemeLight && {\n backgroundColor: token.color.gray.light,\n }),\n\n ['& *']: {\n ...typography.sans.smaller,\n },\n\n ['& a']: {\n display: 'block',\n ...animation.line.slideUnderWhite,\n\n ...(isThemeLight && {\n color: token.color.black,\n ...animation.line.slideUnderBlack,\n }),\n },\n },\n },\n });\n};\n"],"names":["ElementModel.create","ElementModel.createSpan","ElementModel.createDiv","ElementModel.createParagraph"],"mappings":"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"}
|