@lapis-notes/api 0.1.0

package/dist/settings.svelte.js

@@ -0,0 +1,1421 @@
+import { Button } from "@lapismd/design-core/shadcn/button";
+import { Input } from "@lapismd/design-core/shadcn/input";
+import { Textarea } from "@lapismd/design-core/shadcn/textarea";
+import { Slider } from "@lapismd/design-core/shadcn/slider";
+import { Progress } from "@lapismd/design-core/shadcn/progress";
+import { Select } from "./components/select";
+import { Switch } from "@lapismd/design-core/shadcn/switch";
+import { createRawSnippet, tick } from "svelte";
+import { mountComponent, } from "./hooks/mountComponent.svelte";
+import { setIcon } from "./icons";
+import { dialogPortalPropsForDocument } from "./dialog-portal";
+import IconList from "./components/icon/icon-list.svelte";
+import ListSetting from "./components/configuration/list-setting.svelte";
+import OptionsComboboxSetting from "./components/configuration/options-combobox-setting.svelte";
+import ObjectGridSetting from "./components/configuration/object-grid-setting.svelte";
+import ObjectMapSetting from "./components/configuration/object-map-setting.svelte";
+import ObjectArraySetting from "./components/configuration/object-array-setting.svelte";
+import DateSetting from "./components/configuration/date-setting.svelte";
+import { md5 } from "./utils";
+import ModalComponent from "@lapis-notes/ui/modal";
+import Search from "@lapis-notes/ui/search";
+import { debounce } from "lodash-es";
+import { ensureSectionHeadingActionsEl, getSettingMountEl, openSettingSection, removeEmptyImplicitSection, setActiveSectionHeadingDescription, takeElementContent, } from "./setting-section-layout";
+export { SETTING_SECTION_BODY_CLASS, SETTING_SECTION_CLASS, SETTING_SECTION_HEADING_ACTIONS_CLASS, SETTING_SECTION_HEADING_CLASS, SETTING_SECTION_HEADING_DESCRIPTION_CLASS, SETTING_SECTION_HEADING_TITLE_CLASS, } from "./setting-section-layout";
+export class BaseComponent {
+    /**
+     * Facilitates chaining
+     *
+     * @public
+     */
+    then(cb) {
+        cb(this);
+        return this;
+    }
+}
+export class ValueComponent extends BaseComponent {
+    metadata = {};
+    /** @public */
+    registerOptionListener(listeners, key) {
+        return this;
+    }
+    setMetadata(key, value) {
+        this.metadata[key] = value;
+        return this;
+    }
+}
+export class ExtraButtonComponent extends BaseComponent {
+    containerEl;
+    component;
+    text = "";
+    icon = "";
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(Button, {
+            target: containerEl,
+            props: {
+                ref: null,
+                variant: "ghost",
+            },
+        });
+    }
+    get extraSettingsEl() {
+        return (this.component.props.ref ??
+            this.containerEl.querySelector("button"));
+    }
+    setTooltip(value, options) {
+        this.component.props["data-tooltip"] = value;
+        this.component.props["data-tooltip-position"] =
+            options?.placement ?? "bottom";
+        return this;
+    }
+    setCta() {
+        this.component.props.variant = "default";
+        return this;
+    }
+    setVariant(variant) {
+        this.component.props.variant = variant;
+        return this;
+    }
+    setSize(size) {
+        this.component.props.size = size;
+    }
+    setWarning() {
+        this.component.props.variant = "destructive";
+        return this;
+    }
+    removeCta() {
+        this.component.props.variant = "ghost";
+        return this;
+    }
+    setButtonText(name) {
+        this.text = name;
+        this.icon = "";
+        this.component.props.children = this.createChildren();
+        return this;
+    }
+    setIcon(icon) {
+        this.icon = icon;
+        this.text = "";
+        this.component.props.children = this.createChildren();
+        return this;
+    }
+    setClass(cls) {
+        this.component.props["class"] = cls;
+        return this;
+    }
+    createChildren() {
+        return createRawSnippet(() => ({
+            render: () => `<span></span>`,
+            setup: (element) => {
+                const parent = element.parentElement ?? this.extraSettingsEl;
+                this.icon
+                    ? setIcon(parent, this.icon)
+                    : (parent.innerHTML = this.text);
+            },
+        }));
+    }
+    onClick(onclick) {
+        this.component.props.onclick = onclick;
+        return this;
+    }
+    get disabled() {
+        return !!this.component.props.disabled;
+    }
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+}
+export class ButtonComponent extends BaseComponent {
+    containerEl;
+    component;
+    text = "";
+    icon = "";
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(Button, {
+            target: containerEl,
+            props: {
+                ref: null,
+                variant: "ghost",
+            },
+        });
+    }
+    get buttonEl() {
+        return (this.component.props.ref ??
+            this.containerEl.querySelector("button"));
+    }
+    setTooltip(value, options) {
+        this.component.props["data-tooltip"] = value;
+        this.component.props["data-tooltip-position"] =
+            options?.placement ?? "bottom";
+        return this;
+    }
+    setCta() {
+        this.component.props.variant = "default";
+        return this;
+    }
+    setVariant(variant) {
+        this.component.props.variant = variant;
+        return this;
+    }
+    setSize(size) {
+        this.component.props.size = size;
+    }
+    setWarning() {
+        this.component.props.variant = "destructive";
+        return this;
+    }
+    setButtonText(name) {
+        this.text = name;
+        this.icon = "";
+        this.component.props.children = this.createChildren();
+        return this;
+    }
+    setIcon(icon) {
+        this.icon = icon;
+        this.text = "";
+        this.component.props.children = this.createChildren();
+        return this;
+    }
+    setClass(cls) {
+        this.component.props["class"] = cls;
+        return this;
+    }
+    createChildren() {
+        return createRawSnippet(() => ({
+            render: () => `<span></span>`,
+            setup: (element) => {
+                const parent = element.parentElement ?? this.buttonEl;
+                this.icon
+                    ? setIcon(parent, this.icon)
+                    : (parent.innerHTML = this.text);
+            },
+        }));
+    }
+    onClick(onclick) {
+        this.component.props.onclick = onclick;
+        return this;
+    }
+    get disabled() {
+        return !!this.component.props.disabled;
+    }
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+}
+export class ToggleComponent extends ValueComponent {
+    containerEl;
+    component;
+    /** @public */
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(Switch, {
+            target: containerEl,
+        });
+    }
+    get toggleEl() {
+        return this.component.props.ref;
+    }
+    get disabled() {
+        return !!this.component.props.disabled;
+    }
+    /** @public */
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+    /** @public */
+    getValue() {
+        return this.component.props.checked ?? false;
+    }
+    /** @public */
+    setValue(on) {
+        this.component.props.checked = on;
+        return this;
+    }
+    /** @public */
+    setTooltip(tooltip, options) {
+        return this;
+    }
+    /** @public */
+    onClick() {
+        this.component.props.checked = !this.getValue();
+    }
+    /** @public */
+    onChange(callback) {
+        this.component.props.onCheckedChange = debounce(callback, 500);
+        return this;
+    }
+}
+export class IconPickerComponent extends ValueComponent {
+    containerEl;
+    component;
+    /** @public */
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(IconList, {
+            target: containerEl,
+            props: {
+                value: "",
+                ref: null,
+                disabled: false,
+            },
+        });
+    }
+    setCta() {
+        this.component.props.variant = "default";
+        return this;
+    }
+    setVariant(variant) {
+        this.component.props.variant = variant;
+        return this;
+    }
+    setSize(size) {
+        this.component.props.size = size;
+    }
+    setWarning() {
+        this.component.props.variant = "destructive";
+        return this;
+    }
+    /** @public */
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+    get disabled() {
+        return this.component.props.disabled;
+    }
+    /** @public */
+    getValue() {
+        return this.component.props.value ?? "";
+    }
+    /** @public */
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    setButtonText(name) {
+        this.component.props.label = name;
+        return this;
+    }
+    setIcon(icon) {
+        return this.setValue(icon);
+    }
+    /** @public */
+    setTooltip(tooltip, options) {
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 500);
+        return this;
+    }
+}
+export class ProgressBarComponent extends ValueComponent {
+    containerEl;
+    component;
+    /** @public */
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(Progress, {
+            target: containerEl,
+        });
+    }
+    get toggleEl() {
+        return this.component.props.ref;
+    }
+    get disabled() {
+        return this.component.props.class?.includes("disabled");
+    }
+    /** @public */
+    setDisabled(disabled) {
+        this.component.props.class = disabled ? "disabled" : "";
+        return this;
+    }
+    /** @public */
+    getValue() {
+        return this.component.props.value ?? 0;
+    }
+    /** @public */
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    /** @public */
+    setTooltip(tooltip, options) {
+        return this;
+    }
+}
+export class SliderComponent extends ValueComponent {
+    containerEl;
+    component;
+    /** @public */
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(Slider, {
+            target: containerEl,
+            props: {
+                value: 0,
+                ref: null,
+                type: "single",
+            },
+        });
+    }
+    get sliderEl() {
+        return this.component.props.ref;
+    }
+    get disabled() {
+        return !!this.component.props.disabled;
+    }
+    /** @public */
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+    setDynamicTooltip() {
+        return this;
+    }
+    setLimits(min, max, step) {
+        this.component.props.min = min;
+        this.component.props.max = max;
+        this.component.props.step = step;
+        return this;
+    }
+    setType(type) {
+        this.component.props.type = type;
+        return this;
+    }
+    /** @public */
+    getValue() {
+        return (this.component.props.value ??
+            this.component.props.type === "single")
+            ? 0
+            : [];
+    }
+    /** @public */
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 500);
+        return this;
+    }
+}
+export class Modal {
+    app;
+    component;
+    containerEl;
+    constructor(app) {
+        this.app = app;
+        const hostDocument = app.workspace.getCommandHostDocument();
+        this.containerEl = hostDocument.createElement("div");
+        this.component = mountComponent(ModalComponent, {
+            target: this.containerEl,
+            props: {
+                open: false,
+                contentEl: null,
+                modalEl: null,
+                titleEl: null,
+                content: "",
+                title: "",
+                portalProps: dialogPortalPropsForDocument(hostDocument),
+                onOpenChange: this.onOpenChange.bind(this),
+            },
+        });
+    }
+    onOpenChange(open) {
+        open ? this.onOpen() : this.onClose();
+    }
+    onOpen() { }
+    onClose() { }
+    open() {
+        this.component.props.open = true;
+        tick().then(() => setTimeout(() => this.onOpen()));
+    }
+    close() {
+        this.component.props.open = false;
+        tick().then(() => setTimeout(() => this.onClose()));
+    }
+    setTitle(title) {
+        this.component.props.title = title;
+        return this;
+    }
+    setContent(content) {
+        this.component.props.content = content;
+        return this;
+    }
+    get titleEl() {
+        return this.component.props.titleEl;
+    }
+    get contentEl() {
+        return this.component.props.contentEl;
+    }
+    get modalEl() {
+        return this.component.props.modalEl;
+    }
+}
+export class DropdownComponent extends ValueComponent {
+    containerEl;
+    component;
+    /** @public */
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(Select, {
+            target: containerEl,
+            props: {
+                type: "single",
+                items: [],
+            },
+        });
+    }
+    addOption(value, label) {
+        this.component.props.items.push({ label, value });
+        return this;
+    }
+    addOptions(options) {
+        const items = [];
+        for (const [value, label] of Object.entries(options)) {
+            items.push({ label, value });
+        }
+        this.component.props.items.push(...items);
+        return this;
+    }
+    setItems(items) {
+        this.component.props.items = items;
+        return this;
+    }
+    get selectEl() {
+        return this.component.props.ref;
+    }
+    get disabled() {
+        return !!this.component.props.disabled;
+    }
+    /** @public */
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+    setType(type) {
+        this.component.props.type = type;
+        return this;
+    }
+    /** @public */
+    getValue() {
+        return (this.component.props.value ??
+            this.component.props.type === "single")
+            ? ""
+            : [];
+    }
+    /** @public */
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 500);
+        return this;
+    }
+}
+export class AbstractTextComponent extends ValueComponent {
+    component;
+    /** @public */
+    constructor(component) {
+        super();
+        this.component = component;
+    }
+    get inputEl() {
+        return this.component.props.ref;
+    }
+    get disabled() {
+        return !!this.component.props.disabled;
+    }
+    /** @public */
+    setDisabled(disabled) {
+        this.component.props.disabled = disabled;
+        return this;
+    }
+    /** @public */
+    getValue() {
+        return this.component.props.value;
+    }
+    /** @public */
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    /** @public */
+    setPlaceholder(placeholder) {
+        this.component.props.placeholder = placeholder;
+        return this;
+    }
+    /** @public */
+    onChanged() { }
+    /** @public */
+    onChange(callback) {
+        callback = debounce(callback, 500);
+        this.component.props.oninput = () => {
+            callback(this.inputEl.value);
+        };
+        return this;
+    }
+}
+export class TextComponent extends AbstractTextComponent {
+    /** @public */
+    constructor(containerEl) {
+        super(mountComponent(Input, {
+            target: containerEl,
+            props: {
+                ref: null,
+                type: "text",
+                value: "",
+            },
+        }));
+    }
+    setType(type) {
+        this.component.props.type = type;
+        return this;
+    }
+}
+export class TextAreaComponent extends AbstractTextComponent {
+    /** @public */
+    constructor(containerEl) {
+        super(mountComponent(Textarea, {
+            target: containerEl,
+            props: {
+                ref: null,
+                type: "text",
+                value: "",
+            },
+        }));
+    }
+}
+export class SearchComponent extends AbstractTextComponent {
+    /** @public */
+    constructor(containerEl) {
+        super(mountComponent(Search, {
+            target: containerEl,
+            props: {
+                ref: null,
+                value: "",
+                onChange: null,
+            },
+        }));
+    }
+    get clearButtonEl() {
+        return (this.component.props.clearButtonEl ??
+            this.component.props.ref ??
+            this.inputEl);
+    }
+    onChange(callback) {
+        callback = debounce(callback, 500);
+        this.component.props.onChange = callback;
+        return this;
+    }
+    onChanged() {
+        this.component.props.onChange?.(this.getValue());
+    }
+}
+export class MomentFormatComponent extends TextComponent {
+}
+export class ListSettingComponent extends ValueComponent {
+    containerEl;
+    component;
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(ListSetting, {
+            target: containerEl,
+            props: {
+                itemType: "string",
+                value: [],
+                valueOptions: [],
+                allowUnknownOptions: false,
+            },
+        });
+    }
+    setItemType(type) {
+        this.component.props.itemType = type;
+        return this;
+    }
+    setValueOptions(options) {
+        this.component.props.valueOptions = options;
+        return this;
+    }
+    setAllowUnknownOptions(allowUnknownOptions) {
+        this.component.props.allowUnknownOptions = allowUnknownOptions;
+        return this;
+    }
+    get disabled() {
+        return false;
+    }
+    setDisabled(_disabled) {
+        return this;
+    }
+    getValue() {
+        return this.component.props.value ?? [];
+    }
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 300);
+        return this;
+    }
+}
+export class OptionsComboboxSettingComponent extends ValueComponent {
+    containerEl;
+    component;
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(OptionsComboboxSetting, {
+            target: containerEl,
+            props: {
+                value: "",
+                options: [],
+            },
+        });
+    }
+    setValueOptions(options) {
+        this.component.props.options = options;
+        return this;
+    }
+    get disabled() {
+        return false;
+    }
+    setDisabled(_disabled) {
+        return this;
+    }
+    getValue() {
+        return this.component.props.value ?? "";
+    }
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 300);
+        return this;
+    }
+    onQueryChange(callback) {
+        this.component.props.onQueryChange = debounce(callback, 200);
+        return this;
+    }
+}
+export class ObjectGridSettingComponent extends ValueComponent {
+    containerEl;
+    component;
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(ObjectGridSetting, {
+            target: containerEl,
+            props: {
+                schema: { type: "object", properties: {} },
+                value: {},
+            },
+        });
+    }
+    setSchema(schema) {
+        this.component.props.schema = schema;
+        return this;
+    }
+    get disabled() {
+        return false;
+    }
+    setDisabled(_disabled) {
+        return this;
+    }
+    getValue() {
+        return this.component.props.value ?? {};
+    }
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 300);
+        return this;
+    }
+}
+export class ObjectMapSettingComponent extends ValueComponent {
+    containerEl;
+    component;
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(ObjectMapSetting, {
+            target: containerEl,
+            props: {
+                schema: { type: "object", properties: {}, additionalProperties: true },
+                value: {},
+                valueOptions: [],
+            },
+        });
+    }
+    setSchema(schema) {
+        this.component.props.schema = schema;
+        return this;
+    }
+    setValueOptions(options) {
+        this.component.props.valueOptions = options;
+        return this;
+    }
+    onValueQueryChange(callback) {
+        this.component.props.onValueQueryChange = debounce(callback, 200);
+        return this;
+    }
+    get disabled() {
+        return false;
+    }
+    setDisabled(_disabled) {
+        return this;
+    }
+    getValue() {
+        return this.component.props.value ?? {};
+    }
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 300);
+        return this;
+    }
+}
+export class ObjectArraySettingComponent extends ValueComponent {
+    containerEl;
+    component;
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(ObjectArraySetting, {
+            target: containerEl,
+            props: {
+                schema: {
+                    type: "array",
+                    items: { type: "object", properties: {} },
+                },
+                value: [],
+                columnOptions: {},
+                columnOnQueryChange: {},
+            },
+        });
+    }
+    setSchema(schema) {
+        this.component.props.schema = schema;
+        return this;
+    }
+    setColumnOptions(options) {
+        this.component.props.columnOptions = options;
+        return this;
+    }
+    setColumnOnQueryChange(handlers) {
+        this.component.props.columnOnQueryChange = handlers;
+        return this;
+    }
+    get disabled() {
+        return false;
+    }
+    setDisabled(_disabled) {
+        return this;
+    }
+    getValue() {
+        return this.component.props.value ?? [];
+    }
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 300);
+        return this;
+    }
+}
+export class DateSettingComponent extends ValueComponent {
+    containerEl;
+    component;
+    constructor(containerEl) {
+        super();
+        this.containerEl = containerEl;
+        this.component = mountComponent(DateSetting, {
+            target: containerEl,
+            props: {
+                value: "",
+                format: "date",
+            },
+        });
+    }
+    setFormat(format) {
+        this.component.props.format = format;
+        return this;
+    }
+    get disabled() {
+        return false;
+    }
+    setDisabled(_disabled) {
+        return this;
+    }
+    getValue() {
+        return this.component.props.value ?? "";
+    }
+    setValue(value) {
+        this.component.props.value = value;
+        return this;
+    }
+    onChange(callback) {
+        this.component.props.onValueChange = debounce(callback, 300);
+        return this;
+    }
+}
+export class SettingTab {
+    app;
+    /**
+     * Outermost HTML element on the setting tab.
+     *
+     * @public
+     */
+    containerEl = $state();
+    constructor(app) {
+        this.app = app;
+    }
+    /**
+     * Hides the contents of the setting tab. Any registered components should be
+     * unloaded when the view is hidden. Override this if you need to perform
+     * additional cleanup.
+     *
+     * @public
+     */
+    hide() { }
+}
+export class PluginSettingTab extends SettingTab {
+    plugin;
+    /** @public */
+    constructor(app, plugin) {
+        super(app);
+        this.plugin = plugin;
+    }
+}
+export class SettingItem {
+    props = $state({
+        id: crypto.randomUUID(),
+        title: "",
+        icon: "",
+        disabled: false,
+    });
+    key = $state(this.props.id);
+    static create(props = {}) {
+        return new SettingItem(props);
+    }
+    constructor(props = {}) {
+        this.props = { ...this.props, ...props };
+        this.update();
+    }
+    update() {
+        this.key = md5(`${JSON.stringify({
+            id: this.props.id,
+            title: this.props.title,
+            icon: this.props.icon,
+            disabled: this.props.disabled,
+        })}`);
+        this.props.parent?.update();
+        return this;
+    }
+    get title() {
+        return this.props.title;
+    }
+    get icon() {
+        return this.props.icon;
+    }
+    get disabled() {
+        return this.props.disabled;
+    }
+    get id() {
+        return this.props.id || this.props.title;
+    }
+    get tab() {
+        return this.props.tab;
+    }
+    setTitle(title) {
+        this.props.title = title;
+        return this.update();
+    }
+    setId(id) {
+        this.props.id = id;
+        return this.update();
+    }
+    /**
+     * @param icon - ID of the icon, can use any icon loaded with {@link addIcon}
+     *   or from the built-in lucide library.
+     * @public
+     * @see The Obsidian icon library includes the {@link https://lucide.dev/ Lucide icon library}, any icon name from their site will work here.
+     */
+    setIcon(icon) {
+        this.props.icon = icon;
+        return this.update();
+    }
+    setDisabled(disabled) {
+        this.props.disabled = disabled;
+        return this.update();
+    }
+    setTab(tab) {
+        this.props.tab = tab;
+        return this.update();
+    }
+}
+export class SettingGroup {
+    items = $state([]);
+    props = $state({
+        id: crypto.randomUUID(),
+        title: "",
+        items: [],
+    });
+    key = $state(md5(JSON.stringify(this.props)));
+    static create(props = {}) {
+        return new SettingGroup(props);
+    }
+    constructor(props = {}) {
+        this.props = { ...this.props, ...props };
+        this.items = this.props.items;
+        this.props.items = this.items;
+        this.update();
+    }
+    update() {
+        this.key = md5(`${JSON.stringify({ ...this.props, items: this.items.map((it) => it.key) })}`);
+        this.props.parent?.update();
+        return this;
+    }
+    get id() {
+        return this.props.id;
+    }
+    get title() {
+        return this.props.title;
+    }
+    setId(id) {
+        this.props.id = id;
+        return this.update();
+    }
+    setTitle(title) {
+        this.props.title = title;
+        return this.update();
+    }
+    addItem(cb) {
+        const item = SettingItem.create({ parent: this });
+        cb(item);
+        this.items.push(item);
+        return this.update();
+    }
+    removeItem(id) {
+        this.items = this.items.filter((it) => it.id !== id);
+        return this.update();
+    }
+}
+/**
+ * Mutable registry of settings groups and items shown in the settings UI.
+ *
+ * @public
+ */
+export class AppSettings {
+    groups = $state([]);
+    key = $state(md5(`${JSON.stringify(this.groups.map((it) => it.key))}`));
+    constructor() {
+        this.update();
+    }
+    addGroup(cb) {
+        const group = SettingGroup.create({ parent: this });
+        cb(group);
+        this.groups.push(group);
+        return this.update();
+    }
+    update() {
+        this.key = md5(`${JSON.stringify(this.groups.map((it) => it.key))}`);
+        return this;
+    }
+    find(id) {
+        return this.groups.find((it) => it.id === id);
+    }
+    findItem(id) {
+        for (const group of this.groups) {
+            const item = group.items.find((it) => it.id === id);
+            if (item) {
+                return item;
+            }
+        }
+        return undefined;
+    }
+}
+export class ColorComponent extends AbstractTextComponent {
+    /** @public */
+    constructor(containerEl) {
+        super(mountComponent(Input, {
+            target: containerEl,
+            props: {
+                type: "color",
+                ref: null,
+                value: null,
+                class: "shadow-none w-auto h-auto p-0 border-none rounded-full",
+            },
+        }));
+    }
+    getValueRgb() {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.getValue() || "#000000");
+        return result
+            ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+            }
+            : { r: 0, g: 0, b: 0 };
+    }
+    getValueHsl() {
+        return this.rgbToHsl(this.getValueRgb());
+    }
+    setValueRgb(rgb) {
+        this.setValue(this.rgbToHex(rgb));
+        return this;
+    }
+    /** @public */
+    setValueHsl(hsl) {
+        this.setValue(this.hslToHex(hsl));
+        return this;
+    }
+    componentToHex(c) {
+        var hex = c.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    }
+    rgbToHex({ r, g, b }) {
+        return ("#" +
+            this.componentToHex(r) +
+            this.componentToHex(g) +
+            this.componentToHex(b));
+    }
+    hslToHex({ h, s, l }) {
+        l /= 100;
+        const a = (s * Math.min(l, 1 - l)) / 100;
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+            return Math.round(255 * color)
+                .toString(16)
+                .padStart(2, "0"); // convert to Hex and prefix "0" if needed
+        };
+        return `#${f(0)}${f(8)}${f(4)}`;
+    }
+    rgbToHsl({ r, g, b }) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const l = Math.max(r, g, b);
+        const s = l - Math.min(r, g, b);
+        const h = s
+            ? l === r
+                ? (g - b) / s
+                : l === g
+                    ? 2 + (b - r) / s
+                    : 4 + (r - g) / s
+            : 0;
+        return {
+            h: 60 * h < 0 ? 60 * h + 360 : 60 * h,
+            s: 100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
+            l: (100 * (2 * l - s)) / 2,
+        };
+    }
+}
+function createSettingItemElement() {
+    const settingEl = document.createElement("div");
+    settingEl.className = "setting-item";
+    const infoEl = document.createElement("div");
+    infoEl.className = "setting-item-info";
+    const nameEl = document.createElement("div");
+    nameEl.className = "setting-item-name";
+    const descEl = document.createElement("div");
+    descEl.className = "setting-item-description";
+    const controlEl = document.createElement("div");
+    controlEl.className = "setting-item-control";
+    infoEl.append(nameEl, descEl);
+    settingEl.append(infoEl, controlEl);
+    return { settingEl, infoEl, nameEl, descEl, controlEl };
+}
+export class Setting {
+    containerEl;
+    components = [];
+    mountedToDom = false;
+    mountScheduled = false;
+    isHeadingRow = false;
+    /** @public */
+    settingEl;
+    /** @public */
+    infoEl;
+    /** @public */
+    nameEl;
+    /** @public */
+    descEl;
+    /** @public */
+    controlEl;
+    constructor(containerEl) {
+        this.containerEl = containerEl;
+        const elements = createSettingItemElement();
+        this.settingEl = elements.settingEl;
+        this.infoEl = elements.infoEl;
+        this.nameEl = elements.nameEl;
+        this.descEl = elements.descEl;
+        this.controlEl = elements.controlEl;
+    }
+    mountSettingRow() {
+        if (this.mountedToDom || this.isHeadingRow) {
+            return;
+        }
+        getSettingMountEl(this.containerEl).appendChild(this.settingEl);
+        this.mountedToDom = true;
+    }
+    scheduleMount() {
+        if (this.isHeadingRow || this.mountScheduled || this.mountedToDom) {
+            return;
+        }
+        this.mountScheduled = true;
+        queueMicrotask(() => {
+            this.mountScheduled = false;
+            if (this.isHeadingRow || this.mountedToDom) {
+                return;
+            }
+            this.mountSettingRow();
+        });
+    }
+    /**
+     * Facilitates chaining
+     *
+     * @public
+     */
+    then(cb) {
+        cb(this);
+        return this;
+    }
+    setName(name) {
+        this.nameEl.empty();
+        if (typeof name === "string") {
+            this.nameEl.setText(name);
+        }
+        else {
+            this.nameEl.appendChild(name);
+        }
+        this.scheduleMount();
+        return this;
+    }
+    setVisibility(visible) {
+        this.mountSettingRow();
+        this.settingEl.toggleVisibility(visible);
+    }
+    setDesc(desc) {
+        this.descEl.empty();
+        if (typeof desc === "string") {
+            this.descEl.setText(desc);
+        }
+        else {
+            this.descEl.appendChild(desc);
+        }
+        if (this.isHeadingRow) {
+            setActiveSectionHeadingDescription(this.containerEl, desc);
+            return this;
+        }
+        this.scheduleMount();
+        return this;
+    }
+    setClass(cls) {
+        this.settingEl.classList.add(...cls
+            .split(" ")
+            .map((it) => it.trim())
+            .filter((it) => it));
+        if (!this.isHeadingRow) {
+            this.mountScheduled = false;
+            this.mountSettingRow();
+        }
+        return this;
+    }
+    setTooltip(tooltip, options) {
+        this.settingEl.dataset.tooltip = tooltip;
+        this.settingEl.dataset.tooltipPosition = options?.placement ?? "top";
+        return this;
+    }
+    setDisabled(disabled) {
+        this.components.forEach((component) => component.setDisabled(disabled));
+        this.settingEl.toggleClass("is-disabled", disabled);
+        return this;
+    }
+    clear() {
+        this.components = [];
+        this.controlEl.empty();
+        return this;
+    }
+    addComponent(component) {
+        this.components.push(component);
+        return this;
+    }
+    setHeading() {
+        this.isHeadingRow = true;
+        const title = takeElementContent(this.nameEl);
+        const description = this.descEl.textContent?.trim()
+            ? takeElementContent(this.descEl)
+            : null;
+        if (this.mountedToDom) {
+            this.settingEl.remove();
+            removeEmptyImplicitSection(this.containerEl);
+        }
+        openSettingSection(this.containerEl, title, description);
+        return this;
+    }
+    addButton(cb) {
+        if (this.isHeadingRow) {
+            const actionsEl = ensureSectionHeadingActionsEl(this.containerEl);
+            if (actionsEl) {
+                const button = new ButtonComponent(actionsEl);
+                this.components.push(button);
+                setTimeout(() => cb(button));
+            }
+            return this;
+        }
+        this.mountSettingRow();
+        const button = new ButtonComponent(this.controlEl);
+        this.components.push(button);
+        setTimeout(() => cb(button));
+        return this;
+    }
+    addExtraButton(cb) {
+        if (this.isHeadingRow) {
+            const actionsEl = ensureSectionHeadingActionsEl(this.containerEl);
+            if (actionsEl) {
+                const button = new ExtraButtonComponent(actionsEl);
+                this.components.push(button);
+                setTimeout(() => cb(button));
+            }
+            return this;
+        }
+        this.mountSettingRow();
+        const button = new ExtraButtonComponent(this.controlEl);
+        this.components.push(button);
+        setTimeout(() => cb(button));
+        return this;
+    }
+    addToggle(cb) {
+        this.mountSettingRow();
+        const toggle = new ToggleComponent(this.controlEl);
+        this.components.push(toggle);
+        setTimeout(() => cb(toggle));
+        return this;
+    }
+    addText(cb) {
+        this.mountSettingRow();
+        const text = new TextComponent(this.controlEl);
+        this.components.push(text);
+        setTimeout(() => cb(text));
+        return this;
+    }
+    addSearch(cb) {
+        this.mountSettingRow();
+        const text = new SearchComponent(this.controlEl);
+        this.components.push(text);
+        setTimeout(() => cb(text));
+        return this;
+    }
+    addTextArea(cb) {
+        this.mountSettingRow();
+        const text = new TextAreaComponent(this.controlEl);
+        this.components.push(text);
+        setTimeout(() => cb(text));
+        return this;
+    }
+    addSlider(cb) {
+        this.mountSettingRow();
+        const slider = new SliderComponent(this.controlEl);
+        this.components.push(slider);
+        setTimeout(() => cb(slider));
+        return this;
+    }
+    addProgressBar(cb) {
+        this.mountSettingRow();
+        const progress = new ProgressBarComponent(this.controlEl);
+        this.components.push(progress);
+        setTimeout(() => cb(progress));
+        return this;
+    }
+    addColorPicker(cb) {
+        this.mountSettingRow();
+        const picker = new ColorComponent(this.controlEl);
+        this.components.push(picker);
+        setTimeout(() => cb(picker));
+        return this;
+    }
+    addIconPicker(cb) {
+        this.mountSettingRow();
+        const picker = new IconPickerComponent(this.controlEl);
+        this.components.push(picker);
+        setTimeout(() => cb(picker));
+        return this;
+    }
+    addDropdown(cb) {
+        this.mountSettingRow();
+        const dropdown = new DropdownComponent(this.controlEl);
+        this.components.push(dropdown);
+        setTimeout(() => cb(dropdown));
+        return this;
+    }
+    addMomentFormat(cb) {
+        this.mountSettingRow();
+        const text = new MomentFormatComponent(this.controlEl);
+        this.components.push(text);
+        setTimeout(() => cb(text));
+        return this;
+    }
+    addList(cb) {
+        this.mountSettingRow();
+        const list = new ListSettingComponent(this.controlEl);
+        this.components.push(list);
+        setTimeout(() => cb(list));
+        return this;
+    }
+    addOptionsCombobox(cb) {
+        this.mountSettingRow();
+        const combobox = new OptionsComboboxSettingComponent(this.controlEl);
+        this.components.push(combobox);
+        setTimeout(() => cb(combobox));
+        return this;
+    }
+    addObjectGrid(cb) {
+        this.mountSettingRow();
+        const grid = new ObjectGridSettingComponent(this.controlEl);
+        this.components.push(grid);
+        setTimeout(() => cb(grid));
+        return this;
+    }
+    addObjectMap(cb) {
+        this.mountSettingRow();
+        const map = new ObjectMapSettingComponent(this.controlEl);
+        this.components.push(map);
+        setTimeout(() => cb(map));
+        return this;
+    }
+    addObjectArray(cb) {
+        this.mountSettingRow();
+        const table = new ObjectArraySettingComponent(this.controlEl);
+        this.components.push(table);
+        setTimeout(() => cb(table));
+        return this;
+    }
+    addDatePicker(cb) {
+        this.mountSettingRow();
+        const picker = new DateSettingComponent(this.controlEl);
+        this.components.push(picker);
+        setTimeout(() => cb(picker));
+        return this;
+    }
+}