cx 23.4.5 → 23.5.1

package/dist/ui.js

@@ -1403,14 +1403,19 @@ function unfocusElement(target, unfocusParentOverlay) {
 	if (!target) target = activeElement;
 	if (unfocusParentOverlay) {
 		var focusableOverlayContainer = closestParent(target, function (el) {
-			return el.dataset.focusableOverlayContainer;
+			var _el$dataset;
+			return (_el$dataset = el.dataset) == null ? void 0 : _el$dataset.focusableOverlayContainer;
 		});
 		if (focusableOverlayContainer) target = focusableOverlayContainer;
 	}
 
 	//find the closest focusable parent of the target element and focus it instead
 	var focusableParent = closestParent(target, function (el) {
-		return isFocusable(el) && (!unfocusParentOverlay || el.dataset.focusableOverlayContainer);
+		var _el$dataset2;
+		return (
+			isFocusable(el) &&
+			(!unfocusParentOverlay || ((_el$dataset2 = el.dataset) == null ? void 0 : _el$dataset2.focusableOverlayContainer))
+		);
 	});
 	if (focusableParent && focusableParent !== document.body) focusableParent.focus();
 	else activeElement.blur();

package/dist/widgets.js

@@ -14589,6 +14589,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					type: DateTimePicker,
 					segment: widget.segment,
 					encoding: widget.encoding,
+					showSeconds: widget.showSeconds,
 				};
 				break;
 		}
