@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/carousel/wide/controls.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../../utilities/assets/icons.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const index = require("../../../model/elements/index.js");
+const indicator = require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const _elementModel = require("./_elementModel.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const createControlButton = (type, isThemeDark) => {
+  const isPrev = type === "prev";
+  const altText = isPrev ? "Reverse to the previous Slide" : "Advanced to the Next Slide";
+  const buttonTabletPosition = `calc(10vw - (${Styles__namespace.token.spacing.md} + ${Styles__namespace.token.spacing.md}))`;
+  const buttonDesktopPosition = `calc(15vw - (${Styles__namespace.token.spacing["xl"]} + ${Styles__namespace.token.spacing.md}))`;
+  const buttonHighPosition = `calc(20vw - (${Styles__namespace.token.spacing["xl"]} + ${Styles__namespace.token.spacing.md}))`;
+  const button = index.create({
+    element: document.createElement("button"),
+    className: isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next",
+    elementStyles: {
+      element: {
+        backgroundColor: isThemeDark ? Styles__namespace.token.color.red : Styles__namespace.token.color.white,
+        height: Styles__namespace.token.spacing.lg,
+        padding: Styles__namespace.token.spacing.min,
+        position: "absolute",
+        transform: `${isPrev ? " rotate(180deg)" : ""}`,
+        zIndex: 3,
+        transition: "background 0.5s",
+        width: Styles__namespace.token.spacing.lg,
+        [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
+          top: `calc(22vw + ${Styles__namespace.token.spacing.sm})`,
+          left: isPrev ? "auto" : `${Styles__namespace.token.spacing["xl"]}`,
+          right: isPrev ? `${Styles__namespace.token.spacing["xl"]}` : "auto"
+        },
+        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+          left: isPrev ? "auto" : buttonTabletPosition,
+          right: isPrev ? buttonTabletPosition : "auto",
+          bottom: "35%"
+        },
+        [`@media (${Styles__namespace.token.media.queries.desktop.min})`]: {
+          width: Styles__namespace.token.spacing["2xl"],
+          height: Styles__namespace.token.spacing["2xl"],
+          padding: Styles__namespace.token.spacing.xs,
+          left: isPrev ? "auto" : buttonDesktopPosition,
+          right: isPrev ? buttonDesktopPosition : "auto"
+        },
+        [`@media (${Styles__namespace.token.media.queries.highDef.min})`]: {
+          left: isPrev ? "auto" : buttonHighPosition,
+          right: isPrev ? buttonHighPosition : "auto"
+        },
+        "& svg": {
+          height: "100%",
+          width: "100%",
+          fill: isThemeDark ? Styles__namespace.token.color.white : Styles__namespace.token.color.black,
+          transition: "fill 0.5s"
+        },
+        "&:hover, &:focus": {
+          backgroundColor: isThemeDark ? Styles__namespace.token.color.redDark : Styles__namespace.token.color.red,
+          "& svg": {
+            fill: Styles__namespace.token.color.white
+          }
+        }
+      }
+    }
+  });
+  const srText = index.create({
+    element: document.createElement("span"),
+    className: "sr-only"
+  });
+  srText.element.textContent = altText;
+  button.element.append(srText.element);
+  button.element.insertAdjacentHTML("afterbegin", icons.BACK_ARROW);
+  return button;
+};
+const createIndicator = (slides, isThemeDark, callback) => {
+  const indicator$1 = indicator({
+    count: slides.length,
+    isThemeDark,
+    callback: callback || (() => {
+    })
+  });
+  return _elementModel.createElementWithRefs({
+    className: "umd-carousel-wide__drawer",
+    children: [indicator$1],
+    elementStyles: {
+      element: {
+        display: "flex",
+        justifyContent: "center",
+        margin: "auto",
+        padding: Styles__namespace.token.spacing.md,
+        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          padding: 0,
+          paddingTop: Styles__namespace.token.spacing.lg
+        }
+      }
+    },
+    refs: {
+      indicator: indicator$1
+    }
+  });
+};
+exports.createControlButton = createControlButton;
+exports.createIndicator = createIndicator;
+//# sourceMappingURL=controls.js.map

