@universityofmaryland/web-feeds-library 1.2.2 → 1.2.6

package/dist/macros/loader.js

@@ -1,6 +1,6 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
-const webElementsLibrary = require("@universityofmaryland/web-elements-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -61,70 +61,50 @@ const create = ({ isThemeDark }) => {
       background: `${Styles__namespace.token.color.gray.light}`
     }
   };
-  const innerElmOne = webElementsLibrary.Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-one`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "5px",
-        animation: "loader-first-animation 0.6s infinite"
-      }
+  const innerElmOne = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-one`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-first-animation 0.6s infinite"
     }
-  });
-  const innerElmTwo = webElementsLibrary.Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-two`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "5px",
-        animation: "loader-middle-animation 0.6s infinite"
-      }
+  }).build();
+  const innerElmTwo = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-two`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-middle-animation 0.6s infinite"
     }
-  });
-  const innerElmThree = webElementsLibrary.Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-three`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "24px",
-        animation: "loader-middle-animation 0.6s infinite"
-      }
+  }).build();
+  const innerElmThree = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-three`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "24px",
+      animation: "loader-middle-animation 0.6s infinite"
     }
-  });
-  const innerElmFour = webElementsLibrary.Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-four`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "45px",
-        animation: "loader-last-animation 0.6s infinite"
-      }
+  }).build();
+  const innerElmFour = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-four`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "45px",
+      animation: "loader-last-animation 0.6s infinite"
     }
-  });
-  const wrapper = webElementsLibrary.Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-wrapper`,
-    children: [innerElmOne, innerElmTwo, innerElmThree, innerElmFour],
-    elementStyles: {
-      element: {
-        position: "relative"
-      }
+  }).build();
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName(`${ID_UMD_LOADER}-wrapper`).withChild(innerElmOne).withChild(innerElmTwo).withChild(innerElmThree).withChild(innerElmFour).withStyles({
+    element: {
+      position: "relative"
     }
-  });
-  const composite = webElementsLibrary.Model.ElementModel.createDiv({
-    className: ID_UMD_LOADER,
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: "10px 0",
-        minHeight: "40px",
-        position: "relative",
-        gridColumn: "1 / -1"
-      }
+  }).build();
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName(ID_UMD_LOADER).withChild(wrapper).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "10px 0",
+      minHeight: "40px",
+      position: "relative",
+      gridColumn: "1 / -1"
     }
-  });
+  }).build();
   composite.styles += keyframes;
   return composite;
 };

package/dist/macros/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sources":["../../source/macros/loader.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Model } from '@universityofmaryland/web-elements-library';\n\nconst ID_UMD_LOADER = 'umd-loader-container';\n\nconst keyframes = `\n  @keyframes loader-first-animation {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n  @keyframes loader-last-animation {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  \n  @keyframes loader-middle-animation {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n`;\n\nconst create = ({ isThemeDark }: { isThemeDark?: boolean }) => {\n  const defaultDotStyles = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    background: `${Styles.token.color.gray.dark}`,\n    animationTimingFunction: 'cubic-bezier(0, 1, 1, 0)',\n\n    ...(isThemeDark && {\n      background: `${Styles.token.color.gray.light}`,\n    }),\n  };\n\n  const innerElmOne = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-one`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-first-animation 0.6s infinite',\n      },\n    },\n  });\n\n  const innerElmTwo = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-two`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    },\n  });\n\n  const innerElmThree = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-three`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '24px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    },\n  });\n  const innerElmFour = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-four`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '45px',\n        animation: 'loader-last-animation 0.6s infinite',\n      },\n    },\n  });\n\n  const wrapper = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-wrapper`,\n    children: [innerElmOne, innerElmTwo, innerElmThree, innerElmFour],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n  });\n\n  const composite = Model.ElementModel.createDiv({\n    className: ID_UMD_LOADER,\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        padding: '10px 0',\n        minHeight: '40px',\n        position: 'relative',\n        gridColumn: '1 / -1',\n      },\n    },\n  });\n\n  composite.styles += keyframes;\n\n  return composite;\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const loader = container.querySelector(`.${ID_UMD_LOADER}`) as HTMLDivElement;\n\n  if (loader) loader.remove();\n};\n\nconst display = ({\n  container,\n  isThemeDark,\n}: {\n  container: HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const loader = create({ isThemeDark });\n\n  container.appendChild(loader.element);\n};\n\nexport default {\n  create,\n  display,\n  remove,\n};\n"],"names":["Styles","Model","loader"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,MAAM,gBAAgB;AAEtB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BlB,MAAM,SAAS,CAAC,EAAE,kBAA6C;AAC7D,QAAM,mBAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,GAAGA,kBAAO,MAAM,MAAM,KAAK,IAAI;AAAA,IAC3C,yBAAyB;AAAA,IAEzB,GAAI,eAAe;AAAA,MACjB,YAAY,GAAGA,kBAAO,MAAM,MAAM,KAAK,KAAK;AAAA,IAAA;AAAA,EAC9C;AAGF,QAAM,cAAcC,mBAAAA,MAAM,aAAa,UAAU;AAAA,IAC/C,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,cAAcA,mBAAAA,MAAM,aAAa,UAAU;AAAA,IAC/C,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,gBAAgBA,mBAAAA,MAAM,aAAa,UAAU;AAAA,IACjD,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AACD,QAAM,eAAeA,mBAAAA,MAAM,aAAa,UAAU;AAAA,IAChD,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,UAAUA,mBAAAA,MAAM,aAAa,UAAU;AAAA,IAC3C,WAAW,GAAG,aAAa;AAAA,IAC3B,UAAU,CAAC,aAAa,aAAa,eAAe,YAAY;AAAA,IAChE,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,QAAM,YAAYA,mBAAAA,MAAM,aAAa,UAAU;AAAA,IAC7C,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,YAAU,UAAU;AAEpB,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAMC,UAAS,UAAU,cAAc,IAAI,aAAa,EAAE;AAE1D,MAAIA,iBAAe,OAAA;AACrB;AAEA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AACF,MAGM;AACJ,QAAMA,UAAS,OAAO,EAAE,aAAa;AAErC,YAAU,YAAYA,QAAO,OAAO;AACtC;AAEA,MAAA,SAAe;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;;"}
+{"version":3,"file":"loader.js","sources":["../../source/macros/loader.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { type ElementModel } from '../_types';\n\nconst ID_UMD_LOADER = 'umd-loader-container';\n\nconst keyframes = `\n  @keyframes loader-first-animation {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n  @keyframes loader-last-animation {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  \n  @keyframes loader-middle-animation {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n`;\n\nconst create = ({ isThemeDark }: { isThemeDark?: boolean }): ElementModel => {\n  const defaultDotStyles = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    background: `${Styles.token.color.gray.dark}`,\n    animationTimingFunction: 'cubic-bezier(0, 1, 1, 0)',\n\n    ...(isThemeDark && {\n      background: `${Styles.token.color.gray.light}`,\n    }),\n  };\n\n  const innerElmOne = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-one`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-first-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmTwo = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-two`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmThree = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-three`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '24px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmFour = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-four`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '45px',\n        animation: 'loader-last-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-wrapper`)\n    .withChild(innerElmOne)\n    .withChild(innerElmTwo)\n    .withChild(innerElmThree)\n    .withChild(innerElmFour)\n    .withStyles({\n      element: {\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName(ID_UMD_LOADER)\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        padding: '10px 0',\n        minHeight: '40px',\n        position: 'relative',\n        gridColumn: '1 / -1',\n      },\n    })\n    .build();\n\n  composite.styles += keyframes;\n\n  return composite;\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const loader = container.querySelector(`.${ID_UMD_LOADER}`) as HTMLDivElement;\n\n  if (loader) loader.remove();\n};\n\nconst display = ({\n  container,\n  isThemeDark,\n}: {\n  container: HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const loader = create({ isThemeDark });\n\n  container.appendChild(loader.element);\n};\n\nexport default {\n  create,\n  display,\n  remove,\n};\n"],"names":["Styles","ElementBuilder","loader"],"mappings":";;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB;AAEtB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BlB,MAAM,SAAS,CAAC,EAAE,kBAA2D;AAC3E,QAAM,mBAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,GAAGA,kBAAO,MAAM,MAAM,KAAK,IAAI;AAAA,IAC3C,yBAAyB;AAAA,IAEzB,GAAI,eAAe;AAAA,MACjB,YAAY,GAAGA,kBAAO,MAAM,MAAM,KAAK,KAAK;AAAA,IAAA;AAAA,EAC9C;AAGF,QAAM,cAAc,IAAIC,kBAAAA,eAAA,EACrB,cAAc,GAAG,aAAa,MAAM,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,cAAc,IAAIA,kBAAAA,eAAA,EACrB,cAAc,GAAG,aAAa,MAAM,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,gBAAgB,IAAIA,kBAAAA,eAAA,EACvB,cAAc,GAAG,aAAa,QAAQ,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,eAAe,IAAIA,kBAAAA,eAAA,EACtB,cAAc,GAAG,aAAa,OAAO,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,UAAU,IAAIA,kBAAAA,iBACjB,cAAc,GAAG,aAAa,UAAU,EACxC,UAAU,WAAW,EACrB,UAAU,WAAW,EACrB,UAAU,aAAa,EACvB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAIA,kBAAAA,eAAA,EACnB,cAAc,aAAa,EAC3B,UAAU,OAAO,EACjB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd,CACD,EACA,MAAA;AAEH,YAAU,UAAU;AAEpB,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAMC,UAAS,UAAU,cAAc,IAAI,aAAa,EAAE;AAE1D,MAAIA,iBAAe,OAAA;AACrB;AAEA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AACF,MAGM;AACJ,QAAMA,UAAS,OAAO,EAAE,aAAa;AAErC,YAAU,YAAYA,QAAO,OAAO;AACtC;AAEA,MAAA,SAAe;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;;"}

