@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/media/elements/gif.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const elementModel = ElementModel.create({\n    element: container,\n    className: 'media-gif',\n    children: [\n      assets.image.background({\n        element: image,\n        isShowCaption: true,\n        isScaled: false,\n        isGifAllowed: true,\n        customStyles: {\n          width: 'auto',\n          height: '100%',\n          display: 'block',\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const imageElement = assets.image.background({\n    element: image,\n    isShowCaption: true,\n    isScaled: false,\n    isGifAllowed: true,\n    customStyles: {\n      width: 'auto',\n      height: '100%',\n      display: 'block',\n    },\n  });\n\n  const elementModel = new ElementBuilder(container)\n    .withClassName('media-gif')\n    .withChild(imageElement)\n    .withStyles({\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    })\n    .build();\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,eAAwB;AAAA,IAC3C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX,CACD;AAED,QAAM,eAAe,IAAI,eAAe,SAAS,EAC9C,cAAc,WAAW,EACzB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}

package/dist/composite/media/inline/caption.js

@@ -1,8 +1,8 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
-const image = require("../../../layout/image.js");
 const caption = require("../elements/caption.js");
+const image = require("../../../layout/image.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/media/inline/caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACAE,YAAAA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}
+{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACAE,YAAAA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}

package/dist/composite/media/inline/caption.mjs

@@ -1,7 +1,7 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import LayoutImage from "../../../layout/image.mjs";
 import CaptionContainer from "../elements/caption.mjs";
+import LayoutImage from "../../../layout/image.mjs";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-with-caption-container";
 const ELEMENT_OBJECT_CAPTION_CONTAINER = "element-media-caption-container";
 const ObjectContainer = `

package/dist/composite/media/inline/caption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["caption"],"mappings":";;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMA,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
+{"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["caption"],"mappings":";;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMA,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}

package/dist/composite/media/inline/wrapped.js

@@ -1,8 +1,8 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
-const image = require("../../../layout/image.js");
 const caption = require("../elements/caption.js");
+const image = require("../../../layout/image.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/media/inline/wrapped.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapped.js","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["token","LayoutImage","CaptionContainer","image","caption","objectContainer","debounce"],"mappings":"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"}
+{"version":3,"file":"wrapped.js","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["token","LayoutImage","CaptionContainer","image","caption","objectContainer","debounce"],"mappings":"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"}

package/dist/composite/media/inline/wrapped.mjs

@@ -1,7 +1,7 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import LayoutImage from "../../../layout/image.mjs";
 import CaptionContainer from "../elements/caption.mjs";
+import LayoutImage from "../../../layout/image.mjs";
 const BREAKPOINT = 400;
 const ATTRIBUTE_IS_WRAPPING_TEXT = "is-wrapping-text";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-wrapped-container";

package/dist/composite/media/inline/wrapped.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"wrapped.mjs","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["caption","objectContainer"],"mappings":";;;;AAeA,MAAM,aAAa;AAEnB,MAAM,6BAA6B;AAEnC,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA,sBAEf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,sCAAsC;AAAA,KACvC,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,aAAa,MAAM;AACzB,QAAM,eAAe,gBAAgB;AACrC,MAAI,QAAQ;AAEZ,MAAI,cAAc;AAChB,UAAM,iBAAiB,aAAa,gBAAgB;AACpD,QAAI,wBAAwB,gBAAgB;AAAA,EAC9C;AAEA,SAAO;AACT;AAEA,MAAM,2BAA2B,CAAC,WAC/B,MAAM;AACL,QAAM,EAAE,OAAO,kBAAkB,aAAa,SAAS,iBACrD;AAEF,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,kBAAkB,gBAAgB,iBAAiB;AACzD,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AAAA,IACrD;AAAA,EACF;AACA,QAAM,aAAa,MAAM;AACvB,UAAM,oBAAoB,iBAAiB,cAAc;AACzD,UAAMC,mBAAkB,iBAAiB;AAAA,MACvC,IAAI,gCAAgC;AAAA,IAAA;AAGtC,QAAI,CAAC,MAAO;AAEZ,QAAI,mBAAmB;AACrB,YAAM,aAAa,cAAc,EAAE,kBAAkB,OAAO;AAE5DA,uBAAgB,MAAM,QAAQ,GAAG,UAAU;AAC3CA,uBAAgB,MAAM,UAAU;AAChCA,uBAAgB,MAAM,YAAY;AAElC,UAAI,kBAAkB;AACpBA,yBAAgB,MAAM,QAAQ;AAC9BA,yBAAgB,MAAM,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MACzD,OAAO;AACLA,yBAAgB,MAAM,QAAQ;AAC9BA,yBAAgB,MAAM,eAAe,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC1D;AAAA,IACF,OAAO;AACLA,uBAAgB,MAAM,QAAQ;AAC9BA,uBAAgB,MAAM,QAAQ;AAC9BA,uBAAgB,MAAM,YAAY;AAClCA,uBAAgB,MAAM,cAAc;AACpCA,uBAAgB,MAAM,eAAe;AAAA,IACvC;AAEA,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACA,QAAM,cAAc,MAAM;AACxB,QAAI,iBAAiB;AACnB,iBAAA;AAAA,IACF;AACA,QAAI,YAAY;AACd,kBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAEN,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAE9D,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,MAAI,iBAAiB;AACnB,qBAAiB,YAAY,YAAY;AACzC,qBAAiB,aAAa,4BAA4B,EAAE;AAC5D,eAAW,MAAM;AACf,iBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
+{"version":3,"file":"wrapped.mjs","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["caption","objectContainer"],"mappings":"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"}

package/dist/composite/navigation/elements/breadcrumb/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const animation = require("@universityofmaryland/web-styles-library/animation");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const animation$1 = require("@universityofmaryland/web-utilities-library/animation");

package/dist/composite/navigation/elements/breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nexport default ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    wrapLinkForAnimation({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n"],"names":["token","jssToCSS","animation","styles","wrapLinkForAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrBA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACLA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9CC,qBAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJF,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIOA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShBA,iBAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACTA,iBAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzCC,qBAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAA,QAAe,CAAC,EAAE,aAAa,mBAAoC;AACjE,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAIC,UAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtCC,qCAAqB;AAAA,MACnB,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,QAAAD,QAAA;AAClC;;"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nexport default ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    wrapLinkForAnimation({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n"],"names":["token","jssToCSS","animation","styles","wrapLinkForAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrBA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACLA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9CC,qBAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJF,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIOA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShBA,iBAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACTA,iBAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzCC,qBAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAA,QAAe,CAAC,EAAE,aAAa,mBAAoC;AACjE,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAIC,UAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtCC,qCAAqB;AAAA,MACnB,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,QAAAD,QAAA;AAClC;;"}

package/dist/composite/navigation/elements/breadcrumb/index.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as animation from "@universityofmaryland/web-styles-library/animation";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";

package/dist/composite/navigation/elements/breadcrumb/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nexport default ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    wrapLinkForAnimation({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACL,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9C,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJ,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIO,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShB,MAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACT,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzC,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAA,QAAe,CAAC,EAAE,aAAa,mBAAoC;AACjE,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAI,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtC,yBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,OAAA;AAClC;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nexport default ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    wrapLinkForAnimation({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACL,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9C,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJ,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIO,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShB,MAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACT,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzC,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAA,QAAe,CAAC,EAAE,aAAa,mBAAoC;AACjE,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAI,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtC,yBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,OAAA;AAClC;"}

package/dist/composite/navigation/elements/drawer/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const events = require("@universityofmaryland/web-utilities-library/events");
 const controls = require("@universityofmaryland/web-icons-library/controls");
 const index$1 = require("../slider/index.js");

package/dist/composite/navigation/elements/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport NavDrawerSlider, { TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = iconCloseLarge;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["token","NavDrawerSlider","iconCloseLarge","handleKeyboardNavigation"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport NavDrawerSlider, { TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = iconCloseLarge;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["token","NavDrawerSlider","iconCloseLarge","handleKeyboardNavigation"],"mappings":"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"}

package/dist/composite/navigation/elements/drawer/index.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import { handleKeyboardNavigation } from "@universityofmaryland/web-utilities-library/events";
 import { close_large } from "@universityofmaryland/web-icons-library/controls";
 import NavDrawerSlider from "../slider/index.mjs";

package/dist/composite/navigation/elements/drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport NavDrawerSlider, { TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = iconCloseLarge;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["iconCloseLarge"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport NavDrawerSlider, { TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = iconCloseLarge;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["iconCloseLarge"],"mappings":"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"}

package/dist/composite/navigation/elements/item/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const animation = require("@universityofmaryland/web-styles-library/animation");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const animation$1 = require("@universityofmaryland/web-utilities-library/animation");

package/dist/composite/navigation/elements/item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);v \n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport default {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["token","jssToCSS","animation","wrapLinkForAnimation","iconChevronDown","handleKeyboardNavigation"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);v \n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport default {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["token","jssToCSS","animation","wrapLinkForAnimation","iconChevronDown","handleKeyboardNavigation"],"mappings":"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"}

package/dist/composite/navigation/elements/item/index.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as animation from "@universityofmaryland/web-styles-library/animation";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";