beercss 2.3.0 → 3.0.0

package/src/cdn/beer.ts

@@ -1,114 +1,112 @@
-(() => {
-  if (window["ui"]) return;
-
+export default (() => {
   interface ILastTheme {
-    dark:string,
-    light:string
+    dark: string,
+    light: string,
   }
 
-  let _timeoutToast:NodeJS.Timeout = null;
-  let _timeoutMutation:NodeJS.Timeout = null;
-  let _mutation:MutationObserver = null;
-  let _lastTheme:ILastTheme = {
+  const _window = globalThis;
+  let _timeoutToast: NodeJS.Timeout = null;
+  let _timeoutMutation: NodeJS.Timeout = null;
+  let _mutation: MutationObserver = null;
+  const _lastTheme: ILastTheme = {
     light: "",
-    dark: ""
-  }
+    dark: "",
+  };
 
-  const wait = (milliseconds:number) => {
-    return new Promise((resolve) => setTimeout(resolve, milliseconds));
-  }
+  const wait = async (milliseconds: number) => {
+    return await new Promise((resolve) => setTimeout(resolve, milliseconds));
+  };
 
-  const guid = ():string => {
-    return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c:string) => {
-      let r = (Math.random() * 16) | 0,
-        v = c == "x" ? r : (r & 0x3) | 0x8;
+  const guid = (): string => {
+    return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c: string) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c == "x" ? r : (r & 0x3) | 0x8;
       return v.toString(16);
     });
-  }
+  };
 
-  const query = (selector:string|Element, element?:Element):Element => {
+  const query = (selector: string | Element, element?: Element): Element => {
     try {
-      return typeof selector == "string"
+      return typeof selector === "string"
         ? (element || document).querySelector(selector)
-        : selector;      
+        : selector;
     } catch {}
-  }
+  };
 
-  const queryAll = (selector:string|NodeListOf<Element>, element?:Element) => {
+  const queryAll = (selector: string | NodeListOf<Element>, element?: Element) => {
     try {
-      return typeof selector == "string"
+      return typeof selector === "string"
         ? (element || document).querySelectorAll(selector)
-        : selector;      
+        : selector;
     } catch {}
-  }
+  };
 
-  const hasClass = (element:Element, name:string):boolean => {
+  const hasClass = (element: Element, name: string): boolean => {
     if (!element) return false;
     return element.classList.contains(name);
-  }
+  };
 
-  const addClass = (element:Element, name:string) => {
+  const addClass = (element: Element, name: string) => {
     if (!element) return;
     element.classList.add(name);
-  }
+  };
 
-  const removeClass = (element:Element, name:string) => {
+  const removeClass = (element: Element, name: string) => {
     if (!element) return;
     element.classList.remove(name);
-  }
+  };
 
-  const on = (element:Element, name:string, callback:any) => {
+  const on = (element: Element, name: string, callback: any) => {
     element.addEventListener(name, callback, true);
-  }
+  };
 
-  const off = (element:Element, name:string, callback:any) => {
+  const off = (element: Element, name: string, callback: any) => {
     element.removeEventListener(name, callback, true);
-  }
+  };
 
-  const insertBefore = (newElement:Element, element:Element):Element => {
+  const insertBefore = (newElement: Element, element: Element): Element => {
     if (!element) return;
     return element.parentNode.insertBefore(newElement, element);
-  }
+  };
 
-  const prev = (element:Element):Element => {
+  const prev = (element: Element): Element => {
     if (!element) return;
     return element.previousElementSibling;
-  }
+  };
 
-  const next = (element:Element):Element => {
+  const next = (element: Element): Element => {
     if (!element) return;
     return element.nextElementSibling;
-  }
+  };
 
-  const parent = (element:Element):Element => {
+  const parent = (element: Element): Element => {
     if (!element) return;
     return element.parentElement;
-  }
+  };
 
-  const create = (json:any) => {
-    let element = document.createElement("div");
+  const create = (json: any) => {
+    const element = document.createElement("div");
 
-    for (let i in json)
-      element[i] = json[i];
+    for (const i in json) { element[i] = json[i]; }
 
     return element;
-  }
+  };
 
-  const updateInput = (target:Element) => {
-    let input = target as HTMLInputElement;
-    let parentTarget = parent(target);
-    let label = query("label", parentTarget) as HTMLLabelElement;
-    let isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
-    let toActive = document.activeElement == target || input.value || /date|time/.test(input.type);
+  const updateInput = (target: Element) => {
+    const input = target as HTMLInputElement;
+    const parentTarget = parent(target);
+    const label = query("label", parentTarget) as HTMLLabelElement;
+    const isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
+    const toActive = document.activeElement == target || input.value || /date|time/.test(input.type);
 
     if (toActive) {
       if (isBorder && label) {
         let width = hasClass(label, "active") ? label.offsetWidth : Math.round(label.offsetWidth / 1.33);
-        let start = hasClass(parentTarget, "round") ? 20 : 12;
-        let end = width + start + 8;
-        input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 8rem, ${end}rem 8rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
-      } else
-      input.style.clipPath = "";
+        width = width / 16; // 16px = 1rem, originally 1px = 1rem, hence the division
+        const start = hasClass(parentTarget, "round") ? 1.25 : 0.75;
+        const end = width + start + 0.5;
+        input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 0.5rem, ${end}rem 0.5rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
+      } else { input.style.clipPath = ""; }
       addClass(label, "active");
     } else {
       removeClass(label, "active");
@@ -116,81 +114,81 @@
     }
 
     if (target.getAttribute("data-ui")) open(target);
-  }
+  };
 
