x4js 1.4.34 → 1.4.38

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 (18) hide show
  1. package/lib/component.d.ts +37 -0
  2. package/lib/component.js +3 -3
  3. package/lib/dialog.js +1 -0
  4. package/lib/formatters.js +2 -1
  5. package/lib/gridview.js +4 -0
  6. package/lib/spreadsheet.js +11 -0
  7. package/lib/svgcomponent.d.ts +6 -0
  8. package/lib/svgcomponent.js +32 -1
  9. package/lib/x4.css +20 -4
  10. package/package.json +1 -1
  11. package/src/alpha.jpg +0 -0
  12. package/src/component.ts +1 -1
  13. package/src/dialog.ts +1 -0
  14. package/src/formatters.ts +3 -1
  15. package/src/gridview.ts +6 -0
  16. package/src/spreadsheet.ts +12 -1
  17. package/src/svgcomponent.ts +45 -3
  18. package/src/x4.less +23 -4
package/lib/component.d.ts CHANGED
@@ -44,6 +44,43 @@ export interface ICaptureInfo {
44
44
  handler: EventHandler<UIEvent>;
45
45
  iframes: NodeListOf<HTMLIFrameElement>;
46
46
  }
47
+ /** @ignore properties without 'px' unit */
48
+ export declare const _x4_unitless: {
49
+ animationIterationCount: number;
50
+ borderImageOutset: number;
51
+ borderImageSlice: number;
52
+ borderImageWidth: number;
53
+ boxFlex: number;
54
+ boxFlexGroup: number;
55
+ boxOrdinalGroup: number;
56
+ columnCount: number;
57
+ flex: number;
58
+ flexGrow: number;
59
+ flexPositive: number;
60
+ flexShrink: number;
61
+ flexNegative: number;
62
+ flexOrder: number;
63
+ gridRow: number;
64
+ gridColumn: number;
65
+ fontWeight: number;
66
+ lineClamp: number;
67
+ lineHeight: number;
68
+ opacity: number;
69
+ order: number;
70
+ orphans: number;
71
+ tabSize: number;
72
+ widows: number;
73
+ zIndex: number;
74
+ zoom: number;
75
+ fillOpacity: number;
76
+ floodOpacity: number;
77
+ stopOpacity: number;
78
+ strokeDasharray: number;
79
+ strokeDashoffset: number;
80
+ strokeMiterlimit: number;
81
+ strokeOpacity: number;
82
+ strokeWidth: number;
83
+ };
47
84
  /**
48
85
  *
49
86
  */
package/lib/component.js CHANGED
@@ -28,7 +28,7 @@
28
28
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
29
29
  */
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
- exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Separator = exports.EvSize = exports.Space = exports.Flex = exports.flyWrap = exports.Component = exports.EvFocus = exports.EvDblClick = exports.html = exports.isHtmlString = exports.HtmlString = void 0;
31
+ exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Separator = exports.EvSize = exports.Space = exports.Flex = exports.flyWrap = exports.Component = exports.EvFocus = exports.EvDblClick = exports._x4_unitless = exports.html = exports.isHtmlString = exports.HtmlString = void 0;
32
32
  /**
33
33
  * @todo
34
34
  * create Container class
@@ -50,7 +50,7 @@ const _x4_el_store = Symbol();
50
50
  /** @ignore where Component is stored in dom */
51
51
  const _x4_el_sym = Symbol();
52
52
  /** @ignore properties without 'px' unit */
