x4js 1.4.43 → 1.4.46

package/lib/action.d.ts

@@ -26,10 +26,10 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-import { BasicEvent } from './x4events';
+import { BasicEvent, EvChange } from './x4events';
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
 import { IconID } from "./icon";
-import { EvChange, EventHandler } from 'x4js';
+import { EventHandler } from './component';
 export interface EvAction extends BasicEvent {
 }
 export declare function EvAction(source: Action): EvAction;

package/lib/action.js

@@ -31,7 +31,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Action = exports.EvAction = void 0;
 const x4events_1 = require("./x4events");
 const base_component_1 = require("./base_component");
-const x4js_1 = require("x4js");
 function EvAction(source) {
     return (0, x4events_1.BasicEvent)({ source });
 }
@@ -46,11 +45,11 @@ class Action extends base_component_1.BaseComponent {
     }
     set text(t) {
         this.m_props.text = t;
-        this.emit("change", (0, x4js_1.EvChange)(this));
+        this.emit("change", (0, x4events_1.EvChange)(this));
     }
     set icon(i) {
         this.m_props.icon = i;
-        this.emit("change", (0, x4js_1.EvChange)(this));
+        this.emit("change", (0, x4events_1.EvChange)(this));
     }
     fire() {
         this.emit("run", EvAction(this));

package/lib/application.js

@@ -33,7 +33,6 @@ const x4dom_1 = require("./x4dom");
 const base_component_1 = require("./base_component");
 const component_1 = require("./component");
 const settings_1 = require("./settings");
-const x4js_1 = require("x4js");
 const _x4_touch_time = Symbol();
 /**
  * Represents an x4 application, which is typically a single page app.
@@ -128,7 +127,7 @@ class Application extends base_component_1.BaseComponent {
      */
     setMainView(root, clearBefore) {
         const ddom = this.m_props.renderTo ?? x4dom_1.x4document.body;
-        const dest = (0, x4js_1.flyWrap)(ddom);
+        const dest = (0, component_1.flyWrap)(ddom);
         if (!this.m_props.renderTo) {
             dest.setStyleValue('position', 'absolute');
         }

package/lib/button.js

@@ -63,6 +63,9 @@ class BaseButton extends component_1.Component {
         const ui_icon = icon ? new icon_1.Icon({ icon, cls: 'left', ref: 'l_icon' }) : null;
         const ui_label = new label_1.Label({ flex: 1, text: text ?? '', align: props.align, ref: 'label' });
         const ui_ricon = props.rightIcon ? new icon_1.Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+        if (text === undefined) {
+            ui_label.addClass("@hidden");
+        }
         this.setContent([ui_icon, ui_label, ui_ricon]);
         this._setTabIndex(props.tabIndex);
     }
@@ -147,6 +150,7 @@ class BaseButton extends component_1.Component {
         let label = this.itemWithRef('label');
         if (label) {
             label.text = text;
+            label.removeClass("@hidden");
         }
     }
     get text() {

package/lib/form.d.ts

@@ -45,13 +45,13 @@ export interface FormProps extends CProps<FormEventMap> {
 /**
  *
  */
-export declare class Form extends VLayout<FormProps, FormEventMap> {
+export declare class Form<T extends FormProps = FormProps, E extends FormEventMap = FormEventMap> extends VLayout<T, E> {
     protected m_height: string | number;
     protected m_container: Container;
     protected m_buttons: HLayout;
     protected m_dirty: boolean;
     protected m_watchChanges: boolean;
-    constructor(props: FormProps);
+    constructor(props: T);
     /**
      * returns the container object
      */

package/lib/gridview.d.ts

@@ -120,6 +120,10 @@ export declare class GridView extends VLayout<GridViewProps, GridViewEventMap> {
     /** @ignore */
     render(): void;
     private _on_col_resize;
+    /**
+     *
+     */
+    sortCol(name: string, asc?: boolean): void;
     /**
      *
      */

package/lib/gridview.js

@@ -69,17 +69,24 @@ class ColHeader extends component_1.Component {
     get sorted() {
         return this.m_sorted;
     }
-    set sorted(v) {
+    //set sorted( v ) {
+    //	this.m_sorted = v;
+    //	this.m_sens = 'dn';
+    //	this.itemWithRef<Icon>( 'sorter' ).show( v );
+    //}
+    sort(v, sens) {
         this.m_sorted = v;
-        this.m_sens = 'dn';
-        this.itemWithRef('sorter').show(v);
+        this.m_sens = sens;
+        const ic = this.itemWithRef('sorter');
+        ic.icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+        ic.show(v);
     }
     get sens() {
         return this.m_sens;
     }
     toggleSens() {
         this.m_sens = this.m_sens == 'up' ? 'dn' : 'up';
-        this.itemWithRef('sorter').icon = this.m_sens == 'dn' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+        this.itemWithRef('sorter').icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
     }
 }
 /**
@@ -426,13 +433,24 @@ class GridView extends layout_1.VLayout {
     /**
      *
      */
-    _sortCol(col) {
+    sortCol(name, asc = true) {
+        const col = this.m_columns.find(c => c.id == name);
+        if (col === undefined) {
+            console.assert(false, "unknown field " + name + " in grid.sortCol");
+            return;
+        }
+        this._sortCol(col, asc ? "dn" : "up");
+    }
+    /**
+     *
+     */
+    _sortCol(col, sens = "up") {
         if (col.sortable === false) {
             return;
         }
         this.m_columns.forEach((c) => {
             if (c !== col) {
-                c.$hdr.sorted = false;
+                c.$hdr.sort(false, "dn");
             }
         });
         const $hdr = col.$hdr;
@@ -440,7 +458,7 @@ class GridView extends layout_1.VLayout {
             $hdr.toggleSens();
         }
         else {
-            $hdr.sorted = true;
+            $hdr.sort(true, sens);
         }
         if (this.m_dataview) {
             this.m_dataview.sort([
@@ -852,15 +870,23 @@ class GridView extends layout_1.VLayout {
             let cid = c.getData('col');
             if (cid) {
                 let col = this.m_columns[cid];
-                let fmt = col.formatter;
-                let text;
-                if (fmt && fmt instanceof Function) {
-                    text = fmt(rec[col.id], rec);
-                }
-                else {
-                    text = rec[col.id];
+                let value = rec[col.id];
+                if (value !== undefined) {
+                    if ((0, tools_1.isFunction)(value)) { // FooterRenderer
+                        value(c);
+                    }
+                    else {
+                        let text;
+                        const fmt = col.formatter;
+                        if (fmt && fmt instanceof Function) {
+                            text = fmt(value, rec);
+                        }
+                        else {
+                            text = value;
+                        }
+                        c.setContent(text, false);
+                    }
                 }
-                c.setContent(text, false);
             }
         });
     }

package/lib/index.d.ts

@@ -78,3 +78,4 @@ export * from "./tools";
 export * from "./tooltips";
 export * from "./treeview";
 export * from "./x4events";
+export * from "./version";

package/lib/index.js

@@ -97,3 +97,4 @@ __exportStar(require("./tools"), exports);
 __exportStar(require("./tooltips"), exports);
 __exportStar(require("./treeview"), exports);
 __exportStar(require("./x4events"), exports);
+__exportStar(require("./version"), exports);

package/lib/listview.d.ts

@@ -109,7 +109,7 @@ export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
      * @param items - new array of items
      */
     setItems(items: ListViewItem[], keepSel?: boolean): void;
-    private _handleKey;
+    handleKey(ev: KeyboardEvent): void;
     /** @ignore */
     private _buildContent;
     /**
@@ -167,6 +167,7 @@ export declare class PopupListView extends Popup<PopupListViewProps, PopupListVi
     m_list: ListView;
     constructor(props: ListViewProps);
     set items(items: ListViewItem[]);
+    handleKey(ev: KeyboardEvent): void;
     private _handleClick;
     show(modal?: boolean): void;
     hide(): void;

package/lib/listview.js

@@ -50,7 +50,7 @@ class ListView extends layout_1.VLayout {
     m_cache; // recycling elements
     constructor(props) {
         super(props);
-        this.setDomEvent('keydown', (e) => this._handleKey(e));
+        this.setDomEvent('keydown', (e) => this.handleKey(e));
         this.setDomEvent('click', (e) => this._handleClick(e));
         this.setDomEvent('dblclick', (e) => this._handleClick(e));
         this.setDomEvent('contextmenu', (e) => this._handleCtxMenu(e));
@@ -110,7 +110,7 @@ class ListView extends layout_1.VLayout {
             this._buildItems();
         }
     }
-    _handleKey(ev) {
+    handleKey(ev) {
         let moveSel = (sens) => {
             let items;
             if ((0, tools_1.isFunction)(this.m_props.items)) {
@@ -144,11 +144,13 @@ class ListView extends layout_1.VLayout {
         switch (ev.key) {
             case 'ArrowDown': {
                 moveSel(1);
+                ev.preventDefault();
                 ev.stopPropagation();
                 break;
             }
             case 'ArrowUp': {
                 moveSel(-1);
+                ev.preventDefault();
                 ev.stopPropagation();
                 break;
             }
@@ -491,7 +493,9 @@ class PopupListView extends popup_1.Popup {
     set items(items) {
         this.m_list.items = items;
     }
-    // @override
+    handleKey(ev) {
+        this.m_list.handleKey(ev);
+    }
     // todo: move into popup
     _handleClick = (e) => {
         if (!this.dom) {

package/lib/sidebarview.d.ts

@@ -33,11 +33,12 @@ export interface SideBarItem extends ICardViewItem {
 }
 export interface SideBarProps extends CardViewProps {
     bar_sizable?: boolean;
+    bar_width?: number;
 }
 /**
  *
  */
-export declare class SideBarView extends CardView {
+export declare class SideBarView extends CardView<SideBarProps> {
     m_sidebar: VLayout;
     m_content: Component;
     constructor(props: SideBarProps);

package/lib/sidebarview.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideBarView = void 0;
+const component_1 = require("./component");
 const layout_1 = require("./layout");
 const button_1 = require("./button");
 const cardview_1 = require("./cardview");
@@ -43,7 +44,7 @@ class SideBarView extends cardview_1.CardView {
         this.addClass('@hlayout');
         this.m_sidebar = new layout_1.VLayout({
             cls: '@side-bar',
-            sizable: props.bar_sizable ? 'right' : undefined,
+            width: props.bar_width ?? undefined,
         });
         this.m_content = new layout_1.HLayout({ flex: 1, cls: '@tab-container' });
     }
@@ -60,6 +61,7 @@ class SideBarView extends cardview_1.CardView {
         }));
         this.setContent([
             this.m_sidebar,
+            this.m_props.bar_sizable ? new component_1.Separator({ orientation: "horizontal", sizing: "before" }) : undefined,
             this.m_content
         ]);
     }

package/lib/svgcomponent.d.ts

@@ -76,7 +76,14 @@ declare abstract class SVGItem {
      *
      */
     renderStyle(): string;
+    /**
+     *
+     */
     renderContent(): string;
+    /**
+     *
+     */
+    clip(id: string): this;
 }
 /**
  *
@@ -148,9 +155,9 @@ declare class SVGGradient extends SVGItem {
 /**
  *
  */
-export declare class SVGPathBuilder {
-    private m_items;
-    constructor();
+declare class SVGGroup extends SVGItem {
+    protected m_items: SVGItem[];
+    constructor(tag?: string);
     path(): SVGPath;
     text(x: any, y: any, txt: any): SVGText;
     ellipse(x: any, y: any, r1: any, r2?: any): SVGShape;
@@ -160,6 +167,15 @@ export declare class SVGPathBuilder {
      * clear
      */
     clear(): void;
+    renderContent(): string;
+}
+/**
+ *
+ */
+export declare class SVGPathBuilder extends SVGGroup {
+    private static g_clip_id;
+    constructor();
+    addClip(x: number, y: number, w: number, h: number): string;
     render(): string;
 }
 /**

package/lib/svgcomponent.js

@@ -159,9 +159,19 @@ class SVGItem {
         });
         return result + '"';
     }
+    /**
+     *
+     */
     renderContent() {
         return '';
     }
+    /**
+     *
+     */
+    clip(id) {
+        this.attr("clip-path", `url(#${id})`);
+        return this;
+    }
 }
 /**
  *
@@ -325,9 +335,10 @@ class SVGGradient extends SVGItem {
 /**
  *
  */
-class SVGPathBuilder {
+class SVGGroup extends SVGItem {
     m_items;
-    constructor() {
+    constructor(tag = "g") {
+        super(tag);
         this.m_items = [];
     }
     path() {
@@ -369,6 +380,30 @@ class SVGPathBuilder {
     clear() {
         this.m_items = [];
     }
+    renderContent() {
+        let result = [];
+        this.m_items.forEach(i => {
+            result.push(i.render());
+        });
+        return result.join('\n');
+    }
+}
+/**
+ *
+ */
+class SVGPathBuilder extends SVGGroup {
+    static g_clip_id = 1;
+    constructor() {
+        super('');
+    }
+    addClip(x, y, w, h) {
+        const id = 'c-' + SVGPathBuilder.g_clip_id++;
+        const clip = new SVGGroup('clipPath');
+        clip.attr('id', id);
+        clip.rect(x, y, w, h);
+        this.m_items.push(clip);
+        return id;
+    }
     render() {
         let result = [];
         this.m_items.forEach(i => {

package/lib/textedit.d.ts

@@ -55,11 +55,11 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
 /**
  * TextEdit is a single line editor, it can have a label and an error descriptor.
  */
-export declare class TextEdit<T extends TextEditProps = TextEditProps> extends Component<TextEditProps, TextEditEventMap> {
+export declare class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEditEventMap = TextEditEventMap> extends Component<T, E> {
     private m_cal_popup;
     protected m_ui_input: Input;
     private m_error_tip;
-    constructor(props: TextEditProps);
+    constructor(props: T);
     componentCreated(): void;
     componentDisposed(): void;
     focus(): void;
@@ -113,7 +113,7 @@ export declare class TextEdit<T extends TextEditProps = TextEditProps> extends C
      * @returns
      */
     validate(): boolean;
-    private _validate;
+    protected _validate(value: string): boolean;
     _date_validator(value: string): string;
     private _showDatePicker;
     get input(): Input;

package/lib/tools.d.ts

@@ -384,4 +384,11 @@ interface PasswordRule {
     min: number;
 }
 export declare function generatePassword(length: number, rules?: PasswordRule[]): string;
+/**
+ * taken from live-server
+ * https://github.com/tapio/live-server
+ * @param host
+ * @param port
+ */
+export declare function installHMR(host?: string, port?: string, reloadCallback?: Function): void;
 export {};

package/lib/tools.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generatePassword = exports.classNames = exports.mix = exports.crc32 = exports.Clipboard = exports.isHtmlString = exports.html = exports.HtmlString = exports.clamp = exports.getMousePos = exports.NetworkError = exports.markdownToHtml = exports.asap = exports.deferCall = exports.waitFontLoading = exports.isNumber = exports.pad = exports.isLiteralObject = exports.isFunction = exports.isArray = exports.isString = exports.downloadData = exports.calcAge = exports.formatIntlDate = exports.parseIntlDate = exports.date_calc_weeknum = exports.date_clone = exports.date_hash = exports.date_sql_utc = exports.date_to_sql = exports.date_diff = exports.date_format = exports._date_set_locale = exports.removeHtmlTags = exports.escapeHtml = exports.sprintf = exports.Rect = exports.Size = exports.Point = exports.camelCase = exports.pascalCase = exports.parseIntlFloat = exports.roundTo = exports.isTouchDevice = void 0;
+exports.installHMR = exports.generatePassword = exports.classNames = exports.mix = exports.crc32 = exports.Clipboard = exports.isHtmlString = exports.html = exports.HtmlString = exports.clamp = exports.getMousePos = exports.NetworkError = exports.markdownToHtml = exports.asap = exports.deferCall = exports.waitFontLoading = exports.isNumber = exports.pad = exports.isLiteralObject = exports.isFunction = exports.isArray = exports.isString = exports.downloadData = exports.calcAge = exports.formatIntlDate = exports.parseIntlDate = exports.date_calc_weeknum = exports.date_clone = exports.date_hash = exports.date_sql_utc = exports.date_to_sql = exports.date_diff = exports.date_format = exports._date_set_locale = exports.removeHtmlTags = exports.escapeHtml = exports.sprintf = exports.Rect = exports.Size = exports.Point = exports.camelCase = exports.pascalCase = exports.parseIntlFloat = exports.roundTo = exports.isTouchDevice = void 0;
 const x4dom_1 = require("./x4dom");
 const i18n_1 = require("./i18n"); // you MUST create a file named translation.js
 // :: ENVIRONMENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -407,7 +407,7 @@ exports.date_clone = date_clone;
 function date_calc_weeknum(date) {
     const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
     const pastDaysOfYear = (date.valueOf() - firstDayOfYear.valueOf()) / 86400000;
-    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+    return Math.floor((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
 }
 exports.date_calc_weeknum = date_calc_weeknum;
 /**
@@ -1153,3 +1153,51 @@ function shuffle(str, maxlength) {
     }
     return shuffled;
 }
+/**
+ * taken from live-server
+ * https://github.com/tapio/live-server
+ * @param host
+ * @param port
+ */
+function installHMR(host = "127.0.0.1", port = "9876", reloadCallback) {
+    let tm;
+    function refreshCSS() {
+        document.body.style.visibility = "hidden";
+        let sheets = [].slice.call(document.getElementsByTagName("link"));
+        let head = document.getElementsByTagName("head")[0];
+        for (let i = 0; i < sheets.length; ++i) {
+            let elem = sheets[i];
+            head.removeChild(elem);
+            let rel = elem.rel;
+            if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+                let url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+                elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+            }
+            head.appendChild(elem);
+        }
+        if (tm) {
+            clearTimeout(tm);
+        }
+        tm = setTimeout(() => {
+            document.body.style.visibility = "unset";
+        }, 50);
+    }
+    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const address = `${protocol}${host}:${port}/ws`;
+    const socket = new WebSocket(address);
+    socket.onmessage = function (msg) {
+        if (msg.data == 'reload') {
+            if (reloadCallback) {
+                reloadCallback();
+            }
+            else {
+                window.location.reload();
+            }
+        }
+        else if (msg.data == 'refreshcss') {
+            refreshCSS();
+        }
+    };
+    console.log('Live reload enabled.');
+}
+exports.installHMR = installHMR;

package/lib/treeview.js

@@ -196,10 +196,12 @@ class TreeView extends layout_1.VLayout {
         let icon = node.icon;
         if (icon === undefined) {
             if (node.children) {
-                icon = 'cls(far fa-chevron-down)';
-            }
-            else {
-                icon = 'cls(far fa-file-archive)';
+                if (node.open === true) {
+                    icon = 'var(--x4-icon-chevron-down)';
+                }
+                else {
+                    icon = 'var(--x4-icon-chevron-right)';
+                }
             }
         }
         if (level >= 0) {

package/lib/version.d.ts

@@ -0,0 +1 @@
+export declare const x4js_version = "1.4";

package/lib/version.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.x4js_version = void 0;
+exports.x4js_version = "1.4";

package/lib/x4.css

@@ -49,7 +49,6 @@
   --x4-default-border-color: rgba(0, 0, 0, 0.1);
   --x4-icon-font-family: "fonteawesome";
   --x4-icon-circle-exclamation: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"/></svg>';
-  --x4-icon-chevron-right: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>';
   --x4-icon-arrow-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M9.375 329.4c12.51-12.51 32.76-12.49 45.25 0L128 402.8V32c0-17.69 14.31-32 32-32s32 14.31 32 32v370.8l73.38-73.38c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-128 128c-12.5 12.5-32.75 12.5-45.25 0l-128-128C-3.125 362.1-3.125 341.9 9.375 329.4z"/></svg>';
   --x4-icon-arrow-up: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M310.6 182.6c-12.51 12.51-32.76 12.49-45.25 0L192 109.3V480c0 17.69-14.31 32-32 32s-32-14.31-32-32V109.3L54.63 182.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l128-128c12.5-12.5 32.75-12.5 45.25 0l128 128C323.1 149.9 323.1 170.1 310.6 182.6z"/></svg>';
   --x4-icon-exclamation: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" fill="currentColor"><path d="M64 352c17.69 0 32-14.32 32-31.1V64.01c0-17.67-14.31-32.01-32-32.01S32 46.34 32 64.01v255.1C32 337.7 46.31 352 64 352zM64 400c-22.09 0-40 17.91-40 40s17.91 39.1 40 39.1s40-17.9 40-39.1S86.09 400 64 400z"/></svg>';
@@ -62,6 +61,12 @@
   --x4-icon-calendar-days: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM64 304C64 312.8 71.16 320 80 320H112C120.8 320 128 312.8 128 304V272C128 263.2 120.8 256 112 256H80C71.16 256 64 263.2 64 272V304zM192 304C192 312.8 199.2 320 208 320H240C248.8 320 256 312.8 256 304V272C256 263.2 248.8 256 240 256H208C199.2 256 192 263.2 192 272V304zM336 256C327.2 256 320 263.2 320 272V304C320 312.8 327.2 320 336 320H368C376.8 320 384 312.8 384 304V272C384 263.2 376.8 256 368 256H336zM64 432C64 440.8 71.16 448 80 448H112C120.8 448 128 440.8 128 432V400C128 391.2 120.8 384 112 384H80C71.16 384 64 391.2 64 400V432zM208 384C199.2 384 192 391.2 192 400V432C192 440.8 199.2 448 208 448H240C248.8 448 256 440.8 256 432V400C256 391.2 248.8 384 240 384H208zM320 432C320 440.8 327.2 448 336 448H368C376.8 448 384 440.8 384 432V400C384 391.2 376.8 384 368 384H336C327.2 384 320 391.2 320 400V432z"/></svg>';
   --x4-icon-tip: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM296 336h-16V248C280 234.8 269.3 224 256 224H224C210.8 224 200 234.8 200 248S210.8 272 224 272h8v64h-16C202.8 336 192 346.8 192 360S202.8 384 216 384h80c13.25 0 24-10.75 24-24S309.3 336 296 336zM256 192c17.67 0 32-14.33 32-32c0-17.67-14.33-32-32-32S224 142.3 224 160C224 177.7 238.3 192 256 192z"/></svg>';
   --x4-icon-check: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z"/></svg>';
+  --x4-icon-folder-closed: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 96h-172.1L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.66 0 96v320c0 35.34 28.65 64 64 64h384c35.35 0 64-28.66 64-64V160C512 124.7 483.3 96 448 96zM64 80h117.5c4.273 0 8.293 1.664 11.31 4.688L256 144h192c8.822 0 16 7.176 16 16v32h-416V96C48 87.18 55.18 80 64 80zM448 432H64c-8.822 0-16-7.176-16-16V240h416V416C464 424.8 456.8 432 448 432z"/></svg>';
+  --x4-icon-folder-opened: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M572.6 270.3l-96 192C471.2 473.2 460.1 480 447.1 480H64c-35.35 0-64-28.66-64-64V96c0-35.34 28.65-64 64-64h117.5c16.97 0 33.25 6.742 45.26 18.75L275.9 96H416c35.35 0 64 28.66 64 64v32h-48V160c0-8.824-7.178-16-16-16H256L192.8 84.69C189.8 81.66 185.8 80 181.5 80H64C55.18 80 48 87.18 48 96v288l71.16-142.3C124.6 230.8 135.7 224 147.8 224h396.2C567.7 224 583.2 249 572.6 270.3z"/></svg>';
+  --x4-icon-chevron-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>';
+  --x4-icon-chevron-right: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>';
+  --x4-icon-chevron-left: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M206.7 464.6l-183.1-191.1C18.22 267.1 16 261.1 16 256s2.219-11.97 6.688-16.59l183.1-191.1c9.152-9.594 24.34-9.906 33.9-.7187c9.625 9.125 9.938 24.37 .7187 33.91L73.24 256l168 175.4c9.219 9.5 8.906 24.78-.7187 33.91C231 474.5 215.8 474.2 206.7 464.6z"/></svg>';
+  --x4-icon-chevron-up: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M15.41 302.7l191.1-183.1C212 114.2 218 111.1 224 111.1s11.97 2.219 16.59 6.688l191.1 183.1c9.594 9.152 9.906 24.34 .7187 33.9c-9.125 9.625-24.38 9.938-33.91 .7187L224 169.2l-175.4 168c-9.5 9.219-24.78 8.906-33.91-.7187C5.502 327 5.814 311.8 15.41 302.7z"/></svg>';
 }
 /* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
 :root {
@@ -416,7 +421,7 @@ textarea::selection {
 .x-combo-box {
   display: flex;
   align-items: center;
-  width: min-content;
+  min-width: min-content;
   min-height: 32px;
   padding: 0;
   margin: 0;
@@ -1115,17 +1120,17 @@ textarea::selection {
 .x-spreadsheet .x-header .x-cell,
 .x-grid-view .x-header .x-cell {
   border-right: 1px solid rgba(0, 0, 0, 0.1);
-  height: unset;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 .x-spreadsheet .x-footer .x-cell span,
 .x-grid-view .x-footer .x-cell span,
 .x-spreadsheet .x-header .x-cell span,
 .x-grid-view .x-header .x-cell span {
   min-width: 0;
-  text-transform: uppercase;
   text-overflow: ellipsis;
   overflow: hidden;
-  font-weight: bold;
 }
 .x-spreadsheet .x-footer .x-cell.sort,
 .x-grid-view .x-footer .x-cell.sort,
@@ -1134,14 +1139,11 @@ textarea::selection {
   height: 0.7rem;
   opacity: 0.7;
 }
-.x-spreadsheet .x-header .x-cell,
-.x-grid-view .x-header .x-cell {
-  display: flex;
-  align-items: center;
-}
 .x-spreadsheet .x-header .x-cell span,
 .x-grid-view .x-header .x-cell span {
   width: unset;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 .x-spreadsheet .x-header .x-cell .sort,
 .x-grid-view .x-header .x-cell .sort {
@@ -1622,15 +1624,22 @@ textarea::selection {
 }
 .x-tree-view .x-tree-item .tree-icon {
   width: 2em;
+  color: #999;
+  height: 0.8em;
+}
+.x-tree-view .x-tree-item.selected {
+  background-color: var(--x4-selection-color);
+  color: var(--x4-selection-text);
 }
-.x-tree-view .x-tree-item.collapsed .tree-icon {
-  transform: rotate(-90deg);
+.x-tree-view .x-tree-item.selected .tree-icon {
+  color: var(--x4-selection-text);
 }
 .x-tree-view .x-tree-item:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--x4-hover-color);
+  color: var(--x4-hover-text);
 }
-.x-tree-view .x-tree-item.selected {
-  background-color: rgba(255, 255, 255, 0.3);
+.x-tree-view .x-tree-item:hover .tree-icon {
+  color: var(--x4-hover-text);
 }
 .x-tree-view .x-tree-item .indent {
   position: absolute;