x4js 1.4.33 → 1.4.37

package/lib/colorpicker.d.ts

@@ -90,6 +90,7 @@ export interface ColorPickerEditorProps extends ColorPickerProps {
     label?: string;
     labelWidth?: number;
     cust_colors?: Color[];
+    displayValue?: false;
     change: EventCallback<EvChange>;
 }
 export declare class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPickerEventMap> {

package/lib/colorpicker.js

@@ -516,19 +516,30 @@ class ColorPickerEditor extends layout_1.HLayout {
                 flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
                 width: props.labelWidth >= 0 ? props.labelWidth : undefined,
             }) : null,
-            new label_1.Label({
-                cls: 'value',
+            new component_1.Component({
                 flex: 1,
-                text: color.toHex(),
-                style: {
-                    backgroundColor: color.toString(),
-                    color: tcolor
-                },
-                dom_events: {
-                    click: () => this._showPicker()
-                }
+                content: [
+                    new label_1.Label({
+                        cls: 'alpha @fit',
+                        text: ''
+                    }),
+                    new label_1.Label({
+                        cls: 'value @fit',
+                        text: props.displayValue === false ? '' : color.toHex(),
+                        style: {
+                            backgroundColor: color.toString(),
+                            color: tcolor
+                        },
+                        dom_events: {
+                            click: () => this._showPicker()
+                        }
+                    })
+                ],
             })
         ]);
