cx 24.8.7 → 24.9.1

package/dist/ui.js

@@ -823,6 +823,7 @@ var stack = [
 		dateEncoding: function dateEncoding(date) {
 			return date.toISOString();
 		},
+		timezone: null,
 	},
 ];
 function getDefaultCulture() {
@@ -884,6 +885,11 @@ var Culture = /*#__PURE__*/ (function () {
 		cultureSpecs.defaultCurrency = currencyCode;
 		this.invalidateCache();
 	};
+	Culture.setDefaultTimezone = function setDefaultTimezone(timezone) {
+		var cultureSpecs = getDefaultCulture();
+		cultureSpecs.timezone = timezone;
+		this.invalidateCache();
+	};
 	Culture.setDefaultDateEncoding = function setDefaultDateEncoding(encoding) {
 		var cultureSpecs = getDefaultCulture();
 		cultureSpecs.dateEncoding = encoding;
@@ -906,9 +912,12 @@ var Culture = /*#__PURE__*/ (function () {
 		var _getCurrentCulture2 = getCurrentCulture(),
 			cache = _getCurrentCulture2.cache,
 			dateTimeCulture = _getCurrentCulture2.dateTimeCulture,
-			culture = _getCurrentCulture2.culture;
+			culture = _getCurrentCulture2.culture,
+			timezone = _getCurrentCulture2.timezone;
 		if (!cache.dateTimeCulture)
-			cache.dateTimeCulture = new DateTimeCulture(dateTimeCulture != null ? dateTimeCulture : culture);
+			cache.dateTimeCulture = new DateTimeCulture(dateTimeCulture != null ? dateTimeCulture : culture, {
+				defaultTimezone: timezone,
+			});
 		return cache.dateTimeCulture;
 	};
 	Culture.getDefaultDateEncoding = function getDefaultDateEncoding() {

package/dist/widgets.css

@@ -833,6 +833,7 @@
 }
 
 .cxe-textfield-left-icon {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -844,7 +845,6 @@
   line-height: 16px;
   opacity: 0.6;
   text-align: center;
-  pointer-events: none;
 }
 .cxe-textfield-left-icon:hover {
   opacity: 1;
@@ -961,6 +961,7 @@
 }
 
 .cxe-numberfield-tool {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -973,7 +974,6 @@
   opacity: 0.6;
   text-align: center;
   cursor: pointer;
-  pointer-events: none;
 }
 .cxe-numberfield-tool:hover {
   opacity: 1;
@@ -992,6 +992,7 @@
 }
 
 .cxe-numberfield-left-icon {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -1003,7 +1004,6 @@
   line-height: 16px;
   opacity: 0.6;
   text-align: center;
-  pointer-events: none;
 }
 .cxe-numberfield-left-icon:hover {
   opacity: 1;
@@ -1030,6 +1030,11 @@
 }
 
 .cxb-calendar {
+  display: inline-block;
+  vertical-align: middle;
+  width: 18em;
+  overflow-y: auto;
+  box-sizing: border-box;
   line-height: 16px;
   padding: 5px;
   border-width: 1px;
@@ -1046,11 +1051,6 @@
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  display: inline-block;
-  vertical-align: middle;
-  width: 18em;
-  overflow-y: auto;
-  box-sizing: border-box;
 }
 .cxb-calendar:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -1078,10 +1078,10 @@
   font-weight: 500;
 }
 .cxb-calendar tbody td {
+  user-select: none;
   font-size: 13px;
   background-color: transparent;
   border-radius: 0;
-  user-select: none;
 }
 .cxb-calendar .cxe-calendar-header {
   font-size: 13px;
@@ -1198,12 +1198,12 @@ th.cxe-calendar-display {
 }
 
 .cxb-lookupfield {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
   cursor: pointer;
   width: 180px;
   font-size: 13px;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
 }
 .cxb-lookupfield.cxs-view-mode {
   line-height: 16px;
@@ -1237,7 +1237,6 @@ th.cxe-calendar-display {
   color: black;
   outline-offset: 0;
   box-shadow: none;
-  text-overflow: ellipsis;
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -1450,10 +1449,10 @@ th.cxe-calendar-display {
   opacity: 1;
 }
 .cxs-disabled > .cxe-lookupfield-tool {
+  border-width: 0;
   background: rgb(235, 235, 228);
   color: rgb(84, 84, 84);
   pointer-events: none;
-  border-width: 0;
 }
 .cxe-lookupfield-left-icon {
   display: block;
@@ -1653,6 +1652,7 @@ th.cxe-calendar-display {
   border-color: transparent;
 }
 .cxb-select .cxe-select-left-icon {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -1664,7 +1664,6 @@ th.cxe-calendar-display {
   line-height: 16px;
   opacity: 0.6;
   text-align: center;
-  pointer-events: none;
 }
 .cxb-select .cxe-select-left-icon:hover {
   opacity: 1;
@@ -1762,6 +1761,7 @@ th.cxe-calendar-display {
 }
 
 .cxe-select-tool {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -1774,16 +1774,15 @@ th.cxe-calendar-display {
   opacity: 0.6;
   text-align: center;
   cursor: pointer;
-  pointer-events: none;
 }
 .cxe-select-tool:hover {
   opacity: 1;
 }
 .cxs-disabled > .cxe-select-tool {
+  border-width: 0;
   background: rgb(235, 235, 228);
   color: rgb(84, 84, 84);
   pointer-events: none;
-  border-width: 0;
 }
 .cxe-select-icon {
   display: block;
@@ -1799,11 +1798,11 @@ th.cxe-calendar-display {
 }
 
 .cxb-textarea {
+  line-height: 0;
+  width: 300px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  line-height: 0;
-  width: 300px;
 }
 .cxb-textarea.cxs-view-mode {
   line-height: normal;
@@ -1814,6 +1813,8 @@ th.cxe-calendar-display {
 }
 
 .cxe-textarea-input {
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   line-height: normal;
   padding: 5px;
@@ -1831,8 +1832,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  width: 100%;
-  height: 100%;
 }
 .cxe-textarea-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -1886,6 +1885,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-checkbox {
+  min-width: 14px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -1895,7 +1895,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  min-width: 14px;
 }
 .cxb-checkbox.cxs-view-mode {
   line-height: 16px;
@@ -1944,6 +1943,12 @@ th.cxe-calendar-display {
 }
 
 .cxe-checkbox-input {
+  width: 14px;
+  height: 14px;
+  top: calc(50% - 7px);
+  left: 0;
+  display: inline-block;
+  position: absolute;
   box-sizing: border-box;
   line-height: 16px;
   padding: 0;
@@ -1962,12 +1967,6 @@ th.cxe-calendar-display {
   -moz-appearance: none;
   -webkit-appearance: none;
   margin: 0 !important;
-  width: 14px;
-  height: 14px;
-  top: calc(50% - 7px);
-  left: 0;
-  display: inline-block;
-  position: absolute;
 }
 .cxe-checkbox-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2001,6 +2000,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-radio {
+  min-width: 14px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -2010,7 +2010,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  min-width: 14px;
 }
 .cxb-radio.cxs-view-mode {
   line-height: 16px;
@@ -2052,6 +2051,13 @@ th.cxe-calendar-display {
 }
 
 .cxe-radio-input {
+  width: 14px;
+  height: 14px;
+  top: calc(50% - 7px);
+  left: 0;
+  display: inline-block;
+  position: absolute;
+  opacity: 1;
   box-sizing: border-box;
   line-height: 16px;
   padding: 0;
@@ -2060,7 +2066,7 @@ th.cxe-calendar-display {
   font-family: inherit;
   border-color: #bfbfbf;
   border-style: solid;
-  border-radius: 0;
+  border-radius: 50%;
   background-color: white;
   color: currentColor;
   outline-offset: 0;
@@ -2070,14 +2076,6 @@ th.cxe-calendar-display {
   -moz-appearance: none;
   -webkit-appearance: none;
   margin: 0 !important;
-  width: 14px;
-  height: 14px;
-  top: calc(50% - 7px);
-  left: 0;
-  display: inline-block;
-  position: absolute;
-  border-radius: 50%;
-  opacity: 1;
 }
 .cxe-radio-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2111,6 +2109,8 @@ th.cxe-calendar-display {
 }
 
 .cxb-colorpicker {
+  display: inline-flex;
+  flex-direction: column;
   line-height: 16px;
   padding: 4px;
   border-width: 1px;
@@ -2127,8 +2127,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  display: inline-flex;
-  flex-direction: column;
 }
 @media screen and (min-width: 500px) {
   .cxb-colorpicker {
@@ -2405,6 +2403,10 @@ th.cxe-calendar-display {
   opacity: 1;
 }
 .cxe-colorfield-left-icon {
+  box-sizing: border-box;
+  background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -2414,14 +2416,9 @@ th.cxe-calendar-display {
   height: 16px;
   width: 16px;
   line-height: 16px;
-  opacity: 0.6;
+  opacity: 1;
   text-align: center;
   cursor: pointer;
-  background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%);
-  background-size: 8px 8px;
-  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
-  box-sizing: border-box;
-  opacity: 1;
 }
 .cxe-colorfield-left-icon:hover {
   opacity: 1;
@@ -2449,6 +2446,15 @@ th.cxe-calendar-display {
 }
 
 .cxb-monthpicker {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  min-height: 10em;
+  max-height: 30em;
+  height: 100%;
+  position: relative;
+  width: 23em;
+  overflow-anchor: none;
+  touch-action: pan-y;
   box-sizing: border-box;
   line-height: 16px;
   padding: 5px;
@@ -2466,15 +2472,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  min-height: 10em;
-  max-height: 30em;
-  height: 100%;
-  position: relative;
-  width: 23em;
-  overflow-anchor: none;
-  touch-action: pan-y;
 }
 .cxb-monthpicker:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2497,14 +2494,17 @@ th.cxe-calendar-display {
   width: 100%;
   font-size: 0.9em;
 }
-.cxb-monthpicker th, .cxb-monthpicker td {
+.cxb-monthpicker th,
+.cxb-monthpicker td {
   border-top: 1px solid rgba(191, 191, 191, 0.5);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.cxb-monthpicker tbody:not(:first-child) tr:first-child th, .cxb-monthpicker tbody:not(:first-child) tr:first-child td {
+.cxb-monthpicker tbody:not(:first-child) tr:first-child th,
+.cxb-monthpicker tbody:not(:first-child) tr:first-child td {
   border-top: 1px solid #bfbfbf;
 }
-.cxb-monthpicker th, .cxb-monthpicker td {
+.cxb-monthpicker th,
+.cxb-monthpicker td {
   text-align: center;
   font-size: smaller;
   font-weight: normal;
@@ -2535,13 +2535,14 @@ th.cxe-calendar-display {
   pointer-events: none;
 }
 .cxb-monthpicker td.cxs-selected {
-  background-color: rgba(123, 190, 255, 0.4);
   border-color: transparent;
+  background-color: rgba(123, 190, 255, 0.4);
 }
 .cxb-monthpicker td.cxs-selected:hover {
   background-color: rgba(123, 190, 255, 0.2);
 }
-.cxb-monthpicker td.cxs-cursor, .cxb-monthpicker th.cxs-cursor {
+.cxb-monthpicker td.cxs-cursor,
+.cxb-monthpicker th.cxs-cursor {
   background-color: rgba(128, 128, 128, 0.1);
   outline: none;
   cursor: pointer;
@@ -2549,7 +2550,8 @@ th.cxe-calendar-display {
 .cxb-monthpicker:focus td.cxs-selected {
   background-color: rgba(123, 190, 255, 0.4);
 }
-.cxb-monthpicker:focus td.cxs-cursor, .cxb-monthpicker:focus th.cxs-cursor {
+.cxb-monthpicker:focus td.cxs-cursor,
+.cxb-monthpicker:focus th.cxs-cursor {
   background-color: rgba(123, 190, 255, 0.3);
   outline: none;
 }
@@ -2857,6 +2859,8 @@ th.cxe-calendar-display {
 }
 
 .cxb-slider {
+  width: 180px;
+  user-select: none;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -2866,8 +2870,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  width: 180px;
-  user-select: none;
 }
 .cxb-slider.cxs-view-mode {
   line-height: 16px;
@@ -2968,6 +2970,9 @@ th.cxe-calendar-display {
 }
 
 .cxb-switch {
+  cursor: pointer;
+  min-width: 50px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -2977,9 +2982,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  cursor: pointer;
-  min-width: 50px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .cxb-switch.cxs-view-mode {
   line-height: 16px;

package/dist/widgets.js

@@ -4220,7 +4220,7 @@ function getTooltipInstance(e, parentInstance, tooltip, options) {
 	if (
 		tooltipInstance &&
 		(tooltipInstance.widget.relatedElement != target ||
-			tooltipInstance.config != tooltip ||
+			!shallowEquals(tooltipInstance.config, tooltip) ||
 			tooltipInstance.store.store != parentInstance.store)
 	) {
 		if (tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
@@ -4246,6 +4246,7 @@ function getTooltipInstance(e, parentInstance, tooltip, options) {
 		});
 		tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(tooltipWidget, name, store);
 		tooltipInstance.config = tooltip;
+		tooltipInstance.tooltipName = name;
 		if (tooltip.alwaysVisible || tooltip.trackMouse || tooltip.trackMouseX || tooltip.trackMouseY) {
 			tooltipInstance.init(new RenderingContext());
 			tooltipInstance.data = tooltipInstance.dataSelector(store);
@@ -4272,6 +4273,8 @@ function tooltipMouseMove(e, parentInstance, tooltip, options) {
 			dismiss();
 		});
 		instance.dismissTooltip = function () {
+			if (instance.parent.tooltips[instance.tooltipName] === instance)
+				delete instance.parent.tooltips[instance.tooltipName];
 			unsubscribeDismiss();
 			dismiss();
 		};
@@ -4295,7 +4298,9 @@ function tooltipMouseMove(e, parentInstance, tooltip, options) {
 }
 function tooltipMouseLeave(e, parentInstance, tooltip, options) {
 	var instance = getTooltipInstance(e, parentInstance, tooltip, options);
-	if (instance) {
+
+	// do not process leave events twice even if called multiple times
+	if (instance && instance.mouseOverTarget) {
 		instance.mouseOverTarget = false;
 		instance.widget.handleMouseLeavesParent(instance);
 	}
@@ -4872,20 +4877,24 @@ var FlyweightTooltipTracker = /*#__PURE__*/ (function (_Widget) {
 	};
 	_proto.handleMouseMove = function handleMouseMove(e, instance) {
 		if (!this.onGetTooltip) return;
-		if (instance.lastTarget != e.target) {
-			instance.lastTarget = e.target;
-			var tooltip = null;
-			instance.parentEl = closest(e.target, function (element) {
-				tooltip = instance.invoke("onGetTooltip", element, instance);
-				if (tooltip) return true;
+		var parentEl, tooltip;
+		if (instance.lastTarget == e.target) return;
+		instance.lastTarget = e.target;
+		parentEl = closest(e.target, function (element) {
+			tooltip = instance.invoke("onGetTooltip", element, instance);
+			if (tooltip) return true;
+		});
+		if (!parentEl)
+			tooltipMouseLeave$1(e, instance, instance.tooltip, {
+				target: instance.parentEl,
 			});
+		else {
 			instance.tooltip = tooltip;
-		}
-		if (!instance.parentEl) tooltipMouseMove$1(e, instance, null);
-		else
+			instance.parentEl = parentEl;
 			tooltipMouseMove$1(e, instance, instance.tooltip, {
-				target: instance.parentEl,
+				target: parentEl,
 			});
+		}
 	};
 	return FlyweightTooltipTracker;
 })(Widget);

package/index.js

@@ -1,17 +1,17 @@
-import * as util from './util';
-import * as data from './data';
-import * as ui from './ui';
-import * as widgets from './widgets';
-import * as svg from './svg';
-import * as charts from './charts';
-import * as hooks from './hooks';
-
-export {
-   util,
-   data,
-   ui,
-   widgets,
-   svg,
-   charts,
-   hooks
-};
+import * as util from './util';
+import * as data from './data';
+import * as ui from './ui';
+import * as widgets from './widgets';
+import * as svg from './svg';
+import * as charts from './charts';
+import * as hooks from './hooks';
+
+export {
+   util,
+   data,
+   ui,
+   widgets,
+   svg,
+   charts,
+   hooks
+};