lexgui 0.1.44 → 0.1.46

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.44",
+        version: "0.1.46",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -36,34 +36,118 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     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' );
@@ -72,6 +156,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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' ) );
@@ -79,7 +168,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         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, '' );
             }
@@ -94,7 +185,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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;
@@ -105,7 +202,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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;
@@ -114,7 +217,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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 );
@@ -125,7 +234,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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;
@@ -137,76 +253,54 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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);
+            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
         };
         return (S4()+"-"+S4()+"-"+S4());
     }
 
     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
@@ -214,8 +308,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * 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;
@@ -236,7 +330,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         // Initial adjustment
         if( options.autoAdjust )
         {
-        _computePosition( null, parseInt( domEl.style.left ), parseInt( domEl.style.top ) )
+           _computePosition( null, parseInt( domEl.style.left ), parseInt( domEl.style.top ) )
         }
 
         let id = LX.UTILS.uidGenerator();
@@ -305,7 +399,131 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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";
@@ -749,7 +967,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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();} );
 
@@ -2198,18 +2416,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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 ) {
@@ -2430,16 +2648,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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');
@@ -2471,16 +2689,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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');
@@ -2500,44 +2718,86 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         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;
+                }
             }
         }
     };
@@ -2691,6 +2951,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static PAD          = 26;
         static FORM         = 27;
         static DIAL         = 28;
+        static COUNTER      = 29;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2780,6 +3041,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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;
             }
 
@@ -4009,7 +4271,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @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
@@ -4024,11 +4288,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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
@@ -4063,14 +4334,33 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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';
@@ -4282,18 +4572,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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>" ));
@@ -4529,7 +4814,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 this.addLabel( entry, { textClass: "formlabel" } );
 
-                this.addText( entry, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+                entryData.textWidget = this.addText( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
                     container.formData[ entry ] = value;
                 }, entryData );
 
@@ -4539,11 +4824,22 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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();
 
@@ -4698,13 +4994,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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();
 
@@ -5350,40 +5669,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // 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;
@@ -5395,18 +5719,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     }
                 };
 
-                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;
         }
@@ -6594,7 +6919,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 progress.classList.add( "editable" );
                 progress.addEventListener( "mousedown", inner_mousedown );
 
-                var that = this;
+                const that = this;
 
                 function inner_mousedown( e )
                 {
@@ -6602,24 +6927,28 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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 );
                         }
                     }
 
@@ -6633,6 +6962,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.removeEventListener( 'mousemove', inner_mousemove );
                     doc.removeEventListener( 'mouseup', inner_mouseup );
                     document.body.classList.remove( 'noevents' );
+                    progress.classList.remove( "grabbing" );
                 }
             }
 
@@ -6917,6 +7247,91 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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;
@@ -7152,6 +7567,104 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     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
      */
@@ -9297,7 +9810,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 //request.mimeType = "text/plain; charset=x-user-defined";
                 dataType = "arraybuffer";
                 request.mimeType = "application/octet-stream";
-            }	
+            }
 
             //regular case, use AJAX call
             var xhr = new XMLHttpRequest();
@@ -9538,6 +10051,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
     }
 
+    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 },