x4js 1.4.24 → 1.4.28

package/lib/application.js

@@ -92,6 +92,7 @@ class Application extends base_component_1.BaseComponent {
         }
     }
     ApplicationCreated() {
+        this.setTitle('');
     }
     get app_name() {
         return this.m_app_name;
@@ -128,6 +129,9 @@ 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);
+        if (!this.m_props.renderTo) {
+            dest.setStyleValue('position', 'absolute');
+        }
         dest.addClass('x4-root-element');
         if (clearBefore) {
             dest._empty();
@@ -144,7 +148,7 @@ class Application extends base_component_1.BaseComponent {
         return this.m_mainView;
     }
     setTitle(title) {
-        x4dom_1.x4document.title = this.m_app_name + ' > ' + title;
+        x4dom_1.x4document.title = this.m_app_name + (title ? (' > ' + title) : '');
     }
     disableZoomWheel() {
         window.addEventListener('wheel', function (ev) {

package/lib/dialog.js

@@ -346,14 +346,14 @@ class Dialog extends popup_1.Popup {
         let trc = this.m_el_title.getBoundingRect();
         let dx = x - rc.left, dy = y - rc.top;
         let cstyle = this.getComputedStyle();
-        let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
-        let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
-        let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
-        let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
-        wrc.top += topw - trc.height;
-        wrc.height -= topw + botw - trc.height;
-        wrc.left += lftw;
-        wrc.width -= lftw + rgtw;
+        //let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
+        //let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
+        //let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
+        //let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
+        //wrc.top += topw - trc.height;
+        //wrc.height -= topw + botw - trc.height;
+        //wrc.left += lftw;
+        //wrc.width -= lftw + rgtw;
         // custom handling double click
         const now = Date.now();
         const delta = now - this.m_last_down;
@@ -367,19 +367,32 @@ class Dialog extends popup_1.Popup {
             return;
         }
         let __move = (ex, ey) => {
-            let x = ex - dx, y = ey - dy;
-            if (x + rc.width < wrc.left) {
-                x = wrc.left - rc.width;
+            if (ex > wrc.right) {
+                ex = wrc.right;
             }
-            else if (x > wrc.right) {
-                x = wrc.right;
+            else if (ex < wrc.left) {
+                ex = wrc.left;
             }
-            if (y < wrc.top) { // title grip is on top
-                y = wrc.top;
+            if (ey > wrc.bottom) {
+                ey = wrc.bottom;
             }
-            else if (y > wrc.bottom) {
-                y = wrc.bottom;
+            else if (ey < wrc.top) {
+                ey = wrc.top;
             }
+            let x = ex - dx, y = ey - dy;
+            //if (x + rc.width < wrc.left) {
+            //	x = wrc.left - rc.width;
+            //}
+            //else if (x > wrc.right) {
+            //	x = wrc.right;
+            //}
+            //
+            //if (y < wrc.top) { // title grip is on top
+            //	y = wrc.top;
+            //}
+            //else if (y > wrc.bottom) {
+            //	y = wrc.bottom;
+            //}
             this.setStyle({
                 left: x,
                 top: y

package/lib/fileupload.d.ts

@@ -55,10 +55,10 @@ export declare class ImageUpload extends FileUpload {
  * @param extensions - string - ex: '.doc,.docx'
  * @param cb - callback to call when user select a file
  */
-export declare function openFile(extensions: string, cb: (filename: FileList) => void, multiple?: boolean): void;
+export declare function openFileDialog(extensions: string, cb: (filename: FileList) => void, multiple?: boolean): void;
 /**
  * open saveas dialog
  * @param defFileName - string - proposed filename
  * @param cb - callback to call when user choose the destination
  */
-export declare function saveFile(defFileName: string, extensions: string, cb: (filename: File) => void): void;
+export declare function saveFileDialog(defFileName: string, extensions: string, cb: (filename: File) => void): void;

package/lib/fileupload.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveFile = exports.openFile = exports.ImageUpload = exports.FileUpload = void 0;
+exports.saveFileDialog = exports.openFileDialog = exports.ImageUpload = exports.FileUpload = void 0;
 const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const layout_1 = require("./layout");
@@ -136,7 +136,7 @@ function _createFileInput() {
  * @param extensions - string - ex: '.doc,.docx'
  * @param cb - callback to call when user select a file
  */
-function openFile(extensions, cb, multiple = false) {
+function openFileDialog(extensions, cb, multiple = false) {
     let fi = _createFileInput();
     fi.removeAttribute('nwsaveas');
     fi.setAttribute('accept', extensions);
@@ -149,13 +149,13 @@ function openFile(extensions, cb, multiple = false) {
     });
     fi.dom.click();
 }
-exports.openFile = openFile;
+exports.openFileDialog = openFileDialog;
 /**
  * open saveas dialog
  * @param defFileName - string - proposed filename
  * @param cb - callback to call when user choose the destination
  */
-function saveFile(defFileName, extensions, cb) {
+function saveFileDialog(defFileName, extensions, cb) {
     let fi = _createFileInput();
     fi.setAttribute('nwsaveas', defFileName);
     fi.setAttribute('accept', extensions);
@@ -167,4 +167,4 @@ function saveFile(defFileName, extensions, cb) {
     });
     fi.dom.click();
 }
-exports.saveFile = saveFile;
+exports.saveFileDialog = saveFileDialog;

package/lib/gridview.js

@@ -844,16 +844,18 @@ class GridView extends layout_1.VLayout {
         }
         this.m_footer.enumChilds((c) => {
             let cid = c.getData('col');
-            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];
+            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];
+                }
+                c.setContent(text, false);
             }
-            c.setContent(text, false);
         });
     }
 }

package/lib/icon.js

@@ -76,7 +76,8 @@ class Loader extends x4events_1.EventSource {
                     if (r.ok) {
                         const svg = await r.text();
                         // check response, must be svg
-                        if (!svg.startsWith("<svg")) {
+                        //TODO: find better
+                        if (!svg.startsWith("<svg") && !svg.startsWith('<?xml')) {
                             console.error("svg loading error: ", svg);
                             this.signal('loaded', EvLoaded(url, ""));
                         }
@@ -180,13 +181,10 @@ class Icon extends component_1.Component {
             let match_url = reUrl.exec(icon);
             if (match_url) {
                 url = trimQuotes(match_url[1].trim());
-                if (url.substring(0, 5) == 'data:') {
-                    this._setSVG(url);
-                    return;
-                }
-                else {
-                    name = url.replace(/[/\\\.\* ]/g, '_');
-                }
+                // this value is escaped				
+                url = url.replaceAll("\\", "");
+                this._setSVG(url);
+                return;
             }
             else {
                 // todo: deprecated

package/lib/listview.d.ts

@@ -134,8 +134,8 @@ export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
     /**
      * return the current selection or null
      */
-    get selection(): ListViewItem;
-    set selection(id: ListViewItem);
+    get selection(): any;
+    set selection(id: any);
     private _findItemWithId;
     /**
      * append or prepend a new item

package/lib/menu.js

@@ -203,10 +203,10 @@ class MenuItem extends component_1.Component {
     }
     /** @ignore */
     render(props) {
-        let icon = props.icon ?? 0x20;
+        let icon = props.icon ?? 0;
         let text = props.text;
         if (props.checked !== undefined) {
-            icon = props.checked ? 'cls(far fa-check)' : 0; //todo: use stylesheet
+            icon = props.checked ? 'var( --x4-icon-check )' : 0;
         }
         if (this.m_action) {
             if (!icon) {
@@ -219,7 +219,7 @@ class MenuItem extends component_1.Component {
         let popIco = null;
         if (this.isPopup) {
             this.addClass('@popup-menu-item');
-            popIco = new icon_1.Icon("var( --x4-icon-chevron-right )");
+            popIco = new icon_1.Icon({ icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" });
         }
         if (!text && !icon) {
             this.addClass('@separator');

package/lib/popup.js

@@ -126,7 +126,10 @@ class Popup extends component_1.Container {
     }
     centerOnScreen() {
         let rc = this.getBoundingRect();
-        let x = (x4dom_1.x4document.body.clientWidth - rc.width) / 2, y = (x4dom_1.x4document.body.clientHeight - rc.height) / 2;
+        //let x = (x4document.body.clientWidth - rc.width) / 2,
+        //	y = (x4document.body.clientHeight - rc.height) / 2;
+        const x = `max( 0px, 50vw - ${rc.width / 2}px )`; //(x4dom_1.x4document.body.clientWidth - rc.width) / 2;
+        const y = `max( 0px, 50vh - ${rc.height / 2}px )`; //(x4dom_1.x4document.body.clientHeight - rc.height) / 2;
         this.setStyleValue('left', x);
         this.setStyleValue('top', y);
     }

package/lib/spreadsheet.js

@@ -389,6 +389,7 @@ class Spreadsheet extends layout_1.VLayout {
         if (this.m_recycler.length) {
             cell = this.m_recycler.pop();
             cell.clearClasses();
+            cell.addClass('@comp'); // todo: find better to reset to default
         }
         else {
             cell = new component_1.Component({
@@ -492,7 +493,8 @@ class Spreadsheet extends layout_1.VLayout {
                 cell.setStyle({
                     left: x,
                     top: top + y,
-                    width: calcw[colIdx]
+                    width: calcw[colIdx],
+                    height: this.m_itemHeight
                 });
                 if (this.m_selection.row == rowIdx && this.m_selection.col == colIdx) {
                     cell.addClass('@selected');

package/lib/tools.js

@@ -300,10 +300,9 @@ exports.escapeHtml = escapeHtml;
  * console.log( removeHtmlTags('<h1>sss</h1>') );
  */
 function removeHtmlTags(unsafe, nl_br = false) {
-    if (!unsafe || unsafe.length == 0) {
-        return unsafe;
+    if (unsafe === undefined || unsafe === null || !isString(unsafe) || unsafe.length == 0) {
+        return "";
     }
-    debugger;
     let ret_val = '';
     for (let i = 0; i < unsafe.length; i++) {
         const ch = unsafe.codePointAt(i);

package/lib/x4.css

@@ -58,7 +58,8 @@
   --x4-icon-xmark: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>';
   --x4-icon-angle-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>';
   --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-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-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>';
 }
 /* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
 :root {
@@ -693,6 +694,9 @@ textarea::selection {
   margin-right: 8px;
   color: var(--gray-700);
 }
+.x-menu-item .x-icon.pop-mark {
+  height: 0.8em;
+}
 .x-menu-item .x-label {
   padding: 4px;
 }
@@ -1079,6 +1083,10 @@ textarea::selection {
   color: var(--gray-900);
   height: 2em;
 }
+.x-spreadsheet .x-cell span,
+.x-grid-view .x-cell span {
+  width: 100%;
+}
 .x-spreadsheet .x-footer,
 .x-grid-view .x-footer,
 .x-spreadsheet .x-header,
@@ -1123,6 +1131,16 @@ textarea::selection {
   display: flex;
   align-items: center;
 }
+.x-spreadsheet .x-header .x-cell span,
+.x-grid-view .x-header .x-cell span {
+  width: unset;
+}
+.x-spreadsheet .x-header .x-cell .sort,
+.x-grid-view .x-header .x-cell .sort {
+  width: 1em;
+  height: 1em;
+  padding-left: 4px;
+}
 .x-spreadsheet .x-row,
 .x-grid-view .x-row {
   position: absolute;
@@ -1178,6 +1196,8 @@ textarea::selection {
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   height: 2em;
+  align-items: center;
+  display: flex;
 }
 .x-spreadsheet .x-cell.x-selected {
   background-color: rgba(0, 0, 0, 0.1);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.24",
+	"version": "1.4.28",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
@@ -14,7 +14,7 @@
 	  "framework"
 	],
 	"scripts": {
-		"build": "build.sh",
+		"build": "tsc && lessc src/x4.less >lib/x4.css",
 		"mkdoc": "typedoc --tsconfig tsconfig.json --readme none"
 	},
 	"author": "etienne cochard",

package/src/application.ts

@@ -128,6 +128,7 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	}
 
 	ApplicationCreated( ) {
+		this.setTitle( '' );
 	}
 
 	public get app_name( ) {
@@ -174,6 +175,10 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 		const ddom = this.m_props.renderTo ?? x4document.body;
 		const dest = flyWrap( ddom );
 
+		if( !this.m_props.renderTo ) {
+			dest.setStyleValue( 'position', 'absolute' );	
+		}
+
 		dest.addClass( 'x4-root-element' );
 		if( clearBefore ) {
 			dest._empty( );
@@ -196,7 +201,7 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	}
 
 	public setTitle( title: string ) {
-		x4document.title = this.m_app_name + ' > ' + title;
+		x4document.title = this.m_app_name + (title ? (' > ' + title) : '');
 	}
 
 	public disableZoomWheel( ) {

package/src/dialog.ts

@@ -469,16 +469,16 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 
 		let cstyle = this.getComputedStyle();
 
-		let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
-		let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
-		let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
-		let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
+		//let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
+		//let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
+		//let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
+		//let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
 
-		wrc.top += topw - trc.height;
-		wrc.height -= topw + botw - trc.height;
+		//wrc.top += topw - trc.height;
+		//wrc.height -= topw + botw - trc.height;
 
-		wrc.left += lftw;
-		wrc.width -= lftw + rgtw;
+		//wrc.left += lftw;
+		//wrc.width -= lftw + rgtw;
 
 		// custom handling double click
 		const now = Date.now();
@@ -496,23 +496,38 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 		}
 
 		let __move = (ex, ey) => {
-			let x = ex - dx,
-				y = ey - dy;
-
-			if (x + rc.width < wrc.left) {
-				x = wrc.left - rc.width;
+			
+			if( ex>wrc.right ) {
+				ex = wrc.right;
 			}
-			else if (x > wrc.right) {
-				x = wrc.right;
+			else if( ex<wrc.left ) {
+				ex = wrc.left;
 			}
 
-			if (y < wrc.top) { // title grip is on top
-				y = wrc.top;
+			if( ey>wrc.bottom ) {
+				ey = wrc.bottom;
 			}
-			else if (y > wrc.bottom) {
-				y = wrc.bottom;
+			else if( ey<wrc.top ) {
+				ey = wrc.top;
 			}
 
+			let x = ex - dx,
+				y = ey - dy;
+
+			//if (x + rc.width < wrc.left) {
+			//	x = wrc.left - rc.width;
+			//}
+			//else if (x > wrc.right) {
+			//	x = wrc.right;
+			//}
+			//
+			//if (y < wrc.top) { // title grip is on top
+			//	y = wrc.top;
+			//}
+			//else if (y > wrc.bottom) {
+			//	y = wrc.bottom;
+			//}
+
 			this.setStyle({
 				left: x,
 				top: y

package/src/fileupload.ts

@@ -171,7 +171,7 @@ function _createFileInput() {
  * @param cb - callback to call when user select a file
  */
 
-export function openFile(extensions: string, cb: (filename: FileList) => void, multiple = false) {
+export function openFileDialog(extensions: string, cb: (filename: FileList) => void, multiple = false) {
 
 	let fi = _createFileInput();
 
@@ -195,7 +195,7 @@ export function openFile(extensions: string, cb: (filename: FileList) => void, m
  * @param cb - callback to call when user choose the destination
  */
 
-export function saveFile(defFileName: string, extensions: string, cb: (filename: File) => void) {
+export function saveFileDialog(defFileName: string, extensions: string, cb: (filename: File) => void) {
 
 	let fi = _createFileInput();
 	fi.setAttribute('nwsaveas', defFileName);

package/src/gridview.ts

@@ -1126,19 +1126,21 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 		this.m_footer.enumChilds( (c) => {
 			let cid = c.getData( 'col' );
-			let col = this.m_columns[cid];
+			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 fmt = col.formatter;
+				
+				let text;
+				if (fmt && fmt instanceof Function) {
+					text = fmt(rec[col.id], rec);
+				}
+				else {
+					text = rec[col.id];
+				}
 
-			c.setContent( text, false );
+				c.setContent( text, false );
+			}
 		});
 	}
 }

package/src/icon.ts

@@ -101,7 +101,8 @@ class Loader extends EventSource<LoadingEventMap> {
 					if( r.ok ) {
 						const svg = await r.text();
 						// check response, must be svg
-						if( !svg.startsWith("<svg") ) {
+						//TODO: find better
+						if (!svg.startsWith("<svg") && !svg.startsWith('<?xml') ) {
 							console.error( "svg loading error: ", svg );
 							this.signal( 'loaded', EvLoaded(url,"") );
 						}
@@ -225,13 +226,10 @@ export class Icon extends Component<IconProps>
 			let match_url = reUrl.exec( icon );
 			if( match_url ) {
 				url  = trimQuotes( match_url[1].trim( ) );
-				if( url.substring(0,5)=='data:' ) {
-					this._setSVG( url );
-					return;
-				}
-				else {
-					name = url.replace( /[/\\\.\* ]/g, '_' );
-				}
+				// this value is escaped				
+				url = url.replaceAll( "\\", "" );
+				this._setSVG( url );
+				return;
 			}
 			else {
 				// todo: deprecated

package/src/listview.ts

@@ -551,7 +551,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 		return this.m_selection ? this.m_selection.item : null;
 	}
 
-	public set selection(id) {
+	public set selection(id: any) {
 		if (id === null || id === undefined) {
 			this._selectItem(null, null);
 		}

package/src/menu.ts

@@ -293,11 +293,11 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 	/** @ignore */
 	render(props: MenuItemProps) {
 
-		let icon = props.icon ?? 0x20;
+		let icon = props.icon ?? 0;
 		let text = props.text;
 
 		if (props.checked !== undefined) {
-			icon = props.checked ? 'cls(far fa-check)' : 0;	//todo: use stylesheet
+			icon = props.checked ? 'var( --x4-icon-check )' : 0;
 		}
 
 		if( this.m_action ) {
@@ -313,7 +313,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 		let popIco = null;
 		if (this.isPopup) {
 			this.addClass('@popup-menu-item');
-			popIco = new Icon( "var( --x4-icon-chevron-right )" );
+			popIco = new Icon( { icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" } );
 		}
 
 		if (!text && !icon) {

package/src/popup.ts

@@ -169,8 +169,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 	centerOnScreen( ) {
 		let rc = this.getBoundingRect();
 
-		let x = (x4document.body.clientWidth - rc.width) / 2,
-			y = (x4document.body.clientHeight - rc.height) / 2;
+		//let x = (x4document.body.clientWidth - rc.width) / 2,
+		//	y = (x4document.body.clientHeight - rc.height) / 2;
+
+		const x = `max( 0px, 50vw - ${rc.width/2}px )`;	//(x4dom_1.x4document.body.clientWidth - rc.width) / 2;
+		const y = `max( 0px, 50vh - ${rc.height/2}px )`;	//(x4dom_1.x4document.body.clientHeight - rc.height) / 2;
 
 		this.setStyleValue('left', x);
 		this.setStyleValue('top', y);

package/src/spreadsheet.ts

@@ -546,6 +546,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 		if (this.m_recycler.length) {
 			cell = this.m_recycler.pop();
 			cell.clearClasses();
+			cell.addClass( '@comp' );	// todo: find better to reset to default
 		}
 		else {
 			cell = new Component({
@@ -681,7 +682,8 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 				cell.setStyle({
 					left: x,
 					top: top + y,
-					width: calcw[colIdx]
+					width: calcw[colIdx],
+					height: this.m_itemHeight
 				});
 
 				if (this.m_selection.row == rowIdx && this.m_selection.col == colIdx) {

package/src/tools.ts

@@ -369,10 +369,11 @@ export function escapeHtml(unsafe: string, nl_br = false): string {
  */
 
 export function removeHtmlTags(unsafe: string, nl_br = false): string {
-	if (!unsafe || unsafe.length == 0) {
-		return unsafe;
-	}
-	debugger;
+	
+	if ( unsafe===undefined || unsafe===null || !isString(unsafe) || unsafe.length == 0 ) {
+		return "";
+	} 
+
 	let ret_val = '';
 	for (let i = 0; i < unsafe.length; i++) {
 		const ch = unsafe.codePointAt(i);

package/src/x4.less

@@ -70,7 +70,8 @@
 	--x4-icon-xmark: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>';
 	--x4-icon-angle-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>';
 	--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-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-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>';
 }
 
 @BLACK10:	rgba(0,0,0,0.1);
@@ -862,6 +863,10 @@ textarea {
 		width: 1em;
 		margin-right: 8px;
 		color: var( --gray-700 );
+
+		&.pop-mark {
+			height: 0.8em;
+		}
 	}
 
 	.x-label {
@@ -1329,9 +1334,12 @@ textarea {
 		overflow: hidden;
 		padding: 4px;
 		white-space: nowrap;
-		//min-width: 50px;
 		color: var( --gray-900 );
 		height: @def-height;
+
+		span {
+			width: 100%;
+		}
 	}
 
 	.x-footer,
@@ -1368,6 +1376,15 @@ textarea {
 		.x-cell {
 			display: flex;
 			align-items: center;
+			span {
+				width: unset;
+			}
+
+			.sort {
+				width: 1em;
+				height: 1em;
+				padding-left: 4px;
+			}
 		}
 	}
 
@@ -1441,6 +1458,8 @@ textarea {
 		border-right: 1px solid rgba(0,0,0,0.1);
     	border-bottom: 1px solid rgba(0,0,0,0.1);
 		height: 2em;
+		align-items: center;
+		display: flex;
 	}
 
 	.x-cell.x-selected {

package/tsconfig.json

@@ -12,10 +12,6 @@
 	"include": [
 		"./src/*",
 	],
-	"exclude": [
-		"src/texthiliter.ts",
-		"src/smartedit.ts"
-	],
 	"typedocOptions": {
         "entryPoints": ["src/index.ts"],
         "out": "../doc/api"

package/src/texthiliter.ts

@@ -1,288 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file texthiliter.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2022 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-/**
- * idea came from https://www.cdolivet.com/editarea
- */
-
-import { Component, CProps, CEventMap } from './component'
-import { EvChange } from './x4_events'
-
-interface TextHiliterEventMap extends CEventMap {
-	change: EvChange;
-}
-
-
-interface TextHiliterProps extends CProps {
-	text: string;
-	kwList?: Set<string>;
-	change?: EvChange;
-}
-
-
-export class TextHiliter extends Component<TextHiliterProps,TextHiliterEventMap> {
-
-	private m_text: string;
-	private m_ed: Component;
-	private m_hi: Component;
-	private m_top: number;
-	private m_kwList: Set<string>;
-
-	constructor( props: TextHiliterProps ) {
-		super( props );
-
-		this.m_kwList = props.kwList;
-		this.m_top = 0;
-		this.m_text = props.text ?? '';
-	
-		this.mapPropEvents( props, 'change' );
-	}
-
-	/** @ignore */	
-	render( ) {
-		this.setContent( [
-			this.m_hi = new Component( {
-				tag: 'span',
-				cls: '@fit @syntax-hiliter',
-			}),
-			this.m_ed = new Component( {
-				tag: 'textarea',
-				cls: '@fit',
-				width: '100%',
-				attrs: {
-					spellcheck: 'false',
-					wrap: 'off',
-				},
-				dom_events: {
-					input: ()=>this._hiliteText(),
-					scroll: ()=> this._updateScroll( ),
-					keydown: (e)=> this._keydown(e),
-				}
-			}),
-			
-		])
-	}
-
-	componentCreated() {
-		super.componentCreated( );
-		this.value = this.m_text;
-	}
-
-	get value( ) : string {
-
-		if( this.dom ) {
-			return (<HTMLTextAreaElement>this.m_ed.dom).value;
-		}
-		else {
-			return this.m_text;
-		}
-	}
-
-	set value( t: string ) {
-		if( this.dom ) {
-			(<HTMLTextAreaElement>this.m_ed.dom).value = t;
-		}
-		
-		this.m_text = t;
-		this._hiliteText( );
-	}
-
-	private _keydown( e: KeyboardEvent ) {
-		if(e.key=='Tab' ){
-			e.preventDefault();
-			e.stopPropagation( );
-
-			let dom = <HTMLTextAreaElement>this.m_ed.dom;
-			
-			let ss = dom.selectionStart;
-			let se = dom.selectionEnd;
-			dom.setRangeText( '\t', ss, se );
-			dom.setSelectionRange( ss+1, ss+1 );
-			dom.dispatchEvent( new Event( 'input' ) );
-        }
-		else if( e.key=='Enter' ) {
-			e.stopPropagation( );
-        }
-	}
-
-	private _hiliteText( ) {
-		let text = (<HTMLTextAreaElement>this.m_ed.dom).value;
-
-		if( !this.m_hi.dom.firstChild ) {
-			this.m_hi.dom.innerHTML = '<div style="position:absolute"></div>';
-		}
-
-		(<HTMLElement>this.m_hi.dom.firstChild).innerHTML = this._tokenize(text);
-		//	this._updateScroll( );
-	}
-
-	private _updateScroll( ) {
-		
-		this.startTimer('sync', 0, false, ( ) => {
-			let top = this.m_ed.dom.scrollTop;	
-			if( top!=this.m_top ) {
-				this.m_hi.dom.scrollTop = top;
-				this.m_top = top;
-			}
-			this.m_hi.dom.scrollLeft = this.m_ed.dom.scrollLeft;
-			//this.m_hi.setStyleValue( 'width', this.m_ed.dom.clientWidth );
-		});
-	}
-
-	private _escape( text: string ) : string {
-		text = text.replace( /&/gm, '&amp;' );
-		text = text.replace( /</gm, '&lt;' );
-		text = text.replace( />/gm, '&gt;' );
-		return text;
-	}
-
-
-
-	private _tokenize( text: string ) : string {
-
-		const reNUM = /\d/;
-		const reNUM2 = /[\d.]/;
-		const rePUNC = /\+|-|,|\/|\*|=|%|!|\||;|\.|\[|\]|\{|\|\(|\)|}|<|>|&/;
-		const reKW = /[a-zA-Z_]/;
-		const reKW2 = /[a-zA-Z0-9_]/;
-
-		let result = '';
-
-		let i = 0;
-		let length = text.length;
-		let s;
-
-		console.time( "hilite" );
-		
-		while( i<length ) {
-
-			let c = text.charAt( i );
-			
-			// numbers
-			if( reNUM.test(c) ) {
-				
-				let s = i;
-				do {
-					c = text.charAt( ++i );
-				} while( reNUM2.test(c) && i<length );
-				
-				result += '<span class="num">' + text.substring( s, i ) + '</span>';
-				continue;
-			}
-
-			// keywords
-			if( this.m_kwList ) {
-				if( reKW.test(c) ) {
-
-					let s = i;
-				
-					do {
-						c = text.charAt( ++i );
-					} while( reKW2.test(c) && i<length );
-
-					let kw = text.substring( s, i );
-					if( this.m_kwList.has( kw ) ) {
-						result += '<span class="kword">' + kw + '</span>';
-					}
-					else {
-						result += kw;
-					}
-
-					continue;
-				}
-			}
-
-			if( c=='#' ) {
-				let ne = text.indexOf( '\n', i+1 );
-				if( ne<0 ) {
-					ne = text.length;
-				}
-
-				result += '<span class="cmt">' + this._escape(text.substring( i, ne )) + '</span>';	
-				i = ne;
-				continue;
-			}
-			
-			//	comments
-			if( c=='/' ) {
-				let cn = text.charAt( i+1 );
-				if( cn=='*' ) {
-					let ne = text.indexOf( '*/', i+2 );
-					if( ne<0 ) {
-						ne = text.length;
-					}
-
-					result += '<span class="cmt">' + this._escape(text.substring( i, ne+2 )) + '</span>';	
-					i = ne+2;
-					continue;
-				}
-				else if( cn=='/' ) {
-					let ne = text.indexOf( '\n', i+2 );
-					if( ne<0 ) {
-						ne = text.length;
-					}
-
-					result += `<span class="cmt">${this._escape(text.substring( i, ne ))}</span>`;	
-					i = ne;
-					continue;
-				}
-			}
-			
-			// punctuation
-			if( rePUNC.test(c) ) {
-				 s = i;
-				do {
-					c = text.charAt( ++i );
-				} while( rePUNC.test(c) && i<length );
-				
-				result += `<span class="punc">${text.substring( s, i )}</span>`;
-				continue;
-			}
-			
-			// strings
-			if( c=='"' || c=='\'' || c=='\`' ) {
-				s = i;
-
-				let delim = c;
-				do {
-					c = text.charAt( ++i );
-				} while( c!=delim && i<length );
-				
-				result += `<span class="str">${this._escape(text.substring( s, ++i ))}</span>`;
-				continue;
-			}
-
-			i++;
-			result += c;
-		}
-
-		console.timeEnd( "hilite" );
-		return result + '\n\n\n';
-	}
-}