@vandenberghinc/volt 1.1.2

package/frontend/dist/ui/form.js

@@ -0,0 +1,227 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+// Imports.
+import { Elements, isVElement } from "../elements/module.js";
+import { VStackElement } from "./stack";
+// Extended input.
+let FormElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var FormElement = _classThis = class extends _classSuper {
+        // Constructor.
+        constructor(...children) {
+            // Initialize super.
+            super();
+            this._init_derived({
+                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_type === "ExtendedInput" || child.element_type === "ExtendedSelect" || child.element_type === "CheckBox") {
+                    const id = child.id();
+                    if (id != null && id !== "") {
+                        _this.fields[id] = child;
+                        child.on_input(() => {
+                            if (child.missing() === true) {
+                                child.missing(false);
+                            }
+                        });
+                        child.on_enter(() => _this.submit());
+                    }
+                }
+                // Initialize button.
+                else if ( /*_this._button === undefined &&*/(child.element_type === "Button" || child.element_type === "LoaderButton") && 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;
+        }
+    };
+    __setFunctionName(_classThis, "FormElement");
+    (() => {
+        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);
+    })();
+    return FormElement = _classThis;
+})();
+export { FormElement };
+export const Form = Elements.wrapper(FormElement);
+export const NullForm = Elements.create_null(FormElement);

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

@@ -0,0 +1,28 @@
+export declare class FrameNodesType extends Array {
+    constructor(...children: any[]);
+}
+export declare const FrameNodes: <Extensions extends object = {}>(...args: any[]) => FrameNodesType & Extensions;
+export declare const NullFrameNodes: <Extensions extends object = {}>() => FrameNodesType & Extensions;
+type OnSet = (mode: string, nodes: FrameNodesType) => any;
+export declare class FrameModesType {
+    modes: Record<string, FrameNodesType>;
+    active?: string;
+    _on_set?: OnSet;
+    constructor(...modes: string[]);
+    get(mode: string): FrameNodesType;
+    set(mode: string): this;
+    switch(mode: string): this;
+    on_set(): undefined | OnSet;
+    on_set(callback: OnSet): this;
+    on_switch(): undefined | OnSet;
+    on_switch(callback: OnSet): this;
+}
+export declare const FrameModes: <Extensions extends object = {}>(...args: string[]) => FrameModesType & Extensions;
+export declare const NullFrameModes: <Extensions extends object = {}>() => FrameModesType & Extensions;
+declare global {
+    interface VElementExtensions {
+        frame_mode(frame_mode: FrameNodesType): this;
+        frame_mode(frame_modes: FrameModesType, mode_name: string): this;
+    }
+}
+export {};

package/frontend/dist/ui/frame_modes.js

@@ -0,0 +1,116 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+// Imports.
+import { Elements } from "../elements/module.js";
+// Nodes type.
+export class FrameNodesType extends Array {
+    constructor(...children) {
+        super(...children);
+    }
+}
+export const FrameNodes = Elements.wrapper(FrameNodesType);
+export const NullFrameNodes = Elements.create_null(FrameNodesType);
+// Frame mode used to switch easily between frames.
+/*	@docs:
+    @title: Frame Modes
+    @descr:
+        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")`.
+ */
+export class FrameModesType {
+    // Provide mode names as args: `sign_in, sign_up`.
+    constructor(...modes) {
+        // Attributes.
+        this.modes = {};
+        for (const mode of modes) {
+            if (this.active == null) {
+                this.active = mode;
+            }
+            this.modes[mode] = 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[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;
+    }
+}
+export const FrameModes = Elements.wrapper(FrameModesType);
+export const NullFrameModes = Elements.create_null(FrameModesType);
+Elements.extend({
+    /**
+     * @docs:
+     * @title: Frame Mode
+     * @desc: 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:
+     *     @name: args
+     *     @descr: Arguments to determine the operation to perform for adding a node.
+     * @return:
+     *     @description Returns the instance of the element for chaining.
+     */
+    frame_mode(...args) {
+        if (args.length === 1) {
+            args[0].push(this);
+        }
+        else if (args.length === 2 && args[0] instanceof FrameModesType) {
+            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"
+// 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/ui/google_map.d.ts

@@ -0,0 +1,31 @@
+import { VElementTagMap } from "../elements/module.js";
+export declare class GoogleMapElement extends VElementTagMap.iframe {
+    static default_style: {
+        border: string;
+    };
+    static default_attributes: {
+        width: string;
+        height: string;
+        frameborder: string;
+        style: string;
+        referrerpolicy: string;
+        allowfullscreen: string;
+    };
+    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/ui/google_map.js

@@ -0,0 +1,111 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+import { Utils } from "../modules/utils.js";
+import { Google } from "../modules/google";
+// GoogleMap.
+let GoogleMapElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.iframe;
+    var GoogleMapElement = _classThis = class extends _classSuper {
+        // 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;
+        }
+    };
+    __setFunctionName(_classThis, "GoogleMapElement");
+    (() => {
+        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 });
+    })();
+    _classThis.default_style = {
+        "border": "0",
+    };
+    _classThis.default_attributes = {
+        "width": "100%",
+        "height": "100%",
+        "frameborder": "0",
+        "style": "border:0",
+        "referrerpolicy": "no-referrer-when-downgrade",
+        "allowfullscreen": "true",
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return GoogleMapElement = _classThis;
+})();
+export { GoogleMapElement };
+export const GoogleMap = Elements.wrapper(GoogleMapElement);
+export const NullGoogleMap = Elements.create_null(GoogleMapElement);

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

@@ -0,0 +1,24 @@
+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 {
+    static default_style: {
+        "--child-border-width": string;
+        "--child-border-radius": string;
+        "--child-border-color": string;
+    };
+    constructor();
+    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/ui/gradient.js

@@ -0,0 +1,115 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+// 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 = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.div;
+    var GradientBorderElement = _classThis = class extends _classSuper {
+        // 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",
+            });
+        }
+        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;
+        }
+    };
+    __setFunctionName(_classThis, "GradientBorderElement");
+    (() => {
+        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 });
+    })();
+    _classThis.default_style = {
+        "--child-border-width": "1px",
+        "--child-border-radius": "10px",
+        "--child-border-color": "black",
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return GradientBorderElement = _classThis;
+})();
+export { GradientBorderElement };
+export const GradientBorder = Elements.wrapper(GradientBorderElement);
+export const NullGradientBorder = Elements.create_null(GradientBorderElement);