-  const onClickElement = (e:Event) => {
-    let target = e.currentTarget as HTMLElement;
+  const onClickElement = (e: Event) => {
+    const target = e.currentTarget as HTMLElement;
     if (/input/i.test(target.tagName)) return;
     open(target);
-  }
+  };
 
-  const onClickLabel = (e:Event) => {
-    let target = e.currentTarget as Element;
-    let input = query('input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea', parent(target)) as HTMLElement;
+  const onClickLabel = (e: Event) => {
+    const target = e.currentTarget as Element;
+    const input = query("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea", parent(target)) as HTMLElement;
     if (input) input.focus();
-  }
+  };
 
-  const onFocusInput = (e:Event) => {
-    let target = e.currentTarget as Element;
+  const onFocusInput = (e: Event) => {
+    const target = e.currentTarget as Element;
     updateInput(target);
-  }
+  };
 
-  const onBlurInput = (e:Event) => {
-    let target = e.currentTarget as Element;
+  const onBlurInput = (e: Event) => {
+    const target = e.currentTarget as Element;
     updateInput(target);
-  }
+  };
 
-  const onClickDocument = (e:Event) => {
-    let target = e.currentTarget as Element;
-    let dropdowns = queryAll(".dropdown.active");
-    dropdowns.forEach((x:Element) => removeClass(x, "active"));
+  const onClickDocument = (e: Event) => {
+    const target = e.currentTarget as Element;
+    const dropdowns = queryAll(".dropdown.active");
+    dropdowns.forEach((x: Element) => removeClass(x, "active"));
 
     off(target, "click", onClickDocument);
-  }
+  };
 
-  const onClickToast = (e:Event) => {
-    let target = e.currentTarget as Element;
+  const onClickToast = (e: Event) => {
+    const target = e.currentTarget as Element;
     removeClass(target, "active");
 
     if (_timeoutToast) clearTimeout(_timeoutToast);
-  }
+  };
 
-  const onChangeFile = (e:Event) => {
-    let target = e.currentTarget as HTMLInputElement;
+  const onChangeFile = (e: Event) => {
+    const target = e.currentTarget as HTMLInputElement;
     updateFile(target);
-  }
+  };
 
-  const onKeydownFile = (e:KeyboardEvent) => {
-    let target = e.currentTarget as HTMLInputElement;
+  const onKeydownFile = (e: KeyboardEvent) => {
+    const target = e.currentTarget as HTMLInputElement;
     updateFile(target, e);
-  }
+  };
 
   const onMutation = () => {
     if (_timeoutMutation) clearTimeout(_timeoutMutation);
     _timeoutMutation = setTimeout(ui, 180);
-  }
+  };
 
