@vandenberghinc/volt 1.2.6 → 1.2.8

package/frontend/dist/frontend/src/ui/input.js

@@ -0,0 +1,1201 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+// External imports.
+import * as vlib from "@vandenberghinc/vlib/frontend";
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+import { Utils } from "../modules/utils.js";
+import { HStack, VStack, VStackElement } from "./stack.js";
+import { Text } from "./text.js";
+import { ImageMask } from "./image.js";
+import { GradientBorder } from "./gradient.js";
+import { Scroller } from "./scroller.js";
+import { Divider } from "./divider.js";
+// Input.
+let InputElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "InputElement",
+            default_style: {
+                "margin": "0px 0px 0px 0px",
+                "padding": "2.5px 5px 2.5px 5px",
+                "font": "inherit",
+                "color": "inherit",
+                "background": "none",
+                "outline": "none",
+                "border": "none",
+                "border-radius": "10px",
+                "text-align": "start",
+                "white-space": "nowrap",
+            },
+            default_attributes: {
+                "spellcheck": "false",
+                "autocorrect": "off",
+                "autocapitalize": "none",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.input;
+    var InputElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            InputElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Attributes.
+        _e;
+        // Constructor.
+        constructor(placeholder, type = "text", value) {
+            // Initialize base class.
+            super({
+                derived: InputElement,
+            });
+            // Safari does not render images correctly for custom elements.
+            if (Utils.is_safari) {
+                this.attachShadow({ mode: 'open' });
+                this._e = document.createElement("input");
+                this._e.style.font = "inherit";
+                this._e.style.color = "inherit";
+                this._e.style.background = "none";
+                this._e.style.border = "none";
+                this._e.style.outline = "none";
+                this._e.style.whiteSpace = "nowrap";
+                this._e.style.width = "100%";
+                this._e.style.padding = InputElement.default_style.padding;
+                this.shadowRoot.appendChild(this._e);
+                this.padding("0");
+            }
+            // Set src.
+            this.placeholder(placeholder ?? "");
+            this.type(type ?? "text");
+            this.value(value ?? "");
+        }
+        value(val) {
+            if (this._e === undefined) {
+                return super.value(val);
+            }
+            if (val == null) {
+                return this._e.value ?? "";
+            }
+            this._e.value = val.toString();
+            // if (val == null) { return this._e.getAttribute("value") ?? ""; }
+            // this._e.setAttribute("value", val.toString());
+            return this;
+        }
+        required(val) { if (this._e === undefined) {
+            return super.required(val);
+        } if (val == null) {
+            return this._e.getAttribute("required") === "true";
+        } if (!val) {
+            this._e.removeAttribute("required");
+        }
+        else {
+            this._e.setAttribute("required", val);
+        } return this; }
+        type(val) { if (this._e === undefined) {
+            return super.type(val);
+        } if (val == null) {
+            return this._e.getAttribute("type") ?? "";
+        } this._e.setAttribute("type", val); return this; }
+        placeholder(val) { if (this._e === undefined) {
+            return super.placeholder(val);
+        } if (val == null) {
+            return this._e.getAttribute("placeholder") ?? "";
+        } this._e.setAttribute("placeholder", val); return this; }
+        resize(val) { if (this._e === undefined) {
+            return super.resize(val);
+        } if (val == null) {
+            return this._e.getAttribute("resize") ?? "";
+        } this._e.setAttribute("resize", val); return this; }
+        padding(...values) {
+            if (this._e === undefined) {
+                return super.padding(...values);
+            }
+            if (values.length === 0) {
+                return this._e.style.padding;
+            }
+            else if (values.length === 1) {
+                this._e.style.padding = this.pad_numeric(values[0]);
+            }
+            else if (values.length === 2) {
+                if (values[0] != null) {
+                    this._e.style.paddingTop = this.pad_numeric(values[0]);
+                }
+                if (values[1] != null) {
+                    this._e.style.paddingRight = this.pad_numeric(values[1]);
+                }
+                if (values[0] != null) {
+                    this._e.style.paddingBottom = this.pad_numeric(values[0]);
+                }
+                if (values[1] != null) {
+                    this._e.style.paddingLeft = this.pad_numeric(values[1]);
+                }
+            }
+            else if (values.length === 4) {
+                this._e.style.paddingTop = this.pad_numeric(values[0]);
+                if (values[1] != null) {
+                    this._e.style.paddingRight = this.pad_numeric(values[1]);
+                }
+                if (values[2] != null) {
+                    this._e.style.paddingBottom = this.pad_numeric(values[2]);
+                }
+                if (values[3] != null) {
+                    this._e.style.paddingLeft = this.pad_numeric(values[3]);
+                }
+            }
+            else {
+                console.error("Invalid number of arguments for function \"padding()\".");
+            }
+            return this;
+        }
+    };
+    return InputElement = _classThis;
+})();
+export { InputElement };
+export const Input = Elements.wrapper(InputElement);
+export const NullInput = Elements.create_null(InputElement);
+// InputBox.
+let InputBoxElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "InputBoxElement",
+            default_style: {
+                "margin": "0px 0px 0px 0px",
+                "padding": "2.5px 5px 2.5px 5px",
+                "height": "20px",
+                "font": "inherit",
+                "color": "inherit",
+                "background": "none",
+                "outline": "none",
+                "border": "none",
+                "border-radius": "10px",
+                "text-align": "start",
+                "white-space": "wrap",
+                "resize": "none",
+            },
+            default_attributes: {
+                "spellcheck": "false",
+                "autocorrect": "off",
+                "autocapitalize": "none",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.textarea;
+    var InputBoxElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            InputBoxElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Attributes.
+        _e;
+        // Constructor.
+        constructor(placeholder) {
+            // Initialize base class.
+            super({
+                derived: InputBoxElement,
+            });
+            // Safari does not render images correctly for custom elements.
+            if (Utils.is_safari) {
+                this.attachShadow({ mode: 'open' });
+                this._e = document.createElement("textarea");
+                this._e.style.font = "inherit";
+                this._e.style.color = "inherit";
+                this._e.style.background = "none";
+                this._e.style.border = "none";
+                this._e.style.outline = "none";
+                this._e.style.width = "100%";
+                this._e.style.height = "100%";
+                this._e.style.margin = "0";
+                this._e.style.padding = InputBoxElement.default_style.padding;
+                this.shadowRoot.appendChild(this._e);
+                this.padding("0");
+            }
+            // Set src.
+            this.placeholder(placeholder ?? "");
+        }
+        value(val) { if (this._e === undefined) {
+            return super.value(val);
+        } if (val == null) {
+            return this._e.getAttribute("value") ?? "";
+        } this._e.setAttribute("value", val.toString()); return this; }
+        required(val) { if (this._e === undefined) {
+            return super.required(val);
+        } if (val == null) {
+            return this._e.getAttribute("required") === "true";
+        } if (!val) {
+            this._e.removeAttribute("required");
+        }
+        else {
+            this._e.setAttribute("required", val);
+        } return this; }
+        type(val) { if (this._e === undefined) {
+            return super.type(val);
+        } if (val == null) {
+            return this._e.getAttribute("type") ?? "";
+        } this._e.setAttribute("type", val); return this; }
+        placeholder(val) { if (this._e === undefined) {
+            return super.placeholder(val);
+        } if (val == null) {
+            return this._e.getAttribute("placeholder") ?? "";
+        } this._e.setAttribute("placeholder", val); return this; }
+        resize(val) { if (this._e === undefined) {
+            return super.resize(val);
+        } if (val == null) {
+            return this._e.getAttribute("resize") ?? "";
+        } this._e.setAttribute("resize", val); return this; }
+        padding(...values) {
+            if (this._e === undefined) {
+                return super.padding(...values);
+            }
+            if (values.length === 0) {
+                return this._e.style.padding;
+            }
+            else if (values.length === 1) {
+                this._e.style.padding = this.pad_numeric(values[0]);
+            }
+            else if (values.length === 2) {
+                if (values[0] != null) {
+                    this._e.style.paddingTop = this.pad_numeric(values[0]);
+                }
+                if (values[1] != null) {
+                    this._e.style.paddingRight = this.pad_numeric(values[1]);
+                }
+                if (values[0] != null) {
+                    this._e.style.paddingBottom = this.pad_numeric(values[0]);
+                }
+                if (values[1] != null) {
+                    this._e.style.paddingLeft = this.pad_numeric(values[1]);
+                }
+            }
+            else if (values.length === 4) {
+                this._e.style.paddingTop = this.pad_numeric(values[0]);
+                if (values[1] != null) {
+                    this._e.style.paddingRight = this.pad_numeric(values[1]);
+                }
+                if (values[2] != null) {
+                    this._e.style.paddingBottom = this.pad_numeric(values[2]);
+                }
+                if (values[3] != null) {
+                    this._e.style.paddingLeft = this.pad_numeric(values[3]);
+                }
+            }
+            else {
+                console.error("Invalid number of arguments for function \"padding()\".");
+            }
+            return this;
+        }
+    };
+    return InputBoxElement = _classThis;
+})();
+export { InputBoxElement };
+export const InputBox = Elements.wrapper(InputBoxElement);
+export const NullInputBox = Elements.create_null(InputBoxElement);
+// Extended input.
+let ExtendedInputElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "ExtendedInputElement",
+            default_style: {
+                ...VStackElement.default_style,
+                "color": "inherit",
+                "font-size": "16px",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var ExtendedInputElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ExtendedInputElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        copy_opts;
+        input_opts;
+        /** The label node, always defined even when `opts.label` is undefined, so the user can still style it. */
+        // @ts-expect-error
+        label;
+        /** The left image element created by the `opts.image` field. */
+        image;
+        /** The clickable copy node created by the `opts.copy` field. */
+        copyable;
+        /** The input element created by the `opts.input` field. */
+        input;
+        /** The (gradient) border element used for the input field. */
+        input_border;
+        /** The container element for the input field. */
+        container;
+        /** The error text element shown when the input is marked as missing. */
+        error_text;
+        /** Has error state. */
+        has_error = false;
+        /** Is focused state. */
+        is_focused = false;
+        /** Validation options. */
+        validation_entry;
+        // Constructor.
+        constructor({ label, image, placeholder = "Input", id, readonly = false, required = false, type = "text", value, copy, input, validate, }) {
+            // Initialize super.
+            super();
+            this._init({
+                derived: ExtendedInputElement,
+            });
+            // Cast image.
+            if (typeof image === "string") {
+                image = { url: image };
+            }
+            // Cast label.
+            if (typeof label === "string") {
+                label = { text: label };
+            }
+            // Direct attributes.
+            this.validation_entry = validate;
+            // Set id.
+            if (id != null) {
+                this.id(id);
+            }
+            // Set input options..
+            this.input_opts = {
+                ...(input ?? {}),
+                border: {
+                    color: input?.border?.color ?? "gray",
+                    hover: input?.border?.hover ?? "gray",
+                    focused: input?.border?.focused ?? "#8EB8EB",
+                    missing: input?.border?.missing ?? "#E8454E",
+                    width: input?.border?.width ?? "1px",
+                    radius: input?.border?.radius ?? "5px",
+                    type: input?.border?.type ?? "full",
+                },
+            };
+            // Set copy options.
+            this.copy_opts = copy;
+            // Set default styling.
+            this.styles(ExtendedInputElement.default_style);
+            // Title element.
+            this.label = Text(label?.text)
+                .parent(this)
+                .font_size(label?.font_size ?? "inherit")
+                .margin(0, 0, label?.spacing ?? (input?.border?.type === "bottom" ? 12.5 : 7.5), 0)
+                .color(label?.color ?? "inherit");
+            if (!label) {
+                // always keep label present so uses can still style it with single-line code when needed.
+                this.label.hide();
+            }
+            else {
+                if (label.wrap) {
+                    this.label
+                        .width("fit-content")
+                        .overflow_wrap("break-word") // or "anywhere" for more aggressive breaking
+                        .hyphens("auto")
+                        .display("inline-block") // so width constraints apply
+                        .max_width(label.max_width ?? "100%"); // ensure there’s something to wrap to
+                }
+                else {
+                    this.label.ellipsis_overflow(true)
+                        .width("fit-content")
+                        .max_width(label.max_width ?? "100%"); // ensure there’s something to wrap to
+                }
+            }
+            // Input left image.
+            this.image = !image ? undefined : ImageMask(image.url)
+                .parent(this)
+                .mask_color(image.color ?? "#000")
+                .square(image.size ?? 20)
+                .margin(0, 10, 0, 5)
+                .alt(image?.alt ?? "Volt");
+            // Copyable right image.
+            this.copyable = !this.copy_opts ? undefined : ImageMask(this.copy_opts.url)
+                .parent(this)
+                .mask_color(this.copy_opts?.color ?? image?.color ?? "#000")
+                .square(this.copy_opts.size ?? 20)
+                .margin(0, 5, 0, 10)
+                .alt(this.copy_opts?.alt ?? "Copy")
+                .on_click(() => {
+                if (this.copy_opts?.on_click) {
+                    this.copy_opts.on_click(this.input.value());
+                }
+            })
+                .transition_mask("background 200ms ease-in-out")
+                .on_mouse_over_out(e => e.mask_color(this.copy_opts?.hover ?? image?.color ?? "#000"), e => e.mask_color(this.copy_opts?.color ?? image?.color ?? "#000"));
+            // Input element.
+            if (type === "box" || type === "area") {
+                this.input = InputBox(placeholder);
+            }
+            else {
+                this.input = Input(placeholder, type);
+            }
+            this.input
+                .parent(this)
+                .color("inherit")
+                .readonly(readonly)
+                .font_size("inherit")
+                .font_weight("normal")
+                .margin(0)
+                .width("100%")
+                .stretch(true)
+                // .padding(0, 5)
+                .padding(0)
+                .line_height("1.6em")
+                .box_shadow("none")
+                .border("none")
+                .outline("none")
+                .z_index(1)
+                .border_radius(0) // is required.
+                .on_focus(() => {
+                if (!this.has_error) {
+                    this.is_focused = true;
+                    this._set_border_color(this.input_opts.border.focused, true);
+                }
+            })
+                .on_blur(() => {
+                if (!this.has_error) {
+                    this.is_focused = false;
+                    this._set_border_color(this.input_opts.border.color);
+                }
+            });
+            // Set input height.
+            if (input?.height != null) {
+                console.log("Setting fixed height to", input.height);
+                this.input.fixed_height(input.height);
+            }
+            // The input border to support gradients.
+            this.input_border = GradientBorder()
+                .z_index(0)
+                .position(0, 0, 0, 0)
+                .border_width(this.input_opts.border.width)
+                .border_radius(this.input_opts.border.radius)
+                .border_color(this.input_opts.border.color)
+                .box_shadow(`0 0 0 0px transparent`)
+                .transition("background 200ms ease-in-out")
+                .pointer_events("none")
+                .parent(this);
+            if (this.input_opts.border.type === "bottom") {
+                this.input_border.hide();
+            }
+            // The hstack container.
+            this.container = HStack(!this.image ? undefined : VStack(this.image) // wrap in container for height.
+                .width("fit-content")
+                .height("1.6em")
+                .center_vertical(), this.input, !this.copyable ? undefined : VStack(this.copyable) // wrap in container for height.
+                .width("fit-content")
+                .height("1.6em")
+                .center_vertical(), this.input_border)
+                .parent(this)
+                .position("relative")
+                .background(input?.background ?? "transparent")
+                .padding((input?.padding ?? "12px 6px"))
+                .border_radius(this.input_opts.border.radius) // for outline when focused or missing etc.
+                .transition("box-shadow 0.2s ease-in-out")
+                .outline("0px solid transparent")
+                .box_shadow(`0 0 0 0px transparent`)
+                .width("100%")
+                .on_mouse_over_out((e) => {
+                if (!this.has_error && !this.is_focused) {
+                    this._set_border_color(this.input_opts.border.hover);
+                }
+            }, (e) => {
+                if (!this.has_error && !this.is_focused) {
+                    this._set_border_color(this.input_opts.border.color);
+                }
+            });
+            if (this.input_opts.border.type === "bottom") {
+                this._set_border_color(this.input_opts.border.color);
+                this.container.padding_left(0).padding_right(0);
+            }
+            // The error message.
+            this.error_text = Text("Incomplete field")
+                .color(this.input_opts.border.missing)
+                .font_size("0.8em")
+                .margin(7.5, 0, 0, 2.5)
+                .padding(0)
+                .leading()
+                .hide();
+            // Set id.
+            if (id != null) {
+                this.id(id);
+            }
+            // Set required.
+            this.required(required);
+            // Append.
+            this.append(this.label, this.container, this.error_text);
+            // Set value.
+            if (value) {
+                this.value(value);
+            }
+        }
+        /** Helper to set the border color. */
+        _set_border_color(color, set_outline = false) {
+            if (this.input_opts.border.type === "full") {
+                this.input_border.border_color(color);
+                if (set_outline) {
+                    this.container.box_shadow(`0 0 0 3px ${color}80`);
+                }
+                else {
+                    this.container.box_shadow(`0 0 0 0px transparent`);
+                }
+            }
+            else {
+                this.container.border_bottom(this.input_opts.border.width, color);
+            }
+        }
+        // Set the focus color.
+        focus_color(val) {
+            if (val == null) {
+                return (this.input_opts.border.focused ?? "");
+            }
+            this.input_opts.border.focused = val;
+            return this;
+        }
+        // Set default since it inherits an element.
+        set_default() {
+            return super.set_default(ExtendedInputElement);
+        }
+        /**
+         * Set the error state and message.
+         * Providing a truthy value will enable the error state and return the current instance for chaining.
+         * Providing a falsy value will disable the error state and return the current instance for chaining.
+         * Providing no value will return the current error message or `undefined` when no error is set.
+         */
+        error(err) {
+            if (err == null) {
+                return (this.has_error ? this.error_text.text() : undefined);
+            }
+            else if (err) {
+                this.has_error = true;
+                this._set_border_color(this.input_opts.border.missing, true);
+                // this.image.mask_color(this._border_opts.missing)
+                this.error_text.show();
+                this.error_text.text(err);
+            }
+            else {
+                this.has_error = false;
+                this._set_border_color(this.input_opts.border.color);
+                this.error_text.hide();
+            }
+            return this;
+        }
+        /** Remove the error state and mark as valid. */
+        valid() {
+            return this.error(false);
+        }
+        /** Submit the item, throws an error when the item is not defined. */
+        submit() {
+            // Get value.
+            const value = this.value();
+            if (value == null || value === "") {
+                this.error("Incomplete field");
+                throw Error("Fill in all the required fields.");
+            }
+            // Validate.
+            if (this.validation_entry) {
+                const res = vlib.Schema.validate_entry(value, this.validation_entry, { throw: false, field_type: "field" });
+                if (res.error) {
+                    // use raw error for showing.
+                    this.error(res.raw_error ?? "Invalid value");
+                    // use full error for throwing.
+                    throw Error(res.error);
+                }
+            }
+            // Success.
+            this.valid();
+            return value;
+        }
+        readonly(val) { if (val == null) {
+            return this.input.readonly();
+        } this.input.readonly(val); return this; }
+        text(val) { if (val == null) {
+            return this.label?.text() ?? "";
+        } this.label?.text(val); return this; }
+        value(val) {
+            if (val == null) {
+                return this.input.value();
+            }
+            this.input.value(val);
+            return this;
+        }
+        required(val) { if (val == null) {
+            return this.input.required();
+        } this.input.required(val); return this; }
+        on_enter(val) {
+            if (val == null) {
+                return this.input.on_enter();
+            }
+            this.input.on_enter((x, y) => val(this, y));
+            return this;
+        }
+        on_input(val) {
+            if (val == null) {
+                return this.input.on_input();
+            }
+            this.input.on_input((x, y) => val(this, y));
+            return this;
+        }
+        background(val) { if (val == null) {
+            return this.container.background();
+        } this.container.background(val); return this; }
+        padding(...values) {
+            if (values.length === 0 || (values.length === 1 && values[0] == null)) {
+                return this.container.padding();
+            }
+            this.container.padding(...values);
+            return this;
+        }
+    };
+    return ExtendedInputElement = _classThis;
+})();
+export { ExtendedInputElement };
+export const ExtendedInput = Elements.wrapper(ExtendedInputElement);
+export const NullExtendedInput = Elements.create_null(ExtendedInputElement);
+// Extended input.
+let ExtendedSelectElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "ExtendedSelectElement",
+            default_style: {
+                ...VStackElement.default_style,
+                "color": "inherit",
+                "font-size": "16px",
+                "background": "#FFFFFF",
+            }
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var ExtendedSelectElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ExtendedSelectElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        /** The selectable items. */
+        items;
+        /** The label node. */
+        // @ts-expect-error
+        label;
+        /** The image node. */
+        image;
+        /** The input node (readonly) with the selected value. */
+        input;
+        /** The container node. */
+        container;
+        /** The error text node. */
+        error_text;
+        /** The dropdown scroller element. */
+        dropdown;
+        /** Has error state. */
+        has_error = false;
+        /** Is focused state. */
+        is_focused = false;
+        // Internal attributes.
+        input_opts;
+        image_opts;
+        _dropdown_item_hover;
+        _on_change_callback;
+        _on_dropdown_close;
+        _dropdown_height;
+        _value;
+        // Constructor.
+        constructor({ label = undefined, image = undefined, placeholder = "Placeholder", id = undefined, required = false, items = [{ id: "option", text: "Option", image: undefined }], // may also be an array with strings which will be used as the item's id and text.
+        dropdown, input, }) {
+            // Initialize super.
+            super();
+            this._init({
+                derived: ExtendedSelectElement,
+            });
+            // Cast image.
+            if (typeof image === "string") {
+                image = { url: image };
+            }
+            this.image_opts = image;
+            // Set input options..
+            this.input_opts = {
+                ...(input ?? {}),
+                border: {
+                    color: input?.border?.color ?? "gray",
+                    hover: input?.border?.hover ?? "gray",
+                    focused: input?.border?.focused ?? "#8EB8EB",
+                    missing: input?.border?.missing ?? "#E8454E",
+                    width: input?.border?.width ?? "1px",
+                    radius: input?.border?.radius ?? "5px",
+                    type: input?.border?.type ?? "full",
+                },
+            };
+            // Arguments.
+            if (Array.isArray(items)) {
+                this.items = [];
+                for (const item of items) {
+                    if (typeof item === "string") {
+                        this.items.append({
+                            id: item,
+                            text: item,
+                        });
+                    }
+                    else {
+                        if (item.text == null) {
+                            item.text = item.id;
+                        }
+                        this.items.append(item);
+                    }
+                }
+            }
+            else if (typeof items === "object" && items != null) {
+                this.items = [];
+                for (const key of Object.keys(items)) {
+                    if (typeof items[key] === "string") {
+                        this.items.append({
+                            id: key,
+                            text: items[key],
+                        });
+                    }
+                    else {
+                        this.items.append({
+                            ...items[key],
+                            id: key,
+                        });
+                    }
+                }
+            }
+            else {
+                throw Error(`Parameter "items" should be a defined value of type "array" or "object".`);
+            }
+            // Attributes.
+            this._dropdown_item_hover = dropdown?.hover ?? "#00000007";
+            // Set default styling.
+            this.styles(ExtendedSelectElement.default_style);
+            // Title element.
+            this.label = Text(label)
+                .parent(this)
+                .font_size("inherit")
+                .margin(0, 0, 7.5, 0)
+                .color("inherit")
+                .width("fit-content")
+                .ellipsis_overflow(true);
+            if (label == null) {
+                this.label.hide();
+            }
+            // Title element.
+            this.image = !image ? undefined : ImageMask(image.url)
+                .parent(this)
+                .mask_color(image?.color ?? "#000")
+                .square(image?.size ?? 20)
+                .margin(0, 10, 0, 5)
+                .alt(image?.alt ?? "Volt");
+            // Input element.
+            this.input = Input(placeholder)
+                .parent(this)
+                .color("inherit")
+                .readonly(true)
+                .font_size("inherit")
+                .margin(0)
+                .width("100%")
+                .stretch(true)
+                .outline("none")
+                .padding(0, 5)
+                .line_height("1.6em")
+                .box_shadow("none")
+                .cursor("pointer")
+                .border_radius(0); // is required
+            // The hstack container.
+            this.container = HStack(!this.image ? undefined : VStack(this.image)
+                .width("fit-content")
+                .height("1.6em")
+                .center_vertical(), this.input)
+                .parent(this)
+                .background(input?.background ?? "transparent")
+                .padding((input?.padding ?? "12px 6px"))
+                .border_radius(this.input_opts.border.radius)
+                .border_width(this.input_opts.border.width)
+                .border_style("solid")
+                .transition("border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out")
+                .box_shadow(`0 0 0 0px transparent`)
+                .width("100%")
+                .on_mouse_over_out((e) => {
+                if (!this.has_error && !this.is_focused) {
+                    this._set_border_color(this.input_opts.border.hover);
+                }
+            }, (e) => {
+                if (!this.has_error && !this.is_focused) {
+                    this._set_border_color(this.input_opts.border.color);
+                }
+            })
+                .on_click(() => {
+                if (this.dropdown.is_hidden()) {
+                    this.expand();
+                }
+            });
+            this._set_border_color(this.input_opts.border.color);
+            if (this.input_opts.border.type === "bottom") {
+                this.container.padding_left(0).padding_right(0);
+            }
+            // The error message.
+            this.error_text = Text("Incomplete field")
+                .color(this.input_opts.border.missing)
+                .font_size("0.8em")
+                .margin(7.5, 0, 0, 2.5)
+                .padding(0)
+                .leading()
+                .hide();
+            // The dropdown menu.
+            this.dropdown = Scroller()
+                .parent(this)
+                .position(0, null, null, null)
+                .background(ExtendedSelectElement.default_style["background"])
+                .border_radius(this.input_opts.border.radius)
+                .border_width(this.input_opts.border.width)
+                .border_style("solid")
+                .border_color(this.input_opts.border.color)
+                .box_shadow("0px 0px 5px #00000050")
+                .frame("100%", "100%")
+                .z_index(10)
+                .hide();
+            // Append.
+            this.append(this.label, this.container, this.error_text, this.dropdown);
+            // Styling.
+            this.position("relative");
+            this.overflow("visible");
+            super.background("none");
+            // Set id.
+            if (id != null) {
+                this.id(id);
+            }
+            // Set required.
+            if (required) {
+                this.required(required);
+            }
+            // On dropdown close event by mouse down.
+            this._on_dropdown_close = (event) => {
+                let parent = event.target.parentElement;
+                let stop = true;
+                for (let i = 0; i < 4; i++) {
+                    if (parent == null) {
+                        break;
+                    }
+                    else if (parent === this.dropdown) {
+                        stop = false;
+                        break;
+                    }
+                    parent = parent.parentElement;
+                }
+                if (stop) {
+                    this.dropdown.hide();
+                    window.removeEventListener("mousedown", this._on_dropdown_close);
+                    // Unfocus.
+                    if (!this.has_error) {
+                        this.is_focused = false;
+                        this._set_border_color(this.input_opts.border.color);
+                    }
+                }
+            };
+        }
+        /** Helper to set the border color. */
+        _set_border_color(color, set_outline = false) {
+            if (this.input_opts.border.type === "full") {
+                this.container.border_color(color);
+                if (set_outline) {
+                    this.container.box_shadow(`0 0 0 3px ${color}80`);
+                }
+                else {
+                    this.container.box_shadow(`0 0 0 0px transparent`);
+                }
+            }
+            else {
+                this.container.border_bottom(this.input_opts.border.width, color);
+            }
+        }
+        focus_color(val) {
+            if (val == null) {
+                return this.input_opts.border.focused ?? "";
+            }
+            this.input_opts.border.focused = val;
+            return this;
+        }
+        error_color(val) {
+            if (val == null) {
+                return this.input_opts.border.missing ?? "";
+            }
+            this.input_opts.border.missing = val;
+            this.error_text.color(this.input_opts.border.missing);
+            return this;
+        }
+        dropdown_height(val) {
+            if (val === undefined) {
+                return this._dropdown_height;
+            }
+            this._dropdown_height = val;
+            return this;
+        }
+        /** Set default since it inherits an element. */
+        set_default() {
+            return super.set_default(ExtendedSelectElement);
+        }
+        /**
+         * Set the error state and message.
+         * Providing a truthy value will enable the error state and return the current instance for chaining.
+         * Providing a falsy value will disable the error state and return the current instance for chaining.
+         * Providing no value will return the current error message or `undefined` when no error is set.
+         */
+        error(err) {
+            if (err == null) {
+                return (this.has_error ? this.error_text.text() : undefined);
+            }
+            else if (err) {
+                this.has_error = true;
+                this._set_border_color(this.input_opts.border.missing, true);
+                this.image?.mask_color(this.input_opts.border.missing);
+                this.error_text.show();
+                if (err) {
+                    this.error_text.text(err);
+                }
+            }
+            else {
+                this.has_error = false;
+                this._set_border_color(this.input_opts.border.color);
+                this.image?.mask_color(this.image_opts?.color ?? "#000");
+                this.error_text.hide();
+            }
+            return this;
+        }
+        /** Remove the error state and mark as valid. */
+        valid() {
+            return this.error(false);
+        }
+        /** Submit the item, throws an error when the item is not defined. */
+        submit() {
+            const value = this.value();
+            if (value == null || value === "") {
+                this.error("Incomplete field");
+                throw Error("Fill in all the required fields.");
+            }
+            this.valid();
+            return value;
+        }
+        /** Expand dropdown. */
+        expand() {
+            // Set focus.
+            if (!this.has_error) {
+                this.is_focused = true;
+                this._set_border_color(this.input_opts.border.focused, true);
+            }
+            // Add event listener.
+            window.addEventListener("mousedown", this._on_dropdown_close);
+            // Clear.
+            this.dropdown.remove_children();
+            // Set top.
+            // this.dropdown.top(this.label.clientHeight + this.container.clientHeight + (this.label.is_hidden() ? 0 : 5) + 5)
+            this.dropdown.top(this.label.clientHeight + (this.label.is_hidden() ? 0 : 5));
+            // Search bar.
+            const search = Input("Search")
+                .color("inherit")
+                .font_size("inherit")
+                .margin(10)
+                .padding(0)
+                .width("calc(100% - 20px)")
+                .outline("none")
+                .box_shadow("none")
+                .border_radius(0)
+                .on_input((e, event) => {
+                const query = e.value();
+                if (query.length === 0) {
+                    content.inner_html("");
+                    for (const item of this.items) {
+                        content.append(item.stack);
+                    }
+                }
+                else {
+                    const results = vlib.fuzzy.search({
+                        query,
+                        targets: this.items,
+                        limit: undefined,
+                        case_match: false,
+                        allow_exceeding_chars: true,
+                        key: ["id", "text"],
+                    });
+                    content.inner_html("");
+                    for (const item of results) {
+                        content.append(item.stack);
+                    }
+                }
+            });
+            // The content.
+            const content = VStack()
+                .frame("100%")
+                .padding(5, 0);
+            // Add children.
+            let i = 0;
+            let min_height;
+            // this.dropdown.items = [];
+            for (const item of this.items) {
+                // Image.
+                let img;
+                if (item.image != null) {
+                    img = ImageMask(item.image)
+                        .mask_color(this.image_opts?.color ?? "#000")
+                        .square(this.image_opts?.size ?? 20)
+                        .margin(0, 10, 0, 5)
+                        .alt(this.image_opts?.alt ?? "Volt")
+                        .pointer_events("none"); // so target element of mouse down is easier.
+                }
+                // Text.
+                const text = Text(item.text)
+                    .color("inherit")
+                    .font_size("inherit")
+                    .white_space("pre")
+                    .margin(0)
+                    .width("100%")
+                    .stretch(true)
+                    .pointer_events("none"); // so target element of mouse down is easier.
+                // Stack.
+                const stack = HStack(img, text)
+                    .width("100%")
+                    .padding(5, 10)
+                    .background("transparent")
+                    .transition("background 0.2 ease-in-out")
+                    .on_click(() => {
+                    this.dropdown.hide();
+                    this._value = item.id;
+                    this.input.value(item.text ?? item.id);
+                    if (this._on_change_callback != null) {
+                        this._on_change_callback(this, item.id);
+                    }
+                    window.removeEventListener("mousedown", this._on_dropdown_close);
+                })
+                    .on_mouse_over((e) => e.background(this._dropdown_item_hover))
+                    .on_mouse_out((e) => e.background("transparent"));
+                // Update the item with the stack for searches.
+                item.stack = stack;
+                // Append.
+                content.append(stack);
+                // Increment.
+                ++i;
+            }
+            // Show search bar or just show everything.
+            if (this.items.length > 15) {
+                this.dropdown.append(search, Divider()
+                    .margin(0)
+                    .background(this.input_opts.border.color), content);
+            }
+            else {
+                this.dropdown.append(content);
+            }
+            // Show dropdown.
+            this.dropdown.show();
+            // Select
+            if (this.items.length > 15) {
+                search.select();
+            }
+            // Set min height.
+            if (this._dropdown_height !== undefined) {
+                this.dropdown.fixed_height(this._dropdown_height);
+            }
+            else if (this.items.length > 15) {
+                this.dropdown.fixed_height((this.dropdown.content.child(0).clientHeight) * Math.min(this.items.length, 10) + 10);
+            }
+            else {
+                this.dropdown.fixed_height((this.dropdown.content.child(0).child(0).clientHeight) * Math.min(this.items.length, 10) + 10);
+            }
+            // this.dropdown.min_height((this.dropdown.content.child(0).clientHeight + 10) * Math.min(this.items.length, 10) + 10) // old.
+            // Response.
+            return this;
+        }
+        value(val) {
+            if (val == null) {
+                return this._value ?? "";
+            }
+            for (const item of this.items) {
+                if (item.id === val) {
+                    this._value = val;
+                    this.input.value(item.text ?? item.id);
+                    if (this._on_change_callback != null) {
+                        this._on_change_callback(this, val);
+                    }
+                }
+            }
+            return this;
+        }
+        background(val) {
+            if (val == null) {
+                return this.background();
+            }
+            this.container.background(val);
+            this.dropdown.background(val);
+            return this;
+        }
+        padding(...values) {
+            if (values.length === 0 || (values.length === 1 && values[0] == null)) {
+                return this.container.padding();
+            }
+            this.container.padding(...values);
+            this.dropdown.padding(...values);
+            return this;
+        }
+        // @ts-expect-error
+        on_change(callback) {
+            if (callback == null) {
+                return this._on_change_callback;
+            }
+            this._on_change_callback = callback;
+            return this;
+        }
+        text(val) { if (val == null) {
+            return this.label.text();
+        } this.label.text(val); return this; }
+        required(val) { if (val == null) {
+            return this.input.required();
+        } this.input.required(val); return this; }
+    };
+    return ExtendedSelectElement = _classThis;
+})();
+export { ExtendedSelectElement };
+export const ExtendedSelect = Elements.wrapper(ExtendedSelectElement);
+export const NullExtendedSelect = Elements.create_null(ExtendedSelectElement);