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

package/dist/composite/carousel/cards/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${jssToCSS({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks"],"mappings":"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"}

package/dist/composite/carousel/default/index.mjs

@@ -1,151 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import blocks from "../elements/blocks.mjs";
-import "../elements/full-screen.mjs";
-import "../elements/overlay.mjs";
-import "../elements/image.mjs";
-const ATTRIBUTE_THEME = "data-theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const ELEMENT_NAME = "umd-element-carousel";
-const ELEMENT_DECLARATION = "carousel-default-declaration";
-const CAROUSEL_CONTAINER = "element-carousel-default-container";
-const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${blocks.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${blocks.Elements.button}`;
-const OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${blocks.Elements.previousButton}`;
-const OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${blocks.Elements.nextButton}`;
-const OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${blocks.Elements.button}`;
-const OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${blocks.Elements.containerSingleBlock}`;
-const OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${blocks.Elements.button}`;
-const OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${blocks.Elements.previousButton}`;
-const OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${blocks.Elements.nextButton}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_BUTTON} {
-    background-color: ${token.color.red} !important;
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
-    fill: ${token.color.white} !important;
-  }
-`;
-const OverwriteCarouselStyles = `
-  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
-    padding-bottom: 0;
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: ${token.color.white};
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {
-    fill: ${token.color.black};
-  }
-
-  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {
-    left: 0;
-  }
-
-  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {
-    right: 0;
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN} {
-    padding-bottom: 70px;
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {
-    bottom: -19px;
-    top: inherit;
-    background-color: ${token.color.gray.lighter};
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {
-    left: calc(50% - 44px);
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN_NEXT} {
-    left: calc(50% + 4px);
-    right: inherit;
-  }
-`;
-const ContainerStyles = `
-  .${CAROUSEL_CONTAINER} {
-    position: relative;
-    overflow: hidden;
-  }
-`;
-const STYLES_CAROUSEL_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_DECLARATION} * {
-    color: ${token.color.white};
-  }
-  
-  ${blocks.Styles}
-  ${ContainerStyles}
-  ${OverwriteCarouselStyles}
-  ${OverwriteThemeDark}
-`;
-const index = (props) => (() => {
-  const {
-    isThemeDark,
-    gridGap,
-    hasLeftButton = true,
-    hasRightButton = true,
-    mobileHint,
-    hint,
-    tabletSize,
-    desktopSize,
-    tabletCount,
-    desktopCount,
-    maxCount
-  } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const overwriteDisplayLogic = {
-    tabletBreakpoint: tabletSize || 768,
-    desktopBreakpoint: desktopSize || 1024,
-    tabletCount: tabletCount || 2,
-    desktopCount: desktopCount || 3,
-    maxCount: maxCount || 4,
-    hasLeftButton,
-    hasRightButton,
-    showMobileHint: true,
-    showHint: true
-  };
-  if (gridGap) {
-    overwriteDisplayLogic.blockGap = parseInt(gridGap);
-    overwriteDisplayLogic.tabletBreakpoint = 1e3 + parseInt(gridGap);
-    overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);
-  }
-  if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;
-  if (!hint) overwriteDisplayLogic.showHint = false;
-  const carouselContainer = blocks.CreateElement({
-    ...props,
-    blocks: props.blocks,
-    overwriteDisplayLogic
-  });
-  wrapper.appendChild(carouselContainer.element);
-  container.classList.add(CAROUSEL_CONTAINER);
-  container.appendChild(wrapper);
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  declaration.classList.add(ELEMENT_DECLARATION);
-  declaration.appendChild(container);
-  return {
-    element: declaration,
-    styles: STYLES_CAROUSEL_ELEMENT,
-    events: {
-      resize: carouselContainer.events.resize,
-      load: carouselContainer.events.load
-    }
-  };
-})();
-export {
-  index as default
-};
-//# sourceMappingURL=index.mjs.map

package/dist/composite/carousel/default/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/default/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselRequirements = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n  gridGap?: string | null;\n  hasLeftButton?: boolean;\n  hasRightButton?: boolean;\n  mobileHint?: boolean;\n  hint?: boolean;\n  mobileSize?: number | null;\n  tabletSize?: number | null;\n  desktopSize?: number | null;\n  mobileCount?: number | null;\n  tabletCount?: number | null;\n  desktopCount?: number | null;\n  maxCount?: number | null;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-carousel';\nconst ELEMENT_DECLARATION = 'carousel-default-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-default-container';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.nextButton}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${carouselElements.blocks.Elements.containerSingleBlock}`;\nconst OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.nextButton}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.red} !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white} !important;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n    padding-bottom: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {\n    right: 0;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN} {\n    padding-bottom: 70px;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {\n    bottom: -19px;\n    top: inherit;\n    background-color: ${token.color.gray.lighter};\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {\n    left: calc(50% - 44px);\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_NEXT} {\n    left: calc(50% + 4px);\n    right: inherit;\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${CAROUSEL_CONTAINER} {\n    position: relative;\n    overflow: hidden;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselRequirements) =>\n  (() => {\n    const {\n      isThemeDark,\n      gridGap,\n      hasLeftButton = true,\n      hasRightButton = true,\n      mobileHint,\n      hint,\n      tabletSize,\n      desktopSize,\n      tabletCount,\n      desktopCount,\n      maxCount,\n    } = props;\n\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const overwriteDisplayLogic: Record<string, number | boolean> = {\n      tabletBreakpoint: tabletSize || 768,\n      desktopBreakpoint: desktopSize || 1024,\n      tabletCount: tabletCount || 2,\n      desktopCount: desktopCount || 3,\n      maxCount: maxCount || 4,\n      hasLeftButton,\n      hasRightButton,\n      showMobileHint: true,\n      showHint: true,\n    };\n\n    if (gridGap) {\n      overwriteDisplayLogic.blockGap = parseInt(gridGap);\n      overwriteDisplayLogic.tabletBreakpoint = 1000 + parseInt(gridGap);\n      overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);\n    }\n\n    if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;\n    if (!hint) overwriteDisplayLogic.showHint = false;\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.blocks,\n      overwriteDisplayLogic,\n    });\n\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.appendChild(wrapper);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks"],"mappings":"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"}

package/dist/composite/carousel/elements/blocks.mjs

@@ -1,466 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
-import { parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
-import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
-const fullScreenClassName = elementStyles.action.button.fullScreen.className;
-const ATTRIBUTE_SINGLE_BLOCK = "single";
-const ANIMATION_DURATION = 750;
-const HINT_MULTIPLER_MOBILE_SIZING = 0.2;
-const HINT_MULTIPLER_SIZING = 0.6;
-const IS_SINGLE_BLOCK = `[${ATTRIBUTE_SINGLE_BLOCK}]`;
-const ELEMENT_NAME = "umd-element-animation-carousel-block";
-const ELEMENT_ANIMATION_CAROUSEL_DECLARATION = "animation-carousel-block-declaration";
-const ELEMENT_ANIMATION_CAROUSEL_CONTAINER = "animation-carousel-block-container";
-const ELEMENT_ANIMATION_CAROUSEL_WRAPPER = "animation-carousel-block-wrapper";
-const ELEMENT_ANIMATION_CAROUSEL_BUTTON = `animation-carousel-block-button`;
-const ELEMENT_ANIMATION_CAROUSEL_NEXT = `animation-carousel-block-button-next`;
-const ELEMENT_ANIMATION_CAROUSEL_PREVIOUS = `animation-carousel-block-button-previous`;
-const OVERWRITE_SINGLE_BLOCK_CONTAINER = `.${ELEMENT_ANIMATION_CAROUSEL_CONTAINER}${IS_SINGLE_BLOCK}`;
-const ButtonStyles = `
-  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} {
-    background-color: ${token.color.red};
-    padding: 10px ${token.spacing.xs};
-    position: absolute;
-    z-index: 9999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    display: none;
-  }
-
-  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON}:disabled {
-    opacity: 0.5;
-  }
-
-  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} svg {
-    width: 20px;
-    height: 20px;
-    fill: ${token.color.white};
-  }
-
-  .${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS} svg {
-    transform: rotate(180deg);
-  }
-`;
-const ContainerStyles = `
-  .${ELEMENT_ANIMATION_CAROUSEL_CONTAINER} {
-    position: relative;
-  }
-
-  .${ELEMENT_ANIMATION_CAROUSEL_WRAPPER} {
-    overflow: hidden;
-    padding-right: 0;
-    width: 100%;
-  }
-`;
-const STYLES_CAROUSEL_CARDS_ELEMENT = `
-  .${ELEMENT_ANIMATION_CAROUSEL_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-    width: 100%;
-  }
-
-  ${ContainerStyles}
-  ${ButtonStyles}
-`;
-const EventScrollCarousel = (props) => {
-  const {
-    GetElements,
-    GetViewOptions,
-    GetSizes,
-    SetLayout,
-    isDirectionRight = true,
-    displayLogic
-  } = props;
-  const carouselSlider = GetElements.slide();
-  const slotContent = Array.from(
-    carouselSlider.querySelectorAll(":scope > *")
-  );
-  const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
-  const isShowHint = GetViewOptions.shouldShowHint();
-  const count = GetViewOptions.showCount();
-  void slotContent[0]?.offsetHeight;
-  const elementSize = slotContent[0]?.offsetWidth || 0;
-  const carouselSize = GetSizes.carouselWidthBasedOnBlock({ count });
-  const { fullScreenCallback } = displayLogic;
-  if (!elementSize) return;
-  const elementSizeWithSpace = elementSize;
-  const temporaryCarouselSize = carouselSize + elementSizeWithSpace;
-  const cloneReferenceEvents = ({
-    orginal,
-    clone
-  }) => {
-    const orginalFullScreen = orginal.querySelector(`.${fullScreenClassName}`);
-    const cloneFullScreen = clone.querySelector(`.${fullScreenClassName}`);
-    if (orginalFullScreen && cloneFullScreen) {
-      const indexAttr = orginalFullScreen.getAttribute("data-index");
-      const index = indexAttr ? parseInt(indexAttr) : 0;
-      cloneFullScreen.addEventListener(
-        "click",
-        () => fullScreenCallback(index)
-      );
-    }
-  };
-  const animateRight = () => {
-    const firstElement = slotContent[0];
-    const clonedElement = firstElement.cloneNode(true);
-    const upcomingElement = slotContent[count];
-    const hintElement = slotContent[count + 1];
-    upcomingElement.style.display = "block";
-    cloneReferenceEvents({ orginal: firstElement, clone: clonedElement });
-    if (hintElement && (isShowMobileHint || isShowHint)) {
-      hintElement.style.display = "block";
-    }
-    carouselSlider.appendChild(clonedElement);
-    clonedElement.style.display = "none";
-    carouselSlider.style.width = `${temporaryCarouselSize}px`;
-    void carouselSlider.offsetHeight;
-    requestAnimationFrame(() => {
-      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
-      carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;
-      setTimeout(() => {
-        carouselSlider.removeChild(firstElement);
-        SetLayout.carouselWidth({ count });
-      }, ANIMATION_DURATION);
-    });
-  };
-  const animateLeft = () => {
-    const lastElement = slotContent[slotContent.length - 1];
-    const removedElement = slotContent[count - 1];
-    const hintElementSibiling = slotContent[count];
-    const clonedElement = lastElement.cloneNode(true);
-    cloneReferenceEvents({ orginal: lastElement, clone: clonedElement });
-    carouselSlider.style.width = `${temporaryCarouselSize}px`;
-    carouselSlider.prepend(clonedElement);
-    clonedElement.style.display = "block";
-    carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;
-    void carouselSlider.offsetHeight;
-    requestAnimationFrame(() => {
-      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
-      carouselSlider.style.transform = `translateX(0)`;
-      setTimeout(() => {
-        carouselSlider.removeChild(lastElement);
-        if (!isShowMobileHint && !isShowHint) {
-          removedElement.style.display = "none";
-        }
-        if (isShowMobileHint || isShowHint) {
-          hintElementSibiling.style.display = "none";
-        }
-        SetLayout.carouselWidth({ count });
-      }, ANIMATION_DURATION);
-    });
-  };
-  isDirectionRight ? animateRight() : animateLeft();
-};
-const EventSwipe = (props) => {
-  const { GetElements } = props;
-  const container = GetElements.container();
-  const swipes = (isrightswipe) => {
-    if (!isrightswipe) {
-      EventScrollCarousel(props);
-    } else {
-      EventScrollCarousel({ ...props, isDirectionRight: false });
-    }
-  };
-  setupSwipeDetection({ container, callback: swipes });
-};
-const ButtonVisibility = (props) => {
-  const { GetElements, GetViewOptions } = props;
-  const prevousButton = GetElements.container().querySelector(
-    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`
-  );
-  const nextButton = GetElements.container().querySelector(
-    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`
-  );
-  const buttons = [nextButton, prevousButton];
-  const shouldShowLeftButton = GetViewOptions.shouldShowLeftButton();
-  const shouldShowRightButton = GetViewOptions.shouldShowRightButton();
-  const showCount = GetViewOptions.showCount();
-  const cardsTotal = GetElements.blocks().length;
-  const shouldHideLeftButton = showCount > 1 && !shouldShowLeftButton;
-  const shouldHideRightButton = showCount > 1 && !shouldShowRightButton;
-  if (cardsTotal === showCount) {
-    buttons.forEach((button) => button.style.display = "none");
-    return;
-  }
-  if (shouldHideLeftButton) {
-    prevousButton.style.display = "none";
-  } else {
-    prevousButton.style.display = "block";
-  }
-  if (shouldHideRightButton) {
-    nextButton.style.display = "none";
-  } else {
-    nextButton.style.display = "block";
-  }
-};
-const ButtonDisplay = (props) => {
-  const { GetElements } = props;
-  const prevousButton = GetElements.container().querySelector(
-    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`
-  );
-  const nextButton = GetElements.container().querySelector(
-    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`
-  );
-  prevousButton.setAttribute("aria-label", "Previous");
-  nextButton.setAttribute("aria-label", "Next");
-  ButtonVisibility(props);
-};
-const CreateButton = ({
-  EventMoveForward,
-  EventMoveBackward,
-  isRight = true
-}) => {
-  const button = document.createElement("button");
-  button.setAttribute("type", "button");
-  button.setAttribute("aria-label", "Next");
-  button.classList.add(ELEMENT_ANIMATION_CAROUSEL_BUTTON);
-  button.innerHTML = arrow_right;
-  if (isRight) {
-    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_NEXT);
-  }
-  if (!isRight) {
-    button.setAttribute("aria-label", "Previous");
-    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_PREVIOUS);
-  }
-  button.addEventListener("click", () => {
-    if (isRight) EventMoveForward();
-    if (!isRight) EventMoveBackward();
-    button.disabled = true;
-    setTimeout(() => {
-      button.disabled = false;
-    }, ANIMATION_DURATION);
-  });
-  return button;
-};
-const CreateCarouselCardsElement = (props) => (() => {
-  const { slide, shadowRef, blocks: blocks2, overwriteDisplayLogic } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const displayLogic = {
-    mobileBreakpoint: 550,
-    tabletBreakpoint: 768,
-    desktopBreakpoint: 1e3,
-    mobileCount: 1,
-    tabletCount: 2,
-    desktopCount: 3,
-    maxCount: 4,
-    blockGap: parsePixelValue(token.spacing.lg),
-    hasRightButton: true,
-    hasLeftButton: true,
-    showMobileHint: true,
-    showHint: true,
-    fullScreenCallback: void 0
-  };
-  let blockWidth = 0;
-  let hasInteractionOccured = false;
-  if (overwriteDisplayLogic) {
-    Object.keys(overwriteDisplayLogic).forEach((key) => {
-      const refKey = key;
-      const refValue = overwriteDisplayLogic[refKey];
-      displayLogic[refKey] = refValue;
-    });
-  }
-  const GetElements = {
-    container: () => container,
-    slide: () => slide,
-    blocks: () => blocks2
-  };
-  const GetViewOptions = {
-    isMobileView: () => {
-      return GetSizes.containerWidth() <= displayLogic.mobileBreakpoint;
-    },
-    isTabletView: () => {
-      return GetSizes.containerWidth() > displayLogic.mobileBreakpoint && GetSizes.containerWidth() <= displayLogic.tabletBreakpoint;
-    },
-    isDesktopView: () => {
-      return GetSizes.containerWidth() > displayLogic.tabletBreakpoint && GetSizes.containerWidth() <= displayLogic.desktopBreakpoint;
-    },
-    isHighView: () => {
-      return GetSizes.containerWidth() > displayLogic.desktopBreakpoint;
-    },
-    showCount: () => {
-      const isMobile = GetViewOptions.isMobileView();
-      const isTablet = GetViewOptions.isTabletView();
-      const isDesktop = GetViewOptions.isDesktopView();
-      const isHighDef = GetViewOptions.isHighView();
-      let count = 1;
-      if (isMobile) count = displayLogic.mobileCount;
-      if (isTablet) count = displayLogic.tabletCount;
-      if (isDesktop) count = displayLogic.desktopCount;
-      if (isHighDef) count = displayLogic.maxCount;
-      return count;
-    },
-    shouldShowMobileHint: () => {
-      const isMobileView = GetViewOptions.isMobileView();
-      const isShowMobileHint = displayLogic.showMobileHint;
-      const isShowHint = displayLogic.showHint;
-      return isShowMobileHint && isMobileView || isShowHint && isMobileView;
-    },
-    shouldShowHint: () => {
-      return displayLogic.showHint && !GetViewOptions.isMobileView();
-    },
-    shouldShowLeftButton: () => {
-      return displayLogic.hasLeftButton || hasInteractionOccured;
-    },
-    shouldShowRightButton: () => {
-      return displayLogic.hasRightButton || hasInteractionOccured;
-    }
-  };
-  const GetSizes = {
-    mobileHintWidth: ({ count }) => {
-      const containerWidth = container.offsetWidth;
-      return containerWidth / count * HINT_MULTIPLER_MOBILE_SIZING;
-    },
-    hintWidth: ({ count }) => {
-      const containerWidth = container.offsetWidth;
-      return containerWidth / count * HINT_MULTIPLER_SIZING;
-    },
-    carouselWidthBasedOnBlock: ({ count }) => {
-      const elementSize = blockWidth;
-      const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
-      const isShowHint = GetViewOptions.shouldShowHint();
-      if (!elementSize) return window.innerWidth;
-      if (isShowMobileHint || isShowHint) {
-        return elementSize * (count + 1);
-      }
-      return elementSize * count;
-    },
-    containerWidth: () => {
-      return container.offsetWidth;
-    }
-  };
-  const SetLayout = {
-    blockWidth: () => blocks2.forEach((block) => block.style.width = `${blockWidth}px`),
-    carouselWidth: ({ count }) => {
-      const elementSize = GetSizes.carouselWidthBasedOnBlock({ count });
-      slide.style.width = `${elementSize}px`;
-      slide.style.transition = "none";
-      slide.style.transform = "translateX(0)";
-    },
-    blockDisplay: ({ count }) => {
-      const containerBlocks = Array.from(
-        slide.querySelectorAll(":scope > *")
-      );
-      const isHint = GetViewOptions.shouldShowHint();
-      const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
-      containerBlocks.forEach((block, index) => {
-        if (index >= count) {
-          block.style.display = "none";
-        } else {
-          block.style.display = "block";
-        }
-      });
-      if (isShowMobileHint) containerBlocks[1].style.display = "block";
-      if (isHint) containerBlocks[count].style.display = "block";
-    }
-  };
-  const Event = {
-    helpers: {
-      displayLogic,
-      GetElements,
-      GetViewOptions,
-      GetSizes,
-      SetLayout
-    },
-    resize: () => {
-      const count = GetViewOptions.showCount();
-      const cacluateBlockWidth = ({ count: count2 }) => {
-        const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
-        const isShowHint = GetViewOptions.shouldShowHint();
-        const containerWidth = container.offsetWidth;
-        if (isShowMobileHint || isShowHint) {
-          let hintElementSize = GetSizes.hintWidth({ count: count2 });
-          if (isShowMobileHint) {
-            hintElementSize = GetSizes.mobileHintWidth({ count: count2 });
-          }
-          blockWidth = (containerWidth - hintElementSize) / count2;
-        } else {
-          blockWidth = containerWidth / count2;
-        }
-      };
-      cacluateBlockWidth({ count });
-      SetLayout.blockWidth();
-      SetLayout.blockDisplay({ count });
-      SetLayout.carouselWidth({ count });
-      ButtonDisplay({ ...Event.helpers });
-      if (count === 1) {
-        container.setAttribute(ATTRIBUTE_SINGLE_BLOCK, "");
-      } else {
-        container.removeAttribute(ATTRIBUTE_SINGLE_BLOCK);
-      }
-    },
-    load: () => {
-      slide.style.display = "flex";
-      slide.style.gap = `${displayLogic.blockGap}px`;
-      Event.resize();
-      EventSwipe({ ...Event.helpers });
-    },
-    forward: () => {
-      hasInteractionOccured = true;
-      EventScrollCarousel({
-        ...Event.helpers
-      });
-      ButtonVisibility({ ...Event.helpers });
-    },
-    backward: () => {
-      hasInteractionOccured = true;
-      EventScrollCarousel({
-        ...Event.helpers,
-        isDirectionRight: false
-      });
-      ButtonVisibility({ ...Event.helpers });
-    }
-  };
-  container.appendChild(
-    CreateButton({
-      EventMoveForward: Event.forward,
-      EventMoveBackward: Event.backward
-    })
-  );
-  container.appendChild(
-    CreateButton({
-      EventMoveForward: Event.forward,
-      EventMoveBackward: Event.backward,
-      isRight: false
-    })
-  );
-  wrapper.classList.add(ELEMENT_ANIMATION_CAROUSEL_WRAPPER);
-  if (shadowRef) {
-    wrapper.appendChild(shadowRef);
-  } else {
-    blocks2.forEach((block) => slide.appendChild(block));
-    wrapper.appendChild(slide);
-  }
-  container.classList.add(ELEMENT_ANIMATION_CAROUSEL_CONTAINER);
-  container.appendChild(wrapper);
-  declaration.classList.add(ELEMENT_ANIMATION_CAROUSEL_DECLARATION);
-  declaration.appendChild(container);
-  window.addEventListener("resize", debounce(Event.resize, 30));
-  return {
-    element: declaration,
-    events: {
-      resize: Event.resize,
-      load: Event.load
-    }
-  };
-})();
-const blocks = {
-  CreateElement: CreateCarouselCardsElement,
-  Styles: STYLES_CAROUSEL_CARDS_ELEMENT,
-  Elements: {
-    declaration: ELEMENT_ANIMATION_CAROUSEL_DECLARATION,
-    container: ELEMENT_ANIMATION_CAROUSEL_CONTAINER,
-    containerSingleBlock: OVERWRITE_SINGLE_BLOCK_CONTAINER,
-    button: ELEMENT_ANIMATION_CAROUSEL_BUTTON,
-    nextButton: ELEMENT_ANIMATION_CAROUSEL_NEXT,
-    previousButton: ELEMENT_ANIMATION_CAROUSEL_PREVIOUS
-  }
-};
-export {
-  blocks as default
-};
-//# sourceMappingURL=blocks.mjs.map