@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

package/dist/atomic/actions/text.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const typography = require("@universityofmaryland/web-styles-library/typography");
 const media = require("@universityofmaryland/web-utilities-library/media");
 const dom = require("@universityofmaryland/web-utilities-library/dom");
 const controls = require("@universityofmaryland/web-icons-library/controls");
 const communication = require("@universityofmaryland/web-icons-library/communication");
 const files = require("@universityofmaryland/web-icons-library/files");
 const brand = require("@universityofmaryland/web-icons-library/brand");
-require("../../model/modifiers/index.js");
-const actions = require("../../model/elements/actions.js");
-require("@universityofmaryland/web-styles-library");
-const headline = require("../../model/elements/headline.js");
-const layout = require("../../model/elements/layout.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -31,18 +30,17 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
-const ICONS = {
-  email: communication.email,
-  newWindow: controls.external_link,
-  document: files.document,
-  fearless: brand.fearless
-};
-function insertIcon(element, svg) {
-  const icon = media.parseSvgString(svg);
-  if (icon) element.insertBefore(icon, element.firstChild);
-}
-function createLinkIcon(element, type) {
+const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const createLinkIcon = (element, type) => {
   const existingIcon = dom.extractIconElement({ element });
+  const ICONS = {
+    email: communication.email,
+    newWindow: controls.external_link,
+    document: files.document,
+    fearless: brand.fearless
+  };
   if (existingIcon) {
     element.insertBefore(existingIcon, element.firstChild);
     return;
@@ -51,6 +49,10 @@ function createLinkIcon(element, type) {
   const isExternalTab = element.getAttribute("target") === "_blank";
   const isDownload = element.getAttribute("download") !== null;
   const isMail = href?.includes("mailto:");
+  const insertIcon = (element2, svg) => {
+    const icon = media.parseSvgString(svg);
+    if (icon) element2.insertBefore(icon, element2.firstChild);
+  };
   if (isMail) {
     insertIcon(element, ICONS.email);
   } else if (isExternalTab) {
@@ -60,110 +62,86 @@ function createLinkIcon(element, type) {
   } else if (type === "secondary") {
     insertIcon(element, ICONS.fearless);
   }
-}
-function createElementWithStyle(actionFn, props) {
-  const result = actionFn({
-    element: props.element,
-    elementStyles: props.elementStyles
-  });
-  return { element: result.element, styles: result.styles };
-}
-function createElement(type, props) {
-  createLinkIcon(props.element, type);
-  const actions$1 = {
-    primary: {
-      default: actions.primary,
-      large: actions.primaryLarge
-    },
-    secondary: {
-      default: actions.secondary,
-      large: actions.secondaryLarge,
-      dark: actions.secondaryWhite,
-      gold: actions.secondaryGold
-    },
-    outline: {
-      default: actions.outline,
-      large: actions.outlineLarge,
-      dark: actions.outlineWhite
-    }
-  };
-  const typeActions = actions$1[type];
-  if (props.isThemeGold && typeActions.gold) {
-    return createElementWithStyle(typeActions.gold, props);
-  }
-  if (props.isThemeDark && typeActions.dark) {
-    return createElementWithStyle(typeActions.dark, props);
-  }
-  if (props.isSizeLarge && typeActions.large) {
-    return createElementWithStyle(typeActions.large, props);
-  }
-  return createElementWithStyle(typeActions.default, props);
-}
-const createPlainTextContainer = (props) => {
-  const { isTypeSecondary } = props;
-  return layout.gridStacked({
-    element: document.createElement("div"),
-    elementStyles: isTypeSecondary ? {} : { element: { alignItems: "center" } }
-  });
 };
-const createPlainText = (props) => {
-  const { isThemeDark, isTypeSecondary, plainText } = props;
-  const plainTextStyles = {
+const createPlainText = ({
+  isThemeDark,
+  isTypeSecondary,
+  plainText
+}) => {
+  if (!plainText) return null;
+  return new webBuilderLibrary.ElementBuilder(plainText).styled(
+    typography__namespace.sans.compose("min", { theme: isThemeDark ? "dark" : "light" })
+  ).withStyles({
     element: {
-      ...isThemeDark ? elementStyles__namespace.text.link.white : elementStyles__namespace.text.link.red,
-      marginTop: `${token__namespace.spacing.min}`
+      textDecoration: "underline",
+      ...isTypeSecondary && {
+        marginLeft: `${token__namespace.spacing.lg}`,
+        alignSelf: "baseline"
+      }
     }
-  };
-  const plainTextSecondaryStyles = {
-    element: {
-      ...isThemeDark ? elementStyles__namespace.text.link.white : elementStyles__namespace.text.link.red,
-      marginTop: `${token__namespace.spacing.min}`,
-      marginLeft: `${token__namespace.spacing.lg}`,
-      alignSelf: "baseline"
+  }).build();
+};
+const createElement = (type, props) => {
+  createLinkIcon(props.element, type);
+  const size = props.isSizeLarge ? "large" : "normal";
+  let styleObject;
+  if (type === "primary") {
+    styleObject = elementStyles__namespace.action.primary.composePrimary({ size });
+  } else if (type === "secondary") {
+    let color = "default";
+    if (props.isThemeGold) {
+      color = "gold";
+    } else if (props.isThemeDark) {
+      color = "white";
     }
-  };
-  if (plainText) {
-    return headline.sansMin({
-      element: plainText,
-      isThemeDark,
-      elementStyles: isTypeSecondary ? plainTextSecondaryStyles : plainTextStyles
+    styleObject = {
+      ...elementStyles__namespace.action.secondary.composeSecondary({
+        size,
+        color
+      }),
+      ...animation__namespace.line.slideUnderRed
+    };
+  } else if (type === "outline") {
+    const color = props.isThemeDark ? "white" : "default";
+    styleObject = elementStyles__namespace.action.outline.composeOutline({ size, color });
+  }
+  const element = new webBuilderLibrary.ElementBuilder(props.element).styled(styleObject).withStylesIf(!!props.elementStyles, props.elementStyles || {});
+  if (type === "secondary") {
+    element.withModifier((el) => {
+      dom.wrapTextNodeInSpan(el);
     });
   }
+  return element.build();
 };
 const primary = (props) => createElement("primary", props);
 const secondary = (props) => createElement("secondary", props);
 const outline = (props) => createElement("outline", props);
 const options = (props) => {
   const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;
-  const container = document.createElement("div");
-  let styles = "";
+  let actionModel;
   if (isTypePrimary) {
-    const result = primary(props);
-    container.appendChild(result.element);
-    styles = result.styles;
-  }
-  if (isTypeSecondary) {
-    const result = secondary(props);
-    container.appendChild(result.element);
-    styles = result.styles;
-  }
-  if (isTypeOutline) {
-    const result = outline(props);
-    container.appendChild(result.element);
-    styles = result.styles;
+    actionModel = primary(props);
+  } else if (isTypeSecondary) {
+    actionModel = secondary(props);
+  } else if (isTypeOutline) {
+    actionModel = outline(props);
   }
   if (plainText) {
-    const plainTextContainer = createPlainTextContainer(props);
     const plainTextElement = createPlainText(props);
-    if (!plainTextElement) return { element: container, styles };
-    plainTextContainer.element.innerHTML = container.innerHTML;
-    plainTextContainer.element.appendChild(plainTextElement.element);
-    container.innerHTML = "";
-    container.appendChild(plainTextContainer.element);
-    styles += plainTextContainer.styles;
-    styles += plainTextElement.styles;
+    if (plainTextElement) {
+      return new webBuilderLibrary.ElementBuilder().styled(layout__namespace.grid.stacked).withStyles({
+        element: {
+          display: "grid",
+          gap: token__namespace.spacing.sm,
+          ["& > *"]: {
+            marginBottom: "0 !important",
+            ...!isTypeSecondary && { justifySelf: "center" }
+          }
+        }
+      }).withChild(actionModel).withChild(plainTextElement).build();
+    }
   }
-  return { element: container, styles };
+  return new webBuilderLibrary.ElementBuilder().withChild(actionModel).build();
 };
 exports.options = options;
 exports.outline = outline;

package/dist/atomic/actions/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { parseSvgString } from '@universityofmaryland/web-utilities-library/media';\nimport { extractIconElement } from '@universityofmaryland/web-utilities-library/dom';\nimport { external_link as iconExternalLink } from '@universityofmaryland/web-icons-library/controls';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { document as iconDocument } from '@universityofmaryland/web-icons-library/files';\nimport { fearless as iconFearless } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\ntype ActionFunction = (props: ElementProps) => {\n  element: HTMLElement;\n  styles: string;\n};\n\ntype ActionVariants = {\n  default: ActionFunction;\n  large?: ActionFunction;\n  dark?: ActionFunction;\n  gold?: ActionFunction;\n};\n\ntype Actions = Record<ElementType, ActionVariants>;\n\nconst ICONS: Record<IconType, string> = {\n  email: iconEmail,\n  newWindow: iconExternalLink,\n  document: iconDocument,\n  fearless: iconFearless,\n};\n\nfunction insertIcon(element: HTMLElement, svg: string): void {\n  const icon = parseSvgString(svg);\n  if (icon) element.insertBefore(icon, element.firstChild);\n}\n\nfunction createLinkIcon(element: HTMLElement, type: ElementType): void {\n  const existingIcon = extractIconElement({ element });\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n}\n\nfunction createElementWithStyle(\n  actionFn: (props: ElementProps) => { element: HTMLElement; styles: string },\n  props: ElementProps,\n) {\n  const result = actionFn({\n    element: props.element,\n    elementStyles: props.elementStyles,\n  });\n  return { element: result.element, styles: result.styles };\n}\n\nfunction createElement(type: ElementType, props: ElementProps) {\n  createLinkIcon(props.element, type);\n\n  const actions: Actions = {\n    primary: {\n      default: ElementModel.actions.primary,\n      large: ElementModel.actions.primaryLarge,\n    },\n    secondary: {\n      default: ElementModel.actions.secondary,\n      large: ElementModel.actions.secondaryLarge,\n      dark: ElementModel.actions.secondaryWhite,\n      gold: ElementModel.actions.secondaryGold,\n    },\n    outline: {\n      default: ElementModel.actions.outline,\n      large: ElementModel.actions.outlineLarge,\n      dark: ElementModel.actions.outlineWhite,\n    },\n  };\n\n  const typeActions = actions[type];\n\n  if (props.isThemeGold && typeActions.gold) {\n    return createElementWithStyle(typeActions.gold, props);\n  }\n  if (props.isThemeDark && typeActions.dark) {\n    return createElementWithStyle(typeActions.dark, props);\n  }\n  if (props.isSizeLarge && typeActions.large) {\n    return createElementWithStyle(typeActions.large, props);\n  }\n  return createElementWithStyle(typeActions.default, props);\n}\n\nconst createPlainTextContainer = (props: OptionProps) => {\n  const { isTypeSecondary } = props;\n\n  return ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    elementStyles: isTypeSecondary ? {} : { element: { alignItems: 'center' } },\n  });\n};\n\nconst createPlainText = (props: OptionProps) => {\n  const { isThemeDark, isTypeSecondary, plainText } = props;\n  const plainTextStyles = {\n    element: {\n      ...(isThemeDark\n        ? elementStyles.text.link.white\n        : elementStyles.text.link.red),\n      marginTop: `${token.spacing.min}`,\n    },\n  };\n\n  const plainTextSecondaryStyles = {\n    element: {\n      ...(isThemeDark\n        ? elementStyles.text.link.white\n        : elementStyles.text.link.red),\n      marginTop: `${token.spacing.min}`,\n      marginLeft: `${token.spacing.lg}`,\n      alignSelf: 'baseline',\n    },\n  };\n\n  if (plainText) {\n    return ElementModel.headline.sansMin({\n      element: plainText,\n      isThemeDark,\n      elementStyles: isTypeSecondary\n        ? plainTextSecondaryStyles\n        : plainTextStyles,\n    });\n  }\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n  const container = document.createElement('div');\n  let styles = '';\n\n  if (isTypePrimary) {\n    const result = primary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeSecondary) {\n    const result = secondary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeOutline) {\n    const result = outline(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (plainText) {\n    const plainTextContainer = createPlainTextContainer(props);\n    const plainTextElement = createPlainText(props);\n    if (!plainTextElement) return { element: container, styles };\n\n    plainTextContainer.element.innerHTML = container.innerHTML;\n    plainTextContainer.element.appendChild(plainTextElement.element);\n    container.innerHTML = '';\n\n    container.appendChild(plainTextContainer.element);\n\n    styles += plainTextContainer.styles;\n    styles += plainTextElement.styles;\n  }\n\n  return { element: container, styles };\n};\n"],"names":["iconEmail","iconExternalLink","iconDocument","iconFearless","parseSvgString","extractIconElement","actions","ElementModel.actions.primary","ElementModel.actions.primaryLarge","ElementModel.actions.secondary","ElementModel.actions.secondaryLarge","ElementModel.actions.secondaryWhite","ElementModel.actions.secondaryGold","ElementModel.actions.outline","ElementModel.actions.outlineLarge","ElementModel.actions.outlineWhite","ElementModel.layout.gridStacked","elementStyles","token","ElementModel.headline.sansMin"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as layoutStyles from '@universityofmaryland/web-styles-library/layout';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { parseSvgString } from '@universityofmaryland/web-utilities-library/media';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport {\n  extractIconElement,\n  wrapTextNodeInSpan,\n} from '@universityofmaryland/web-utilities-library/dom';\nimport { external_link as iconExternalLink } from '@universityofmaryland/web-icons-library/controls';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { document as iconDocument } from '@universityofmaryland/web-icons-library/files';\nimport { fearless as iconFearless } from '@universityofmaryland/web-icons-library/brand';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\nconst createLinkIcon = (element: HTMLElement, type: ElementType): void => {\n  const existingIcon = extractIconElement({ element });\n  const ICONS: Record<IconType, string> = {\n    email: iconEmail,\n    newWindow: iconExternalLink,\n    document: iconDocument,\n    fearless: iconFearless,\n  };\n\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n  const insertIcon = (element: HTMLElement, svg: string): void => {\n    const icon = parseSvgString(svg);\n    if (icon) element.insertBefore(icon, element.firstChild);\n  };\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n};\n\nconst createPlainText = ({\n  isThemeDark,\n  isTypeSecondary,\n  plainText,\n}: Pick<OptionProps, 'isThemeDark' | 'isTypeSecondary' | 'plainText'>) => {\n  if (!plainText) return null;\n\n  return new ElementBuilder(plainText)\n    .styled(\n      typography.sans.compose('min', { theme: isThemeDark ? 'dark' : 'light' }),\n    )\n    .withStyles({\n      element: {\n        textDecoration: 'underline',\n\n        ...(isTypeSecondary && {\n          marginLeft: `${token.spacing.lg}`,\n          alignSelf: 'baseline',\n        }),\n      },\n    })\n    .build();\n};\n\nconst createElement = (type: ElementType, props: ElementProps) => {\n  createLinkIcon(props.element, type);\n\n  const size = props.isSizeLarge ? 'large' : 'normal';\n  let styleObject;\n\n  if (type === 'primary') {\n    styleObject = elementStyles.action.primary.composePrimary({ size });\n  } else if (type === 'secondary') {\n    let color: 'default' | 'white' | 'gold' = 'default';\n    if (props.isThemeGold) {\n      color = 'gold';\n    } else if (props.isThemeDark) {\n      color = 'white';\n    }\n    styleObject = {\n      ...elementStyles.action.secondary.composeSecondary({\n        size,\n        color,\n      }),\n      ...animation.line.slideUnderRed,\n    };\n  } else if (type === 'outline') {\n    const color = props.isThemeDark ? 'white' : 'default';\n    styleObject = elementStyles.action.outline.composeOutline({ size, color });\n  }\n\n  const element = new ElementBuilder(props.element)\n    .styled(styleObject!)\n    .withStylesIf(!!props.elementStyles, props.elementStyles || {});\n\n  if (type === 'secondary') {\n    element.withModifier((el) => {\n      wrapTextNodeInSpan(el);\n    });\n  }\n\n  return element.build();\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n\n  let actionModel;\n\n  if (isTypePrimary) {\n    actionModel = primary(props);\n  } else if (isTypeSecondary) {\n    actionModel = secondary(props);\n  } else if (isTypeOutline) {\n    actionModel = outline(props);\n  }\n\n  if (plainText) {\n    const plainTextElement = createPlainText(props);\n\n    if (plainTextElement) {\n      return new ElementBuilder()\n        .styled(layoutStyles.grid.stacked)\n        .withStyles({\n          element: {\n            display: 'grid',\n            gap: token.spacing.sm,\n\n            ['& > *']: {\n              marginBottom: '0 !important',\n              ...(!isTypeSecondary && { justifySelf: 'center' }),\n            },\n          },\n        })\n        .withChild(actionModel)\n        .withChild(plainTextElement)\n        .build();\n    }\n  }\n\n  return new ElementBuilder().withChild(actionModel).build();\n};\n"],"names":["extractIconElement","iconEmail","iconExternalLink","iconDocument","iconFearless","element","parseSvgString","ElementBuilder","typography","token","elementStyles","animation","wrapTextNodeInSpan","layoutStyles"],"mappings":"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"}

package/dist/atomic/actions/text.mjs

@@ -1,28 +1,23 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { parseSvgString } from "@universityofmaryland/web-utilities-library/media";
-import { extractIconElement } from "@universityofmaryland/web-utilities-library/dom";
+import { wrapTextNodeInSpan, extractIconElement } from "@universityofmaryland/web-utilities-library/dom";
 import { external_link } from "@universityofmaryland/web-icons-library/controls";
 import { email } from "@universityofmaryland/web-icons-library/communication";
-import { document as document$1 } from "@universityofmaryland/web-icons-library/files";
+import { document } from "@universityofmaryland/web-icons-library/files";
 import { fearless } from "@universityofmaryland/web-icons-library/brand";
-import "../../model/modifiers/index.mjs";
-import { outlineWhite, outlineLarge, outline as outline$1, secondaryGold, secondaryWhite, secondaryLarge, secondary as secondary$1, primaryLarge, primary as primary$1 } from "../../model/elements/actions.mjs";
-import "@universityofmaryland/web-styles-library";
-import { sansMin } from "../../model/elements/headline.mjs";
-import { gridStacked } from "../../model/elements/layout.mjs";
-const ICONS = {
-  email,
-  newWindow: external_link,
-  document: document$1,
-  fearless
-};
-function insertIcon(element, svg) {
-  const icon = parseSvgString(svg);
-  if (icon) element.insertBefore(icon, element.firstChild);
-}
-function createLinkIcon(element, type) {
+const createLinkIcon = (element, type) => {
   const existingIcon = extractIconElement({ element });
+  const ICONS = {
+    email,
+    newWindow: external_link,
+    document,
+    fearless
+  };
   if (existingIcon) {
     element.insertBefore(existingIcon, element.firstChild);
     return;
@@ -31,6 +26,10 @@ function createLinkIcon(element, type) {
   const isExternalTab = element.getAttribute("target") === "_blank";
   const isDownload = element.getAttribute("download") !== null;
   const isMail = href?.includes("mailto:");
+  const insertIcon = (element2, svg) => {
+    const icon = parseSvgString(svg);
+    if (icon) element2.insertBefore(icon, element2.firstChild);
+  };
   if (isMail) {
     insertIcon(element, ICONS.email);
   } else if (isExternalTab) {
@@ -40,110 +39,86 @@ function createLinkIcon(element, type) {
   } else if (type === "secondary") {
     insertIcon(element, ICONS.fearless);
   }
-}
-function createElementWithStyle(actionFn, props) {
-  const result = actionFn({
-    element: props.element,
-    elementStyles: props.elementStyles
-  });
-  return { element: result.element, styles: result.styles };
-}
-function createElement(type, props) {
-  createLinkIcon(props.element, type);
-  const actions = {
-    primary: {
-      default: primary$1,
-      large: primaryLarge
-    },
-    secondary: {
-      default: secondary$1,
-      large: secondaryLarge,
-      dark: secondaryWhite,
-      gold: secondaryGold
-    },
-    outline: {
-      default: outline$1,
-      large: outlineLarge,
-      dark: outlineWhite
-    }
-  };
-  const typeActions = actions[type];
-  if (props.isThemeGold && typeActions.gold) {
-    return createElementWithStyle(typeActions.gold, props);
-  }
-  if (props.isThemeDark && typeActions.dark) {
-    return createElementWithStyle(typeActions.dark, props);
-  }
-  if (props.isSizeLarge && typeActions.large) {
-    return createElementWithStyle(typeActions.large, props);
-  }
-  return createElementWithStyle(typeActions.default, props);
-}
-const createPlainTextContainer = (props) => {
-  const { isTypeSecondary } = props;
-  return gridStacked({
-    element: document.createElement("div"),
-    elementStyles: isTypeSecondary ? {} : { element: { alignItems: "center" } }
-  });
 };
-const createPlainText = (props) => {
-  const { isThemeDark, isTypeSecondary, plainText } = props;
-  const plainTextStyles = {
+const createPlainText = ({
+  isThemeDark,
+  isTypeSecondary,
+  plainText
+}) => {
+  if (!plainText) return null;
+  return new ElementBuilder(plainText).styled(
+    typography.sans.compose("min", { theme: isThemeDark ? "dark" : "light" })
+  ).withStyles({
     element: {
-      ...isThemeDark ? elementStyles.text.link.white : elementStyles.text.link.red,
-      marginTop: `${token.spacing.min}`
+      textDecoration: "underline",
+      ...isTypeSecondary && {
+        marginLeft: `${token.spacing.lg}`,
+        alignSelf: "baseline"
+      }
     }
-  };
-  const plainTextSecondaryStyles = {
-    element: {
-      ...isThemeDark ? elementStyles.text.link.white : elementStyles.text.link.red,
-      marginTop: `${token.spacing.min}`,
-      marginLeft: `${token.spacing.lg}`,
-      alignSelf: "baseline"
+  }).build();
+};
+const createElement = (type, props) => {
+  createLinkIcon(props.element, type);
+  const size = props.isSizeLarge ? "large" : "normal";
+  let styleObject;
+  if (type === "primary") {
+    styleObject = elementStyles.action.primary.composePrimary({ size });
+  } else if (type === "secondary") {
+    let color = "default";
+    if (props.isThemeGold) {
+      color = "gold";
+    } else if (props.isThemeDark) {
+      color = "white";
     }
-  };
-  if (plainText) {
-    return sansMin({
-      element: plainText,
-      isThemeDark,
-      elementStyles: isTypeSecondary ? plainTextSecondaryStyles : plainTextStyles
+    styleObject = {
+      ...elementStyles.action.secondary.composeSecondary({
+        size,
+        color
+      }),
+      ...animation.line.slideUnderRed
+    };
+  } else if (type === "outline") {
+    const color = props.isThemeDark ? "white" : "default";
+    styleObject = elementStyles.action.outline.composeOutline({ size, color });
+  }
+  const element = new ElementBuilder(props.element).styled(styleObject).withStylesIf(!!props.elementStyles, props.elementStyles || {});
+  if (type === "secondary") {
+    element.withModifier((el) => {
+      wrapTextNodeInSpan(el);
     });
   }
+  return element.build();
 };
 const primary = (props) => createElement("primary", props);
 const secondary = (props) => createElement("secondary", props);
 const outline = (props) => createElement("outline", props);
 const options = (props) => {
   const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;
-  const container = document.createElement("div");
-  let styles = "";
+  let actionModel;
   if (isTypePrimary) {
-    const result = primary(props);
-    container.appendChild(result.element);
-    styles = result.styles;
-  }
-  if (isTypeSecondary) {
-    const result = secondary(props);
-    container.appendChild(result.element);
-    styles = result.styles;
-  }
-  if (isTypeOutline) {
-    const result = outline(props);
-    container.appendChild(result.element);
-    styles = result.styles;
+    actionModel = primary(props);
+  } else if (isTypeSecondary) {
+    actionModel = secondary(props);
+  } else if (isTypeOutline) {
+    actionModel = outline(props);
   }
   if (plainText) {
-    const plainTextContainer = createPlainTextContainer(props);
     const plainTextElement = createPlainText(props);
-    if (!plainTextElement) return { element: container, styles };
-    plainTextContainer.element.innerHTML = container.innerHTML;
-    plainTextContainer.element.appendChild(plainTextElement.element);
-    container.innerHTML = "";
-    container.appendChild(plainTextContainer.element);
-    styles += plainTextContainer.styles;
-    styles += plainTextElement.styles;
+    if (plainTextElement) {
+      return new ElementBuilder().styled(layout.grid.stacked).withStyles({
+        element: {
+          display: "grid",
+          gap: token.spacing.sm,
+          ["& > *"]: {
+            marginBottom: "0 !important",
+            ...!isTypeSecondary && { justifySelf: "center" }
+          }
+        }
+      }).withChild(actionModel).withChild(plainTextElement).build();
+    }
   }
-  return { element: container, styles };
+  return new ElementBuilder().withChild(actionModel).build();
 };
 export {
   options,

package/dist/atomic/actions/text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { parseSvgString } from '@universityofmaryland/web-utilities-library/media';\nimport { extractIconElement } from '@universityofmaryland/web-utilities-library/dom';\nimport { external_link as iconExternalLink } from '@universityofmaryland/web-icons-library/controls';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { document as iconDocument } from '@universityofmaryland/web-icons-library/files';\nimport { fearless as iconFearless } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\ntype ActionFunction = (props: ElementProps) => {\n  element: HTMLElement;\n  styles: string;\n};\n\ntype ActionVariants = {\n  default: ActionFunction;\n  large?: ActionFunction;\n  dark?: ActionFunction;\n  gold?: ActionFunction;\n};\n\ntype Actions = Record<ElementType, ActionVariants>;\n\nconst ICONS: Record<IconType, string> = {\n  email: iconEmail,\n  newWindow: iconExternalLink,\n  document: iconDocument,\n  fearless: iconFearless,\n};\n\nfunction insertIcon(element: HTMLElement, svg: string): void {\n  const icon = parseSvgString(svg);\n  if (icon) element.insertBefore(icon, element.firstChild);\n}\n\nfunction createLinkIcon(element: HTMLElement, type: ElementType): void {\n  const existingIcon = extractIconElement({ element });\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n}\n\nfunction createElementWithStyle(\n  actionFn: (props: ElementProps) => { element: HTMLElement; styles: string },\n  props: ElementProps,\n) {\n  const result = actionFn({\n    element: props.element,\n    elementStyles: props.elementStyles,\n  });\n  return { element: result.element, styles: result.styles };\n}\n\nfunction createElement(type: ElementType, props: ElementProps) {\n  createLinkIcon(props.element, type);\n\n  const actions: Actions = {\n    primary: {\n      default: ElementModel.actions.primary,\n      large: ElementModel.actions.primaryLarge,\n    },\n    secondary: {\n      default: ElementModel.actions.secondary,\n      large: ElementModel.actions.secondaryLarge,\n      dark: ElementModel.actions.secondaryWhite,\n      gold: ElementModel.actions.secondaryGold,\n    },\n    outline: {\n      default: ElementModel.actions.outline,\n      large: ElementModel.actions.outlineLarge,\n      dark: ElementModel.actions.outlineWhite,\n    },\n  };\n\n  const typeActions = actions[type];\n\n  if (props.isThemeGold && typeActions.gold) {\n    return createElementWithStyle(typeActions.gold, props);\n  }\n  if (props.isThemeDark && typeActions.dark) {\n    return createElementWithStyle(typeActions.dark, props);\n  }\n  if (props.isSizeLarge && typeActions.large) {\n    return createElementWithStyle(typeActions.large, props);\n  }\n  return createElementWithStyle(typeActions.default, props);\n}\n\nconst createPlainTextContainer = (props: OptionProps) => {\n  const { isTypeSecondary } = props;\n\n  return ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    elementStyles: isTypeSecondary ? {} : { element: { alignItems: 'center' } },\n  });\n};\n\nconst createPlainText = (props: OptionProps) => {\n  const { isThemeDark, isTypeSecondary, plainText } = props;\n  const plainTextStyles = {\n    element: {\n      ...(isThemeDark\n        ? elementStyles.text.link.white\n        : elementStyles.text.link.red),\n      marginTop: `${token.spacing.min}`,\n    },\n  };\n\n  const plainTextSecondaryStyles = {\n    element: {\n      ...(isThemeDark\n        ? elementStyles.text.link.white\n        : elementStyles.text.link.red),\n      marginTop: `${token.spacing.min}`,\n      marginLeft: `${token.spacing.lg}`,\n      alignSelf: 'baseline',\n    },\n  };\n\n  if (plainText) {\n    return ElementModel.headline.sansMin({\n      element: plainText,\n      isThemeDark,\n      elementStyles: isTypeSecondary\n        ? plainTextSecondaryStyles\n        : plainTextStyles,\n    });\n  }\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n  const container = document.createElement('div');\n  let styles = '';\n\n  if (isTypePrimary) {\n    const result = primary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeSecondary) {\n    const result = secondary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeOutline) {\n    const result = outline(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (plainText) {\n    const plainTextContainer = createPlainTextContainer(props);\n    const plainTextElement = createPlainText(props);\n    if (!plainTextElement) return { element: container, styles };\n\n    plainTextContainer.element.innerHTML = container.innerHTML;\n    plainTextContainer.element.appendChild(plainTextElement.element);\n    container.innerHTML = '';\n\n    container.appendChild(plainTextContainer.element);\n\n    styles += plainTextContainer.styles;\n    styles += plainTextElement.styles;\n  }\n\n  return { element: container, styles };\n};\n"],"names":["iconExternalLink","iconDocument","ElementModel.actions.primary","ElementModel.actions.primaryLarge","ElementModel.actions.secondary","ElementModel.actions.secondaryLarge","ElementModel.actions.secondaryWhite","ElementModel.actions.secondaryGold","ElementModel.actions.outline","ElementModel.actions.outlineLarge","ElementModel.actions.outlineWhite","ElementModel.layout.gridStacked","ElementModel.headline.sansMin"],"mappings":"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"}
+{"version":3,"file":"text.mjs","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as layoutStyles from '@universityofmaryland/web-styles-library/layout';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { parseSvgString } from '@universityofmaryland/web-utilities-library/media';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport {\n  extractIconElement,\n  wrapTextNodeInSpan,\n} from '@universityofmaryland/web-utilities-library/dom';\nimport { external_link as iconExternalLink } from '@universityofmaryland/web-icons-library/controls';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { document as iconDocument } from '@universityofmaryland/web-icons-library/files';\nimport { fearless as iconFearless } from '@universityofmaryland/web-icons-library/brand';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\nconst createLinkIcon = (element: HTMLElement, type: ElementType): void => {\n  const existingIcon = extractIconElement({ element });\n  const ICONS: Record<IconType, string> = {\n    email: iconEmail,\n    newWindow: iconExternalLink,\n    document: iconDocument,\n    fearless: iconFearless,\n  };\n\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n  const insertIcon = (element: HTMLElement, svg: string): void => {\n    const icon = parseSvgString(svg);\n    if (icon) element.insertBefore(icon, element.firstChild);\n  };\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n};\n\nconst createPlainText = ({\n  isThemeDark,\n  isTypeSecondary,\n  plainText,\n}: Pick<OptionProps, 'isThemeDark' | 'isTypeSecondary' | 'plainText'>) => {\n  if (!plainText) return null;\n\n  return new ElementBuilder(plainText)\n    .styled(\n      typography.sans.compose('min', { theme: isThemeDark ? 'dark' : 'light' }),\n    )\n    .withStyles({\n      element: {\n        textDecoration: 'underline',\n\n        ...(isTypeSecondary && {\n          marginLeft: `${token.spacing.lg}`,\n          alignSelf: 'baseline',\n        }),\n      },\n    })\n    .build();\n};\n\nconst createElement = (type: ElementType, props: ElementProps) => {\n  createLinkIcon(props.element, type);\n\n  const size = props.isSizeLarge ? 'large' : 'normal';\n  let styleObject;\n\n  if (type === 'primary') {\n    styleObject = elementStyles.action.primary.composePrimary({ size });\n  } else if (type === 'secondary') {\n    let color: 'default' | 'white' | 'gold' = 'default';\n    if (props.isThemeGold) {\n      color = 'gold';\n    } else if (props.isThemeDark) {\n      color = 'white';\n    }\n    styleObject = {\n      ...elementStyles.action.secondary.composeSecondary({\n        size,\n        color,\n      }),\n      ...animation.line.slideUnderRed,\n    };\n  } else if (type === 'outline') {\n    const color = props.isThemeDark ? 'white' : 'default';\n    styleObject = elementStyles.action.outline.composeOutline({ size, color });\n  }\n\n  const element = new ElementBuilder(props.element)\n    .styled(styleObject!)\n    .withStylesIf(!!props.elementStyles, props.elementStyles || {});\n\n  if (type === 'secondary') {\n    element.withModifier((el) => {\n      wrapTextNodeInSpan(el);\n    });\n  }\n\n  return element.build();\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n\n  let actionModel;\n\n  if (isTypePrimary) {\n    actionModel = primary(props);\n  } else if (isTypeSecondary) {\n    actionModel = secondary(props);\n  } else if (isTypeOutline) {\n    actionModel = outline(props);\n  }\n\n  if (plainText) {\n    const plainTextElement = createPlainText(props);\n\n    if (plainTextElement) {\n      return new ElementBuilder()\n        .styled(layoutStyles.grid.stacked)\n        .withStyles({\n          element: {\n            display: 'grid',\n            gap: token.spacing.sm,\n\n            ['& > *']: {\n              marginBottom: '0 !important',\n              ...(!isTypeSecondary && { justifySelf: 'center' }),\n            },\n          },\n        })\n        .withChild(actionModel)\n        .withChild(plainTextElement)\n        .build();\n    }\n  }\n\n  return new ElementBuilder().withChild(actionModel).build();\n};\n"],"names":["iconExternalLink","element","layoutStyles"],"mappings":"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"}

package/dist/atomic/animations/actions/indicator.js

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

package/dist/atomic/animations/actions/indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"indicator.js","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\nconst ELEMENT_SLIDE_INDICATOR_CONTAINER = 'slide-indicator-container';\nconst ELEMENT_SLIDE_INDICATOR_LINE = 'slide-indicator-line';\nconst ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER = 'slide-indicator-button-wrapper';\n\n// prettier-ignore\nconst LineStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_LINE} {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 24px;\n    width: 80px;\n    transition: left 500ms;\n    background-color: ${token.color.red};\n    z-index: 99;\n  }\n`\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} {\n    width: 80px;\n    height: 100%;\n    background-color: ${token.color.gray.light};\n    position: relative;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 22px;\n    display: block;\n    background-color: ${token.color.gray.lightest};\n    z-index: 99;\n  }\n`\n\nconst STYLES_INDICATOR = `\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} {\n    position: relative;\n    height: 24px;\n    display: flex;\n    align-items: flex-start;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} > span {\n    display: block;\n    width: ${token.spacing.sm};\n    height:  22px;\n    z-index: 999;\n    position: relative;\n  }\n  \n  ${LineStyles}\n  ${ButtonStyles}\n\n`;\n\nexport default ({\n  count,\n  overlayColor,\n  isThemeDark,\n  isThemeLight,\n  callback,\n}: {\n  count: number;\n  overlayColor?: string;\n  isThemeDark?: boolean;\n  isThemeLight?: boolean;\n  callback: (arg: number) => void;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    const line = document.createElement('div');\n    let styles = STYLES_INDICATOR;\n\n    const buttons = Array.from({ length: count }).map((count, i) => {\n      const button = document.createElement('button');\n\n      button.classList.add(ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER);\n      button.addEventListener('click', () => callback(i));\n      button.setAttribute('aria-label', `Slide ${i + 1}`);\n\n      return button;\n    });\n\n    const positionLine = (index: number) => {\n      const button = buttons[index];\n      const buttonSize = button.clientWidth;\n      const buttonPosition = button.offsetLeft;\n\n      line.style.width = `${buttonSize}px`;\n      line.style.left = `${buttonPosition}px`;\n    };\n    const sizeButtons = () => {\n      const maxWidth = 80;\n      const containerSize = container.clientWidth;\n      let buttonSize = containerSize / count;\n\n      if (buttonSize > maxWidth) buttonSize = maxWidth;\n\n      buttons.forEach((button) => {\n        button.style.width = `${buttonSize}px`;\n      });\n    };\n\n    const eventResize = () => {\n      sizeButtons();\n      positionLine(position);\n    };\n\n    const eventPosition = (index: number) => {\n      positionLine(index);\n      position = index;\n    };\n\n    const load = () => {\n      const reload = () => {\n        setTimeout(() => {\n          const isLoaded = container.clientWidth > 0;\n          if (!isLoaded) {\n            reload();\n          } else {\n            sizeButtons();\n            positionLine(position);\n            line.style.display = 'block';\n          }\n        }, 500);\n      };\n\n      line.style.display = 'none';\n      reload();\n    };\n\n    let position = 0;\n\n    line.classList.add(ELEMENT_SLIDE_INDICATOR_LINE);\n\n    container.classList.add(ELEMENT_SLIDE_INDICATOR_CONTAINER);\n    container.appendChild(line);\n    buttons.forEach((button) => {\n      const spacer = document.createElement('span');\n      const overlay = document.createElement('span');\n      let spacerColor: string = token.color.white;\n\n      if (isThemeDark && !overlayColor) {\n        spacerColor = token.color.black;\n      }\n\n      if (isThemeLight && !overlayColor) {\n        spacerColor = token.color.gray.lightest;\n      }\n\n      spacer.style.backgroundColor = spacerColor;\n      overlay.style.backgroundColor = spacerColor;\n\n      button.appendChild(overlay);\n      container.appendChild(button);\n      container.appendChild(spacer);\n    });\n\n    load();\n\n    window.addEventListener('resize', debounce(eventResize, 20));\n\n    return {\n      element: container,\n      className: ELEMENT_SLIDE_INDICATOR_CONTAINER,\n      styles,\n      position: eventPosition,\n    };\n  })();\n"],"names":["token","count","debounce"],"mappings":"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"}
+{"version":3,"file":"indicator.js","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\nconst ELEMENT_SLIDE_INDICATOR_CONTAINER = 'slide-indicator-container';\nconst ELEMENT_SLIDE_INDICATOR_LINE = 'slide-indicator-line';\nconst ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER = 'slide-indicator-button-wrapper';\n\n// prettier-ignore\nconst LineStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_LINE} {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 24px;\n    width: 80px;\n    transition: left 500ms;\n    background-color: ${token.color.red};\n    z-index: 99;\n  }\n`\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} {\n    width: 80px;\n    height: 100%;\n    background-color: ${token.color.gray.light};\n    position: relative;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 22px;\n    display: block;\n    background-color: ${token.color.gray.lightest};\n    z-index: 99;\n  }\n`\n\nconst STYLES_INDICATOR = `\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} {\n    position: relative;\n    height: 24px;\n    display: flex;\n    align-items: flex-start;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} > span {\n    display: block;\n    width: ${token.spacing.sm};\n    height:  22px;\n    z-index: 999;\n    position: relative;\n  }\n  \n  ${LineStyles}\n  ${ButtonStyles}\n\n`;\n\nexport default ({\n  count,\n  overlayColor,\n  isThemeDark,\n  isThemeLight,\n  callback,\n}: {\n  count: number;\n  overlayColor?: string;\n  isThemeDark?: boolean;\n  isThemeLight?: boolean;\n  callback: (arg: number) => void;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    const line = document.createElement('div');\n    let styles = STYLES_INDICATOR;\n\n    const buttons = Array.from({ length: count }).map((count, i) => {\n      const button = document.createElement('button');\n\n      button.classList.add(ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER);\n      button.addEventListener('click', () => callback(i));\n      button.setAttribute('aria-label', `Slide ${i + 1}`);\n\n      return button;\n    });\n\n    const positionLine = (index: number) => {\n      const button = buttons[index];\n      const buttonSize = button.clientWidth;\n      const buttonPosition = button.offsetLeft;\n\n      line.style.width = `${buttonSize}px`;\n      line.style.left = `${buttonPosition}px`;\n    };\n    const sizeButtons = () => {\n      const maxWidth = 80;\n      const containerSize = container.clientWidth;\n      let buttonSize = containerSize / count;\n\n      if (buttonSize > maxWidth) buttonSize = maxWidth;\n\n      buttons.forEach((button) => {\n        button.style.width = `${buttonSize}px`;\n      });\n    };\n\n    const eventResize = () => {\n      sizeButtons();\n      positionLine(position);\n    };\n\n    const eventPosition = (index: number) => {\n      positionLine(index);\n      position = index;\n    };\n\n    const load = () => {\n      const reload = () => {\n        setTimeout(() => {\n          const isLoaded = container.clientWidth > 0;\n          if (!isLoaded) {\n            reload();\n          } else {\n            sizeButtons();\n            positionLine(position);\n            line.style.display = 'block';\n          }\n        }, 500);\n      };\n\n      line.style.display = 'none';\n      reload();\n    };\n\n    let position = 0;\n\n    line.classList.add(ELEMENT_SLIDE_INDICATOR_LINE);\n\n    container.classList.add(ELEMENT_SLIDE_INDICATOR_CONTAINER);\n    container.appendChild(line);\n    buttons.forEach((button) => {\n      const spacer = document.createElement('span');\n      const overlay = document.createElement('span');\n      let spacerColor: string = token.color.white;\n\n      if (isThemeDark && !overlayColor) {\n        spacerColor = token.color.black;\n      }\n\n      if (isThemeLight && !overlayColor) {\n        spacerColor = token.color.gray.lightest;\n      }\n\n      spacer.style.backgroundColor = spacerColor;\n      overlay.style.backgroundColor = spacerColor;\n\n      button.appendChild(overlay);\n      container.appendChild(button);\n      container.appendChild(spacer);\n    });\n\n    load();\n\n    window.addEventListener('resize', debounce(eventResize, 20));\n\n    return {\n      element: container,\n      className: ELEMENT_SLIDE_INDICATOR_CONTAINER,\n      styles,\n      position: eventPosition,\n    };\n  })();\n"],"names":["token","count","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,MAAM,oCAAoC;AAC1C,MAAM,+BAA+B;AACrC,MAAM,yCAAyC;AAG/C,MAAM,aAAa;AAAA,KACd,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOTA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAMvC,MAAM,eAAe;AAAA,KAChB,sCAAsC;AAAA;AAAA;AAAA,wBAGnBA,iBAAM,MAAM,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,KAIzC,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOnBA,iBAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAKjD,MAAM,mBAAmB;AAAA,KACpB,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASjC,iCAAiC;AAAA;AAAA,aAEzBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzB,UAAU;AAAA,IACV,YAAY;AAAA;AAAA;AAIhB,MAAA,YAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,OAOG,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,MAAI,SAAS;AAEb,QAAM,UAAU,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAACC,QAAO,MAAM;AAC9D,UAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,WAAO,UAAU,IAAI,sCAAsC;AAC3D,WAAO,iBAAiB,SAAS,MAAM,SAAS,CAAC,CAAC;AAClD,WAAO,aAAa,cAAc,SAAS,IAAI,CAAC,EAAE;AAElD,WAAO;AAAA,EACT,CAAC;AAED,QAAM,eAAe,CAAC,UAAkB;AACtC,UAAM,SAAS,QAAQ,KAAK;AAC5B,UAAM,aAAa,OAAO;AAC1B,UAAM,iBAAiB,OAAO;AAE9B,SAAK,MAAM,QAAQ,GAAG,UAAU;AAChC,SAAK,MAAM,OAAO,GAAG,cAAc;AAAA,EACrC;AACA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW;AACjB,UAAM,gBAAgB,UAAU;AAChC,QAAI,aAAa,gBAAgB;AAEjC,QAAI,aAAa,SAAU,cAAa;AAExC,YAAQ,QAAQ,CAAC,WAAW;AAC1B,aAAO,MAAM,QAAQ,GAAG,UAAU;AAAA,IACpC,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAA;AACA,iBAAa,QAAQ;AAAA,EACvB;AAEA,QAAM,gBAAgB,CAAC,UAAkB;AACvC,iBAAa,KAAK;AAClB,eAAW;AAAA,EACb;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,SAAS,MAAM;AACnB,iBAAW,MAAM;AACf,cAAM,WAAW,UAAU,cAAc;AACzC,YAAI,CAAC,UAAU;AACb,iBAAA;AAAA,QACF,OAAO;AACL,sBAAA;AACA,uBAAa,QAAQ;AACrB,eAAK,MAAM,UAAU;AAAA,QACvB;AAAA,MACF,GAAG,GAAG;AAAA,IACR;AAEA,SAAK,MAAM,UAAU;AACrB,WAAA;AAAA,EACF;AAEA,MAAI,WAAW;AAEf,OAAK,UAAU,IAAI,4BAA4B;AAE/C,YAAU,UAAU,IAAI,iCAAiC;AACzD,YAAU,YAAY,IAAI;AAC1B,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,UAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAI,cAAsBD,iBAAM,MAAM;AAEtC,QAAI,eAAe,CAAC,cAAc;AAChC,oBAAcA,iBAAM,MAAM;AAAA,IAC5B;AAEA,QAAI,gBAAgB,CAAC,cAAc;AACjC,oBAAcA,iBAAM,MAAM,KAAK;AAAA,IACjC;AAEA,WAAO,MAAM,kBAAkB;AAC/B,YAAQ,MAAM,kBAAkB;AAEhC,WAAO,YAAY,OAAO;AAC1B,cAAU,YAAY,MAAM;AAC5B,cAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AAED,OAAA;AAEA,SAAO,iBAAiB,UAAUE,YAAAA,SAAS,aAAa,EAAE,CAAC;AAE3D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EAAA;AAEd,GAAA;;"}

package/dist/atomic/animations/actions/indicator.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 const ELEMENT_SLIDE_INDICATOR_CONTAINER = "slide-indicator-container";
 const ELEMENT_SLIDE_INDICATOR_LINE = "slide-indicator-line";