@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/composite/carousel/image/standard.js

@@ -1,231 +1,85 @@
-import { token, element, typography } from "@universityofmaryland/web-styles-library";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import "../elements/blocks.js";
-import "../elements/full-screen.js";
-import { createCompositeCarouselOverlay } from "../elements/overlay.js";
-import { createCompositeCarouselImage } from "../elements/image.js";
-import "@universityofmaryland/web-builder-library";
+import { token, typography, element } from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { combineStyles } from "@universityofmaryland/web-utilities-library/styles";
 import "@universityofmaryland/web-token-library";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/events";
+import "@universityofmaryland/web-icons-library/arrows";
+import "@universityofmaryland/web-styles-library/typography";
+import { fullscreen } from "../../../atomic/buttons/fullscreen.js";
+import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-styles-library/element";
 import "@universityofmaryland/web-styles-library/layout";
 import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import { createAnimationIndicator } from "../../../atomic/animations/actions/indicator.js";
-import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
-import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
-import { fullscreen } from "../../../atomic/buttons/fullscreen.js";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
-import { layoutImage } from "../../../layout/image.js";
-const MEDIUM = 500;
+import { createCompositeCarouselOverlay } from "../elements/overlay.js";
+import { createCompositeCarouselImage } from "../elements/image.js";
+import { createCarouselIndicatorWrapper } from "../elements/indicator-wrapper.js";
+import { createLayoutImageContainer } from "../../../layout/image.js";
 const ATTRIBUTE_REFERENCE = "data-reference";
