x4js 1.4.18 → 1.4.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/lib/application.d.ts +1 -1
  2. package/lib/application.js +4 -3
  3. package/lib/base_component.d.ts +1 -1
  4. package/lib/base_component.js +3 -3
  5. package/lib/button.d.ts +1 -1
  6. package/lib/button.js +3 -3
  7. package/lib/calendar.d.ts +1 -1
  8. package/lib/calendar.js +5 -4
  9. package/lib/canvas.d.ts +1 -1
  10. package/lib/canvas.js +2 -2
  11. package/lib/cardview.d.ts +1 -1
  12. package/lib/cardview.js +2 -2
  13. package/lib/checkbox.d.ts +1 -1
  14. package/lib/checkbox.js +2 -2
  15. package/lib/colorpicker.d.ts +1 -1
  16. package/lib/colorpicker.js +5 -5
  17. package/lib/combobox.d.ts +1 -1
  18. package/lib/combobox.js +3 -3
  19. package/lib/component.d.ts +1 -5
  20. package/lib/component.js +35 -39
  21. package/lib/datastore.d.ts +1 -1
  22. package/lib/datastore.js +5 -5
  23. package/lib/dialog.d.ts +1 -1
  24. package/lib/dialog.js +4 -3
  25. package/lib/drag_manager.js +30 -1
  26. package/lib/fileupload.js +2 -1
  27. package/lib/form.d.ts +1 -1
  28. package/lib/gridview.d.ts +1 -5
  29. package/lib/gridview.js +8 -7
  30. package/lib/i18n.d.ts +35 -33
  31. package/lib/i18n.js +180 -93
  32. package/lib/icon.d.ts +1 -1
  33. package/lib/icon.js +10 -13
  34. package/lib/image.js +4 -3
  35. package/lib/index.d.ts +1 -1
  36. package/lib/index.js +1 -1
  37. package/lib/input.js +1 -1
  38. package/lib/link.d.ts +1 -1
  39. package/lib/link.js +2 -2
  40. package/lib/listview.d.ts +1 -1
  41. package/lib/listview.js +10 -9
  42. package/lib/menu.d.ts +1 -1
  43. package/lib/menu.js +5 -4
  44. package/lib/popup.d.ts +1 -1
  45. package/lib/popup.js +13 -12
  46. package/lib/property_editor.d.ts +1 -1
  47. package/lib/property_editor.js +2 -2
  48. package/lib/radiobtn.d.ts +1 -1
  49. package/lib/radiobtn.js +4 -3
  50. package/lib/rating.d.ts +1 -1
  51. package/lib/rating.js +2 -2
  52. package/lib/router.d.ts +1 -1
  53. package/lib/router.js +5 -4
  54. package/lib/spreadsheet.d.ts +1 -1
  55. package/lib/spreadsheet.js +9 -8
  56. package/lib/styles.js +6 -5
  57. package/lib/svgcomponent.d.ts +1 -1
  58. package/lib/svgcomponent.js +4 -1
  59. package/lib/tabbar.d.ts +1 -1
  60. package/lib/tabbar.js +2 -2
  61. package/lib/textarea.d.ts +1 -1
  62. package/lib/textarea.js +2 -2
  63. package/lib/textedit.d.ts +1 -1
  64. package/lib/textedit.js +5 -4
  65. package/lib/tools.d.ts +1 -0
  66. package/lib/tools.js +15 -6
  67. package/lib/tooltips.js +6 -5
  68. package/lib/treeview.d.ts +1 -1
  69. package/lib/treeview.js +8 -8
  70. package/lib/x4dom.d.ts +21 -0
  71. package/lib/x4dom.js +7 -0
  72. package/lib/x4events.d.ts +266 -0
  73. package/lib/x4events.js +389 -0
  74. package/package.json +4 -3
  75. package/src/application.ts +5 -4
  76. package/src/base_component.ts +1 -1
  77. package/src/button.ts +1 -1
  78. package/src/calendar.ts +5 -3
  79. package/src/canvas.ts +1 -1
  80. package/src/cardview.ts +1 -1
  81. package/src/checkbox.ts +1 -1
  82. package/src/colorpicker.ts +1 -1
  83. package/src/combobox.ts +1 -1
  84. package/src/component.ts +34 -39
  85. package/src/datastore.ts +1 -1
  86. package/src/dialog.ts +4 -2
  87. package/src/drag_manager.ts +4 -1
  88. package/src/fileupload.ts +2 -1
  89. package/src/form.ts +1 -1
  90. package/src/gridview.ts +4 -3
  91. package/src/hosts/electron.ts +4 -1
  92. package/src/i18n.ts +234 -97
  93. package/src/icon.ts +9 -12
  94. package/src/image.ts +5 -3
  95. package/src/index.ts +1 -1
  96. package/src/input.ts +1 -1
  97. package/src/layout.ts +1 -1
  98. package/src/link.ts +1 -1
  99. package/src/listview.ts +6 -4
  100. package/src/menu.ts +5 -3
  101. package/src/popup.ts +14 -12
  102. package/src/property_editor.ts +1 -1
  103. package/src/radiobtn.ts +4 -2
  104. package/src/rating.ts +1 -1
  105. package/src/router.ts +4 -2
  106. package/src/smartedit.ts +3 -2
  107. package/src/spreadsheet.ts +8 -6
  108. package/src/styles.ts +7 -5
  109. package/src/svgcomponent.ts +4 -1
  110. package/src/tabbar.ts +1 -1
  111. package/src/textarea.ts +1 -1
  112. package/src/textedit.ts +4 -2
  113. package/src/tools.ts +15 -5
  114. package/src/tooltips.ts +7 -5
  115. package/src/treeview.ts +1 -1
  116. package/src/x4dom.ts +57 -0
  117. package/src/{x4_events.ts → x4events.ts} +1 -1
  118. package/tsconfig.json +5 -1