+        if (props.displayValue === false) {
+            this.setStyleValue('background-image', "url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg=='");
+        }
         this._setTabIndex(props.tabIndex);
     }
     set value(color) {

package/lib/component.d.ts

@@ -44,6 +44,43 @@ export interface ICaptureInfo {
     handler: EventHandler<UIEvent>;
     iframes: NodeListOf<HTMLIFrameElement>;
 }
+/** @ignore properties without 'px' unit */
+export declare const _x4_unitless: {
+    animationIterationCount: number;
+    borderImageOutset: number;
+    borderImageSlice: number;
+    borderImageWidth: number;
+    boxFlex: number;
+    boxFlexGroup: number;
+    boxOrdinalGroup: number;
+    columnCount: number;
+    flex: number;
+    flexGrow: number;
+    flexPositive: number;
+    flexShrink: number;
+    flexNegative: number;
+    flexOrder: number;
+    gridRow: number;
+    gridColumn: number;
+    fontWeight: number;
+    lineClamp: number;
+    lineHeight: number;
+    opacity: number;
+    order: number;
+    orphans: number;
+    tabSize: number;
+    widows: number;
+    zIndex: number;
+    zoom: number;
+    fillOpacity: number;
+    floodOpacity: number;
+    stopOpacity: number;
+    strokeDasharray: number;
+    strokeDashoffset: number;
+    strokeMiterlimit: number;
+    strokeOpacity: number;
+    strokeWidth: number;
+};
 /**
  *
  */

package/lib/component.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Separator = exports.EvSize = exports.Space = exports.Flex = exports.flyWrap = exports.Component = exports.EvFocus = exports.EvDblClick = exports.html = exports.isHtmlString = exports.HtmlString = void 0;
+exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Separator = exports.EvSize = exports.Space = exports.Flex = exports.flyWrap = exports.Component = exports.EvFocus = exports.EvDblClick = exports._x4_unitless = exports.html = exports.isHtmlString = exports.HtmlString = void 0;
 /**
  * @todo
  *		create Container class
@@ -50,7 +50,7 @@ const _x4_el_store = Symbol();
 /** @ignore where Component is stored in dom */
 const _x4_el_sym = Symbol();
 /** @ignore properties without 'px' unit */
-const _x4_unitless = {
+exports._x4_unitless = {
     animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
     boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
     gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,
@@ -273,7 +273,7 @@ class Component extends base_component_1.BaseComponent {
             if (value === undefined) {
                 value = null;
             }
-            else if (!_x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
+            else if (!exports._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
                 value = value + 'px';
             }
             this.m_dom.style[name] = value;

package/lib/formatters.js

@@ -64,8 +64,9 @@ function money_formatter(input) {
         return '';
     }
     let val = (0, tools_1.roundTo)(typeof (input) == 'string' ? parseFloat(input) : input, 2);
-    if (val === -0.00)
+    if (Object.is(val, -0.00)) {
         val = 0.00;
+    }
     let res = moneyFmt.format(val);
     return res;
 }

package/lib/panel.d.ts

@@ -34,6 +34,7 @@ export interface PanelProps<E extends ContainerEventMap = ContainerEventMap> ext
     title: string;
     gadgets?: Component[];
     sens?: 'horizontal' | 'vertical';
+    bodyStyle?: any;
 }
 export declare class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMap = ContainerEventMap> extends VLayout<T, E> {
     private m_ui_title;

package/lib/panel.js

@@ -41,7 +41,7 @@ class Panel extends layout_1.VLayout {
         const sens = props?.sens == 'horizontal' ? '@hlayout' : '@vlayout';
         //todo: cannot be called twice do to content overload
         this.m_ui_title = new label_1.Label({ cls: 'title', text: this.m_props.title });
-        this.m_ui_body = new component_1.Component({ cls: 'body ' + sens, content: this.m_props.content });
+        this.m_ui_body = new component_1.Component({ cls: 'body ' + sens, content: this.m_props.content, style: props.bodyStyle });
     }
     /** @ignore */
     render() {

package/lib/svgcomponent.d.ts

@@ -33,6 +33,7 @@ import { Component, CProps } from './component';
 declare abstract class SVGItem {
     private m_tag;
     private m_attrs;
+    private m_style;
     constructor(tag: string);
     /**
      * render the item
@@ -61,6 +62,7 @@ declare abstract class SVGItem {
      * @returns this
      */
     attr(name: string, value: string): this;
+    style(name: string, value: string): this;
     /**
      * add a class
      * @param name class name to add
@@ -70,6 +72,10 @@ declare abstract class SVGItem {
      *
      */
     renderAttrs(): string;
+    /**
+     *
+     */
+    renderStyle(): string;
     renderContent(): string;
 }
 /**

package/lib/svgcomponent.js

@@ -30,6 +30,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SVGComponent = exports.SVGPathBuilder = void 0;
 const component_1 = require("./component");
+const tools_1 = require("./tools");
+const reNumber = /^-?\d+(\.\d+)?$/;
 // degrees to radian
 function d2r(d) {
     return d * Math.PI / 180.0;
@@ -61,16 +63,18 @@ function clean(a, ...b) {
 class SVGItem {
     m_tag;
     m_attrs;
+    m_style;
     constructor(tag) {
         this.m_tag = tag;
         this.m_attrs = new Map();
+        this.m_style = new Map();
     }
     /**
      * render the item
      * @returns
      */
     render() {
-        return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent()}</${this.m_tag}>`;
+        return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent()}</${this.m_tag}>`;
     }
     /**
      * change the stroke color
@@ -109,6 +113,16 @@ class SVGItem {
         this.m_attrs.set(name, value);
         return this;
     }
+    style(name, value) {
+        if (value === undefined) {
+            value = null;
+        }
+        else if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
+            value = value + 'px';
+        }
+        this.m_style.set(name, value);
+        return this;
+    }
     /**
      * add a class
      * @param name class name to add
@@ -122,12 +136,28 @@ class SVGItem {
      *
      */
     renderAttrs() {
+        if (!this.m_attrs.size) {
+            return "";
+        }
         let result = '';
         this.m_attrs.forEach((v, k) => {
             result += ` ${k} = "${v}"`;
         });
         return result;
     }
+    /**
+     *
+     */
+    renderStyle() {
+        if (!this.m_style.size) {
+            return "";
+        }
+        let result = 'style="';
+        this.m_style.forEach((v, k) => {
+            result += `${k}:${v};`;
+        });
+        return result + '"';
+    }
     renderContent() {
         return '';
     }

package/lib/x4.css

@@ -1042,6 +1042,8 @@ textarea::selection {
 .x-message-box .x-form .icon,
 .x-important .x-form .icon {
   font-size: 48px;
+  width: 48px;
+  height: 48px;
   color: var(--x4-error-color);
   margin-right: 8px;
 }
@@ -1433,6 +1435,10 @@ textarea::selection {
   height: 16px;
   border: 1px solid rgba(0, 0, 0, 0.4);
 }
+.x-color-picker-editor .alpha {
+  background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==');
+  padding: 4px;
+}
 .x-color-picker .sel {
   position: absolute;
   left: 10px;
@@ -1504,7 +1510,7 @@ textarea::selection {
   min-height: unset;
 }
 .x-color-picker .alpha {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==');
+  background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==');
 }
 .x-color-picker .alpha .marker {
   position: absolute;

package/package.json

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

package/src/colorpicker.ts

@@ -630,6 +630,7 @@ export interface ColorPickerEditorProps extends ColorPickerProps {
 	label?: string;
 	labelWidth?: number;
 	cust_colors?: Color[];
+	displayValue?: false,
 
 	change: EventCallback<EvChange>;
 }
@@ -662,20 +663,32 @@ export class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPick
 				flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
 				width: props.labelWidth >= 0 ? props.labelWidth : undefined,
 			}) : null,
-			new Label({
-				cls: 'value',
+			new Component( {
 				flex: 1,
-				text: color.toHex(),
-				style: {
-					backgroundColor: color.toString(),
-					color: tcolor
-				},
-				dom_events: {
-					click: () => this._showPicker()
-				}
-			})
+				content: [
+					new Label({
+						cls: 'alpha @fit',
+						text: ''
+					}),
+					new Label({
+						cls: 'value @fit',
+						text: props.displayValue===false ? '' : color.toHex(),
+						style: {
+							backgroundColor: color.toString(),
+							color: tcolor
+						},
+						dom_events: {
+							click: () => this._showPicker()
+						}
+					})
+				],
+			} )
 		]);
 
+		if( props.displayValue===false ) {
+			this.setStyleValue( 'background-image', "url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg=='" );
+		}
+
 		this._setTabIndex(props.tabIndex);
 	}
 

package/src/component.ts

@@ -67,7 +67,7 @@ const _x4_el_store = Symbol();
 const _x4_el_sym = Symbol();
 
 /** @ignore properties without 'px' unit */
-const _x4_unitless = {
+export const _x4_unitless = {
 	animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
 	boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
 	gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,

package/src/formatters.ts

@@ -74,7 +74,9 @@ export function money_formatter(input: any): string {
 	}
 
 	let val: number = roundTo(typeof (input) == 'string' ? parseFloat(input) : input, 2);
-	if (val === -0.00) val = 0.00;
+	if (Object.is(val, -0.00)) {
+		val = 0.00;
+	}
 
 	let res = moneyFmt.format(val);
 	return res;

package/src/panel.ts

@@ -41,6 +41,7 @@ export interface  PanelProps<E extends ContainerEventMap = ContainerEventMap> ex
 	title: string;
 	gadgets?: Component[];
 	sens?: 'horizontal' | 'vertical';	// vertical by default
+	bodyStyle?: any;
 }
 
 export class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMap = ContainerEventMap> extends VLayout<T,E> {
@@ -54,7 +55,7 @@ export class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMa
 
 		//todo: cannot be called twice do to content overload
 		this.m_ui_title = new Label({cls: 'title', text: this.m_props.title});
-		this.m_ui_body = new Component( { cls: 'body '+sens, content: this.m_props.content } );
+		this.m_ui_body = new Component( { cls: 'body '+sens, content: this.m_props.content, style: props.bodyStyle } );
 	}
 
 	/** @ignore */	

package/src/svgcomponent.ts

@@ -27,8 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { Component, CProps } from './component'
+import { Component, CProps, _x4_unitless } from './component'
+import { isNumber } from "./tools"
 
+const reNumber = /^-?\d+(\.\d+)?$/;
 
 // degrees to radian
 function d2r( d: number ): number {
@@ -69,10 +71,12 @@ function clean( a, ...b ) {
 abstract class SVGItem {
 	private m_tag: string
 	private m_attrs: Map<string,string>;
+	private m_style: Map<string,string>;
 
 	constructor( tag: string ) {
 		this.m_tag = tag;
 		this.m_attrs = new Map( );
+		this.m_style = new Map( );
 	}
 
 	/**
@@ -80,7 +84,7 @@ abstract class SVGItem {
 	 * @returns 
 	 */
 	render( ) : string {
-		return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent( )}</${this.m_tag}>`;
+		return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent( )}</${this.m_tag}>`;
 	}
 
 	/**
@@ -127,6 +131,19 @@ abstract class SVGItem {
 		return this;
 	}
 
+	style( name: string, value: string ) : this {
+		
+		if (value === undefined) {
+			value = null;
+		}
+		else if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
+			value = value + 'px';
+		}
+
+		this.m_style.set( name, value );
+		return this;
+	}
+
 	/**
 	 * add a class
 	 * @param name class name to add 
@@ -142,13 +159,36 @@ abstract class SVGItem {
 	 * 
 	 */
 	
-	renderAttrs( ) {
+	renderAttrs( ): string {
+		if( !this.m_attrs.size ) {
+			return "";
+		}
+
 		let result = '';
 		this.m_attrs.forEach( (v,k) => {
 			result += ` ${k} = "${v}"`
 		});
+
 		return result;
 	}
+
+	/**
+	 * 
+	 */
+	
+	 renderStyle( ): string {
+
+		if( !this.m_style.size ) {
+			return "";
+		}
+
+		let result = 'style="';
+		this.m_style.forEach( (v,k) => {
+			result += `${k}:${v};`
+		});
+
+		return result+'"';
+	}
 	
 	renderContent( ): string {
 		return '';

package/src/x4.less

@@ -1295,6 +1295,8 @@ textarea {
 		
 		.icon {
 			font-size: 48px;
+			width: 48px;
+			height: 48px;
 			color: var( --x4-error-color );
 			margin-right: 8px;
 		}
@@ -1793,6 +1795,13 @@ textarea {
 	}
 }
 
+.x-color-picker-editor {
+	.alpha {
+		background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
+		padding: 4px;
+	}
+}
+
 .x-color-picker {
 
 	.sel {
@@ -1879,7 +1888,7 @@ textarea {
 	}
 
 	.alpha {
-		background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==' );
+		background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
 
 		.marker {
 			position: absolute;