-  const updateFile = (target:Element, e?:KeyboardEvent) => {
+  const updateFile = (target: Element, e?: KeyboardEvent) => {
     if (e) {
       if (e.key !== "Enter") return;
 
-      let target = e.currentTarget as Element;
-      let nextTarget = next(target) as HTMLInputElement;
+      const target = e.currentTarget as Element;
+      const nextTarget = next(target) as HTMLInputElement;
       if (!nextTarget || !/file/i.test(nextTarget.type)) return;
       return nextTarget.click();
     }
 
-    let currentTarget = target as HTMLInputElement;
-    let previousTarget = prev(target) as HTMLInputElement;
+    const currentTarget = target as HTMLInputElement;
+    const previousTarget = prev(target) as HTMLInputElement;
     if (!previousTarget || !/text/i.test(previousTarget.type)) return;
     previousTarget.value = Array.from(currentTarget.files).map((x) => x.name).join(", ");
     previousTarget.readOnly = true;
     previousTarget.addEventListener("keydown", onKeydownFile);
     updateInput(previousTarget);
-  }
+  };
 
-  const open = (from?:Element, to?:Element, config?:any) => {
-    if (!to) to = query(from.getAttribute("data-ui"))
+  const open = (from?: Element, to?: Element, config?: any) => {
+    if (!to) to = query(from.getAttribute("data-ui"));
     if (hasClass(to, "modal")) return modal(from, to);
     if (hasClass(to, "dropdown")) return dropdown(from, to);
     if (hasClass(to, "toast")) return toast(from, to, config);
@@ -202,41 +200,40 @@
     if (hasClass(to, "active")) return removeClass(to, "active");
 
     addClass(to, "active");
-  }
+  };
 
-  const tab = (from:Element) => {
-    let container = parent(from);
+  const tab = (from: Element) => {
+    const container = parent(from);
     if (!hasClass(container, "tabs")) return;
 
-    let tabs = queryAll("a", container);
-    tabs.forEach((x:Element) => removeClass(x, "active"));
+    const tabs = queryAll("a", container);
+    tabs.forEach((x: Element) => removeClass(x, "active"));
 
     addClass(from, "active");
-  }
+  };
 
-  const page = (from:Element, to:Element,) => {
+  const page = (from: Element, to: Element) => {
     tab(from);
 
-    let container = parent(to);
-    for (let i = 0; i < container.children.length; i++)
-      if (hasClass(container.children[i], "page")) removeClass(container.children[i], "active");
+    const container = parent(to);
+    for (let i = 0; i < container.children.length; i++) { if (hasClass(container.children[i], "page")) removeClass(container.children[i], "active"); }
 
     addClass(to, "active");
-  }
+  };
 
-  const dropdown = (from:Element, to:Element) => {
+  const dropdown = (from: Element, to: Element) => {
     tab(from);
 
     if (hasClass(to, "active")) return removeClass(to, "active");
 
-    let dropdowns = queryAll(".dropdown.active");
-    dropdowns.forEach((x:Element) => removeClass(x, "active"));
+    const dropdowns = queryAll(".dropdown.active");
+    dropdowns.forEach((x: Element) => removeClass(x, "active"));
 
     addClass(to, "active");
     on(document.body, "click", onClickDocument);
-  }
+  };
 
-  const modal = async (from:Element, to:Element) => {
+  const modal = async (from: Element, to: Element) => {
     tab(from);
 
     let overlay = prev(to) as HTMLElement;
@@ -250,13 +247,13 @@
       removeClass(from, "active");
       removeClass(to, "active");
       removeClass(overlay, "active");
-    }
+    };
 
-    let isActive = hasClass(to, "active");
-    let container = parent(to);
+    const isActive = hasClass(to, "active");
+    const container = parent(to);
     if (/nav/i.test(container.tagName)) {
-      let elements = queryAll(".modal, a, .overlay", container);
-      elements.forEach((x:Element) => removeClass(x, "active"));
+      const elements = queryAll(".modal, a, .overlay", container);
+      elements.forEach((x: Element) => removeClass(x, "active"));
     }
 
     if (isActive) {
@@ -268,13 +265,13 @@
       addClass(overlay, "active");
       addClass(to, "active");
     }
