@vandenberghinc/volt 1.2.6 → 1.2.8

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

@@ -0,0 +1,233 @@
+/**
+ * @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;
+};
+// Imports.
+import { Elements, isVElement } from "../elements/module.js";
+import { isButtonLike } from "./button.js";
+import { VStackElement } from "./stack.js";
+// Extended input.
+let FormElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "FormElement",
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var FormElement = 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);
+            FormElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Attributes.
+        _button;
+        fields;
+        _on_submit;
+        _on_submit_error;
+        _on_append_callback;
+        // Constructor.
+        constructor(...children) {
+            // Initialize super.
+            super();
+            this._init({
+                derived: FormElement,
+            });
+            // Attributes.
+            this._button = undefined;
+            this.fields = {};
+            // Set the on append callback.
+            const _this = this;
+            this._on_append_callback = (child) => {
+                // Initialize field.
+                if (child.element_name === "ExtendedInputElement" || child.element_name === "ExtendedSelectElement" || child.element_name === "CheckBoxElement") {
+                    const id = child.id();
+                    if (id != null && id !== "") {
+                        _this.fields[id] = child;
+                        child.on_input(() => {
+                            if (child.has_error) {
+                                child.valid();
+                            }
+                        });
+                        child.on_enter(() => _this.submit());
+                    }
+                }
+                // Initialize button.
+                else if (isButtonLike(child)
+                    && child.on_click() == null
+                    && child.attr("submit_button") !== "false") {
+                    if (_this._button !== undefined) {
+                        _this._button.on_click(() => { });
+                    }
+                    _this.button(child);
+                }
+                // Parse children.
+                if (child.children != null) {
+                    for (let i = 0; i < child.children.length; i++) {
+                        _this._on_append_callback(child.children[i]);
+                    }
+                }
+            };
+            // Append.
+            this.append(...children);
+        }
+        // Submit all input elements and get the data inside an object.
+        // When a required input is not filled in then an error is thrown.
+        // An object will be returned with each input's id as the key and the input's value as value.
+        // When an input field does not have an assigned id it will be skipped.
+        // Only supported extended input elements like `ExtendedInput`.
+        // @ts-expect-error
+        data() {
+            const params = {};
+            let first_error;
+            const ids = Object.keys(this.fields);
+            for (let i = 0; i < ids.length; i++) {
+                try {
+                    const id = ids[i];
+                    const element = this.fields[id];
+                    if (element.required() !== true) {
+                        params[id] = element.value();
+                    }
+                    else {
+                        params[id] = element.submit();
+                    }
+                }
+                catch (e) {
+                    // always use a try catch to call submit on all inputs to set invalid/missing fields.
+                    if (first_error === undefined) {
+                        first_error = e;
+                    }
+                }
+            }
+            if (first_error) {
+                throw first_error;
+            }
+            return params;
+        }
+        // Submit.
+        async submit() {
+            // Init.
+            if (this._button === undefined) {
+                throw Error("No submit button has been found, add a button to the form or attach a button using \"Form.button()\".");
+            }
+            if (this._button.show_loader !== undefined) {
+                this._button.show_loader();
+            }
+            // Submit.
+            try {
+                const data = this.data();
+                if (this._on_submit !== undefined) {
+                    const res = this._on_submit(this, data);
+                    if (res instanceof Promise) {
+                        await res;
+                    }
+                }
+                if (this._button.hide_loader !== undefined) {
+                    this._button.hide_loader();
+                }
+            }
+            // Handle rror.
+            catch (error) {
+                if (!(error instanceof Error)) {
+                    error = new Error(error.toString());
+                }
+                // Defined callback.
+                if (this._on_submit_error !== undefined) {
+                    const res = this._on_submit_error(this, error);
+                    if (res instanceof Promise) {
+                        await res;
+                    }
+                    if (this._button.hide_loader !== undefined) {
+                        this._button.hide_loader();
+                    }
+                }
+                // No callback so rethrow.
+                else {
+                    if (this._button.hide_loader !== undefined) {
+                        this._button.hide_loader();
+                    }
+                    throw error;
+                }
+            }
+            return this;
+        }
+        button(element_or_id) {
+            if (element_or_id == null) {
+                return this._button;
+            }
+            else if (typeof element_or_id === "string") {
+                const node = document.getElementById(element_or_id);
+                if (!isVElement(node)) {
+                    throw Error(`Specified element is not a VElement.`);
+                }
+                element_or_id = node;
+                if (element_or_id == null) {
+                    throw Error(`Unable to find element "${element_or_id}".`);
+                }
+            }
+            this._button = element_or_id;
+            const _this = this;
+            this._button.on_click(() => {
+                _this.submit().catch(console.error);
+            });
+            return this;
+        }
+        // @ts-expect-error
+        on_submit(callback) {
+            if (callback == null) {
+                return this._on_submit;
+            }
+            this._on_submit = callback;
+            return this;
+        }
+        on_submit_error(callback) {
+            if (callback == null) {
+                return this._on_submit_error;
+            }
+            this._on_submit_error = callback;
+            return this;
+        }
+    };
+    return FormElement = _classThis;
+})();
+export { FormElement };
+export const Form = Elements.wrapper(FormElement);
+export const NullForm = Elements.create_null(FormElement);

package/frontend/dist/frontend/src/ui/frame_modes.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElement } from "../elements/module.js";
+export declare class FrameNodes extends Array<VElement> {
+    constructor(...children: VElement[]);
+}
+type OnSet<Mode extends string> = (mode: Mode, nodes: FrameNodes) => any;
+/**
+ * Frame modes used to switch easily between frame nodes.
+ *
+ * Initialize the class with the wanted frame modes, then call `.exec(MyMode.my_mode.push)` on the nodes.
+ *
+ * Afterwards the mode can be set using `MyMode.set("my_mode")`.
+ * @docs
+ */
+export declare class FrameModes<Mode extends string = string> {
+    modes: Record<Mode, FrameNodes>;
+    active?: Mode;
+    _on_set?: OnSet<Mode>;
+    constructor(...modes: Mode[]);
+    get(mode: Mode): FrameNodes;
+    set(mode: Mode): this;
+    switch(mode: Mode): this;
+    on_set(): undefined | OnSet<Mode>;
+    on_set(callback: OnSet<Mode>): this;
+    on_switch(): undefined | OnSet<Mode>;
+    on_switch(callback: OnSet<Mode>): this;
+}
+declare global {
+    interface VElementExtensions {
+        frame_mode(frame_mode: FrameNodes): this;
+        frame_mode<Mode extends string>(frame_modes: FrameModes<Mode>, mode_name: Mode): this;
+    }
+}
+export {};

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

