@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

package/dist/composite/accordion/item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.mjs","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', Utility.performance.debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["Utility.theme.convertJSSObjectToStyles","props","Utility.performance.debounce"],"mappings":"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"}

package/dist/composite/alert/elements/text.d.ts

@@ -15,5 +15,4 @@ export declare const CreateAlertText: (props: TypeAlertTextProps) => {
     element: HTMLDivElement;
     styles: string;
 };
-export default CreateAlertText;
 //# sourceMappingURL=text.d.ts.map

package/dist/composite/alert/elements/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/text.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AA8CF,eAAO,MAAM,eAAe,UAAW,kBAAkB;;;CA2CxD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/text.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AA8CF,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB;;;CA2CxD,CAAC"}

package/dist/composite/alert/elements/text.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../utilities/theme/index.js");
+require("../../../model/modifiers/index.js");
+const headline = require("../../../model/elements/headline.js");
+const richText = require("../../../model/elements/rich-text.js");
+const CONSTANTS = {
+  className: {
+    wrapper: "wrapper",
+    text: "text",
+    actions: "actions"
+  }
+};
+const { className } = CONSTANTS;
+const ctaStyles = `
+  * + .${className.actions} {
+    margin-top: ${Styles.token.spacing.sm};
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${className.actions}`]: Styles.layout.grid.inline.tabletRows
+  }
+})}
+`;
+const STYLES_ALERT_TEXT = `
+  .${className.wrapper} {
+     max-width: ${Styles.token.spacing.maxWidth.small};
+  }
+
+  ${ctaStyles}
+`;
+const headlineStyles = {
+  element: {
+    paddingRight: Styles.token.spacing.md
+  },
+  siblingAfter: {
+    marginTop: Styles.token.spacing.sm
+  },
+  subElement: {
+    color: "currentColor"
+  }
+};
+const richTextStyles = {
+  element: {
+    fontWeight: 500
+  },
+  siblingAfter: {
+    marginTop: Styles.token.spacing.sm
+  }
+};
+const CreateAlertText = (props) => {
+  const { headline: headline$1, text, actions, isThemeDark } = props;
+  const wrapper = document.createElement("div");
+  let styles = STYLES_ALERT_TEXT;
+  if (headline$1) {
+    const headlineModel = headline.sansLarge({
+      ...props,
+      elementStyles: headlineStyles,
+      element: headline$1
+    });
+    wrapper.appendChild(headlineModel.element);
+    styles += headlineModel.styles;
+  }
+  if (text) {
+    if (!isThemeDark) {
+      richTextStyles.element.color = Styles.token.color.gray.dark;
+    }
+    const textModel = richText.simple({
+      ...props,
+      elementStyles: richTextStyles,
+      element: text
+    });
+    wrapper.appendChild(textModel.element);
+    styles += textModel.styles;
+  }
+  if (actions) {
+    actions.classList.add(className.actions);
+    wrapper.appendChild(actions);
+  }
+  wrapper.classList.add(className.wrapper);
+  return {
+    element: wrapper,
+    styles
+  };
+};
+exports.CONSTANTS = CONSTANTS;
+exports.CreateAlertText = CreateAlertText;
+//# sourceMappingURL=text.js.map

package/dist/composite/alert/elements/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","layout","headline","ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;;;AAWO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACRA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAGC,OAAAA,OAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJF,aAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAcA,OAAAA,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAA,UAAEG,YAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAI,SAAS;AAEb,MAAIA,YAAU;AACZ,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAASD;AAAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,cAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQH,OAAAA,MAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYK,SAAAA,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,cAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ;;;"}

package/dist/composite/alert/elements/text.mjs

@@ -0,0 +1,90 @@
+import { token, layout } from "@universityofmaryland/web-styles-library";
+import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
+import "../../../model/modifiers/index.mjs";
+import { sansLarge } from "../../../model/elements/headline.mjs";
+import { simple } from "../../../model/elements/rich-text.mjs";
+const CONSTANTS = {
+  className: {
+    wrapper: "wrapper",
+    text: "text",
+    actions: "actions"
+  }
+};
+const { className } = CONSTANTS;
+const ctaStyles = `
+  * + .${className.actions} {
+    margin-top: ${token.spacing.sm};
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${className.actions}`]: layout.grid.inline.tabletRows
+  }
+})}
+`;
+const STYLES_ALERT_TEXT = `
+  .${className.wrapper} {
+     max-width: ${token.spacing.maxWidth.small};
+  }
+
+  ${ctaStyles}
+`;
+const headlineStyles = {
+  element: {
+    paddingRight: token.spacing.md
+  },
+  siblingAfter: {
+    marginTop: token.spacing.sm
+  },
+  subElement: {
+    color: "currentColor"
+  }
+};
+const richTextStyles = {
+  element: {
+    fontWeight: 500
+  },
+  siblingAfter: {
+    marginTop: token.spacing.sm
+  }
+};
+const CreateAlertText = (props) => {
+  const { headline, text, actions, isThemeDark } = props;
+  const wrapper = document.createElement("div");
+  let styles = STYLES_ALERT_TEXT;
+  if (headline) {
+    const headlineModel = sansLarge({
+      ...props,
+      elementStyles: headlineStyles,
+      element: headline
+    });
+    wrapper.appendChild(headlineModel.element);
+    styles += headlineModel.styles;
+  }
+  if (text) {
+    if (!isThemeDark) {
+      richTextStyles.element.color = token.color.gray.dark;
+    }
+    const textModel = simple({
+      ...props,
+      elementStyles: richTextStyles,
+      element: text
+    });
+    wrapper.appendChild(textModel.element);
+    styles += textModel.styles;
+  }
+  if (actions) {
+    actions.classList.add(className.actions);
+    wrapper.appendChild(actions);
+  }
+  wrapper.classList.add(className.wrapper);
+  return {
+    element: wrapper,
+    styles
+  };
+};
+export {
+  CONSTANTS,
+  CreateAlertText
+};
+//# sourceMappingURL=text.mjs.map

package/dist/composite/alert/elements/text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.mjs","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n\n"],"names":["Utility.theme.convertJSSObjectToStyles","ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;AAWO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACR,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BA,yBAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAG,OAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJ,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAc,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAI,SAAS;AAEb,MAAI,UAAU;AACZ,UAAM,gBAAgBC,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,cAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQ,MAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYC,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,cAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ;"}

package/dist/composite/alert/index.d.ts

@@ -1,3 +1,3 @@
-export { default as page } from './page';
-export { default as site } from './site';
+export { CreateAlertPageElement as page } from './page';
+export { CreateAlertSiteElement as site } from './site';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,EAAE,sBAAsB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/composite/alert/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const page = require("./page.js");
+const site = require("./site.js");
+exports.page = page.CreateAlertPageElement;
+exports.site = site.CreateAlertSiteElement;
+//# sourceMappingURL=index.js.map

package/dist/composite/alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/composite/alert/index.mjs

@@ -0,0 +1,7 @@
+import { CreateAlertPageElement } from "./page.mjs";
+import { CreateAlertSiteElement } from "./site.mjs";
+export {
+  CreateAlertPageElement as page,
+  CreateAlertSiteElement as site
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/alert/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/composite/alert/page.d.ts

@@ -11,5 +11,5 @@ export declare const CreateAlertPageElement: (props: TypeAlertProps) => {
     element: HTMLDivElement;
     styles: string;
 };
-export default CreateAlertPageElement;
+export {};
 //# sourceMappingURL=page.d.ts.map

package/dist/composite/alert/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAEA,OAAkB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEhE,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgHJ,eAAO,MAAM,sBAAsB,UAAW,cAAc;;;CAyBtD,CAAC;AAEP,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgC,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEnF,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CAyBtD,CAAC"}

package/dist/composite/alert/page.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../utilities/assets/icons.js");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+const animations = require("../../utilities/theme/animations.js");
+const text = require("./elements/text.js");
+const MEDUM = 500;
+const ATTRIBUTE_THEME = "theme";
+const THEME_DARK = "dark";
+const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
+const ELEMENT_NAME = "umd-element-alert-page";
+const ELEMENT_ALERT_PAGE_DECLARATION = "alert-page-declaration";
+const ELEMENT_ALERT_PAGE_CONTAINER = "alert-page-container";
+const ELEMENT_ALERT_PAGE_CLOSE_BUTTON = "alert-page-close-button";
+const ELEMENT_ALERT_PAGE_ICON = "alert-page-icon";
+const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;
+const OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;
+const OverwriteThemeStyles = `
+  ${OVERWRITE_THEME_DARK_CONTAINER} * {
+    color: ${Styles.token.color.white};
+  }
+
+  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {
+    fill: ${Styles.token.color.white};
+  }
+`;
+const ButtonStyles = `
+  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
+    position: absolute;
+    top: ${Styles.token.spacing.lg};
+    right: ${Styles.token.spacing.lg};
+  }
+
+  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {
+    fill: ${Styles.token.color.black};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
+    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
+      top: ${Styles.token.spacing.sm};
+      right: ${Styles.token.spacing.sm};
+    }
+  }
+`;
+const IconStyles = `
+  .${ELEMENT_ALERT_PAGE_ICON} {
+    display: block;
+    fill: ${Styles.token.color.gold};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
+    .${ELEMENT_ALERT_PAGE_ICON} {
+      position: absolute;
+      top: -20px;
+    }
+  }
+`;
+const STYLES_ALERT_PAGE_ELEMENT = `
+  .${ELEMENT_ALERT_PAGE_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+  }
+
+  .${ELEMENT_ALERT_PAGE_CONTAINER} {
+    display: flex;
+    position: relative;
+    padding: ${Styles.token.spacing.lg};
+    padding-right: ${Styles.token.spacing["2xl"]};
+    gap: ${Styles.token.spacing.lg};
+    border: solid 4px ${Styles.token.color.gold};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
+    .${ELEMENT_ALERT_PAGE_CONTAINER} {
+      padding-right: ${Styles.token.spacing.lg};
+    }
+  }
+
+  ${IconStyles}
+  ${ButtonStyles}
+  ${OverwriteThemeStyles}
+`;
+const CreateIcon = () => {
+  const iconWrapper = document.createElement("div");
+  let icon = icons.NOTIFICATION;
+  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);
+  iconWrapper.innerHTML = icon;
+  return iconWrapper;
+};
+const CreateCloseButton = ({ container }) => {
+  const closeButton = document.createElement("button");
+  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);
+  closeButton.innerHTML = icons.CLOSE_BUTTON;
+  closeButton.setAttribute("aria-label", "Close alert");
+  closeButton.addEventListener("click", () => {
+    animations.shrinkThenRemove({ container });
+  });
+  return closeButton;
+};
+const CreateAlertPageElement = (props) => (() => {
+  const { isShowIcon = true, isThemeDark, isThemeLight } = props;
+  const elementContainer = document.createElement("div");
+  const container = document.createElement("div");
+  const textWrapper = text.CreateAlertText(props);
+  let styles = STYLES_ALERT_PAGE_ELEMENT;
+  container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);
+  if (isShowIcon) container.appendChild(CreateIcon());
+  if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, "light");
+  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
+  container.appendChild(textWrapper.element);
+  styles += textWrapper.styles;
+  container.appendChild(CreateCloseButton({ container: elementContainer }));
+  elementContainer.appendChild(container);
+  elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);
+  return {
+    element: elementContainer,
+    styles
+  };
+})();
+exports.CreateAlertPageElement = CreateAlertPageElement;
+//# sourceMappingURL=page.js.map

