x4js 1.4.47 → 1.4.50

package/lib/autocomplete.d.ts

@@ -0,0 +1,58 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file autocomplete.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.
+**/
+import { TextEdit, TextEditProps } from './textedit';
+/**
+ *
+ */
+interface AutoCompleteProps extends TextEditProps {
+    enumValues: (filter: string) => string[];
+}
+/**
+ *
+ */
+export declare class AutoComplete extends TextEdit<AutoCompleteProps> {
+    private m_popup;
+    private m_popvis;
+    private m_needval;
+    private m_lockpop;
+    constructor(props: AutoCompleteProps);
+    _onKey(e: KeyboardEvent): void;
+    private _onChange;
+    componentDisposed(): void;
+    /**
+     * display the popup
+     */
+    showPopup(items: string[]): void;
+    protected _validate(value: string): boolean;
+    validate(): boolean;
+    private _checkFocus;
+    private _hidePopup;
+    private _onFocus;
+}
+export {};

package/lib/autocomplete.js

@@ -0,0 +1,159 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file autocomplete.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.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoComplete = void 0;
+const listview_1 = require("./listview");
+const textedit_1 = require("./textedit");
+/**
+ *
+ */
+class AutoComplete extends textedit_1.TextEdit {
+    m_popup;
+    m_popvis;
+    m_needval;
+    m_lockpop;
+    constructor(props) {
+        super(props);
+        this.setDomEvent("input", () => this._onChange());
+        this.setDomEvent("focusin", () => this._onFocus());
+        this.startTimer("focus-check", 100, true, () => this._checkFocus());
+        this.m_popvis = false;
+        this.m_needval = false;
+        this.m_lockpop = false;
+        this.setDomEvent("keydown", e => this._onKey(e));
+    }
+    _onKey(e) {
+        if (this.m_popvis) {
+            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+                this.m_lockpop = true;
+                this.m_popup.handleKey(e);
+                this.m_lockpop = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key == "Escape") {
+                this._hidePopup();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if (e.key == "ArrowDown") {
+            this._onChange();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    _onChange() {
+        const items = this.m_props.enumValues(this.value);
+        this.showPopup(items);
+    }
+    componentDisposed() {
+        if (this.m_popup) {
+            this._hidePopup();
+        }
+        super.componentDisposed();
+    }
+    /**
+     * display the popup
+     */
+    showPopup(items) {
+        let props = this.m_props;
+        if (props.readOnly || this.hasClass("@disable")) {
+            return;
+        }
+        // need creation ?
+        if (!this.m_popup) {
+            let cstyle = this.getComputedStyle();
+            let fontFamily = cstyle.value('fontFamily');
+            let fontSize = cstyle.value('fontSize');
+            // prepare the combo listview
+            this.m_popup = new listview_1.PopupListView({
+                cls: '@combo-popup',
+                attrs: {
+                    tabindex: 0
+                },
+                selectionChange: (e) => {
+                    this.value = e.selection.id;
+                    if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+                },
+                style: {
+                    fontFamily,
+                    fontSize
+                }
+            });
+        }
+        this.m_popup.items = items.map(c => ({ id: c, text: c }));
+        let r1 = this.m_ui_input.getBoundingRect();
+        this.m_popup.setStyle({
+            minWidth: r1.width,
+        });
+        this.m_popup.displayAt(r1.left, r1.bottom);
+        this.m_popvis = true;
+        //if( this.value!==undefined ) {
+        //	this.m_popup.selection = this.value;
+        //}
+    }
+    _validate(value) {
+        return true;
+    }
+    validate() {
+        return super._validate(this.value);
+    }
+    _checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus)) {
+            return;
+        }
+        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
+            return;
+        }
+        this._hidePopup();
+    }
+    _hidePopup() {
+        if (this.m_popvis) {
+            this.m_popup.close();
+            this.m_popvis = false;
+        }
+        if (this.m_needval) {
+            this.validate();
+            this.m_needval = false;
+        }
+    }
+    _onFocus() {
+        if (this.value.length == 0) {
+            this._onChange();
+        }
+        this.m_needval = true;
+    }
+}
+exports.AutoComplete = AutoComplete;