@@ -17363,11 +17364,15 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var widget = instance.widget;
 		if (widget.scrollable)
 			this.offResize = ResizeManager.trackElement(this.dom.scroller, function () {
+				//ignore changes if the element is not visible on the page
+				if (_this10.dom.scroller.offsetWidth == 0) return;
 				//update fixed header/footer
-				_this10.componentDidUpdate();
-				instance.setState({
-					dimensionsVersion: instance.state.dimensionsVersion + 1,
-					lockedColWidth: {},
+				requestAnimationFrame(function () {
+					_this10.componentDidUpdate();
+					instance.setState({
+						dimensionsVersion: instance.state.dimensionsVersion + 1,
+						lockedColWidth: {},
+					});
 				});
 			});
 		if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.4.5",
+   "version": "23.5.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Legend.d.ts

@@ -1,27 +1,27 @@
-import * as Cx from '../core';
+import * as Cx from "../core";
 
 interface LegendProps extends Cx.HtmlElementProps {
-   
    /** Name of the legend. Default is `legend`. */
-   name?: string,
-   
+   name?: string;
+
    /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string,
-   
+   baseClass?: string;
+
    /** Switch to vertical mode. */
-   vertical?: boolean,
+   vertical?: boolean;
 
    /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number,
+   svgSize?: number;
 
    /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number
+   shapeSize?: number;
+
+   /** Default shape that will be applied to the all legend items. */
+   shape?: Cx.StringProp;
 }
 
 export class Legend extends Cx.Widget<LegendProps> {
-   static Scope() : any;
+   static Scope(): any;
 }
 
-export class LegendScope extends  Cx.Widget<Cx.PureContainerProps> {
-
-}
+export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/Legend.js

@@ -15,6 +15,12 @@ export class Legend extends HtmlElement {
       super.prepareData(context, instance);
    }
 
+   declareData() {
+      super.declareData(...arguments, {
+         shape: undefined,
+      });
+   }
+
    isValidHtmlAttribute(attrName) {
       switch (attrName) {
          case "shapeSize":
@@ -74,7 +80,7 @@ export class Legend extends HtmlElement {
                         onMouseMove={onMouseMove}
                         onMouseLeave={onMouseLeave}
                      >
-                        {this.renderShape(e)}
+                        {this.renderShape(e, instance.data.shape)}
                         {e.name}
                      </div>
                   ))
@@ -86,11 +92,11 @@ export class Legend extends HtmlElement {
       return [list, super.renderChildren(context, instance)];
    }
 
-   renderShape(entry) {
+   renderShape(entry, legendEntriesShape) {
       const className = this.CSS.element(this.baseClass, "shape", {
          [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
       });
-      const shape = getShape(entry.shape || "square");
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
 
       return (
          <svg
@@ -115,14 +121,14 @@ Legend.prototype.baseClass = "legend";
 Legend.prototype.vertical = false;
 Legend.prototype.memoize = false;
 Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
 Legend.prototype.svgSize = 20;
 
 Widget.alias("legend", Legend);
 
 Legend.Scope = class extends PureContainer {
    explore(context, instance) {
-      context.push("legends", (instance.legends = {
-      }));
+      context.push("legends", (instance.legends = {}));
       super.explore(context, instance);
    }
 

package/src/charts/PieChart.js

@@ -13,7 +13,7 @@ export class PieChart extends BoundedObject {
       super.declareData(...arguments, {
          angle: undefined,
          startAngle: 0,
-         clockwise: undefined
+         clockwise: undefined,
       });
    }
 
@@ -42,7 +42,7 @@ export class PieChart extends BoundedObject {
    }
 }
 
-      PieChart.prototype.anchors = "0 1 1 0";
+PieChart.prototype.anchors = "0 1 1 0";
 
 class PieCalculator {
    reset(angle, startAngle, clockwise) {
@@ -88,10 +88,8 @@ class PieCalculator {
       var angle = value * s.angleFactor;
       var startAngle = s.lastAngle;
 
-      if (!this.clockwise)
-         s.lastAngle += angle;
-      else
-         s.lastAngle -= angle;
+      if (!this.clockwise) s.lastAngle += angle;
+      else s.lastAngle -= angle;
 
       return {
          startAngle,
@@ -354,17 +352,17 @@ export class PieSlice extends Container {
    }
 }
 
-   PieSlice.prototype.offset = 0;
-   PieSlice.prototype.r0 = 0;
-   PieSlice.prototype.r = 50;
-   PieSlice.prototype.percentageRadius = true;
-   PieSlice.prototype.baseClass = "pieslice";
-   PieSlice.prototype.legend = "legend";
-   PieSlice.prototype.active = true;
-   PieSlice.prototype.stack = "stack";
-   PieSlice.prototype.legendAction = "auto";
-   PieSlice.prototype.legendShape = "rect";
-   PieSlice.prototype.hoverChannel = "default";
-   PieSlice.prototype.styled = true;
+PieSlice.prototype.offset = 0;
+PieSlice.prototype.r0 = 0;
+PieSlice.prototype.r = 50;
+PieSlice.prototype.percentageRadius = true;
+PieSlice.prototype.baseClass = "pieslice";
+PieSlice.prototype.legend = "legend";
+PieSlice.prototype.active = true;
+PieSlice.prototype.stack = "stack";
+PieSlice.prototype.legendAction = "auto";
+PieSlice.prototype.legendShape = "circle";
+PieSlice.prototype.hoverChannel = "default";
+PieSlice.prototype.styled = true;
 
 Widget.alias("pie-chart", PieChart);

package/src/data/StringTemplate.spec.js

@@ -1,95 +1,105 @@
-import { StringTemplate } from "./StringTemplate";
-import assert from "assert";
-
-describe("StringTemplate", function () {
-   describe("#compile()", function () {
-      it("returns a selector", function () {
-         var e = StringTemplate.compile("Hello {person.name}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello Jim");
-      });
-
-      it("properly encodes ' and \"", function () {
-         var e = StringTemplate.compile('It\'s "working"!');
-         assert.equal(e({}), 'It\'s "working"!');
-      });
-
-      it("supports multi-line strings", function () {
-         var e = StringTemplate.compile("a\nb");
-         assert.equal(e(), "a\nb");
-
-         var e = StringTemplate.compile("a\r\nb");
-         assert.equal(e(), "a\r\nb");
-      });
-   });
-
-   describe("double brackets are used to escape brackets", function () {
-      it("double brackets are preserved", function () {
-         var e = StringTemplate.compile("Hello {{person.name}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {person.name}");
-      });
-
-      it("triple brackets are converted to single brackets and a binding", function () {
-         var e = StringTemplate.compile("Hello {{{person.name}}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {Jim}");
-      });
-   });
-
-   describe("supports formatting", function () {
-      it("with colon", function () {
-         var e = StringTemplate.compile("{str:suffix;kg}");
-         assert.equal(e({ str: "5" }), "5kg");
-      });
-
-      it("with multiple formats", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
-         assert.equal(e({ str: "5" }), "(5kg)");
-      });
-
-      it("with null values", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-
-      it("of null values", function () {
-         var e = StringTemplate.compile("{str|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-   });
-
-   describe("supports expressions", function () {
-      it("using []", function () {
-         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("using %", function () {
-         var e = StringTemplate.compile("1 + 2 = %{1+2}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with subexpressions", function () {
-         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with a conditional operator", function () {
-         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-   });
-});
+import { StringTemplate } from "./StringTemplate";
+import assert from "assert";
+
+describe("StringTemplate", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         var e = StringTemplate.compile("Hello {person.name}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello Jim");
+      });
+
+      it("properly encodes ' and \"", function () {
+         var e = StringTemplate.compile('It\'s "working"!');
+         assert.equal(e({}), 'It\'s "working"!');
+      });
+
+      it("supports multi-line strings", function () {
+         var e = StringTemplate.compile("a\nb");
+         assert.equal(e(), "a\nb");
+
+         var e = StringTemplate.compile("a\r\nb");
+         assert.equal(e(), "a\r\nb");
+      });
+   });
+
+   describe("double brackets are used to escape brackets", function () {
+      it("double brackets are preserved", function () {
+         var e = StringTemplate.compile("Hello {{person.name}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {person.name}");
+      });
+
+      it("triple brackets are converted to single brackets and a binding", function () {
+         var e = StringTemplate.compile("Hello {{{person.name}}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {Jim}");
+      });
+   });
+
+   describe("supports formatting", function () {
+      it("with colon", function () {
+         var e = StringTemplate.compile("{str:suffix;kg}");
+         assert.equal(e({ str: "5" }), "5kg");
+      });
+
+      it("with multiple formats", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
+         assert.equal(e({ str: "5" }), "(5kg)");
+      });
+
+      it("with null values", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+
+      it("of null values", function () {
+         var e = StringTemplate.compile("{str|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+   });
+
+   describe("supports expressions", function () {
+      it("using []", function () {
+         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("using %", function () {
+         var e = StringTemplate.compile("1 + 2 = %{1+2}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with subexpressions", function () {
+         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with a conditional operator", function () {
+         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with sub-expression formatting", function () {
+         var e = StringTemplate.compile("{[!!{person.age} ? {person.age:suffix; years old} : 'Age unknown']}");
+         var state = {
+            person: {
+               age: 32,
+            },
+         };
+         assert.equal(e(state), "32 years old");
+      });
+   });
+});