@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

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

@@ -0,0 +1,154 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { debounce } from "../../../utilities/performance/index.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+const ELEMENT_SLIDE_INDICATOR_CONTAINER = "slide-indicator-container";
+const ELEMENT_SLIDE_INDICATOR_LINE = "slide-indicator-line";
+const ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER = "slide-indicator-button-wrapper";
+const LineStyles = `
+  .${ELEMENT_SLIDE_INDICATOR_LINE} {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 24px;
+    width: 80px;
+    transition: left 500ms;
+    background-color: ${token.color.red};
+    z-index: 99;
+  }
+`;
+const ButtonStyles = `
+  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} {
+    width: 80px;
+    height: 100%;
+    background-color: ${token.color.gray.light};
+    position: relative;
+  }
+
+  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} > span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 22px;
+    display: block;
+    background-color: ${token.color.gray.lightest};
+    z-index: 99;
+  }
+`;
+const STYLES_INDICATOR = `
+  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} {
+    position: relative;
+    height: 24px;
+    display: flex;
+    align-items: flex-start;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} > span {
+    display: block;
+    width: ${token.spacing.sm};
+    height:  22px;
+    z-index: 999;
+    position: relative;
+  }
+  
+  ${LineStyles}
+  ${ButtonStyles}
+
+`;
+const indicator = ({
+  count,
+  overlayColor,
+  isThemeDark,
+  isThemeLight,
+  callback
+}) => (() => {
+  const container = document.createElement("div");
+  const line = document.createElement("div");
+  let styles = STYLES_INDICATOR;
+  const buttons = Array.from({ length: count }).map((count2, i) => {
+    const button = document.createElement("button");
+    button.classList.add(ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER);
+    button.addEventListener("click", () => callback(i));
+    button.setAttribute("aria-label", `Slide ${i + 1}`);
+    return button;
+  });
+  const positionLine = (index) => {
+    const button = buttons[index];
+    const buttonSize = button.clientWidth;
+    const buttonPosition = button.offsetLeft;
+    line.style.width = `${buttonSize}px`;
+    line.style.left = `${buttonPosition}px`;
+  };
+  const sizeButtons = () => {
+    const maxWidth = 80;
+    const containerSize = container.clientWidth;
+    let buttonSize = containerSize / count;
+    if (buttonSize > maxWidth) buttonSize = maxWidth;
+    buttons.forEach((button) => {
+      button.style.width = `${buttonSize}px`;
+    });
+  };
+  const eventResize = () => {
+    sizeButtons();
+    positionLine(position);
+  };
+  const eventPosition = (index) => {
+    positionLine(index);
+    position = index;
+  };
+  const load = () => {
+    const reload = () => {
+      setTimeout(() => {
+        const isLoaded = container.clientWidth > 0;
+        if (!isLoaded) {
+          reload();
+        } else {
+          sizeButtons();
+          positionLine(position);
+          line.style.display = "block";
+        }
+      }, 500);
+    };
+    line.style.display = "none";
+    reload();
+  };
+  let position = 0;
+  line.classList.add(ELEMENT_SLIDE_INDICATOR_LINE);
+  container.classList.add(ELEMENT_SLIDE_INDICATOR_CONTAINER);
+  container.appendChild(line);
+  buttons.forEach((button) => {
+    const spacer = document.createElement("span");
+    const overlay = document.createElement("span");
+    let spacerColor = token.color.white;
+    if (isThemeDark && !overlayColor) {
+      spacerColor = token.color.black;
+    }
+    if (isThemeLight && !overlayColor) {
+      spacerColor = token.color.gray.lightest;
+    }
+    spacer.style.backgroundColor = spacerColor;
+    overlay.style.backgroundColor = spacerColor;
+    button.appendChild(overlay);
+    container.appendChild(button);
+    container.appendChild(spacer);
+  });
+  load();
+  window.addEventListener(
+    "resize",
+    debounce(eventResize, 20)
+  );
+  return {
+    element: container,
+    className: ELEMENT_SLIDE_INDICATOR_CONTAINER,
+    styles,
+    position: eventPosition
+  };
+})();
+export {
+  indicator as default
+};
+//# sourceMappingURL=indicator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.mjs","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\nconst ELEMENT_SLIDE_INDICATOR_CONTAINER = 'slide-indicator-container';\nconst ELEMENT_SLIDE_INDICATOR_LINE = 'slide-indicator-line';\nconst ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER = 'slide-indicator-button-wrapper';\n\n// prettier-ignore\nconst LineStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_LINE} {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 24px;\n    width: 80px;\n    transition: left 500ms;\n    background-color: ${token.color.red};\n    z-index: 99;\n  }\n`\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} {\n    width: 80px;\n    height: 100%;\n    background-color: ${token.color.gray.light};\n    position: relative;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 22px;\n    display: block;\n    background-color: ${token.color.gray.lightest};\n    z-index: 99;\n  }\n`\n\nconst STYLES_INDICATOR = `\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} {\n    position: relative;\n    height: 24px;\n    display: flex;\n    align-items: flex-start;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} > span {\n    display: block;\n    width: ${token.spacing.sm};\n    height:  22px;\n    z-index: 999;\n    position: relative;\n  }\n  \n  ${LineStyles}\n  ${ButtonStyles}\n\n`;\n\nexport default ({\n  count,\n  overlayColor,\n  isThemeDark,\n  isThemeLight,\n  callback,\n}: {\n  count: number;\n  overlayColor?: string;\n  isThemeDark?: boolean;\n  isThemeLight?: boolean;\n  callback: (arg: number) => void;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    const line = document.createElement('div');\n    let styles = STYLES_INDICATOR;\n\n    const buttons = Array.from({ length: count }).map((count, i) => {\n      const button = document.createElement('button');\n\n      button.classList.add(ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER);\n      button.addEventListener('click', () => callback(i));\n      button.setAttribute('aria-label', `Slide ${i + 1}`);\n\n      return button;\n    });\n\n    const positionLine = (index: number) => {\n      const button = buttons[index];\n      const buttonSize = button.clientWidth;\n      const buttonPosition = button.offsetLeft;\n\n      line.style.width = `${buttonSize}px`;\n      line.style.left = `${buttonPosition}px`;\n    };\n    const sizeButtons = () => {\n      const maxWidth = 80;\n      const containerSize = container.clientWidth;\n      let buttonSize = containerSize / count;\n\n      if (buttonSize > maxWidth) buttonSize = maxWidth;\n\n      buttons.forEach((button) => {\n        button.style.width = `${buttonSize}px`;\n      });\n    };\n\n    const eventResize = () => {\n      sizeButtons();\n      positionLine(position);\n    };\n\n    const eventPosition = (index: number) => {\n      positionLine(index);\n      position = index;\n    };\n\n    const load = () => {\n      const reload = () => {\n        setTimeout(() => {\n          const isLoaded = container.clientWidth > 0;\n          if (!isLoaded) {\n            reload();\n          } else {\n            sizeButtons();\n            positionLine(position);\n            line.style.display = 'block';\n          }\n        }, 500);\n      };\n\n      line.style.display = 'none';\n      reload();\n    };\n\n    let position = 0;\n\n    line.classList.add(ELEMENT_SLIDE_INDICATOR_LINE);\n\n    container.classList.add(ELEMENT_SLIDE_INDICATOR_CONTAINER);\n    container.appendChild(line);\n    buttons.forEach((button) => {\n      const spacer = document.createElement('span');\n      const overlay = document.createElement('span');\n      let spacerColor: string = token.color.white;\n\n      if (isThemeDark && !overlayColor) {\n        spacerColor = token.color.black;\n      }\n\n      if (isThemeLight && !overlayColor) {\n        spacerColor = token.color.gray.lightest;\n      }\n\n      spacer.style.backgroundColor = spacerColor;\n      overlay.style.backgroundColor = spacerColor;\n\n      button.appendChild(overlay);\n      container.appendChild(button);\n      container.appendChild(spacer);\n    });\n\n    load();\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(eventResize, 20),\n    );\n\n    return {\n      element: container,\n      className: ELEMENT_SLIDE_INDICATOR_CONTAINER,\n      styles,\n      position: eventPosition,\n    };\n  })();\n"],"names":["count","Utility.performance.debounce"],"mappings":"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"}

package/dist/atomic/animations/brand/card-stack.d.ts

@@ -0,0 +1,15 @@
+interface CardStackProps {
+    featured: HTMLImageElement | HTMLVideoElement;
+    images: HTMLImageElement[];
+    isExpandFeature: boolean;
+}
+declare const _default: (props: CardStackProps) => {
+    events: {
+        loadAnimation: () => Promise<void>;
+    };
+    element: HTMLElement;
+    className: string;
+    styles: string;
+};
+export default _default;
+//# sourceMappingURL=card-stack.d.ts.map

package/dist/atomic/animations/brand/card-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;yBA46Be,OAAO,cAAc;;;;;;;;AAArC,wBAoFE"}