x4js 1.4.10 → 1.4.13

package/lib/formatters.js

@@ -86,3 +86,4 @@ function bool_formatter(input) {
     return input ? 'oui' : '-';
 }
 exports.bool_formatter = bool_formatter;
+setCurrencySymbol(null);

package/lib/gridview.js

@@ -60,7 +60,7 @@ class ColHeader extends component_1.Component {
             }),
             new icon_js_1.Icon({
                 ref: 'sorter',
-                cls: '@hidden',
+                cls: '@hidden sort',
                 icon: 'var( --x4-icon-arrow-down )'
             })
         ]);
@@ -328,6 +328,7 @@ class GridView extends layout_1.VLayout {
             col.$col = comp;
             return comp;
         });
+        cols.push(new component_1.Flex({}));
         // compute full width
         let full_width = 0;
         this.m_columns.forEach((col) => {
@@ -359,6 +360,7 @@ class GridView extends layout_1.VLayout {
                 });
                 return comp;
             });
+            foots.push(new component_1.Flex({}));
             this.m_footer = new layout_1.HLayout({
                 cls: '@footer',
                 content: foots,
@@ -579,16 +581,16 @@ class GridView extends layout_1.VLayout {
         }
         this.m_empty_msg.show(show);
         if (full_width < rc.width) {
-            this.m_header.setStyleValue('width', null);
-            this.m_footer?.setStyleValue('width', null);
+            //this.m_header.setStyleValue('width', null);
+            //this.m_footer?.setStyleValue('width', null);
             this.m_container.setStyle({
                 height: count * this.m_itemHeight,
                 width: null
             });
         }
         else {
-            this.m_header.setStyleValue('width', full_width);
-            this.m_footer?.setStyleValue('width', full_width);
+            this.m_header.setStyleValue('width', full_width + 5);
+            this.m_footer?.setStyleValue('width', full_width + 5);
             this.m_container.setStyle({
                 height: count * this.m_itemHeight,
                 width: full_width

package/lib/layout.d.ts

@@ -78,4 +78,10 @@ export declare class ScrollView extends Component<ScrollViewProps> {
     constructor(props: ScrollViewProps);
     setContent(content: ComponentContent): void;
 }
+export declare class Masonry extends Container {
+    constructor(props: any);
+    resizeItem(item: Component): void;
+    resizeAllItems(): void;
+    addItem(itm: Component): void;
+}
 export {};

package/lib/layout.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollView = exports.TableLayout = exports.GridLayout = exports.AutoLayout = exports.VLayout = exports.HLayout = exports.AbsLayout = void 0;
+exports.Masonry = exports.ScrollView = exports.TableLayout = exports.GridLayout = exports.AutoLayout = exports.VLayout = exports.HLayout = exports.AbsLayout = void 0;
 const component_1 = require("./component");
 const tools_1 = require("./tools");
 // ============================================================================
@@ -273,3 +273,42 @@ class ScrollView extends component_1.Component {
     }
 }
 exports.ScrollView = ScrollView;
+// :: MASONERY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+class Masonry extends component_1.Container {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('sizechange', () => {
+            this.resizeAllItems();
+        });
+    }
+    resizeItem(item) {
+        const style = this.getComputedStyle();
+        const rowHeight = style.parse('grid-auto-rows');
+        const rowGap = style.parse('grid-row-gap');
+        let content = item.queryItem('.content');
+        if (!content) {
+            content = item;
+        }
+        if (content && (rowHeight + rowGap)) {
+            const rc = content.getBoundingRect();
+            const rowSpan = Math.ceil((rc.height + rowGap) / (rowHeight + rowGap));
+            item.setStyleValue('gridRowEnd', "span " + rowSpan);
+        }
+    }
+    resizeAllItems() {
+        this.queryAll(".item", (itm) => {
+            ;
+            this.resizeItem(itm);
+        });
+    }
+    addItem(itm) {
+        itm.addClass('content');
+        this.appendChild(new component_1.Container({
+            cls: 'item',
+            content: itm
+        }));
+    }
+}
+exports.Masonry = Masonry;