package/dist/macros/loader.mjs

@@ -1,5 +1,5 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { Model } from "@universityofmaryland/web-elements-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 const ID_UMD_LOADER = "umd-loader-container";
 const keyframes = `
   @keyframes loader-first-animation {
@@ -43,70 +43,50 @@ const create = ({ isThemeDark }) => {
       background: `${Styles.token.color.gray.light}`
     }
   };
-  const innerElmOne = Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-one`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "5px",
-        animation: "loader-first-animation 0.6s infinite"
-      }
+  const innerElmOne = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-one`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-first-animation 0.6s infinite"
     }
-  });
-  const innerElmTwo = Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-two`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "5px",
-        animation: "loader-middle-animation 0.6s infinite"
-      }
+  }).build();
+  const innerElmTwo = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-two`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "5px",
+      animation: "loader-middle-animation 0.6s infinite"
     }
-  });
-  const innerElmThree = Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-three`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "24px",
-        animation: "loader-middle-animation 0.6s infinite"
-      }
+  }).build();
+  const innerElmThree = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-three`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "24px",
+      animation: "loader-middle-animation 0.6s infinite"
     }
-  });
-  const innerElmFour = Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-four`,
-    elementStyles: {
-      element: {
-        ...defaultDotStyles,
-        left: "45px",
-        animation: "loader-last-animation 0.6s infinite"
-      }
+  }).build();
+  const innerElmFour = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-four`).withStyles({
+    element: {
+      ...defaultDotStyles,
+      left: "45px",
+      animation: "loader-last-animation 0.6s infinite"
     }
-  });
-  const wrapper = Model.ElementModel.createDiv({
-    className: `${ID_UMD_LOADER}-wrapper`,
-    children: [innerElmOne, innerElmTwo, innerElmThree, innerElmFour],
-    elementStyles: {
-      element: {
-        position: "relative"
-      }
+  }).build();
+  const wrapper = new ElementBuilder().withClassName(`${ID_UMD_LOADER}-wrapper`).withChild(innerElmOne).withChild(innerElmTwo).withChild(innerElmThree).withChild(innerElmFour).withStyles({
+    element: {
+      position: "relative"
     }
-  });
-  const composite = Model.ElementModel.createDiv({
-    className: ID_UMD_LOADER,
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: "10px 0",
-        minHeight: "40px",
-        position: "relative",
-        gridColumn: "1 / -1"
-      }
+  }).build();
+  const composite = new ElementBuilder().withClassName(ID_UMD_LOADER).withChild(wrapper).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "10px 0",
+      minHeight: "40px",
+      position: "relative",
+      gridColumn: "1 / -1"
     }
-  });
+  }).build();
   composite.styles += keyframes;
   return composite;
 };

package/dist/macros/loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"loader.mjs","sources":["../../source/macros/loader.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Model } from '@universityofmaryland/web-elements-library';\n\nconst ID_UMD_LOADER = 'umd-loader-container';\n\nconst keyframes = `\n  @keyframes loader-first-animation {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n  @keyframes loader-last-animation {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  \n  @keyframes loader-middle-animation {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n`;\n\nconst create = ({ isThemeDark }: { isThemeDark?: boolean }) => {\n  const defaultDotStyles = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    background: `${Styles.token.color.gray.dark}`,\n    animationTimingFunction: 'cubic-bezier(0, 1, 1, 0)',\n\n    ...(isThemeDark && {\n      background: `${Styles.token.color.gray.light}`,\n    }),\n  };\n\n  const innerElmOne = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-one`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-first-animation 0.6s infinite',\n      },\n    },\n  });\n\n  const innerElmTwo = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-two`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    },\n  });\n\n  const innerElmThree = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-three`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '24px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    },\n  });\n  const innerElmFour = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-four`,\n    elementStyles: {\n      element: {\n        ...defaultDotStyles,\n        left: '45px',\n        animation: 'loader-last-animation 0.6s infinite',\n      },\n    },\n  });\n\n  const wrapper = Model.ElementModel.createDiv({\n    className: `${ID_UMD_LOADER}-wrapper`,\n    children: [innerElmOne, innerElmTwo, innerElmThree, innerElmFour],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n  });\n\n  const composite = Model.ElementModel.createDiv({\n    className: ID_UMD_LOADER,\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        padding: '10px 0',\n        minHeight: '40px',\n        position: 'relative',\n        gridColumn: '1 / -1',\n      },\n    },\n  });\n\n  composite.styles += keyframes;\n\n  return composite;\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const loader = container.querySelector(`.${ID_UMD_LOADER}`) as HTMLDivElement;\n\n  if (loader) loader.remove();\n};\n\nconst display = ({\n  container,\n  isThemeDark,\n}: {\n  container: HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const loader = create({ isThemeDark });\n\n  container.appendChild(loader.element);\n};\n\nexport default {\n  create,\n  display,\n  remove,\n};\n"],"names":["loader"],"mappings":";;AAGA,MAAM,gBAAgB;AAEtB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BlB,MAAM,SAAS,CAAC,EAAE,kBAA6C;AAC7D,QAAM,mBAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,GAAG,OAAO,MAAM,MAAM,KAAK,IAAI;AAAA,IAC3C,yBAAyB;AAAA,IAEzB,GAAI,eAAe;AAAA,MACjB,YAAY,GAAG,OAAO,MAAM,MAAM,KAAK,KAAK;AAAA,IAAA;AAAA,EAC9C;AAGF,QAAM,cAAc,MAAM,aAAa,UAAU;AAAA,IAC/C,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,cAAc,MAAM,aAAa,UAAU;AAAA,IAC/C,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,gBAAgB,MAAM,aAAa,UAAU;AAAA,IACjD,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AACD,QAAM,eAAe,MAAM,aAAa,UAAU;AAAA,IAChD,WAAW,GAAG,aAAa;AAAA,IAC3B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,UAAU,MAAM,aAAa,UAAU;AAAA,IAC3C,WAAW,GAAG,aAAa;AAAA,IAC3B,UAAU,CAAC,aAAa,aAAa,eAAe,YAAY;AAAA,IAChE,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,QAAM,YAAY,MAAM,aAAa,UAAU;AAAA,IAC7C,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAED,YAAU,UAAU;AAEpB,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAMA,UAAS,UAAU,cAAc,IAAI,aAAa,EAAE;AAE1D,MAAIA,iBAAe,OAAA;AACrB;AAEA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AACF,MAGM;AACJ,QAAMA,UAAS,OAAO,EAAE,aAAa;AAErC,YAAU,YAAYA,QAAO,OAAO;AACtC;AAEA,MAAA,SAAe;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"loader.mjs","sources":["../../source/macros/loader.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { type ElementModel } from '../_types';\n\nconst ID_UMD_LOADER = 'umd-loader-container';\n\nconst keyframes = `\n  @keyframes loader-first-animation {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n  @keyframes loader-last-animation {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  \n  @keyframes loader-middle-animation {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\n    }\n  }\n`;\n\nconst create = ({ isThemeDark }: { isThemeDark?: boolean }): ElementModel => {\n  const defaultDotStyles = {\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    background: `${Styles.token.color.gray.dark}`,\n    animationTimingFunction: 'cubic-bezier(0, 1, 1, 0)',\n\n    ...(isThemeDark && {\n      background: `${Styles.token.color.gray.light}`,\n    }),\n  };\n\n  const innerElmOne = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-one`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-first-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmTwo = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-two`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '5px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmThree = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-three`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '24px',\n        animation: 'loader-middle-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const innerElmFour = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-four`)\n    .withStyles({\n      element: {\n        ...defaultDotStyles,\n        left: '45px',\n        animation: 'loader-last-animation 0.6s infinite',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName(`${ID_UMD_LOADER}-wrapper`)\n    .withChild(innerElmOne)\n    .withChild(innerElmTwo)\n    .withChild(innerElmThree)\n    .withChild(innerElmFour)\n    .withStyles({\n      element: {\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName(ID_UMD_LOADER)\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        padding: '10px 0',\n        minHeight: '40px',\n        position: 'relative',\n        gridColumn: '1 / -1',\n      },\n    })\n    .build();\n\n  composite.styles += keyframes;\n\n  return composite;\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const loader = container.querySelector(`.${ID_UMD_LOADER}`) as HTMLDivElement;\n\n  if (loader) loader.remove();\n};\n\nconst display = ({\n  container,\n  isThemeDark,\n}: {\n  container: HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const loader = create({ isThemeDark });\n\n  container.appendChild(loader.element);\n};\n\nexport default {\n  create,\n  display,\n  remove,\n};\n"],"names":["loader"],"mappings":";;AAIA,MAAM,gBAAgB;AAEtB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BlB,MAAM,SAAS,CAAC,EAAE,kBAA2D;AAC3E,QAAM,mBAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,GAAG,OAAO,MAAM,MAAM,KAAK,IAAI;AAAA,IAC3C,yBAAyB;AAAA,IAEzB,GAAI,eAAe;AAAA,MACjB,YAAY,GAAG,OAAO,MAAM,MAAM,KAAK,KAAK;AAAA,IAAA;AAAA,EAC9C;AAGF,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,GAAG,aAAa,MAAM,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,GAAG,aAAa,MAAM,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,gBAAgB,IAAI,eAAA,EACvB,cAAc,GAAG,aAAa,QAAQ,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,eAAe,IAAI,eAAA,EACtB,cAAc,GAAG,aAAa,OAAO,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AAEH,QAAM,UAAU,IAAI,iBACjB,cAAc,GAAG,aAAa,UAAU,EACxC,UAAU,WAAW,EACrB,UAAU,WAAW,EACrB,UAAU,aAAa,EACvB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,aAAa,EAC3B,UAAU,OAAO,EACjB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd,CACD,EACA,MAAA;AAEH,YAAU,UAAU;AAEpB,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAMA,UAAS,UAAU,cAAc,IAAI,aAAa,EAAE;AAE1D,MAAIA,iBAAe,OAAA;AACrB;AAEA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AACF,MAGM;AACJ,QAAMA,UAAS,OAAO,EAAE,aAAa;AAErC,YAAU,YAAYA,QAAO,OAAO;AACtC;AAEA,MAAA,SAAe;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/macros/no-results.d.ts

@@ -1,3 +1,4 @@
+import { ElementModel } from '../_types';
 interface NoResultsContentType {
     message?: string;
     linkUrl?: string;
@@ -6,10 +7,6 @@ interface NoResultsContentType {
     isThemeDark?: boolean;
     isAlignedCenter?: boolean;
 }
-declare const _default: ({ message, linkUrl, linkText, isThemeDark, isAlignedCenter, }: NoResultsContentType) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ message, linkUrl, linkText, isThemeDark, isAlignedCenter, }: NoResultsContentType) => ElementModel;
 export default _default;
 //# sourceMappingURL=no-results.d.ts.map

