x4js 1.4.9 → 1.4.10

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/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/x4.css

@@ -57,6 +57,102 @@
   --x4-icon-rectangle-times: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"/></svg>';
   --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>';
+}
+/* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
+:root {
+  --black: #000000;
+  --white: #ffffff;
+  --gray-100: #f7fafc;
+  --gray-200: #edf2f7;
+  --gray-300: #e2e8f0;
+  --gray-400: #cbd5e0;
+  --gray-500: #a0aec0;
+  --gray-600: #718096;
+  --gray-700: #4a5568;
+  --gray-800: #2d3748;
+  --gray-900: #1a202c;
+  --red-100: #fff5f5;
+  --red-200: #fed7d7;
+  --red-300: #feb2b2;
+  --red-400: #fc8181;
+  --red-500: #f56565;
+  --red-600: #e53e3e;
+  --red-700: #c53030;
+  --red-800: #9b2c2c;
+  --red-900: #742a2a;
+  --orange-100: #fffaf0;
+  --orange-200: #feebc8;
+  --orange-300: #fbd38d;
+  --orange-400: #f6ad55;
+  --orange-500: #ed8936;
+  --orange-600: #dd6b20;
+  --orange-700: #c05621;
+  --orange-800: #9c4221;
+  --orange-900: #7b341e;
+  --yellow-100: #fffff0;
+  --yellow-200: #fefcbf;
+  --yellow-300: #faf089;
+  --yellow-400: #f6e05e;
+  --yellow-500: #ecc94b;
+  --yellow-600: #d69e2e;
+  --yellow-700: #b7791f;
+  --yellow-800: #975a16;
+  --yellow-900: #744210;
+  --green-100: #f0fff4;
+  --green-200: #c6f6d5;
+  --green-300: #9ae6b4;
+  --green-400: #68d391;
+  --green-500: #48bb78;
+  --green-600: #38a169;
+  --green-700: #2f855a;
+  --green-800: #276749;
+  --green-900: #22543d;
+  --teal-100: #e6fffa;
+  --teal-200: #b2f5ea;
+  --teal-300: #81e6d9;
+  --teal-400: #4fd1c5;
+  --teal-500: #38b2ac;
+  --teal-600: #319795;
+  --teal-700: #2c7a7b;
+  --teal-800: #285e61;
+  --teal-900: #234e52;
+  --blue-100: #ebf8ff;
+  --blue-200: #bee3f8;
+  --blue-300: #90cdf4;
+  --blue-400: #63b3ed;
+  --blue-500: #4299e1;
+  --blue-600: #3182ce;
+  --blue-700: #2b6cb0;
+  --blue-800: #2c5282;
+  --blue-900: #2a4365;
+  --indigo-100: #ebf4ff;
+  --indigo-200: #c3dafe;
+  --indigo-300: #a3bffa;
+  --indigo-400: #7f9cf5;
+  --indigo-500: #667eea;
+  --indigo-600: #5a67d8;
+  --indigo-700: #4c51bf;
+  --indigo-800: #434190;
+  --indigo-900: #3c366b;
+  --purple-100: #faf5ff;
+  --purple-200: #e9d8fd;
+  --purple-300: #d6bcfa;
+  --purple-400: #b794f4;
+  --purple-500: #9f7aea;
+  --purple-600: #805ad5;
+  --purple-700: #6b46c1;
+  --purple-800: #553c9a;
+  --purple-900: #44337a;
+  --pink-100: #fff5f7;
+  --pink-200: #fed7e2;
+  --pink-300: #fbb6ce;
+  --pink-400: #f687b3;
+  --pink-500: #ed64a6;
+  --pink-600: #d53f8c;
+  --pink-700: #b83280;
+  --pink-800: #97266d;
+  --pink-900: #702459;
 }
 .x4-root-element {
   padding: 0;
@@ -326,7 +422,7 @@ textarea::selection {
 .x-text-edit > .x-label,
 .x-combo-box > .x-label {
   padding: 4px;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--gray-900);
   margin-top: 1px;
   line-height: 1.3em;
   min-height: 2em;
@@ -344,8 +440,7 @@ textarea::selection {
   outline: none;
   border: none;
   padding: 4px;
-  color: rgba(0, 0, 0, 0.9);
-  background-color: rgba(255, 255, 255, 0.25);
+  color: var(--gray-900);
   border-bottom: 1px solid transparent;
   margin-top: 1px;
   line-height: 1.3em;
@@ -354,7 +449,7 @@ textarea::selection {
 .x-combo-box input::placeholder,
 .x-text-edit .x-fake-input::placeholder,
 .x-combo-box .x-fake-input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--gray-800);
 }
 .x-text-edit input::selection,
 .x-combo-box input::selection,
@@ -377,13 +472,17 @@ textarea::selection {
 .x-combo-box .x-button.gadget {
   background-color: transparent;
   font-size: var(--x4-font-size);
-  color: black;
+  color: var(--gray-900);
   border: none;
   margin: 0;
   padding: 0;
   height: 2em;
   margin-top: 1px;
 }
+.x-text-edit .x-button.gadget:hover,
+.x-combo-box .x-button.gadget:hover {
+  background-color: transparent;
+}
 .x-text-edit .x-button.gadget:focus,
 .x-combo-box .x-button.gadget:focus {
   color: var(--x4-focus-color);
@@ -429,6 +528,10 @@ textarea::selection {
   border-bottom: none;
   border-left: 4px solid var(--x4-error-color);
 }
+.x-text-edit .x-button.gadget {
+  margin-left: 1 px;
+  margin-right: 1 px;
+}
 .x-combo-box > .x-label {
   border-top: 1px solid transparent;
 }
@@ -486,20 +589,24 @@ textarea::selection {
 .x-text-edit:focus .label1 {
   color: black;
 }
+.x-radio-btn,
 .x-check-box {
   align-items: center;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--gray-900);
   outline: none;
   padding: 4px 0;
 }
+.x-radio-btn input,
 .x-check-box input {
   outline: none;
   margin: 4px;
   padding: 0;
 }
+.x-radio-btn .x-label,
 .x-check-box .x-label {
   padding: 4px;
 }
+.x-radio-btn:focus-within,
 .x-check-box:focus-within {
   text-decoration: underline;
   color: var(--x4-selection-color);
@@ -570,7 +677,7 @@ textarea::selection {
   align-items: center;
   outline: none;
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--gray-900);
   padding: 0px 8px;
   min-width: 120px;
   border: none;
@@ -578,17 +685,17 @@ textarea::selection {
 .x-menu-item .x-icon {
   width: 1em;
   margin-right: 8px;
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--gray-700);
 }
 .x-menu-item .x-label {
   padding: 4px;
 }
 .x-menu-item:hover {
   background-color: #c6d3d9;
-  color: black;
+  color: var(--gray-900);
 }
 .x-menu-item:hover .x-icon {
-  color: black;
+  color: var(--gray-900);
 }
 .x-menu-separator {
   margin-top: 4px;
@@ -702,7 +809,7 @@ textarea::selection {
   box-shadow: none;
 }
 .x-panel > .title > .x-button:focus {
-  color: black;
+  color: var(--gray-900);
 }
 .x-panel > .body {
   padding: 8px;
@@ -961,7 +1068,7 @@ textarea::selection {
   overflow: hidden;
   padding: 4px;
   white-space: nowrap;
-  color: black;
+  color: var(--gray-900);
   height: 2em;
 }
 .x-spreadsheet .x-footer,
@@ -1177,7 +1284,7 @@ textarea::selection {
   max-height: 400px;
   border: 1px solid #00000073;
   overflow: auto;
-  color: black;
+  color: var(--gray-900);
 }
 .x-popup-list-view .x-combo-popup .x-list-item {
   height: 2em;
@@ -1212,18 +1319,19 @@ textarea::selection {
 }
 .x-calendar .month-sel .x-button {
   height: auto;
-  color: black;
+  color: var(--gray-900);
 }
 .x-calendar .week {
   align-items: center;
+  border: 1px solid transparent;
 }
 .x-calendar .week:hover {
-  background-color: var(--x4-hover-color);
+  border-color: var(--x4-hover-color);
   border-radius: 4px;
 }
 .x-calendar .week .cell {
   height: 100%;
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--gray-900);
   text-align: center;
 }
 .x-calendar .week .cell span {
@@ -1253,7 +1361,7 @@ textarea::selection {
   color: white;
 }
 .x-calendar .header .cell {
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--gray-800);
   height: 1.5em;
 }
 .x-calendar .header:hover {
@@ -1527,7 +1635,7 @@ textarea::selection {
   width: 100%;
   color: transparent;
   background-color: transparent;
-  caret-color: black;
+  color: var(--gray-900);
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;

package/lib/x4_events.d.ts

@@ -248,7 +248,8 @@ export declare class EventSource<Q extends EventMap, T extends EventTypes = MapE
      * @param eventName - event name
      * @param callback - callback to remove (must be the same as in on )
      */
