lexgui 0.1.44 → 0.1.46

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.44",
+    version: "0.1.46",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -32,34 +32,118 @@ LX.clamp = clamp;
 LX.round = round;
 LX.remapRange = remapRange;
 
-function getSupportedDOMName( string )
+// Timer that works everywhere (from litegraph.js)
+if ( typeof performance != "undefined" )
+{
+    LX.getTime = performance.now.bind( performance );
+}
+else if( typeof Date != "undefined" && Date.now )
+{
+    LX.getTime = Date.now.bind( Date );
+}
+else if ( typeof process != "undefined" )
+{
+    LX.getTime = function() {
+        var t = process.hrtime();
+        return t[ 0 ] * 0.001 + t[ 1 ] * 1e-6;
+    };
+}
+else
+{
+    LX.getTime = function() {
+        return new Date().getTime();
+    };
+}
+
+let ASYNC_ENABLED = true;
+
+/**
+ * @method doAsync
+ * @description Call a function asynchronously
+ * @param {Function} fn Function to call
+ * @param {Number} ms Time to wait until calling the function (in milliseconds)
+ */
+function doAsync( fn, ms ) {
+    if( ASYNC_ENABLED )
+    {
+        setTimeout( fn, ms ?? 0 );
+    }
+    else
+    {
+        fn();
+    }
+}
+
+LX.doAsync = doAsync;
+
+/**
+ * @method getSupportedDOMName
+ * @description Convert a text string to a valid DOM name
+ * @param {String} text Original text
+ */
+function getSupportedDOMName( text )
 {
-    return string.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', '');
+    return text.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', '');
 }
 
 LX.getSupportedDOMName = getSupportedDOMName;
 
-function has( component_name )
+/**
+ * @method has
+ * @description Ask if LexGUI is using a specific component
+ * @param {String} componentName Name of the LexGUI component
+ */
+function has( componentName )
 {
-    return (LX.components.indexOf( component_name ) > -1);
+    return ( LX.components.indexOf( componentName ) > -1 );
 }
 
 LX.has = has;
 
-function getExtension( s )
+/**
+ * @method getExtension
+ * @description Get a extension from a path/url/filename
+ * @param {String} name
+ */
+function getExtension( name )
 {
-    return s.includes('.') ? s.split('.').pop() : null;
+    return name.includes('.') ? name.split('.').pop() : null;
 }
 
 LX.getExtension = getExtension;
 
-function deepCopy( o )
+/**
+ * @method deepCopy
+ * @description Create a deep copy with no references from an object
+ * @param {Object} obj
+ */
+function deepCopy( obj )
 {
-    return JSON.parse(JSON.stringify(o))
+    return JSON.parse( JSON.stringify( obj ) )
 }
 
 LX.deepCopy = deepCopy;
 
