@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/dist/ui/input.js

@@ -36,10 +36,6 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     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";
@@ -51,13 +47,41 @@ import { Scroller } from "./scroller";
 import { Divider } from "./divider";
 // Input.
 let InputElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    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 = _classThis = class extends _classSuper {
+    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.
@@ -156,33 +180,6 @@ let InputElement = (() => {
             return this;
         }
     };
-    __setFunctionName(_classThis, "InputElement");
-    (() => {
-        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 });
-    })();
-    _classThis.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",
-    };
-    _classThis.default_attributes = {
-        "spellcheck": "false",
-        "autocorrect": "off",
-        "autocapitalize": "none",
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return InputElement = _classThis;
 })();
 export { InputElement };
@@ -190,13 +187,43 @@ export const Input = Elements.wrapper(InputElement);
 export const NullInput = Elements.create_null(InputElement);
 // InputBox.
 let InputBoxElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    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 = _classThis = class extends _classSuper {
+    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.
@@ -294,35 +321,6 @@ let InputBoxElement = (() => {
             return this;
         }
     };
-    __setFunctionName(_classThis, "InputBoxElement");
-    (() => {
-        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 });
-    })();
-    _classThis.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",
-    };
-    _classThis.default_attributes = {
-        "spellcheck": "false",
-        "autocorrect": "off",
-        "autocapitalize": "none",
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return InputBoxElement = _classThis;
 })();
 export { InputBoxElement };
@@ -330,19 +328,60 @@ export const InputBox = Elements.wrapper(InputBoxElement);
 export const NullInputBox = Elements.create_null(InputBoxElement);
 // Extended input.
 let ExtendedInputElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "ExtendedInputElement",
