@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/carousel/wide/frames.js

@@ -1,54 +1,34 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../../atomic/animations/actions/indicator.js");
-require("../../../atomic/animations/brand/chevron-scroll.js");
-require("../../../atomic/animations/brand/card-stack.js");
-const background = require("../../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-utilities-library/performance");
-require("@universityofmaryland/web-utilities-library/accessibility");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("../../../atomic/layout/block/stacked.js");
-require("../../../atomic/layout/overlay/modal.js");
-require("../../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../../atomic/text-lockup/date.js");
-require("../../../atomic/text-lockup/small.js");
-const _elementModel = require("./_elementModel.js");
-const controls = require("./controls.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+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 "../../../atomic/animations/actions/indicator.js";
+import "../../../atomic/animations/brand/chevron-scroll.js";
+import "../../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+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 "../../../atomic/text-lockup/small.js";
+import { createElementWithRefs } from "./_elementModel.js";
+import { createControlButton } from "./controls.js";
 const ASPECT_RATIO = "16 / 9";
 const createSlideContent = ({
   slide,
@@ -56,7 +36,7 @@ const createSlideContent = ({
 }) => {
   const children = [];
   let contentContainer = null;
-  const closeButton = new webBuilderLibrary.ElementBuilder("button").withClassName("umd-carousel-wide__slide-content-close").withAttribute("type", "button").withAttribute("aria-label", "Close content").withHTML("×").withStyles({
+  const closeButton = new ElementBuilder("button").withClassName("umd-carousel-wide__slide-content-close").withAttribute("type", "button").withAttribute("aria-label", "Close content").withHTML("×").withStyles({
     element: {
       position: "absolute",
       top: 0,
@@ -66,20 +46,20 @@ const createSlideContent = ({
       cursor: "pointer",
       fontSize: "20px",
       fontWeight: "bold",
-      padding: token__namespace.spacing.min,
+      padding: token.spacing.min,
       lineHeight: 1,
-      color: token__namespace.color.gray.dark,
+      color: token.color.gray.dark,
       transition: "color 0.2s ease",
-      [`@media (${token__namespace.media.queries.large.max})`]: {
+      [`@media (${token.media.queries.large.max})`]: {
         display: "none"
       },
       "&:hover, &:focus": {
-        outline: `2px solid ${token__namespace.color.blue}`
+        outline: `2px solid ${token.color.blue}`
       },
       ...isThemeDark && {
-        color: token__namespace.color.gray.light,
+        color: token.color.gray.light,
         "&:hover": {
-          color: token__namespace.color.white
+          color: token.color.white
         }
       }
     }
@@ -91,57 +71,57 @@ const createSlideContent = ({
   children.push(closeButton);
   if (slide.headline) {
     children.push(
-      new webBuilderLibrary.ElementBuilder(slide.headline).styled(
-        Styles__namespace.typography.sans.compose("large", {
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(slide.headline).styled(
+        Styles.typography.sans.compose("large", {
+          theme: theme.fontColor(isThemeDark)
         })
       ).withStyles({
         element: {
           ...!isThemeDark && {
-            color: `${token__namespace.color.black}`
+            color: `${token.color.black}`
           }
         },
         siblingAfter: {
-          marginTop: token__namespace.spacing.sm
+          marginTop: token.spacing.sm
         }
       }).build()
     );
   }
   if (slide.text) {
     children.push(
-      new webBuilderLibrary.ElementBuilder(slide.text).styled(
-        Styles__namespace.element.text.rich.composeSimple({
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(slide.text).styled(
+        Styles.element.text.rich.composeSimple({
+          theme: theme.fontColor(isThemeDark)
         })
       ).build()
     );
   }
   if (children.length === 1) return null;
-  contentContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-carousel-wide__slide-content").withStyles({
+  contentContainer = new ElementBuilder().withClassName("umd-carousel-wide__slide-content").withStyles({
     element: {
-      backgroundColor: token__namespace.color.white,
-      border: `1px solid ${token__namespace.color.gray.light}`,
+      backgroundColor: token.color.white,
+      border: `1px solid ${token.color.gray.light}`,
       display: "block",
-      padding: token__namespace.spacing.md,
+      padding: token.spacing.md,
       width: "100%",
       position: "relative",
       opacity: 0,
       transform: "translateY(20px)",
       transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
       ...isThemeDark && {
-        backgroundColor: token__namespace.color.black,
-        border: `1px solid ${token__namespace.color.gray.dark}`
+        backgroundColor: token.color.black,
+        border: `1px solid ${token.color.gray.dark}`
       },
-      [`@media (${token__namespace.media.queries.large.max})`]: {
+      [`@media (${token.media.queries.large.max})`]: {
         borderTop: "none"
       },
-      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+      [`@media (${token.media.queries.tablet.min})`]: {
         border: "none",
         boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
         maxWidth: "50%",
         position: "absolute",
-        bottom: token__namespace.spacing.sm,
-        left: token__namespace.spacing.sm,
+        bottom: token.spacing.sm,
+        left: token.spacing.sm,
         ...isThemeDark && {
           border: "none",
           boxShadow: "none"
@@ -155,20 +135,20 @@ const createMainFrameSlide = (slide, index$1, isThemeDark) => {
   const children = [];
   const slideContentWrapper = createSlideContent({ slide, isThemeDark });
   children.push(
-    background({
+    createImageBackground({
       element: slide.image,
       isScaled: true
     })
   );
   if (slideContentWrapper) children.push(slideContentWrapper);
-  return new webBuilderLibrary.ElementBuilder("figure").withClassName("umd-carousel-wide__slide").withAttribute("data-index", `${index$1}`).withStyles({
+  return new ElementBuilder("figure").withClassName("umd-carousel-wide__slide").withAttribute("data-index", `${index$1}`).withStyles({
     element: {
       display: "none",
       opacity: 0,
       transition: "opacity 0.3s ease-in-out, transform 0.5s ease-in-out",
       transform: "translateX(0)",
       aspectRatio: ASPECT_RATIO,
-      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+      [`@media (${token.media.queries.tablet.min})`]: {
         position: "absolute",
         width: "100%",
         height: "100%",
@@ -185,7 +165,7 @@ const createMainFrameSlide = (slide, index$1, isThemeDark) => {
         zIndex: 1,
         display: "block",
         opacity: 1,
-        [`@media (${token__namespace.media.queries.large.max})`]: {
+        [`@media (${token.media.queries.large.max})`]: {
           position: "absolute",
           width: "100%",
           top: 0,
@@ -207,14 +187,14 @@ const createMainFrameSlide = (slide, index$1, isThemeDark) => {
 };
 const createPreviewContainer = (position) => {
   const isPositionLeft = position === "left";
-  return new webBuilderLibrary.ElementBuilder().withClassName(
+  return new ElementBuilder().withClassName(
     isPositionLeft ? "umd-carousel-wide__preview--left" : "umd-carousel-wide__preview--right"
   ).withAttribute("aria-hidden", "true").withAttribute("role", "presentation").withStyles({
     element: {
       display: "none",
       overflow: "hidden",
       position: "relative",
-      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+      [`@media (${token.media.queries.tablet.min})`]: {
         display: "flex",
         alignItems: "flex-end",
         height: "100%"
@@ -238,7 +218,7 @@ const createPreviewContainer = (position) => {
           left: "0",
           right: "0",
           bottom: "0",
-          background: token__namespace.color.gray.darker,
+          background: token.color.gray.darker,
           opacity: 0.5,
           zIndex: 1
         }
@@ -255,7 +235,7 @@ const createMainContainer = (slides, isThemeDark) => {
     slideElements[0].element.setAttribute("data-content-visible", "true");
   }
   return {
-    component: new webBuilderLibrary.ElementBuilder().withClassName("umd-carousel-wide__main-container").withStyles({
+    component: new ElementBuilder().withClassName("umd-carousel-wide__main-container").withStyles({
       element: {
         position: "relative",
         overflow: "hidden"
@@ -267,10 +247,10 @@ const createMainContainer = (slides, isThemeDark) => {
 const createFramesContainer = (slides, isThemeDark) => {
   const previewLeft = createPreviewContainer("left");
   const previewRight = createPreviewContainer("right");
-  const previousButton = controls.createControlButton("prev", isThemeDark);
-  const nextButton = controls.createControlButton("next", isThemeDark);
+  const previousButton = createControlButton("prev", isThemeDark);
+  const nextButton = createControlButton("next", isThemeDark);
   const mainContainer = createMainContainer(slides, isThemeDark);
-  return _elementModel.createElementWithRefs({
+  return createElementWithRefs({
     className: "umd-carousel-wide__frames-container",
     children: [
       previewLeft,
@@ -282,21 +262,21 @@ const createFramesContainer = (slides, isThemeDark) => {
     elementStyles: {
       element: {
         position: "relative",
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          padding: `0 ${token__namespace.spacing.md}`
+        [`@media (${token.media.queries.large.max})`]: {
+          padding: `0 ${token.spacing.md}`
         },
-        [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        [`@media (${token.media.queries.tablet.min})`]: {
           display: "grid",
           gridTemplateColumns: "10vw 1fr 10vw",
-          gridGap: token__namespace.spacing.md,
+          gridGap: token.spacing.md,
           height: "56vw",
           maxHeight: "60vh"
         },
-        [`@media (${token__namespace.media.queries.desktop.min})`]: {
+        [`@media (${token.media.queries.desktop.min})`]: {
           gridTemplateColumns: "15vw 1fr 15vw",
-          gridGap: token__namespace.spacing.lg
+          gridGap: token.spacing.lg
         },
-        [`@media (${token__namespace.media.queries.highDef.min})`]: {
+        [`@media (${token.media.queries.highDef.min})`]: {
           gridTemplateColumns: "20vw 1fr 20vw"
         }
       }
@@ -315,5 +295,7 @@ const createFramesContainer = (slides, isThemeDark) => {
     }
   });
 };
-exports.createFramesContainer = createFramesContainer;
+export {
+  createFramesContainer
+};
 //# sourceMappingURL=frames.js.map

package/dist/composite/carousel/wide/frames.js.map

@@ -1 +1 @@
-{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type CarouselWideProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: UMDElement[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: UMDElement | null = null;\n\n  const closeButton = new ElementBuilder('button')\n    .withClassName('umd-carousel-wide__slide-content-close')\n    .withAttribute('type', 'button')\n    .withAttribute('aria-label', 'Close content')\n    .withHTML('×')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: token.spacing.min,\n        lineHeight: 1,\n        color: token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: token.color.gray.light,\n          '&:hover': {\n            color: token.color.white,\n          },\n        }),\n      },\n    })\n    .withModifier((el) => {\n      el.addEventListener('click', () => {\n        if (contentContainer) contentContainer.element.style.display = 'none';\n      });\n    })\n    .build();\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      new ElementBuilder(slide.headline)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            ...(!isThemeDark && {\n              color: `${token.color.black}`,\n            }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      new ElementBuilder(slide.text)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .build(),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = new ElementBuilder()\n    .withClassName('umd-carousel-wide__slide-content')\n    .withStyles({\n      element: {\n        backgroundColor: token.color.white,\n        border: `1px solid ${token.color.gray.light}`,\n        display: 'block',\n        padding: token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          border: `1px solid ${token.color.gray.dark}`,\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: token.spacing.sm,\n          left: token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: UMDElement[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return new ElementBuilder('figure')\n    .withClassName('umd-carousel-wide__slide')\n    .withAttribute('data-index', `${index}`)\n    .withStyles({\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return new ElementBuilder()\n    .withClassName(\n      isPositionLeft\n        ? 'umd-carousel-wide__preview--left'\n        : 'umd-carousel-wide__preview--right',\n    )\n    .withAttribute('aria-hidden', 'true')\n    .withAttribute('role', 'presentation')\n    .withStyles({\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: new ElementBuilder()\n      .withClassName('umd-carousel-wide__main-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withChildren(...slideElements)\n      .build(),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          padding: `0 ${token.spacing.md}`,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: token.spacing.lg,\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementBuilder","token","Styles","theme","index","assets.image.background","createControlButton","createElementWithRefs"],"mappings":"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"}
+{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type CarouselWideProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: UMDElement[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: UMDElement | null = null;\n\n  const closeButton = new ElementBuilder('button')\n    .withClassName('umd-carousel-wide__slide-content-close')\n    .withAttribute('type', 'button')\n    .withAttribute('aria-label', 'Close content')\n    .withHTML('×')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: token.spacing.min,\n        lineHeight: 1,\n        color: token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: token.color.gray.light,\n          '&:hover': {\n            color: token.color.white,\n          },\n        }),\n      },\n    })\n    .withModifier((el) => {\n      el.addEventListener('click', () => {\n        if (contentContainer) contentContainer.element.style.display = 'none';\n      });\n    })\n    .build();\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      new ElementBuilder(slide.headline)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            ...(!isThemeDark && {\n              color: `${token.color.black}`,\n            }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      new ElementBuilder(slide.text)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .build(),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = new ElementBuilder()\n    .withClassName('umd-carousel-wide__slide-content')\n    .withStyles({\n      element: {\n        backgroundColor: token.color.white,\n        border: `1px solid ${token.color.gray.light}`,\n        display: 'block',\n        padding: token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          border: `1px solid ${token.color.gray.dark}`,\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: token.spacing.sm,\n          left: token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: UMDElement[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return new ElementBuilder('figure')\n    .withClassName('umd-carousel-wide__slide')\n    .withAttribute('data-index', `${index}`)\n    .withStyles({\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return new ElementBuilder()\n    .withClassName(\n      isPositionLeft\n        ? 'umd-carousel-wide__preview--left'\n        : 'umd-carousel-wide__preview--right',\n    )\n    .withAttribute('aria-hidden', 'true')\n    .withAttribute('role', 'presentation')\n    .withStyles({\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: new ElementBuilder()\n      .withClassName('umd-carousel-wide__main-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withChildren(...slideElements)\n      .build(),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          padding: `0 ${token.spacing.md}`,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: token.spacing.lg,\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["index","assets.image.background"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
 import { CarouselWideProps } from '../_types';
-declare const _default: (props: CarouselWideProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeCarouselWide: (props: CarouselWideProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;yBAuQnC,OAAO,iBAAiB;AAAxC,wBAuDE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAuQnD,eAAO,MAAM,2BAA2B,GAAI,OAAO,iBAAiB,kFAuDnE,CAAC"}

package/dist/composite/carousel/wide/index.js

@@ -1,51 +1,33 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../../atomic/animations/actions/indicator.js");
-require("../../../atomic/animations/brand/chevron-scroll.js");
-require("../../../atomic/animations/brand/card-stack.js");
-const background = require("../../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-styles-library");
-require("@universityofmaryland/web-utilities-library/performance");
-require("@universityofmaryland/web-utilities-library/accessibility");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("@universityofmaryland/web-utilities-library/theme");
-require("../../../atomic/layout/block/stacked.js");
-require("../../../atomic/layout/overlay/modal.js");
-require("../../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../../atomic/text-lockup/date.js");
-require("../../../atomic/text-lockup/small.js");
-const container = require("./container.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+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 "../../../atomic/animations/actions/indicator.js";
+import "../../../atomic/animations/brand/chevron-scroll.js";
+import "../../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+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 "../../../atomic/text-lockup/small.js";
+import { createContainer } from "./container.js";
 const ANIMATION_TIME = 500;
 const PREVIEW_ANIMATION_TIME = 440;
 const getAdjacentIndices = (currentIndex, totalSlides) => {
@@ -79,21 +61,21 @@ const cleanupSlideTransition = (slide, isNew) => {
 };
 const createPreviewElement = (slide) => {
   const imageCopy = slide.image.cloneNode(true);
-  const preview = background({
+  const preview = createImageBackground({
     element: imageCopy,
     isScaled: true
   });
   preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;
   return preview.element;
 };
-const clearPreviewContainer = (container2) => {
-  while (container2.firstChild) {
-    container2.removeChild(container2.firstChild);
+const clearPreviewContainer = (container) => {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
   }
 };
-const appendPreviewWithAnimation = (container2, preview, animationDirection) => {
+const appendPreviewWithAnimation = (container, preview, animationDirection) => {
   preview.style.transform = animationDirection === "advance" ? "translateX(100%)" : "translateX(-100%)";
-  container2.appendChild(preview);
+  container.appendChild(preview);
   requestAnimationFrame(() => {
     preview.style.transform = "translateX(0)";
   });
@@ -188,21 +170,21 @@ const setupSliderControls = (refs, state) => {
     animateSlides(refs, state, newIndex, "reverse");
   });
 };
-const index = (props) => {
+const createCompositeCarouselWide = (props) => {
   const { title } = props;
   const state = {
     currentIndex: 0,
     isAnimating: false,
     slides: props.slides
   };
-  const container$1 = container.createContainer(props, (index2) => {
-    if (state.isAnimating || state.currentIndex === index2) return;
-    const direction = state.currentIndex > index2 ? "reverse" : "advance";
-    animateSlides(refs, state, index2, direction);
+  const container = createContainer(props, (index) => {
+    if (state.isAnimating || state.currentIndex === index) return;
+    const direction = state.currentIndex > index ? "reverse" : "advance";
+    animateSlides(refs, state, index, direction);
   });
-  const builder = new webBuilderLibrary.ElementBuilder();
+  const builder = new ElementBuilder();
   builder.withClassName("umd-carousel-wide");
-  builder.withChild(container$1);
+  builder.withChild(container);
   if (title) {
     builder.withAttribute("title", title);
   } else {
@@ -213,7 +195,7 @@ const index = (props) => {
       container: "umd-carousel-wide / inline-size",
       display: "block",
       position: "relative",
-      [`@media (${token__namespace.media.queries.large.min})`]: {
+      [`@media (${token.media.queries.large.min})`]: {
         paddingBottom: 0
       }
     }
@@ -221,7 +203,7 @@ const index = (props) => {
   const composite = builder.build();
   const refs = {
     container: composite.element,
-    ...container$1.refs
+    ...container.refs
   };
   requestAnimationFrame(() => {
     setupSliderControls(refs, state);
@@ -229,5 +211,7 @@ const index = (props) => {
   });
   return composite;
 };
-module.exports = index;
+export {
+  createCompositeCarouselWide
+};
 //# sourceMappingURL=index.js.map