@lucsoft/webgen/bin/components/generic/Button.js

Collection of lucsofts Components

import { createElement, draw } from "../Components";
import '../../css/buttons.webgen.static.css';
import { loadingWheel } from "../light-components/loadingWheel";
import { conditionalCSSClass } from "../Helper";
import { accessibilityButton, accessibilityDisableTabOnDisabled } from "../../lib/Accessibility";
import { CommonIcon, Icon } from "./Icon";
export const Button = ({ state, text, pressOn, progress, color, href, dropdown, selectedOn, arrowDownIcon }) => {
    let button = createElement("a");
    button.tabIndex = ["spinner" /* Spinner */, "progress" /* Progress */].includes(state ?? "normal" /* Normal */) ? -1 : accessibilityDisableTabOnDisabled(color);
    button.classList.add("wbutton", color ?? "grayscaled" /* Grayscaled */, state ?? "normal" /* Normal */);
    if (href)
        button.href = href;
    const prog = createElement("div");
    button.append(loadingWheel());
    button.onkeydown = accessibilityButton(button);
    if (dropdown) {
        button.classList.add("isList");
        const list = createElement("ul");
        document.addEventListener('click', (e) => {
            if (!button.contains(e.target)) {
                list.classList.remove('open');
            }
        });
        dropdown.forEach(([displayName, action]) => {
            const entry = createElement("a");
            entry.tabIndex = 0;
            entry.onkeydown = accessibilityButton(entry);
            entry.innerText = displayName;
            entry.onclick = () => {
                action();
                selectedOn?.();
            };
            list.append(entry);
        });
        button.append(list);
    }
    const setEnabled = (enabled) => {
        if (enabled)
            button.classList.replace("disabled" /* Disabled */, color ?? "grayscaled" /* Grayscaled */);
        else
            button.classList.replace(color ?? "grayscaled" /* Grayscaled */, "disabled" /* Disabled */);
    };
    const changeState = (state) => {
        button.classList.replace(button.classList[2], state);
        conditionalCSSClass(button, state === "spinner" /* Spinner */, "loading");
    };
    const setProgress = (progValue) => {
        if (progValue !== undefined)
            prog.style.width = progValue.toString() + "%";
    };
    if (state === "spinner" /* Spinner */) {
        button.classList.add("loading");
    }
    if (progress !== undefined && state === "progress" /* Progress */) {
        prog.classList.add("progress");
        prog.style.width = progress.toString() + "%";
        button.append(prog);
    }
    button.append(text.toUpperCase());
    if (dropdown) {
        const iconContainer = createElement("div");
        iconContainer.classList.add("icon-suffix");
        iconContainer.append(draw(Icon(arrowDownIcon ?? CommonIcon(0 /* ArrowDown */))));
        button.append(iconContainer);
    }
    button.onclick = () => {
        if (button.classList.contains("disabled" /* Disabled */))
            return;
        if (dropdown)
            button.querySelector('ul')?.classList.toggle("open");
        pressOn?.({ setProgress, setEnabled, changeState });
    };
    return button;
};