@universityofmaryland/web-elements-library 1.6.10 → 1.6.12

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
- [![Elements Version](https://img.shields.io/badge/Elements-v1.6.10-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
3
+ [![Elements Version](https://img.shields.io/badge/Elements-v1.6.12-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
 
@@ -3,12 +3,13 @@ interface BoxProps {
3
3
  hasBorder?: boolean;
4
4
  isThemeDark?: boolean;
5
5
  isTransparent?: boolean;
6
+ hasImage?: boolean;
6
7
  }
7
8
  export declare const image: ({ customStyles, children, hasBorder, isThemeDark, }: BoxProps & {
8
9
  children: ElementModel[];
9
10
  customStyles?: Record<string, any>;
10
11
  }) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
11
- export declare const textContainer: ({ children, customStyles, hasBorder, isThemeDark, isTransparent, }: BoxProps & {
12
+ export declare const textContainer: ({ children, customStyles, hasBorder, isThemeDark, isTransparent, hasImage, }: BoxProps & {
12
13
  customStyles?: Record<string, any>;
13
14
  children: ElementModel[];
14
15
  }) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC,kFAgDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,oEAM3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFA6BA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAyCA,CAAC"}
1
+ {"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC,kFAgDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,8EAO3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAiCA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAyCA,CAAC"}
@@ -53,16 +53,21 @@ const textContainer = ({
53
53
  customStyles = {},
54
54
  hasBorder = false,
55
55
  isThemeDark = false,
56
- isTransparent = false
56
+ isTransparent = false,
57
+ hasImage = true
57
58
  }) => {
58
59
  return new ElementBuilder().withClassName("layout-block-stacked-text").withStyles({
59
60
  element: {
60
61
  maxWidth: `${token.spacing.maxWidth.smallest}`,
61
62
  ...createMediaQuery("min-width", mediumBreakpointStart, {
62
- paddingTop: token.spacing.md
63
+ ...hasImage && {
64
+ paddingTop: token.spacing.md
65
+ }
63
66
  }),
64
67
  ...createMediaQuery("min-width", mediumBreakpointStart, {
65
- paddingTop: token.spacing.lg,
68
+ ...hasImage && {
69
+ paddingTop: token.spacing.lg
70
+ },
66
71
  ...hasBorder && {
67
72
  padding: token.spacing.md
68
73
  },
@@ -1 +1 @@
1
- {"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n createMediaQuery,\n createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: ElementModel[];\n customStyles?: Record<string, any>;\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-image')\n .withStyles({\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${assetElement.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.sm,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n }),\n\n ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n ...(hasBorder && {\n marginLeft: token.spacing.sm,\n }),\n }),\n\n ...customStyles,\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-text')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingTop: token.spacing.md,\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingTop: token.spacing.lg,\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-container')\n .withStyles({\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${token.color.gray.darker}`,\n }),\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n"],"names":["assetElement"],"mappings":"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"}
1
+ {"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n createMediaQuery,\n createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n hasImage?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: ElementModel[];\n customStyles?: Record<string, any>;\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-image')\n .withStyles({\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${assetElement.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.sm,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n }),\n\n ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n ...(hasBorder && {\n marginLeft: token.spacing.sm,\n }),\n }),\n\n ...customStyles,\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n hasImage = true,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-text')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n ...(hasImage && {\n paddingTop: token.spacing.md,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n ...(hasImage && {\n paddingTop: token.spacing.lg,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-container')\n .withStyles({\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${token.color.gray.darker}`,\n }),\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n"],"names":["assetElement"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFA8D7D,CAAC"}
1
+ {"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFA+D7D,CAAC"}
@@ -75,7 +75,8 @@ const createCompositeCardBlock = (props) => {
75
75
  children.push(
76
76
  textContainer({
77
77
  children: [createTextLockupSmallScaling(props)],
78
- ...sizingProps
78
+ ...sizingProps,
79
+ hasImage: !!image$1
79
80
  })
80
81
  );
81
82
  const composite = container({
@@ -1 +1 @@
1
- {"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n const {\n dateSign,\n hasBorder,\n hasEyebrowRibbon,\n image,\n imageLoading = 'lazy',\n isAligned,\n isThemeDark,\n isTransparent,\n newsId,\n } = props;\n const shouldImageBeFullWidth = hasEyebrowRibbon;\n const children: UMDElement[] = [];\n const sizingProps = {\n isThemeDark,\n isTransparent,\n hasBorder,\n };\n\n if (image) {\n children.push(\n layout.block.stacked.image({\n children: [\n assets.image.background({\n element: image,\n isScaled: true,\n isAspectStandard: isAligned,\n dateSign,\n imageLoading,\n }),\n ],\n customStyles: {\n ...(shouldImageBeFullWidth && {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginBottom: token.spacing.md,\n width: '100%',\n }),\n }),\n },\n ...sizingProps,\n }),\n );\n }\n\n children.push(\n layout.block.stacked.textContainer({\n children: [textLockup.smallScaling(props)],\n ...sizingProps,\n }),\n );\n\n const composite = layout.block.stacked.container({\n children,\n ...sizingProps,\n });\n\n if (newsId) {\n composite?.element.setAttribute('news-id', newsId);\n }\n\n return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}
1
+ {"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n const {\n dateSign,\n hasBorder,\n hasEyebrowRibbon,\n image,\n imageLoading = 'lazy',\n isAligned,\n isThemeDark,\n isTransparent,\n newsId,\n } = props;\n const shouldImageBeFullWidth = hasEyebrowRibbon;\n const children: UMDElement[] = [];\n const sizingProps = {\n isThemeDark,\n isTransparent,\n hasBorder,\n };\n\n if (image) {\n children.push(\n layout.block.stacked.image({\n children: [\n assets.image.background({\n element: image,\n isScaled: true,\n isAspectStandard: isAligned,\n dateSign,\n imageLoading,\n }),\n ],\n customStyles: {\n ...(shouldImageBeFullWidth && {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginBottom: token.spacing.md,\n width: '100%',\n }),\n }),\n },\n ...sizingProps,\n }),\n );\n }\n\n children.push(\n layout.block.stacked.textContainer({\n children: [textLockup.smallScaling(props)],\n ...sizingProps,\n hasImage: !!image,\n }),\n );\n\n const composite = layout.block.stacked.container({\n children,\n ...sizingProps,\n });\n\n if (newsId) {\n composite?.element.setAttribute('news-id', newsId);\n }\n\n return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,MACH,UAAU,CAAC,CAACJ;AAAAA,IAAA,CACb;AAAA,EAAA;AAGH,QAAM,YAAYK,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}
@@ -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;AAgc3C,eAAO,MAAM,6BAA6B;2BA9HL,WAAW;;CAiI/C,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;AAic3C,eAAO,MAAM,6BAA6B;2BA/HL,WAAW;;CAkI/C,CAAC"}
@@ -324,8 +324,14 @@ const CreateNavItemElement = (props) => (() => {
324
324
  }
325
325
  };
326
326
  const ShowDropdown = () => {
327
+ if (elementContainer.hasAttribute(ATTRIBUTE_SHOWING)) return;
327
328
  elementContainer.setAttribute(ATTRIBUTE_SHOWING, "");
328
329
  DropdownPositionPerViewPort();
330
+ focusCallback = handleKeyboardNavigation({
331
+ element: elementContainer,
332
+ action: () => HideDropdown(),
333
+ shadowDomContext: context
334
+ });
329
335
  };
330
336
  const HideDropdown = () => {
331
337
  elementContainer.removeAttribute(ATTRIBUTE_SHOWING);
@@ -336,11 +342,6 @@ const CreateNavItemElement = (props) => (() => {
336
342
  const EventButtonClick = () => {
337
343
  if (isShowing && dropdownLinksContainer) {
338
344
  ShowDropdown();
339
- focusCallback = handleKeyboardNavigation({
340
- element: elementContainer,
341
- action: () => HideDropdown(),
342
- shadowDomContext: context
343
- });
344
345
  setTimeout(() => {
345
346
  const firstElement = dropdownLinksContainer.querySelector(
346
347
  "a"
@@ -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 elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n DropdownPositionPerViewPort();\n };\n\n const HideDropdown = () => {\n elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n focusCallback();\n focusCallback = () => {};\n };\n\n const EventButtonClick = () => {\n if (isShowing && dropdownLinksContainer) {\n ShowDropdown();\n focusCallback = handleKeyboardNavigation({\n element: elementContainer,\n action: () => HideDropdown(),\n shadowDomContext: context,\n });\n\n setTimeout(() => {\n const firstElement = dropdownLinksContainer.querySelector(\n 'a',\n ) as HTMLAnchorElement;\n\n if (firstElement) firstElement.focus();\n }, 100);\n }\n\n if (!isShowing) HideDropdown();\n };\n\n const buttonClick = () => {\n isShowing = isShowing ? false : true;\n EventButtonClick();\n };\n\n // Load\n\n const linkContainer = CreatePrimaryLink({\n ...props,\n hasDropdown,\n buttonClick,\n navItemName,\n });\n\n elementContainer.addEventListener('mouseover', () => {\n isShowing = true;\n ShowDropdown();\n });\n\n elementContainer.addEventListener('mouseleave', () => {\n isShowing = false;\n HideDropdown();\n });\n\n setTimeout(() => {\n OnLoadDropdownSpans();\n }, 10);\n\n if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n elementContainer.appendChild(linkContainer);\n\n return elementContainer;\n })();\n\nexport 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 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 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAA6C,cAAc,EAAE,MAAM,UAAU,CAAC;AAIrF,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,yBAAyB,CAAC;AAsU7E,eAAO,MAAM,+BAA+B;2BAjKL,yBAAyB;;;;;;;;;;CAuK/D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,cAAc,EACf,MAAM,UAAU,CAAC;AAIlB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,yBAAyB,CAAC;AAuU7E,eAAO,MAAM,+BAA+B;2BAjKL,yBAAyB;;;;;;;;;;CAuK/D,CAAC"}
@@ -86,6 +86,7 @@ const SliderStyles = `
86
86
  top: 0;
87
87
  left: 0;
88
88
  width: 100%;
89
+ height: 100%;
89
90
  background-color: ${token.color.white};
90
91
  display: none;
91
92
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport { createCompositeNavigationSlides as Slides, TypeSlideProps } from './slides';\nimport { createCompositeNavigationSliderFirst as SlideFirst } from './slide-first';\nimport { createCompositeNavigationSliderAction as SlideAction } from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n primarySlideLinks?: HTMLElement | null;\n primarySlidesSecondaryLinks?: HTMLElement | null;\n primarySlideContent?: HTMLElement | null;\n childrenSlides?: HTMLElement | null;\n childrenSlideContent?: HTMLSlotElement[];\n displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n background-color: ${token.color.white};\n padding: ${token.spacing['2xl']} 0;\n width: calc(100vw - ${token.spacing['8xl']});\n max-width: 400px;\n min-width: 227px;\n }\n\n ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n padding: 0 ${token.spacing.md};\n }\n\n ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n display: block;\n }\n\n ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n padding-left: ${token.spacing.sm};\n }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n border-bottom: 1px solid ${token.color.gray.light};\n padding-bottom: ${token.spacing.md};\n margin-bottom: ${token.spacing.md};\n }\n\n ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n margin-bottom: 0;\n }\n\n ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n border-bottom: 1px solid ${token.color.gray.light};\n padding-bottom: ${token.spacing.md};\n margin-bottom: ${token.spacing.md};\n }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 8px;\n background-color: ${token.color.red};\n display: none;\n }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n .${ELEMENT_NAVIGATION_SLIDER} {\n position: relative;\n overflow: hidden;\n height: 100%;\n }\n\n .${ELEMENT_NAVIGATION_SLIDER} > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background-color: ${token.color.white};\n display: none;\n }\n\n .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n display: block;\n }\n`;\n\nconst SelectedLinkStyles = `\n .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n position: relative;\n }\n\n .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_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(#ffd200, #ffd200);\n }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n position: relative;\n height: 100%;\n cursor: default;\n }\n\n ${Slides.Styles}\n ${DecorativeLineStyles}\n ${SliderStyles}\n ${SelectedLinkStyles}\n ${OverwriteDisplayDrawer}\n ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n const { displayType } = props;\n const sliderContainer = document.createElement('div');\n const slider = document.createElement('div');\n const decorativeLine = document.createElement('div');\n const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n Slides.CreateElement({ ...props, slider });\n\n slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n sliderContainer.appendChild(decorativeLine);\n\n sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n sliderContainer.appendChild(slider);\n\n sliderContainer.addEventListener('click', (event) => {\n event.stopPropagation();\n });\n\n return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n (() => {\n const elementContainer = document.createElement('div');\n const getUpcomingSlide = () => {\n const upcomingSlide = elementContainer.querySelector(\n `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n ) as HTMLDivElement;\n\n return upcomingSlide;\n };\n const getUpcomingSlideParent = () => {\n const upcomingSlide = elementContainer.querySelector(\n `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n ) as HTMLDivElement;\n const parent = findParent({\n element: upcomingSlide,\n attr: ATTRIBUTE_DATA_SLIDE,\n });\n\n return parent;\n };\n const sizeContainer = ({\n withTransition = false,\n }: {\n withTransition?: boolean;\n }) => {\n let containerSize = 500;\n if (currentSlide) {\n const children = Array.from(currentSlide.children) as HTMLDivElement[];\n containerSize = children.reduce((acc, currentElement) => {\n return acc + currentElement.offsetHeight;\n }, 50);\n }\n\n elementContainer.style.height = `${containerSize}px`;\n if (withTransition)\n elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n setTimeout(() => {\n elementContainer.style.transition = 'none';\n }, ANIMATION_TIME);\n };\n const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n const activeSlide = elementContainer.querySelector(\n `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n ) as HTMLDivElement;\n const upcomingSlide = isRight\n ? getUpcomingSlideParent()\n : getUpcomingSlide();\n const slides = [activeSlide, upcomingSlide];\n\n if (!upcomingSlide) {\n console.error('Missing slide for slide event');\n return null;\n }\n const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n const animate = () => {\n let startPositionForUpcomingSlide = '100%';\n let transitionPosition = '-100%';\n\n if (isRight) {\n startPositionForUpcomingSlide = '-100%';\n transitionPosition = '100%';\n }\n\n upcomingSlide.style.left = startPositionForUpcomingSlide;\n upcomingSlide.style.display = 'block';\n\n setTimeout(() => {\n slides.forEach((slide) => {\n slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n slide.style.transform = `translateX(${transitionPosition})`;\n });\n setCurrentSlide({ element: upcomingSlide, withTransition: true });\n }, 100);\n\n setTimeout(() => {\n slides.forEach((slide) => {\n slide.style.transition = 'none';\n slide.style.transform = 'translateX(0)';\n slide.style.left = '0';\n slide.removeAttribute('style');\n });\n\n upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n if (firstLink) firstLink.focus();\n }, ANIMATION_TIME + 100);\n };\n\n if (!upcomingSlide || !activeSlide)\n throw new Error('Missing slide for slide event');\n\n animate();\n\n if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n setTimeout(() => {\n upcomingSlide.style.overflowY = `scroll`;\n upcomingSlide.style.height = `100%`;\n }, ANIMATION_TIME + 100);\n }\n };\n const setUpcomingSlide = (arg: string) => {\n upcomingSlideRef = arg;\n };\n const setCurrentSlide = ({\n element,\n withTransition = false,\n }: {\n element: HTMLElement;\n withTransition?: boolean;\n }) => {\n currentSlide = element;\n\n setTimeout(() => {\n sizeContainer({ withTransition });\n }, 100);\n };\n const eventSlideLeft = () => eventSlide({ isRight: false });\n const eventSlideRight = () => eventSlide({ isRight: true });\n const eventReize = () => {\n setTimeout(() => {\n sizeContainer({ withTransition: false });\n }, 200);\n };\n const GetContainer = () => elementContainer;\n let upcomingSlideRef: string | null = null;\n let currentSlide: HTMLElement | null = null;\n\n const children = CreateChildrenElements({\n ...props,\n GetContainer,\n eventSlideLeft,\n eventSlideRight,\n setUpcomingSlide,\n setCurrentSlide,\n ATTRIBUTE_CHILD_REF,\n ATTRIBUTE_PARENT_REF,\n ATTRIBUTE_DATA_SLIDE,\n ATTRIBUTE_ACTIVE_SLIDE,\n currentSlide,\n });\n\n elementContainer.appendChild(children);\n\n window.addEventListener(\n 'resize',\n debounce(() => {\n eventReize();\n }, 20),\n );\n\n return {\n container: elementContainer,\n events: {\n resize: eventReize,\n },\n };\n })();\n\nexport const createCompositeNavigationSlider = {\n CreateElement: CreateNavSliderElement,\n Styles: STYLES_NAV_SLIDER_ELEMENT,\n Elements: {\n slider: ELEMENT_NAVIGATION_SLIDER,\n },\n};\n"],"names":["Slides","SlideAction","SlideFirst","children"],"mappings":";;;;;;AAoBA,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAE/B,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;AAElC,MAAM,sCAAsC;AAC5C,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AAEvC,MAAM,oBAAoB,IAAI,sBAAsB,IAAI,mBAAmB;AAC3E,MAAM,sBAAsB,IAAI,sBAAsB,IAAI,yBAAyB;AAEnF,MAAM,qCAAqC,IAAI,mCAAmC,GAAG,iBAAiB;AACtG,MAAM,sCAAsC,IAAI,mCAAmC,GAAG,iBAAiB,KAAK,8BAA8B;AAC1I,MAAM,yCAAyC,IAAI,mCAAmC,GAAG,iBAAiB,KAAKA,gCAAO,SAAS,OAAO;AACtI,MAAM,4CAA4C,IAAI,mCAAmC,GAAG,iBAAiB,KAAKC,sCAAY,SAAS,SAAS;AAEhJ,MAAM,8CAA8C,IAAI,mCAAmC,GAAG,mBAAmB,KAAKA,sCAAY,SAAS,SAAS;AACpJ,MAAM,iDAAiD,IAAI,mCAAmC,GAAG,mBAAmB,KAAKC,qCAAW,SAAS,kBAAkB,KAAKD,sCAAY,SAAS,SAAS;AAClM,MAAM,sCAAsC,IAAI,mCAAmC,GAAG,mBAAmB,KAAKD,gCAAO,SAAS,QAAQ;AAGtI,MAAM,yBAAyB;AAAA,IAC3B,kCAAkC;AAAA,wBACd,MAAM,MAAM,KAAK;AAAA,eAC1B,MAAM,QAAQ,KAAK,CAAC;AAAA,0BACT,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1C,sCAAsC;AAAA,iBACzB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG7B,mCAAmC;AAAA;AAAA;AAAA;AAAA,IAInC,yCAAyC;AAAA,oBACzB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAKpC,MAAM,2BAA2B;AAAA,IAC7B,2CAA2C;AAAA,+BAChB,MAAM,MAAM,KAAK,KAAK;AAAA,sBAC/B,MAAM,QAAQ,EAAE;AAAA,qBACjB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,8CAA8C;AAAA;AAAA;AAAA;AAAA,IAI9C,mCAAmC;AAAA,+BACR,MAAM,MAAM,KAAK,KAAK;AAAA,sBAC/B,MAAM,QAAQ,EAAE;AAAA,qBACjB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAKrC,MAAM,uBAAuB;AAAA,KACxB,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMX,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAMvC,MAAM,eAAe;AAAA,KAChB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMzB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKN,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB,QAAQ,sBAAsB;AAAA;AAAA;AAAA;AAK5D,MAAM,qBAAqB;AAAA,KACtB,mCAAmC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA,KAIlE,mCAAmC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvE,MAAM,4BAA4B;AAAA,KAC7B,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpCA,gCAAO,MAAM;AAAA,IACb,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,sBAAsB;AAAA,IACtB,wBAAwB;AAAA;AAG5B,MAAM,yBAAyB,CAAC,UAA8B;AAC5D,QAAM,EAAE,gBAAgB;AACxB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,qBAAqB,gBAAgB;AAC3C,MAAI,qBAAqB;AAEzB,MAAI,mBAAoB,sBAAqB;AAE7CA,kCAAO,cAAc,EAAE,GAAG,OAAO,QAAQ;AAEzC,SAAO,UAAU,IAAI,yBAAyB;AAE9C,iBAAe,UAAU,IAAI,8BAA8B;AAC3D,kBAAgB,YAAY,cAAc;AAE1C,kBAAgB,aAAa,wBAAwB,kBAAkB;AACvE,kBAAgB,UAAU,IAAI,mCAAmC;AACjE,kBAAgB,YAAY,MAAM;AAElC,kBAAgB,iBAAiB,SAAS,CAAC,UAAU;AACnD,UAAM,gBAAA;AAAA,EACR,CAAC;AAED,SAAO;AACT;AAEA,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,mBAAmB,MAAM;AAC7B,UAAM,gBAAgB,iBAAiB;AAAA,MACrC,IAAI,oBAAoB,IAAI,gBAAgB;AAAA,IAAA;AAG9C,WAAO;AAAA,EACT;AACA,QAAM,yBAAyB,MAAM;AACnC,UAAM,gBAAgB,iBAAiB;AAAA,MACrC,IAAI,mBAAmB,IAAI,gBAAgB;AAAA,IAAA;AAE7C,UAAM,SAAS,WAAW;AAAA,MACxB,SAAS;AAAA,MACT,MAAM;AAAA,IAAA,CACP;AAED,WAAO;AAAA,EACT;AACA,QAAM,gBAAgB,CAAC;AAAA,IACrB,iBAAiB;AAAA,EAAA,MAGb;AACJ,QAAI,gBAAgB;AACpB,QAAI,cAAc;AAChB,YAAMG,YAAW,MAAM,KAAK,aAAa,QAAQ;AACjD,sBAAgBA,UAAS,OAAO,CAAC,KAAK,mBAAmB;AACvD,eAAO,MAAM,eAAe;AAAA,MAC9B,GAAG,EAAE;AAAA,IACP;AAEA,qBAAiB,MAAM,SAAS,GAAG,aAAa;AAChD,QAAI;AACF,uBAAiB,MAAM,aAAa,UAAU,cAAc;AAE9D,eAAW,MAAM;AACf,uBAAiB,MAAM,aAAa;AAAA,IACtC,GAAG,cAAc;AAAA,EACnB;AACA,QAAM,aAAa,CAAC,EAAE,UAAU,YAAmC;AACjE,UAAM,cAAc,iBAAiB;AAAA,MACnC,IAAI,sBAAsB;AAAA,IAAA;AAE5B,UAAM,gBAAgB,UAClB,uBAAA,IACA,iBAAA;AACJ,UAAM,SAAS,CAAC,aAAa,aAAa;AAE1C,QAAI,CAAC,eAAe;AAClB,cAAQ,MAAM,+BAA+B;AAC7C,aAAO;AAAA,IACT;AACA,UAAM,YAAY,cAAc,cAAc,GAAG;AAEjD,UAAM,UAAU,MAAM;AACpB,UAAI,gCAAgC;AACpC,UAAI,qBAAqB;AAEzB,UAAI,SAAS;AACX,wCAAgC;AAChC,6BAAqB;AAAA,MACvB;AAEA,oBAAc,MAAM,OAAO;AAC3B,oBAAc,MAAM,UAAU;AAE9B,iBAAW,MAAM;AACf,eAAO,QAAQ,CAAC,UAAU;AACxB,gBAAM,MAAM,aAAa,aAAa,cAAc;AACpD,gBAAM,MAAM,YAAY,cAAc,kBAAkB;AAAA,QAC1D,CAAC;AACD,wBAAgB,EAAE,SAAS,eAAe,gBAAgB,MAAM;AAAA,MAClE,GAAG,GAAG;AAEN,iBAAW,MAAM;AACf,eAAO,QAAQ,CAAC,UAAU;AACxB,gBAAM,MAAM,aAAa;AACzB,gBAAM,MAAM,YAAY;AACxB,gBAAM,MAAM,OAAO;AACnB,gBAAM,gBAAgB,OAAO;AAAA,QAC/B,CAAC;AAED,sBAAc,aAAa,wBAAwB,EAAE;AACrD,oBAAY,gBAAgB,sBAAsB;AAClD,YAAI,qBAAqB,MAAA;AAAA,MAC3B,GAAG,iBAAiB,GAAG;AAAA,IACzB;AAEA,QAAI,CAAC,iBAAiB,CAAC;AACrB,YAAM,IAAI,MAAM,+BAA+B;AAEjD,YAAA;AAEA,QAAI,cAAc,eAAe,iBAAiB,cAAc;AAC9D,iBAAW,MAAM;AACf,sBAAc,MAAM,YAAY;AAChC,sBAAc,MAAM,SAAS;AAAA,MAC/B,GAAG,iBAAiB,GAAG;AAAA,IACzB;AAAA,EACF;AACA,QAAM,mBAAmB,CAAC,QAAgB;AACxC,uBAAmB;AAAA,EACrB;AACA,QAAM,kBAAkB,CAAC;AAAA,IACvB;AAAA,IACA,iBAAiB;AAAA,EAAA,MAIb;AACJ,mBAAe;AAEf,eAAW,MAAM;AACf,oBAAc,EAAE,gBAAgB;AAAA,IAClC,GAAG,GAAG;AAAA,EACR;AACA,QAAM,iBAAiB,MAAM,WAAW,EAAE,SAAS,OAAO;AAC1D,QAAM,kBAAkB,MAAM,WAAW,EAAE,SAAS,MAAM;AAC1D,QAAM,aAAa,MAAM;AACvB,eAAW,MAAM;AACf,oBAAc,EAAE,gBAAgB,OAAO;AAAA,IACzC,GAAG,GAAG;AAAA,EACR;AACA,QAAM,eAAe,MAAM;AAC3B,MAAI,mBAAkC;AACtC,MAAI,eAAmC;AAEvC,QAAM,WAAW,uBAAuB;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,mBAAiB,YAAY,QAAQ;AAErC,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,iBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GAAA;AAEK,MAAM,kCAAkC;AAAA,EAC7C,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,QAAQ;AAAA,EAAA;AAEZ;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n createCompositeNavigationSlides as Slides,\n TypeSlideProps,\n} from './slides';\nimport { createCompositeNavigationSliderFirst as SlideFirst } from './slide-first';\nimport { createCompositeNavigationSliderAction as SlideAction } from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n primarySlideLinks?: HTMLElement | null;\n primarySlidesSecondaryLinks?: HTMLElement | null;\n primarySlideContent?: HTMLElement | null;\n childrenSlides?: HTMLElement | null;\n childrenSlideContent?: HTMLSlotElement[];\n displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n background-color: ${token.color.white};\n padding: ${token.spacing['2xl']} 0;\n width: calc(100vw - ${token.spacing['8xl']});\n max-width: 400px;\n min-width: 227px;\n }\n\n ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n padding: 0 ${token.spacing.md};\n }\n\n ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n display: block;\n }\n\n ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n padding-left: ${token.spacing.sm};\n }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n border-bottom: 1px solid ${token.color.gray.light};\n padding-bottom: ${token.spacing.md};\n margin-bottom: ${token.spacing.md};\n }\n\n ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n margin-bottom: 0;\n }\n\n ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n border-bottom: 1px solid ${token.color.gray.light};\n padding-bottom: ${token.spacing.md};\n margin-bottom: ${token.spacing.md};\n }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 8px;\n background-color: ${token.color.red};\n display: none;\n }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n .${ELEMENT_NAVIGATION_SLIDER} {\n position: relative;\n overflow: hidden;\n height: 100%;\n }\n\n .${ELEMENT_NAVIGATION_SLIDER} > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ${token.color.white};\n display: none;\n }\n\n .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n display: block;\n }\n`;\n\nconst SelectedLinkStyles = `\n .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n position: relative;\n }\n\n .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_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(#ffd200, #ffd200);\n }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n position: relative;\n height: 100%;\n cursor: default;\n }\n\n ${Slides.Styles}\n ${DecorativeLineStyles}\n ${SliderStyles}\n ${SelectedLinkStyles}\n ${OverwriteDisplayDrawer}\n ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n const { displayType } = props;\n const sliderContainer = document.createElement('div');\n const slider = document.createElement('div');\n const decorativeLine = document.createElement('div');\n const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n Slides.CreateElement({ ...props, slider });\n\n slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n sliderContainer.appendChild(decorativeLine);\n\n sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n sliderContainer.appendChild(slider);\n\n sliderContainer.addEventListener('click', (event) => {\n event.stopPropagation();\n });\n\n return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n (() => {\n const elementContainer = document.createElement('div');\n const getUpcomingSlide = () => {\n const upcomingSlide = elementContainer.querySelector(\n `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n ) as HTMLDivElement;\n\n return upcomingSlide;\n };\n const getUpcomingSlideParent = () => {\n const upcomingSlide = elementContainer.querySelector(\n `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n ) as HTMLDivElement;\n const parent = findParent({\n element: upcomingSlide,\n attr: ATTRIBUTE_DATA_SLIDE,\n });\n\n return parent;\n };\n const sizeContainer = ({\n withTransition = false,\n }: {\n withTransition?: boolean;\n }) => {\n let containerSize = 500;\n if (currentSlide) {\n const children = Array.from(currentSlide.children) as HTMLDivElement[];\n containerSize = children.reduce((acc, currentElement) => {\n return acc + currentElement.offsetHeight;\n }, 50);\n }\n\n elementContainer.style.height = `${containerSize}px`;\n if (withTransition)\n elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n setTimeout(() => {\n elementContainer.style.transition = 'none';\n }, ANIMATION_TIME);\n };\n const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n const activeSlide = elementContainer.querySelector(\n `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n ) as HTMLDivElement;\n const upcomingSlide = isRight\n ? getUpcomingSlideParent()\n : getUpcomingSlide();\n const slides = [activeSlide, upcomingSlide];\n\n if (!upcomingSlide) {\n console.error('Missing slide for slide event');\n return null;\n }\n const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n const animate = () => {\n let startPositionForUpcomingSlide = '100%';\n let transitionPosition = '-100%';\n\n if (isRight) {\n startPositionForUpcomingSlide = '-100%';\n transitionPosition = '100%';\n }\n\n upcomingSlide.style.left = startPositionForUpcomingSlide;\n upcomingSlide.style.display = 'block';\n\n setTimeout(() => {\n slides.forEach((slide) => {\n slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n slide.style.transform = `translateX(${transitionPosition})`;\n });\n setCurrentSlide({ element: upcomingSlide, withTransition: true });\n }, 100);\n\n setTimeout(() => {\n slides.forEach((slide) => {\n slide.style.transition = 'none';\n slide.style.transform = 'translateX(0)';\n slide.style.left = '0';\n slide.removeAttribute('style');\n });\n\n upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n if (firstLink) firstLink.focus();\n }, ANIMATION_TIME + 100);\n };\n\n if (!upcomingSlide || !activeSlide)\n throw new Error('Missing slide for slide event');\n\n animate();\n\n if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n setTimeout(() => {\n upcomingSlide.style.overflowY = `scroll`;\n upcomingSlide.style.height = `100%`;\n }, ANIMATION_TIME + 100);\n }\n };\n const setUpcomingSlide = (arg: string) => {\n upcomingSlideRef = arg;\n };\n const setCurrentSlide = ({\n element,\n withTransition = false,\n }: {\n element: HTMLElement;\n withTransition?: boolean;\n }) => {\n currentSlide = element;\n\n setTimeout(() => {\n sizeContainer({ withTransition });\n }, 100);\n };\n const eventSlideLeft = () => eventSlide({ isRight: false });\n const eventSlideRight = () => eventSlide({ isRight: true });\n const eventReize = () => {\n setTimeout(() => {\n sizeContainer({ withTransition: false });\n }, 200);\n };\n const GetContainer = () => elementContainer;\n let upcomingSlideRef: string | null = null;\n let currentSlide: HTMLElement | null = null;\n\n const children = CreateChildrenElements({\n ...props,\n GetContainer,\n eventSlideLeft,\n eventSlideRight,\n setUpcomingSlide,\n setCurrentSlide,\n ATTRIBUTE_CHILD_REF,\n ATTRIBUTE_PARENT_REF,\n ATTRIBUTE_DATA_SLIDE,\n ATTRIBUTE_ACTIVE_SLIDE,\n currentSlide,\n });\n\n elementContainer.appendChild(children);\n\n window.addEventListener(\n 'resize',\n debounce(() => {\n eventReize();\n }, 20),\n );\n\n return {\n container: elementContainer,\n events: {\n resize: eventReize,\n },\n };\n })();\n\nexport const createCompositeNavigationSlider = {\n CreateElement: CreateNavSliderElement,\n Styles: STYLES_NAV_SLIDER_ELEMENT,\n Elements: {\n slider: ELEMENT_NAVIGATION_SLIDER,\n },\n};\n"],"names":["Slides","SlideAction","SlideFirst","children"],"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.10",
3
+ "version": "1.6.12",
4
4
  "description": "UMD Web Elements",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -39,11 +39,11 @@
39
39
  },
40
40
  "dependencies": {
41
41
  "@types/postcss-js": "^4.0.4",
42
- "@universityofmaryland/web-icons-library": "^1.0.4",
43
- "@universityofmaryland/web-styles-library": "^1.8.6",
44
42
  "@universityofmaryland/web-builder-library": "^1.0.3",
43
+ "@universityofmaryland/web-token-library": "^1.0.1",
45
44
  "@universityofmaryland/web-utilities-library": "^1.0.5",
46
- "@universityofmaryland/web-token-library": "^1.0.1"
45
+ "@universityofmaryland/web-styles-library": "^1.8.8",
46
+ "@universityofmaryland/web-icons-library": "^1.0.4"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "@universityofmaryland/web-builder-library": "^1.0.0",