cx 23.4.5 → 23.5.0

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;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.4.5",
+   "version": "23.5.0",
    "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/widgets/form/DateTimeField.d.ts

@@ -1,83 +1,86 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-export interface DateTimeFieldProps extends FieldProps {
-   /** Selected date. This should be a Date object or a valid date string consumable by Date.parse function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** Defaults to false. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Date format used to display the selected date. See Formatting for more details. */
-   format?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `datefield`. */
-   baseClass?: string;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** Error message used to indicate wrong user input, e.g. invalid date entered. */
-   inputErrorText?: string;
-
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: string;
-
-   /** Set to false to hide the clear button. It can be used interchangeably with the hideClear property. Default value is true. */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Set to true to hide the clear button. It can be used interchangeably with the showClear property. Default value is false. */
-   hideClear?: boolean;
-
-   /** Determines which segment of date/time is used. Default value is `datetime`. */
-   segment?: "date" | "time" | "datetime";
-
-   /** Set to `true` to indicate that only one segment of the selected date is affected. */
-   partial?: boolean;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[];
-
-   /** Set to true to focus the input field instead of the picker first. */
-   focusInputFirst?: boolean;
-}
-
-export class DateTimeField extends Cx.Widget<DateTimeFieldProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+export interface DateTimeFieldProps extends FieldProps {
+   /** Selected date. This should be a Date object or a valid date string consumable by Date.parse function. */
+   value?: Cx.Prop<string | Date>;
+
+   /** Defaults to false. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: Cx.BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: Cx.StringProp;
+
+   /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
+   minValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: Cx.BooleanProp;
+
+   /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
+   maxValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: Cx.BooleanProp;
+
+   /** Date format used to display the selected date. See Formatting for more details. */
+   format?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `datefield`. */
+   baseClass?: string;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** Error message used to indicate wrong user input, e.g. invalid date entered. */
+   inputErrorText?: string;
+
+   /** Name of the icon to be put on the left side of the input. */
+   icon?: string;
+
+   /** Set to false to hide the clear button. It can be used interchangeably with the hideClear property. Default value is true. */
+   showClear?: boolean;
+
+   /**
+    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
+    */
+   alwaysShowClear?: boolean;
+
+   /** Set to true to hide the clear button. It can be used interchangeably with the showClear property. Default value is false. */
+   hideClear?: boolean;
+
+   /** Determines which segment of date/time is used. Default value is `datetime`. */
+   segment?: "date" | "time" | "datetime";
+
+   /** Set to `true` to indicate that only one segment of the selected date is affected. */
+   partial?: boolean;
+
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
+
+   /** Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to focus the input field instead of the picker first. */
+   focusInputFirst?: boolean;
+
+   /** Set to true to enable seconds segment in the picker. */
+   showSeconds?: boolean;
+}
+
+export class DateTimeField extends Cx.Widget<DateTimeFieldProps> {}