package/dist/composite/carousel/wide/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset } from 'utilities';\nimport { animations } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n\n  const button = ElementModel.create({\n    element: document.createElement('button'),\n    className: isPrev\n      ? 'umd-carousel-wide__control--prev'\n      : 'umd-carousel-wide__control--next',\n    elementStyles: {\n      element: {\n        backgroundColor: isThemeDark\n          ? Styles.token.color.red\n          : Styles.token.color.white,\n        height: Styles.token.spacing.lg,\n        padding: Styles.token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: Styles.token.spacing.lg,\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${Styles.token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${Styles.token.spacing['xl']}`,\n          right: isPrev ? `${Styles.token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          width: Styles.token.spacing['2xl'],\n          height: Styles.token.spacing['2xl'],\n          padding: Styles.token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark\n            ? Styles.token.color.white\n            : Styles.token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark\n            ? Styles.token.color.redDark\n            : Styles.token.color.red,\n\n          '& svg': {\n            fill: Styles.token.color.white,\n          },\n        },\n      },\n    },\n  });\n\n  const srText = ElementModel.create({\n    element: document.createElement('span'),\n    className: 'sr-only',\n  });\n  srText.element.textContent = altText;\n\n  button.element.append(srText.element);\n  button.element.insertAdjacentHTML('afterbegin', asset.icon.BACK_ARROW);\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: Styles.token.spacing.md,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: Styles.token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["Styles","ElementModel.create","asset.icon.BACK_ARROW","indicator","animations.actions.indicator","createElementWithRefs"],"mappings":"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"}

package/dist/composite/carousel/wide/controls.mjs