package/dist/macros/no-results.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-results.d.ts","sourceRoot":"","sources":["../../source/macros/no-results.ts"],"names":[],"mappings":"AAGA,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;yBAEe,+DAMb,oBAAoB;;;;;AANvB,wBAsDE"}
+{"version":3,"file":"no-results.d.ts","sourceRoot":"","sources":["../../source/macros/no-results.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;yBAEe,+DAMb,oBAAoB,KAAG,YAAY;AANtC,wBAqDE"}

package/dist/macros/no-results.js

@@ -1,6 +1,8 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const webElementsLibrary = require("@universityofmaryland/web-elements-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -25,32 +27,26 @@ const noResults = ({
   isThemeDark,
   isAlignedCenter = true
 }) => {
-  const composite = webElementsLibrary.Model.ElementModel.layout.gridStacked({
-    element: document.createElement("div"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        [`& *`]: {
-          textAlign: isAlignedCenter ? "center" : "left"
-        },
-        [`& *:not(:first-child)`]: {
-          marginTop: `${Styles__namespace.token.spacing.md}`
-        }
-      }
+  const headline = new webBuilderLibrary.ElementBuilder(document.createElement("p")).styled(
+    Styles__namespace.typography.sans.compose("extralarge", {
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      textTransform: "uppercase"
     }
-  });
-  const headline = webElementsLibrary.Model.ElementModel.headline.sansExtraLarge({
-    element: document.createElement("p"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase"
+  }).build();
+  headline.element.innerHTML = message || "No results found";
+  const composite = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.grid.stacked).withChild(headline).withStyles({
+    element: {
+      [`& *`]: {
+        textAlign: isAlignedCenter ? "center" : "left"
+      },
+      [`& *:not(:first-child)`]: {
+        marginTop: `${Styles__namespace.token.spacing.md}`
       }
     }
   });
-  headline.element.innerHTML = message || "No results found";
-  composite.element.appendChild(headline.element);
-  composite.styles += headline.styles;
   if (linkUrl && linkText) {
     const link = document.createElement("a");
     link.innerHTML = linkText;
@@ -62,10 +58,9 @@ const noResults = ({
       isTypeOutline: true,
       isThemeDark
     });
-    composite.element.appendChild(ctaButton.element);
-    composite.styles += ctaButton.styles;
+    composite.withChild(ctaButton);
   }
-  return composite;
+  return composite.build();
 };
 module.exports = noResults;
 //# sourceMappingURL=no-results.js.map

package/dist/macros/no-results.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-results.js","sources":["../../source/macros/no-results.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Atomic, Model } from '@universityofmaryland/web-elements-library';\n\ninterface NoResultsContentType {\n  message?: string;\n  linkUrl?: string;\n  linkText?: string;\n  ctaType?: string;\n  isThemeDark?: boolean;\n  isAlignedCenter?: boolean;\n}\n\nexport default ({\n  message,\n  linkUrl,\n  linkText,\n  isThemeDark,\n  isAlignedCenter = true,\n}: NoResultsContentType) => {\n  const composite = Model.ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        [`& *`]: {\n          textAlign: isAlignedCenter ? 'center' : 'left',\n        },\n        [`& *:not(:first-child)`]: {\n          marginTop: `${Styles.token.spacing.md}`,\n        },\n      },\n    },\n  });\n\n  const headline = Model.ElementModel.headline.sansExtraLarge({\n    element: document.createElement('p'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n    },\n  });\n\n  headline.element.innerHTML = message || 'No results found';\n  composite.element.appendChild(headline.element);\n  composite.styles += headline.styles;\n\n  if (linkUrl && linkText) {\n    const link = document.createElement('a');\n    link.innerHTML = linkText;\n    link.setAttribute('href', linkUrl);\n    link.setAttribute('target', '_blank');\n    link.setAttribute('rel', 'noopener noreferrer');\n\n    const ctaButton = Atomic.actions.options({\n      element: link,\n      isTypeOutline: true,\n      isThemeDark,\n    });\n\n    composite.element.appendChild(ctaButton.element);\n    composite.styles += ctaButton.styles;\n  }\n\n  return composite;\n};\n"],"names":["Model","Styles","Atomic"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAA,YAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAA4B;AAC1B,QAAM,YAAYA,mBAAAA,MAAM,aAAa,OAAO,YAAY;AAAA,IACtD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,KAAK,GAAG;AAAA,UACP,WAAW,kBAAkB,WAAW;AAAA,QAAA;AAAA,QAE1C,CAAC,uBAAuB,GAAG;AAAA,UACzB,WAAW,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,MACvC;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,WAAWD,mBAAAA,MAAM,aAAa,SAAS,eAAe;AAAA,IAC1D,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AAED,WAAS,QAAQ,YAAY,WAAW;AACxC,YAAU,QAAQ,YAAY,SAAS,OAAO;AAC9C,YAAU,UAAU,SAAS;AAE7B,MAAI,WAAW,UAAU;AACvB,UAAM,OAAO,SAAS,cAAc,GAAG;AACvC,SAAK,YAAY;AACjB,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,UAAU,QAAQ;AACpC,SAAK,aAAa,OAAO,qBAAqB;AAE9C,UAAM,YAAYE,mBAAAA,OAAO,QAAQ,QAAQ;AAAA,MACvC,SAAS;AAAA,MACT,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,cAAU,QAAQ,YAAY,UAAU,OAAO;AAC/C,cAAU,UAAU,UAAU;AAAA,EAChC;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"no-results.js","sources":["../../source/macros/no-results.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { Atomic } from '@universityofmaryland/web-elements-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../_types';\n\ninterface NoResultsContentType {\n  message?: string;\n  linkUrl?: string;\n  linkText?: string;\n  ctaType?: string;\n  isThemeDark?: boolean;\n  isAlignedCenter?: boolean;\n}\n\nexport default ({\n  message,\n  linkUrl,\n  linkText,\n  isThemeDark,\n  isAlignedCenter = true,\n}: NoResultsContentType): ElementModel => {\n  const headline = new ElementBuilder(document.createElement('p'))\n    .styled(\n      Styles.typography.sans.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n\n  headline.element.innerHTML = message || 'No results found';\n\n  const composite = new ElementBuilder()\n    .styled(Styles.layout.grid.stacked)\n    .withChild(headline)\n    .withStyles({\n      element: {\n        [`& *`]: {\n          textAlign: isAlignedCenter ? 'center' : 'left',\n        },\n        [`& *:not(:first-child)`]: {\n          marginTop: `${Styles.token.spacing.md}`,\n        },\n      },\n    });\n\n  if (linkUrl && linkText) {\n    const link = document.createElement('a');\n    link.innerHTML = linkText;\n    link.setAttribute('href', linkUrl);\n    link.setAttribute('target', '_blank');\n    link.setAttribute('rel', 'noopener noreferrer');\n\n    const ctaButton = Atomic.actions.options({\n      element: link,\n      isTypeOutline: true,\n      isThemeDark,\n    });\n\n    composite.withChild(ctaButton);\n  }\n\n  return composite.build();\n};\n"],"names":["ElementBuilder","Styles","theme","Atomic"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeA,MAAA,YAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAA0C;AACxC,QAAM,WAAW,IAAIA,iCAAe,SAAS,cAAc,GAAG,CAAC,EAC5D;AAAA,IACCC,kBAAO,WAAW,KAAK,QAAQ,cAAc;AAAA,MAC3C,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AAEH,WAAS,QAAQ,YAAY,WAAW;AAExC,QAAM,YAAY,IAAIF,kBAAAA,iBACnB,OAAOC,kBAAO,OAAO,KAAK,OAAO,EACjC,UAAU,QAAQ,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,KAAK,GAAG;AAAA,QACP,WAAW,kBAAkB,WAAW;AAAA,MAAA;AAAA,MAE1C,CAAC,uBAAuB,GAAG;AAAA,QACzB,WAAW,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,IACvC;AAAA,EACF,CACD;AAEH,MAAI,WAAW,UAAU;AACvB,UAAM,OAAO,SAAS,cAAc,GAAG;AACvC,SAAK,YAAY;AACjB,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,UAAU,QAAQ;AACpC,SAAK,aAAa,OAAO,qBAAqB;AAE9C,UAAM,YAAYE,mBAAAA,OAAO,QAAQ,QAAQ;AAAA,MACvC,SAAS;AAAA,MACT,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,SAAO,UAAU,MAAA;AACnB;;"}