+/**
+ * @method setTheme
+ * @description Set dark or light theme
+ * @param {String} colorScheme Name of the scheme
+ */
+function setTheme( colorScheme )
+{
+    colorScheme = ( colorScheme == "light" ) ? "light" : "dark";
+    document.documentElement.setAttribute( "data-theme", colorScheme );
+    LX.emit( "@on_new_color_scheme", colorScheme );
+}
+
+LX.setTheme = setTheme;
+
+/**
+ * @method setThemeColor
+ * @description Sets a new value for one of the main theme variables
+ * @param {String} colorName Name of the theme variable
+ * @param {String} color Color in rgba/hex
+ */
 function setThemeColor( colorName, color )
 {
     var r = document.querySelector( ':root' );
@@ -68,6 +152,11 @@ function setThemeColor( colorName, color )
 
 LX.setThemeColor = setThemeColor;
 
+/**
+ * @method getThemeColor
+ * @description Get the value for one of the main theme variables
+ * @param {String} colorName Name of the theme variable
+ */
 function getThemeColor( colorName )
 {
     const r = getComputedStyle( document.querySelector( ':root' ) );
@@ -75,7 +164,9 @@ function getThemeColor( colorName )
 
     if( value.includes( "light-dark" ) && window.matchMedia )
     {
-        if( window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+        const currentScheme = r.getPropertyValue( "color-scheme" );
+
+        if( ( window.matchMedia( "(prefers-color-scheme: light)" ).matches ) || ( currentScheme == "light" ) )
         {
             return value.substring( value.indexOf( '(' ) + 1, value.indexOf( ',' ) ).replace( /\s/g, '' );
         }
@@ -90,7 +181,13 @@ function getThemeColor( colorName )
 
 LX.getThemeColor = getThemeColor;
 
-function getBase64Image( img ) {
+/**
+ * @method getBase64Image
+ * @description Convert an image to a base64 string
+ * @param {Image} img
+ */
+function getBase64Image( img )
+{
     var canvas = document.createElement( 'canvas' );
     canvas.width = img.width;
     canvas.height = img.height;
@@ -101,7 +198,13 @@ function getBase64Image( img ) {
 
 LX.getBase64Image = getBase64Image;
 
-function hexToRgb( hexStr ) {
+/**
+ * @method hexToRgb
+ * @description Convert a hexadecimal string to a valid RGB color array
+ * @param {String} hexStr Hexadecimal color
+ */
+function hexToRgb( hexStr )
+{
     const red = parseInt( hexStr.substring( 1, 3 ), 16 ) / 255;
     const green = parseInt( hexStr.substring( 3, 5 ), 16 ) / 255;
     const blue = parseInt( hexStr.substring( 5, 7 ), 16 ) / 255;
@@ -110,7 +213,13 @@ function hexToRgb( hexStr ) {
 
 LX.hexToRgb = hexToRgb;
 
-function rgbToHex( rgb ) {
+/**
+ * @method rgbToHex
+ * @description Convert a RGB color array to a hexadecimal string
+ * @param {Array} rgb Array containing R, G, B, A*
+ */
+function rgbToHex( rgb )
+{
     let hex = "#";
     for( let c of rgb ) {
         c = Math.floor( c * 255 );
@@ -121,7 +230,14 @@ function rgbToHex( rgb ) {
 
 LX.rgbToHex = rgbToHex;
 
-function measureRealWidth( value, paddingPlusMargin = 8 ) {
+/**
+ * @method measureRealWidth
+ * @description Measure the pixel width of a text
+ * @param {Object} value Text to measure
+ * @param {Number} paddingPlusMargin Padding offset
+ */
+function measureRealWidth( value, paddingPlusMargin = 8 )
+{
     var i = document.createElement( "span" );
     i.className = "lexinputmeasure";
     i.innerHTML = value;
@@ -133,7 +249,12 @@ function measureRealWidth( value, paddingPlusMargin = 8 ) {
 
 LX.measureRealWidth = measureRealWidth;
 
-function simple_guidGenerator() {
+/**
+ * @method simple_guidGenerator
+ * @description Get a random unique id
+ */
+function simple_guidGenerator()
+{
     var S4 = function() {
         return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
     };
@@ -142,67 +263,40 @@ function simple_guidGenerator() {
 
 LX.guidGenerator = simple_guidGenerator;
 
-// Timer that works everywhere (from litegraph.js)
-if (typeof performance != "undefined") {
-    LX.getTime = performance.now.bind(performance);
-} else if (typeof Date != "undefined" && Date.now) {
-    LX.getTime = Date.now.bind(Date);
-} else if (typeof process != "undefined") {
-    LX.getTime = function() {
-        var t = process.hrtime();
-        return t[0] * 0.001 + t[1] * 1e-6;
-    };
-} else {
-    LX.getTime = function getTime() {
-        return new Date().getTime();
-    };
-}
-
-let ASYNC_ENABLED = true;
-
-function doAsync( fn, ms ) {
-    if( ASYNC_ENABLED )
-    {
-        setTimeout( fn, ms ?? 0 );
-    }
-    else
-    {
-        fn();
-    }
+/**
+ * @method buildTextPattern
+ * @description Create a validation pattern using specific options
+ * @param {Object} options
+ * lowercase (Boolean): Text must contain a lowercase char
+ * uppercase (Boolean): Text must contain an uppercase char
+ * digit (Boolean): Text must contain a digit
+ * specialChar (Boolean): Text must contain a special char
+ * noSpaces (Boolean): Do not allow spaces in text
+ * minLength (Number): Text minimum length
+ * maxLength (Number): Text maximum length
+ * asRegExp (Boolean): Return pattern as Regular Expression instance
+ */
+function buildTextPattern( options = {} )
+{
+    let patterns = [];
+    if ( options.lowercase ) patterns.push("(?=.*[a-z])");
+    if ( options.uppercase ) patterns.push("(?=.*[A-Z])");
+    if ( options.digit ) patterns.push("(?=.*\\d)");
+    if ( options.specialChar ) patterns.push("(?=.*[@#$%^&+=!])");
+    if ( options.noSpaces ) patterns.push("(?!.*\\s)");
+
+    let minLength = options.minLength || 0;
+    let maxLength = options.maxLength || ""; // Empty means no max length restriction
+
+    let pattern = `^${ patterns.join("") }.{${ minLength },${ maxLength }}$`;
+    return options.asRegExp ? new RegExp( pattern ) : pattern;
 }
 
-// Math classes
-
-class vec2 {
-
-    constructor( x, y ) {
-        this.x = x ?? 0;
-        this.y = y ?? ( x ?? 0 );
-    }
-
-    get xy() { return [ this.x, this.y ]; }
-    get yx() { return [ this.y, this.x ]; }
-
-    set ( x, y ) { this.x = x; this.y = y; }
-    add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
-    sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
-    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
-    div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
-    abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
-    dot ( v ) { return this.x * v.x + this.y * v.y; }
-    len2 () { return this.dot( this ) }
-    len () { return Math.sqrt( this.len2() ); }
-    nrm ( v0 = new vec2() ) { v0.set( this.x, this.y ); return v0.mul( 1.0 / this.len(), v0 ); }
-    dst ( v ) { return v.sub( this ).len(); }
-    clp ( min, max, v0 = new vec2() ) { v0.set( clamp( this.x, min, max ), clamp( this.y, min, max ) ); return v0; }
-};
-
-LX.vec2 = vec2;
-
-// Other utils
+LX.buildTextPattern = buildTextPattern;
 
 /**
  * @method makeDraggable
+ * @description Allow an element to be dragged
  * @param {Element} domEl
  * @param {Object} options
  * autoAdjust (Bool): Sets in a correct position at the beggining
@@ -210,8 +304,8 @@ LX.vec2 = vec2;
  * onMove (Function): Called each move event
  * onDragStart (Function): Called when drag event starts
  */
-function makeDraggable( domEl, options = { } ) {
-
+function makeDraggable( domEl, options = { } )
+{
     let offsetX = 0;
     let offsetY = 0;
     let currentTarget = null;
@@ -301,8 +395,131 @@ function makeDraggable( domEl, options = { } ) {
 
 LX.makeDraggable = makeDraggable;
 
-function create_global_searchbar( root ) {
+/**
+ * @method makeCodeSnippet
+ * @description Create a code snippet in a specific language
+ * @param {String} code
+ * @param {Array} size
+ * @param {Object} options
+ * language (String):
+ * windowMode (Boolean):
+ * lineNumbers (Boolean):
+ * tabName (String):
+ */
+function makeCodeSnippet( code, size, options = { } )
+{
+    if( !LX.has('CodeEditor') )
+    {
+        console.error( "Import the CodeEditor component to create snippets!" );
+        return;
+    }
+
+    const snippet = document.createElement( "div" );
+    snippet.className = "lexcodesnippet";
+    snippet.style.width = size[ 0 ];
+    snippet.style.height = size[ 1 ];
+    const area = new Area( { noAppend: true } );
+    let editor = new LX.CodeEditor( area, {
+        skipInfo: true,
+        disableEdition: true,
+        allowAddScripts: false,
+        name: options.tabName,
+        // showTab: options.showTab ?? true,
+        // lineNumbers: options.lineNumbers ?? true
+    } );
+    editor.setText( code, options.language ?? "Plain Text" );
+
+    if( options.linesAdded )
+    {
+        const code = editor.root.querySelector( ".code" );
+        for( let l of options.linesAdded )
+        {
+            if( l.constructor == Number )
+            {
+                code.childNodes[ l - 1 ].classList.add( "added" );
+            }
+            else if( l.constructor == Array ) // It's a range
+            {
+                for( let i = ( l[0] - 1 ); i <= ( l[1] - 1 ); i++ )
+                {
+                    code.childNodes[ i ].classList.add( "added" );
+                }
+            }
+        }
+    }
+
+    if( options.linesRemoved )
+    {
+        const code = editor.root.querySelector( ".code" );
+        for( let l of options.linesRemoved )
+        {
+            if( l.constructor == Number )
+            {
+                code.childNodes[ l - 1 ].classList.add( "removed" );
+            }
+            else if( l.constructor == Array ) // It's a range
+            {
+                for( let i = ( l[0] - 1 ); i <= ( l[1] - 1 ); i++ )
+                {
+                    code.childNodes[ i ].classList.add( "removed" );
+                }
+            }
+        }
+    }
+
+    if( options.windowMode )
+    {
+        const windowActionButtons = document.createElement( "div" );
+        windowActionButtons.className = "lexwindowbuttons";
+        const aButton = document.createElement( "span" );
+        aButton.style.background = "#ee4f50";
+        const bButton = document.createElement( "span" );
+        bButton.style.background = "#f5b720";
+        const cButton = document.createElement( "span" );
+        cButton.style.background = "#53ca29";
+        windowActionButtons.appendChild( aButton );
+        windowActionButtons.appendChild( bButton );
+        windowActionButtons.appendChild( cButton );
+        const tabs = editor.root.querySelector( ".lexareatabs" );
+        tabs.prepend( windowActionButtons );
+    }
+
+    snippet.appendChild( area.root );
+    return snippet;
+}
+
+LX.makeCodeSnippet = makeCodeSnippet;
+
+// Math classes
+
+class vec2 {
+
+    constructor( x, y ) {
+        this.x = x ?? 0;
+        this.y = y ?? ( x ?? 0 );
+    }
+
+    get xy() { return [ this.x, this.y ]; }
+    get yx() { return [ this.y, this.x ]; }
+
+    set ( x, y ) { this.x = x; this.y = y; }
+    add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
+    sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
+    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
+    div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
+    abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
+    dot ( v ) { return this.x * v.x + this.y * v.y; }
+    len2 () { return this.dot( this ) }
+    len () { return Math.sqrt( this.len2() ); }
+    nrm ( v0 = new vec2() ) { v0.set( this.x, this.y ); return v0.mul( 1.0 / this.len(), v0 ); }
+    dst ( v ) { return v.sub( this ).len(); }
+    clp ( min, max, v0 = new vec2() ) { v0.set( clamp( this.x, min, max ), clamp( this.y, min, max ) ); return v0; }
+};
+
+LX.vec2 = vec2;
 
+function create_global_searchbar( root )
+{
     let globalSearch = document.createElement("div");
     globalSearch.id = "global-search";
     globalSearch.className = "hidden";
@@ -756,7 +973,7 @@ function prompt( text, title, callback, options = {} )
                 if( callback ) callback.call( this, value );
                 dialog.close();
             }
-        }, { buttonClass: "accept" });
+        }, { buttonClass: "primary" });
 
         p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
 
@@ -2205,18 +2422,18 @@ class Menubar {
             entry.className = "lexmenuentry";
             entry.id = pKey;
             entry.innerHTML = "<span>" + key + "</span>";
-            if(options.position == "left") {	
-                this.root.prepend( entry );	
-            }	
-            else {	
-                if(options.position == "right") 	
-                    entry.right = true;	
-                if(this.root.lastChild && this.root.lastChild.right) {	
-                    this.root.lastChild.before( entry );	
-                }	
-                else {	
-                    this.root.appendChild( entry );	
-                }	
+            if(options.position == "left") {
+                this.root.prepend( entry );
+            }
+            else {
+                if(options.position == "right")
+                    entry.right = true;
+                if(this.root.lastChild && this.root.lastChild.right) {
+                    this.root.lastChild.before( entry );
+                }
+                else {
+                    this.root.appendChild( entry );
+                }
             }
 
             const create_submenu = function( o, k, c, d ) {
@@ -2437,16 +2654,16 @@ class Menubar {
             button.style.maxHeight = "calc(100% - 10px)";
             button.style.alignItems = "center";
 
-            if(options.float == "right")	
-                button.right = true;	
-            if(this.root.lastChild && this.root.lastChild.right) {	
-                this.root.lastChild.before( button );	
+            if(options.float == "right")
+                button.right = true;
+            if(this.root.lastChild && this.root.lastChild.right) {
+                this.root.lastChild.before( button );
             }
             else if(options.float == "left") {
                 this.root.prepend(button);
-            }	
-            else {	
-                this.root.appendChild( button );	
+            }
+            else {
+                this.root.appendChild( button );
             }
 
             const _b = button.querySelector('a');
@@ -2478,16 +2695,16 @@ class Menubar {
             button.style.padding = "5px";
             button.style.alignItems = "center";
 
-            if(options.float == "right")	
-                button.right = true;	
-            if(this.root.lastChild && this.root.lastChild.right) {	
-                this.root.lastChild.before( button );	
-            }	
+            if(options.float == "right")
+                button.right = true;
+            if(this.root.lastChild && this.root.lastChild.right) {
+                this.root.lastChild.before( button );
+            }
             else if(options.float == "left") {
                 this.root.prepend(button);
             }
-            else {	
-                this.root.appendChild( button );	
+            else {
+                this.root.appendChild( button );
             }
 
             const _b = button.querySelector('a');
@@ -2507,44 +2724,86 @@ class Menubar {
 
     addButtons( buttons, options = {} ) {
 
-        if(!buttons)
-            throw("No buttons to add!");
+        if( !buttons )
+        {
+            throw( "No buttons to add!" );
+        }
 
-        if(!this.buttonContainer)
+        if( !this.buttonContainer )
         {
-            this.buttonContainer = document.createElement('div');
+            this.buttonContainer = document.createElement( "div" );
             this.buttonContainer.className = "lexmenubuttons";
-            this.buttonContainer.classList.add(options.float ?? 'center');
-            if(options.position == "right")	
-                this.buttonContainer.right = true;	
-            if(this.root.lastChild && this.root.lastChild.right) {	
-                this.root.lastChild.before( this.buttonContainer );	
-            }	
-            else {	
-                this.root.appendChild( this.buttonContainer );	
+            this.buttonContainer.classList.add( options.float ?? "center" );
+
+            if( options.position == "right" )
+            {
+                this.buttonContainer.right = true;
+            }
+
+            if( this.root.lastChild && this.root.lastChild.right )
+            {
+                this.root.lastChild.before( this.buttonContainer );
+            }
+            else
+            {
+                this.root.appendChild( this.buttonContainer );
             }
         }
 
         for( let i = 0; i < buttons.length; ++i )
         {
-            let data = buttons[i];
-            let button = document.createElement('div');
+            let data = buttons[ i ];
+            let button = document.createElement( "label" );
             const title = data.title;
             let disabled = data.disabled ?? false;
             button.className = "lexmenubutton" + (disabled ? " disabled" : "");
             button.title = title ?? "";
-            button.innerHTML = "<a class='" + data.icon + " lexicon'></a>";
             this.buttonContainer.appendChild( button );
 
-            const _b = button.querySelector('a');
-            _b.addEventListener("click", (e) => {
-                disabled = e.target.parentElement.classList.contains("disabled");
-                if(data.callback && !disabled)
-                    data.callback.call( this, _b, e );
+            const icon = document.createElement( "a" );
+            icon.className = data.icon + " lexicon";
+            button.appendChild( icon );
+
+            let trigger = icon;
+
+            if( data.swap )
+            {
+                button.classList.add( "swap" );
+                icon.classList.add( "swap-off" );
+
+                const input = document.createElement( "input" );
+                input.type = "checkbox";
+                button.prepend( input );
+                trigger = input;
+
+                const swapIcon = document.createElement( "a" );
+                swapIcon.className = data.swap + " swap-on lexicon";
+                button.appendChild( swapIcon );
+
+                button.swap = function() {
+                    const swapInput = this.querySelector( "input" );
+                    swapInput.checked = !swapInput.checked;
+                };
+
+                // Set if swap has to be performed
+                button.setState = function( v ) {
+                    const swapInput = this.querySelector( "input" );
+                    swapInput.checked = v;
+                };
+            }
+
+            trigger.addEventListener("click", e => {
+                if( data.callback && !disabled )
+                {
+                    const swapInput = button.querySelector( "input" );
+                    data.callback.call( this, e, swapInput?.checked );
+                }
             });
 
-            if(title)
+            if( title )
+            {
                 this.buttons[ title ] = button;
+            }
         }
     }
 };
@@ -2698,6 +2957,7 @@ class Widget {
     static PAD          = 26;
     static FORM         = 27;
     static DIAL         = 28;
+    static COUNTER      = 29;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2787,6 +3047,7 @@ class Widget {
             case Widget.PAD: return "Pad";
             case Widget.FORM: return "Form";
             case Widget.DIAL: return "Dial";
+            case Widget.COUNTER: return "Counter";
             case Widget.CUSTOM: return this.customName;
         }
 
@@ -4017,7 +4278,9 @@ class Panel {
      * @param {Function} callback Callback function on change
      * @param {*} options:
      * disabled: Make the widget disabled [false]
+     * required: Make the input required
      * placeholder: Add input placeholder
+     * pattern: Regular expression that value must match
      * trigger: Choose onchange trigger (default, input) [default]
      * inputWidth: Width of the text input
      * skipReset: Don't add the reset value button when value changes
@@ -4032,11 +4295,18 @@ class Panel {
         widget.onGetValue = () => {
             return wValue.value;
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
             this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
             Panel._dispatch_event( wValue, "focusout", skipCallback );
         };
 
+        widget.valid = () => {
+            if( wValue.pattern == "" ) { return true; }
+            const regexp = new RegExp( wValue.pattern );
+            return regexp.test( wValue.value );
+        };
+
         let element = widget.domEl;
 
         // Add reset functionality
@@ -4071,14 +4341,33 @@ class Panel {
             wValue.style.width = "100%";
             wValue.style.textAlign = options.float ?? "";
 
-            if( options.placeholder )
-                wValue.setAttribute( "placeholder", options.placeholder );
+            wValue.setAttribute( "placeholder", options.placeholder ?? "" );
+
+            if( options.required )
+            {
+                wValue.setAttribute( "required", options.required );
+            }
+
+            if( options.pattern )
+            {
+                wValue.setAttribute( "pattern", options.pattern );
+            }
 
             var resolve = ( function( val, event ) {
+
+                if( !widget.valid() )
+                {
+                    return;
+                }
+
                 const skipCallback = event.detail;
                 let btn = element.querySelector( ".lexwidgetname .lexicon" );
                 if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
-                if( !skipCallback ) this._trigger( new IEvent( name, val, event ), callback );
+                if( !skipCallback )
+                {
+                    this._trigger( new IEvent( name, val, event ), callback );
+                }
+
             }).bind( this );
 
             const trigger = options.trigger ?? 'default';
@@ -4290,18 +4579,13 @@ class Panel {
 
         var wValue = document.createElement( 'button' );
         wValue.title = options.title ?? "";
-        wValue.className = "lexbutton";
+        wValue.className = "lexbutton " + ( options.buttonClass ?? "" );
 
         if( options.selected )
         {
             wValue.classList.add( "selected" );
         }
 
-        if( options.buttonClass )
-        {
-            wValue.classList.add( options.buttonClass );
-        }
-
         wValue.innerHTML =
             (options.icon ? "<a class='" + options.icon + "'></a>" :
             ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
@@ -4540,7 +4824,7 @@ class Panel {
 
             this.addLabel( entry, { textClass: "formlabel" } );
 
-            this.addText( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+            entryData.textWidget = this.addText( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
                 container.formData[ entry ] = value;
             }, entryData );
 
@@ -4550,11 +4834,22 @@ class Panel {
         this.addBlank( );
 
         this.addButton( null, options.actionName ?? "Submit", ( value, event ) => {
+
+            for( let entry in data )
+            {
+                let entryData = data[ entry ];
+
+                if( !entryData.textWidget.valid() )
+                {
+                    return;
+                }
+            }
+
             if( callback )
             {
                 callback( container.formData, event );
             }
-        }, { buttonClass: "accept", width: "calc(100% - 10px)" } );
+        }, { buttonClass: "primary", width: "calc(100% - 10px)" } );
 
         this.clearQueue();
 
@@ -4709,13 +5004,36 @@ class Panel {
                 delete list.unfocus_event;
                 return;
             }
-            const topPosition = selectedOption.getBoundingClientRect().y;
-            list.style.top = (topPosition + selectedOption.offsetHeight) + 'px';
+
+            list.toggleAttribute( "hidden" );
+            list.classList.remove( "place-above" );
+
+            const listHeight = 26 * values.length;
+            const rect = selectedOption.getBoundingClientRect();
+            const topPosition = rect.y;
+
+            let maxY = window.innerHeight;
+            let overflowContainer = list.getParentArea();
+
+            if( overflowContainer )
+            {
+                const parentRect = overflowContainer.getBoundingClientRect();
+                maxY = parentRect.y + parentRect.height;
+            }
+
+            list.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
+
+            const showAbove = ( topPosition + listHeight ) > maxY;
+            if( showAbove )
+            {
+                list.style.top = ( topPosition - listHeight ) + 'px';
+                list.classList.add( "place-above" );
+            }
+
             list.style.width = (event.currentTarget.clientWidth) + 'px';
             list.style.minWidth = (_getMaxListWidth()) + 'px';
-            list.toggleAttribute('hidden');
             list.focus();
-        }, { buttonClass: 'array', skipInlineCount: true });
+        }, { buttonClass: "array", skipInlineCount: true });
 
         this.clearQueue();
 
@@ -5361,40 +5679,45 @@ class Panel {
 
         // Show tags
 
-        let tags_container = document.createElement('div');
-        tags_container.className = "lextags";
-        tags_container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+        const tagsContainer = document.createElement('div');
+        tagsContainer.className = "lextags";
+        tagsContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
         const create_tags = () => {
 
-            tags_container.innerHTML = "";
+            tagsContainer.innerHTML = "";
 
             for( let i = 0; i < value.length; ++i )
             {
-                let tag_name = value[i];
-                let tag = document.createElement('span');
+                const tagName = value[i];
+                const tag = document.createElement('span');
                 tag.className = "lextag";
-                tag.innerHTML = tag_name;
+                tag.innerHTML = tagName;
+
+                const removeButton = document.createElement('a');
+                removeButton.className = "lextagrmb fa-solid fa-xmark lexicon";
+                tag.appendChild( removeButton );
 
-                tag.addEventListener('click', function( e ) {
-                    this.remove();
-                    value.splice( value.indexOf( tag_name ), 1 );
+                removeButton.addEventListener( 'click', e => {
+                    tag.remove();
+                    value.splice( value.indexOf( tagName ), 1 );
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
                     if( btn ) btn.style.display = ( value != defaultValue ? "block" : "none" );
                     that._trigger( new IEvent( name, value, e ), callback );
-                });
+                } );
 
-                tags_container.appendChild( tag );
+                tagsContainer.appendChild( tag );
             }
 
-            let tag_input = document.createElement( 'input' );
-            tag_input.value = "";
-            tag_input.placeholder = "Tag...";
-            tags_container.insertChildAtIndex( tag_input, 0 );
+            let tagInput = document.createElement( 'input' );
+            tagInput.value = "";
+            tagInput.placeholder = "Add tag...";
+            tagsContainer.appendChild( tagInput );
 
-            tag_input.onkeydown = function( e ) {
+            tagInput.onkeydown = function( e ) {
                 const val = this.value.replace(/\s/g, '');
-                if( e.key == ' ') {
+                if( e.key == ' ' || e.key == 'Enter' )
+                {
                     e.preventDefault();
                     if( !val.length || value.indexOf( val ) > -1 )
                         return;
@@ -5406,18 +5729,19 @@ class Panel {
                 }
             };
 
-            tag_input.focus();
+            tagInput.focus();
         }
 
         create_tags();
 
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name )
+        {
             element.className += " noname";
-            tags_container.style.width = "100%";
+            tagsContainer.style.width = "100%";
         }
 
-        element.appendChild(tags_container);
+        element.appendChild( tagsContainer );
 
         return widget;
     }
@@ -6604,7 +6928,7 @@ class Panel {
             progress.classList.add( "editable" );
             progress.addEventListener( "mousedown", inner_mousedown );
 
-            var that = this;
+            const that = this;
 
             function inner_mousedown( e )
             {
@@ -6612,24 +6936,28 @@ class Panel {
                 doc.addEventListener( 'mousemove', inner_mousemove );
                 doc.addEventListener( 'mouseup', inner_mouseup );
                 document.body.classList.add( 'noevents' );
+                progress.classList.add( "grabbing" );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
+
+                const rect = progress.getBoundingClientRect();
+                const newValue = round( remapRange( e.offsetX, 0, rect.width, progress.min, progress.max ) );
+                that.setValue( name, newValue );
             }
 
             function inner_mousemove( e )
             {
-                let dt = -e.movementX;
+                let dt = e.movementX;
 
                 if ( dt != 0 )
                 {
-                    let v = that.getValue( name, value );
-                    v += e.movementX / 100;
-                    v = round( v );
-                    that.setValue( name, v );
+                    const rect = progress.getBoundingClientRect();
+                    const newValue = round( remapRange( e.offsetX - rect.x, 0, rect.width, progress.min, progress.max ) );
+                    that.setValue( name, newValue );
 
                     if( options.callback )
                     {
-                        options.callback( v, e );
+                        options.callback( newValue, e );
                     }
                 }
 
@@ -6643,6 +6971,7 @@ class Panel {
                 doc.removeEventListener( 'mousemove', inner_mousemove );
                 doc.removeEventListener( 'mouseup', inner_mouseup );
                 document.body.classList.remove( 'noevents' );
+                progress.classList.remove( "grabbing" );
             }
         }
 
@@ -6932,6 +7261,91 @@ class Panel {
 
         this.addSeparator();
     }
+
+    /**
+     * @method addCounter
+     * @param {String} name Widget name
+     * @param {Number} value Counter value
+     * @param {Function} callback Callback function on change
+     * @param {*} options:
+     * disabled: Make the widget disabled [false]
+     * min, max: Min and Max values
+     * step: Step for adding/substracting
+     * label: Text to show below the counter
+     */
+
+    addCounter( name, value, callback, options = { } ) {
+
+        let widget = this.create_widget( name, Widget.COUNTER, options );
+
+        widget.onGetValue = () => {
+            return counterText.count;
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+            _onChange( newValue, skipCallback );
+        };
+
+        let element = widget.domEl;
+
+        const min = options.min ?? 0;
+        const max = options.max ?? 100;
+        const step = options.step ?? 1;
+
+        const _onChange = ( value, skipCallback, event ) => {
+            value = clamp( value, min, max );
+            counterText.count = value;
+            counterText.innerHTML = value;
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, value, event ), callback );
+            }
+        }
+
+        const container = document.createElement( 'div' );
+        container.className = "lexcounter";
+        element.appendChild( container );
+
+        this.queue( container );
+
+        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-minus'></a>", (value, e) => {
+            let mult = step ?? 1;
+            if( e.shiftKey ) mult *= 10;
+            _onChange( counterText.count - mult, false, e );
+        }, { className: "micro", skipInlineCount: true, title: "Minus" });
+
+        this.clearQueue();
+
+        const containerBox = document.createElement( 'div' );
+        containerBox.className = "lexcounterbox";
+        container.appendChild( containerBox );
+
+        const counterText = document.createElement( 'span' );
+        counterText.className = "lexcountervalue";
+        counterText.innerHTML = value;
+        counterText.count = value;
+        containerBox.appendChild( counterText );
+
+        if( options.label )
+        {
+            const counterLabel = document.createElement( 'span' );
+            counterLabel.className = "lexcounterlabel";
+            counterLabel.innerHTML = options.label;
+            containerBox.appendChild( counterLabel );
+        }
+
+        this.queue( container );
+
+        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-plus'></a>", (value, e) => {
+            let mult = step ?? 1;
+            if( e.shiftKey ) mult *= 10;
+            _onChange( counterText.count + mult, false, e );
+        }, { className: "micro", skipInlineCount: true, title: "Plus" });
+
+        this.clearQueue();
+
+        return widget;
+    }
 }
 
 LX.Panel = Panel;
@@ -7167,6 +7581,104 @@ class Branch {
 
 LX.Branch = Branch;
 
+/**
+ * @class Footer
+ */
+
+class Footer {
+    /**
+     * @param {*} options:
+     * columns: Array with data per column { title, items: [ { title, link } ]  }
+     * credits: html string
+     * socials: Array with data per item { title, link, iconHtml }
+    */
+    constructor( options = {} ) {
+
+        const root = document.createElement( "footer" );
+        root.className = "lexfooter";
+
+        const wrapper = document.createElement( "div" );
+        wrapper.className = "wrapper";
+        root.appendChild( wrapper );
+
+        if( options.columns && options.columns.constructor == Array )
+        {
+            const cols = document.createElement( "div" );
+            cols.className = "columns";
+            cols.style.gridTemplateColumns = "1fr ".repeat( options.columns.length );
+            wrapper.appendChild( cols );
+
+            for( let col of options.columns )
+            {
+                const colDom = document.createElement( "div" );
+                colDom.className = "col";
+                cols.appendChild( colDom );
+
+                const colTitle = document.createElement( "h2" );
+                colTitle.innerHTML = col.title;
+                colDom.appendChild( colTitle );
+
+                if( !col.items || !col.items.length )
+                {
+                    continue;
+                }
+
+                const itemListDom = document.createElement( "ul" );
+                colDom.appendChild( itemListDom );
+
+                for( let item of col.items )
+                {
+                    const itemDom = document.createElement( "li" );
+                    itemDom.innerHTML = `<a class="" href="${ item.link }">${ item.title }</a>`;
+                    itemListDom.appendChild( itemDom );
+                }
+            }
+        }
+
+        if( options.credits || options.socials )
+        {
+            const hr = document.createElement( "hr" );
+            wrapper.appendChild( hr );
+
+            const creditsSocials = document.createElement( "div" );
+            creditsSocials.className = "credits-and-socials";
+            wrapper.appendChild( creditsSocials );
+
+            if( options.credits )
+            {
+                const credits = document.createElement( "p" );
+                credits.innerHTML = options.credits;
+                creditsSocials.appendChild( credits );
+            }
+
+            if( options.socials )
+            {
+                const socials = document.createElement( "div" );
+                socials.className = "social";
+
+                for( let social of options.socials )
+                {
+                    const itemDom = document.createElement( "a" );
+                    itemDom.title = social.title;
+                    itemDom.innerHTML = social.icon;
+                    itemDom.href = social.link;
+                    itemDom.target = "_blank";
+                    socials.appendChild( itemDom );
+                }
+
+                creditsSocials.appendChild( socials );
+            }
+        }
+
+        // Append directly to body
+        const parent = options.parent ?? document.body;
+        parent.appendChild( root );
+    }
+
+}
+
+LX.Footer = Footer;
+
 /**
  * @class Dialog
  */
@@ -9312,7 +9824,7 @@ Object.assign(LX, {
             //request.mimeType = "text/plain; charset=x-user-defined";
             dataType = "arraybuffer";
             request.mimeType = "application/octet-stream";
-        }	
+        }
 
         //regular case, use AJAX call
         var xhr = new XMLHttpRequest();
@@ -9553,6 +10065,14 @@ Element.prototype.getComputedSize = function() {
     }
 }
 
+Element.prototype.getParentArea = function() {
+    let parent = this.parentElement;
+    while( parent ) {
+        if( parent.classList.contains( "lexarea" ) ) { return parent; }
+        parent = parent.parentElement;
+    }
+}
+
 LX.UTILS = {
     getTime() { return new Date().getTime() },
     compareThreshold( v, p, n, t ) { return Math.abs(v - p) >= t || Math.abs(v - n) >= t },