-    off(eventName: string, callback: EventCallback): void;
+    off<K extends keyof Q>(type: K, callback: (ev: Q[K]) => any): void;
+    _off(eventName: string, callback: EventCallback): void;
     /**
      * remove all listeners for an event
      * @param eventName - event name

package/lib/x4_events.js

@@ -236,11 +236,12 @@ class EventSource {
      * the system may overflow
      */
     once(type, callback) {
+        //@ts-ignore
         this._once(type, callback);
     }
     _once(eventName, callback) {
         const newCallback = (ev) => {
-            this.off(eventName, newCallback);
+            this._off(eventName, newCallback);
             callback(ev);
         };
         this._on(eventName, newCallback);
@@ -317,6 +318,7 @@ class EventSource {
      * @param capturing - if true, capture event before other registred event handlers
      */
     on(type, callback) {
+        //@ts-ignore
         return this._on(type, callback);
     }
     _on(eventName, callback, capturing = false) {
@@ -337,7 +339,7 @@ class EventSource {
             }
         }
         return {
-            dispose: () => { this.off(eventName, callback); }
+            dispose: () => { this._off(eventName, callback); }
         };
     }
     /**
@@ -345,7 +347,11 @@ class EventSource {
      * @param eventName - event name
      * @param callback - callback to remove (must be the same as in on )
      */
-    off(eventName, callback) {
+    off(type, callback) {
+        //@ts-ignore
+        return this._off(type, callback);
+    }
+    _off(eventName, callback) {
         if (!this.m_eventRegistry) {
             return;
         }

package/package.json

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

package/src/calendar.ts

@@ -167,17 +167,21 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 					cls += ' out';
 				}
 
-				days.push(new HLayout({
-					cls,
-					flex: 1,
-					content: new Component({
-						tag: 'span',
-						content: formatIntlDate(dte, 'd'),
-					}),
-					dom_events: {
-						click: () => this.select(dte.clone())
-					}
-				}));
+				const mkItem = ( dte ) => {
+					return new HLayout({
+						cls,
+						flex: 1,
+						content: new Component({
+							tag: 'span',
+							content: formatIntlDate(dte, 'd'),
+						}),
+						dom_events: {
+							click: () => this.select(dte)
+						}
+					})
+				}
+
+				days.push( mkItem( dte.clone() ) );
 
 				dte.setDate(dte.getDate() + 1);
 				first = false;

package/src/canvas.ts

@@ -87,7 +87,7 @@ function mkPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasP
 	return cp;
 }
 
-function smoothLine(points: any[], path: CanvasPath = null, move = true) {
+function smoothLine( this: CanvasRenderingContext2D, points: any[], path: CanvasPath = null, move = true) {
 	if (points.length < 2) {
 		return;
 	}
@@ -150,7 +150,7 @@ function smoothLine(points: any[], path: CanvasPath = null, move = true) {
 	path.lineTo(p1.x, p1.y);
 }
 
-function smoothLineEx(_points: any[], tension: number = 0.5, numOfSeg: number = 10, path: CanvasPath = null, move = true, close = false) {
+function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: number = 0.5, numOfSeg: number = 10, path: CanvasPath = null, move = true, close = false) {
 
 	let points = [];
 
@@ -261,7 +261,7 @@ function smoothLineEx(_points: any[], tension: number = 0.5, numOfSeg: number =
 	}
 }
 
-function line(x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number = 1) {
+function line(this: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number = 1) {
 	this.save();
 	this.beginPath();
 	this.moveTo(x1, y1);
@@ -272,7 +272,7 @@ function line(x1: number, y1: number, x2: number, y2: number, color: string, lin
 	this.restore();
 }
 
-function roundRect(x: number, y: number, width: number, height: number, radius: number) {
+function roundRect(this: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
 	//this.beginPath( );
 	this.moveTo(x + radius, y);
 	this.lineTo(x + width - radius, y);
@@ -286,7 +286,7 @@ function roundRect(x: number, y: number, width: number, height: number, radius:
 	this.closePath();
 }
 
-function calcTextSize(text: string, rounded = false): { width: number, height: number } {
+function calcTextSize( this: CanvasRenderingContext2D, text: string, rounded = false): { width: number, height: number } {
 
 	let fh = this.measureText(text);
 	let lh = fh.fontBoundingBoxAscent + fh.fontBoundingBoxDescent;
@@ -299,12 +299,12 @@ function calcTextSize(text: string, rounded = false): { width: number, height: n
 	}
 }
 
-function setFontSize(fs: number) {
+function setFontSize( this: CanvasRenderingContext2D, fs: number) {
 	let fsize = Math.round(fs) + 'px';
 	this.font = this.font.replace(/\d+px/, fsize);
 }
 
-function circle(x: number, y: number, radius: number) {
+function circle( this: CanvasRenderingContext2D, x: number, y: number, radius: number) {
 	this.moveTo(x + radius, y);
 	this.arc(x, y, radius, 0, Math.PI * 2);
 }

package/src/component.ts

@@ -1562,8 +1562,9 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		return result ? Component.getElement<T>(result) : null;
 	}
 
-	public queryAll(selector: string, cb?: (el: Component) => void) {
-		const elements = this.m_dom.querySelectorAll(selector);
+	public queryAll(selector: string, cb?: (el: Component) => void): HTMLElement[] {
+		let elements:HTMLElement[] = Array.from( this.m_dom.querySelectorAll<HTMLElement>(selector) );
+		
 		if( cb ) {
 			elements.forEach((el) => {
 				cb(flyWrap(el as HTMLElement));

package/src/datastore.ts

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

package/src/md5.ts

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

package/src/popup.ts

@@ -148,15 +148,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 					autofocus.focus( )
 				}
 				else {
-					let tabbable = this.queryItem('[tabindex]');
+					let tabbable = this.queryAll('[tabindex]');
 
 					if( tabbable ) {
-						let tab_indexes: HTMLElement[] = [].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( );
 						}
 					}
 				}
@@ -447,8 +445,7 @@ function _nextTab(root: HTMLElement, el: HTMLElement, prev: boolean) {
 
 	// 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: HTMLElement[] = [].map.call(tabbable, (e) => { return e; });
+	let tab_indexes:HTMLElement[] = Array.from( root.querySelectorAll<HTMLElement>('[tabindex]') );
 
 	// remove hidden elements
 	tab_indexes = tab_indexes.filter((el) => el.offsetParent !== null);

package/src/request.ts

@@ -108,7 +108,7 @@ export function ajaxRequest( cfg: RequestProps ) : Function {
 
 	if( cfg.headers ) {
 		for( let h in cfg.headers) {
-			this.xhr.setRequestHeader( h, cfg.headers[h] );
+			xhr.setRequestHeader( h, cfg.headers[h] );
 		}
 	}
 

package/src/textedit.ts

@@ -171,7 +171,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps> extends Component
 
 			button = new Button({
 				cls: 'gadget',
-				icon: 'cls(far fa-calendar-days)',	// todo: resolve that
+				icon: 'var( --x4-icon-calendar-days )',
 				tabIndex: false,
 				click: () => this._showDatePicker(button)
 			});
@@ -461,7 +461,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps> extends Component
 				this.value = props.validator(value);
 			}
 			catch (err) {
-				this.showError(err instanceof Error ? err.message : err);
+				this.showError(err instanceof Error ? err.message : err as string);
 				return false;
 			}
 		}