lexgui 0.6.1 → 0.6.2

package/build/lexgui.css

@@ -1668,7 +1668,6 @@ a svg, svg path {
     font-weight: 500;
     display: grid;
     transition: 0.1s linear;
-    padding: 0.3rem;
 }
 
 /* Colors */
@@ -1676,8 +1675,9 @@ a svg, svg path {
 .lexbutton.secondary { --button-color: var(--global-color-secondary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary);  }
 .lexbutton.accent { --button-color: var(--global-color-accent); --border-color: var(--global-color-quaternary); color: #fefefe;  }
 .lexbutton.contrast { --button-color: var(--global-text-primary); --border-color: var(--global-color-quaternary); color: var(--global-color-primary);  }
-.lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }
+.lexbutton.success { --button-color: var(--global-color-success); --border-color: #013101; color: var(--border-color);  }
 .lexbutton.error { --button-color: var(--global-color-error); --border-color: #310108; color: var(--border-color);  }
+.lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }
 
 /* Few Sizes */
 .lexbutton.xs { width: 35%; margin: 0 auto; }
@@ -1814,11 +1814,6 @@ a svg, svg path {
     background-color: var(--global-color-primary);
 }
 
-.lexselect .lexfilter a {
-    font-size: var(--global-font-size-sm);
-    padding-inline: 4px;
-}
-
 .lexselect ul .lexlistitem {
     font-size: var(--global-font-size-sm);
 }
@@ -1983,8 +1978,9 @@ dialog .lexselect .lexselectoptions {
 :root[data-theme="light"] .lexcheckbox.secondary { --checkbox-fg-color: var(--global-text-tertiary); }
 .lexcheckbox.accent { --checkbox-bg-color: var(--global-color-accent); }
 .lexcheckbox.contrast { --checkbox-bg-color: var(--global-text-primary); --checkbox-fg-color: var(--global-color-primary); }
-.lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
+.lexcheckbox.success { --checkbox-bg-color: var(--global-color-success); }
 .lexcheckbox.error { --checkbox-bg-color: var(--global-color-error); }
+.lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
 
 
 .lexcheckbox:before {
@@ -2071,8 +2067,9 @@ dialog .lexselect .lexselectoptions {
 .lextoggle.secondary { --toggle-bg-color: var(--global-color-tertiary); }
 .lextoggle.accent { --toggle-bg-color: var(--global-color-accent); }
 .lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); }
-.lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }
+.lextoggle.success { --toggle-bg-color: var(--global-color-success);  }
 .lextoggle.error { --toggle-bg-color: var(--global-color-error);  }
+.lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }
 
 .lextoggle > * {
     z-index: 1;
@@ -2212,6 +2209,7 @@ dialog .lexselect .lexselectoptions {
     padding: 0.1em;
     padding-inline: 1.4em;
     gap: 0.65em;
+    align-items: center;
 }
 
 .lexradiogroup .lexradiogroupitem span {
@@ -2223,9 +2221,6 @@ dialog .lexselect .lexselectoptions {
     height: 16px;
     min-width: 16px !important;
     min-height: 16px !important;
-    padding: 0;
-    margin: auto 0;
-    border-radius: 8px;
     background-color: var(--global-intense-background);
     border: 1px solid var(--global-text-tertiary) !important;
 }
@@ -2257,8 +2252,9 @@ dialog .lexselect .lexselectoptions {
 .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-color-accent-light); }
 .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
 .lexradiogroup.contrast .lexradiogroupitem button.checked span { background-color: var(--global-text-primary); }
-.lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
+.lexradiogroup.success .lexradiogroupitem button.checked span { background-color: var(--global-color-success); }
 .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
+.lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
 
 /* Vector Widgets */
 
@@ -2280,6 +2276,7 @@ dialog .lexselect .lexselectoptions {
     margin-right: 2px;
     background-color: var(--global-color-tertiary);
     transition: 0.1s linear;
+    cursor: text;
 }
 
 .lexvector .vecbox:hover {
@@ -2291,7 +2288,8 @@ dialog .lexselect .lexselectoptions {
     font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
     z-index: 11;
-    margin-right: 0.25rem
+    margin-right: 0.25rem;
+    pointer-events: none;
 }
 
 .lexvector .vecbox:has(input:focus) {
@@ -2482,8 +2480,9 @@ input[type=number] {
 .lexrangeslider.secondary { color: var(--global-color-secondary); --range-thumb-color: var(--global-text-secondary); }
 .lexrangeslider.accent { color: var(--global-color-accent); }
 .lexrangeslider.contrast { color: var(--global-text-primary); }
-.lexrangeslider.warning { color: var(--global-color-warning); }
+.lexrangeslider.success { color: var(--global-color-success); }
 .lexrangeslider.error { color: var(--global-color-error); }
+.lexrangeslider.warning { color: var(--global-color-warning); }
 
 .lexrangeslider.left {
     --range-dir: -1;
@@ -2890,8 +2889,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexbadge.secondary { --badge-color: var(--global-color-secondary); color: var(--global-text-primary); }
 .lexbadge.accent { --badge-color: var(--global-color-accent); }
 .lexbadge.contrast { --badge-color: var(--global-text-primary); color: var(--global-color-primary); }
-.lexbadge.warning { --badge-color: var(--global-color-warning); color: #793205; }
+.lexbadge.success { --badge-color: var(--global-color-success); color: #013101; }
 .lexbadge.error { --badge-color: var(--global-color-error); color: #310108; }
+.lexbadge.warning { --badge-color: var(--global-color-warning); color: #793205; }
 /* Styles */
 .lexbadge.outline {
     color: var(--badge-color, var(--global-text-primary));
@@ -4510,21 +4510,21 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 ul.lexassetscontent {
-    height: 100%;
+    /* height: 100%; */
     -webkit-text-size-adjust: 100%;
     padding: 0 1em;
     margin: 0;
     font-size: var(--global-font-size);
     color: #AAA;
     position: relative;
-    box-sizing: border-box;
     overflow: auto;
 }
 
 .lexassetscontent.list {
-    display: table-cell;
-    columns: 3 256px;
     width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    column-gap: 0.5rem;
 }
 
 .lexassetscontent li {
@@ -4536,7 +4536,6 @@ ul.lexassetscontent {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    box-sizing: border-box;
     width: 10em;
     height: 11.4em;
     display: inline-block;
@@ -4647,7 +4646,6 @@ ul.lexassetscontent {
     color: var(--global-text-primary);
     cursor: pointer;
     text-align: center;
-    box-sizing: border-box;
     display: block;
     padding: 0.1em;
     overflow: hidden;
@@ -4669,7 +4667,6 @@ ul.lexassetscontent {
 .lexassetscontent li .lexassetinfo {
     -webkit-text-size-adjust: 100%;
     color: #999;
-    box-sizing: border-box;
     position: absolute;
     overflow: hidden;
     text-align: left;
@@ -4712,12 +4709,9 @@ ul.lexassetscontent {
 
 .lexassetscontent li img {
     -webkit-text-size-adjust: 100%;
-    font-family: 'Arial';
-    font-size: var(--global-font-size);
     cursor: pointer;
     text-align: center;
     color: white;
-    box-sizing: border-box;
     border: 0;
     max-width: 10em;
     max-height: 10em;
@@ -4729,7 +4723,6 @@ ul.lexassetscontent {
 
 .lexassetscontent.list img {
     width: unset;
-    height: 2em;
     object-fit: contain;
     float: left;
     z-index: 1;

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 var LX = {
-    version: "0.6.1",
+    version: "0.6.2",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -6642,7 +6642,7 @@ class Title extends Widget {
         // Note: Titles are not registered in Panel.widgets by now
         super( Widget.TITLE, null, null, options );
 
-        this.root.className = "lextitle";
+        this.root.className = `lextitle ${ this.root.className }`;
 
         if( options.icon )
         {
@@ -6956,7 +6956,7 @@ class Button extends Widget {
 
         var wValue = document.createElement( 'button' );
         wValue.title = options.tooltip ? "" : ( options.title ?? "" );
-        wValue.className = "lexbutton " + ( options.buttonClass ?? "" );
+        wValue.className = "lexbutton p-1 " + ( options.buttonClass ?? "" );
 
         this.root.appendChild( wValue );
 
@@ -7580,7 +7580,7 @@ class Select extends Widget {
                 this.unfocus_event = true;
                 setTimeout( () => delete this.unfocus_event, 200 );
             }
-            else if ( e.relatedTarget && ( e.relatedTarget.tagName == "INPUT" || e.relatedTarget.classList.contains("lexoptions") ) )
+            else if ( e.relatedTarget && listDialog.contains( e.relatedTarget ) )
             {
                 return;
             }
@@ -8476,7 +8476,7 @@ class RadioGroup extends Widget {
             container.appendChild( optionItem );
 
             const optionButton = document.createElement( 'button' );
-            optionButton.className = "lexbutton";
+            optionButton.className = "flex p-0 rounded-lg cursor-pointer";
             optionButton.disabled = options.disabled ?? false;
             optionItem.appendChild( optionButton );
 
@@ -8779,7 +8779,7 @@ class NumberInput extends Widget {
         box.className = "numberbox";
         container.appendChild( box );
 
-        let valueBox = LX.makeContainer( [ "auto", "100%" ], "relative flex flex-row", "", box );
+        let valueBox = LX.makeContainer( [ "auto", "100%" ], "relative flex flex-row cursor-text", "", box );
 
         let vecinput = document.createElement( 'input' );
         vecinput.id = "number_" + simple_guidGenerator();
@@ -8882,7 +8882,7 @@ class NumberInput extends Widget {
 
         let innerMouseDown = e => {
 
-            if( document.activeElement == vecinput )
+            if( ( document.activeElement == vecinput ) || ( e.button != LX.MOUSE_LEFT_CLICK ) )
             {
                 return;
             }
@@ -8897,7 +8897,7 @@ class NumberInput extends Widget {
 
             if( !document.pointerLockElement )
             {
-                vecinput.requestPointerLock();
+                valueBox.requestPointerLock();
             }
 
             if( options.onPress )
@@ -8942,7 +8942,7 @@ class NumberInput extends Widget {
             }
         }
 
-        vecinput.addEventListener( "mousedown", innerMouseDown );
+        valueBox.addEventListener( "mousedown", innerMouseDown );
 
         doAsync( this.onResize.bind( this ) );
     }
@@ -9097,7 +9097,7 @@ class Vector extends Widget {
 
             function innerMouseDown( e )
             {
-                if( document.activeElement == vecinput )
+                if( ( document.activeElement == vecinput ) || ( e.button != LX.MOUSE_LEFT_CLICK ) )
                 {
                     return;
                 }
@@ -9112,7 +9112,7 @@ class Vector extends Widget {
 
                 if( !document.pointerLockElement )
                 {
-                    vecinput.requestPointerLock();
+                    box.requestPointerLock();
                 }
 
                 if( options.onPress )
@@ -9169,7 +9169,7 @@ class Vector extends Widget {
                 }
             }
 
-            vecinput.addEventListener( "mousedown", innerMouseDown );
+            box.addEventListener( "mousedown", innerMouseDown );
             container.appendChild( box );
         }
 
@@ -10102,34 +10102,90 @@ class Table extends Widget {
             if( this.customFilters )
             {
                 const icon = LX.makeIcon( "CirclePlus", { svgClass: "sm" } );
+                const separatorHtml = `<div class="lexcontainer border-right self-center mx-1" style="width: 1px; height: 70%;"></div>`;
 
                 for( let f of this.customFilters )
                 {
-                    const customFilterBtn = new Button(null, icon.innerHTML + f.name, ( v ) => {
+                    f.widget = new Button(null, icon.innerHTML + f.name, ( v ) => {
 
-                        const menuOptions = f.options.map( ( colName, idx ) => {
-                            const item = {
-                                name: colName,
-                                checked:  !!this.activeCustomFilters[ colName ],
-                                callback: (key, v, dom) => {
-                                    if( v ) { this.activeCustomFilters[ key ] = f.name; }
-                                    else {
-                                        delete this.activeCustomFilters[ key ];
+                        const spanName = f.widget.root.querySelector( "span" );
+
+                        if( f.options )
+                        {
+                            const menuOptions = f.options.map( ( colName, idx ) => {
+                                const item = {
+                                    name: colName,
+                                    checked:  !!this.activeCustomFilters[ colName ],
+                                    callback: (key, v, dom) => {
+                                        if( v ) { this.activeCustomFilters[ key ] = f.name; }
+                                        else {
+                                            delete this.activeCustomFilters[ key ];
+                                        }
+                                        const activeFilters = Object.keys( this.activeCustomFilters ).filter(  k => this.activeCustomFilters[ k ] == f.name );
+                                        const filterBadgesHtml = activeFilters.reduce( ( acc, key ) => acc += LX.badge( key, "bg-tertiary text-sm" ), "" );
+                                        spanName.innerHTML = icon.innerHTML + f.name + ( activeFilters.length ? separatorHtml : "" ) + filterBadgesHtml;
+                                        this.refresh();
                                     }
-                                    this.refresh();
                                 }
+                                return item;
+                            } );
+                            new DropdownMenu( f.widget.root, menuOptions, { side: "bottom", align: "start" });
+                        }
+                        else if( f.type == "range" )
+                        {
+                            console.assert( f.min != undefined && f.max != undefined, "Range filter needs min and max values!" );
+                            const container = LX.makeContainer( ["240px", "auto"], "border bg-primary rounded-lg text-md" );
+                            const panel = new Panel();
+                            LX.makeContainer( ["100%", "auto"], "px-3 p-2 pb-0 text-md font-medium", f.name, container );
+
+                            f.start = f.start ?? f.min;
+                            f.end = f.end ?? f.max;
+
+                            panel.refresh = () => {
+                                panel.clear();
+                                panel.sameLine( 2, "justify-center" );
+                                panel.addNumber( null, f.start, (v) => {
+                                    f.start = v;
+                                    const inUse = ( f.start != f.min || f.end != f.max );
+                                    spanName.innerHTML = icon.innerHTML + f.name + ( inUse ? separatorHtml + LX.badge( `${ f.start } - ${ f.end } ${ f.units ?? "" }`, "bg-tertiary text-sm" ) : "" );
+                                    this.refresh();
+                                }, { skipSlider: true, min: f.min, max: f.max, step: f.step, units: f.units } );
+                                panel.addNumber( null, f.end, (v) => {
+                                    f.end = v;
+                                    const inUse = ( f.start != f.min || f.end != f.max );
+                                    spanName.innerHTML = icon.innerHTML + f.name + ( inUse ? separatorHtml + LX.badge( `${ f.start } - ${ f.end } ${ f.units ?? "" }`, "bg-tertiary text-sm" ) : "" );
+                                    this.refresh();
+                                }, { skipSlider: true, min: f.min, max: f.max, step: f.step, units: f.units } );
+                                panel.addButton( null, "Reset", () => {
+                                    f.start = f.min;
+                                    f.end = f.max;
+                                    spanName.innerHTML = icon.innerHTML + f.name;
+                                    panel.refresh();
+                                    this.refresh();
+                                }, { buttonClass: "contrast" } );
                             }
-                            return item;
-                        } );
-                        new DropdownMenu( customFilterBtn.root, menuOptions, { side: "bottom", align: "start" });
-                    }, { buttonClass: " primary dashed" } );
-                    headerContainer.appendChild( customFilterBtn.root );
+                            panel.refresh();
+                            container.appendChild( panel.root );
+                            new Popover( f.widget.root, [ container ], { side: "bottom" } );
+                        }
+
+                    }, { buttonClass: "px-2 primary dashed" } );
+                    headerContainer.appendChild( f.widget.root );
                 }
 
                 this._resetCustomFiltersBtn = new Button(null, "resetButton", ( v ) => {
                     this.activeCustomFilters = {};
-                    this.refresh();
                     this._resetCustomFiltersBtn.root.classList.add( "hidden" );
+                    for( let f of this.customFilters )
+                    {
+                        f.widget.root.querySelector( "span" ).innerHTML = ( icon.innerHTML + f.name );
+                        if( f.type == "range" )
+                        {
+                            f.start = f.min;
+                            f.end = f.max;
+                        }
+                    }
+                    this.refresh();
                 }, { title: "Reset filters", icon: "X" } );
                 headerContainer.appendChild( this._resetCustomFiltersBtn.root );
                 this._resetCustomFiltersBtn.root.classList.add( "hidden" );
@@ -10362,6 +10418,41 @@ class Table extends Widget {
                         }
                     }
 
+                    // Check range/date filters
+                    if( this.customFilters )
+                    {
+                        let acfMap = {};
+
+                        for( let f of this.customFilters )
+                        {
+                            const acfName = f.name;
+
+                            if( f.type == "range" )
+                            {
+                                acfMap[ acfName ] = acfMap[ acfName ] ?? false;
+
+                                const filterColIndex = data.head.indexOf( acfName );
+                                if( filterColIndex > -1 )
+                                {
+                                    const validRowValue = parseFloat( bodyData[ filterColIndex ] );
+                                    const min = f.start ?? f.min;
+                                    const max = f.end ?? f.max;
+                                    acfMap[ acfName ] |= ( validRowValue >= min ) && ( validRowValue <= max );
+                                }
+                            }
+                            else if( f.type == "date" )
+                            {
+                                // TODO
+                            }
+                        }
+
+                        const show = Object.values( acfMap ).reduce( ( e, acc ) => acc *= e );
+                        if( !show )
+                        {
+                            continue;
+                        }
+                    }
+
                     const row = document.createElement( 'tr' );
                     const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) );
                     row.setAttribute( "rowId", rowId.substr(0, 32) );
@@ -14776,26 +14867,31 @@ LX.ICONS = {
     "Folder": [512, 512, [], "solid", "M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"],
     "FolderOpen": [576, 512, [], "solid", "M384 480l48 0c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224l-400 0c-11.4 0-21.9 6-27.6 15.9L48 357.1 48 96c0-8.8 7.2-16 16-16l117.5 0c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8L416 144c8.8 0 16 7.2 16 16l0 32 48 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l23.7 0L384 480z"],
     "FolderClosed": [512, 512, [], "solid", "M448 480L64 480c-35.3 0-64-28.7-64-64L0 192l512 0 0 224c0 35.3-28.7 64-64 64zm64-320L0 160 0 96C0 60.7 28.7 32 64 32l128 0c20.1 0 39.1 9.5 51.2 25.6l19.2 25.6c6 8.1 15.5 12.8 25.6 12.8l160 0c35.3 0 64 28.7 64 64z"],
-    "Play": [384, 512, [], "solid", "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"],
-    "Pause": [320, 512, [], "solid", "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"],
+    "Function": [384, 512, [], "solid", "M314.7 32c-38.8 0-73.7 23.3-88.6 59.1L170.7 224 64 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l80 0L98.9 396.3c-5 11.9-16.6 19.7-29.5 19.7L32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l37.3 0c38.8 0 73.7-23.3 88.6-59.1L213.3 288 320 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-80 0 45.1-108.3c5-11.9 16.6-19.7 29.5-19.7L352 96c17.7 0 32-14.3 32-32s-14.3-32-32-32l-37.3 0z"],
     "Stop": [384, 512, [], "solid", "M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"],
     "Image": [512, 512, [], "solid", "M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"],
     "Images": [576, 512, [], "solid", "M160 80l352 0c8.8 0 16 7.2 16 16l0 224c0 8.8-7.2 16-16 16l-21.2 0L388.1 178.9c-4.4-6.8-12-10.9-20.1-10.9s-15.7 4.1-20.1 10.9l-52.2 79.8-12.4-16.9c-4.5-6.2-11.7-9.8-19.4-9.8s-14.8 3.6-19.4 9.8L175.6 336 160 336c-8.8 0-16-7.2-16-16l0-224c0-8.8 7.2-16 16-16zM96 96l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32c-35.3 0-64 28.7-64 64zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224zm208 24a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"],
-    "Function": [384, 512, [], "solid", "M314.7 32c-38.8 0-73.7 23.3-88.6 59.1L170.7 224 64 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l80 0L98.9 396.3c-5 11.9-16.6 19.7-29.5 19.7L32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l37.3 0c38.8 0 73.7-23.3 88.6-59.1L213.3 288 320 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-80 0 45.1-108.3c5-11.9 16.6-19.7 29.5-19.7L352 96c17.7 0 32-14.3 32-32s-14.3-32-32-32l-37.3 0z"],
+    "Info": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"],
     "Bone": [576, 512, [], "solid", "M153.7 144.8c6.9 16.3 20.6 31.2 38.3 31.2l192 0c17.7 0 31.4-14.9 38.3-31.2C434.4 116.1 462.9 96 496 96c44.2 0 80 35.8 80 80c0 30.4-17 56.9-42 70.4c-3.6 1.9-6 5.5-6 9.6s2.4 7.7 6 9.6c25 13.5 42 40 42 70.4c0 44.2-35.8 80-80 80c-33.1 0-61.6-20.1-73.7-48.8C415.4 350.9 401.7 336 384 336l-192 0c-17.7 0-31.4 14.9-38.3 31.2C141.6 395.9 113.1 416 80 416c-44.2 0-80-35.8-80-80c0-30.4 17-56.9 42-70.4c3.6-1.9 6-5.5 6-9.6s-2.4-7.7-6-9.6C17 232.9 0 206.4 0 176c0-44.2 35.8-80 80-80c33.1 0 61.6 20.1 73.7 48.8z"],
     "Puzzle": [512, 512, [], "solid", "M192 104.8c0-9.2-5.8-17.3-13.2-22.8C167.2 73.3 160 61.3 160 48c0-26.5 28.7-48 64-48s64 21.5 64 48c0 13.3-7.2 25.3-18.8 34c-7.4 5.5-13.2 13.6-13.2 22.8c0 12.8 10.4 23.2 23.2 23.2l56.8 0c26.5 0 48 21.5 48 48l0 56.8c0 12.8 10.4 23.2 23.2 23.2c9.2 0 17.3-5.8 22.8-13.2c8.7-11.6 20.7-18.8 34-18.8c26.5 0 48 28.7 48 64s-21.5 64-48 64c-13.3 0-25.3-7.2-34-18.8c-5.5-7.4-13.6-13.2-22.8-13.2c-12.8 0-23.2 10.4-23.2 23.2L384 464c0 26.5-21.5 48-48 48l-56.8 0c-12.8 0-23.2-10.4-23.2-23.2c0-9.2 5.8-17.3 13.2-22.8c11.6-8.7 18.8-20.7 18.8-34c0-26.5-28.7-48-64-48s-64 21.5-64 48c0 13.3 7.2 25.3 18.8 34c7.4 5.5 13.2 13.6 13.2 22.8c0 12.8-10.4 23.2-23.2 23.2L48 512c-26.5 0-48-21.5-48-48L0 343.2C0 330.4 10.4 320 23.2 320c9.2 0 17.3 5.8 22.8 13.2C54.7 344.8 66.7 352 80 352c26.5 0 48-28.7 48-64s-21.5-64-48-64c-13.3 0-25.3 7.2-34 18.8C40.5 250.2 32.4 256 23.2 256C10.4 256 0 245.6 0 232.8L0 176c0-26.5 21.5-48 48-48l120.8 0c12.8 0 23.2-10.4 23.2-23.2z"],
     "Lock": [448, 512, [], "solid", "M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"],
     "LockOpen": [576, 512, [], "solid", "M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z"],
     "Shuffle": [512, 512, [], "solid", "M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"],
+    "Play": [384, 512, [], "solid", "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"],
+    "Pause": [320, 512, [], "solid", "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"],
+    "PlusCircle": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"],
     "LogIn": [512, 512, [], "solid", "M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"],
     "LogOut": [512, 512, [], "solid", "M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 192 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128zM160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0z"],
     "MousePointer": [320, 512, [], "solid", "M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"],
     "User": [512, 512, [], "solid", "M256 288A144 144 0 1 0 256 0a144 144 0 1 0 0 288zm-94.7 32C72.2 320 0 392.2 0 481.3c0 17 13.8 30.7 30.7 30.7l450.6 0c17 0 30.7-13.8 30.7-30.7C512 392.2 439.8 320 350.7 320l-189.4 0z"],
     "HardDriveDownload": [512, 512, [], "solid", "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"],
     "HardDriveUpload": [512, 512, [], "solid", "M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"],
-    "CirclePlay": [512, 512, [], "solid", "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9l0-176c0-8.7 4.7-16.7 12.3-20.9z"],
-    "CircleStop": [512, 512, [], "solid", "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm192-96l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32z"],
+    "CircleCheck": [512, 512, ["CheckCircle2"], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"],
+    "CirclePlay": [512, 512, [], "solid", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"],
+    "CirclePause": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM224 192l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32s32 14.3 32 32zm128 0l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32s32 14.3 32 32z"],
+    "CircleStop": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 160l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32z"],
     "CircleDot": [512, 512, [], "solid", "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"],
+    "CircleHelp": [512, 512, ["HelpCircle"], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"],
     "Apple": [384, 512, [], "solid", "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"],
     "Chrome": [512, 512, [], "solid", "M0 256C0 209.4 12.47 165.6 34.27 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.19 98.47C101 38.53 174 0 256 0C350.8 0 433.5 51.48 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"],
     "Facebook": [512, 512, [], "solid", "M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"],
@@ -14811,7 +14907,9 @@ LX.ICONS = {
     "Chain": "Link",
     "ChainBroken": "LinkOff",
     "ChainOff": "LinkOff",
-    "Unlink": "LinkOff"
+    "Unlink": "LinkOff",
+    "HelpCircle": "CircleHelp",
+    "CheckCircle2": "CircleCheck"
 }
 
 // Alias for Lucide Icons