-const ATTRIBUTE_THEME = "data-theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const ELEMENT_NAME = "umd-carousel-image-standard";
-const ELEMENT_CAROUSEL_IMAGE_DECLARATION = "carousel-image-standard-declaration";
-const ELEMENT_CAROUSEL_IMAGE_CONTAINER = "carousel-image-standard-container";
-const ELEMENT_SLIDE = "carousel-image-standard-slide";
-const ELEMENT_SLIDE_IMAGE_CONTAINER = "carousel-image-standard-slide-image";
-const ELEMENT_SLIDE_IMAGE_WRAPPER = "carousel-image-standard-slide-wrapper";
-const ELEMENT_SLIDE_TEXT_CONTAINER = "carousel-image-standard-slide-text";
-const ELEMENT_SLIDE_HEADLINE = "carousel-image-standard-slide-headline";
-const ELEMENT_SLIDE_RICH_TEXT = "carousel-image-standard-slide-rich-text";
-const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
-const ELEMENT_CAROUSEL_INDICATOR_WRAPPER = "carousel-indicator-wrapper";
-const ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER = "carousel-overlay-image-container";
-const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;
-const OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;
-const OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;
-const OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;
-const OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_CONTAINER},
-  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},
-  ${OVERWRITE_THEME_DARK_INDICATOR} {
-    background-color: ${token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {
-    background-color: ${token.color.gray.dark};
-  }
-
-  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {
-    color: ${token.color.white};
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} {
-    background-color: ${token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
-    fill: ${token.color.white};
-  }
-
-  ${OVERWRITE_THEME_DARK_RICH_TEXT} {
-    color: ${token.color.white};
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark
-  }
-})}
-`;
-const IndicatorContainerStyles = `
-  .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {
-    padding: ${token.spacing.md};
-    background-color: ${token.color.gray.lightest};
-    display: flex;
-    justify-content: center;
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {
-      padding: ${token.spacing.lg};
-    }
-  }
-`;
-const OverlayImageContainerStyles = `
-  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: ${token.color.gray.dark};
-  }
-
-  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {
-    object-fit: contain;
-    max-height: 100%;
-  }
-`;
-const TextContainerStyles = `
-  .${ELEMENT_SLIDE_TEXT_CONTAINER} {
-    padding: ${token.spacing.md};
-    padding-bottom: 0;
-    background-color: ${token.color.gray.lightest};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    .${ELEMENT_SLIDE_TEXT_CONTAINER} {
-      padding: ${token.spacing.lg};
-      padding-bottom: 0;
-    }
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large
-  }
-})}
-
-  .${ELEMENT_SLIDE_RICH_TEXT} {
-    margin-top: ${token.spacing.min};
-    color: ${token.color.gray.dark}
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced
-  }
-})}
-`;
-const ImageContainerStyles = `
-  .${ELEMENT_SLIDE_IMAGE_CONTAINER} {
-    position: relative;
-    background-color: ${token.color.black};
-  }
-
-  .${ELEMENT_SLIDE_IMAGE_WRAPPER} {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {
-    height: 100%;
-  }
-
-  .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {
-    object-fit: contain;
-    max-height: 100%;
-  }
-`;
-const STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `
-  .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {
-    overflow: hidden;
-    background-color: ${token.color.gray.lightest};
-  }
-
-  ${layoutImage.Styles}
-  ${ImageContainerStyles}
-  ${TextContainerStyles}
-  ${OverlayImageContainerStyles}
-  ${IndicatorContainerStyles}
-  ${OverwriteThemeDark}
-`;
 const createCompositeCarouselImageStandard = (props) => (() => {
-  const { images, isThemeDark, isFullScreenOption } = props;
-  const elementDeclaration = document.createElement("div");
-  const elementContainer = document.createElement("div");
-  const elementIndicator = document.createElement("div");
-  const overlayCarousel = createCompositeCarouselOverlay({
-    images
-  });
-  let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;
-  styles += overlayCarousel.styles;
+  const { images, isThemeDark, isFullScreenOption, isToggleCaption = true } = props;
+  const overlayCarousel = createCompositeCarouselOverlay({ images, isToggleCaption });
+  let buttonStyles = "";
   const CreateTextContainer = ({
     headlines,
     texts,
     reference
   }) => {
-    const textContainer = document.createElement("div");
-    const headline = headlines?.find(
-      (headline2) => headline2.getAttribute(ATTRIBUTE_REFERENCE) === reference
-    );
-    const richText = texts?.find(
-      (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference
-    );
-    textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);
-    if (headline || richText) {
-      if (headline) {
-        headline.classList.add(ELEMENT_SLIDE_HEADLINE);
-        textContainer.appendChild(headline);
-      }
-      if (richText) {
-        richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);
-        textContainer.appendChild(richText);
+    const headline = headlines && headlines.find((item) => item.getAttribute(ATTRIBUTE_REFERENCE) === reference);
+    const richText = texts && texts.find((item) => item.getAttribute(ATTRIBUTE_REFERENCE) === reference);
+    if (!headline && !richText) return null;
+    const createHeadline = () => {
+      if (!headline) return null;
+      return new ElementBuilder(headline).withClassName("carousel-image-standard-slide-headline").styled(typography.sans.large);
+    };
+    const createRichText = () => {
+      if (!richText) return null;
+      return new ElementBuilder(richText).withClassName("carousel-image-standard-slide-rich-text").withStyles({
+        element: {
+          marginTop: token.spacing.min,
+          color: token.color.gray.dark,
+          ...element.text.rich.advanced,
+          ...isThemeDark && {
+            color: token.color.white,
+            ...element.text.rich.advancedDark
+          }
+        }
+      });
+    };
+    const textChildren = [createHeadline(), createRichText()].filter((child) => child !== null);
+    return new ElementBuilder().withClassName("carousel-image-standard-slide-text").withStyles({
+      element: {
+        padding: token.spacing.md,
+        paddingBottom: 0,
+        backgroundColor: token.color.gray.lightest,
+        ...isThemeDark && {
+          backgroundColor: token.color.black,
+          "& *": { color: token.color.white }
+        },
+        [`@media (${token.media.queries.tablet.min})`]: {
+          paddingBottom: token.spacing.md
+        },
+        "@container (min-width: 500px)": {
+          padding: token.spacing.lg
+        }
       }
-      return textContainer;
-    }
-    return null;
+    }).withChildren(...textChildren).build();
   };
   const CreateImageContainer = ({
     image,
@@ -233,96 +87,128 @@ const createCompositeCarouselImageStandard = (props) => (() => {
     setFullScreen,
     index: index$1
   }) => {
-    const imageContainer = document.createElement("div");
-    const imageWrapper = document.createElement("div");
-    const imageBlock = layoutImage.CreateElement({
-      image,
-      showCaption: true
-    });
-    imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);
-    imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);
-    imageWrapper.appendChild(imageBlock);
+    const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });
+    const standardSlideWrapperElement = new ElementBuilder().withClassName("carousel-image-standard-slide-wrapper").withStyles({
+      element: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        "& > *": { height: "100%" },
+        "& img": { objectFit: "contain", width: "100%", height: "100%" }
+      }
+    }).withChild(imageBlock).build();
     if (isFullScreenOption2) {
-      const button = fullscreen.create({
+      const buttonFullscreen = fullscreen.create({
         callback: setFullScreen,
         index: index$1
       });
-      imageBlock.appendChild(button.element);
-      styles += button.styles;
+      imageBlock.element.appendChild(buttonFullscreen.element);
+      buttonStyles += buttonFullscreen.styles;
     }
-    imageContainer.appendChild(imageWrapper);
-    return imageContainer;
+    return new ElementBuilder().withClassName("carousel-image-standard-slide-image").withStyles({
+      element: {
+        position: "relative",
+        backgroundColor: token.color.black,
+        ...isThemeDark && { backgroundColor: token.color.gray.darker }
+      }
+    }).withChild(standardSlideWrapperElement).build();
   };
-  const CreateSlide = (props2) => {
-    const { images: images2, setFullScreen } = props2;
+  const CreateSlide = (slideProps) => {
+    const { images: images2, setFullScreen } = slideProps;
     const clonedImages = images2.map(
       (image) => image.cloneNode(true)
     );
-    return clonedImages.map((image, index) => {
+    const createStandardSlide = ({
+      image,
+      index
+    }) => {
       const reference = image.getAttribute(ATTRIBUTE_REFERENCE);
-      const slide = document.createElement("div");
-      const imageContainer = CreateImageContainer({
-        ...props2,
+      const imageContainerModel = CreateImageContainer({
+        ...slideProps,
         image,
         setFullScreen,
         index
       });
-      const textContainer = CreateTextContainer({ ...props2, reference });
-      slide.classList.add(ELEMENT_SLIDE);
-      slide.appendChild(imageContainer);
-      if (textContainer) slide.appendChild(textContainer);
-      return slide;
+      const textContainerModel = CreateTextContainer({
+        ...slideProps,
+        reference
+      });
+      const slideChildren = [imageContainerModel, textContainerModel].filter((child) => child !== null);
+      return new ElementBuilder().withClassName("carousel-image-standard-slide").withChildren(...slideChildren).build();
+    };
+    return clonedImages.map((image, index) => {
+      return createStandardSlide({ image, index });
     });
   };
-  const slides = CreateSlide({
+  const slideModels = CreateSlide({
     ...props,
     setFullScreen: overlayCarousel.events.setFullScreen
   });
+  const slides = slideModels.map((model) => model.element);
+  const slideStyles = slideModels.reduce(
+    (accumulator, model) => accumulator + (model.styles ?? ""),
+    ""
+  );
   const carousel = createCompositeCarouselImage({
     slides,
+    isThemeDark,
     callback: (activeIndex) => {
-      indicator.position(activeIndex);
+      indicatorWrapperModel.position(activeIndex);
     },
-    maxHeight: 500
+    maxHeight: 500,
+    includeButtonWrapper: false
   });
-  styles += carousel.styles;
-  const indicator = createAnimationIndicator({
-    count: images.length || 0,
+  const indicatorWrapperModel = createCarouselIndicatorWrapper({
+    count: images.length,
     callback: carousel.events.EventMoveTo,
     isThemeDark,
-    ...!isThemeDark && {
-      overlayColor: token.color.gray.lightest
-    }
+    isBackground: true
   });
-  styles += indicator.styles;
-  elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);
-  elementIndicator.appendChild(indicator.element);
-  elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);
-  elementContainer.appendChild(carousel.element);
-  elementContainer.appendChild(elementIndicator);
-  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);
-  elementDeclaration.appendChild(elementContainer);
-  images[images.length - 1].addEventListener("load", carousel.events.Load);
-  const responseOptions = {
-    styles,
-    events: {
-      SetEventReize: carousel.events.EventResize
+  const indicatorContainerModel = new ElementBuilder().withClassName("carousel-image-standard-indicator").withStyles({
+    element: {
+      backgroundColor: token.color.gray.lightest,
+      ...isThemeDark && { backgroundColor: token.color.black },
+      [`@media (${token.media.queries.desktop.min})`]: {
+        paddingBottom: token.spacing.lg
+      }
     }
-  };
+  }).withChild(indicatorWrapperModel).build();
+  const buttonWrapperModel = new ElementBuilder().withClassName("carousel-image-standard-buttons").withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      gap: token.spacing.min,
+      padding: `${token.spacing.md} 0`,
+      backgroundColor: token.color.gray.lightest,
+      ...isThemeDark && { backgroundColor: token.color.black }
+    }
+  }).withChildren(carousel.buttons.prev, carousel.buttons.next).build();
+  const containerModel = new ElementBuilder().withClassName("carousel-image-standard-container").withStyles({
+    element: {
+      position: "relative",
+      backgroundColor: token.color.gray.lightest,
+      ...isThemeDark && { backgroundColor: token.color.black }
+    }
+  }).withChildren(carousel, indicatorContainerModel, buttonWrapperModel).build();
+  const declarationModel = new ElementBuilder().withClassName("carousel-image-standard-declaration").withStyles({
+    element: { containerType: "inline-size" }
+  }).withChild(containerModel).withEvents({ SetEventReize: carousel.events.EventResize }).build();
+  declarationModel.styles = combineStyles(
+    slideStyles,
+    overlayCarousel.styles,
+    buttonStyles,
+    declarationModel.styles
+  );
+  images[images.length - 1].addEventListener("load", carousel.events.Load);
   if (isFullScreenOption) {
-    const element2 = document.createElement("div");
-    element2.appendChild(overlayCarousel.element);
-    element2.appendChild(elementDeclaration);
-    return {
-      element: element2,
-      ...responseOptions
-    };
+    const wrapperModel = new ElementBuilder().withChild(declarationModel).withModifier((element2) => {
+      element2.insertAdjacentElement("afterbegin", overlayCarousel.element);
+    }).withEvents({ SetEventReize: carousel.events.EventResize }).build();
+    return wrapperModel;
   }
-  return {
-    element: elementDeclaration,
-    ...responseOptions
-  };
+  return declarationModel;
 })();
 export {
   createCompositeCarouselImageStandard

package/dist/composite/carousel/image/standard.js.map

@@ -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 * as carouselElements from '../elements';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\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 const createCompositeCarouselImageStandard = (\n  props: TypeCarouselImageStandardProps,\n) =>\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      ...(!isThemeDark && {\n        overlayColor: token.color.gray.lightest,\n      }),\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":["LayoutImage","carouselElements.overlay","headline","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","animations.actions.indicator","element"],"mappings":"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"}
+{"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 { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { buttons } from 'atomic';\nimport { createLayoutImageContainer } from 'layout';\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 = TypeFullScreen &\n  TypesetFullScreen & {\n    image: HTMLImageElement;\n    index: number;\n  };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n  TypesetFullScreen &\n  TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n  TypeFullScreen & {\n    isThemeDark?: boolean;\n    isToggleCaption?: boolean;\n  };\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\n\nexport const createCompositeCarouselImageStandard = (\n  props: TypeCarouselImageStandardProps,\n) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption, isToggleCaption = true } = props;\n    const overlayCarousel = carouselElements.overlay({ images, isToggleCaption });\n    let buttonStyles = '';\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 headline = headlines && headlines.find((item) => item.getAttribute(ATTRIBUTE_REFERENCE) === reference);\n      const richText = texts && texts.find((item) => item.getAttribute(ATTRIBUTE_REFERENCE) === reference);\n\t\t\t\n      if (!headline && !richText) return null;\n\n      const createHeadline = () => {\n        if (!headline) return null;\n        return new ElementBuilder(headline)\n          .withClassName('carousel-image-standard-slide-headline')\n          .styled(typography.sans.large);\n      };\n\n      const createRichText = () => {\n        if (!richText) return null;\n        return new ElementBuilder(richText)\n          .withClassName('carousel-image-standard-slide-rich-text')\n          .withStyles({\n            element: {\n              marginTop: token.spacing.min,\n              color: token.color.gray.dark,\n              ...element.text.rich.advanced,\n              ...(isThemeDark && {\n                color: token.color.white,\n                ...element.text.rich.advancedDark,\n              }),\n            },\n          });\n      };\n\n      const textChildren = [createHeadline(), createRichText()].filter((child) => child !== null);\n\n      return new ElementBuilder()\n        .withClassName('carousel-image-standard-slide-text')\n        .withStyles({\n          element: {\n            padding: token.spacing.md,\n            paddingBottom: 0,\n            backgroundColor: token.color.gray.lightest,\n            ...(isThemeDark && {\n              backgroundColor: token.color.black,\n              '& *': { color: token.color.white },\n            }),\n            [`@media (${token.media.queries.tablet.min})`]: {\n              paddingBottom: token.spacing.md,\n            },\n            '@container (min-width: 500px)': {\n              padding: token.spacing.lg,\n            },\n          },\n        })\n        .withChildren(...textChildren)\n        .build();\n    };\n\n    const CreateImageContainer = ({\n      image,\n      isFullScreenOption,\n      setFullScreen,\n      index,\n    }: TypeImageContainerProps) => {\n      const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n\n      const standardSlideWrapperElement = new ElementBuilder()\n        .withClassName('carousel-image-standard-slide-wrapper')\n        .withStyles({\n          element: {\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            '& > *': { height: '100%' },\n            '& img': { objectFit: 'contain', width: '100%', height: '100%' },\n          },\n        })\n        .withChild(imageBlock)\n        .build();\n\n      if (isFullScreenOption) {\n        const buttonFullscreen = buttons.fullscreen.create({\n          callback: setFullScreen,\n          index,\n        });\n        imageBlock.element.appendChild(buttonFullscreen.element);\n        buttonStyles += buttonFullscreen.styles;\n      }\n\n      return new ElementBuilder()\n        .withClassName('carousel-image-standard-slide-image')\n        .withStyles({\n          element: {\n            position: 'relative',\n            backgroundColor: token.color.black,\n            ...(isThemeDark && { backgroundColor: token.color.gray.darker }),\n          },\n        })\n        .withChild(standardSlideWrapperElement)\n        .build();\n    };\n\n    const CreateSlide = (slideProps: TypeCarouselSlideProps) => {\n      const { images, setFullScreen } = slideProps;\n      const clonedImages = images.map((image) =>\n        image.cloneNode(true),\n      ) as HTMLImageElement[];\n\n      const createStandardSlide = ({\n        image,\n        index,\n      }: {\n        image: HTMLImageElement;\n        index: number;\n      }) => {\n        const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n        const imageContainerModel = CreateImageContainer({\n          ...slideProps,\n          image,\n          setFullScreen,\n          index,\n        });\n\n        const textContainerModel = CreateTextContainer({\n          ...slideProps,\n          reference,\n        });\n\n        const slideChildren = [imageContainerModel, textContainerModel].filter((child) => child !== null);\n\n        return new ElementBuilder()\n          .withClassName('carousel-image-standard-slide')\n          .withChildren(...slideChildren)\n          .build();\n      };\n\n      return clonedImages.map((image, index) => {\n        return createStandardSlide({ image, index });\n      });\n    };\n\n    const slideModels = CreateSlide({\n      ...props,\n      setFullScreen: overlayCarousel.events.setFullScreen,\n    });\n    const slides = slideModels.map((model) => model.element);\n    const slideStyles = slideModels.reduce(\n      (accumulator, model) => accumulator + (model.styles ?? ''),\n      '',\n    );\n\n    const carousel = carouselElements.image({\n      slides,\n      isThemeDark,\n      callback: (activeIndex) => {\n        indicatorWrapperModel.position(activeIndex);\n      },\n      maxHeight: 500,\n      includeButtonWrapper: false,\n    });\n\n    const indicatorWrapperModel = carouselElements.indicatorWrapper({\n      count: images.length,\n      callback: carousel.events.EventMoveTo,\n      isThemeDark,\n      isBackground: true,\n    });\n\n    const indicatorContainerModel = new ElementBuilder()\n      .withClassName('carousel-image-standard-indicator')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.gray.lightest,\n          ...(isThemeDark && { backgroundColor: token.color.black }),\n          [`@media (${token.media.queries.desktop.min})`]: {\n            paddingBottom: token.spacing.lg,\n          },\n        },\n      })\n      .withChild(indicatorWrapperModel)\n      .build();\n\n    const buttonWrapperModel = new ElementBuilder()\n      .withClassName('carousel-image-standard-buttons')\n      .withStyles({\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          gap: token.spacing.min,\n          padding: `${token.spacing.md} 0`,\n          backgroundColor: token.color.gray.lightest,\n          ...(isThemeDark && { backgroundColor: token.color.black }),\n        },\n      })\n      .withChildren(carousel.buttons.prev, carousel.buttons.next)\n      .build();\n\n    const containerModel = new ElementBuilder()\n      .withClassName('carousel-image-standard-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          backgroundColor: token.color.gray.lightest,\n          ...(isThemeDark && { backgroundColor: token.color.black }),\n        },\n      })\n      .withChildren(carousel, indicatorContainerModel, buttonWrapperModel)\n      .build();\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('carousel-image-standard-declaration')\n      .withStyles({\n        element: { containerType: 'inline-size' },\n      })\n      .withChild(containerModel)\n      .withEvents({ SetEventReize: carousel.events.EventResize })\n      .build();\n\n    declarationModel.styles = combineStyles(\n      slideStyles,\n      overlayCarousel.styles,\n      buttonStyles,\n      declarationModel.styles,\n    );\n\n    images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n    if (isFullScreenOption) {\n      const wrapperModel = new ElementBuilder()\n        .withChild(declarationModel)\n        .withModifier((element) => {\n          element.insertAdjacentElement('afterbegin', overlayCarousel.element);\n        })\n        .withEvents({ SetEventReize: carousel.events.EventResize })\n        .build();\n\n      return wrapperModel;\n    }\n\n    return declarationModel;\n  })();\n"],"names":["carouselElements.overlay","isFullScreenOption","index","buttons.fullscreen","images","carouselElements.image","carouselElements.indicatorWrapper","element"],"mappings":"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"}

package/dist/composite/carousel/thumbnail/index.d.ts

@@ -2,13 +2,6 @@ type TypeCarouselThumbnailProps = {
     blocks: HTMLElement[];
     isThemeDark?: boolean;
 };
-export declare const createCompositeCarouselThumbnail: (props: TypeCarouselThumbnailProps) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        reize: () => void;
-        load: () => void;
-    };
-};
+export declare const createCompositeCarouselThumbnail: (props: TypeCarouselThumbnailProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/carousel/thumbnail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"names":[],"mappings":"AAGA,KAAK,0BAA0B,GAAG;IAChC,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAkGF,eAAO,MAAM,gCAAgC,GAAI,OAAO,0BAA0B;;;;;;;CA0C5E,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"names":[],"mappings":"AAIA,KAAK,0BAA0B,GAAG;IAChC,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAC3C,OAAO,0BAA0B,kFA0E7B,CAAC"}