package/dist/composite/alert/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { CreateAlertText as AlertText, TypeAlertTextProps } from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-alert-page';\nconst ELEMENT_ALERT_PAGE_DECLARATION = 'alert-page-declaration';\nconst ELEMENT_ALERT_PAGE_CONTAINER = 'alert-page-container';\nconst ELEMENT_ALERT_PAGE_CLOSE_BUTTON = 'alert-page-close-button';\nconst ELEMENT_ALERT_PAGE_ICON = 'alert-page-icon';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {\n    fill: ${token.color.white};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {\n    fill: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst IconStyles = `\n  .${ELEMENT_ALERT_PAGE_ICON} {\n    display: block;\n    fill: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_ICON} {\n      position: absolute;\n      top: -20px;\n    }\n  }\n`;\n\nconst STYLES_ALERT_PAGE_ELEMENT = `\n  .${ELEMENT_ALERT_PAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_PAGE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg};\n    padding-right: ${token.spacing['2xl']};\n    gap: ${token.spacing.lg};\n    border: solid 4px ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CONTAINER} {\n      padding-right: ${token.spacing.lg};\n    }\n  }\n\n  ${IconStyles}\n  ${ButtonStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst CreateIcon = () => {\n  const iconWrapper = document.createElement('div');\n  let icon = Utility.asset.icon.NOTIFICATION;\n\n  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);\n  iconWrapper.innerHTML = icon;\n\n  return iconWrapper;\n};\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.CLOSE_BUTTON;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    Utility.theme.animations.shrinkThenRemove({ container });\n  });\n\n  return closeButton;\n};\n\nexport const CreateAlertPageElement = (props: TypeAlertProps) =>\n  (() => {\n    const { isShowIcon = true, isThemeDark, isThemeLight } = props;\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const textWrapper = AlertText(props);\n    let styles = STYLES_ALERT_PAGE_ELEMENT;\n\n    container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);\n    if (isShowIcon) container.appendChild(CreateIcon());\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    container.appendChild(textWrapper.element);\n    styles += textWrapper.styles;\n\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["token","Utility.asset.icon.NOTIFICATION","Utility.asset.icon.CLOSE_BUTTON","Utility.theme.animations.shrinkThenRemove","AlertText"],"mappings":"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"}