@@ -0,0 +1,108 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+// Imports.
+import { Elements } from "../elements/module.js";
+// Nodes type.
+export class FrameNodes extends Array {
+    constructor(...children) {
+        super(...children);
+    }
+}
+/**
+ * Frame modes used to switch easily between frame nodes.
+ *
+ * Initialize the class with the wanted frame modes, then call `.exec(MyMode.my_mode.push)` on the nodes.
+ *
+ * Afterwards the mode can be set using `MyMode.set("my_mode")`.
+ * @docs
+ */
+export class FrameModes {
+    // Attributes.
+    modes = {};
+    active;
+    _on_set;
+    // Provide mode names as args: `sign_in, sign_up`.
+    constructor(...modes) {
+        for (const mode of modes) {
+            if (this.active == null) {
+                this.active = mode;
+            }
+            this.modes[mode] = new FrameNodes();
+        }
+    }
+    // Get.
+    get(mode) {
+        const nodes = this.modes[mode];
+        if (nodes === undefined) {
+            throw new Error(`Requested mode "${mode}" does not exist.`);
+        }
+        return nodes;
+    }
+    // Set mode.
+    set(mode) {
+        this.active = mode;
+        for (const m of Object.keys(this.modes)) {
+            if (m === mode) {
+                for (const node of this.modes[m]) {
+                    node.show();
+                }
+            }
+            else {
+                for (const node of this.modes[m]) {
+                    node.hide();
+                }
+            }
+        }
+        if (this._on_set !== undefined) {
+            this._on_set(mode, this.modes[mode]);
+        }
+        return this;
+    }
+    switch(mode) { return this.set(mode); }
+    on_set(callback) {
+        if (callback == null) {
+            return this._on_set;
+        }
+        this._on_set = callback;
+        return this;
+    }
+    on_switch(callback) {
+        if (callback == null) {
+            return this._on_set;
+        }
+        this._on_set = callback;
+        return this;
+    }
+}
+Elements.extend({
+    /**
+     * Adds a node to a FrameMode. Can accept a single argument to push the current instance or two arguments to specify a FrameModesType and an index.
+     * @param args Arguments to determine the operation to perform for adding a node.
+     * @returns Returns the instance of the element for chaining.
+     * @docs
+     */
+    frame_mode(...args) {
+        if (args.length === 1) {
+            args[0].push(this);
+        }
+        else if (args.length === 2 && args[0] instanceof FrameModes) {
+            const frames_mode = args[0];
+            const mode_name = args[1];
+            if (mode_name !== frames_mode.active) {
+                this.hide();
+            }
+            frames_mode.modes[mode_name].push(this);
+        }
+        return this;
+    }
+});
+// @test
+// import { Form } from "./form.js"
+// Form()
+// 	.frame_mode(FrameModes("test"), "test")
+// 	.on_submit(((e) => {}) as any)
+// Form()
+// 	.frame_mode(FrameModes("test"), "test")
+// 	.on_submit2(((e) => {}) as any)