package/lib/base_component.d.ts

@@ -46,6 +46,7 @@ export interface BaseComponentEventMap extends EventMap {
  */
 export interface BaseComponentProps<T = BaseComponentEventMap> {
     events?: MapEvents<T>;
+    [key: string]: any;
 }
 /**
  * BaseComponent class

package/lib/button.js

@@ -41,7 +41,7 @@ const tools_1 = require("./tools");
 class BaseButton extends component_1.Component {
     constructor(props) {
         super(props);
-        this.setProp('tag', 'button');
+        this.setTag('button');
         this.setDomEvent('click', (e) => this._handleClick(e));
         this.setDomEvent('mousedown', () => { this._startAutoRep(true); });
         this.setDomEvent('mouseup', () => { this._startAutoRep(false); });

package/lib/checkbox.js

@@ -50,9 +50,9 @@ class CheckBox extends component_1.Component {
         // checkbox
         let labelWidth = props.labelWidth ?? -1;
         let uid = '__cb_' + this.uid;
+        this.setTag('label');
         this.addClass('@hlayout');
         this.addClass(props.align ?? 'left');
-        this.setProp('tag', 'label');
         this.setContent([
             new input_1.Input({
                 ref: 'input',

package/lib/component.d.ts

@@ -163,16 +163,28 @@ export declare class Component<P extends CProps<BaseComponentEventMap> = CProps<
      */
     appendChild(content: ComponentContent): void;
     /**
-     * get the Component value
-     * @param name name to get
+     *
      */
-    getProp(name: string): any;
+    setTag(tag: string, namespace?: string): void;
     /**
+     * get the Component value
+     * @param name name to get
+     * /
+
+    getProp(name: string): any {
+        return this.m_props[name];
+    }
+
+    / **
      * change a Component value
      * @param name name to set
      * @param value new value
-     */
-    setProp(name: string, value?: any): void;
+     * /
+
+    setProp(name: string, value?: any) {
+        (this.m_props as any)[name] = value;
+    }
+    */
     /**
      * get the Component data value
      * @param name name to get

package/lib/component.js

@@ -156,21 +156,34 @@ class Component extends base_component_1.BaseComponent {
             append(content);
         }
     }
+    /**
+     *
+     */
+    setTag(tag, namespace) {
+        this.m_props.tag = tag;
+        if (namespace) {
+            this.m_props.ns = namespace;
+        }
+    }
     /**
      * get the Component value
      * @param name name to get
-     */
-    getProp(name) {
+     * /
+
+    getProp(name: string): any {
         return this.m_props[name];
     }
-    /**
+
+    / **
      * change a Component value
      * @param name name to set
      * @param value new value
-     */
-    setProp(name, value) {
-        this.m_props[name] = value;
+     * /
+
+    setProp(name: string, value?: any) {
+        (this.m_props as any)[name] = value;
     }
+    */
     /**
      * get the Component data value
      * @param name name to get

package/lib/dom_events.d.ts

@@ -131,6 +131,8 @@ export interface IDOMEvents {
      * Fires when the object receives focus.
      * @param ev The event.
      */
+    focusin?: (ev: FocusEvent) => any;
+    focusout?: (ev: FocusEvent) => any;
     focus?: (ev: FocusEvent) => any;
     gotpointercapture?: (ev: PointerEvent) => any;
     input?: (ev: Event) => any;

package/lib/form.js

@@ -52,7 +52,7 @@ class Form extends layout_1.VLayout {
         let height = props.height;
         props.height = undefined;
         super(props);
-        this.setProp('tag', props.disableSuggestions ? 'section' : 'form');
+        this.setTag(props.disableSuggestions ? 'section' : 'form');
         this.mapPropEvents(props, 'btnClick');
         this.updateContent(content, props.buttons, height);
         this.m_dirty = false;

package/lib/gridview.js

@@ -830,11 +830,11 @@ class GridView extends layout_1.VLayout {
         this.m_empty_msg.text = text;
     }
     _renderCheck(rec) {
-        let cls = '';
+        let icon = '--x4-icon-square';
         if (this.m_marks.has(rec.getID())) {
-            cls = ' checked';
+            icon = '--x4-icon-square-check';
         }
-        return new component_1.Component({ cls: '@grid-checkbox' + cls });
+        return new icon_js_1.Icon({ icon: `var(${icon})` });
     }
     _toggleMark(rec) {
         let id = rec.getID();

package/lib/index.d.ts

@@ -27,6 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 export * from "./application";
+export * from "./autocomplete";
 export * from "./base_component";
 export * from "./button";
 export * from "./calendar";

package/lib/index.js

@@ -43,6 +43,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./application"), exports);
+__exportStar(require("./autocomplete"), exports);
 __exportStar(require("./base_component"), exports);
 //export * from "./base64"
 __exportStar(require("./button"), exports);

package/lib/input.d.ts

@@ -48,6 +48,7 @@ export interface InputProps<P extends InputEventMap = InputEventMap> extends CPr
     value_hook?: ValueHook;
     min?: number;
     max?: number;
+    autosel?: boolean;
 }
 /**
  * base class for elements implementing an input

package/lib/input.js

@@ -40,7 +40,7 @@ class Input extends component_1.Component {
     }
     /** @ignore */
     render(props) {
-        this.setProp('tag', 'input');
+        this.setTag('input');
         this._setTabIndex(props.tabIndex);
         this.setAttributes({
             value: props.value,
@@ -56,9 +56,15 @@ class Input extends component_1.Component {
             max: props.max,
             ...props.attrs
         });
+        this.m_props.autosel = props.autosel ?? true;
         if (props.uppercase) {
             this.setStyleValue('textTransform', 'uppercase');
         }
+        if (this.m_props.autosel) {
+            this.setDomEvent("focus", () => {
+                this.selectAll();
+            });
+        }
     }
     getType() {
         return this.m_props.type;

package/lib/label.js

@@ -54,7 +54,7 @@ class Label extends component_1.Component {
             this.setContent(text);
         }
         else {
-            this.setProp('tag', 'span');
+            this.setTag('span');
             this.addClass('@hlayout');
             this.setContent([
                 new icon_1.Icon({ icon: props.icon }),

package/lib/layout.js

@@ -108,7 +108,7 @@ class TableLayout extends component_1.Container {
     m_cells;
     constructor(props) {
         super(props);
-        this.setProp('tag', 'table');
+        this.setTag('table');
         this.m_cells = new Map();
     }
     _getCell(row, col, create = true) {

package/lib/link.js

@@ -47,8 +47,8 @@ class Link extends component_1.Component {
     render(props) {
         let text = props.text ?? '';
         let href = props.href ?? '#';
+        this.setTag('a');
         this.setAttribute('tabindex', 0);
-        this.setProp('tag', 'a');
         this.setAttribute('href', href);
         this.setAttribute('target', props.target);
         if (text) {

package/lib/menu.js

@@ -227,7 +227,7 @@ class MenuItem extends component_1.Component {
         if (props.cls) {
             this.addClass(props.cls);
         }
-        this.setProp('tag', 'a');
+        this.setTag('a');
         //@bug: do not kill focus on click 
         //	this.setAttribute( 'tabindex', '0' );
         this.setContent([

package/lib/radiobtn.js

@@ -52,8 +52,8 @@ class RadioBtn extends component_1.Component {
         let align = props.align ?? 'left';
         let value = props.value;
         let icon = props.icon;
+        this.setTag('label');
         this.addClass('@hlayout');
-        this.setProp('tag', 'label');
         this.addClass(align);
         this._setTabIndex(props.tabIndex);
         if (checked) {

package/lib/svgcomponent.js

@@ -416,8 +416,7 @@ exports.SVGPathBuilder = SVGPathBuilder;
 class SVGComponent extends component_1.Component {
     constructor(props) {
         super(props);
-        this.setProp('tag', 'svg');
-        this.setProp('ns', 'http://www.w3.org/2000/svg');
+        this.setTag('svg', 'http://www.w3.org/2000/svg');
         this.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         this.setAttributes({
             viewBox: props.viewBox,

package/lib/textarea.js

@@ -60,7 +60,7 @@ class TextArea extends component_1.Component {
             this.setAttribute('name', props.name);
         }
         if (props.autoGrow) {
-            this.setProp('autoGrow', true);
+            this.m_props.autoGrow = true;
             this.setAttribute('rows', this._calcHeight(props.text));
             this.setDomEvent('keydown', () => {
                 (0, tools_1.asap)(() => this._updateHeight());
@@ -70,8 +70,8 @@ class TextArea extends component_1.Component {
         this.setDomEvent('keydown', (e) => {
             e.stopPropagation();
         });
+        this.setTag('textarea');
         this.setDomEvent('input', () => this._change());
-        this.setProp('tag', 'textarea');
     }
     _change() {
         this.emit('change', (0, x4events_1.EvChange)(this.value));

package/lib/textedit.d.ts

@@ -46,6 +46,7 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
     pattern?: string;
     uppercase?: boolean;
     format?: string | 'native';
+    autosel?: boolean;
     gadgets?: Component[];
     validator?: ValidationFunction;
     change?: EventCallback<EvChange>;

package/lib/textedit.js

@@ -75,7 +75,7 @@ class TextEdit extends component_1.Component {
             flex: 1,
             dom_events: {
                 focus: () => this._focus(),
-                blur: () => this._blur(),
+                focusout: () => this._blur(),
                 input: () => this._change()
             },
             value: props.value,
@@ -91,6 +91,7 @@ class TextEdit extends component_1.Component {
             attrs: props.attrs,
             min: props.min,
             max: props.max,
+            autosel: props.autosel,
         };
         // date is handled manually with popupcalendar
         if (props.type == 'date') {

package/lib/version.d.ts

@@ -1 +1,29 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file version.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.
+**/
 export declare const x4js_version = "1.4";

package/lib/version.js

@@ -1,4 +1,32 @@
 "use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file version.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.
+**/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.x4js_version = void 0;
 exports.x4js_version = "1.4";

package/lib/x4.css

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 :root {
-  --x4-font: "Helvetica, Arial, Sans-Serif";
+  --x4-font: Helvetica, Arial, Sans-Serif;
   --x4-font-size: 13px;
   --x4-base-color: #266888;
   --x4-selection-color: #2458B3;
@@ -62,11 +62,13 @@
   --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-folder-opened: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><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>';
+  --x4-icon-square-check: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z"/></svg>';
+  --x4-icon-square: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  fill="currentColor"><path d="M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 64H64C46.33 64 32 78.33 32 96V416C32 433.7 46.33 448 64 448H384C401.7 448 416 433.7 416 416V96C416 78.33 401.7 64 384 64z"/></svg>';
 }
 /* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
 :root {

package/package.json

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

package/src/autocomplete.ts

@@ -128,6 +128,7 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 					this.value = (e.selection as ListViewItem).id
 					if( !this.m_lockpop ) {
 						this._hidePopup( );
+						this.focus( );
 					}
 				},
 				style: {
@@ -162,7 +163,7 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 
 	private _checkFocus( ) {
 		const focus = document.activeElement;
-		if( this.dom.contains(focus) ) {
+		if( this.dom && this.dom.contains(focus) ) {
 			return;
 		}
 

package/src/base_component.ts

@@ -53,6 +53,7 @@ export interface BaseComponentEventMap extends EventMap {
 
 export interface BaseComponentProps<T = BaseComponentEventMap> {
 	events?: MapEvents<T>;	// basic component event map in base interface, should specialised in derived interfaces
+	[key: string]: any; // added index signature to solve "Type 'X' has no properties with type 'Y'" 
 }
 
 /**

package/src/button.ts

@@ -73,7 +73,7 @@ export class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEve
 	constructor(props: P) {
 		super(props);
 
-		this.setProp('tag', 'button');
+		this.setTag( 'button');
 
 		this.setDomEvent('click', (e) => this._handleClick(e));
 		this.setDomEvent('mousedown', () => { this._startAutoRep(true) });

package/src/checkbox.ts

@@ -84,10 +84,10 @@ export class CheckBox extends Component<CheckBoxProps, CheckBoxEventMap> {
 		let labelWidth = props.labelWidth ?? -1;
 		let uid = '__cb_' + this.uid;
 
+		this.setTag( 'label');
 		this.addClass('@hlayout');
 		this.addClass(props.align ?? 'left');
-		this.setProp('tag', 'label');
-
+		
 		this.setContent([
 			new Input({
 				ref: 'input',

package/src/component.ts

@@ -275,24 +275,36 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		}
 	}
 
+	/**
+	 * 
+	 */
+
+	setTag( tag: string, namespace?: string ) {
+		this.m_props.tag = tag;
+		if( namespace ) {
+			this.m_props.ns = namespace;
+		}
+	}
+
 	/**
 	 * get the Component value
 	 * @param name name to get
-	 */
+	 * /
 
 	getProp(name: string): any {
 		return this.m_props[name];
 	}
 
-	/**
+	/ **
 	 * change a Component value
 	 * @param name name to set
 	 * @param value new value
-	 */
+	 * /
 
 	setProp(name: string, value?: any) {
-		this.m_props[name] = value;
+		(this.m_props as any)[name] = value;
 	}
+	*/
 
 	/**
 	 * get the Component data value

package/src/dom_events.ts

@@ -137,6 +137,8 @@ export interface IDOMEvents {
 	 * Fires when the object receives focus.
 	 * @param ev The event.
 	 */
+	focusin?: (ev: FocusEvent) => any;
+	focusout?: (ev: FocusEvent) => any;
 	focus?: (ev: FocusEvent) => any;
 	gotpointercapture?: (ev: PointerEvent) => any;
 	input?: (ev: Event) => any;

package/src/form.ts

@@ -78,7 +78,7 @@ export class Form<T extends FormProps = FormProps, E extends FormEventMap = Form
 
 		super(props);
 
-		this.setProp('tag', props.disableSuggestions ? 'section' : 'form');
+		this.setTag( props.disableSuggestions ? 'section' : 'form');
 		this.mapPropEvents(props, 'btnClick');
 		this.updateContent(content, props.buttons, height);
 

package/src/gridview.ts

@@ -1109,12 +1109,12 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 	}
 
 	private _renderCheck(rec: Record) {
-		let cls = '';
+		let icon = '--x4-icon-square';
 		if (this.m_marks.has(rec.getID())) {
-			cls = ' checked';
+			icon = '--x4-icon-square-check';
 		}
 
-		return new Component({ cls: '@grid-checkbox' + cls });
+		return new Icon({ icon: `var(${icon})` });
 	}
 
 	private _toggleMark(rec: Record) {

package/src/index.ts

@@ -28,6 +28,7 @@
 **/
 
 export * from "./application"
+export * from "./autocomplete"
 export * from "./base_component"
 //export * from "./base64"
 export * from "./button"

package/src/input.ts

@@ -56,6 +56,7 @@ export interface InputProps<P extends InputEventMap = InputEventMap> extends CPr
 	value_hook?: ValueHook;
 	min?: number;
 	max?: number;
+	autosel?: boolean;
 }
 
 
@@ -73,7 +74,7 @@ export class Input extends Component<InputProps,InputEventMap>
 	/** @ignore */	
 	render( props: InputProps ) {
 
-		this.setProp( 'tag', 'input' );
+		this.setTag( 'input' );
 		this._setTabIndex( props.tabIndex );
 
 		this.setAttributes( {
@@ -91,9 +92,17 @@ export class Input extends Component<InputProps,InputEventMap>
 			...props.attrs
 		});
 
+		this.m_props.autosel = props.autosel ?? true;
+		
 		if( props.uppercase ) {
 			this.setStyleValue( 'textTransform', 'uppercase' );
 		}
+
+		if( this.m_props.autosel ) {
+			this.setDomEvent( "focus", ( ) => {
+				this.selectAll( );
+			});
+		}
 	}
 
 	public getType( ) {

package/src/label.ts

@@ -76,7 +76,7 @@ export class Label extends Component<LabelProps>
 			this.setContent( text );
 		}
 		else {
-			this.setProp( 'tag', 'span' );
+			this.setTag( 'span' );
 			this.addClass( '@hlayout' );
 
 			this.setContent( [

package/src/layout.ts

@@ -163,7 +163,7 @@ export class TableLayout extends Container<TableLayoutProps> {
 	constructor(props: TableLayoutProps) {
 		super(props);
 
-		this.setProp('tag', 'table');
+		this.setTag( 'table');
 		this.m_cells = new Map<number, CellData>();
 	}
 

package/src/link.ts

@@ -69,8 +69,8 @@ export class Link extends Component<LinkProps, LinkEventMap>
 		let text = props.text ?? '';
 		let href = props.href ?? '#';
 
+		this.setTag( 'a');
 		this.setAttribute('tabindex', 0);
-		this.setProp('tag', 'a');
 		this.setAttribute('href', href);
 		this.setAttribute('target', props.target);
 

package/src/menu.ts

@@ -206,24 +206,24 @@ export class Menu extends Popup<MenuProps>
 		}
 	}
 
-	public displayAt(ev: UIEvent ): void;
-	public displayAt(x: number, y?: number, align?: string, offset?: { x, y } ): void;
-	public displayAt( ...args ) {
-		
+	public displayAt(ev: UIEvent): void;
+	public displayAt(x: number, y?: number, align?: string, offset?: { x, y }): void;
+	public displayAt(...args) {
+
 		if (!this.m_lock) {
 			Menu._discardAll();
 		}
 
 		let x, y, align, offset;
 
-		if( args.length==1 ) {
-			({x,y} = getMousePos( args[0], true ));
+		if (args.length == 1) {
+			({ x, y } = getMousePos(args[0], true));
 		}
 		else {
-			[x,y,align,offset] = args;
+			[x, y, align, offset] = args;
 		}
 
-		if( !align ) {
+		if (!align) {
 			align = 'top left';
 		}
 
@@ -247,7 +247,7 @@ export interface MenuItemProps extends CProps {
 	checked?: boolean;
 	cls?: string;
 	click?: EventCallback<EvClick>;	// shortcut to events: { click ... }
-	
+
 	action?: Action;
 }
 
@@ -259,20 +259,20 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 	private m_isOpen: boolean;
 	private m_action: Action;
 
-	constructor( action: Action );
-	constructor( text: string, click: EventCallback<EvClick> );
-	constructor( props: MenuItemProps);
-	constructor( a, b? ) {
+	constructor(action: Action);
+	constructor(text: string, click: EventCallback<EvClick>);
+	constructor(props: MenuItemProps);
+	constructor(a, b?) {
 
-		if( a instanceof Action ) {
-			super( {
-				click: ( ) => { a.fire(); }
+		if (a instanceof Action) {
+			super({
+				click: () => { a.fire(); }
 			});
 
 			this.m_action = a;
 		}
-		else if( isString(a) ) {
-			super( {
+		else if (isString(a)) {
+			super({
 				text: a,
 				click: b
 			});
@@ -281,7 +281,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 			super(a);
 		}
 
-		this.mapPropEvents( this.m_props, 'click');
+		this.mapPropEvents(this.m_props, 'click');
 
 		this.m_menu = null;
 		this.m_isOpen = false;
@@ -300,12 +300,12 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 			icon = props.checked ? 'var( --x4-icon-check )' : 0;
 		}
 
-		if( this.m_action ) {
-			if( !icon ) {
+		if (this.m_action) {
+			if (!icon) {
 				icon = this.m_action.props.icon;
 			}
 
-			if( text===undefined ) {
+			if (text === undefined) {
 				text = this.m_action.props.text;
 			}
 		}
@@ -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( { icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" } );
+			popIco = new Icon({ icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" });
 		}
 
 		if (!text && !icon) {
@@ -324,7 +324,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 			this.addClass(props.cls);
 		}
 
-		this.setProp('tag', 'a');
+		this.setTag('a');
 		//@bug: do not kill focus on click 
 		//	this.setAttribute( 'tabindex', '0' );
 

package/src/radiobtn.ts

@@ -87,9 +87,9 @@ export class RadioBtn extends Component<RadioBtnProps,RadioBtnEventMap> {
 		let value = props.value;
 		let icon = props.icon;
 		
+		this.setTag( 'label' );
 		this.addClass( '@hlayout' );
-		this.setProp( 'tag', 'label' );
-
+		
 		this.addClass( align );
 		this._setTabIndex( props.tabIndex );
 

package/src/svgcomponent.ts

@@ -520,8 +520,7 @@ export class SVGComponent<P extends SVGProps = SVGProps> extends Component<P> {
 	constructor( props: P ) {
 		super( props );
 
-		this.setProp('tag','svg');
-		this.setProp('ns','http://www.w3.org/2000/svg');
+		this.setTag('svg','http://www.w3.org/2000/svg');
 		this.setAttribute('xmlns','http://www.w3.org/2000/svg');
 
 		this.setAttributes( {

package/src/textarea.ts

@@ -89,7 +89,7 @@ export class TextArea extends Component<TextAreaProps, TextAreaEventMap> {
 		}
 
 		if (props.autoGrow) {
-			this.setProp('autoGrow', true);
+			this.m_props.autoGrow = true;
 			this.setAttribute('rows', this._calcHeight(props.text));
 			this.setDomEvent('keydown', () => {
 				asap( ()=>this._updateHeight());
@@ -101,8 +101,8 @@ export class TextArea extends Component<TextAreaProps, TextAreaEventMap> {
 			e.stopPropagation();
 		});
 
+		this.setTag( 'textarea');
 		this.setDomEvent('input', () => this._change());
-		this.setProp('tag', 'textarea');
 	}
 
 	private _change() {

package/src/textedit.ts

@@ -69,6 +69,8 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
 	pattern?: string;
 	uppercase?: boolean;
 	format?: string | 'native'; // default store format on type date. 
+	autosel?: boolean;	// select content on focus
+
 	// by default mysql format without time 'YYYY-MM-DD'
 	// use 'native' to work on real Date object (get/set value)
 
@@ -126,7 +128,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 			flex: 1,
 			dom_events: {
 				focus: ( ) => this._focus( ),
-				blur: ( ) => this._blur( ),
+				focusout: ( ) => this._blur( ),
 				input: ( ) => this._change( )
 			},
 			value: props.value,
@@ -142,6 +144,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 			attrs: props.attrs,
 			min: props.min,
 			max: props.max,
+			autosel: props.autosel,
 		};
 
 		// date is handled manually with popupcalendar

package/src/version.ts

@@ -1 +1,30 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file version.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.
+**/
+
 export const x4js_version = "1.4";

package/src/x4.less

@@ -30,7 +30,7 @@
 **/
 
 :root {
-	--x4-font: "Helvetica, Arial, Sans-Serif";
+	--x4-font: Helvetica, Arial, Sans-Serif;
 	--x4-font-size: 13px;
 
 	--x4-base-color: #266888;
@@ -77,12 +77,15 @@
 	--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-folder-opened: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><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>';
+
+	--x4-icon-square-check: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z"/></svg>';
+	--x4-icon-square: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  fill="currentColor"><path d="M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 64H64C46.33 64 32 78.33 32 96V416C32 433.7 46.33 448 64 448H384C401.7 448 416 433.7 416 416V96C416 78.33 401.7 64 384 64z"/></svg>';
 }
 
 @BLACK10:	rgba(0,0,0,0.1);