verstak/build/dist/source/components/Toggle.v.js

Verstak - Front-End Library

import { ReactiveTreeNode, Mode } from "reactronic";
import { Division, JustText, OnClick } from "verstak";
import { triggeringModel } from "./common/Utils.js";
import { Theme } from "./Theme.js";
import { Icon } from "./Icon.v.js";
export function Toggle(declaration) {
    return (Division(ReactiveTreeNode.withBasis(declaration, {
        mode: Mode.autonomous,
        preparation: el => {
            var _a;
            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = triggeringModel({
                label: ReactiveTreeNode.current.key,
                checked: true,
                color: "green"
            }));
        },
        script: el => {
            const m = el.model;
            const theme = Theme.current;
            const toggleTheme = theme.toggle;
            el.useStylingPreset(toggleTheme.main);
            Icon(`fa-solid fa-toggle-${m.checked ? "on" : "off"}`, {
                script: (el, base) => {
                    var _a;
                    base();
                    el.useStylingPreset(toggleTheme.icon);
                    el.style.color = m.checked ? ((_a = theme.positiveColor) !== null && _a !== void 0 ? _a : "") : "";
                },
            });
            if (m.label) {
                JustText(m.label, false, {
                    script: (el, base) => {
                        base();
                        el.useStylingPreset(toggleTheme.label);
                    },
                });
            }
            OnClick(el.native, () => {
                el.model.checked = !el.model.checked;
            });
        },
    })));
}