@@ -26,7 +26,7 @@
26
26
  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
- import { EvMessage } from './x4_events';
29
+ import { EvMessage } from './x4events';
30
30
  import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
31
31
  import { Component } from './component';
32
32
  import { Settings } from './settings';
@@ -29,6 +29,7 @@
29
29
  **/
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.Application = void 0;
32
+ const x4dom_1 = require("./x4dom");
32
33
  const base_component_1 = require("./base_component");
33
34
  const component_1 = require("./component");
34
35
  const settings_1 = require("./settings");
@@ -128,7 +129,7 @@ class Application extends base_component_1.BaseComponent {
128
129
  this.m_mainView = root;
129
130
  this.mainView.addClass('x4-root-element');
130
131
  (0, tools_1.deferCall)(() => {
131
- const dest = this.m_props.renderTo ?? document.body;
132
+ const dest = this.m_props.renderTo ?? x4dom_1.x4document.body;
132
133
  while (dest.firstChild) {
133
134
  dest.removeChild(dest.firstChild);
134
135
  }
@@ -139,7 +140,7 @@ class Application extends base_component_1.BaseComponent {
139
140
  return this.m_mainView;
140
141
  }
141
142
  setTitle(title) {
142
- document.title = this.m_app_name + ' > ' + title;
143
+ x4dom_1.x4document.title = this.m_app_name + ' > ' + title;
143
144
  }
144
145
  disableZoomWheel() {
145
146
  window.addEventListener('wheel', function (ev) {
@@ -152,7 +153,7 @@ class Application extends base_component_1.BaseComponent {
152
153
  enterModal(enter) {
153
154
  }
154
155
  enableTouchDblClick() {
155
- document.addEventListener('touchstart', (ev) => {
156
+ x4dom_1.x4document.addEventListener('touchstart', (ev) => {
156
157
  let now = Date.now();
157
158
  if ((now - this.m_touch_time) > 700) {
158
159
  this.m_touch_count = 1;
@@ -27,7 +27,7 @@
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  *
29
29
  **/
30
- import { EventMap, MapEvents, EventSource, EvTimer } from './x4_events';
30
+ import { EventMap, MapEvents, EventSource, EvTimer } from './x4events';
31
31
  /**
32
32
  * Timer Callback
33
33
  * @see EvTimer, startTimer, stopTimer
@@ -30,11 +30,11 @@
30
30
  **/
31
31
  Object.defineProperty(exports, "__esModule", { value: true });
32
32
  exports.BaseComponent = void 0;
33
- const x4_events_1 = require("./x4_events");
33
+ const x4events_1 = require("./x4events");
34
34
  /**
35
35
  * BaseComponent class
36
36
  */
37
- class BaseComponent extends x4_events_1.EventSource {
37
+ class BaseComponent extends x4events_1.EventSource {
38
38
  m_props;
39
39
  #m_timers;
40
40
  constructor(props) {
@@ -64,7 +64,7 @@ class BaseComponent extends x4_events_1.EventSource {
64
64
  callback(name, tm);
65
65
  }
66
66
  else {
67
- this.emit('timer', (0, x4_events_1.EvTimer)(name, tm));
67
+ this.emit('timer', (0, x4events_1.EvTimer)(name, tm));
68
68
  }
69
69
  }, timeout);
70
70
  this.#m_timers.set(name, () => { (repeat ? clearInterval : clearTimeout)(id); });
package/lib/button.d.ts CHANGED
@@ -27,7 +27,7 @@
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
29
  import { Component, CProps, CEventMap, HtmlString } from './component';
30
- import { EventCallback, EvClick, EvChange } from './x4_events';
30
+ import { EventCallback, EvClick, EvChange } from './x4events';
31
31
  import { IconID } from './icon';
32
32
  import { MenuItem, MenuOrSep } from './menu';
33
33
  /**
package/lib/button.js CHANGED
@@ -30,7 +30,7 @@
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.ToggleButton = exports.Button = exports.BaseButton = void 0;
32
32
  const component_1 = require("./component");
33
- const x4_events_1 = require("./x4_events");
33
+ const x4events_1 = require("./x4events");
34
34
  const icon_1 = require("./icon");
35
35
  const label_1 = require("./label");
36
36
  const menu_1 = require("./menu");
@@ -114,7 +114,7 @@ class BaseButton extends component_1.Component {
114
114
  menu.displayAt(rc.left, rc.bottom, 'tl');
115
115
  }
116
116
  else {
117
- this.emit('click', (0, x4_events_1.EvClick)());
117
+ this.emit('click', (0, x4events_1.EvClick)());
118
118
  }
119
119
  }
120
120
  /**
@@ -229,7 +229,7 @@ class ToggleButton extends BaseButton {
229
229
  super._sendClick();
230
230
  this.m_props.checked = !this.m_props.checked;
231
231
  this.setClass('checked', this.m_props.checked);
232
- this.emit('change', (0, x4_events_1.EvChange)(this.m_props.checked));
232
+ this.emit('change', (0, x4events_1.EvChange)(this.m_props.checked));
233
233
  this._updateIcon();
234
234
  }
235
235
  _updateIcon() {
package/lib/calendar.d.ts CHANGED
@@ -28,7 +28,7 @@
28
28
  **/
29
29
  import { Popup } from './popup';
30
30
  import { CProps, ContainerEventMap } from './component';
31
- import { EvChange, EventCallback } from './x4_events';
31
+ import { EvChange, EventCallback } from './x4events';
32
32
  import { VLayout } from './layout';
33
33
  interface CalendarEventMap extends ContainerEventMap {
34
34
  change?: EvChange;
package/lib/calendar.js CHANGED
@@ -29,10 +29,11 @@
29
29
  **/
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.PopupCalendar = exports.Calendar = void 0;
32
+ const x4dom_1 = require("./x4dom");
32
33
  const button_1 = require("./button");
33
34
  const popup_1 = require("./popup");
34
35
  const component_1 = require("./component");
35
- const x4_events_1 = require("./x4_events");
36
+ const x4events_1 = require("./x4events");
36
37
  const i18n_1 = require("./i18n");
37
38
  const label_1 = require("./label");
38
39
  const layout_1 = require("./layout");
@@ -157,7 +158,7 @@ class Calendar extends layout_1.VLayout {
157
158
  */
158
159
  select(date) {
159
160
  this.m_date = date;
160
- this.emit('change', (0, x4_events_1.EvChange)(date));
161
+ this.emit('change', (0, x4events_1.EvChange)(date));
161
162
  this.update();
162
163
  }
163
164
  /**
@@ -236,12 +237,12 @@ class PopupCalendar extends popup_1.Popup {
236
237
  };
237
238
  /** @ignore */
238
239
  show(modal) {
239
- document.addEventListener('mousedown', this._handleClick);
240
+ x4dom_1.x4document.addEventListener('mousedown', this._handleClick);
240
241
  super.show(modal);
241
242
  }
242
243
  /** @ignore */
243
244
  close() {
244
- document.removeEventListener('mousedown', this._handleClick);
245
+ x4dom_1.x4document.removeEventListener('mousedown', this._handleClick);
245
246
  super.close();
246
247
  }
247
248
  }
package/lib/canvas.d.ts CHANGED
@@ -27,7 +27,7 @@
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
29
  import { Component, CProps, CEventMap } from './component';
30
- import { BasicEvent, EventCallback } from './x4_events';
30
+ import { BasicEvent, EventCallback } from './x4events';
31
31
  interface EvPaint extends BasicEvent {
32
32
  ctx: CanvasPainter;
33
33
  }
package/lib/canvas.js CHANGED
@@ -30,9 +30,9 @@
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.Canvas = void 0;
32
32
  const component_1 = require("./component");
33
- const x4_events_1 = require("./x4_events");
33
+ const x4events_1 = require("./x4events");
34
34
  function EvPaint(ctx) {
35
- return (0, x4_events_1.BasicEvent)({ ctx });
35
+ return (0, x4events_1.BasicEvent)({ ctx });
36
36
  }
37
37
  function mkPainter(c2d, w, h) {
38
38
  let cp = c2d;
package/lib/cardview.d.ts CHANGED
@@ -27,7 +27,7 @@
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
29
  import { Component, CProps, CEventMap } from './component';
30
- import { EvChange } from './x4_events';
30
+ import { EvChange } from './x4events';
31
31
  import { IconID } from './icon';
32
32
  export declare type PageOrCallback = Component | (() => Component);
33
33
  export interface ICardViewItem {
package/lib/cardview.js CHANGED
@@ -30,7 +30,7 @@
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.CardView = void 0;
32
32
  const component_1 = require("./component");
33
- const x4_events_1 = require("./x4_events");
33
+ const x4events_1 = require("./x4events");
34
34
  const tools_1 = require("./tools");
35
35
  /**
36
36
  * Standard CardView class
@@ -100,7 +100,7 @@ class CardView extends component_1.Component {
100
100
  this._preparePage(page);
101
101
  }
102
102
  }
103
- this.emit('change', (0, x4_events_1.EvChange)(this.m_cpage.name));
103
+ this.emit('change', (0, x4events_1.EvChange)(this.m_cpage.name));
104
104
  }
105
105
  }
106
106
  /**
package/lib/checkbox.d.ts CHANGED
@@ -27,7 +27,7 @@
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
29
  import { CEventMap, Component, CProps } from './component';
30
- import { EvChange, EventCallback } from './x4_events';
30
+ import { EvChange, EventCallback } from './x4events';
31
31
  import { HtmlString } from './tools';
32
32
  interface CheckBoxEventMap extends CEventMap {
33
33
  change?: EvChange;
package/lib/checkbox.js CHANGED
@@ -30,7 +30,7 @@
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.CheckBox = void 0;
32
32
  const component_1 = require("./component");
33
- const x4_events_1 = require("./x4_events");
33
+ const x4events_1 = require("./x4events");
34
34
  const input_1 = require("./input");
35
35
  const label_1 = require("./label");
36
36
  /**
@@ -86,7 +86,7 @@ class CheckBox extends component_1.Component {
86
86
  * check state changed
87
87
  */
88
88
  _change() {
89
- this.emit('change', (0, x4_events_1.EvChange)(this.check));
89
+ this.emit('change', (0, x4events_1.EvChange)(this.check));
90
90
  }
91
91
  /**
92
92
  * focus gained/loosed
@@ -31,7 +31,7 @@
31
31
  */
32
32
  import { Container, ContainerProps, ContainerEventMap } from './component';
33
33
  import { Dialog, DialogBoxEventMap, DialogProps } from './dialog';
34
- import { EvChange, EventCallback } from './x4_events';
34
+ import { EvChange, EventCallback } from './x4events';
35
35
  import { HLayout } from './layout';
36
36
  import { Color } from './color';
37
37
  interface ColorPickerEventMap extends ContainerEventMap {
@@ -35,7 +35,7 @@ exports.ColorPickerEditor = exports.ColorPickerBox = exports.ColorPicker = void
35
35
  const component_1 = require("./component");
36
36
  const checkbox_1 = require("./checkbox");
37
37
  const dialog_1 = require("./dialog");
38
- const x4_events_1 = require("./x4_events");
38
+ const x4events_1 = require("./x4events");
39
39
  const layout_1 = require("./layout");
40
40
  const label_1 = require("./label");
41
41
  const color_1 = require("./color");
@@ -406,7 +406,7 @@ class ColorPicker extends component_1.Container {
406
406
  this._change();
407
407
  }
408
408
  _change() {
409
- this.emit('change', (0, x4_events_1.EvChange)(this.m_baseColor));
409
+ this.emit('change', (0, x4events_1.EvChange)(this.m_baseColor));
410
410
  }
411
411
  }
412
412
  exports.ColorPicker = ColorPicker;
@@ -435,7 +435,7 @@ class ColorPickerBox extends dialog_1.Dialog {
435
435
  ], ['ok', 'cancel']);
436
436
  this.on('btnClick', (ev) => {
437
437
  if (ev.button == 'ok') {
438
- this.emit('change', (0, x4_events_1.EvChange)(this.m_picker.color));
438
+ this.emit('change', (0, x4events_1.EvChange)(this.m_picker.color));
439
439
  }
440
440
  });
441
441
  }
@@ -459,7 +459,7 @@ class ColorPickerBox extends dialog_1.Dialog {
459
459
  click: () => {
460
460
  if (clr) {
461
461
  this.m_picker.color = clr;
462
- this.emit('change', (0, x4_events_1.EvChange)(clr));
462
+ this.emit('change', (0, x4events_1.EvChange)(clr));
463
463
  this.close();
464
464
  }
465
465
  }
@@ -558,7 +558,7 @@ class ColorPickerEditor extends layout_1.HLayout {
558
558
  dlg.displayAt(rc.left, rc.bottom, 'tl');
559
559
  }
560
560
  _change() {
561
- this.emit('change', (0, x4_events_1.EvChange)(this.m_props.color));
561
+ this.emit('change', (0, x4events_1.EvChange)(this.m_props.color));
562
562
  }
563
563
  _isTransp(color) {
564
564
  return !color.alpha();
package/lib/combobox.d.ts CHANGED
@@ -30,7 +30,7 @@
30
30
  * TODO: replace custom combo list by listview or gridview
31
31
  */
32
32
  import { Component, CProps, ContainerEventMap } from './component';
33
- import { EvChange, EvSelectionChange, EventCallback } from './x4_events';
33
+ import { EvChange, EvSelectionChange, EventCallback } from './x4events';
34
34
  import { Input } from './input';
35
35
  import { HLayout } from './layout';
36
36
  import { ListViewItem, PopulateItems, EvCancel } from './listview';
package/lib/combobox.js CHANGED
@@ -33,7 +33,7 @@ exports.ComboBox = void 0;
33
33
  * TODO: replace custom combo list by listview or gridview
34
34
  */
35
35
  const component_1 = require("./component");
36
- const x4_events_1 = require("./x4_events");
36
+ const x4events_1 = require("./x4events");
37
37
  const input_1 = require("./input");
38
38
  const label_1 = require("./label");
39
39
  const button_1 = require("./button");
@@ -174,8 +174,8 @@ class ComboBox extends layout_1.HLayout {
174
174
  id: item.id,
175
175
  text: item.text
176
176
  };
177
- this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(item));
178
- this.emit('change', (0, x4_events_1.EvChange)(item.id));
177
+ this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(item));
178
+ this.emit('change', (0, x4events_1.EvChange)(item.id));
179
179
  this.m_ui_input.focus();
180
180
  this.m_popup.hide();
181
181
  }
@@ -32,7 +32,7 @@
32
32
  */
33
33
  import { Rect, Size, HtmlString, Constructor } from './tools';
34
34
  import { Stylesheet, ComputedStyle } from './styles';
35
- import { BasicEvent, EventCallback } from './x4_events';
35
+ import { BasicEvent, EventCallback } from './x4events';
36
36
  import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
37
37
  import { IDOMEvents, X4ElementEventMap } from './dom_events';
38
38
  export { HtmlString, isHtmlString, html } from './tools';
@@ -274,10 +274,6 @@ export declare class Component<P extends CProps<BaseComponentEventMap> = CProps<
274
274
  * this is usefull for component recycling & reusing
275
275
  */
276
276
  clearClasses(): string;
277
- /**
278
- * @deprecated
279
- */
280
- private Build;
281
277
  _build(): HTMLElement;
282
278
  render(props: P): void;
283
279
  _createDOM(): HTMLElement;
package/lib/component.js CHANGED
@@ -34,8 +34,9 @@ exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Sep
34
34
  * create Container class
35
35
  */
36
36
  const tools_1 = require("./tools");
37
+ const x4dom_1 = require("./x4dom");
37
38
  const styles_1 = require("./styles");
38
- const x4_events_1 = require("./x4_events");
39
+ const x4events_1 = require("./x4events");
39
40
  const base_component_1 = require("./base_component");
40
41
  var tools_2 = require("./tools");
41
42
  Object.defineProperty(exports, "HtmlString", { enumerable: true, get: function () { return tools_2.HtmlString; } });
@@ -71,11 +72,11 @@ const passiveEvents = {
71
72
  /** ignore */
72
73
  const reNumber = /^-?\d+(\.\d+)?$/;
73
74
  function EvDblClick(context = null) {
74
- return (0, x4_events_1.BasicEvent)({ context });
75
+ return (0, x4events_1.BasicEvent)({ context });
75
76
  }
76
77
  exports.EvDblClick = EvDblClick;
77
78
  function EvFocus(focus = true, context = null) {
78
- return (0, x4_events_1.BasicEvent)({ focus, context });
79
+ return (0, x4events_1.BasicEvent)({ focus, context });
79
80
  }
80
81
  exports.EvFocus = EvFocus;
81
82
  /**
@@ -527,12 +528,6 @@ class Component extends base_component_1.BaseComponent {
527
528
  return this.m_dom.classList.value = '';
528
529
  }
529
530
  }
530
- ///@deprecated
531
- //private build(): void {}
532
- /**
533
- * @deprecated
534
- */
535
- Build() { }
536
531
  _build() {
537
532
  if (this.m_dom) {
538
533
  return this.m_dom;
@@ -592,10 +587,10 @@ class Component extends base_component_1.BaseComponent {
592
587
  // create self
593
588
  let vdom = this.m_iprops;
594
589
  if (props.ns) {
595
- this.m_dom = document.createElementNS(props.ns, props.tag ?? 'div');
590
+ this.m_dom = x4dom_1.x4document.createElementNS(props.ns, props.tag ?? 'div');
596
591
  }
597
592
  else {
598
- this.m_dom = document.createElement(props.tag ?? 'div');
593
+ this.m_dom = x4dom_1.x4document.createElement((props.tag ?? 'div'));
599
594
  }
600
595
  this.m_dom[_x4_el_sym] = this;
601
596
  //let me = Object.getPrototypeOf(this);
@@ -660,7 +655,7 @@ class Component extends base_component_1.BaseComponent {
660
655
  // wait for dom insertion inside document.body
661
656
  if (!Component.__createObserver) {
662
657
  Component.__createObserver = new MutationObserver(Component._observeCreation);
663
- Component.__createObserver.observe(document.body, { childList: true, subtree: true });
658
+ Component.__createObserver.observe(x4dom_1.x4document.body, { childList: true, subtree: true });
664
659
  }
665
660
  return this.m_dom;
666
661
  }
@@ -887,10 +882,10 @@ class Component extends base_component_1.BaseComponent {
887
882
  else if (!Component.__privateEvents[name]) {
888
883
  Component.__privateEvents[name] = true; // todo count it
889
884
  if (passiveEvents[name]) {
890
- document.addEventListener(name, Component._dispatchEvent, { passive: false, capture: true });
885
+ x4dom_1.x4document.addEventListener(name, Component._dispatchEvent, { passive: false, capture: true });
891
886
  }
892
887
  else {
893
- document.addEventListener(name, Component._dispatchEvent, true);
888
+ x4dom_1.x4document.addEventListener(name, Component._dispatchEvent, true);
894
889
  }
895
890
  }
896
891
  if (name === 'sizechange') {
@@ -1090,30 +1085,30 @@ class Component extends base_component_1.BaseComponent {
1090
1085
  debugger;
1091
1086
  }
1092
1087
  // todo: review that
1093
- let iframes = document.querySelectorAll("iframe");
1088
+ let iframes = x4dom_1.x4document.querySelectorAll("iframe");
1094
1089
  iframes.forEach(f => {
1095
1090
  flyWrap(f).setStyleValue('pointer-events', 'none');
1096
1091
  });
1097
- let overs = document.querySelectorAll(":hover");
1092
+ let overs = x4dom_1.x4document.querySelectorAll(":hover");
1098
1093
  let cursor = null;
1099
1094
  if (overs.length) {
1100
1095
  let elementOver = overs[overs.length - 1];
1101
1096
  let style = window.getComputedStyle(elementOver);
1102
1097
  cursor = style.cursor;
1103
1098
  }
1104
- Component.__capture_mask = document.createElement('div');
1099
+ Component.__capture_mask = x4dom_1.x4document.createElement('div');
1105
1100
  let mask = flyWrap(Component.__capture_mask);
1106
1101
  mask.addClass('@capture-mask');
1107
1102
  if (cursor) {
1108
1103
  mask.setStyleValue('cursor', cursor);
1109
1104
  }
1110
- document.body.appendChild(mask.dom);
1111
- document.addEventListener('mousedown', Component.dispatchCaptures);
1112
- document.addEventListener('mousemove', Component.dispatchCaptures);
1113
- document.addEventListener('mouseup', Component.dispatchCaptures);
1114
- document.addEventListener('touchstart', Component.dispatchCaptures);
1115
- document.addEventListener('touchmove', Component.dispatchCaptures);
1116
- document.addEventListener('touchend', Component.dispatchCaptures);
1105
+ x4dom_1.x4document.body.appendChild(mask.dom);
1106
+ x4dom_1.x4document.addEventListener('mousedown', Component.dispatchCaptures);
1107
+ x4dom_1.x4document.addEventListener('mousemove', Component.dispatchCaptures);
1108
+ x4dom_1.x4document.addEventListener('mouseup', Component.dispatchCaptures);
1109
+ x4dom_1.x4document.addEventListener('touchstart', Component.dispatchCaptures);
1110
+ x4dom_1.x4document.addEventListener('touchmove', Component.dispatchCaptures);
1111
+ x4dom_1.x4document.addEventListener('touchend', Component.dispatchCaptures);
1117
1112
  Component.__capture = {
1118
1113
  initiator,
1119
1114
  handler: listener,
@@ -1122,18 +1117,18 @@ class Component extends base_component_1.BaseComponent {
1122
1117
  }
1123
1118
  static releaseCapture() {
1124
1119
  console.assert(!!Component.__capture);
1125
- document.removeEventListener('touchstart', Component.dispatchCaptures);
1126
- document.removeEventListener('touchmove', Component.dispatchCaptures);
1127
- document.removeEventListener('touchend', Component.dispatchCaptures);
1128
- document.removeEventListener('mousedown', Component.dispatchCaptures);
1129
- document.removeEventListener('mousemove', Component.dispatchCaptures);
1130
- document.removeEventListener('mouseup', Component.dispatchCaptures);
1120
+ x4dom_1.x4document.removeEventListener('touchstart', Component.dispatchCaptures);
1121
+ x4dom_1.x4document.removeEventListener('touchmove', Component.dispatchCaptures);
1122
+ x4dom_1.x4document.removeEventListener('touchend', Component.dispatchCaptures);
1123
+ x4dom_1.x4document.removeEventListener('mousedown', Component.dispatchCaptures);
1124
+ x4dom_1.x4document.removeEventListener('mousemove', Component.dispatchCaptures);
1125
+ x4dom_1.x4document.removeEventListener('mouseup', Component.dispatchCaptures);
1131
1126
  Component.__capture.iframes.forEach(f => {
1132
1127
  flyWrap(f).setStyleValue('pointer-events', null);
1133
1128
  });
1134
1129
  Component.__capture = null;
1135
1130
  if (Component.__capture_mask) {
1136
- document.body.removeChild(Component.__capture_mask);
1131
+ x4dom_1.x4document.body.removeChild(Component.__capture_mask);
1137
1132
  Component.__capture_mask = null;
1138
1133
  }
1139
1134
  }
@@ -1149,7 +1144,8 @@ class Component extends base_component_1.BaseComponent {
1149
1144
  let left = undefined;
1150
1145
  let right = undefined;
1151
1146
  let pn = this.dom.parentElement;
1152
- while (pn && pn != document.body) {
1147
+ const bdy = x4dom_1.x4document.body;
1148
+ while (pn && pn != bdy) {
1153
1149
  const pr = pn.getBoundingClientRect();
1154
1150
  if (top === undefined || top < pr.top) {
1155
1151
  top = pr.top;
@@ -1283,15 +1279,15 @@ class Component extends base_component_1.BaseComponent {
1283
1279
  */
1284
1280
  static getScrollbarSize() {
1285
1281
  if (Component.__sb_width === undefined) {
1286
- let outerDiv = document.createElement('div');
1282
+ let outerDiv = x4dom_1.x4document.createElement('div');
1287
1283
  outerDiv.style.cssText = 'overflow:auto;position:absolute;top:0;width:100px;height:100px';
1288
- let innerDiv = document.createElement('div');
1284
+ let innerDiv = x4dom_1.x4document.createElement('div');
1289
1285
  innerDiv.style.width = '200px';
1290
1286
  innerDiv.style.height = '200px';
1291
1287
  outerDiv.appendChild(innerDiv);
1292
- document.body.appendChild(outerDiv);
1288
+ x4dom_1.x4document.body.appendChild(outerDiv);
1293
1289
  Component.__sb_width = outerDiv.offsetWidth - outerDiv.clientWidth;
1294
- document.body.removeChild(outerDiv);
1290
+ x4dom_1.x4document.body.removeChild(outerDiv);
1295
1291
  }
1296
1292
  return Component.__sb_width;
1297
1293
  }
@@ -1370,7 +1366,7 @@ class Space extends Component {
1370
1366
  }
1371
1367
  exports.Space = Space;
1372
1368
  function EvSize(size, mode = null, context = null) {
1373
- return (0, x4_events_1.BasicEvent)({ size, mode, context });
1369
+ return (0, x4events_1.BasicEvent)({ size, mode, context });
1374
1370
  }
1375
1371
  exports.EvSize = EvSize;
1376
1372
  class Separator extends Component {
@@ -1514,7 +1510,7 @@ class Separator extends Component {
1514
1510
  }
1515
1511
  exports.Separator = Separator;
1516
1512
  function EvOverlayResize(ui_event, sens, context = null) {
1517
- return (0, x4_events_1.BasicEvent)({ ui_event, sens, context });
1513
+ return (0, x4events_1.BasicEvent)({ ui_event, sens, context });
1518
1514
  }
1519
1515
  exports.EvOverlayResize = EvOverlayResize;
1520
1516
  class SizerOverlay extends Component {
@@ -1629,7 +1625,7 @@ class SizerOverlay extends Component {
1629
1625
  }
1630
1626
  exports.SizerOverlay = SizerOverlay;
1631
1627
  function EvShortcut(name) {
1632
- return (0, x4_events_1.BasicEvent)({ name });
1628
+ return (0, x4events_1.BasicEvent)({ name });
1633
1629
  }
1634
1630
  /**
1635
1631
  * you can construct a Container as usual with it's properties but also directly with it's children array
@@ -26,7 +26,7 @@
26
26
  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
- import { BasicEvent, EvChange, EventSource, EventMap } from './x4_events';
29
+ import { BasicEvent, EvChange, EventSource, EventMap } from './x4events';
30
30
  import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
31
31
  export declare type ChangeCallback = (type: string, id?: any) => void;
32
32
  export declare type CalcCallback = () => string;
package/lib/datastore.js CHANGED
@@ -31,10 +31,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.DataView = exports.EvViewChange = exports.DataStore = exports.DataProxy = exports.AutoRecord = exports.Record = exports.data = void 0;
32
32
  const request_1 = require("./request");
33
33
  const tools_1 = require("./tools");
34
- const x4_events_1 = require("./x4_events");
34
+ const x4events_1 = require("./x4events");
35
35
  const base_component_1 = require("./base_component");
36
36
  function EvDataChange(type, id) {
37
- return (0, x4_events_1.BasicEvent)({ type, id });
37
+ return (0, x4events_1.BasicEvent)({ type, id });
38
38
  }
39
39
  /**
40
40
  *
@@ -448,7 +448,7 @@ class DataProxy extends base_component_1.BaseComponent {
448
448
  method: 'GET',
449
449
  params: this.m_props.params,
450
450
  success: (data) => {
451
- this.emit('change', (0, x4_events_1.EvChange)(data));
451
+ this.emit('change', (0, x4events_1.EvChange)(data));
452
452
  }
453
453
  });
454
454
  }, delay);
@@ -459,7 +459,7 @@ exports.DataProxy = DataProxy;
459
459
  /**
460
460
  *
461
461
  */
462
- class DataStore extends x4_events_1.EventSource {
462
+ class DataStore extends x4events_1.EventSource {
463
463
  m_model;
464
464
  m_fields;
465
465
  m_records;
@@ -864,7 +864,7 @@ class DataStore extends x4_events_1.EventSource {
864
864
  }
865
865
  exports.DataStore = DataStore;
866
866
  function EvViewChange(action) {
867
- return (0, x4_events_1.BasicEvent)({ action });
867
+ return (0, x4events_1.BasicEvent)({ action });
868
868
  }
869
869
  exports.EvViewChange = EvViewChange;
870
870
  /**
package/lib/dialog.d.ts CHANGED
@@ -31,7 +31,7 @@ import { IconID } from './icon';
31
31
  import { Label } from './label';
32
32
  import { Form, FormButtons } from './form';
33
33
  import { Component, ComponentContent } from './component';
34
- import { BasicEvent, EventCallback } from './x4_events';
34
+ import { BasicEvent, EventCallback } from './x4events';
35
35
  import { Rect, Size } from './tools';
36
36
  interface Geometry {
37
37
  left: number;
package/lib/dialog.js CHANGED
@@ -29,16 +29,17 @@
29
29
  **/
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.Dialog = exports.EvBtnClick = void 0;
32
+ const x4dom_1 = require("./x4dom");
32
33
  const popup_1 = require("./popup");
33
34
  const icon_1 = require("./icon");
34
35
  const layout_1 = require("./layout");
35
36
  const label_1 = require("./label");
36
37
  const form_1 = require("./form");
37
38
  const component_1 = require("./component");
38
- const x4_events_1 = require("./x4_events");
39
+ const x4events_1 = require("./x4events");
39
40
  const tools_1 = require("./tools");
40
41
  function EvBtnClick(button) {
41
- return (0, x4_events_1.BasicEvent)({ button });
42
+ return (0, x4events_1.BasicEvent)({ button });
42
43
  }
43
44
  exports.EvBtnClick = EvBtnClick;
44
45
  /**
@@ -340,7 +341,7 @@ class Dialog extends popup_1.Popup {
340
341
  */
341
342
  _mouseDown(event) {
342
343
  let { x, y } = (0, tools_1.getMousePos)(event, true);
343
- let wrc = (0, component_1.flyWrap)(document.body).getBoundingRect();
344
+ let wrc = (0, component_1.flyWrap)(x4dom_1.x4document.body).getBoundingRect();
344
345
  let rc = this.getBoundingRect(true);
345
346
  let trc = this.m_el_title.getBoundingRect();
346
347
  let dx = x - rc.left, dy = y - rc.top;