53
- const _x4_unitless = {
53
+ exports._x4_unitless = {
54
54
  animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
55
55
  boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
56
56
  gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,
@@ -273,7 +273,7 @@ class Component extends base_component_1.BaseComponent {
273
273
  if (value === undefined) {
274
274
  value = null;
275
275
  }
276
- else if (!_x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
276
+ else if (!exports._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
277
277
  value = value + 'px';
278
278
  }
279
279
  this.m_dom.style[name] = value;
package/lib/dialog.js CHANGED
@@ -149,6 +149,7 @@ class Dialog extends popup_1.Popup {
149
149
  this.setStyleValue('height', this.m_props.dlgHeight + '%');
150
150
  }
151
151
  this.addClass('@resized');
152
+ this.m_el_title.setStyleValue("width", "auto");
152
153
  if (this.m_props.maximized) {
153
154
  this._maximize();
154
155
  this.emit('size', (0, component_1.EvSize)(null));
package/lib/formatters.js CHANGED
@@ -64,8 +64,9 @@ function money_formatter(input) {
64
64
  return '';
65
65
  }
66
66
  let val = (0, tools_1.roundTo)(typeof (input) == 'string' ? parseFloat(input) : input, 2);
67
- if (val === -0.00)
67
+ if (Object.is(val, -0.00)) {
68
68
  val = 0.00;
69
+ }
69
70
  let res = moneyFmt.format(val);
70
71
  return res;
71
72
  }
package/lib/gridview.js CHANGED
@@ -642,6 +642,10 @@ class GridView extends layout_1.VLayout {
642
642
  return;
643
643
  }
644
644
  const update = () => {
645
+ // element destroyed between updateScroll and now
646
+ if (!this.dom) {
647
+ return;
648
+ }
645
649
  let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
646
650
  if (newTop != this.m_topIndex || forceUpdate) {
647
651
  this.m_topIndex = newTop;
package/lib/spreadsheet.js CHANGED
@@ -753,6 +753,7 @@ class Spreadsheet extends layout_1.VLayout {
753
753
  case 'Enter': {
754
754
  this.editCurCell();
755
755
  event.stopPropagation();
756
+ event.preventDefault();
756
757
  break;
757
758
  }
758
759
  case 'Delete': {
@@ -931,10 +932,15 @@ class Spreadsheet extends layout_1.VLayout {
931
932
  this.killEditor(true);
932
933
  });
933
934
  input.setDomEvent('keydown', (e) => {
935
+ // prevented by edit...
936
+ if (e.defaultPrevented) {
937
+ return;
938
+ }
934
939
  switch (e.key) {
935
940
  case 'Escape': {
936
941
  this.killEditor(false);
937
942
  e.stopPropagation();
943
+ e.preventDefault();
938
944
  break;
939
945
  }
940
946
  case 'Enter':
@@ -945,18 +951,21 @@ class Spreadsheet extends layout_1.VLayout {
945
951
  }
946
952
  movesel(0, sens);
947
953
  e.stopPropagation();
954
+ e.preventDefault();
948
955
  break;
949
956
  }
950
957
  case 'ArrowUp':
951
958
  case 'Up': {
952
959
  movesel(-1, 0);
953
960
  e.stopPropagation();
961
+ e.preventDefault();
954
962
  break;
955
963
  }
956
964
  case 'ArrowDown':
957
965
  case 'Down': {
958
966
  movesel(1, 0);
959
967
  e.stopPropagation();
968
+ e.preventDefault();
960
969
  break;
961
970
  }
962
971
  }
@@ -972,6 +981,7 @@ class Spreadsheet extends layout_1.VLayout {
972
981
  case 'Escape': {
973
982
  this.killEditor(false);
974
983
  e.stopPropagation();
984
+ e.preventDefault();
975
985
  break;
976
986
  }
977
987
  case 'Enter':
@@ -982,6 +992,7 @@ class Spreadsheet extends layout_1.VLayout {
982
992
  }
983
993
  movesel(0, sens);
984
994
  e.stopPropagation();
995
+ e.preventDefault();
985
996
  break;
986
997
  }
987
998
  }
package/lib/svgcomponent.d.ts CHANGED
@@ -33,6 +33,7 @@ import { Component, CProps } from './component';
33
33
  declare abstract class SVGItem {
34
34
  private m_tag;
35
35
  private m_attrs;
36
+ private m_style;
36
37
  constructor(tag: string);
37
38
  /**
38
39
  * render the item
@@ -61,6 +62,7 @@ declare abstract class SVGItem {
61
62
  * @returns this
62
63
  */
63
64
  attr(name: string, value: string): this;
65
+ style(name: string, value: string | number): this;
64
66
  /**
65
67
  * add a class
66
68
  * @param name class name to add
@@ -70,6 +72,10 @@ declare abstract class SVGItem {
70
72
  *
71
73
  */
72
74
  renderAttrs(): string;
75
+ /**
76
+ *
77
+ */
78
+ renderStyle(): string;
73
79
  renderContent(): string;
74
80
  }
75
81
  /**
package/lib/svgcomponent.js CHANGED
@@ -30,6 +30,8 @@
30
30
  Object.defineProperty(exports, "__esModule", { value: true });
31
31
  exports.SVGComponent = exports.SVGPathBuilder = void 0;
32
32
  const component_1 = require("./component");
33
+ const tools_1 = require("./tools");
34
+ const reNumber = /^-?\d+(\.\d+)?$/;
33
35
  // degrees to radian
34
36
  function d2r(d) {
35
37
  return d * Math.PI / 180.0;
@@ -61,16 +63,18 @@ function clean(a, ...b) {
61
63
  class SVGItem {
62
64
  m_tag;
63
65
  m_attrs;
66
+ m_style;
64
67
  constructor(tag) {
65
68
  this.m_tag = tag;
66
69
  this.m_attrs = new Map();
70
+ this.m_style = new Map();
67
71
  }
68
72
  /**
69
73
  * render the item
70
74
  * @returns
71
75
  */
72
76
  render() {
73
- return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent()}</${this.m_tag}>`;
77
+ return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent()}</${this.m_tag}>`;
74
78
  }
75
79
  /**
76
80
  * change the stroke color
@@ -109,6 +113,17 @@ class SVGItem {
109
113
  this.m_attrs.set(name, value);
110
114
  return this;
111
115
  }
116
+ style(name, value) {
117
+ if (value === undefined || value === '' || value === undefined) {
118
+ this.m_style.delete(name);
119
+ return;
120
+ }
121
+ if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
122
+ value = value + 'px';
123
+ }
124
+ this.m_style.set(name, '' + value);
125
+ return this;
126
+ }
112
127
  /**
113
128
  * add a class
114
129
  * @param name class name to add
@@ -122,12 +137,28 @@ class SVGItem {
122
137
  *
123
138
  */
124
139
  renderAttrs() {
140
+ if (!this.m_attrs.size) {
141
+ return "";
142
+ }
125
143
  let result = '';
126
144
  this.m_attrs.forEach((v, k) => {
127
145
  result += ` ${k} = "${v}"`;
128
146
  });
129
147
  return result;
130
148
  }
149
+ /**
150
+ *
151
+ */
152
+ renderStyle() {
153
+ if (!this.m_style.size) {
154
+ return "";
155
+ }
156
+ let result = 'style="';
157
+ this.m_style.forEach((v, k) => {
158
+ result += `${k}:${v};`;
159
+ });
160
+ return result + '"';
161
+ }
131
162
  renderContent() {
132
163
  return '';
133
164
  }
package/lib/x4.css CHANGED
@@ -840,6 +840,7 @@ textarea::selection {
840
840
  display: flex;
841
841
  align-items: center;
842
842
  background-color: var(--x4-selection-color);
843
+ width: 0;
843
844
  }
844
845
  .x-dialog > .title .x-icon {
845
846
  width: 2em;
@@ -858,6 +859,9 @@ textarea::selection {
858
859
  .x-dialog > .title .x-label {
859
860
  border-bottom: none;
860
861
  padding: 0;
862
+ overflow: hidden;
863
+ text-overflow: ellipsis;
864
+ white-space: nowrap;
861
865
  }
862
866
  .x-dialog > .title .res-btn {
863
867
  display: none;
@@ -1042,6 +1046,8 @@ textarea::selection {
1042
1046
  .x-message-box .x-form .icon,
1043
1047
  .x-important .x-form .icon {
1044
1048
  font-size: 48px;
1049
+ width: 48px;
1050
+ height: 48px;
1045
1051
  color: var(--x4-error-color);
1046
1052
  margin-right: 8px;
1047
1053
  }
@@ -1211,10 +1217,16 @@ textarea::selection {
1211
1217
  .x-spreadsheet .x-editor {
1212
1218
  position: absolute;
1213
1219
  min-height: 0;
1220
+ height: calc(100% - 1px);
1221
+ margin: 0;
1214
1222
  }
1215
1223
  .x-spreadsheet .x-editor input {
1216
1224
  margin: 0;
1217
1225
  min-height: 0;
1226
+ height: 100%;
1227
+ }
1228
+ .x-form .x-spreadsheet .x-editor {
1229
+ background-color: white;
1218
1230
  }
1219
1231
  .x-side-bar {
1220
1232
  min-width: 44px;
@@ -1291,9 +1303,13 @@ textarea::selection {
1291
1303
  background-color: white;
1292
1304
  padding: 2px 0;
1293
1305
  }
1294
- .x-popup-table tr:hover,
1295
1306
  .x-popup-table tr.x-selected {
1296
- background-color: #c8ffff;
1307
+ background-color: var(--x4-selection-color);
1308
+ color: var(--x4-selection-text);
1309
+ }
1310
+ .x-popup-table tr:hover {
1311
+ background-color: var(--x4-hover-color);
1312
+ color: var(--x4-hover-text);
1297
1313
  }
1298
1314
  .x-popup-table td {
1299
1315
  padding: 3px 8px;
@@ -1434,7 +1450,7 @@ textarea::selection {
1434
1450
  border: 1px solid rgba(0, 0, 0, 0.4);
1435
1451
  }
1436
1452
  .x-color-picker-editor .alpha {
1437
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==');
1453
+ background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==');
1438
1454
  padding: 4px;
1439
1455
  }
1440
1456
  .x-color-picker .sel {
@@ -1508,7 +1524,7 @@ textarea::selection {
1508
1524
  min-height: unset;
1509
1525
  }
1510
1526
  .x-color-picker .alpha {
1511
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==');
1527
+ background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==');
1512
1528
  }
1513
1529
  .x-color-picker .alpha .marker {
1514
1530
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "x4js",
3
- "version": "1.4.34",
3
+ "version": "1.4.38",
4
4
  "description": "X4js core files",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/alpha.jpg ADDED
Binary file
package/src/component.ts CHANGED
@@ -67,7 +67,7 @@ const _x4_el_store = Symbol();
67
67
  const _x4_el_sym = Symbol();
68
68
 
69
69
  /** @ignore properties without 'px' unit */
70
- const _x4_unitless = {
70
+ export const _x4_unitless = {
71
71
  animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
72
72
  boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
73
73
  gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,
package/src/dialog.ts CHANGED
@@ -233,6 +233,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
233
233
  }
234
234
 
235
235
  this.addClass('@resized');
236
+ this.m_el_title.setStyleValue( "width", "auto" );
236
237
 
237
238
  if (this.m_props.maximized) {
238
239
  this._maximize();
package/src/formatters.ts CHANGED
@@ -74,7 +74,9 @@ export function money_formatter(input: any): string {
74
74
  }
75
75
 
76
76
  let val: number = roundTo(typeof (input) == 'string' ? parseFloat(input) : input, 2);
77
- if (val === -0.00) val = 0.00;
77
+ if (Object.is(val, -0.00)) {
78
+ val = 0.00;
79
+ }
78
80
 
79
81
  let res = moneyFmt.format(val);
80
82
  return res;
package/src/gridview.ts CHANGED
@@ -855,6 +855,12 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
855
855
  }
856
856
 
857
857
  const update = () => {
858
+
859
+ // element destroyed between updateScroll and now
860
+ if( !this.dom ) {
861
+ return;
862
+ }
863
+
858
864
  let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
859
865
 
860
866
  if (newTop != this.m_topIndex || forceUpdate) {
package/src/spreadsheet.ts CHANGED
@@ -1015,6 +1015,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1015
1015
  case 'Enter': {
1016
1016
  this.editCurCell();
1017
1017
  event.stopPropagation( );
1018
+ event.preventDefault( );
1018
1019
  break;
1019
1020
  }
1020
1021
 
@@ -1247,11 +1248,16 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1247
1248
  } );
1248
1249
 
1249
1250
  input.setDomEvent( 'keydown', (e: KeyboardEvent) => {
1250
-
1251
+ // prevented by edit...
1252
+ if( e.defaultPrevented ) {
1253
+ return;
1254
+ }
1255
+
1251
1256
  switch (e.key) {
1252
1257
  case 'Escape': {
1253
1258
  this.killEditor(false);
1254
1259
  e.stopPropagation();
1260
+ e.preventDefault( );
1255
1261
  break;
1256
1262
  }
1257
1263
 
@@ -1264,6 +1270,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1264
1270
 
1265
1271
  movesel(0, sens);
1266
1272
  e.stopPropagation();
1273
+ e.preventDefault( );
1267
1274
  break;
1268
1275
  }
1269
1276
 
@@ -1271,6 +1278,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1271
1278
  case 'Up': {
1272
1279
  movesel(-1, 0);
1273
1280
  e.stopPropagation();
1281
+ e.preventDefault( );
1274
1282
  break;
1275
1283
  }
1276
1284
 
@@ -1278,6 +1286,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1278
1286
  case 'Down': {
1279
1287
  movesel(1, 0);
1280
1288
  e.stopPropagation();
1289
+ e.preventDefault( );
1281
1290
  break;
1282
1291
  }
1283
1292
  }
@@ -1296,6 +1305,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1296
1305
  case 'Escape': {
1297
1306
  this.killEditor(false);
1298
1307
  e.stopPropagation();
1308
+ e.preventDefault( );
1299
1309
  break;
1300
1310
  }
1301
1311
 
@@ -1308,6 +1318,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
1308
1318
 
1309
1319
  movesel(0, sens);
1310
1320
  e.stopPropagation();
1321
+ e.preventDefault( );
1311
1322
  break;
1312
1323
  }
1313
1324
  }
package/src/svgcomponent.ts CHANGED
@@ -27,8 +27,10 @@
27
27
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
28
  **/
29
29
 
30
- import { Component, CProps } from './component'
30
+ import { Component, CProps, _x4_unitless } from './component'
31
+ import { isNumber } from "./tools"
31
32
 
33
+ const reNumber = /^-?\d+(\.\d+)?$/;
32
34
 
33
35
  // degrees to radian
34
36
  function d2r( d: number ): number {
@@ -69,10 +71,12 @@ function clean( a, ...b ) {
69
71
  abstract class SVGItem {
70
72
  private m_tag: string
71
73
  private m_attrs: Map<string,string>;
74
+ private m_style: Map<string,string>;
72
75
 
73
76
  constructor( tag: string ) {
74
77
  this.m_tag = tag;
75
78
  this.m_attrs = new Map( );
79
+ this.m_style = new Map( );
76
80
  }
77
81
 
78
82
  /**
@@ -80,7 +84,7 @@ abstract class SVGItem {
80
84
  * @returns
81
85
  */
82
86
  render( ) : string {
83
- return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent( )}</${this.m_tag}>`;
87
+ return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent( )}</${this.m_tag}>`;
84
88
  }
85
89
 
86
90
  /**
@@ -127,6 +131,21 @@ abstract class SVGItem {
127
131
  return this;
128
132
  }
129
133
 
134
+ style( name: string, value: string | number ) : this {
135
+
136
+ if (value === undefined || value==='' || value===undefined ) {
137
+ this.m_style.delete( name );
138
+ return;
139
+ }
140
+
141
+ if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
142
+ value = value + 'px';
143
+ }
144
+
145
+ this.m_style.set( name, ''+value );
146
+ return this;
147
+ }
148
+
130
149
  /**
131
150
  * add a class
132
151
  * @param name class name to add
@@ -142,13 +161,36 @@ abstract class SVGItem {
142
161
  *
143
162
  */
144
163
 
145
- renderAttrs( ) {
164
+ renderAttrs( ): string {
165
+ if( !this.m_attrs.size ) {
166
+ return "";
167
+ }
168
+
146
169
  let result = '';
147
170
  this.m_attrs.forEach( (v,k) => {
148
171
  result += ` ${k} = "${v}"`
149
172
  });
173
+
150
174
  return result;
151
175
  }
176
+
177
+ /**
178
+ *
179
+ */
180
+
181
+ renderStyle( ): string {
182
+
183
+ if( !this.m_style.size ) {
184
+ return "";
185
+ }
186
+
187
+ let result = 'style="';
188
+ this.m_style.forEach( (v,k) => {
189
+ result += `${k}:${v};`
190
+ });
191
+
192
+ return result+'"';
193
+ }
152
194
 
153
195
  renderContent( ): string {
154
196
  return '';
package/src/x4.less CHANGED
@@ -1052,6 +1052,7 @@ textarea {
1052
1052
  display: flex;
1053
1053
  align-items: center;
1054
1054
  background-color: var( --x4-selection-color );
1055
+ width: 0; // to avoid title changing dialog size when long
1055
1056
 
1056
1057
  .x-icon {
1057
1058
  width: 2em;
@@ -1074,6 +1075,9 @@ textarea {
1074
1075
  .x-label {
1075
1076
  border-bottom: none;
1076
1077
  padding: 0;
1078
+ overflow: hidden;
1079
+ text-overflow: ellipsis;
1080
+ white-space: nowrap;
1077
1081
  }
1078
1082
 
1079
1083
  .res-btn {
@@ -1295,6 +1299,8 @@ textarea {
1295
1299
 
1296
1300
  .icon {
1297
1301
  font-size: 48px;
1302
+ width: 48px;
1303
+ height: 48px;
1298
1304
  color: var( --x4-error-color );
1299
1305
  margin-right: 8px;
1300
1306
  }
@@ -1480,14 +1486,21 @@ textarea {
1480
1486
  .x-editor {
1481
1487
  position: absolute;
1482
1488
  min-height: 0;
1489
+ height: calc( 100% - 1px );
1490
+ margin: 0;
1483
1491
 
1484
1492
  input {
1485
1493
  margin: 0;
1486
1494
  min-height: 0;
1495
+ height: 100%;
1487
1496
  }
1488
1497
  }
1489
1498
  }
1490
1499
 
1500
+ .x-form .x-spreadsheet .x-editor {
1501
+ background-color: white;
1502
+ }
1503
+
1491
1504
  .x-side-bar {
1492
1505
  min-width: 44px;
1493
1506
 
@@ -1592,9 +1605,15 @@ textarea {
1592
1605
  background-color: white;
1593
1606
  padding: 2px 0;
1594
1607
 
1595
- tr:hover,
1596
1608
  tr.x-selected {
1597
- background-color: rgba(200,255,255,1);
1609
+ //background-color: rgba(200,255,255,1);
1610
+ background-color: var(--x4-selection-color);
1611
+ color: var( --x4-selection-text);
1612
+ }
1613
+
1614
+ tr:hover {
1615
+ background-color: var(--x4-hover-color);
1616
+ color: var( --x4-hover-text);
1598
1617
  }
1599
1618
 
1600
1619
  td {
@@ -1795,7 +1814,7 @@ textarea {
1795
1814
 
1796
1815
  .x-color-picker-editor {
1797
1816
  .alpha {
1798
- background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==' );
1817
+ background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
1799
1818
  padding: 4px;
1800
1819
  }
1801
1820
  }
@@ -1886,7 +1905,7 @@ textarea {
1886
1905
  }
1887
1906
 
1888
1907
  .alpha {
1889
- background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==' );
1908
+ background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
1890
1909
 
1891
1910
  .marker {
1892
1911
  position: absolute;