package/dist/macros/no-results.mjs

@@ -1,5 +1,7 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { Atomic } from "@universityofmaryland/web-elements-library";
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { Model, Atomic } from "@universityofmaryland/web-elements-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const noResults = ({
   message,
   linkUrl,
@@ -7,32 +9,26 @@ const noResults = ({
   isThemeDark,
   isAlignedCenter = true
 }) => {
-  const composite = Model.ElementModel.layout.gridStacked({
-    element: document.createElement("div"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        [`& *`]: {
-          textAlign: isAlignedCenter ? "center" : "left"
-        },
-        [`& *:not(:first-child)`]: {
-          marginTop: `${Styles.token.spacing.md}`
-        }
-      }
+  const headline = new ElementBuilder(document.createElement("p")).styled(
+    Styles.typography.sans.compose("extralarge", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      textTransform: "uppercase"
     }
-  });
-  const headline = Model.ElementModel.headline.sansExtraLarge({
-    element: document.createElement("p"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase"
+  }).build();
+  headline.element.innerHTML = message || "No results found";
+  const composite = new ElementBuilder().styled(Styles.layout.grid.stacked).withChild(headline).withStyles({
+    element: {
+      [`& *`]: {
+        textAlign: isAlignedCenter ? "center" : "left"
+      },
+      [`& *:not(:first-child)`]: {
+        marginTop: `${Styles.token.spacing.md}`
       }
     }
   });
-  headline.element.innerHTML = message || "No results found";
-  composite.element.appendChild(headline.element);
-  composite.styles += headline.styles;
   if (linkUrl && linkText) {
     const link = document.createElement("a");
     link.innerHTML = linkText;
@@ -44,10 +40,9 @@ const noResults = ({
       isTypeOutline: true,
       isThemeDark
     });
-    composite.element.appendChild(ctaButton.element);
-    composite.styles += ctaButton.styles;
+    composite.withChild(ctaButton);
   }
-  return composite;
+  return composite.build();
 };
 export {
   noResults as default

package/dist/macros/no-results.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"no-results.mjs","sources":["../../source/macros/no-results.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Atomic, Model } from '@universityofmaryland/web-elements-library';\n\ninterface NoResultsContentType {\n  message?: string;\n  linkUrl?: string;\n  linkText?: string;\n  ctaType?: string;\n  isThemeDark?: boolean;\n  isAlignedCenter?: boolean;\n}\n\nexport default ({\n  message,\n  linkUrl,\n  linkText,\n  isThemeDark,\n  isAlignedCenter = true,\n}: NoResultsContentType) => {\n  const composite = Model.ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        [`& *`]: {\n          textAlign: isAlignedCenter ? 'center' : 'left',\n        },\n        [`& *:not(:first-child)`]: {\n          marginTop: `${Styles.token.spacing.md}`,\n        },\n      },\n    },\n  });\n\n  const headline = Model.ElementModel.headline.sansExtraLarge({\n    element: document.createElement('p'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n    },\n  });\n\n  headline.element.innerHTML = message || 'No results found';\n  composite.element.appendChild(headline.element);\n  composite.styles += headline.styles;\n\n  if (linkUrl && linkText) {\n    const link = document.createElement('a');\n    link.innerHTML = linkText;\n    link.setAttribute('href', linkUrl);\n    link.setAttribute('target', '_blank');\n    link.setAttribute('rel', 'noopener noreferrer');\n\n    const ctaButton = Atomic.actions.options({\n      element: link,\n      isTypeOutline: true,\n      isThemeDark,\n    });\n\n    composite.element.appendChild(ctaButton.element);\n    composite.styles += ctaButton.styles;\n  }\n\n  return composite;\n};\n"],"names":[],"mappings":";;AAYA,MAAA,YAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAA4B;AAC1B,QAAM,YAAY,MAAM,aAAa,OAAO,YAAY;AAAA,IACtD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,KAAK,GAAG;AAAA,UACP,WAAW,kBAAkB,WAAW;AAAA,QAAA;AAAA,QAE1C,CAAC,uBAAuB,GAAG;AAAA,UACzB,WAAW,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,MACvC;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,WAAW,MAAM,aAAa,SAAS,eAAe;AAAA,IAC1D,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AAED,WAAS,QAAQ,YAAY,WAAW;AACxC,YAAU,QAAQ,YAAY,SAAS,OAAO;AAC9C,YAAU,UAAU,SAAS;AAE7B,MAAI,WAAW,UAAU;AACvB,UAAM,OAAO,SAAS,cAAc,GAAG;AACvC,SAAK,YAAY;AACjB,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,UAAU,QAAQ;AACpC,SAAK,aAAa,OAAO,qBAAqB;AAE9C,UAAM,YAAY,OAAO,QAAQ,QAAQ;AAAA,MACvC,SAAS;AAAA,MACT,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,cAAU,QAAQ,YAAY,UAAU,OAAO;AAC/C,cAAU,UAAU,UAAU;AAAA,EAChC;AAEA,SAAO;AACT;"}
+{"version":3,"file":"no-results.mjs","sources":["../../source/macros/no-results.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { Atomic } from '@universityofmaryland/web-elements-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../_types';\n\ninterface NoResultsContentType {\n  message?: string;\n  linkUrl?: string;\n  linkText?: string;\n  ctaType?: string;\n  isThemeDark?: boolean;\n  isAlignedCenter?: boolean;\n}\n\nexport default ({\n  message,\n  linkUrl,\n  linkText,\n  isThemeDark,\n  isAlignedCenter = true,\n}: NoResultsContentType): ElementModel => {\n  const headline = new ElementBuilder(document.createElement('p'))\n    .styled(\n      Styles.typography.sans.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n\n  headline.element.innerHTML = message || 'No results found';\n\n  const composite = new ElementBuilder()\n    .styled(Styles.layout.grid.stacked)\n    .withChild(headline)\n    .withStyles({\n      element: {\n        [`& *`]: {\n          textAlign: isAlignedCenter ? 'center' : 'left',\n        },\n        [`& *:not(:first-child)`]: {\n          marginTop: `${Styles.token.spacing.md}`,\n        },\n      },\n    });\n\n  if (linkUrl && linkText) {\n    const link = document.createElement('a');\n    link.innerHTML = linkText;\n    link.setAttribute('href', linkUrl);\n    link.setAttribute('target', '_blank');\n    link.setAttribute('rel', 'noopener noreferrer');\n\n    const ctaButton = Atomic.actions.options({\n      element: link,\n      isTypeOutline: true,\n      isThemeDark,\n    });\n\n    composite.withChild(ctaButton);\n  }\n\n  return composite.build();\n};\n"],"names":[],"mappings":";;;;AAeA,MAAA,YAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAA0C;AACxC,QAAM,WAAW,IAAI,eAAe,SAAS,cAAc,GAAG,CAAC,EAC5D;AAAA,IACC,OAAO,WAAW,KAAK,QAAQ,cAAc;AAAA,MAC3C,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AAEH,WAAS,QAAQ,YAAY,WAAW;AAExC,QAAM,YAAY,IAAI,iBACnB,OAAO,OAAO,OAAO,KAAK,OAAO,EACjC,UAAU,QAAQ,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,KAAK,GAAG;AAAA,QACP,WAAW,kBAAkB,WAAW;AAAA,MAAA;AAAA,MAE1C,CAAC,uBAAuB,GAAG;AAAA,QACzB,WAAW,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,IACvC;AAAA,EACF,CACD;AAEH,MAAI,WAAW,UAAU;AACvB,UAAM,OAAO,SAAS,cAAc,GAAG;AACvC,SAAK,YAAY;AACjB,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,UAAU,QAAQ;AACpC,SAAK,aAAa,OAAO,qBAAqB;AAE9C,UAAM,YAAY,OAAO,QAAQ,QAAQ;AAAA,MACvC,SAAS;AAAA,MACT,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,SAAO,UAAU,MAAA;AACnB;"}

package/dist/macros/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../source/macros/slider.ts"],"names":[],"mappings":"yBAgBgB,oEAQb;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;;2BA0B2B,UAAU;;;;;AA1CtC,wBAyGE"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../source/macros/slider.ts"],"names":[],"mappings":"yBAgBgB,oEAQb;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;;2BA0B2B,UAAU;;;;;AA1CtC,wBAwGE"}