package/lib/listview.d.ts

@@ -26,7 +26,7 @@
 * 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 { Container, Component, CProps, ContainerEventMap, EvDblClick } from './component';
+import { Container, Component, ContainerProps, ContainerEventMap, EvDblClick } from './component';
 import { IconID } from './icon';
 import { VLayout } from './layout';
 import { Popup, PopupEventMap, PopupProps } from './popup';
@@ -35,7 +35,7 @@ import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent }
 /**
  * item definition
  */
-export declare class ListViewItem {
+export interface ListViewItem {
     id: any;
     text?: string | HtmlString;
     html?: boolean;
@@ -67,7 +67,7 @@ export interface ListViewEventMap extends ContainerEventMap {
 /**
  * listview properties
  */
-export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends CProps<E> {
+export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends ContainerProps<E> {
     items?: ListViewItem[];
     populate?: PopulateItems;
     gadgets?: Component[];

package/lib/listview.js

@@ -28,24 +28,13 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupListView = exports.EvCancel = exports.ListView = exports.ListViewItem = void 0;
+exports.PopupListView = exports.EvCancel = exports.ListView = void 0;
 const component_1 = require("./component");
 const layout_1 = require("./layout");
 const popup_1 = require("./popup");
 const tools_1 = require("./tools");
 const menu_1 = require("./menu");
 const x4_events_1 = require("./x4_events");
-/**
- * item definition
- */
-class ListViewItem {
-    id;
-    text; // if you need pure text
-    html; // if text is html
-    icon;
-    data;
-}
-exports.ListViewItem = ListViewItem;
 ;
 /**
  * Standard listview class

package/lib/tools.js

@@ -455,9 +455,10 @@ function parseIntlDate(value, fmts = i18n_1._tr.global.date_input_formats) {
         let rematch = new RegExp('^' + smatch + '$', 'm');
         let match = rematch.exec(value);
         if (match) {
+            const now = new Date();
             let d = parseInt(match.groups.day ?? '1');
             let m = parseInt(match.groups.month ?? '1');
-            let y = parseInt(match.groups.year ?? '1970');
+            let y = parseInt(match.groups.year ?? now.getFullYear() + '');
             let h = parseInt(match.groups.hour ?? '0');
             let i = parseInt(match.groups.min ?? '0');
             let s = parseInt(match.groups.sec ?? '0');

package/lib/tooltips.js

@@ -47,7 +47,7 @@ class Tooltip extends component_1.Component {
     render() {
         this.setClass('@non-maskable', true);
         this.setContent([
-            new icon_1.Icon({ icon: 'cls(far fa-circle-info)' }),
+            new icon_1.Icon({ icon: 'var( --x4-icon-tip )' }),
             this.m_text = new label_1.Label({ text: 'help' })
         ]);
     }

package/lib/x4.css

@@ -58,6 +58,7 @@
   --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>';
 }
 /* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
 :root {
@@ -291,10 +292,13 @@ textarea::selection {
 .x-icon:before {
   font-family: var(--x4-icon-font-family);
 }
-.x-icon.x-svg-icon,
-.x-icon svg {
-  width: 1em;
-  height: 1em;
+.x-icon.x-svg-icon {
+  width: 1rem;
+  height: 1rem;
+}
+.x-icon.x-svg-icon > svg {
+  width: 100%;
+  height: 100%;
 }
 .x-base-button {
   display: flex;
@@ -946,13 +950,15 @@ textarea::selection {
 .x-form {
   background-color: var(--x4-form-color);
   margin-block-end: 0;
-  padding: 8px;
+  padding: 8px 0;
   min-width: 250px;
   min-height: 50px;
-  overflow: auto;
+  padding-right: 4px;
 }
 .x-form > .container {
   padding: 0px;
+  overflow: auto;
+  padding: 0 4px 0 8px;
 }
 .x-form > .footer {
   position: relative;
@@ -960,7 +966,7 @@ textarea::selection {
   bottom: 0;
   width: 100%;
   justify-content: flex-end;
-  padding: 0px;
+  padding: 0px 4px 0 8px;
   margin-top: 8px;
   align-items: center;
 }
@@ -1090,25 +1096,25 @@ textarea::selection {
 .x-grid-view .x-footer .x-cell,
 .x-spreadsheet .x-header .x-cell,
 .x-grid-view .x-header .x-cell {
-  text-overflow: ellipsis;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   height: unset;
 }
+.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,
 .x-spreadsheet .x-header .x-cell.sort,
 .x-grid-view .x-header .x-cell.sort {
-  background-image: var(--x4-icon-arrow-down-long);
-  background-repeat: no-repeat;
-  background-size: 1rem 1rem;
-  background-position: right 0 top 6px;
-  padding-right: calc(1rem + 4px);
-}
-.x-spreadsheet .x-footer .x-cell.sort.desc,
-.x-grid-view .x-footer .x-cell.sort.desc,
-.x-spreadsheet .x-header .x-cell.sort.desc,
-.x-grid-view .x-header .x-cell.sort.desc {
-  background-image: var(--x4-icon-arrow-up-long);
+  height: 0.7rem;
+  opacity: 0.7;
 }
 .x-spreadsheet .x-header .x-cell,
 .x-grid-view .x-header .x-cell {
@@ -1235,14 +1241,14 @@ textarea::selection {
   background-color: white;
   color: white;
   padding-left: 24px;
-  font-size: 0.8rem;
-  font-weight: 300;
+  font-family: var(--x4-font);
+  font-size: var(--x4-font-size);
 }
 .x-tooltip .x-icon {
   position: absolute;
-  left: 6px;
+  left: 5px;
   top: 7px;
-  color: var(--x4-tip-background);
+  color: var(--x4-selection-color);
 }
 .x-tooltip .x-label {
   background-color: var(--x4-selection-color);
@@ -1277,6 +1283,7 @@ textarea::selection {
   overflow-y: auto;
 }
 .x-popup-list-view {
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
   background-color: white;
 }
 .x-popup-list-view .x-combo-popup {
@@ -1678,3 +1685,9 @@ textarea::selection {
   left: 0;
   right: 0;
 }
+.x-masonry {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-auto-rows: 10px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.10",
+	"version": "1.4.13",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/formatters.ts

@@ -97,4 +97,7 @@ export function money_formatter_nz(input: any): string {
 
 export function bool_formatter(input: any): string {
 	return input ? 'oui' : '-';
-}
+}
+
+
+setCurrencySymbol( null );

package/src/gridview.ts

@@ -36,7 +36,7 @@ const T_UPDATE = Symbol('update');
 
 
 import { HLayout, VLayout } from './layout'
-import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay } from './component'
+import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay, Flex } from './component'
 import { Label } from './label'
 import { _tr } from './i18n'
 import * as Formatters from './formatters'
@@ -122,7 +122,7 @@ class ColHeader extends Component {
 			}),
 			new Icon( {
 				ref: 'sorter',
-				cls: '@hidden',
+				cls: '@hidden sort',
 				icon: 'var( --x4-icon-arrow-down )'
 			})
 		]);
@@ -467,6 +467,8 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			return comp;
 		});
 
+		(cols as any).push( new Flex( {} ) );
+
 		// compute full width
 		let full_width = 0;
 		this.m_columns.forEach((col) => {
@@ -507,6 +509,8 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 				return comp;
 			});
 
+			(foots as any).push( new Flex( {} ) );
+
 			this.m_footer = new HLayout({
 				cls: '@footer',
 				content: <any>foots,
@@ -779,16 +783,16 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 		this.m_empty_msg.show(show);
 
 		if (full_width < rc.width) {
-			this.m_header.setStyleValue('width', null);
-			this.m_footer?.setStyleValue('width', null);
+			//this.m_header.setStyleValue('width', null);
+			//this.m_footer?.setStyleValue('width', null);
 			this.m_container.setStyle({
 				height: count * this.m_itemHeight,
 				width: null
 			});
 		}
 		else {
-			this.m_header.setStyleValue('width', full_width);
-			this.m_footer?.setStyleValue('width', full_width);
+			this.m_header.setStyleValue('width', full_width + 5 );
+			this.m_footer?.setStyleValue('width', full_width + 5 );
 
 			this.m_container.setStyle({
 				height: count * this.m_itemHeight,

package/src/layout.ts

@@ -116,7 +116,7 @@ export class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Con
 	constructor(props: GridLayoutProps) {
 		/// @ts-ignore
 		// Argument of type 'GridLayoutProps' is not assignable to parameter of type 'P'.
-  		// 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
+		// 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
 		super(props);
 	}
 
@@ -134,8 +134,8 @@ export class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Con
 			this.setStyleValue('grid-gap', this.m_props.colGap);
 		}
 
-		if( this.m_props.template ) {
-			this.setStyleValue('grid-template-areas', this.m_props.template.join('\n') );
+		if (this.m_props.template) {
+			this.setStyleValue('grid-template-areas', this.m_props.template.join('\n'));
 		}
 	}
 }
@@ -368,3 +368,54 @@ export class ScrollView extends Component<ScrollViewProps> {
 		}
 	}
 }
+
+
+// :: MASONERY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+
+export class Masonry extends Container {
+
+	constructor(props) {
+		super(props);
+
+		this.setDomEvent('sizechange', () => {
+			this.resizeAllItems( );
+		});
+	}
+
+	resizeItem(item: Component) {
+
+		const style = this.getComputedStyle();
+
+		const rowHeight = style.parse('grid-auto-rows');
+		const rowGap = style.parse('grid-row-gap');
+
+		let content = item.queryItem('.content');
+		if( !content ) {
+			content = item;
+		}
+
+		if (content && (rowHeight + rowGap)) {
+			const rc = content.getBoundingRect();
+			const rowSpan = Math.ceil( (rc.height + rowGap) / (rowHeight + rowGap) );
+			item.setStyleValue('gridRowEnd', "span " + rowSpan);
+		}
+	}
+	  
+	resizeAllItems( ) {
+		this.queryAll( ".item", ( itm ) => {;
+			this.resizeItem( itm );
+		} );
+	}
+
+	addItem( itm: Component ) {
+		itm.addClass( 'content' );
+		this.appendChild( new Container( {
+			cls: 'item',
+			content: itm
+		}));
+	}
+}
+

package/src/listview.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { Container, Component, CProps, ContainerEventMap, EvDblClick } from './component'
+import { Container, Component, ContainerProps, ContainerEventMap, EvDblClick } from './component'
 import { IconID } from './icon';
 import { HLayout, VLayout } from './layout'
 import { Popup, PopupEventMap, PopupProps } from './popup';
@@ -40,7 +40,7 @@ import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent, E
  * item definition
  */
 
-export class ListViewItem {
+export interface ListViewItem {
 	id: any;
 	text?: string | HtmlString;		// if you need pure text
 	html?: boolean;		// if text is html
@@ -79,7 +79,7 @@ export interface ListViewEventMap extends ContainerEventMap {
 /**
  * listview properties
  */
-export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends CProps<E> {
+export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends ContainerProps<E> {
 	items?: ListViewItem[];
 	populate?: PopulateItems;
 	gadgets?: Component[]; // gadgets to instert at bottom

package/src/tools.ts

@@ -551,9 +551,11 @@ export function parseIntlDate(value: string, fmts: string = _tr.global.date_inpu
 		let match = rematch.exec(value);
 
 		if (match) {
+			const now = new Date( );
+
 			let d = parseInt(match.groups.day ?? '1');
 			let m = parseInt(match.groups.month ?? '1');
-			let y = parseInt(match.groups.year ?? '1970');
+			let y = parseInt(match.groups.year ?? now.getFullYear()+'');
 			let h = parseInt(match.groups.hour ?? '0');
 			let i = parseInt(match.groups.min ?? '0');
 			let s = parseInt(match.groups.sec ?? '0');

package/src/tooltips.ts

@@ -52,7 +52,7 @@ export class Tooltip extends Component {
 	render() {
 		this.setClass('@non-maskable', true);
 		this.setContent([
-			new Icon({ icon: 'cls(far fa-circle-info)' }),
+			new Icon({ icon: 'var( --x4-icon-tip )' }),
 			this.m_text = new Label({ text: 'help' })
 		]);
 	}

package/src/x4.less

@@ -70,6 +70,7 @@
 	--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>';
 }
 
 @BLACK10:	rgba(0,0,0,0.1);
@@ -368,9 +369,14 @@ textarea {
 	text-align: center;
 	flex-direction: column;
 
-	&.x-svg-icon, svg {
-		width: 1em;
-		height: 1em;
+	&.x-svg-icon {
+		width: 1rem;
+		height: 1rem;
+
+		& > svg {
+			width: 100%;
+			height: 100%;
+		}
 	}
 }
 
@@ -1184,13 +1190,15 @@ textarea {
 .x-form {
 	background-color: var( --x4-form-color );
 	margin-block-end: 0;
-	padding: 8px;
+	padding: 8px 0;
 	min-width: 250px;
 	min-height: 50px;
-	overflow: auto;
-
+	padding-right: 4px;
+	
 	&>.container {
 		padding: 0px;
+		overflow: auto;
+		padding: 0 4px 0 8px;
 	}
 
 	&>.footer {
@@ -1199,7 +1207,7 @@ textarea {
 		bottom: 0;
 		width: 100%;
 		justify-content: flex-end;
-		padding: 0px;
+		padding: 0px 4px 0 8px;
 		margin-top: 8px;
 		align-items: center;
 
@@ -1335,21 +1343,20 @@ textarea {
 		}
 
 		.x-cell {
-			text-overflow: ellipsis;
 			border-right: 1px solid rgba(0,0,0,0.1);
-			//text-transform: capitalize;
 			height: unset;
 
-			&.sort {
-				background-image: var( --x4-icon-arrow-down-long );
-				background-repeat: no-repeat;
-				background-size: 1rem 1rem;
-				background-position: right 0 top 6px;
-				padding-right: calc( 1rem + 4px );
+			span {
+				min-width: 0;
+				text-transform: uppercase;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				font-weight: bold;
 			}
 
-			&.sort.desc {
-				background-image: var( --x4-icon-arrow-up-long );
+			&.sort {
+				height: 0.7rem;
+				opacity: 0.7;
 			}
 		}
 	}
@@ -1525,19 +1532,17 @@ textarea {
 	pointer-events: none;
 
 	background-color: white;
-    //border: 1px solid fadeout(darken(#2e404f,5%),10%);
     color: white;
-	//padding: 4px 8px;
 	padding-left: 24px;
 	
-	font-size: 0.8rem;
-	font-weight: 300;
-	
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
+		
 	.x-icon {
 		position: absolute;
-		left: 6px;
+		left: 5px;
 		top: 7px;
-		color: var( --x4-tip-background );	
+		color: var( --x4-selection-color );	
 	}
 
 	.x-label {
@@ -1589,6 +1594,7 @@ textarea {
 
 
 .x-popup-list-view {
+	.z-float-4( );
 	background-color: white;
 	
 	.x-combo-popup {
@@ -2120,4 +2126,11 @@ textarea {
 		left: 0;
 		right: 0;
 	}
+}
+
+.x-masonry {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+	grid-auto-rows: 10px;
 }