+            default_style: {
+                ...VStackElement.default_style,
+                "color": "inherit",
+                "font-size": "16px",
+                // Custom.
+                "--input-padding": "12px 6px",
+                "--input-border-radius": "5px",
+                "--input-border-color": "gray",
+                "--input-hover-border-color": "gray",
+                "--input-background": "transparent",
+                "--image-mask-color": "#000",
+                "--image-size": "20px",
+                "--image-margin-right": "10px",
+                "--image-margin-left": "5px",
+                "--image-alt": "VWeb",
+                "--focus-color": "#8EB8EB",
+                "--missing-color": "#E8454E",
+            },
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VStackElement;
-    var ExtendedInputElement = _classThis = class extends _classSuper {
+    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);
+        }
+        _focus_color;
+        _missing_color;
+        _mask_color;
+        _initial_border_color;
+        _hover_border_color;
+        // @ts-expect-error
+        label;
+        image;
+        input;
+        input_border;
+        container;
+        error;
+        is_missing = false;
+        is_focused = false;
         // @todo add readonly func
         // Constructor.
         constructor({ label = undefined, image = undefined, alt = undefined, placeholder = "Input", id = undefined, readonly = false, required = false, type = "text", value = undefined, }) {
             // Initialize super.
             super();
-            this._init_derived({
+            this._init({
                 derived: ExtendedInputElement,
             });
             // Set id.
@@ -350,19 +389,18 @@ let ExtendedInputElement = (() => {
                 this.id(id);
             }
             // Attributes.
-            this.element_type = "ExtendedInput";
             this._focus_color = ExtendedInputElement.default_style["--focus-color"];
             this._missing_color = ExtendedInputElement.default_style["--missing-color"];
             this._mask_color = ExtendedInputElement.default_style["--image-mask-color"];
-            this._initial_border_color = "black";
-            this._missing = false;
+            this._initial_border_color = ExtendedInputElement.default_style["--input-border-color"];
+            this._hover_border_color = ExtendedInputElement.default_style["--input-hover-border-color"];
             // Set default styling.
             this.styles(ExtendedInputElement.default_style);
             // Title element.
             this.label = Text(label)
                 .parent(this)
                 .font_size("inherit")
-                .margin(0, 0, 5, 0)
+                .margin(0, 0, 7.5, 0)
                 .color("inherit")
                 .width("fit-content")
                 .ellipsis_overflow(true);
@@ -404,26 +442,16 @@ let ExtendedInputElement = (() => {
                 .outline("none")
                 .z_index(1)
                 .border_radius(0) // is required.
-                // .on_focus(() => {
-                // 	if (this._missing !== true) {
-                // 		this.container.outline(`1px solid ${this._focus_color}`)
-                // 		this.container.box_shadow(`0 0 0 3px ${this._focus_color}80`)
-                // 	}
-                // })
-                // .on_blur(() => {
-                // 	if (this._missing !== true) {
-                // 		this.container.outline("0px solid transparent")
-                // 		this.container.box_shadow(`0 0 0 0px transparent`)
-                // 	}
-                // })
                 .on_focus(() => {
-                if (this._missing !== true) {
+                if (!this.is_missing) {
+                    this.is_focused = true;
                     this.input_border.border_color(this._focus_color);
                     this.container.box_shadow(`0 0 0 3px ${this._focus_color}80`);
                 }
             })
                 .on_blur(() => {
-                if (this._missing !== true) {
+                if (!this.is_missing) {
+                    this.is_focused = false;
                     this.input_border.border_color(this._initial_border_color);
                     this.container.box_shadow(`0 0 0 0px transparent`);
                 }
@@ -440,6 +468,7 @@ let ExtendedInputElement = (() => {
                 .transition("background 200ms ease-in-out");
             // The hstack container.
             this.container = HStack(VStack(this.image)
+                .width("fit-content")
                 .height("1.6em")
                 .center_vertical(), this.input_border, this.input)
                 .parent(this)
@@ -449,7 +478,16 @@ let ExtendedInputElement = (() => {
                 .transition("box-shadow 0.2s ease-in-out")
                 .outline("0px solid transparent")
                 .box_shadow(`0 0 0 0px transparent`)
-                .width("100%");
+                .width("100%")
+                .on_mouse_over_out((e) => {
+                if (!this.is_missing && !this.is_focused) {
+                    this.input_border.border_color(this._hover_border_color);
+                }
+            }, (e) => {
+                if (!this.is_missing && !this.is_focused) {
+                    this.input_border.border_color(this._initial_border_color);
+                }
+            });
             // The error message.
             this.error = Text("Incomplete field")
                 .color(this._missing_color)
@@ -480,6 +518,7 @@ let ExtendedInputElement = (() => {
                 styles["--input-padding"] = this.container.padding();
                 styles["--input-border-radius"] = this.container.border_radius();
                 styles["--input-border-color"] = this.container.border_color();
+                styles["--input-hover-border-color"] = this._hover_border_color;
                 styles["--image-mask-color"] = this._mask_color;
                 styles["--image-size"] = this.image.width().toString();
                 styles["--image-margin-right"] = this.image.margin_right().toString();
@@ -514,10 +553,10 @@ let ExtendedInputElement = (() => {
         }
         missing(to, err = "Incomplete field") {
             if (to == null) {
-                return this._missing;
+                return this.is_missing;
             }
             else if (to === true) {
-                this._missing = true;
+                this.is_missing = true;
                 this.input_border.border_color(this._missing_color);
                 // this.container.outline(`1px solid ${this._missing_color}`)
                 this.container.box_shadow(`0 0 0 3px ${this._missing_color}80`);
@@ -528,7 +567,7 @@ let ExtendedInputElement = (() => {
                 }
             }
             else {
-                this._missing = false;
+                this.is_missing = false;
                 this.input_border.border_color(this._initial_border_color);
                 // this.container.outline("0px solid transparent")
                 this.container.box_shadow(`0 0 0 0px transparent`);
@@ -604,6 +643,13 @@ let ExtendedInputElement = (() => {
             this.input_border.border_color(val);
             return this;
         }
+        hover_border_color(val) {
+            if (val == null) {
+                return this._hover_border_color;
+            }
+            this._hover_border_color = val;
+            return this;
+        }
         border_width(val) { if (val == null) {
             return this.container.border_width();
         } this.container.border_width(val); this.input_border.border_width(val); return this; }
@@ -628,33 +674,6 @@ let ExtendedInputElement = (() => {
             return this;
         }
     };
-    __setFunctionName(_classThis, "ExtendedInputElement");
-    (() => {
-        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 });
-    })();
-    _classThis.default_style = {
-        ...VStackElement.default_style,
-        "color": "inherit",
-        "font-size": "16px",
-        // Custom.
-        "--input-padding": "12px 6px",
-        "--input-border-radius": "5px",
-        "--input-border-color": "gray",
-        "--input-background": "transparent",
-        "--image-mask-color": "#000",
-        "--image-size": "20px",
-        "--image-margin-right": "10px",
-        "--image-margin-left": "5px",
-        "--image-alt": "VWeb",
-        "--focus-color": "#8EB8EB",
-        "--missing-color": "#E8454E",
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return ExtendedInputElement = _classThis;
 })();
 export { ExtendedInputElement };
@@ -662,19 +681,64 @@ export const ExtendedInput = Elements.wrapper(ExtendedInputElement);
 export const NullExtendedInput = Elements.create_null(ExtendedInputElement);
 // Extended input.
 let ExtendedSelectElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "ExtendedSelectElement",
+            default_style: {
+                ...VStackElement.default_style,
+                "color": "inherit",
+                "font-size": "16px",
+                "background": "#FFFFFF",
+                // Custom.
+                "--input-padding": "12px 6px",
+                "--input-border-radius": "5px",
+                "--input-border-color": "gray",
+                "--image-mask-color": "#000",
+                "--image-size": "20px",
+                "--image-margin-right": "10px",
+                "--image-margin-left": "5px",
+                "--image-alt": "VWeb",
+                "--hover-bg": "#00000007",
+                "--focus-color": "#8EB8EB",
+                "--missing-color": "#E8454E",
+            }
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VStackElement;
-    var ExtendedSelectElement = _classThis = class extends _classSuper {
+    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);
+        }
+        _focus_color;
+        _missing_color;
+        _mask_color;
+        _border_color;
+        _hover_bg;
+        items;
+        // @ts-expect-error
+        label;
+        image;
+        input;
+        container;
+        error;
+        dropdown;
+        is_missing = false;
+        _on_change_callback;
+        _on_dropdown_close;
+        _dropdown_height;
+        _value;
         // Constructor.
         constructor({ label = undefined, image = undefined, alt = "", 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.
          }) {
             // Initialize super.
             super();
-            this._init_derived({
+            this._init({
                 derived: ExtendedSelectElement,
             });
             // Arguments.
@@ -715,22 +779,19 @@ let ExtendedSelectElement = (() => {
             else {
                 throw Error(`Parameter "items" should be a defined value of type "array" or "object".`);
             }
-            // Default attributes.
-            this.element_type = "ExtendedSelect";
             // Attributes.
             this._focus_color = ExtendedSelectElement.default_style["--focus-color"];
             this._missing_color = ExtendedSelectElement.default_style["--missing-color"];
             this._mask_color = ExtendedSelectElement.default_style["--image-mask-color"];
             this._border_color = ExtendedSelectElement.default_style["--input-border-color"];
             this._hover_bg = ExtendedSelectElement.default_style["--hover-bg"];
-            this._missing = false;
             // Set default styling.
             this.styles(ExtendedSelectElement.default_style);
             // Title element.
             this.label = Text(label)
                 .parent(this)
                 .font_size("inherit")
-                .margin(0, 0, 5, 0)
+                .margin(0, 0, 7.5, 0)
                 .color("inherit")
                 .width("fit-content")
                 .ellipsis_overflow(true);
@@ -764,20 +825,9 @@ let ExtendedSelectElement = (() => {
                 .box_shadow("none")
                 .cursor("pointer")
                 .border_radius(0); // is required
-            // .on_focus(() => {
-            // 	if (this._missing !== true) {
-            // 		this.container.outline(`1px solid ${this._focus_color}`)
-            // 		this.container.box_shadow(`0 0 0 3px ${this._focus_color}80`)
-            // 	}
-            // })
-            // .on_blur(() => {
-            // 	if (this._missing !== true) {
-            // 		this.container.outline("0px solid transparent")
-            // 		this.container.box_shadow(`0 0 0 0px transparent`)
-            // 	}
-            // })
             // The hstack container.
             this.container = HStack(VStack(this.image)
+                .width("fit-content")
                 .height("1.6em")
                 .center_vertical(), this.input)
                 .parent(this)
@@ -898,10 +948,10 @@ let ExtendedSelectElement = (() => {
         }
         missing(to, err = "Incomplete field") {
             if (to == null) {
-                return this._missing;
+                return this.is_missing;
             }
             else if (to === true) {
-                this._missing = true;
+                this.is_missing = true;
                 this.container.outline(`1px solid ${this._missing_color}`);
                 this.container.box_shadow(`0 0 0 3px ${this._missing_color}80`);
                 this.image.mask_color(this._missing_color);
@@ -911,7 +961,7 @@ let ExtendedSelectElement = (() => {
                 }
             }
             else {
-                this._missing = false;
+                this.is_missing = false;
                 this.container.outline("0px solid transparent");
                 this.container.box_shadow(`0 0 0 0px transparent`);
                 this.image.mask_color(this._mask_color);
@@ -1152,34 +1202,6 @@ let ExtendedSelectElement = (() => {
             return this.input.required();
         } this.input.required(val); return this; }
     };
-    __setFunctionName(_classThis, "ExtendedSelectElement");
-    (() => {
-        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 });
-    })();
-    _classThis.default_style = {
-        ...VStackElement.default_style,
-        "color": "inherit",
-        "font-size": "16px",
-        "background": "#FFFFFF",
-        // Custom.
-        "--input-padding": "12px 6px",
-        "--input-border-radius": "5px",
-        "--input-border-color": "gray",
-        "--image-mask-color": "#000",
-        "--image-size": "20px",
-        "--image-margin-right": "10px",
-        "--image-margin-left": "5px",
-        "--image-alt": "VWeb",
-        "--hover-bg": "#00000007",
-        "--focus-color": "#8EB8EB",
-        "--missing-color": "#E8454E",
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return ExtendedSelectElement = _classThis;
 })();
 export { ExtendedSelectElement };

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

@@ -1,15 +1,5 @@
 import { VElementTagMap } from "../elements/module.js";
 export declare class AnchorElement extends VElementTagMap.a {
-    static default_style: {
-        "font-family": string;
-        "font-size": string;
-        color: string;
-        "text-decoration": string;
-        "text-underline-position": string;
-        cursor: string;
-        outline: string;
-        border: string;
-    };
     constructor(text?: string, href?: string, alt?: string);
 }
 export declare const Anchor: <Extensions extends object = {}>(text?: string | undefined, href?: string | undefined, alt?: string | undefined) => AnchorElement & Extensions;
@@ -20,14 +10,6 @@ declare module './any_element.d.ts' {
     }
 }
 export declare class LinkElement extends VElementTagMap.a {
-    static default_style: {
-        "font-family": string;
-        "font-size": string;
-        color: string;
-        "text-decoration": string;
-        "text-underline-position": string;
-        cursor: string;
-    };
     constructor(text?: string, href?: string);
 }
 export declare const Link: <Extensions extends object = {}>(text?: string | undefined, href?: string | undefined) => LinkElement & Extensions;