@@ -0,0 +1,111 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { BACK_ARROW } from "../../../utilities/assets/icons.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { create } from "../../../model/elements/index.mjs";
+import indicator from "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+import { createElementWithRefs } from "./_elementModel.mjs";
+const createControlButton = (type, isThemeDark) => {
+  const isPrev = type === "prev";
+  const altText = isPrev ? "Reverse to the previous Slide" : "Advanced to the Next Slide";
+  const buttonTabletPosition = `calc(10vw - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;
+  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing["xl"]} + ${Styles.token.spacing.md}))`;
+  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing["xl"]} + ${Styles.token.spacing.md}))`;
+  const button = create({
+    element: document.createElement("button"),
+    className: isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next",
+    elementStyles: {
+      element: {
+        backgroundColor: isThemeDark ? Styles.token.color.red : Styles.token.color.white,
+        height: Styles.token.spacing.lg,
+        padding: Styles.token.spacing.min,
+        position: "absolute",
+        transform: `${isPrev ? " rotate(180deg)" : ""}`,
+        zIndex: 3,
+        transition: "background 0.5s",
+        width: Styles.token.spacing.lg,
+        [`@media (${Styles.token.media.queries.large.max})`]: {
+          top: `calc(22vw + ${Styles.token.spacing.sm})`,
+          left: isPrev ? "auto" : `${Styles.token.spacing["xl"]}`,
+          right: isPrev ? `${Styles.token.spacing["xl"]}` : "auto"
+        },
+        [`@media (${Styles.token.media.queries.tablet.min})`]: {
+          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+          left: isPrev ? "auto" : buttonTabletPosition,
+          right: isPrev ? buttonTabletPosition : "auto",
+          bottom: "35%"
+        },
+        [`@media (${Styles.token.media.queries.desktop.min})`]: {
+          width: Styles.token.spacing["2xl"],
+          height: Styles.token.spacing["2xl"],
+          padding: Styles.token.spacing.xs,
+          left: isPrev ? "auto" : buttonDesktopPosition,
+          right: isPrev ? buttonDesktopPosition : "auto"
+        },
+        [`@media (${Styles.token.media.queries.highDef.min})`]: {
+          left: isPrev ? "auto" : buttonHighPosition,
+          right: isPrev ? buttonHighPosition : "auto"
+        },
+        "& svg": {
+          height: "100%",
+          width: "100%",
+          fill: isThemeDark ? Styles.token.color.white : Styles.token.color.black,
+          transition: "fill 0.5s"
+        },
+        "&:hover, &:focus": {
+          backgroundColor: isThemeDark ? Styles.token.color.redDark : Styles.token.color.red,
+          "& svg": {
+            fill: Styles.token.color.white
+          }
+        }
+      }
+    }
+  });
+  const srText = create({
+    element: document.createElement("span"),
+    className: "sr-only"
+  });
+  srText.element.textContent = altText;
+  button.element.append(srText.element);
+  button.element.insertAdjacentHTML("afterbegin", BACK_ARROW);
+  return button;
+};
+const createIndicator = (slides, isThemeDark, callback) => {
+  const indicator$1 = indicator({
+    count: slides.length,
+    isThemeDark,
+    callback: callback || (() => {
+    })
+  });
+  return createElementWithRefs({
+    className: "umd-carousel-wide__drawer",
+    children: [indicator$1],
+    elementStyles: {
+      element: {
+        display: "flex",
+        justifyContent: "center",
+        margin: "auto",
+        padding: Styles.token.spacing.md,
+        [`@media (${Styles.token.media.queries.tablet.min})`]: {
+          padding: 0,
+          paddingTop: Styles.token.spacing.lg
+        }
+      }
+    },
+    refs: {
+      indicator: indicator$1
+    }
+  });
+};
+export {
+  createControlButton,
+  createIndicator
+};
+//# sourceMappingURL=controls.mjs.map

package/dist/composite/carousel/wide/controls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.mjs","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset } from 'utilities';\nimport { animations } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n\n  const button = ElementModel.create({\n    element: document.createElement('button'),\n    className: isPrev\n      ? 'umd-carousel-wide__control--prev'\n      : 'umd-carousel-wide__control--next',\n    elementStyles: {\n      element: {\n        backgroundColor: isThemeDark\n          ? Styles.token.color.red\n          : Styles.token.color.white,\n        height: Styles.token.spacing.lg,\n        padding: Styles.token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: Styles.token.spacing.lg,\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${Styles.token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${Styles.token.spacing['xl']}`,\n          right: isPrev ? `${Styles.token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          width: Styles.token.spacing['2xl'],\n          height: Styles.token.spacing['2xl'],\n          padding: Styles.token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark\n            ? Styles.token.color.white\n            : Styles.token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark\n            ? Styles.token.color.redDark\n            : Styles.token.color.red,\n\n          '& svg': {\n            fill: Styles.token.color.white,\n          },\n        },\n      },\n    },\n  });\n\n  const srText = ElementModel.create({\n    element: document.createElement('span'),\n    className: 'sr-only',\n  });\n  srText.element.textContent = altText;\n\n  button.element.append(srText.element);\n  button.element.insertAdjacentHTML('afterbegin', asset.icon.BACK_ARROW);\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: Styles.token.spacing.md,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: Styles.token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["ElementModel.create","asset.icon.BACK_ARROW","indicator","animations.actions.indicator"],"mappings":";;;;;;;;;;;;;;AAOO,MAAM,sBAAsB,CACjC,MACA,gBACG;AACH,QAAM,SAAS,SAAS;AACxB,QAAM,UAAU,SACZ,kCACA;AAEJ,QAAM,uBAAuB,gBAAgB,OAAO,MAAM,QAAQ,EAAE,MAAM,OAAO,MAAM,QAAQ,EAAE;AACjG,QAAM,wBAAwB,gBAAgB,OAAO,MAAM,QAAQ,IAAI,CAAC,MAAM,OAAO,MAAM,QAAQ,EAAE;AACrG,QAAM,qBAAqB,gBAAgB,OAAO,MAAM,QAAQ,IAAI,CAAC,MAAM,OAAO,MAAM,QAAQ,EAAE;AAElG,QAAM,SAASA,OAAoB;AAAA,IACjC,SAAS,SAAS,cAAc,QAAQ;AAAA,IACxC,WAAW,SACP,qCACA;AAAA,IACJ,eAAe;AAAA,MACb,SAAS;AAAA,QACP,iBAAiB,cACb,OAAO,MAAM,MAAM,MACnB,OAAO,MAAM,MAAM;AAAA,QACvB,QAAQ,OAAO,MAAM,QAAQ;AAAA,QAC7B,SAAS,OAAO,MAAM,QAAQ;AAAA,QAC9B,UAAU;AAAA,QACV,WAAW,GAAG,SAAS,oBAAoB,EAAE;AAAA,QAC7C,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,OAAO,OAAO,MAAM,QAAQ;AAAA,QAE5B,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UACpD,KAAK,eAAe,OAAO,MAAM,QAAQ,EAAE;AAAA,UAC3C,MAAM,SAAS,SAAS,GAAG,OAAO,MAAM,QAAQ,IAAI,CAAC;AAAA,UACrD,OAAO,SAAS,GAAG,OAAO,MAAM,QAAQ,IAAI,CAAC,KAAK;AAAA,QAAA;AAAA,QAGpD,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACrD,WAAW;AAAA,UACX,MAAM,SAAS,SAAS;AAAA,UACxB,OAAO,SAAS,uBAAuB;AAAA,UACvC,QAAQ;AAAA,QAAA;AAAA,QAGV,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UACtD,OAAO,OAAO,MAAM,QAAQ,KAAK;AAAA,UACjC,QAAQ,OAAO,MAAM,QAAQ,KAAK;AAAA,UAClC,SAAS,OAAO,MAAM,QAAQ;AAAA,UAC9B,MAAM,SAAS,SAAS;AAAA,UACxB,OAAO,SAAS,wBAAwB;AAAA,QAAA;AAAA,QAG1C,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UACtD,MAAM,SAAS,SAAS;AAAA,UACxB,OAAO,SAAS,qBAAqB;AAAA,QAAA;AAAA,QAGvC,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM,cACF,OAAO,MAAM,MAAM,QACnB,OAAO,MAAM,MAAM;AAAA,UACvB,YAAY;AAAA,QAAA;AAAA,QAGd,oBAAoB;AAAA,UAClB,iBAAiB,cACb,OAAO,MAAM,MAAM,UACnB,OAAO,MAAM,MAAM;AAAA,UAEvB,SAAS;AAAA,YACP,MAAM,OAAO,MAAM,MAAM;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,SAASA,OAAoB;AAAA,IACjC,SAAS,SAAS,cAAc,MAAM;AAAA,IACtC,WAAW;AAAA,EAAA,CACZ;AACD,SAAO,QAAQ,cAAc;AAE7B,SAAO,QAAQ,OAAO,OAAO,OAAO;AACpC,SAAO,QAAQ,mBAAmB,cAAcC,UAAqB;AAErE,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,QACA,aACA,aACG;AACH,QAAMC,cAAYC,UAA6B;AAAA,IAC7C,OAAO,OAAO;AAAA,IACd;AAAA,IACA,UAAU,aAAa,MAAM;AAAA,IAAC;AAAA,EAAA,CAC/B;AAED,SAAO,sBAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAACD,WAAS;AAAA,IACpB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,SAAS,OAAO,MAAM,QAAQ;AAAA,QAE9B,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACrD,SAAS;AAAA,UACT,YAAY,OAAO,MAAM,QAAQ;AAAA,QAAA;AAAA,MACnC;AAAA,IACF;AAAA,IAEF,MAAM;AAAA,MAAA,WACJA;AAAAA,IAAA;AAAA,EACF,CACD;AACH;"}

package/dist/composite/carousel/wide/frames.d.ts

@@ -0,0 +1,14 @@
+import { CarouselWideProps } from '../_types';
+export declare const createFramesContainer: (slides: CarouselWideProps["slides"], isThemeDark?: boolean) => import('./_elementModel').ElementWithRefsReturn<{
+    slidesContainer: HTMLDivElement;
+    slides: HTMLElement[];
+    previews: {
+        left: HTMLElement;
+        right: HTMLElement;
+    };
+    controls: {
+        prev: HTMLButtonElement;
+        next: HTMLButtonElement;
+    };
+}>;
+//# sourceMappingURL=frames.d.ts.map

package/dist/composite/carousel/wide/frames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/frames.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AA+RnD,eAAO,MAAM,qBAAqB,GAChC,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO;qBA4CmC,cAAc;;;cAGnC,WAAW;eACT,WAAW;;;cAGV,iBAAiB;cACrB,iBAAiB;;EAIpD,CAAC"}

package/dist/composite/carousel/wide/frames.js

@@ -0,0 +1,322 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const index = require("../../../model/elements/index.js");
+require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+const background = require("../../../atomic/assets/image/background.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const _elementModel = require("./_elementModel.js");
+const controls = require("./controls.js");
+const headline = require("../../../model/elements/headline.js");
+const richText = require("../../../model/elements/rich-text.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const ASPECT_RATIO = "16 / 9";
+const createSlideContent = ({
+  slide,
+  isThemeDark
+}) => {
+  const children = [];
+  let contentContainer = null;
+  const closeButton = index.create({
+    element: document.createElement("button"),
+    className: "umd-carousel-wide__slide-content-close",
+    attributes: [{ type: "button" }, { "aria-label": "Close content" }],
+    elementStyles: {
+      element: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        fontSize: "20px",
+        fontWeight: "bold",
+        padding: Styles__namespace.token.spacing.min,
+        lineHeight: 1,
+        color: Styles__namespace.token.color.gray.dark,
+        transition: "color 0.2s ease",
+        [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
+          display: "none"
+        },
+        "&:hover, &:focus": {
+          outline: `2px solid ${Styles__namespace.token.color.blue}`
+        },
+        ...isThemeDark && {
+          color: Styles__namespace.token.color.gray.light,
+          "&:hover": {
+            color: Styles__namespace.token.color.white
+          }
+        }
+      }
+    }
+  });
+  closeButton.element.innerHTML = "×";
+  closeButton.element.addEventListener("click", () => {
+    if (contentContainer) contentContainer.element.style.display = "none";
+  });
+  children.push(closeButton);
+  if (slide.headline) {
+    children.push(
+      headline.sansLarge({
+        element: slide.headline,
+        elementStyles: {
+          element: {
+            color: `${Styles__namespace.token.color.black}`
+          },
+          siblingAfter: {
+            marginTop: Styles__namespace.token.spacing.sm
+          }
+        },
+        isThemeDark
+      })
+    );
+  }
+  if (slide.text) {
+    children.push(
+      richText.simple({
+        element: slide.text,
+        isThemeDark
+      })
+    );
+  }
+  if (children.length === 1) return null;
+  contentContainer = index.createDiv({
+    className: "umd-carousel-wide__slide-content",
+    children,
+    elementStyles: {
+      element: {
+        backgroundColor: Styles__namespace.token.color.white,
+        border: `1px solid ${Styles__namespace.token.color.gray.light}`,
+        display: "block",
+        padding: Styles__namespace.token.spacing.md,
+        width: "100%",
+        position: "relative",
+        opacity: 0,
+        transform: "translateY(20px)",
+        transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
+        ...isThemeDark && {
+          backgroundColor: Styles__namespace.token.color.black,
+          border: `1px solid ${Styles__namespace.token.color.gray.dark}`
+        },
+        [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
+          borderTop: "none"
+        },
+        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          border: "none",
+          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+          maxWidth: "50%",
+          position: "absolute",
+          bottom: Styles__namespace.token.spacing.sm,
+          left: Styles__namespace.token.spacing.sm,
+          ...isThemeDark && {
+            border: "none",
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  });
+  return contentContainer;
+};
+const createMainFrameSlide = (slide, index$1, isThemeDark) => {
+  const children = [];
+  const slideContentWrapper = createSlideContent({ slide, isThemeDark });
+  children.push(
+    background({
+      element: slide.image,
+      isScaled: true
+    })
+  );
+  if (slideContentWrapper) children.push(slideContentWrapper);
+  return index.create({
+    element: document.createElement("figure"),
+    className: "umd-carousel-wide__slide",
+    children,
+    attributes: [{ "data-index": `${index$1}` }],
+    elementStyles: {
+      element: {
+        display: "none",
+        opacity: 0,
+        transition: "opacity 0.3s ease-in-out, transform 0.5s ease-in-out",
+        transform: "translateX(0)",
+        aspectRatio: ASPECT_RATIO,
+        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          top: 0,
+          left: 0
+        },
+        '&[data-active="true"]': {
+          opacity: 1,
+          transform: "translateX(0)",
+          zIndex: 2,
+          display: "block"
+        },
+        '&[data-animating="true"]': {
+          zIndex: 1,
+          display: "block",
+          opacity: 1,
+          [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
+            position: "absolute",
+            width: "100%",
+            top: 0,
+            left: 0
+          }
+        },
+        '&[data-direction="left"]': {
+          transform: "translateX(-100%)"
+        },
+        '&[data-direction="right"]': {
+          transform: "translateX(100%)"
+        },
+        '&[data-content-visible="true"] .umd-carousel-wide__slide-content': {
+          opacity: 1,
+          transform: "translateY(0)"
+        }
+      }
+    }
+  });
+};
+const createPreviewContainer = (position) => {
+  const isPositionLeft = position === "left";
+  return index.createDiv({
+    className: isPositionLeft ? "umd-carousel-wide__preview--left" : "umd-carousel-wide__preview--right",
+    attributes: [{ "aria-hidden": "true" }, { role: "presentation" }],
+    elementStyles: {
+      element: {
+        display: "none",
+        overflow: "hidden",
+        position: "relative",
+        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          display: "flex",
+          alignItems: "flex-end",
+          height: "100%"
+        },
+        ["& > * "]: {
+          position: "absolute !important",
+          bottom: "0 !important",
+          left: "0 !important",
+          width: "auto !important",
+          height: "75% !important",
+          display: "block !important",
+          aspectRatio: ASPECT_RATIO,
+          ...isPositionLeft && {
+            right: "0 !important",
+            left: "auto !important"
+          },
+          ["&:before "]: {
+            content: '""',
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            background: Styles__namespace.token.color.gray.darker,
+            opacity: 0.5,
+            zIndex: 1
+          }
+        }
+      }
+    }
+  });
+};
+const createMainContainer = (slides, isThemeDark) => {
+  const slideElements = slides.map((slide, index2) => {
+    return createMainFrameSlide(slide, index2, isThemeDark);
+  });
+  if (slideElements.length > 0) {
+    slideElements[0].element.setAttribute("data-active", "true");
+    slideElements[0].element.setAttribute("data-content-visible", "true");
+  }
+  return {
+    component: index.createDiv({
+      className: "umd-carousel-wide__main-container",
+      children: slideElements,
+      elementStyles: {
+        element: {
+          position: "relative",
+          overflow: "hidden"
+        }
+      }
+    }),
+    refs: slideElements.map((el) => el.element)
+  };
+};
+const createFramesContainer = (slides, isThemeDark) => {
+  const previewLeft = createPreviewContainer("left");
+  const previewRight = createPreviewContainer("right");
+  const previousButton = controls.createControlButton("prev", isThemeDark);
+  const nextButton = controls.createControlButton("next", isThemeDark);
+  const mainContainer = createMainContainer(slides, isThemeDark);
+  return _elementModel.createElementWithRefs({
+    className: "umd-carousel-wide__frames-container",
+    children: [
+      previewLeft,
+      mainContainer.component,
+      previewRight,
+      previousButton,
+      nextButton
+    ],
+    elementStyles: {
+      element: {
+        position: "relative",
+        [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
+          padding: `0 ${Styles__namespace.token.spacing.md}`
+        },
+        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          display: "grid",
+          gridTemplateColumns: "10vw 1fr 10vw",
+          gridGap: Styles__namespace.token.spacing.md,
+          height: "56vw",
+          maxHeight: "60vh"
+        },
+        [`@media (${Styles__namespace.token.media.queries.desktop.min})`]: {
+          gridTemplateColumns: "15vw 1fr 15vw",
+          gridGap: Styles__namespace.token.spacing.lg
+        },
+        [`@media (${Styles__namespace.token.media.queries.highDef.min})`]: {
+          gridTemplateColumns: "20vw 1fr 20vw"
+        }
+      }
+    },
+    refs: {
+      slidesContainer: mainContainer.component.element,
+      slides: mainContainer.refs,
+      previews: {
+        left: previewLeft.element,
+        right: previewRight.element
+      },
+      controls: {
+        prev: previousButton.element,
+        next: nextButton.element
+      }
+    }
+  });
+};
+exports.createFramesContainer = createFramesContainer;
+//# sourceMappingURL=frames.js.map

package/dist/composite/carousel/wide/frames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: Styles.token.spacing.min,\n        lineHeight: 1,\n        color: Styles.token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${Styles.token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: Styles.token.color.gray.light,\n          '&:hover': {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.white,\n        border: `1px solid ${Styles.token.color.gray.light}`,\n        display: 'block',\n        padding: Styles.token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          border: `1px solid ${Styles.token.color.gray.dark}`,\n        }),\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: Styles.token.spacing.sm,\n          left: Styles.token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${Styles.token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: Styles.token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          padding: `0 ${Styles.token.spacing.md}`,\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: Styles.token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: Styles.token.spacing.lg,\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","Styles","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background","createControlButton","createElementWithRefs"],"mappings":"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"}