package/dist/composite/alert/page.mjs

@@ -0,0 +1,123 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { NOTIFICATION, CLOSE_BUTTON } from "../../utilities/assets/icons.mjs";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../node_modules/postcss-js/index.mjs";
+import { shrinkThenRemove } from "../../utilities/theme/animations.mjs";
+import { CreateAlertText } from "./elements/text.mjs";
+const MEDUM = 500;
+const ATTRIBUTE_THEME = "theme";
+const THEME_DARK = "dark";
+const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
+const ELEMENT_NAME = "umd-element-alert-page";
+const ELEMENT_ALERT_PAGE_DECLARATION = "alert-page-declaration";
+const ELEMENT_ALERT_PAGE_CONTAINER = "alert-page-container";
+const ELEMENT_ALERT_PAGE_CLOSE_BUTTON = "alert-page-close-button";
+const ELEMENT_ALERT_PAGE_ICON = "alert-page-icon";
+const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;
+const OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;
+const OverwriteThemeStyles = `
+  ${OVERWRITE_THEME_DARK_CONTAINER} * {
+    color: ${token.color.white};
+  }
+
+  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {
+    fill: ${token.color.white};
+  }
+`;
+const ButtonStyles = `
+  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
+    position: absolute;
+    top: ${token.spacing.lg};
+    right: ${token.spacing.lg};
+  }
+
+  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {
+    fill: ${token.color.black};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
+    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
+      top: ${token.spacing.sm};
+      right: ${token.spacing.sm};
+    }
+  }
+`;
+const IconStyles = `
+  .${ELEMENT_ALERT_PAGE_ICON} {
+    display: block;
+    fill: ${token.color.gold};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
+    .${ELEMENT_ALERT_PAGE_ICON} {
+      position: absolute;
+      top: -20px;
+    }
+  }
+`;
+const STYLES_ALERT_PAGE_ELEMENT = `
+  .${ELEMENT_ALERT_PAGE_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+  }
+
+  .${ELEMENT_ALERT_PAGE_CONTAINER} {
+    display: flex;
+    position: relative;
+    padding: ${token.spacing.lg};
+    padding-right: ${token.spacing["2xl"]};
+    gap: ${token.spacing.lg};
+    border: solid 4px ${token.color.gold};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
+    .${ELEMENT_ALERT_PAGE_CONTAINER} {
+      padding-right: ${token.spacing.lg};
+    }
+  }
+
+  ${IconStyles}
+  ${ButtonStyles}
+  ${OverwriteThemeStyles}
+`;
+const CreateIcon = () => {
+  const iconWrapper = document.createElement("div");
+  let icon = NOTIFICATION;
+  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);
+  iconWrapper.innerHTML = icon;
+  return iconWrapper;
+};
+const CreateCloseButton = ({ container }) => {
+  const closeButton = document.createElement("button");
+  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);
+  closeButton.innerHTML = CLOSE_BUTTON;
+  closeButton.setAttribute("aria-label", "Close alert");
+  closeButton.addEventListener("click", () => {
+    shrinkThenRemove({ container });
+  });
+  return closeButton;
+};
+const CreateAlertPageElement = (props) => (() => {
+  const { isShowIcon = true, isThemeDark, isThemeLight } = props;
+  const elementContainer = document.createElement("div");
+  const container = document.createElement("div");
+  const textWrapper = CreateAlertText(props);
+  let styles = STYLES_ALERT_PAGE_ELEMENT;
+  container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);
+  if (isShowIcon) container.appendChild(CreateIcon());
+  if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, "light");
+  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
+  container.appendChild(textWrapper.element);
+  styles += textWrapper.styles;
+  container.appendChild(CreateCloseButton({ container: elementContainer }));
+  elementContainer.appendChild(container);
+  elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);
+  return {
+    element: elementContainer,
+    styles
+  };
+})();
+export {
+  CreateAlertPageElement
+};
+//# sourceMappingURL=page.mjs.map

