@universityofmaryland/web-elements-library 1.5.0 → 1.5.1

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.
Files changed (9) hide show
  1. package/README.md +1 -1
  2. package/dist/composite/footer/elements/main-section/index.js.map +1 -1
  3. package/dist/composite/footer/elements/main-section/index.mjs.map +1 -1
  4. package/dist/composite/navigation/header.d.ts.map +1 -1
  5. package/dist/composite/navigation/header.js +4 -1
  6. package/dist/composite/navigation/header.js.map +1 -1
  7. package/dist/composite/navigation/header.mjs +4 -1
  8. package/dist/composite/navigation/header.mjs.map +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # University of Maryland Web Elements Library
2
2
 
3
- [![Elements Version](https://img.shields.io/badge/Elements-v1.5.0-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
3
+ [![Elements Version](https://img.shields.io/badge/Elements-v1.5.1-blue)](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
 
package/dist/composite/footer/elements/main-section/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL('../../assets/visual-default.jpg', import.meta.url).href;\n }\n\n if (!imageSrc || !altText) return;\n\n const gradientElement = ElementModel.createDiv({\n className: 'umd-footer-background-image-graident',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n left: 0,\n top: '2px',\n width: '500vw',\n height: '100px',\n background: `linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100%)`,\n },\n },\n });\n\n const imageElement = ElementModel.create({\n element: document.createElement('img'),\n className: 'umd-footer-background-image',\n elementStyles: {\n element: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n });\n\n imageElement.element.setAttribute('src', imageSrc);\n imageElement.element.setAttribute('alt', altText);\n\n return ElementModel.createDiv({\n className: 'umd-footer-background-image-container',\n children: [gradientElement, imageElement],\n elementStyles: {\n element: {\n position: 'relative',\n paddingTop: '100px',\n\n [`& img`]: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n },\n });\n};\n\nconst createContainer = (\n logoRow: ElementVisual,\n visualContainerElement?: ElementVisual,\n linksRowElement?: ElementVisual,\n): ElementVisual => {\n return ElementModel.createDiv({\n className: 'umd-footer-main-container',\n children: [visualContainerElement, logoRow, linksRowElement].filter(\n Boolean,\n ) as ElementVisual[],\n });\n};\n\nexport default (props: MainSectionProps): ElementVisual => {\n const { isTypeMega, isTypeVisual } = props;\n\n const logoRow = createRowLogo(props);\n const visualContainerElement = createVisualContainer(props);\n const linksRowElement = (isTypeMega || isTypeVisual) && createRowLinks(props);\n\n return createContainer(\n logoRow,\n visualContainerElement,\n linksRowElement || undefined,\n );\n};\n"],"names":["ElementModel.createDiv","ElementModel.create","createRowLogo","createRowLinks"],"mappings":";;;;;AAaA,MAAM,wBAAwB,CAC5B,UAI8B;AAC9B,QAAM,EAAE,cAAc,cAAc,gBAAA,IAAoB;AACxD,QAAM,oBAAoB,gBAAgB;AAE1C,MAAI,CAAC,kBAAmB;AAExB,MAAI,UAAyB;AAC7B,MAAI,WAA0B;AAE9B,MAAI,iBAAiB;AACnB,UAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,UAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,QAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,iBAAW;AAAA,IACb;AACA,QAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,gBAAU;AAAA,IACZ;AAAA,EACF,WAAW,cAAc;AACvB,cAAU;AACV,eAAW,IAAA,IAAA,+85IAAA,OAAA,aAAA,cAAA,QAAA,KAAA,EAAA,cAAA,UAAA,EAAA,OAAA,0BAAA,uBAAA,QAAA,YAAA,MAAA,YAAA,uBAAA,OAAA,IAAA,IAAA,mDAAA,SAAA,OAAA,EAAA,IAAA,EAA4D;AAAA,EACzE;AAEA,MAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,QAAM,kBAAkBA,QAAAA,UAAuB;AAAA,IAC7C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,QAAM,eAAeC,QAAAA,OAAoB;AAAA,IACvC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,eAAa,QAAQ,aAAa,OAAO,QAAQ;AACjD,eAAa,QAAQ,aAAa,OAAO,OAAO;AAEhD,SAAOD,kBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,YAAY;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,SACA,wBACA,oBACkB;AAClB,SAAOA,kBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,wBAAwB,SAAS,eAAe,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAA,aAAe,CAAC,UAA2C;AACzD,QAAM,EAAE,YAAY,aAAA,IAAiB;AAErC,QAAM,UAAUE,MAAc,KAAK;AACnC,QAAM,yBAAyB,sBAAsB,KAAK;AAC1D,QAAM,mBAAmB,cAAc,iBAAiBC,QAAe,KAAK;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA;AAEvB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL('../../assets/visual-default.jpg', import.meta.url as any).href;\n }\n\n if (!imageSrc || !altText) return;\n\n const gradientElement = ElementModel.createDiv({\n className: 'umd-footer-background-image-graident',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n left: 0,\n top: '2px',\n width: '500vw',\n height: '100px',\n background: `linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100%)`,\n },\n },\n });\n\n const imageElement = ElementModel.create({\n element: document.createElement('img'),\n className: 'umd-footer-background-image',\n elementStyles: {\n element: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n });\n\n imageElement.element.setAttribute('src', imageSrc);\n imageElement.element.setAttribute('alt', altText);\n\n return ElementModel.createDiv({\n className: 'umd-footer-background-image-container',\n children: [gradientElement, imageElement],\n elementStyles: {\n element: {\n position: 'relative',\n paddingTop: '100px',\n\n [`& img`]: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n },\n });\n};\n\nconst createContainer = (\n logoRow: ElementVisual,\n visualContainerElement?: ElementVisual,\n linksRowElement?: ElementVisual,\n): ElementVisual => {\n return ElementModel.createDiv({\n className: 'umd-footer-main-container',\n children: [visualContainerElement, logoRow, linksRowElement].filter(\n Boolean,\n ) as ElementVisual[],\n });\n};\n\nexport default (props: MainSectionProps): ElementVisual => {\n const { isTypeMega, isTypeVisual } = props;\n\n const logoRow = createRowLogo(props);\n const visualContainerElement = createVisualContainer(props);\n const linksRowElement = (isTypeMega || isTypeVisual) && createRowLinks(props);\n\n return createContainer(\n logoRow,\n visualContainerElement,\n linksRowElement || undefined,\n );\n};\n"],"names":["ElementModel.createDiv","ElementModel.create","createRowLogo","createRowLinks"],"mappings":";;;;;AAaA,MAAM,wBAAwB,CAC5B,UAI8B;AAC9B,QAAM,EAAE,cAAc,cAAc,gBAAA,IAAoB;AACxD,QAAM,oBAAoB,gBAAgB;AAE1C,MAAI,CAAC,kBAAmB;AAExB,MAAI,UAAyB;AAC7B,MAAI,WAA0B;AAE9B,MAAI,iBAAiB;AACnB,UAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,UAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,QAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,iBAAW;AAAA,IACb;AACA,QAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,gBAAU;AAAA,IACZ;AAAA,EACF,WAAW,cAAc;AACvB,cAAU;AACV,eAAW,IAAA,IAAA,+85IAAA,OAAA,aAAA,cAAA,QAAA,KAAA,EAAA,cAAA,UAAA,EAAA,OAAA,0BAAA,uBAAA,QAAA,YAAA,MAAA,YAAA,uBAAA,OAAA,IAAA,IAAA,mDAAA,SAAA,OAAA,EAAA,IAAA,EAAmE;AAAA,EAChF;AAEA,MAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,QAAM,kBAAkBA,QAAAA,UAAuB;AAAA,IAC7C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,QAAM,eAAeC,QAAAA,OAAoB;AAAA,IACvC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,eAAa,QAAQ,aAAa,OAAO,QAAQ;AACjD,eAAa,QAAQ,aAAa,OAAO,OAAO;AAEhD,SAAOD,kBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,YAAY;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,SACA,wBACA,oBACkB;AAClB,SAAOA,kBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,wBAAwB,SAAS,eAAe,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAA,aAAe,CAAC,UAA2C;AACzD,QAAM,EAAE,YAAY,aAAA,IAAiB;AAErC,QAAM,UAAUE,MAAc,KAAK;AACnC,QAAM,yBAAyB,sBAAsB,KAAK;AAC1D,QAAM,mBAAmB,cAAc,iBAAiBC,QAAe,KAAK;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA;AAEvB;;"}
package/dist/composite/footer/elements/main-section/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL('../../assets/visual-default.jpg', import.meta.url).href;\n }\n\n if (!imageSrc || !altText) return;\n\n const gradientElement = ElementModel.createDiv({\n className: 'umd-footer-background-image-graident',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n left: 0,\n top: '2px',\n width: '500vw',\n height: '100px',\n background: `linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100%)`,\n },\n },\n });\n\n const imageElement = ElementModel.create({\n element: document.createElement('img'),\n className: 'umd-footer-background-image',\n elementStyles: {\n element: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n });\n\n imageElement.element.setAttribute('src', imageSrc);\n imageElement.element.setAttribute('alt', altText);\n\n return ElementModel.createDiv({\n className: 'umd-footer-background-image-container',\n children: [gradientElement, imageElement],\n elementStyles: {\n element: {\n position: 'relative',\n paddingTop: '100px',\n\n [`& img`]: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n },\n });\n};\n\nconst createContainer = (\n logoRow: ElementVisual,\n visualContainerElement?: ElementVisual,\n linksRowElement?: ElementVisual,\n): ElementVisual => {\n return ElementModel.createDiv({\n className: 'umd-footer-main-container',\n children: [visualContainerElement, logoRow, linksRowElement].filter(\n Boolean,\n ) as ElementVisual[],\n });\n};\n\nexport default (props: MainSectionProps): ElementVisual => {\n const { isTypeMega, isTypeVisual } = props;\n\n const logoRow = createRowLogo(props);\n const visualContainerElement = createVisualContainer(props);\n const linksRowElement = (isTypeMega || isTypeVisual) && createRowLinks(props);\n\n return createContainer(\n logoRow,\n visualContainerElement,\n linksRowElement || undefined,\n );\n};\n"],"names":["ElementModel.createDiv","ElementModel.create"],"mappings":";;;AAaA,MAAM,wBAAwB,CAC5B,UAI8B;AAC9B,QAAM,EAAE,cAAc,cAAc,gBAAA,IAAoB;AACxD,QAAM,oBAAoB,gBAAgB;AAE1C,MAAI,CAAC,kBAAmB;AAExB,MAAI,UAAyB;AAC7B,MAAI,WAA0B;AAE9B,MAAI,iBAAiB;AACnB,UAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,UAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,QAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,iBAAW;AAAA,IACb;AACA,QAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,gBAAU;AAAA,IACZ;AAAA,EACF,WAAW,cAAc;AACvB,cAAU;AACV,eAAW,IAAA,IAAA,+85IAAA,YAAA,GAAA,EAA4D;AAAA,EACzE;AAEA,MAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,QAAM,kBAAkBA,UAAuB;AAAA,IAC7C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,eAAa,QAAQ,aAAa,OAAO,QAAQ;AACjD,eAAa,QAAQ,aAAa,OAAO,OAAO;AAEhD,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,YAAY;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,SACA,wBACA,oBACkB;AAClB,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,wBAAwB,SAAS,eAAe,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAA,aAAe,CAAC,UAA2C;AACzD,QAAM,EAAE,YAAY,aAAA,IAAiB;AAErC,QAAM,UAAU,cAAc,KAAK;AACnC,QAAM,yBAAyB,sBAAsB,KAAK;AAC1D,QAAM,mBAAmB,cAAc,iBAAiB,eAAe,KAAK;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA;AAEvB;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport createRowLogo, { type RowLogoProps } from './row-logo';\nimport createRowLinks, { type RowLinksProps } from './row-links';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface MainSectionProps\n extends BaseProps,\n RowLinksProps,\n RowLogoProps {\n slotVisualImage: HTMLImageElement | null;\n}\n\nconst createVisualContainer = (\n props: Pick<\n MainSectionProps,\n 'isTypeVisual' | 'isTypeSimple' | 'slotVisualImage'\n >,\n): ElementVisual | undefined => {\n const { isTypeVisual, isTypeSimple, slotVisualImage } = props;\n const isShowVisualImage = isTypeVisual || isTypeSimple;\n\n if (!isShowVisualImage) return;\n\n let altText: string | null = null;\n let imageSrc: string | null = null;\n\n if (slotVisualImage) {\n const source = slotVisualImage.getAttribute('src');\n const alt = slotVisualImage.getAttribute('alt');\n\n if (typeof source === 'string' && source.length > 0) {\n imageSrc = source;\n }\n if (typeof alt === 'string' && alt.length > 0) {\n altText = alt;\n }\n } else if (isTypeVisual) {\n altText = 'The University of Maryland Campus';\n imageSrc = new URL('../../assets/visual-default.jpg', import.meta.url as any).href;\n }\n\n if (!imageSrc || !altText) return;\n\n const gradientElement = ElementModel.createDiv({\n className: 'umd-footer-background-image-graident',\n elementStyles: {\n element: {\n display: 'block',\n position: 'absolute',\n left: 0,\n top: '2px',\n width: '500vw',\n height: '100px',\n background: `linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100%)`,\n },\n },\n });\n\n const imageElement = ElementModel.create({\n element: document.createElement('img'),\n className: 'umd-footer-background-image',\n elementStyles: {\n element: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n });\n\n imageElement.element.setAttribute('src', imageSrc);\n imageElement.element.setAttribute('alt', altText);\n\n return ElementModel.createDiv({\n className: 'umd-footer-background-image-container',\n children: [gradientElement, imageElement],\n elementStyles: {\n element: {\n position: 'relative',\n paddingTop: '100px',\n\n [`& img`]: {\n width: '100% !important',\n objectFit: 'cover !important',\n display: 'block !important',\n objectPosition: 'center',\n },\n },\n },\n });\n};\n\nconst createContainer = (\n logoRow: ElementVisual,\n visualContainerElement?: ElementVisual,\n linksRowElement?: ElementVisual,\n): ElementVisual => {\n return ElementModel.createDiv({\n className: 'umd-footer-main-container',\n children: [visualContainerElement, logoRow, linksRowElement].filter(\n Boolean,\n ) as ElementVisual[],\n });\n};\n\nexport default (props: MainSectionProps): ElementVisual => {\n const { isTypeMega, isTypeVisual } = props;\n\n const logoRow = createRowLogo(props);\n const visualContainerElement = createVisualContainer(props);\n const linksRowElement = (isTypeMega || isTypeVisual) && createRowLinks(props);\n\n return createContainer(\n logoRow,\n visualContainerElement,\n linksRowElement || undefined,\n );\n};\n"],"names":["ElementModel.createDiv","ElementModel.create"],"mappings":";;;AAaA,MAAM,wBAAwB,CAC5B,UAI8B;AAC9B,QAAM,EAAE,cAAc,cAAc,gBAAA,IAAoB;AACxD,QAAM,oBAAoB,gBAAgB;AAE1C,MAAI,CAAC,kBAAmB;AAExB,MAAI,UAAyB;AAC7B,MAAI,WAA0B;AAE9B,MAAI,iBAAiB;AACnB,UAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,UAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,QAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,iBAAW;AAAA,IACb;AACA,QAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,gBAAU;AAAA,IACZ;AAAA,EACF,WAAW,cAAc;AACvB,cAAU;AACV,eAAW,IAAA,IAAA,+85IAAA,YAAA,GAAA,EAAmE;AAAA,EAChF;AAEA,MAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,QAAM,kBAAkBA,UAAuB;AAAA,IAC7C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,eAAa,QAAQ,aAAa,OAAO,QAAQ;AACjD,eAAa,QAAQ,aAAa,OAAO,OAAO;AAEhD,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,YAAY;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,SACA,wBACA,oBACkB;AAClB,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,wBAAwB,SAAS,eAAe,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAA,aAAe,CAAC,UAA2C;AACzD,QAAM,EAAE,YAAY,aAAA,IAAiB;AAErC,QAAM,UAAU,cAAc,KAAK;AACnC,QAAM,yBAAyB,sBAAsB,KAAK;AAC1D,QAAM,mBAAmB,cAAc,iBAAiB,eAAe,KAAK;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA;AAEvB;"}
package/dist/composite/navigation/header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../source/composite/navigation/header.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG,cAAc,GAC9B,WAAW,GAAG;IACZ,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEJ,KAAK,sBAAsB,GAAG,mBAAmB,GAAG,UAAU,CAAC;;2BA8SxB,sBAAsB;;;mCAOxB;gBAAE,QAAQ,EAAE,OAAO,CAAA;aAAE;;;;;AA8C1D,wBAGE"}
1
+ {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../source/composite/navigation/header.ts"],"names":[],"mappings":"AAQA,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG,cAAc,GAC9B,WAAW,GAAG;IACZ,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEJ,KAAK,sBAAsB,GAAG,mBAAmB,GAAG,UAAU,CAAC;;2BAgTxB,sBAAsB;;;mCAOxB;gBAAE,QAAQ,EAAE,OAAO,CAAA;aAAE;;;;;AA8C1D,wBAGE"}
package/dist/composite/navigation/header.js CHANGED
@@ -2,6 +2,7 @@
2
2
  const token = require("@universityofmaryland/web-styles-library/token");
3
3
  const typography = require("@universityofmaryland/web-styles-library/typography");
4
4
  const styles = require("@universityofmaryland/web-utilities-library/styles");
5
+ const network = require("@universityofmaryland/web-utilities-library/network");
5
6
  const search = require("@universityofmaryland/web-icons-library/search");
6
7
  const index$1 = require("./elements/menu-button/index.js");
7
8
  const index = require("./elements/item/index.js");
@@ -231,7 +232,9 @@ const CreateCtaLink = ({ ctaUrl, ctaText }) => {
231
232
  if (!ctaUrl || !ctaText) return null;
232
233
  const cta = document.createElement("a");
233
234
  cta.innerHTML = ctaText;
234
- cta.setAttribute("target", "_blank");
235
+ if (network.isExternalUrl(ctaUrl)) {
236
+ cta.setAttribute("target", "_blank");
237
+ }
235
238
  cta.setAttribute("href", ctaUrl);
236
239
  cta.classList.add(ELEMENT_HEADER_MENU_CTA);
237
240
  return cta;
package/dist/composite/navigation/header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.js","sources":["../../../source/composite/navigation/header.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { search as iconSearch } from '@universityofmaryland/web-icons-library/search';\nimport MenuButton from './elements/menu-button';\nimport NavigationItem from './elements/item';\n\ntype TypeLogoRequirments = {\n logo?: HTMLElement | null;\n eventOpen?: () => void;\n};\n\ntype TypeSearchLink = {\n searchUrl: string | null;\n};\n\ntype TypeCtaLink = {\n ctaUrl: string | null;\n ctaText: string | null;\n};\n\ntype TypeNavRow = TypeSearchLink &\n TypeCtaLink & {\n utilityRow?: HTMLElement | null;\n navItems?: HTMLElement[];\n };\n\ntype TypeHeaderRequirements = TypeLogoRequirments & TypeNavRow;\n\nconst ANIMATION_TIME = 500;\n\nconst ATTRIBUTE_STICKY = 'data-sticky';\nconst ATTRIBUTE_CTA = 'data-cta';\n\nconst IS_STICKY = `[${ATTRIBUTE_STICKY}=\"true\"]`;\nconst IS_CTA = `[${ATTRIBUTE_CTA}=\"true\"]`;\n\nconst ELEMENT_HEADER_DECLARATION = 'element-header-declaration';\nconst ELEMENT_HEADER_CONTAINTER = 'element-header-container';\nconst ELEMENT_HEADER_WRAPPER = 'element-header-wrapper';\nconst ELEMENT_HEADER_LOGO_COLUMN = 'element-header-logo-column';\nconst ELEMENT_HEADER_NAVIGATION_COLUMN = 'element-header-navigation-column';\nconst ELEMENT_HEADER_LOGO = 'element-header-logo';\nconst ELEMENT_HEADER_MENU_BUTTON = 'element-header-menu-button';\nconst ELEMENT_HEADER_MENU_CTA = 'element-header-menu-cta';\nconst ELEMENT_HEADER_MENU_SEARCH = 'element-header-menu-search';\nconst ELEMENT_HEADER_NAVIGATION_ROW = 'element-header-navigation-row';\nconst ELEMENT_HEADER_UTILITY_ROW = 'element-header-utility-row';\n\nconst OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;\nconst OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;\nconst OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;\nconst OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;\nconst OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;\n\nconst OverwriteStickyStyles = `\n ${OVERWRITE_STICKY_CONTAINER} {\n padding: ${token.spacing.xs} 0;\n }\n\n .${ELEMENT_HEADER_WRAPPER} {\n align-items: center;\n }\n\n ${OVERWRITE_STICKY_LOGO} img {\n max-height: 30px;\n }\n`;\n\nconst CtaStyles = `\n .${ELEMENT_HEADER_MENU_CTA} {\n color: ${token.color.white};\n font-weight: ${token.font.weight.bold};\n font-size: ${token.font.size.sm};\n padding: ${token.spacing.xs};\n background-color: ${token.color.red};\n transition: background .5s;\n white-space: nowrap;\n }\n\n .${ELEMENT_HEADER_MENU_CTA}:hover,\n .${ELEMENT_HEADER_MENU_CTA}:focus {\n background-color: ${token.color.redDark};\n }\n\n ${OVERWRITE_CTA_WRAPPER_CTA} {\n margin-top: -${token.spacing.min};\n }\n`;\n\nconst NavigationColumnStyles = `\n @media (max-width: 1240px) {\n .${ELEMENT_HEADER_NAVIGATION_COLUMN} {\n display: none;\n }\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} {\n display: grid;\n grid-auto-flow: column;\n }\n\n ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {\n padding-top: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > * {\n display: block;\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {\n margin-left: ${token.spacing.md};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} svg {\n width: 24px;\n height: 24px;\n fill: ${token.color.black};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} {\n display: flex;\n justify-content: flex-end;\n margin-bottom: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {\n display: flex;\n justify-content: flex-end;\n gap: ${token.spacing.md};\n }\n`;\n\nconst LogoColumnStyles = `\n .${ELEMENT_HEADER_LOGO_COLUMN} {\n align-items: center;\n display: flex;\n justify-content: flex-start;\n position: relative;\n width: 100%;\n max-width: 400px;\n }\n\n .${ELEMENT_HEADER_MENU_BUTTON} {\n border-right: 1px solid ${token.color.gray.light};\n padding-right: ${token.spacing.min};\n margin-right: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_LOGO} {\n display: grid;\n justify-content: flex-start;\n max-width: 350px;\n }\n\n .${ELEMENT_HEADER_LOGO}:has(img[src*=\".svg\"]) img {\n height: 240px;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n line-height: 1.05em;\n width: 100%;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"]`]: typography.sans.extraLarge,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"] *`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n font-weight: 700;\n }\n\n .${ELEMENT_HEADER_LOGO} img {\n width: 100%;\n max-height: 48px;\n max-width: 190px;\n }\n\n @media (min-width: ${token.media.breakpoints.tablet.min}) {\n .${ELEMENT_HEADER_LOGO} img {\n max-width: 240px;\n }\n }\n`;\n\nconst WrapperStyles = `\n .${ELEMENT_HEADER_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: ${token.spacing.lg};\n z-index: 999;\n }\n`;\n\nconst STYLES_NAVIGATION_HEADER = `\n .${ELEMENT_HEADER_CONTAINTER} {\n background-color: ${token.color.white};\n display: block;\n padding: ${token.spacing.md} 0;\n position: relative;\n transition: padding ${ANIMATION_TIME}ms;\n }\n\n ${WrapperStyles}\n ${LogoColumnStyles}\n ${NavigationColumnStyles}\n ${CtaStyles}\n ${OverwriteStickyStyles}\n ${NavigationItem.Styles}\n ${MenuButton.Styles}\n`;\n\nconst CreateSearchLink = ({ searchUrl }: TypeSearchLink) => {\n if (!searchUrl) return null;\n\n const searchLink = document.createElement('a');\n\n searchLink.href = searchUrl;\n searchLink.ariaLabel = 'Visit the search page';\n searchLink.innerHTML = iconSearch;\n searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);\n\n return searchLink;\n};\n\nconst CreateCtaLink = ({ ctaUrl, ctaText }: TypeCtaLink) => {\n if (!ctaUrl || !ctaText) return null;\n\n const cta = document.createElement('a');\n\n cta.innerHTML = ctaText;\n cta.setAttribute('target', '_blank');\n cta.setAttribute('href', ctaUrl);\n cta.classList.add(ELEMENT_HEADER_MENU_CTA);\n\n return cta;\n};\n\nconst CreateNavigationColumn = ({\n utilityRow,\n navItems,\n searchUrl,\n ctaText,\n ctaUrl,\n}: TypeNavRow) => {\n if (!navItems) return;\n\n const navColumnContainer = document.createElement('div');\n const utilityRowContainer = document.createElement('div');\n const navRowContainer = document.createElement('div');\n const searchLink = CreateSearchLink({\n searchUrl,\n });\n const ctaLink = CreateCtaLink({ ctaText, ctaUrl });\n\n if (utilityRow) {\n utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);\n utilityRowContainer.appendChild(utilityRow);\n navColumnContainer.appendChild(utilityRowContainer);\n }\n\n navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);\n\n navItems.forEach((item) => {\n navRowContainer.appendChild(item);\n });\n if (searchLink) navRowContainer.appendChild(searchLink);\n if (ctaLink) navRowContainer.appendChild(ctaLink);\n\n navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);\n navColumnContainer.appendChild(navRowContainer);\n\n return navColumnContainer;\n};\n\nconst CreateLogoColumn = ({ logo, eventOpen }: TypeLogoRequirments) => {\n const container = document.createElement('div');\n\n if (eventOpen) {\n const menuButton = MenuButton.CreateElement({ eventOpen });\n menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);\n container.appendChild(menuButton);\n }\n\n if (logo) {\n const childrenText = Array.from(logo.children).reduce((acc, child) => {\n if (child.nodeName === 'IMG') return acc;\n\n if (child.textContent) {\n return acc + child.textContent.length;\n }\n\n return acc;\n }, 0);\n logo.classList.add(ELEMENT_HEADER_LOGO);\n\n if (childrenText < 30) {\n logo.setAttribute('size', 'large');\n }\n\n container.appendChild(logo);\n }\n container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);\n return container;\n};\n\nconst CreateNavigationHeader = (props: TypeHeaderRequirements) => {\n const { ctaUrl, ctaText } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const logoColumn = CreateLogoColumn(props);\n const navigationColumn = CreateNavigationColumn(props);\n const eventSticky = ({ isSticky }: { isSticky: boolean }) => {\n const utility = container.querySelector(\n `.${ELEMENT_HEADER_UTILITY_ROW}`,\n ) as HTMLDivElement;\n\n if (isSticky && isElementSticky) return;\n\n if (isSticky) {\n isElementSticky = true;\n container.setAttribute(ATTRIBUTE_STICKY, 'true');\n\n if (utility) {\n utility.style.display = 'none';\n }\n }\n if (!isSticky) {\n isElementSticky = false;\n container.removeAttribute(ATTRIBUTE_STICKY);\n\n if (utility) {\n utility.style.display = 'block';\n }\n }\n };\n let isElementSticky = false;\n\n wrapper.classList.add(ELEMENT_HEADER_WRAPPER);\n wrapper.appendChild(logoColumn);\n\n if (navigationColumn) wrapper.appendChild(navigationColumn);\n if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, 'true');\n\n container.appendChild(wrapper);\n container.classList.add(ELEMENT_HEADER_CONTAINTER);\n\n declaration.classList.add(ELEMENT_HEADER_DECLARATION);\n declaration.appendChild(container);\n\n return {\n element: declaration,\n events: {\n sticky: eventSticky,\n },\n };\n};\n\nexport default {\n CreateElement: CreateNavigationHeader,\n Styles: STYLES_NAVIGATION_HEADER,\n};\n"],"names":["token","jssToCSS","typography","NavigationItem","MenuButton","iconSearch"],"mappings":"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"}
1
+ {"version":3,"file":"header.js","sources":["../../../source/composite/navigation/header.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { isExternalUrl } from '@universityofmaryland/web-utilities-library/network';\nimport { search as iconSearch } from '@universityofmaryland/web-icons-library/search';\nimport MenuButton from './elements/menu-button';\nimport NavigationItem from './elements/item';\n\ntype TypeLogoRequirments = {\n logo?: HTMLElement | null;\n eventOpen?: () => void;\n};\n\ntype TypeSearchLink = {\n searchUrl: string | null;\n};\n\ntype TypeCtaLink = {\n ctaUrl: string | null;\n ctaText: string | null;\n};\n\ntype TypeNavRow = TypeSearchLink &\n TypeCtaLink & {\n utilityRow?: HTMLElement | null;\n navItems?: HTMLElement[];\n };\n\ntype TypeHeaderRequirements = TypeLogoRequirments & TypeNavRow;\n\nconst ANIMATION_TIME = 500;\n\nconst ATTRIBUTE_STICKY = 'data-sticky';\nconst ATTRIBUTE_CTA = 'data-cta';\n\nconst IS_STICKY = `[${ATTRIBUTE_STICKY}=\"true\"]`;\nconst IS_CTA = `[${ATTRIBUTE_CTA}=\"true\"]`;\n\nconst ELEMENT_HEADER_DECLARATION = 'element-header-declaration';\nconst ELEMENT_HEADER_CONTAINTER = 'element-header-container';\nconst ELEMENT_HEADER_WRAPPER = 'element-header-wrapper';\nconst ELEMENT_HEADER_LOGO_COLUMN = 'element-header-logo-column';\nconst ELEMENT_HEADER_NAVIGATION_COLUMN = 'element-header-navigation-column';\nconst ELEMENT_HEADER_LOGO = 'element-header-logo';\nconst ELEMENT_HEADER_MENU_BUTTON = 'element-header-menu-button';\nconst ELEMENT_HEADER_MENU_CTA = 'element-header-menu-cta';\nconst ELEMENT_HEADER_MENU_SEARCH = 'element-header-menu-search';\nconst ELEMENT_HEADER_NAVIGATION_ROW = 'element-header-navigation-row';\nconst ELEMENT_HEADER_UTILITY_ROW = 'element-header-utility-row';\n\nconst OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;\nconst OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;\nconst OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;\nconst OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;\nconst OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;\n\nconst OverwriteStickyStyles = `\n ${OVERWRITE_STICKY_CONTAINER} {\n padding: ${token.spacing.xs} 0;\n }\n\n .${ELEMENT_HEADER_WRAPPER} {\n align-items: center;\n }\n\n ${OVERWRITE_STICKY_LOGO} img {\n max-height: 30px;\n }\n`;\n\nconst CtaStyles = `\n .${ELEMENT_HEADER_MENU_CTA} {\n color: ${token.color.white};\n font-weight: ${token.font.weight.bold};\n font-size: ${token.font.size.sm};\n padding: ${token.spacing.xs};\n background-color: ${token.color.red};\n transition: background .5s;\n white-space: nowrap;\n }\n\n .${ELEMENT_HEADER_MENU_CTA}:hover,\n .${ELEMENT_HEADER_MENU_CTA}:focus {\n background-color: ${token.color.redDark};\n }\n\n ${OVERWRITE_CTA_WRAPPER_CTA} {\n margin-top: -${token.spacing.min};\n }\n`;\n\nconst NavigationColumnStyles = `\n @media (max-width: 1240px) {\n .${ELEMENT_HEADER_NAVIGATION_COLUMN} {\n display: none;\n }\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} {\n display: grid;\n grid-auto-flow: column;\n }\n\n ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {\n padding-top: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > * {\n display: block;\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {\n margin-left: ${token.spacing.md};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} svg {\n width: 24px;\n height: 24px;\n fill: ${token.color.black};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} {\n display: flex;\n justify-content: flex-end;\n margin-bottom: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {\n display: flex;\n justify-content: flex-end;\n gap: ${token.spacing.md};\n }\n`;\n\nconst LogoColumnStyles = `\n .${ELEMENT_HEADER_LOGO_COLUMN} {\n align-items: center;\n display: flex;\n justify-content: flex-start;\n position: relative;\n width: 100%;\n max-width: 400px;\n }\n\n .${ELEMENT_HEADER_MENU_BUTTON} {\n border-right: 1px solid ${token.color.gray.light};\n padding-right: ${token.spacing.min};\n margin-right: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_LOGO} {\n display: grid;\n justify-content: flex-start;\n max-width: 350px;\n }\n\n .${ELEMENT_HEADER_LOGO}:has(img[src*=\".svg\"]) img {\n height: 240px;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n line-height: 1.05em;\n width: 100%;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"]`]: typography.sans.extraLarge,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"] *`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n font-weight: 700;\n }\n\n .${ELEMENT_HEADER_LOGO} img {\n width: 100%;\n max-height: 48px;\n max-width: 190px;\n }\n\n @media (min-width: ${token.media.breakpoints.tablet.min}) {\n .${ELEMENT_HEADER_LOGO} img {\n max-width: 240px;\n }\n }\n`;\n\nconst WrapperStyles = `\n .${ELEMENT_HEADER_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: ${token.spacing.lg};\n z-index: 999;\n }\n`;\n\nconst STYLES_NAVIGATION_HEADER = `\n .${ELEMENT_HEADER_CONTAINTER} {\n background-color: ${token.color.white};\n display: block;\n padding: ${token.spacing.md} 0;\n position: relative;\n transition: padding ${ANIMATION_TIME}ms;\n }\n\n ${WrapperStyles}\n ${LogoColumnStyles}\n ${NavigationColumnStyles}\n ${CtaStyles}\n ${OverwriteStickyStyles}\n ${NavigationItem.Styles}\n ${MenuButton.Styles}\n`;\n\nconst CreateSearchLink = ({ searchUrl }: TypeSearchLink) => {\n if (!searchUrl) return null;\n\n const searchLink = document.createElement('a');\n\n searchLink.href = searchUrl;\n searchLink.ariaLabel = 'Visit the search page';\n searchLink.innerHTML = iconSearch;\n searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);\n\n return searchLink;\n};\n\nconst CreateCtaLink = ({ ctaUrl, ctaText }: TypeCtaLink) => {\n if (!ctaUrl || !ctaText) return null;\n\n const cta = document.createElement('a');\n\n cta.innerHTML = ctaText;\n if (isExternalUrl(ctaUrl)) {\n cta.setAttribute('target', '_blank');\n }\n cta.setAttribute('href', ctaUrl);\n cta.classList.add(ELEMENT_HEADER_MENU_CTA);\n\n return cta;\n};\n\nconst CreateNavigationColumn = ({\n utilityRow,\n navItems,\n searchUrl,\n ctaText,\n ctaUrl,\n}: TypeNavRow) => {\n if (!navItems) return;\n\n const navColumnContainer = document.createElement('div');\n const utilityRowContainer = document.createElement('div');\n const navRowContainer = document.createElement('div');\n const searchLink = CreateSearchLink({\n searchUrl,\n });\n const ctaLink = CreateCtaLink({ ctaText, ctaUrl });\n\n if (utilityRow) {\n utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);\n utilityRowContainer.appendChild(utilityRow);\n navColumnContainer.appendChild(utilityRowContainer);\n }\n\n navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);\n\n navItems.forEach((item) => {\n navRowContainer.appendChild(item);\n });\n if (searchLink) navRowContainer.appendChild(searchLink);\n if (ctaLink) navRowContainer.appendChild(ctaLink);\n\n navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);\n navColumnContainer.appendChild(navRowContainer);\n\n return navColumnContainer;\n};\n\nconst CreateLogoColumn = ({ logo, eventOpen }: TypeLogoRequirments) => {\n const container = document.createElement('div');\n\n if (eventOpen) {\n const menuButton = MenuButton.CreateElement({ eventOpen });\n menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);\n container.appendChild(menuButton);\n }\n\n if (logo) {\n const childrenText = Array.from(logo.children).reduce((acc, child) => {\n if (child.nodeName === 'IMG') return acc;\n\n if (child.textContent) {\n return acc + child.textContent.length;\n }\n\n return acc;\n }, 0);\n logo.classList.add(ELEMENT_HEADER_LOGO);\n\n if (childrenText < 30) {\n logo.setAttribute('size', 'large');\n }\n\n container.appendChild(logo);\n }\n container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);\n return container;\n};\n\nconst CreateNavigationHeader = (props: TypeHeaderRequirements) => {\n const { ctaUrl, ctaText } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const logoColumn = CreateLogoColumn(props);\n const navigationColumn = CreateNavigationColumn(props);\n const eventSticky = ({ isSticky }: { isSticky: boolean }) => {\n const utility = container.querySelector(\n `.${ELEMENT_HEADER_UTILITY_ROW}`,\n ) as HTMLDivElement;\n\n if (isSticky && isElementSticky) return;\n\n if (isSticky) {\n isElementSticky = true;\n container.setAttribute(ATTRIBUTE_STICKY, 'true');\n\n if (utility) {\n utility.style.display = 'none';\n }\n }\n if (!isSticky) {\n isElementSticky = false;\n container.removeAttribute(ATTRIBUTE_STICKY);\n\n if (utility) {\n utility.style.display = 'block';\n }\n }\n };\n let isElementSticky = false;\n\n wrapper.classList.add(ELEMENT_HEADER_WRAPPER);\n wrapper.appendChild(logoColumn);\n\n if (navigationColumn) wrapper.appendChild(navigationColumn);\n if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, 'true');\n\n container.appendChild(wrapper);\n container.classList.add(ELEMENT_HEADER_CONTAINTER);\n\n declaration.classList.add(ELEMENT_HEADER_DECLARATION);\n declaration.appendChild(container);\n\n return {\n element: declaration,\n events: {\n sticky: eventSticky,\n },\n };\n};\n\nexport default {\n CreateElement: CreateNavigationHeader,\n Styles: STYLES_NAVIGATION_HEADER,\n};\n"],"names":["token","jssToCSS","typography","NavigationItem","MenuButton","iconSearch","isExternalUrl"],"mappings":"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"}
package/dist/composite/navigation/header.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as token from "@universityofmaryland/web-styles-library/token";
2
2
  import * as typography from "@universityofmaryland/web-styles-library/typography";
3
3
  import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
4
+ import { isExternalUrl } from "@universityofmaryland/web-utilities-library/network";
4
5
  import { search } from "@universityofmaryland/web-icons-library/search";
5
6
  import MenuButton from "./elements/menu-button/index.mjs";
6
7
  import NavigationItem from "./elements/item/index.mjs";
@@ -212,7 +213,9 @@ const CreateCtaLink = ({ ctaUrl, ctaText }) => {
212
213
  if (!ctaUrl || !ctaText) return null;
213
214
  const cta = document.createElement("a");
214
215
  cta.innerHTML = ctaText;
215
- cta.setAttribute("target", "_blank");
216
+ if (isExternalUrl(ctaUrl)) {
217
+ cta.setAttribute("target", "_blank");
218
+ }
216
219
  cta.setAttribute("href", ctaUrl);
217
220
  cta.classList.add(ELEMENT_HEADER_MENU_CTA);
218
221
  return cta;
package/dist/composite/navigation/header.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.mjs","sources":["../../../source/composite/navigation/header.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { search as iconSearch } from '@universityofmaryland/web-icons-library/search';\nimport MenuButton from './elements/menu-button';\nimport NavigationItem from './elements/item';\n\ntype TypeLogoRequirments = {\n logo?: HTMLElement | null;\n eventOpen?: () => void;\n};\n\ntype TypeSearchLink = {\n searchUrl: string | null;\n};\n\ntype TypeCtaLink = {\n ctaUrl: string | null;\n ctaText: string | null;\n};\n\ntype TypeNavRow = TypeSearchLink &\n TypeCtaLink & {\n utilityRow?: HTMLElement | null;\n navItems?: HTMLElement[];\n };\n\ntype TypeHeaderRequirements = TypeLogoRequirments & TypeNavRow;\n\nconst ANIMATION_TIME = 500;\n\nconst ATTRIBUTE_STICKY = 'data-sticky';\nconst ATTRIBUTE_CTA = 'data-cta';\n\nconst IS_STICKY = `[${ATTRIBUTE_STICKY}=\"true\"]`;\nconst IS_CTA = `[${ATTRIBUTE_CTA}=\"true\"]`;\n\nconst ELEMENT_HEADER_DECLARATION = 'element-header-declaration';\nconst ELEMENT_HEADER_CONTAINTER = 'element-header-container';\nconst ELEMENT_HEADER_WRAPPER = 'element-header-wrapper';\nconst ELEMENT_HEADER_LOGO_COLUMN = 'element-header-logo-column';\nconst ELEMENT_HEADER_NAVIGATION_COLUMN = 'element-header-navigation-column';\nconst ELEMENT_HEADER_LOGO = 'element-header-logo';\nconst ELEMENT_HEADER_MENU_BUTTON = 'element-header-menu-button';\nconst ELEMENT_HEADER_MENU_CTA = 'element-header-menu-cta';\nconst ELEMENT_HEADER_MENU_SEARCH = 'element-header-menu-search';\nconst ELEMENT_HEADER_NAVIGATION_ROW = 'element-header-navigation-row';\nconst ELEMENT_HEADER_UTILITY_ROW = 'element-header-utility-row';\n\nconst OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;\nconst OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;\nconst OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;\nconst OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;\nconst OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;\n\nconst OverwriteStickyStyles = `\n ${OVERWRITE_STICKY_CONTAINER} {\n padding: ${token.spacing.xs} 0;\n }\n\n .${ELEMENT_HEADER_WRAPPER} {\n align-items: center;\n }\n\n ${OVERWRITE_STICKY_LOGO} img {\n max-height: 30px;\n }\n`;\n\nconst CtaStyles = `\n .${ELEMENT_HEADER_MENU_CTA} {\n color: ${token.color.white};\n font-weight: ${token.font.weight.bold};\n font-size: ${token.font.size.sm};\n padding: ${token.spacing.xs};\n background-color: ${token.color.red};\n transition: background .5s;\n white-space: nowrap;\n }\n\n .${ELEMENT_HEADER_MENU_CTA}:hover,\n .${ELEMENT_HEADER_MENU_CTA}:focus {\n background-color: ${token.color.redDark};\n }\n\n ${OVERWRITE_CTA_WRAPPER_CTA} {\n margin-top: -${token.spacing.min};\n }\n`;\n\nconst NavigationColumnStyles = `\n @media (max-width: 1240px) {\n .${ELEMENT_HEADER_NAVIGATION_COLUMN} {\n display: none;\n }\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} {\n display: grid;\n grid-auto-flow: column;\n }\n\n ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {\n padding-top: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > * {\n display: block;\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {\n margin-left: ${token.spacing.md};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} svg {\n width: 24px;\n height: 24px;\n fill: ${token.color.black};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} {\n display: flex;\n justify-content: flex-end;\n margin-bottom: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {\n display: flex;\n justify-content: flex-end;\n gap: ${token.spacing.md};\n }\n`;\n\nconst LogoColumnStyles = `\n .${ELEMENT_HEADER_LOGO_COLUMN} {\n align-items: center;\n display: flex;\n justify-content: flex-start;\n position: relative;\n width: 100%;\n max-width: 400px;\n }\n\n .${ELEMENT_HEADER_MENU_BUTTON} {\n border-right: 1px solid ${token.color.gray.light};\n padding-right: ${token.spacing.min};\n margin-right: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_LOGO} {\n display: grid;\n justify-content: flex-start;\n max-width: 350px;\n }\n\n .${ELEMENT_HEADER_LOGO}:has(img[src*=\".svg\"]) img {\n height: 240px;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n line-height: 1.05em;\n width: 100%;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"]`]: typography.sans.extraLarge,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"] *`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n font-weight: 700;\n }\n\n .${ELEMENT_HEADER_LOGO} img {\n width: 100%;\n max-height: 48px;\n max-width: 190px;\n }\n\n @media (min-width: ${token.media.breakpoints.tablet.min}) {\n .${ELEMENT_HEADER_LOGO} img {\n max-width: 240px;\n }\n }\n`;\n\nconst WrapperStyles = `\n .${ELEMENT_HEADER_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: ${token.spacing.lg};\n z-index: 999;\n }\n`;\n\nconst STYLES_NAVIGATION_HEADER = `\n .${ELEMENT_HEADER_CONTAINTER} {\n background-color: ${token.color.white};\n display: block;\n padding: ${token.spacing.md} 0;\n position: relative;\n transition: padding ${ANIMATION_TIME}ms;\n }\n\n ${WrapperStyles}\n ${LogoColumnStyles}\n ${NavigationColumnStyles}\n ${CtaStyles}\n ${OverwriteStickyStyles}\n ${NavigationItem.Styles}\n ${MenuButton.Styles}\n`;\n\nconst CreateSearchLink = ({ searchUrl }: TypeSearchLink) => {\n if (!searchUrl) return null;\n\n const searchLink = document.createElement('a');\n\n searchLink.href = searchUrl;\n searchLink.ariaLabel = 'Visit the search page';\n searchLink.innerHTML = iconSearch;\n searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);\n\n return searchLink;\n};\n\nconst CreateCtaLink = ({ ctaUrl, ctaText }: TypeCtaLink) => {\n if (!ctaUrl || !ctaText) return null;\n\n const cta = document.createElement('a');\n\n cta.innerHTML = ctaText;\n cta.setAttribute('target', '_blank');\n cta.setAttribute('href', ctaUrl);\n cta.classList.add(ELEMENT_HEADER_MENU_CTA);\n\n return cta;\n};\n\nconst CreateNavigationColumn = ({\n utilityRow,\n navItems,\n searchUrl,\n ctaText,\n ctaUrl,\n}: TypeNavRow) => {\n if (!navItems) return;\n\n const navColumnContainer = document.createElement('div');\n const utilityRowContainer = document.createElement('div');\n const navRowContainer = document.createElement('div');\n const searchLink = CreateSearchLink({\n searchUrl,\n });\n const ctaLink = CreateCtaLink({ ctaText, ctaUrl });\n\n if (utilityRow) {\n utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);\n utilityRowContainer.appendChild(utilityRow);\n navColumnContainer.appendChild(utilityRowContainer);\n }\n\n navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);\n\n navItems.forEach((item) => {\n navRowContainer.appendChild(item);\n });\n if (searchLink) navRowContainer.appendChild(searchLink);\n if (ctaLink) navRowContainer.appendChild(ctaLink);\n\n navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);\n navColumnContainer.appendChild(navRowContainer);\n\n return navColumnContainer;\n};\n\nconst CreateLogoColumn = ({ logo, eventOpen }: TypeLogoRequirments) => {\n const container = document.createElement('div');\n\n if (eventOpen) {\n const menuButton = MenuButton.CreateElement({ eventOpen });\n menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);\n container.appendChild(menuButton);\n }\n\n if (logo) {\n const childrenText = Array.from(logo.children).reduce((acc, child) => {\n if (child.nodeName === 'IMG') return acc;\n\n if (child.textContent) {\n return acc + child.textContent.length;\n }\n\n return acc;\n }, 0);\n logo.classList.add(ELEMENT_HEADER_LOGO);\n\n if (childrenText < 30) {\n logo.setAttribute('size', 'large');\n }\n\n container.appendChild(logo);\n }\n container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);\n return container;\n};\n\nconst CreateNavigationHeader = (props: TypeHeaderRequirements) => {\n const { ctaUrl, ctaText } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const logoColumn = CreateLogoColumn(props);\n const navigationColumn = CreateNavigationColumn(props);\n const eventSticky = ({ isSticky }: { isSticky: boolean }) => {\n const utility = container.querySelector(\n `.${ELEMENT_HEADER_UTILITY_ROW}`,\n ) as HTMLDivElement;\n\n if (isSticky && isElementSticky) return;\n\n if (isSticky) {\n isElementSticky = true;\n container.setAttribute(ATTRIBUTE_STICKY, 'true');\n\n if (utility) {\n utility.style.display = 'none';\n }\n }\n if (!isSticky) {\n isElementSticky = false;\n container.removeAttribute(ATTRIBUTE_STICKY);\n\n if (utility) {\n utility.style.display = 'block';\n }\n }\n };\n let isElementSticky = false;\n\n wrapper.classList.add(ELEMENT_HEADER_WRAPPER);\n wrapper.appendChild(logoColumn);\n\n if (navigationColumn) wrapper.appendChild(navigationColumn);\n if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, 'true');\n\n container.appendChild(wrapper);\n container.classList.add(ELEMENT_HEADER_CONTAINTER);\n\n declaration.classList.add(ELEMENT_HEADER_DECLARATION);\n declaration.appendChild(container);\n\n return {\n element: declaration,\n events: {\n sticky: eventSticky,\n },\n };\n};\n\nexport default {\n CreateElement: CreateNavigationHeader,\n Styles: STYLES_NAVIGATION_HEADER,\n};\n"],"names":["iconSearch"],"mappings":"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"}
1
+ {"version":3,"file":"header.mjs","sources":["../../../source/composite/navigation/header.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { isExternalUrl } from '@universityofmaryland/web-utilities-library/network';\nimport { search as iconSearch } from '@universityofmaryland/web-icons-library/search';\nimport MenuButton from './elements/menu-button';\nimport NavigationItem from './elements/item';\n\ntype TypeLogoRequirments = {\n logo?: HTMLElement | null;\n eventOpen?: () => void;\n};\n\ntype TypeSearchLink = {\n searchUrl: string | null;\n};\n\ntype TypeCtaLink = {\n ctaUrl: string | null;\n ctaText: string | null;\n};\n\ntype TypeNavRow = TypeSearchLink &\n TypeCtaLink & {\n utilityRow?: HTMLElement | null;\n navItems?: HTMLElement[];\n };\n\ntype TypeHeaderRequirements = TypeLogoRequirments & TypeNavRow;\n\nconst ANIMATION_TIME = 500;\n\nconst ATTRIBUTE_STICKY = 'data-sticky';\nconst ATTRIBUTE_CTA = 'data-cta';\n\nconst IS_STICKY = `[${ATTRIBUTE_STICKY}=\"true\"]`;\nconst IS_CTA = `[${ATTRIBUTE_CTA}=\"true\"]`;\n\nconst ELEMENT_HEADER_DECLARATION = 'element-header-declaration';\nconst ELEMENT_HEADER_CONTAINTER = 'element-header-container';\nconst ELEMENT_HEADER_WRAPPER = 'element-header-wrapper';\nconst ELEMENT_HEADER_LOGO_COLUMN = 'element-header-logo-column';\nconst ELEMENT_HEADER_NAVIGATION_COLUMN = 'element-header-navigation-column';\nconst ELEMENT_HEADER_LOGO = 'element-header-logo';\nconst ELEMENT_HEADER_MENU_BUTTON = 'element-header-menu-button';\nconst ELEMENT_HEADER_MENU_CTA = 'element-header-menu-cta';\nconst ELEMENT_HEADER_MENU_SEARCH = 'element-header-menu-search';\nconst ELEMENT_HEADER_NAVIGATION_ROW = 'element-header-navigation-row';\nconst ELEMENT_HEADER_UTILITY_ROW = 'element-header-utility-row';\n\nconst OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;\nconst OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;\nconst OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;\nconst OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;\nconst OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;\n\nconst OverwriteStickyStyles = `\n ${OVERWRITE_STICKY_CONTAINER} {\n padding: ${token.spacing.xs} 0;\n }\n\n .${ELEMENT_HEADER_WRAPPER} {\n align-items: center;\n }\n\n ${OVERWRITE_STICKY_LOGO} img {\n max-height: 30px;\n }\n`;\n\nconst CtaStyles = `\n .${ELEMENT_HEADER_MENU_CTA} {\n color: ${token.color.white};\n font-weight: ${token.font.weight.bold};\n font-size: ${token.font.size.sm};\n padding: ${token.spacing.xs};\n background-color: ${token.color.red};\n transition: background .5s;\n white-space: nowrap;\n }\n\n .${ELEMENT_HEADER_MENU_CTA}:hover,\n .${ELEMENT_HEADER_MENU_CTA}:focus {\n background-color: ${token.color.redDark};\n }\n\n ${OVERWRITE_CTA_WRAPPER_CTA} {\n margin-top: -${token.spacing.min};\n }\n`;\n\nconst NavigationColumnStyles = `\n @media (max-width: 1240px) {\n .${ELEMENT_HEADER_NAVIGATION_COLUMN} {\n display: none;\n }\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} {\n display: grid;\n grid-auto-flow: column;\n }\n\n ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {\n padding-top: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > * {\n display: block;\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {\n margin-left: ${token.spacing.md};\n }\n\n .${ELEMENT_HEADER_NAVIGATION_ROW} svg {\n width: 24px;\n height: 24px;\n fill: ${token.color.black};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} {\n display: flex;\n justify-content: flex-end;\n margin-bottom: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {\n display: flex;\n justify-content: flex-end;\n gap: ${token.spacing.md};\n }\n`;\n\nconst LogoColumnStyles = `\n .${ELEMENT_HEADER_LOGO_COLUMN} {\n align-items: center;\n display: flex;\n justify-content: flex-start;\n position: relative;\n width: 100%;\n max-width: 400px;\n }\n\n .${ELEMENT_HEADER_MENU_BUTTON} {\n border-right: 1px solid ${token.color.gray.light};\n padding-right: ${token.spacing.min};\n margin-right: ${token.spacing.sm};\n }\n\n .${ELEMENT_HEADER_LOGO} {\n display: grid;\n justify-content: flex-start;\n max-width: 350px;\n }\n\n .${ELEMENT_HEADER_LOGO}:has(img[src*=\".svg\"]) img {\n height: 240px;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n line-height: 1.05em;\n width: 100%;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"]`]: typography.sans.extraLarge,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_HEADER_LOGO}[size=\"large\"] *`]: typography.sans.extraLarge,\n },\n })}\n\n .${ELEMENT_HEADER_LOGO},\n .${ELEMENT_HEADER_LOGO} * {\n font-weight: 700;\n }\n\n .${ELEMENT_HEADER_LOGO} img {\n width: 100%;\n max-height: 48px;\n max-width: 190px;\n }\n\n @media (min-width: ${token.media.breakpoints.tablet.min}) {\n .${ELEMENT_HEADER_LOGO} img {\n max-width: 240px;\n }\n }\n`;\n\nconst WrapperStyles = `\n .${ELEMENT_HEADER_WRAPPER} {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: ${token.spacing.lg};\n z-index: 999;\n }\n`;\n\nconst STYLES_NAVIGATION_HEADER = `\n .${ELEMENT_HEADER_CONTAINTER} {\n background-color: ${token.color.white};\n display: block;\n padding: ${token.spacing.md} 0;\n position: relative;\n transition: padding ${ANIMATION_TIME}ms;\n }\n\n ${WrapperStyles}\n ${LogoColumnStyles}\n ${NavigationColumnStyles}\n ${CtaStyles}\n ${OverwriteStickyStyles}\n ${NavigationItem.Styles}\n ${MenuButton.Styles}\n`;\n\nconst CreateSearchLink = ({ searchUrl }: TypeSearchLink) => {\n if (!searchUrl) return null;\n\n const searchLink = document.createElement('a');\n\n searchLink.href = searchUrl;\n searchLink.ariaLabel = 'Visit the search page';\n searchLink.innerHTML = iconSearch;\n searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);\n\n return searchLink;\n};\n\nconst CreateCtaLink = ({ ctaUrl, ctaText }: TypeCtaLink) => {\n if (!ctaUrl || !ctaText) return null;\n\n const cta = document.createElement('a');\n\n cta.innerHTML = ctaText;\n if (isExternalUrl(ctaUrl)) {\n cta.setAttribute('target', '_blank');\n }\n cta.setAttribute('href', ctaUrl);\n cta.classList.add(ELEMENT_HEADER_MENU_CTA);\n\n return cta;\n};\n\nconst CreateNavigationColumn = ({\n utilityRow,\n navItems,\n searchUrl,\n ctaText,\n ctaUrl,\n}: TypeNavRow) => {\n if (!navItems) return;\n\n const navColumnContainer = document.createElement('div');\n const utilityRowContainer = document.createElement('div');\n const navRowContainer = document.createElement('div');\n const searchLink = CreateSearchLink({\n searchUrl,\n });\n const ctaLink = CreateCtaLink({ ctaText, ctaUrl });\n\n if (utilityRow) {\n utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);\n utilityRowContainer.appendChild(utilityRow);\n navColumnContainer.appendChild(utilityRowContainer);\n }\n\n navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);\n\n navItems.forEach((item) => {\n navRowContainer.appendChild(item);\n });\n if (searchLink) navRowContainer.appendChild(searchLink);\n if (ctaLink) navRowContainer.appendChild(ctaLink);\n\n navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);\n navColumnContainer.appendChild(navRowContainer);\n\n return navColumnContainer;\n};\n\nconst CreateLogoColumn = ({ logo, eventOpen }: TypeLogoRequirments) => {\n const container = document.createElement('div');\n\n if (eventOpen) {\n const menuButton = MenuButton.CreateElement({ eventOpen });\n menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);\n container.appendChild(menuButton);\n }\n\n if (logo) {\n const childrenText = Array.from(logo.children).reduce((acc, child) => {\n if (child.nodeName === 'IMG') return acc;\n\n if (child.textContent) {\n return acc + child.textContent.length;\n }\n\n return acc;\n }, 0);\n logo.classList.add(ELEMENT_HEADER_LOGO);\n\n if (childrenText < 30) {\n logo.setAttribute('size', 'large');\n }\n\n container.appendChild(logo);\n }\n container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);\n return container;\n};\n\nconst CreateNavigationHeader = (props: TypeHeaderRequirements) => {\n const { ctaUrl, ctaText } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const logoColumn = CreateLogoColumn(props);\n const navigationColumn = CreateNavigationColumn(props);\n const eventSticky = ({ isSticky }: { isSticky: boolean }) => {\n const utility = container.querySelector(\n `.${ELEMENT_HEADER_UTILITY_ROW}`,\n ) as HTMLDivElement;\n\n if (isSticky && isElementSticky) return;\n\n if (isSticky) {\n isElementSticky = true;\n container.setAttribute(ATTRIBUTE_STICKY, 'true');\n\n if (utility) {\n utility.style.display = 'none';\n }\n }\n if (!isSticky) {\n isElementSticky = false;\n container.removeAttribute(ATTRIBUTE_STICKY);\n\n if (utility) {\n utility.style.display = 'block';\n }\n }\n };\n let isElementSticky = false;\n\n wrapper.classList.add(ELEMENT_HEADER_WRAPPER);\n wrapper.appendChild(logoColumn);\n\n if (navigationColumn) wrapper.appendChild(navigationColumn);\n if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, 'true');\n\n container.appendChild(wrapper);\n container.classList.add(ELEMENT_HEADER_CONTAINTER);\n\n declaration.classList.add(ELEMENT_HEADER_DECLARATION);\n declaration.appendChild(container);\n\n return {\n element: declaration,\n events: {\n sticky: eventSticky,\n },\n };\n};\n\nexport default {\n CreateElement: CreateNavigationHeader,\n Styles: STYLES_NAVIGATION_HEADER,\n};\n"],"names":["iconSearch"],"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.5.0",
3
+ "version": "1.5.1",
4
4
  "description": "UMD Web Elements",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",