package/frontend/dist/frontend/src/ui/google_map.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementTagMap } from "../elements/module.js";
+export declare class GoogleMapElement extends VElementTagMap.iframe {
+    constructor({ location, mode, api_key, }: {
+        location: string;
+        mode: string;
+        api_key?: string;
+    });
+    update(): this;
+}
+export declare const GoogleMap: <Extensions extends object = {}>(args_0: {
+    location: string;
+    mode: string;
+    api_key?: string;
+}) => GoogleMapElement & Extensions;
+export declare const NullGoogleMap: <Extensions extends object = {}>() => GoogleMapElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        GoogleMapElement: GoogleMapElement;
+    }
+}

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

@@ -0,0 +1,106 @@
+/**
+ * @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;
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+import { Utils } from "../modules/utils.js";
+import { Google } from "../modules/google.js";
+// GoogleMap.
+let GoogleMapElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "GoogleMapElement",
+            default_style: {
+                "border": "0",
+            },
+            default_attributes: {
+                "width": "100%",
+                "height": "100%",
+                "frameborder": "0",
+                "style": "border:0",
+                "referrerpolicy": "no-referrer-when-downgrade",
+                "allowfullscreen": "true",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.iframe;
+    var GoogleMapElement = 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);
+            GoogleMapElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Constructor.
+        constructor({ location, mode = "place", api_key, }) {
+            // Initialize base class.
+            super({
+                derived: GoogleMapElement,
+            });
+            // Set source.
+            this.src("https://www.google.com/maps/embed/v1/" + mode + "?key=" + (api_key ?? Google.cloud.api_key) + "&" + Utils.url_encode({ "q": location.replaceAll(' ', '+') }));
+        }
+        // Update.
+        // Needs to be called after initialing or changing the loader.
+        update() {
+            this.remove_children();
+            const children_style = {
+                "width": "calc(" + this.style.width + " * (64.0px / 80.0px))",
+                "height": "calc(" + this.style.height + " * (64.0px / 80.0px))",
+                "margin": "calc(" + this.style.width + " * (8.0px / 80.0px))",
+                "border": "calc(" + this.style.width + " * (8.0px / 80.0px)) solid " + this.style.background,
+                "border-color": this.style.background + " transparent transparent transparent",
+            };
+            for (let i = 0; i < 4; i++) {
+                let e = document.createElement("div");
+                for (let attr in children_style) {
+                    e.style[attr] = children_style[attr];
+                }
+                this.append(e);
+            }
+            return this;
+        }
+    };
+    return GoogleMapElement = _classThis;
+})();
+export { GoogleMapElement };
+export const GoogleMap = Elements.wrapper(GoogleMapElement);
+export const NullGoogleMap = Elements.create_null(GoogleMapElement);

package/frontend/dist/frontend/src/ui/gradient.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementTagMap } from "../elements/module.js";
+import { GradientType } from "../types/gradient.js";
+export { GradientType };
+export declare const Gradient: <Extensions extends object = {}>(type: string, ...colors: string[]) => GradientType & Extensions;
+export declare const NullGradient: <Extensions extends object = {}>() => GradientType & Extensions;
+export declare class GradientBorderElement extends VElementTagMap.div {
+    constructor();
+    border(): string;
+    border(width: string | number, color: string): this;
+    border_color(): string;
+    border_color(val: string): this;
+    border_width(): string;
+    border_width(value: number | string): this;
+}
+export declare const GradientBorder: <Extensions extends object = {}>() => GradientBorderElement & Extensions;
+export declare const NullGradientBorder: <Extensions extends object = {}>() => GradientBorderElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        GradientBorderElement: GradientBorderElement;
+    }
+}

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

@@ -0,0 +1,131 @@
+/**
+ * @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;
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+import { GradientType } from "../types/gradient.js";
+export { GradientType };
+export const Gradient = Elements.wrapper(GradientType);
+export const NullGradient = Elements.create_null(GradientType);
+// Gradient border.
+let GradientBorderElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "GradientBorderElement",
+            default_style: {
+                "--child-border-width": "1px",
+                "--child-border-radius": "10px",
+                "--child-border-color": "black",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.div;
+    var GradientBorderElement = 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);
+            GradientBorderElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Constructor.
+        constructor() {
+            // Initialize base classes.
+            super({
+                derived: GradientBorderElement,
+            });
+            // Styling.
+            this
+                .content("")
+                .position("absolute")
+                // .z_index(-1)
+                .inset(0)
+                .padding(GradientBorderElement.default_style["--child-border-width"] ?? "")
+                .border_radius(GradientBorderElement.default_style["--child-border-radius"] ?? "")
+                .background(GradientBorderElement.default_style["--child-border-color"] ?? "")
+                .mask("linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)")
+                .mask_composite("exclude")
+                // .mask_composite((navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Mozilla")) ? "exclude" : "xor")
+                .styles({
+                "-webkit-mask": "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                "-webkit-mask-composite": (navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Mozilla")) ? "exclude" : "xor",
+            });
+        }
+        /**
+         * Assigns the border color of this node, also supports a `GradientType` element.
+         * @note This method supports a different set of parameters than the standard `VElement.border` method.
+         * @param width The width of the border.
+         * @param color The color of the border.
+         * @returns Returns the instance for chaining unless parameter `value` is `undefined`, then the attribute's value is returned.
+         * @docs
+         */
+        // @ts-ignore different signature than base.
+        border(width, color) {
+            if (width == null) {
+                return `${this.border_width().split(" ")[0]} ${this.border_color()}`;
+            }
+            else {
+                this.border_width(width);
+                if (color) {
+                    this.border_color(color);
+                }
+            }
+            return this;
+        }
+        border_color(val) {
+            if (val === undefined) {
+                return this.style.background ?? "";
+            }
+            this.style.background = val;
+            return this;
+        }
+        border_width(value) {
+            if (value == null) {
+                return this.padding() ?? "";
+            }
+            this.padding(value);
+            return this;
+        }
+    };
+    return GradientBorderElement = _classThis;
+})();
+export { GradientBorderElement };
+export const GradientBorder = Elements.wrapper(GradientBorderElement);
+export const NullGradientBorder = Elements.create_null(GradientBorderElement);