-  }
+  };
 
-  const toast = (from:Element, to:Element, config:any) => {
+  const toast = (from: Element, to: Element, config: any) => {
     tab(from);
 
-    let elements = queryAll(".toast.active");
-    elements.forEach((x:Element) => removeClass(x, "active"));
+    const elements = queryAll(".toast.active");
+    elements.forEach((x: Element) => removeClass(x, "active"));
     addClass(to, "active");
     on(to, "click", onClickToast);
 
@@ -285,35 +282,35 @@
     _timeoutToast = setTimeout(() => {
       removeClass(to, "active");
     }, config && config ? config : 6000);
-  }
+  };
 
-  const progress = (to:Element, config:any) => {
-    let element = to as HTMLElement;
-    
-    if (hasClass(element, "left")) return  element.style.clipPath = `polygon(0% 0%, 0% 100%, ${config}% 100%, ${config}% 0%)`;
+  const progress = (to: Element, config: any) => {
+    const element = to as HTMLElement;
+
+    if (hasClass(element, "left")) return element.style.clipPath = `polygon(0% 0%, 0% 100%, ${config}% 100%, ${config}% 0%)`;
 
     if (hasClass(element, "top")) return element.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${config}%, 0% ${config}%)`;
 
-    if (hasClass(element, "right")) return  element.style.clipPath = `polygon(100% 0%, 100% 100%, ${100 - config}% 100%, ${100 - config}% 0%)`;
+    if (hasClass(element, "right")) return element.style.clipPath = `polygon(100% 0%, 100% 100%, ${100 - config}% 100%, ${100 - config}% 0%)`;
 
     if (hasClass(element, "bottom")) return element.style.clipPath = `polygon(0% 100%, 100% 100%, 100% ${100 - config}%, 0% ${100 - config}%)`;
-  }
+  };
 
-  const lastTheme = ():ILastTheme => {
+  const lastTheme = (): ILastTheme => {
     if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
 
-    let light = document.createElement("body");
+    const light = document.createElement("body");
     light.className = "light";
     document.body.appendChild(light);
 
-    let dark = document.createElement("body");
+    const dark = document.createElement("body");
     dark.className = "dark";
     document.body.appendChild(dark);
 
-    let fromLight = getComputedStyle(light);
-    let fromDark = getComputedStyle(dark);
-    let variables = ['--primary', '--on-primary', '--primary-container', '--on-primary-container', '--secondary', '--on-secondary', '--secondary-container', '--on-secondary-container', '--tertiary', '--on-tertiary', '--tertiary-container', '--on-tertiary-container', '--error', '--on-error', '--error-container', '--on-error-container', '--background', '--on-background', '--surface', '--on-surface', '--outline', '--surface-variant', '--on-surface-variant', '--inverse-surface', '--inverse-on-surface'];
-    for(let i=0; i<variables.length; i++) {
+    const fromLight = getComputedStyle(light);
+    const fromDark = getComputedStyle(dark);
+    const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--outline", "--surface-variant", "--on-surface-variant", "--inverse-surface", "--inverse-on-surface"];
+    for (let i = 0; i < variables.length; i++) {
       _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
       _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
     }
@@ -321,12 +318,12 @@
     document.body.removeChild(light);
     document.body.removeChild(dark);
     return _lastTheme;
-  }
+  };
 
-  const theme = (source:any):ILastTheme => {
-    if (!source || !window["materialDynamicColors"]) return lastTheme();
+  const theme = (source: any): ILastTheme => {
+    if (!source || !_window.materialDynamicColors) return lastTheme();
 
-    let mode = /dark/i.test(document.body.className) ? "dark" : "light";
+    const mode = /dark/i.test(document.body.className) ? "dark" : "light";
     if (source && source.light && source.dark) {
       _lastTheme.light = source.light;
       _lastTheme.dark = source.dark;
@@ -334,70 +331,71 @@
       return source;
     }
 
-    return window["materialDynamicColors"](source).then((theme) => {
+    return _window.materialDynamicColors(source).then((theme) => {
       const toCss = (data) => {
         let style = "";
-        for (let i in data) {
-          let kebabCase = i.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-          style += "--"+kebabCase+":"+data[i]+";";
+        for (const i in data) {
+          const kebabCase = i.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+          style += "--" + kebabCase + ":" + data[i] + ";";
         }
         return style;
-      }
+      };
 
       _lastTheme.light = toCss(theme.light);
       _lastTheme.dark = toCss(theme.dark);
       document.body.setAttribute("style", _lastTheme[mode]);
       return _lastTheme;
     });
-  }
+  };
 
-  const mode = (value:string):string => {
+  const mode = (value: string): string => {
     if (!value) return /dark/i.test(document.body.className) ? "dark" : "light";
     document.body.classList.remove("light", "dark");
     document.body.classList.add(value);
-    if (window["materialDynamicColors"]) document.body.setAttribute("style", _lastTheme[value]);
+    if (_window.materialDynamicColors) document.body.setAttribute("style", _lastTheme[value]);
     return value;
-  }
+  };
 
   const setup = () => {
     if (_mutation) return;
     _mutation = new MutationObserver(onMutation);
     _mutation.observe(document.body, { childList: true, subtree: true });
     ui();
-  }
+  };
 
-  const ui = (selector?:string, config?:any) => {
+  const ui = (selector?: string, config?: any) => {
     if (selector) {
       if (selector == "setup") return setup();
       if (selector == "guid") return guid();
       if (selector == "mode") return mode(config);
       if (selector == "theme") return theme(config);
 
-      let to = query(selector);
-      let from = query("[data-ui='#" + to.id + "']");
+      const to = query(selector);
+      const from = query("[data-ui='#" + to.id + "']");
       open(from, to, config);
     }
 
-    let elements = queryAll("[data-ui]");
-    elements.forEach((x:Element) => on(x, "click", onClickElement));
+    const elements = queryAll("[data-ui]");
+    elements.forEach((x: Element) => on(x, "click", onClickElement));
 
-    let labels = queryAll(".field > label");
-    labels.forEach((x:HTMLLabelElement) => on(x, "click", onClickLabel));
+    const labels = queryAll(".field > label");
+    labels.forEach((x: HTMLLabelElement) => on(x, "click", onClickLabel));
 
-    let inputs = queryAll(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea");
-    inputs.forEach((x:Element) => {
+    const inputs = queryAll(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea");
+    inputs.forEach((x: Element) => {
       on(x, "focus", onFocusInput);
       on(x, "blur", onBlurInput);
       updateInput(x);
     });
 
-    let files = queryAll(".field > input[type=file]");
-    files.forEach((x:Element) => {
+    const files = queryAll(".field > input[type=file]");
+    files.forEach((x: Element) => {
       on(x, "change", onChangeFile);
       updateFile(x);
     });
-  }
+  };
 
-  window["ui"] = ui;
-  window.addEventListener("load", () => ui("setup"));
-})();
+  if (_window.addEventListener) _window.addEventListener("load", () => ui("setup"));
+  _window.ui = ui;
+  return _window.ui;
+})();

package/src/cdn/elements/badges.css

@@ -3,10 +3,10 @@
   align-items: center;
   justify-content: center;
   position: absolute;
-  font-size: 12rem;
+  font-size: 0.75rem;
   text-transform: none;
   z-index: 1;
-  padding: 0 6rem;
+  padding: 0 0.375rem;
   background-color: var(--error);
   color: var(--on-error);
   top: 0;
@@ -14,7 +14,7 @@
   bottom: auto;
   right: 0;
   transform: translate(50%, -100%);
-  height: 20rem;
+  height: 1.25rem;
 }
 
 .badge.none {
@@ -24,7 +24,7 @@
   right: auto;
   transform: none;
   position: relative;
-  margin: 0 2rem;
+  margin: 0 0.125rem;
 }
 
 .badge.top {
@@ -92,7 +92,7 @@
 }
 
 .badge.border {
-  border: 1rem solid var(--error);
+  border: 0.0625rem solid var(--error);
   color: var(--error);
 }
 
@@ -100,8 +100,8 @@
 .badge.square {
   padding: 0;
   text-align: center;
-  width: 20rem;
-  height: 20rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .badge.circle {