@universityofmaryland/web-elements-library 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/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/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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"}
|