package/dist/macros/slider.js

@@ -80,10 +80,8 @@ const slider = ({
           isThemeDark,
           dateSign
         });
-        if (i === 0) {
-          slider2.styles += textLockup.styles;
-          slider2.styles += dateSign.styles;
-        }
+        slider2.styles += textLockup.styles;
+        slider2.styles += dateSign.styles;
         return textLockup;
       }
     );

package/dist/macros/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../source/macros/slider.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { fetchGraphQL } from '@universityofmaryland/web-utilities-library/network';\nimport { slider as elementSlider } from '@universityofmaryland/web-elements-library/composite';\nimport {\n  textLockup as elementTextLockup,\n  events as elementEvents,\n} from '@universityofmaryland/web-elements-library/atomic';\n\ntype TypeSlideFeedResponse = {\n  title: string;\n  startMonth: string;\n  startDay: string;\n  endMonth?: string;\n  endDay?: string;\n};\n\nexport default ({\n  token,\n  query,\n  url,\n  categories,\n  isThemeDark,\n  headline,\n  actions,\n}: {\n  token: string;\n  query: string;\n  url: string;\n  categories?: string | null;\n  isThemeDark?: boolean;\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n}) => {\n  const dataSlider = document.createElement('div');\n  const slider = elementSlider.events({\n    isThemeDark,\n    dataSlider,\n    headline,\n    actions,\n  });\n  let variables: any = { startDate: new Date().toDateString() };\n  let shadowRoot: ShadowRoot | null = null;\n\n  const setShadowStyles = async ({\n    shadowRoot,\n    styles,\n  }: {\n    shadowRoot: ShadowRoot;\n    styles: string;\n  }) => {\n    const styleElement = document.createElement('style');\n    const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(\n      styles,\n    );\n    styleElement.textContent = optimizedCss;\n    shadowRoot.appendChild(styleElement);\n  };\n\n  const callback = (shadow: ShadowRoot) => {\n    shadowRoot = shadow;\n  };\n\n  const loadEvents = async () => {\n    if (categories) {\n      const related = categories.split(',');\n      variables.related = related;\n    }\n\n    const fetchVariables = {\n      query,\n      url,\n      token,\n      variables,\n    };\n\n    const feedData = await fetchGraphQL(fetchVariables);\n\n    const slides: { element: HTMLElement; styles: string }[] =\n      feedData?.data?.entries?.events.map(\n        (data: TypeSlideFeedResponse, i: number) => {\n          const headline = document.createElement('p');\n          headline.textContent = data.title;\n\n          const dateSign = elementEvents.sign({\n            startMonth: data.startMonth,\n            startDay: data.startDay,\n            endDay: data.endDay,\n            endMonth: data.endMonth,\n            isThemeDark,\n          });\n          const textLockup = elementTextLockup.date({\n            headline,\n            isThemeDark,\n            dateSign,\n          });\n\n          if (i === 0) {\n            slider.styles += textLockup.styles;\n            slider.styles += dateSign.styles;\n          }\n\n          return textLockup;\n        },\n      );\n\n    slides?.forEach((slide) => dataSlider.appendChild(slide.element));\n\n    if (shadowRoot) setShadowStyles({ shadowRoot, styles: slider.styles });\n    setTimeout(() => {\n      slider.events.load();\n    }, 100);\n  };\n\n  loadEvents();\n\n  return {\n    ...slider,\n    events: {\n      callback,\n    },\n  };\n};\n"],"names":["slider","elementSlider","shadowRoot","Styles","fetchGraphQL","headline","elementEvents","elementTextLockup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQM;AACJ,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,QAAMA,UAASC,UAAAA,OAAc,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,MAAI,YAAiB,EAAE,gCAAe,KAAA,GAAO,eAAa;AAC1D,MAAI,aAAgC;AAEpC,QAAM,kBAAkB,OAAO;AAAA,IAC7B,YAAAC;AAAAA,IACA;AAAA,EAAA,MAII;AACJ,UAAM,eAAe,SAAS,cAAc,OAAO;AACnD,UAAM,eAAe,MAAMC,kBAAO,UAAU,UAAU,IAAI;AAAA,MACxD;AAAA,IAAA;AAEF,iBAAa,cAAc;AAC3BD,gBAAW,YAAY,YAAY;AAAA,EACrC;AAEA,QAAM,WAAW,CAAC,WAAuB;AACvC,iBAAa;AAAA,EACf;AAEA,QAAM,aAAa,YAAY;AAC7B,QAAI,YAAY;AACd,YAAM,UAAU,WAAW,MAAM,GAAG;AACpC,gBAAU,UAAU;AAAA,IACtB;AAEA,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,WAAW,MAAME,QAAAA,aAAa,cAAc;AAElD,UAAM,SACJ,UAAU,MAAM,SAAS,OAAO;AAAA,MAC9B,CAAC,MAA6B,MAAc;AAC1C,cAAMC,YAAW,SAAS,cAAc,GAAG;AAC3CA,kBAAS,cAAc,KAAK;AAE5B,cAAM,WAAWC,OAAAA,OAAc,KAAK;AAAA,UAClC,YAAY,KAAK;AAAA,UACjB,UAAU,KAAK;AAAA,UACf,QAAQ,KAAK;AAAA,UACb,UAAU,KAAK;AAAA,UACf;AAAA,QAAA,CACD;AACD,cAAM,aAAaC,OAAAA,WAAkB,KAAK;AAAA,UACxC,UAAAF;AAAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAED,YAAI,MAAM,GAAG;AACX,UAAAL,QAAO,UAAU,WAAW;AAC5B,UAAAA,QAAO,UAAU,SAAS;AAAA,QAC5B;AAEA,eAAO;AAAA,MACT;AAAA,IAAA;AAGJ,YAAQ,QAAQ,CAAC,UAAU,WAAW,YAAY,MAAM,OAAO,CAAC;AAEhE,QAAI,WAAY,iBAAgB,EAAE,YAAY,QAAQA,QAAO,QAAQ;AACrE,eAAW,MAAM;AACf,MAAAA,QAAO,OAAO,KAAA;AAAA,IAChB,GAAG,GAAG;AAAA,EACR;AAEA,aAAA;AAEA,SAAO;AAAA,IACL,GAAGA;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"slider.js","sources":["../../source/macros/slider.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { fetchGraphQL } from '@universityofmaryland/web-utilities-library/network';\nimport { slider as elementSlider } from '@universityofmaryland/web-elements-library/composite';\nimport {\n  textLockup as elementTextLockup,\n  events as elementEvents,\n} from '@universityofmaryland/web-elements-library/atomic';\n\ntype TypeSlideFeedResponse = {\n  title: string;\n  startMonth: string;\n  startDay: string;\n  endMonth?: string;\n  endDay?: string;\n};\n\nexport default ({\n  token,\n  query,\n  url,\n  categories,\n  isThemeDark,\n  headline,\n  actions,\n}: {\n  token: string;\n  query: string;\n  url: string;\n  categories?: string | null;\n  isThemeDark?: boolean;\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n}) => {\n  const dataSlider = document.createElement('div');\n  const slider = elementSlider.events({\n    isThemeDark,\n    dataSlider,\n    headline,\n    actions,\n  });\n  let variables: any = { startDate: new Date().toDateString() };\n  let shadowRoot: ShadowRoot | null = null;\n\n  const setShadowStyles = async ({\n    shadowRoot,\n    styles,\n  }: {\n    shadowRoot: ShadowRoot;\n    styles: string;\n  }) => {\n    const styleElement = document.createElement('style');\n    const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(\n      styles,\n    );\n    styleElement.textContent = optimizedCss;\n    shadowRoot.appendChild(styleElement);\n  };\n\n  const callback = (shadow: ShadowRoot) => {\n    shadowRoot = shadow;\n  };\n\n  const loadEvents = async () => {\n    if (categories) {\n      const related = categories.split(',');\n      variables.related = related;\n    }\n\n    const fetchVariables = {\n      query,\n      url,\n      token,\n      variables,\n    };\n\n    const feedData = await fetchGraphQL(fetchVariables);\n\n    const slides: { element: HTMLElement; styles: string }[] =\n      feedData?.data?.entries?.events.map(\n        (data: TypeSlideFeedResponse, i: number) => {\n          const headline = document.createElement('p');\n          headline.textContent = data.title;\n\n          const dateSign = elementEvents.sign({\n            startMonth: data.startMonth,\n            startDay: data.startDay,\n            endDay: data.endDay,\n            endMonth: data.endMonth,\n            isThemeDark,\n          });\n\n          const textLockup = elementTextLockup.date({\n            headline,\n            isThemeDark,\n            dateSign,\n          });\n\n          slider.styles += textLockup.styles;\n          slider.styles += dateSign.styles;\n\n          return textLockup;\n        },\n      );\n\n    slides?.forEach((slide) => dataSlider.appendChild(slide.element));\n\n    if (shadowRoot) setShadowStyles({ shadowRoot, styles: slider.styles });\n    setTimeout(() => {\n      slider.events.load();\n    }, 100);\n  };\n\n  loadEvents();\n\n  return {\n    ...slider,\n    events: {\n      callback,\n    },\n  };\n};\n"],"names":["slider","elementSlider","shadowRoot","Styles","fetchGraphQL","headline","elementEvents","elementTextLockup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQM;AACJ,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,QAAMA,UAASC,UAAAA,OAAc,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,MAAI,YAAiB,EAAE,gCAAe,KAAA,GAAO,eAAa;AAC1D,MAAI,aAAgC;AAEpC,QAAM,kBAAkB,OAAO;AAAA,IAC7B,YAAAC;AAAAA,IACA;AAAA,EAAA,MAII;AACJ,UAAM,eAAe,SAAS,cAAc,OAAO;AACnD,UAAM,eAAe,MAAMC,kBAAO,UAAU,UAAU,IAAI;AAAA,MACxD;AAAA,IAAA;AAEF,iBAAa,cAAc;AAC3BD,gBAAW,YAAY,YAAY;AAAA,EACrC;AAEA,QAAM,WAAW,CAAC,WAAuB;AACvC,iBAAa;AAAA,EACf;AAEA,QAAM,aAAa,YAAY;AAC7B,QAAI,YAAY;AACd,YAAM,UAAU,WAAW,MAAM,GAAG;AACpC,gBAAU,UAAU;AAAA,IACtB;AAEA,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,WAAW,MAAME,QAAAA,aAAa,cAAc;AAElD,UAAM,SACJ,UAAU,MAAM,SAAS,OAAO;AAAA,MAC9B,CAAC,MAA6B,MAAc;AAC1C,cAAMC,YAAW,SAAS,cAAc,GAAG;AAC3CA,kBAAS,cAAc,KAAK;AAE5B,cAAM,WAAWC,OAAAA,OAAc,KAAK;AAAA,UAClC,YAAY,KAAK;AAAA,UACjB,UAAU,KAAK;AAAA,UACf,QAAQ,KAAK;AAAA,UACb,UAAU,KAAK;AAAA,UACf;AAAA,QAAA,CACD;AAED,cAAM,aAAaC,OAAAA,WAAkB,KAAK;AAAA,UACxC,UAAAF;AAAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAED,QAAAL,QAAO,UAAU,WAAW;AAC5B,QAAAA,QAAO,UAAU,SAAS;AAE1B,eAAO;AAAA,MACT;AAAA,IAAA;AAGJ,YAAQ,QAAQ,CAAC,UAAU,WAAW,YAAY,MAAM,OAAO,CAAC;AAEhE,QAAI,WAAY,iBAAgB,EAAE,YAAY,QAAQA,QAAO,QAAQ;AACrE,eAAW,MAAM;AACf,MAAAA,QAAO,OAAO,KAAA;AAAA,IAChB,GAAG,GAAG;AAAA,EACR;AAEA,aAAA;AAEA,SAAO;AAAA,IACL,GAAGA;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;;"}

