@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

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

@@ -1,148 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-const ELEMENT_SLIDE_INDICATOR_CONTAINER = "slide-indicator-container";
-const ELEMENT_SLIDE_INDICATOR_LINE = "slide-indicator-line";
-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

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