x4js 1.4.9 → 1.4.12

package/lib/calendar.js

@@ -126,17 +126,20 @@ class Calendar extends layout_1.VLayout {
                 if (dte.getMonth() != cmonth) {
                     cls += ' out';
                 }
-                days.push(new layout_1.HLayout({
-                    cls,
-                    flex: 1,
-                    content: new component_1.Component({
-                        tag: 'span',
-                        content: (0, tools_1.formatIntlDate)(dte, 'd'),
-                    }),
-                    dom_events: {
-                        click: () => this.select(dte.clone())
-                    }
-                }));
+                const mkItem = (dte) => {
+                    return new layout_1.HLayout({
+                        cls,
+                        flex: 1,
+                        content: new component_1.Component({
+                            tag: 'span',
+                            content: (0, tools_1.formatIntlDate)(dte, 'd'),
+                        }),
+                        dom_events: {
+                            click: () => this.select(dte)
+                        }
+                    });
+                };
+                days.push(mkItem(dte.clone()));
                 dte.setDate(dte.getDate() + 1);
                 first = false;
             }

package/lib/component.d.ts

@@ -398,7 +398,7 @@ export declare class Component<P extends CProps<BaseComponentEventMap> = CProps<
      * @returns child or null
      */
     queryItem<T extends Component>(selector: string): T;
-    queryAll(selector: string, cb?: (el: Component) => void): NodeListOf<Element>;
+    queryAll(selector: string, cb?: (el: Component) => void): HTMLElement[];
     /**
      * find a child with the given ID
      * @param id id (without '#')

package/lib/component.js

@@ -1177,7 +1177,7 @@ class Component extends base_component_1.BaseComponent {
         return result ? Component.getElement(result) : null;
     }
     queryAll(selector, cb) {
-        const elements = this.m_dom.querySelectorAll(selector);
+        let elements = Array.from(this.m_dom.querySelectorAll(selector));
         if (cb) {
             elements.forEach((el) => {
                 cb(flyWrap(el));

package/lib/datastore.js

@@ -332,7 +332,7 @@ class Record {
         }
         let fld = fields[idx];
         if (fld.calc !== undefined) {
-            return fld.calc.call(this);
+            return fld.calc(this);
         }
         return this[fld.name];
     }

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 )'
             })
         ]);

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/md5.d.ts

@@ -51,7 +51,7 @@ export declare class Md5 {
     appendAsciiStr(str: string): this;
     appendByteArray(input: Uint8Array): this;
     getState(): {
-        buffer: any;
+        buffer: string;
         buflen: number;
         length: number;
         state: number[];

package/lib/md5.js

@@ -343,6 +343,7 @@ class Md5 {
         const self = this;
         const s = self._state;
         return {
+            //@ts-ignore
             buffer: String.fromCharCode.apply(null, self._buffer8),
             buflen: self._bufferLength,
             length: self._dataLength,

package/lib/popup.js

@@ -110,13 +110,12 @@ class Popup extends component_1.Container {
                     autofocus.focus();
                 }
                 else {
-                    let tabbable = this.queryItem('[tabindex]');
+                    let tabbable = this.queryAll('[tabindex]');
                     if (tabbable) {
-                        let tab_indexes = [].map.call(tabbable, (e) => { return e; });
                         // remove hidden elements
-                        tab_indexes = tab_indexes.filter((el) => el.offsetParent !== null);
-                        if (tab_indexes.length) {
-                            tab_indexes[0].focus();
+                        tabbable = tabbable.filter((el) => el.offsetParent !== null);
+                        if (tabbable.length) {
+                            tabbable[0].focus();
                         }
                     }
                 }
@@ -343,8 +342,7 @@ function _nextTab(root, el, prev) {
     let comp = component_1.Component.getElement(el);
     // get a list of elements with tab index, this way we should abble to
     // cycle on them (not on browser address nor under dialog elements)
-    let tabbable = root.querySelectorAll('[tabindex]');
-    let tab_indexes = [].map.call(tabbable, (e) => { return e; });
+    let tab_indexes = Array.from(root.querySelectorAll('[tabindex]'));
     // remove hidden elements
     tab_indexes = tab_indexes.filter((el) => el.offsetParent !== null);
     if (!tab_indexes.length) {

package/lib/request.js

@@ -78,7 +78,7 @@ function ajaxRequest(cfg) {
     }
     if (cfg.headers) {
         for (let h in cfg.headers) {
-            this.xhr.setRequestHeader(h, cfg.headers[h]);
+            xhr.setRequestHeader(h, cfg.headers[h]);
         }
     }
     function progress(ev) {

package/lib/textedit.js

@@ -114,7 +114,7 @@ class TextEdit extends component_1.Component {
         else if (props.type == 'date') {
             button = new button_1.Button({
                 cls: 'gadget',
-                icon: 'cls(far fa-calendar-days)',
+                icon: 'var( --x4-icon-calendar-days )',
                 tabIndex: false,
                 click: () => this._showDatePicker(button)
             });

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' })
         ]);
     }