package/dist/composite/alert/page.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.mjs","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { CreateAlertText as AlertText, TypeAlertTextProps } from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-alert-page';\nconst ELEMENT_ALERT_PAGE_DECLARATION = 'alert-page-declaration';\nconst ELEMENT_ALERT_PAGE_CONTAINER = 'alert-page-container';\nconst ELEMENT_ALERT_PAGE_CLOSE_BUTTON = 'alert-page-close-button';\nconst ELEMENT_ALERT_PAGE_ICON = 'alert-page-icon';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {\n    fill: ${token.color.white};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {\n    fill: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst IconStyles = `\n  .${ELEMENT_ALERT_PAGE_ICON} {\n    display: block;\n    fill: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_ICON} {\n      position: absolute;\n      top: -20px;\n    }\n  }\n`;\n\nconst STYLES_ALERT_PAGE_ELEMENT = `\n  .${ELEMENT_ALERT_PAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_PAGE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg};\n    padding-right: ${token.spacing['2xl']};\n    gap: ${token.spacing.lg};\n    border: solid 4px ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CONTAINER} {\n      padding-right: ${token.spacing.lg};\n    }\n  }\n\n  ${IconStyles}\n  ${ButtonStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst CreateIcon = () => {\n  const iconWrapper = document.createElement('div');\n  let icon = Utility.asset.icon.NOTIFICATION;\n\n  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);\n  iconWrapper.innerHTML = icon;\n\n  return iconWrapper;\n};\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.CLOSE_BUTTON;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    Utility.theme.animations.shrinkThenRemove({ container });\n  });\n\n  return closeButton;\n};\n\nexport const CreateAlertPageElement = (props: TypeAlertProps) =>\n  (() => {\n    const { isShowIcon = true, isThemeDark, isThemeLight } = props;\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const textWrapper = AlertText(props);\n    let styles = STYLES_ALERT_PAGE_ELEMENT;\n\n    container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);\n    if (isShowIcon) container.appendChild(CreateIcon());\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    container.appendChild(textWrapper.element);\n    styles += textWrapper.styles;\n\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["Utility.asset.icon.NOTIFICATION","Utility.asset.icon.CLOSE_BUTTON","Utility.theme.animations.shrinkThenRemove","AlertText"],"mappings":"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"}

package/dist/composite/alert/site.d.ts

@@ -9,5 +9,5 @@ export declare const CreateAlertSiteElement: (props: TypeAlertProps) => {
     element: HTMLDivElement;
     styles: string;
 };
-export default CreateAlertSiteElement;
+export {};
 //# sourceMappingURL=site.d.ts.map

package/dist/composite/alert/site.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/site.ts"],"names":[],"mappings":"AAEA,OAAkB,EAEhB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAsHJ,eAAO,MAAM,sBAAsB,UAAW,cAAc;;;CA2BtD,CAAC;AAEP,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/site.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAsHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CA2BtD,CAAC"}