@universityofmaryland/web-elements-library 1.6.5 → 1.6.7

package/README.md

@@ -1,6 +1,6 @@
 # University of Maryland Web Elements Library
 
-[![Elements Version](https://img.shields.io/badge/Elements-v1.6.5-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
+[![Elements Version](https://img.shields.io/badge/Elements-v1.6.7-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
 
 Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
 

package/dist/atomic/text-lockup/contact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/contact.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAC;AA4FpD,eAAO,MAAM,uBAAuB,GAAI,+EASrC,kBAAkB,kFAqGpB,CAAC"}
+{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/contact.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAiGpD,eAAO,MAAM,uBAAuB,GAAI,+EASrC,kBAAkB,kFAqGpB,CAAC"}

package/dist/atomic/text-lockup/contact.js

@@ -15,7 +15,11 @@ const makeIcon = ({
     elementStyles.action.icon.composeIcon({
       theme: theme.variant(isThemeDark)
     })
-  ).build();
+  ).withStyles({
+    element: {
+      alignSelf: "flex-start"
+    }
+  }).build();
 };
 const makeText = ({
   text,

package/dist/atomic/text-lockup/contact.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact.js","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport {\n  email as iconEmail,\n  phone as iconPhone,\n} from '@universityofmaryland/web-icons-library/communication';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport {\n  linkedin as iconLinkedIn,\n  bluesky as iconBluesky,\n  substack as iconSubstack,\n} from '@universityofmaryland/web-icons-library/social';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  return new ElementBuilder('span')\n    .withHTML(icon)\n    .styled(\n      elementStyles.action.icon.composeIcon({\n        theme: theme.variant(isThemeDark),\n      }),\n    )\n    .build();\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  return new ElementBuilder('span')\n    .withHTML(text)\n    .styled(\n      typography.sans.compose('smaller', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n      },\n    })\n    .build();\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink = element.getAttribute('href') && icon !== iconPin;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n\n        ...(isThemeDark && {\n          color: `${token.color.white}`,\n        }),\n      },\n    },\n  };\n\n  if (isLink) {\n    const ariaLabel = element.getAttribute('aria-label');\n    const href = element.getAttribute('href') || '';\n\n    const linkBuilder = new ElementBuilder('a')\n      .styled(layout.grid.inline.row)\n      .withStyles(containerStyles)\n      .withChildren(iconSpan, textSpan)\n      .withAttribute('href', href);\n\n    if (ariaLabel) {\n      linkBuilder.withAttribute('aria-label', ariaLabel);\n    }\n\n    return linkBuilder.build();\n  }\n\n  return new ElementBuilder()\n    .styled(layout.grid.inline.row)\n    .withStyles(containerStyles)\n    .withChildren(iconSpan, textSpan)\n    .build();\n};\n\nexport const createTextLockupContact = ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkedin,\n  bluesky,\n  substack,\n  phone,\n}: PersonContactProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n      },\n    });\n\n  if (phone) {\n    const phoneElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-phone')\n      .withChild(\n        makeContactLink({ element: phone, icon: iconPhone, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(phoneElement);\n  }\n\n  if (email) {\n    const emailElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-email')\n      .withChild(\n        makeContactLink({ element: email, icon: iconEmail, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(emailElement);\n  }\n\n  if (linkedin) {\n    const linkedInElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-linkedin')\n      .withChild(\n        makeContactLink({\n          element: linkedin,\n          icon: iconLinkedIn,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(linkedInElement);\n  }\n\n  if (bluesky) {\n    const blueSkyElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-bluesky')\n      .withChild(\n        makeContactLink({\n          element: bluesky,\n          icon: iconBluesky,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(blueSkyElement);\n  }\n\n  if (substack) {\n    const substackElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-substack')\n      .withChild(\n        makeContactLink({\n          element: substack,\n          icon: iconSubstack,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(substackElement);\n  }\n\n  if (address) {\n    const addressElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-address')\n      .withChild(\n        makeContactLink({ element: address, icon: iconPin, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(addressElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["iconPin","email","linkedin","bluesky","substack","phone","iconPhone","iconEmail","iconLinkedIn","iconBluesky","iconSubstack"],"mappings":"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"}
+{"version":3,"file":"contact.js","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport {\n  email as iconEmail,\n  phone as iconPhone,\n} from '@universityofmaryland/web-icons-library/communication';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport {\n  linkedin as iconLinkedIn,\n  bluesky as iconBluesky,\n  substack as iconSubstack,\n} from '@universityofmaryland/web-icons-library/social';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  return new ElementBuilder('span')\n    .withHTML(icon)\n    .styled(\n      elementStyles.action.icon.composeIcon({\n        theme: theme.variant(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        alignSelf: 'flex-start',\n      },\n    })\n    .build();\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  return new ElementBuilder('span')\n    .withHTML(text)\n    .styled(\n      typography.sans.compose('smaller', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n      },\n    })\n    .build();\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink = element.getAttribute('href') && icon !== iconPin;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n\n        ...(isThemeDark && {\n          color: `${token.color.white}`,\n        }),\n      },\n    },\n  };\n\n  if (isLink) {\n    const ariaLabel = element.getAttribute('aria-label');\n    const href = element.getAttribute('href') || '';\n\n    const linkBuilder = new ElementBuilder('a')\n      .styled(layout.grid.inline.row)\n      .withStyles(containerStyles)\n      .withChildren(iconSpan, textSpan)\n      .withAttribute('href', href);\n\n    if (ariaLabel) {\n      linkBuilder.withAttribute('aria-label', ariaLabel);\n    }\n\n    return linkBuilder.build();\n  }\n\n  return new ElementBuilder()\n    .styled(layout.grid.inline.row)\n    .withStyles(containerStyles)\n    .withChildren(iconSpan, textSpan)\n    .build();\n};\n\nexport const createTextLockupContact = ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkedin,\n  bluesky,\n  substack,\n  phone,\n}: PersonContactProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n      },\n    });\n\n  if (phone) {\n    const phoneElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-phone')\n      .withChild(\n        makeContactLink({ element: phone, icon: iconPhone, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(phoneElement);\n  }\n\n  if (email) {\n    const emailElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-email')\n      .withChild(\n        makeContactLink({ element: email, icon: iconEmail, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(emailElement);\n  }\n\n  if (linkedin) {\n    const linkedInElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-linkedin')\n      .withChild(\n        makeContactLink({\n          element: linkedin,\n          icon: iconLinkedIn,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(linkedInElement);\n  }\n\n  if (bluesky) {\n    const blueSkyElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-bluesky')\n      .withChild(\n        makeContactLink({\n          element: bluesky,\n          icon: iconBluesky,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(blueSkyElement);\n  }\n\n  if (substack) {\n    const substackElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-substack')\n      .withChild(\n        makeContactLink({\n          element: substack,\n          icon: iconSubstack,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(substackElement);\n  }\n\n  if (address) {\n    const addressElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-address')\n      .withChild(\n        makeContactLink({ element: address, icon: iconPin, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(addressElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["iconPin","email","linkedin","bluesky","substack","phone","iconPhone","iconEmail","iconLinkedIn","iconBluesky","iconSubstack"],"mappings":"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"}

package/dist/composite/social/sharing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA6TnD,eAAO,MAAM,4BAA4B,UA9BE,kBAAkB,8BA8BS,CAAC"}
+{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAuTnD,eAAO,MAAM,4BAA4B,UA9BE,kBAAkB,8BA8BS,CAAC"}

package/dist/composite/social/sharing.js

@@ -12,17 +12,15 @@ const createFacebookButton = () => {
         height: "30px"
       }
     }
-  }).withAria({ label: "share this page on facebook" }).withEvents({
-    click: () => {
-      const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
-        window.location.toString()
-      )}`;
-      window.open(
-        shareURL,
-        "Facebook",
-        "toolbar=0,status=0,width=626,height=436"
-      );
-    }
+  }).withAria({ label: "share this page on facebook" }).on("click", () => {
+    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
+      window.location.toString()
+    )}`;
+    window.open(
+      shareURL,
+      "Facebook",
+      "toolbar=0,status=0,width=626,height=436"
+    );
   }).build();
   return model;
 };
@@ -30,15 +28,13 @@ const createTwitterButton = ({
   url,
   title
 }) => {
-  const model = new ElementBuilder("button").withHTML(x).withAria({ label: "share this page on twitter" }).withEvents({
-    click: () => {
-      const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
-      window.open(
-        shareURL,
-        "sharer",
-        "toolbar=0,status=0,width=626,height=436"
-      );
-    }
+  const model = new ElementBuilder("button").withHTML(x).withAria({ label: "share this page on twitter" }).on("click", () => {
+    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
+    window.open(
+      shareURL,
+      "sharer",
+      "toolbar=0,status=0,width=626,height=436"
+    );
   }).build();
   return model;
 };
@@ -57,9 +53,7 @@ const createEmailLink = ({
   target: "_blank"
 }).withAria({ label: "email this page" }).build();
 const createPrintButton = () => {
-  const model = new ElementBuilder("button").withHTML(print).withAria({ label: "print this page" }).withEvents({
-    click: () => window.print()
-  }).build();
+  const model = new ElementBuilder("button").withHTML(print).withAria({ label: "print this page" }).on("click", () => window.print()).build();
   return model;
 };
 const createContainer = (props) => {

package/dist/composite/social/sharing.js.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n} from '@universityofmaryland/web-icons-library/social';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport type { ElementModel } from '../../_types';\nimport type { SocialSharingProps } from './_types';\n\nconst createFacebookButton = (): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withClassName('social-sharing-facebook')\n    .withHTML(iconFacebook)\n    .withStyles({\n      element: {\n        ['& svg']: {\n          width: '34px',\n          height: '30px',\n        },\n      },\n    })\n    .withAria({ label: 'share this page on facebook' })\n    .withEvents({\n      click: () => {\n        const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n          window.location.toString(),\n        )}`;\n\n        window.open(\n          shareURL,\n          'Facebook',\n          'toolbar=0,status=0,width=626,height=436',\n        );\n      },\n    })\n    .build();\n\n  return model;\n};\n\nconst createTwitterButton = ({\n  url,\n  title,\n}: Pick<\n  SocialSharingProps,\n  'url' | 'title'\n>): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withHTML(iconX)\n    .withAria({ label: 'share this page on twitter' })\n    .withEvents({\n      click: () => {\n        const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n        window.open(\n          shareURL,\n          'sharer',\n          'toolbar=0,status=0,width=626,height=436',\n        );\n      },\n    })\n    .build();\n\n  return model;\n};\n\nconst createEmailLink = ({\n  url,\n  title,\n}: Pick<\n  SocialSharingProps,\n  'url' | 'title'\n>): ElementModel<HTMLAnchorElement> =>\n  new ElementBuilder<HTMLAnchorElement>('a')\n    .withClassName('social-sharing-email')\n    .withStyles({\n      element: {\n        ['& svg']: {\n          width: '21px',\n          height: '20px',\n        },\n      },\n    })\n    .withHTML(iconEmail)\n    .withAttributes({\n      href: `mailto:?subject=${title}&body=${url}`,\n      target: '_blank',\n    })\n    .withAria({ label: 'email this page' })\n    .build();\n\nconst createPrintButton = (): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withHTML(iconPrint)\n    .withAria({ label: 'print this page' })\n    .withEvents({\n      click: () => window.print(),\n    })\n    .build();\n\n  return model;\n};\n\nconst createContainer = (\n  props: SocialSharingProps,\n): ElementModel<HTMLElement> => {\n  const {\n    includeFacebook = true,\n    includeTwitter = true,\n    includeEmail = false,\n    includePrint = false,\n    isFixed = false,\n    title: defaultTitle,\n    url: defaultUrl,\n  } = props;\n\n  const title = defaultTitle || document.title;\n  const url = defaultUrl || window.location.toString();\n\n  const container = new ElementBuilder()\n    .withClassName('social-sharing-container')\n    .withStyles({\n      element: {\n        display: 'flex',\n        transition: 'transform 250ms ease-in-out',\n\n        ['& > *']: {\n          height: token.spacing['2xl'],\n          width: token.spacing['2xl'],\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          border: `1px solid ${token.color.gray.light}`,\n          backgroundColor: token.color.white,\n          transition: 'background-color 250ms ease-in-out',\n        },\n\n        ['& > button:hover, & > button:focus, & > a:hover, & > a:focus']: {\n          backgroundColor: token.color.gray.dark,\n\n          ['svg path']: {\n            fill: token.color.white,\n          },\n        },\n\n        ['& > *:not(:last-child)']: {\n          borderRight: 'none',\n        },\n\n        ['& svg']: {\n          display: 'block',\n          transition: 'fill 250ms ease-in-out',\n        },\n\n        ['& svg path']: {\n          fill: token.color.black,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          ['&[fixed]']: {\n            flexDirection: 'column',\n          },\n\n          ['&[fixed] > *:not(:last-child)']: {\n            borderRight: `1px solid ${token.color.gray.light}`,\n            borderBottom: 'none',\n          },\n        },\n      },\n    });\n\n  if (isFixed) {\n    container.withAttribute('fixed', '');\n  }\n\n  if (includeFacebook) {\n    container.withChild(createFacebookButton());\n  }\n\n  if (includeTwitter) {\n    container.withChild(\n      createTwitterButton({\n        title,\n        url,\n      }),\n    );\n  }\n\n  if (includeEmail) {\n    container.withChild(\n      createEmailLink({\n        title,\n        url,\n      }),\n    );\n  }\n\n  if (includePrint) {\n    container.withChild(createPrintButton());\n  }\n\n  return container.build();\n};\n\nconst setupFixedBehaviour = ({\n  container,\n  declaration,\n}: {\n  container: HTMLElement;\n  declaration: HTMLElement;\n}) => {\n  const defaultStartingPosition = -100;\n\n  const getSpacing = () => {\n    if (window.innerWidth > 768) {\n      return 40;\n    }\n\n    return 8;\n  };\n  let startingPosition: number | null = null;\n  let isShowing = false;\n\n  const setVisiblePosition = () => {\n    if (!isShowing) {\n      container.style.transform = 'translateX(0)';\n      isShowing = true;\n    }\n  };\n\n  const setHiddenPosition = () => {\n    if (isShowing) {\n      isShowing = false;\n\n      if (startingPosition) {\n        const spacing = getSpacing();\n        const translateAmount = window.innerWidth - startingPosition;\n        const position = translateAmount + spacing + container.offsetWidth;\n\n        container.style.transform = `translateX(-${position}px)`;\n      } else {\n        container.style.transform = `translateX(${defaultStartingPosition}vh)`;\n      }\n    }\n  };\n\n  const eventResize = () => {\n    startingPosition = declaration.getBoundingClientRect().left;\n  };\n\n  const eventScroll = () => {\n    const windowHeight = window.innerHeight;\n    const pagePosition = window.scrollY;\n    const isNearBottom =\n      pagePosition + windowHeight >=\n      document.body.scrollHeight - windowHeight / 2;\n\n    const shouldShow = !isNearBottom;\n\n    if (shouldShow) {\n      setVisiblePosition();\n    } else {\n      setHiddenPosition();\n    }\n  };\n\n  const load = () => {\n    startingPosition = declaration.getBoundingClientRect().left;\n    container.style.transition = 'none';\n    setHiddenPosition();\n\n    setTimeout(() => {\n      container.style.transition = 'transform 250ms ease-in-out';\n    }, 100);\n  };\n\n  window.addEventListener(\n    'scroll',\n    debounce(() => eventScroll(), 20),\n  );\n\n  window.addEventListener(\n    'resize',\n    debounce(() => eventResize(), 20),\n  );\n\n  return {\n    load,\n    onScroll: eventScroll,\n    onResize: eventResize,\n    setHiddenPosition,\n  };\n};\n\nconst CreateSocialSharingElement = (props: SocialSharingProps) => {\n  const { isFixed = false } = props;\n  const containerModel = createContainer(props);\n\n  const declarationModel = new ElementBuilder()\n    .withClassName('social-sharing-declarion')\n    .withChild(containerModel)\n    .withStyles({\n      element: {\n        container: 'umd-element-social-sharing / inline-size',\n      },\n    })\n    .build();\n\n  const model: ElementModel<HTMLElement> = {\n    ...declarationModel,\n  };\n\n  if (isFixed) {\n    const { load } = setupFixedBehaviour({\n      container: containerModel.element,\n      declaration: declarationModel.element,\n    });\n\n    model.events = { load };\n  }\n\n  return model;\n};\n\nexport const createCompositeSocialSharing = CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}
+{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n} from '@universityofmaryland/web-icons-library/social';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport type { ElementModel } from '../../_types';\nimport type { SocialSharingProps } from './_types';\n\nconst createFacebookButton = (): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withClassName('social-sharing-facebook')\n    .withHTML(iconFacebook)\n    .withStyles({\n      element: {\n        ['& svg']: {\n          width: '34px',\n          height: '30px',\n        },\n      },\n    })\n    .withAria({ label: 'share this page on facebook' })\n    .on('click', () => {\n      const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n        window.location.toString(),\n      )}`;\n\n      window.open(\n        shareURL,\n        'Facebook',\n        'toolbar=0,status=0,width=626,height=436',\n      );\n    })\n    .build();\n\n  return model;\n};\n\nconst createTwitterButton = ({\n  url,\n  title,\n}: Pick<\n  SocialSharingProps,\n  'url' | 'title'\n>): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withHTML(iconX)\n    .withAria({ label: 'share this page on twitter' })\n    .on('click', () => {\n      const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n      window.open(\n        shareURL,\n        'sharer',\n        'toolbar=0,status=0,width=626,height=436',\n      );\n    })\n    .build();\n\n  return model;\n};\n\nconst createEmailLink = ({\n  url,\n  title,\n}: Pick<\n  SocialSharingProps,\n  'url' | 'title'\n>): ElementModel<HTMLAnchorElement> =>\n  new ElementBuilder<HTMLAnchorElement>('a')\n    .withClassName('social-sharing-email')\n    .withStyles({\n      element: {\n        ['& svg']: {\n          width: '21px',\n          height: '20px',\n        },\n      },\n    })\n    .withHTML(iconEmail)\n    .withAttributes({\n      href: `mailto:?subject=${title}&body=${url}`,\n      target: '_blank',\n    })\n    .withAria({ label: 'email this page' })\n    .build();\n\nconst createPrintButton = (): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withHTML(iconPrint)\n    .withAria({ label: 'print this page' })\n    .on('click', () => window.print())\n    .build();\n\n  return model;\n};\n\nconst createContainer = (\n  props: SocialSharingProps,\n): ElementModel<HTMLElement> => {\n  const {\n    includeFacebook = true,\n    includeTwitter = true,\n    includeEmail = false,\n    includePrint = false,\n    isFixed = false,\n    title: defaultTitle,\n    url: defaultUrl,\n  } = props;\n\n  const title = defaultTitle || document.title;\n  const url = defaultUrl || window.location.toString();\n\n  const container = new ElementBuilder()\n    .withClassName('social-sharing-container')\n    .withStyles({\n      element: {\n        display: 'flex',\n        transition: 'transform 250ms ease-in-out',\n\n        ['& > *']: {\n          height: token.spacing['2xl'],\n          width: token.spacing['2xl'],\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          border: `1px solid ${token.color.gray.light}`,\n          backgroundColor: token.color.white,\n          transition: 'background-color 250ms ease-in-out',\n        },\n\n        ['& > button:hover, & > button:focus, & > a:hover, & > a:focus']: {\n          backgroundColor: token.color.gray.dark,\n\n          ['svg path']: {\n            fill: token.color.white,\n          },\n        },\n\n        ['& > *:not(:last-child)']: {\n          borderRight: 'none',\n        },\n\n        ['& svg']: {\n          display: 'block',\n          transition: 'fill 250ms ease-in-out',\n        },\n\n        ['& svg path']: {\n          fill: token.color.black,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          ['&[fixed]']: {\n            flexDirection: 'column',\n          },\n\n          ['&[fixed] > *:not(:last-child)']: {\n            borderRight: `1px solid ${token.color.gray.light}`,\n            borderBottom: 'none',\n          },\n        },\n      },\n    });\n\n  if (isFixed) {\n    container.withAttribute('fixed', '');\n  }\n\n  if (includeFacebook) {\n    container.withChild(createFacebookButton());\n  }\n\n  if (includeTwitter) {\n    container.withChild(\n      createTwitterButton({\n        title,\n        url,\n      }),\n    );\n  }\n\n  if (includeEmail) {\n    container.withChild(\n      createEmailLink({\n        title,\n        url,\n      }),\n    );\n  }\n\n  if (includePrint) {\n    container.withChild(createPrintButton());\n  }\n\n  return container.build();\n};\n\nconst setupFixedBehaviour = ({\n  container,\n  declaration,\n}: {\n  container: HTMLElement;\n  declaration: HTMLElement;\n}) => {\n  const defaultStartingPosition = -100;\n\n  const getSpacing = () => {\n    if (window.innerWidth > 768) {\n      return 40;\n    }\n\n    return 8;\n  };\n  let startingPosition: number | null = null;\n  let isShowing = false;\n\n  const setVisiblePosition = () => {\n    if (!isShowing) {\n      container.style.transform = 'translateX(0)';\n      isShowing = true;\n    }\n  };\n\n  const setHiddenPosition = () => {\n    if (isShowing) {\n      isShowing = false;\n\n      if (startingPosition) {\n        const spacing = getSpacing();\n        const translateAmount = window.innerWidth - startingPosition;\n        const position = translateAmount + spacing + container.offsetWidth;\n\n        container.style.transform = `translateX(-${position}px)`;\n      } else {\n        container.style.transform = `translateX(${defaultStartingPosition}vh)`;\n      }\n    }\n  };\n\n  const eventResize = () => {\n    startingPosition = declaration.getBoundingClientRect().left;\n  };\n\n  const eventScroll = () => {\n    const windowHeight = window.innerHeight;\n    const pagePosition = window.scrollY;\n    const isNearBottom =\n      pagePosition + windowHeight >=\n      document.body.scrollHeight - windowHeight / 2;\n\n    const shouldShow = !isNearBottom;\n\n    if (shouldShow) {\n      setVisiblePosition();\n    } else {\n      setHiddenPosition();\n    }\n  };\n\n  const load = () => {\n    startingPosition = declaration.getBoundingClientRect().left;\n    container.style.transition = 'none';\n    setHiddenPosition();\n\n    setTimeout(() => {\n      container.style.transition = 'transform 250ms ease-in-out';\n    }, 100);\n  };\n\n  window.addEventListener(\n    'scroll',\n    debounce(() => eventScroll(), 20),\n  );\n\n  window.addEventListener(\n    'resize',\n    debounce(() => eventResize(), 20),\n  );\n\n  return {\n    load,\n    onScroll: eventScroll,\n    onResize: eventResize,\n    setHiddenPosition,\n  };\n};\n\nconst CreateSocialSharingElement = (props: SocialSharingProps) => {\n  const { isFixed = false } = props;\n  const containerModel = createContainer(props);\n\n  const declarationModel = new ElementBuilder()\n    .withClassName('social-sharing-declarion')\n    .withChild(containerModel)\n    .withStyles({\n      element: {\n        container: 'umd-element-social-sharing / inline-size',\n      },\n    })\n    .build();\n\n  const model: ElementModel<HTMLElement> = {\n    ...declarationModel,\n  };\n\n  if (isFixed) {\n    const { load } = setupFixedBehaviour({\n      container: containerModel.element,\n      declaration: declarationModel.element,\n    });\n\n    model.events = { load };\n  }\n\n  return model;\n};\n\nexport const createCompositeSocialSharing = CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "description": "UMD Web Elements",
   "type": "module",
   "main": "dist/index.js",
@@ -62,6 +62,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-legacy": "^7.2.1",
+    "typescript": "^5.8.2",
     "vite": "^7.1.4",
     "vite-plugin-checker": "^0.10.3",
     "vite-plugin-dts": "^4.5.4"