@universityofmaryland/web-elements-library 1.6.12 → 1.6.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"names":[],"mappings":"AAOA,KAAK,2BAA2B,GAAG;IACjC,oBAAoB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,sBAAsB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5C,oBAAoB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC/C,CAAC;AAaF,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GACrD,2BAA2B,CAAC;AAE9B,KAAK,WAAW,GAAG,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"names":[],"mappings":"AAOA,KAAK,2BAA2B,GAAG;IACjC,oBAAoB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,sBAAsB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5C,oBAAoB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC/C,CAAC;AAaF,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GACrD,2BAA2B,CAAC;AAE9B,KAAK,WAAW,GAAG,uBAAuB,CAAC;AAmc3C,eAAO,MAAM,6BAA6B;2BA/HL,WAAW;;CAkI/C,CAAC"}
|
|
@@ -52,13 +52,15 @@ const PrimaryStyles = `
|
|
|
52
52
|
color: ${token.color.black};
|
|
53
53
|
font-size: ${token.font.size.base};
|
|
54
54
|
transition: color 0.2s ease-in-out;
|
|
55
|
-
line-height: 1.15em;
|
|
56
55
|
font-weight: 700;
|
|
57
56
|
text-wrap: pretty;
|
|
58
57
|
display: block;
|
|
59
58
|
display: flex;
|
|
60
59
|
align-items: flex-end;
|
|
61
60
|
text-align: right;
|
|
61
|
+
line-height: 1.15em !important;
|
|
62
|
+
letter-spacing: 0 !important;
|
|
63
|
+
word-spacing: 0 !important;
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
.${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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%);\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 if (elementContainer.hasAttribute(ATTRIBUTE_SHOWING)) return;\n elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n DropdownPositionPerViewPort();\n focusCallback = handleKeyboardNavigation({\n element: elementContainer,\n action: () => HideDropdown(),\n shadowDomContext: context,\n });\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\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 const createCompositeNavigationItem = {\n CreateElement: CreateNavItemElement,\n Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}
|
|
1
|
+
{"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 font-weight: 700;\n text-wrap: pretty;\n display: block;\n display: flex;\n align-items: flex-end;\n text-align: right;\n line-height: 1.15em !important;\n letter-spacing: 0 !important;\n word-spacing: 0 !important;\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%);\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 if (elementContainer.hasAttribute(ATTRIBUTE_SHOWING)) return;\n elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n DropdownPositionPerViewPort();\n focusCallback = handleKeyboardNavigation({\n element: elementContainer,\n action: () => HideDropdown(),\n shadowDomContext: context,\n });\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\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 const createCompositeNavigationItem = {\n CreateElement: CreateNavItemElement,\n Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universityofmaryland/web-elements-library",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.13",
|
|
4
4
|
"description": "UMD Web Elements",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@types/postcss-js": "^4.0.4",
|
|
42
42
|
"@universityofmaryland/web-builder-library": "^1.0.3",
|
|
43
|
+
"@universityofmaryland/web-icons-library": "^1.0.4",
|
|
43
44
|
"@universityofmaryland/web-token-library": "^1.0.1",
|
|
44
|
-
"@universityofmaryland/web-utilities-library": "^1.0.5",
|
|
45
45
|
"@universityofmaryland/web-styles-library": "^1.8.8",
|
|
46
|
-
"@universityofmaryland/web-
|
|
46
|
+
"@universityofmaryland/web-utilities-library": "^1.0.5"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@universityofmaryland/web-builder-library": "^1.0.0",
|