package/dist/macros/slider.mjs

@@ -62,10 +62,8 @@ const slider = ({
           isThemeDark,
           dateSign
         });
-        if (i === 0) {
-          slider2.styles += textLockup$1.styles;
-          slider2.styles += dateSign.styles;
-        }
+        slider2.styles += textLockup$1.styles;
+        slider2.styles += dateSign.styles;
         return textLockup$1;
       }
     );

package/dist/macros/slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.mjs","sources":["../../source/macros/slider.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { fetchGraphQL } from '@universityofmaryland/web-utilities-library/network';\nimport { slider as elementSlider } from '@universityofmaryland/web-elements-library/composite';\nimport {\n  textLockup as elementTextLockup,\n  events as elementEvents,\n} from '@universityofmaryland/web-elements-library/atomic';\n\ntype TypeSlideFeedResponse = {\n  title: string;\n  startMonth: string;\n  startDay: string;\n  endMonth?: string;\n  endDay?: string;\n};\n\nexport default ({\n  token,\n  query,\n  url,\n  categories,\n  isThemeDark,\n  headline,\n  actions,\n}: {\n  token: string;\n  query: string;\n  url: string;\n  categories?: string | null;\n  isThemeDark?: boolean;\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n}) => {\n  const dataSlider = document.createElement('div');\n  const slider = elementSlider.events({\n    isThemeDark,\n    dataSlider,\n    headline,\n    actions,\n  });\n  let variables: any = { startDate: new Date().toDateString() };\n  let shadowRoot: ShadowRoot | null = null;\n\n  const setShadowStyles = async ({\n    shadowRoot,\n    styles,\n  }: {\n    shadowRoot: ShadowRoot;\n    styles: string;\n  }) => {\n    const styleElement = document.createElement('style');\n    const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(\n      styles,\n    );\n    styleElement.textContent = optimizedCss;\n    shadowRoot.appendChild(styleElement);\n  };\n\n  const callback = (shadow: ShadowRoot) => {\n    shadowRoot = shadow;\n  };\n\n  const loadEvents = async () => {\n    if (categories) {\n      const related = categories.split(',');\n      variables.related = related;\n    }\n\n    const fetchVariables = {\n      query,\n      url,\n      token,\n      variables,\n    };\n\n    const feedData = await fetchGraphQL(fetchVariables);\n\n    const slides: { element: HTMLElement; styles: string }[] =\n      feedData?.data?.entries?.events.map(\n        (data: TypeSlideFeedResponse, i: number) => {\n          const headline = document.createElement('p');\n          headline.textContent = data.title;\n\n          const dateSign = elementEvents.sign({\n            startMonth: data.startMonth,\n            startDay: data.startDay,\n            endDay: data.endDay,\n            endMonth: data.endMonth,\n            isThemeDark,\n          });\n          const textLockup = elementTextLockup.date({\n            headline,\n            isThemeDark,\n            dateSign,\n          });\n\n          if (i === 0) {\n            slider.styles += textLockup.styles;\n            slider.styles += dateSign.styles;\n          }\n\n          return textLockup;\n        },\n      );\n\n    slides?.forEach((slide) => dataSlider.appendChild(slide.element));\n\n    if (shadowRoot) setShadowStyles({ shadowRoot, styles: slider.styles });\n    setTimeout(() => {\n      slider.events.load();\n    }, 100);\n  };\n\n  loadEvents();\n\n  return {\n    ...slider,\n    events: {\n      callback,\n    },\n  };\n};\n"],"names":["slider","elementSlider","shadowRoot","headline","elementEvents","textLockup","elementTextLockup"],"mappings":";;;;AAgBA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQM;AACJ,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,QAAMA,UAASC,SAAc,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,MAAI,YAAiB,EAAE,gCAAe,KAAA,GAAO,eAAa;AAC1D,MAAI,aAAgC;AAEpC,QAAM,kBAAkB,OAAO;AAAA,IAC7B,YAAAC;AAAAA,IACA;AAAA,EAAA,MAII;AACJ,UAAM,eAAe,SAAS,cAAc,OAAO;AACnD,UAAM,eAAe,MAAM,OAAO,UAAU,UAAU,IAAI;AAAA,MACxD;AAAA,IAAA;AAEF,iBAAa,cAAc;AAC3BA,gBAAW,YAAY,YAAY;AAAA,EACrC;AAEA,QAAM,WAAW,CAAC,WAAuB;AACvC,iBAAa;AAAA,EACf;AAEA,QAAM,aAAa,YAAY;AAC7B,QAAI,YAAY;AACd,YAAM,UAAU,WAAW,MAAM,GAAG;AACpC,gBAAU,UAAU;AAAA,IACtB;AAEA,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,WAAW,MAAM,aAAa,cAAc;AAElD,UAAM,SACJ,UAAU,MAAM,SAAS,OAAO;AAAA,MAC9B,CAAC,MAA6B,MAAc;AAC1C,cAAMC,YAAW,SAAS,cAAc,GAAG;AAC3CA,kBAAS,cAAc,KAAK;AAE5B,cAAM,WAAWC,OAAc,KAAK;AAAA,UAClC,YAAY,KAAK;AAAA,UACjB,UAAU,KAAK;AAAA,UACf,QAAQ,KAAK;AAAA,UACb,UAAU,KAAK;AAAA,UACf;AAAA,QAAA,CACD;AACD,cAAMC,eAAaC,WAAkB,KAAK;AAAA,UACxC,UAAAH;AAAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAED,YAAI,MAAM,GAAG;AACX,UAAAH,QAAO,UAAUK,aAAW;AAC5B,UAAAL,QAAO,UAAU,SAAS;AAAA,QAC5B;AAEA,eAAOK;AAAAA,MACT;AAAA,IAAA;AAGJ,YAAQ,QAAQ,CAAC,UAAU,WAAW,YAAY,MAAM,OAAO,CAAC;AAEhE,QAAI,WAAY,iBAAgB,EAAE,YAAY,QAAQL,QAAO,QAAQ;AACrE,eAAW,MAAM;AACf,MAAAA,QAAO,OAAO,KAAA;AAAA,IAChB,GAAG,GAAG;AAAA,EACR;AAEA,aAAA;AAEA,SAAO;AAAA,IACL,GAAGA;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"slider.mjs","sources":["../../source/macros/slider.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { fetchGraphQL } from '@universityofmaryland/web-utilities-library/network';\nimport { slider as elementSlider } from '@universityofmaryland/web-elements-library/composite';\nimport {\n  textLockup as elementTextLockup,\n  events as elementEvents,\n} from '@universityofmaryland/web-elements-library/atomic';\n\ntype TypeSlideFeedResponse = {\n  title: string;\n  startMonth: string;\n  startDay: string;\n  endMonth?: string;\n  endDay?: string;\n};\n\nexport default ({\n  token,\n  query,\n  url,\n  categories,\n  isThemeDark,\n  headline,\n  actions,\n}: {\n  token: string;\n  query: string;\n  url: string;\n  categories?: string | null;\n  isThemeDark?: boolean;\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n}) => {\n  const dataSlider = document.createElement('div');\n  const slider = elementSlider.events({\n    isThemeDark,\n    dataSlider,\n    headline,\n    actions,\n  });\n  let variables: any = { startDate: new Date().toDateString() };\n  let shadowRoot: ShadowRoot | null = null;\n\n  const setShadowStyles = async ({\n    shadowRoot,\n    styles,\n  }: {\n    shadowRoot: ShadowRoot;\n    styles: string;\n  }) => {\n    const styleElement = document.createElement('style');\n    const optimizedCss = await Styles.utilities.transform.css.removeDuplicates(\n      styles,\n    );\n    styleElement.textContent = optimizedCss;\n    shadowRoot.appendChild(styleElement);\n  };\n\n  const callback = (shadow: ShadowRoot) => {\n    shadowRoot = shadow;\n  };\n\n  const loadEvents = async () => {\n    if (categories) {\n      const related = categories.split(',');\n      variables.related = related;\n    }\n\n    const fetchVariables = {\n      query,\n      url,\n      token,\n      variables,\n    };\n\n    const feedData = await fetchGraphQL(fetchVariables);\n\n    const slides: { element: HTMLElement; styles: string }[] =\n      feedData?.data?.entries?.events.map(\n        (data: TypeSlideFeedResponse, i: number) => {\n          const headline = document.createElement('p');\n          headline.textContent = data.title;\n\n          const dateSign = elementEvents.sign({\n            startMonth: data.startMonth,\n            startDay: data.startDay,\n            endDay: data.endDay,\n            endMonth: data.endMonth,\n            isThemeDark,\n          });\n\n          const textLockup = elementTextLockup.date({\n            headline,\n            isThemeDark,\n            dateSign,\n          });\n\n          slider.styles += textLockup.styles;\n          slider.styles += dateSign.styles;\n\n          return textLockup;\n        },\n      );\n\n    slides?.forEach((slide) => dataSlider.appendChild(slide.element));\n\n    if (shadowRoot) setShadowStyles({ shadowRoot, styles: slider.styles });\n    setTimeout(() => {\n      slider.events.load();\n    }, 100);\n  };\n\n  loadEvents();\n\n  return {\n    ...slider,\n    events: {\n      callback,\n    },\n  };\n};\n"],"names":["slider","elementSlider","shadowRoot","headline","elementEvents","textLockup","elementTextLockup"],"mappings":";;;;AAgBA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQM;AACJ,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,QAAMA,UAASC,SAAc,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,MAAI,YAAiB,EAAE,gCAAe,KAAA,GAAO,eAAa;AAC1D,MAAI,aAAgC;AAEpC,QAAM,kBAAkB,OAAO;AAAA,IAC7B,YAAAC;AAAAA,IACA;AAAA,EAAA,MAII;AACJ,UAAM,eAAe,SAAS,cAAc,OAAO;AACnD,UAAM,eAAe,MAAM,OAAO,UAAU,UAAU,IAAI;AAAA,MACxD;AAAA,IAAA;AAEF,iBAAa,cAAc;AAC3BA,gBAAW,YAAY,YAAY;AAAA,EACrC;AAEA,QAAM,WAAW,CAAC,WAAuB;AACvC,iBAAa;AAAA,EACf;AAEA,QAAM,aAAa,YAAY;AAC7B,QAAI,YAAY;AACd,YAAM,UAAU,WAAW,MAAM,GAAG;AACpC,gBAAU,UAAU;AAAA,IACtB;AAEA,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,WAAW,MAAM,aAAa,cAAc;AAElD,UAAM,SACJ,UAAU,MAAM,SAAS,OAAO;AAAA,MAC9B,CAAC,MAA6B,MAAc;AAC1C,cAAMC,YAAW,SAAS,cAAc,GAAG;AAC3CA,kBAAS,cAAc,KAAK;AAE5B,cAAM,WAAWC,OAAc,KAAK;AAAA,UAClC,YAAY,KAAK;AAAA,UACjB,UAAU,KAAK;AAAA,UACf,QAAQ,KAAK;AAAA,UACb,UAAU,KAAK;AAAA,UACf;AAAA,QAAA,CACD;AAED,cAAMC,eAAaC,WAAkB,KAAK;AAAA,UACxC,UAAAH;AAAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAED,QAAAH,QAAO,UAAUK,aAAW;AAC5B,QAAAL,QAAO,UAAU,SAAS;AAE1B,eAAOK;AAAAA,MACT;AAAA,IAAA;AAGJ,YAAQ,QAAQ,CAAC,UAAU,WAAW,YAAY,MAAM,OAAO,CAAC;AAEhE,QAAI,WAAY,iBAAgB,EAAE,YAAY,QAAQL,QAAO,QAAQ;AACrE,eAAW,MAAM;AACf,MAAAA,QAAO,OAAO,KAAA;AAAA,IAChB,GAAG,GAAG;AAAA,EACR;AAEA,aAAA;AAEA,SAAO;AAAA,IACL,GAAGA;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}