cx 25.6.2 → 25.6.3

package/dist/widgets.css

@@ -2519,6 +2519,11 @@ th.cxe-calendar-display {
   padding: 0 0.5em;
   color: lightgray;
 }
+.cxb-monthpicker th.cxs-unselectable {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
 .cxb-monthpicker .cxe-monthpicker-year {
   font-size: 120%;
   color: gray;

package/dist/widgets.js

@@ -1813,6 +1813,7 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 				key: data.key,
 				recordName: this.recordName,
 				immutable: this.immutable,
+				sealed: this.sealed,
 			});
 			instance.clearChildrenCache();
 		}
@@ -1822,6 +1823,7 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 })(PureContainer);
 Sandbox.prototype.recordName = "$page";
 Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
 Widget.alias("sandbox", Sandbox);
 
 var CxCredit = /*#__PURE__*/ (function (_HtmlElement) {
@@ -8161,7 +8163,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
 			widget = instance.widget;
 		e.stopPropagation();
 		if (data.disabled) return;
-		if (!validationCheck$1(date, data)) return;
+		if (!validationCheck(date, data)) return;
 		if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
 		if (widget.partial) {
 			var mixed = parseDateInvariant(data.value);
@@ -8191,7 +8193,7 @@ Calendar.prototype.todayButtonText = "Today";
 Calendar.prototype.startWithMonday = false;
 Calendar.prototype.focusable = true;
 Localization.registerPrototype("cx/widgets/Calendar", Calendar);
-var validationCheck$1 = function validationCheck(date, data, disabledDaysOfWeek) {
+var validationCheck = function validationCheck(date, data, disabledDaysOfWeek) {
 	if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
 	if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
 	if (disabledDaysOfWeek && disabledDaysOfWeek.includes(date.getDay())) return false;
@@ -8514,7 +8516,7 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 			var days = [];
 			for (var i = 0; i < 7; i++) {
 				var dayInfo = (data.dayData && data.dayData[date.toDateString()]) || empty;
-				var unselectable = !validationCheck$1(date, data, disabledDaysOfWeek);
+				var unselectable = !validationCheck(date, data, disabledDaysOfWeek);
 				var classNames = CSS.expand(
 					CSS.element(baseClass, "day", {
 						outside: month != date.getMonth(),
@@ -10811,8 +10813,8 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 	_proto.init = function init() {
 		_Field.prototype.init.call(this);
 	};
-	_proto.prepareData = function prepareData(context, _ref) {
-		var data = _ref.data;
+	_proto.prepareData = function prepareData(context, instance) {
+		var data = instance.data;
 		data.stateMods = {
 			disabled: data.disabled,
 		};
@@ -10828,6 +10830,13 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 		if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
 		if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
 		if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
+		if (this.onCreateIsMonthDateSelectable) {
+			instance.isMonthDateSelectable = instance.invoke(
+				"onCreateIsMonthDateSelectable",
+				data.validationParams,
+				instance,
+			);
+		}
 		_Field.prototype.prepareData.apply(this, arguments);
 	};
 	_proto.validate = function validate(context, instance) {
@@ -10864,10 +10873,12 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 	};
 	_proto.handleSelect = function handleSelect(e, instance, date1, date2) {
 		var data = instance.data,
-			widget = instance.widget;
+			widget = instance.widget,
+			isMonthDateSelectable = instance.isMonthDateSelectable;
 		var encode = widget.encoding || Culture.getDefaultDateEncoding();
 		if (data.disabled) return;
-		if (!validationCheck(date1, data)) return;
+		if (isMonthDateSelectable && !isMonthDateSelectable(date1)) return;
+		if (!dateSelectableCheck(date1, data)) return;
 		if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
 		if (this.range) {
 			instance.set("from", encode(date1));
@@ -10894,7 +10905,7 @@ MonthPicker.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
 MonthPicker.prototype.inclusiveTo = false;
 Localization.registerPrototype("cx/widgets/MonthPicker", MonthPicker);
 Widget.alias("month-picker", MonthPicker);
-var validationCheck = function validationCheck(date, data) {
+var dateSelectableCheck = function dateSelectableCheck(date, data) {
 	if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
 	if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
 	return true;
@@ -11153,11 +11164,11 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (this.props.onFocusOut) this.props.onFocusOut();
 	};
 	_proto2.getCursorDates = function getCursorDates(cursor) {
-		var _ref2 = cursor || this.state,
-			cursorMonth = _ref2.cursorMonth,
-			cursorYear = _ref2.cursorYear,
-			cursorQuarter = _ref2.cursorQuarter,
-			column = _ref2.column;
+		var _ref = cursor || this.state,
+			cursorMonth = _ref.cursorMonth,
+			cursorYear = _ref.cursorYear,
+			cursorQuarter = _ref.cursorQuarter,
+			column = _ref.column;
 		switch (column) {
 			case "M":
 				return [new Date(cursorYear, cursorMonth - 1, 1), new Date(cursorYear, cursorMonth, 1)];
@@ -11240,7 +11251,8 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var _this3 = this;
 		var instance = this.props.instance;
 		var data = instance.data,
-			widget = instance.widget;
+			widget = instance.widget,
+			isMonthDateSelectable = instance.isMonthDateSelectable;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass,
 			startYear = widget.startYear,
@@ -11279,30 +11291,50 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var monthNames = Culture.getDateTimeCulture().getMonthNames("short");
 		var showCursor = this.state.hover || this.state.focused;
 		for (var y = start; y <= end; y++) {
+			var selectableMonths = 4095;
+			// Loop through the months in a year to check if all months are unselectable
+			for (var i = 0; i < 12; i++) {
+				if (
+					(isMonthDateSelectable && !isMonthDateSelectable(new Date(y, i, 1))) ||
+					!dateSelectableCheck(new Date(y, i, 1), data)
+				) {
+					// Set month as unselectable at specified bit
+					selectableMonths &= ~(1 << i);
+				}
+			}
+
+			// All bits are 0 - all months are unselectable
+			var unselectableYear = selectableMonths === 0;
 			var rows = [];
 			for (var q = 0; q < 4; q++) {
 				var row = [];
-				if (q == 0)
+				if (q == 0) {
 					row.push(
 						/*#__PURE__*/ jsx(
 							"th",
 							{
 								rowSpan: 4,
 								"data-point": "Y-" + y,
-								className: CSS.element(baseClass, "year", {
-									cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
-								}),
-								onMouseEnter: this.handleMouseEnter,
-								onMouseDown: this.handleMouseDown,
-								onMouseUp: this.handleMouseUp,
+								className: CSS.expand(
+									CSS.element(baseClass, "year", {
+										cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
+									}),
+									CSS.state({
+										unselectable: unselectableYear,
+									}),
+								),
+								onMouseEnter: unselectableYear ? null : this.handleMouseEnter,
+								onMouseDown: unselectableYear ? null : this.handleMouseDown,
+								onMouseUp: unselectableYear ? null : this.handleMouseUp,
 								children: y,
 							},
 							"year",
 						),
 					);
-				for (var i = 0; i < 3; i++) {
-					var m = q * 3 + i + 1;
-					var unselectable = !validationCheck(new Date(y, m - 1, 1), data);
+				}
+				for (var _i = 0; _i < 3; _i++) {
+					var m = q * 3 + _i + 1;
+					var unselectableMonth = (selectableMonths & (1 << (m - 1))) === 0;
 					var mno = y * 12 + m - 1;
 					var handle = true; //isTouchDevice(); //mno === from || mno === to - 1;
 					row.push(
@@ -11314,14 +11346,14 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 										showCursor && this.state.column == "M" && y == this.state.cursorYear && m == this.state.cursorMonth,
 									handle: handle,
 									selected: mno >= from && mno < to,
-									unselectable: unselectable,
+									unselectable: unselectableMonth,
 								}),
 								"data-point": "Y-" + y + "-M-" + m,
-								onMouseEnter: unselectable ? null : this.handleMouseEnter,
-								onMouseDown: unselectable ? null : this.handleMouseDown,
-								onMouseUp: unselectable ? null : this.handleMouseUp,
-								onTouchStart: unselectable ? null : this.handleMouseDown,
-								onTouchMove: unselectable ? null : this.handleTouchMove,
+								onMouseEnter: unselectableMonth ? null : this.handleMouseEnter,
+								onMouseDown: unselectableMonth ? null : this.handleMouseDown,
+								onMouseUp: unselectableMonth ? null : this.handleMouseUp,
+								onTouchStart: unselectableMonth ? null : this.handleMouseDown,
+								onTouchMove: unselectableMonth ? null : this.handleTouchMove,
 								onTouchEnd: this.handleMouseUp,
 								children: monthNames[m - 1].substr(0, 3),
 							},
@@ -11329,7 +11361,16 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						),
 					);
 				}
-				if (!hideQuarters)
+				if (!hideQuarters) {
+					var unselectableQuarter = true;
+					var _start = q * 3;
+					for (var _i2 = _start; _i2 < _start + 3; _i2++) {
+						if ((selectableMonths & (1 << _i2)) !== 0) {
+							// found a selectable month in a quarter
+							unselectableQuarter = false;
+							break;
+						}
+					}
 					row.push(
 						/*#__PURE__*/ jsx(
 							"th",
@@ -11340,16 +11381,18 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 										this.state.column == "Q" &&
 										y == this.state.cursorYear &&
 										q == this.state.cursorQuarter,
+									unselectable: unselectableQuarter,
 								}),
 								"data-point": "Y-" + y + "-Q-" + q,
-								onMouseEnter: this.handleMouseEnter,
-								onMouseDown: this.handleMouseDown,
-								onMouseUp: this.handleMouseUp,
+								onMouseEnter: unselectableQuarter ? null : this.handleMouseEnter,
+								onMouseDown: unselectableQuarter ? null : this.handleMouseDown,
+								onMouseUp: unselectableQuarter ? null : this.handleMouseUp,
 								children: "Q" + (q + 1),
 							},
 							"q" + q,
 						),
 					);
+				}
 				rows.push(row);
 			}
 			years.push(rows);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "25.6.2",
+   "version": "25.6.3",
    "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,45 +1,45 @@
-import * as Cx from "../core";
-
-interface LegendProps extends Cx.HtmlElementProps {
-   /** Name of the legend. Default is `legend`. */
-   name?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string;
-
-   /** Switch to vertical mode. */
-   vertical?: boolean;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number;
-
-   /** Default shape that will be applied to the all legend items. */
-   shape?: Cx.StringProp;
-
-   /** CSS style that will be applied to the legend entry. */
-   entryStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry. */
-   entryClass?: Cx.ClassProp;
-
-   /** CSS style that will be applied to the legend entry value segment. */
-   valueStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry value segment. */
-   valueClass?: Cx.ClassProp;
-
-   /** Set to true to show values. Mostly used for PieChart legends. */
-   showValues?: Cx.BooleanProp;
-
-   /** Format used for values, i.e. n;2 or currency. The default value is s.*/
-   valueFormat?: string;
-}
-
-export class Legend extends Cx.Widget<LegendProps> {
-   static Scope(): any;
-}
-
-export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}
+import * as Cx from "../core";
+
+interface LegendProps extends Cx.HtmlElementProps {
+   /** Name of the legend. Default is `legend`. */
+   name?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `legend`. */
+   baseClass?: string;
+
+   /** Switch to vertical mode. */
+   vertical?: boolean;
+
+   /** Size of the svg shape container in pixels. Default value is 20. */
+   svgSize?: number;
+
+   /** Shape size in pixels. Default value is 18. */
+   shapeSize?: number;
+
+   /** Default shape that will be applied to the all legend items. */
+   shape?: Cx.StringProp;
+
+   /** CSS style that will be applied to the legend entry. */
+   entryStyle?: Cx.StyleProp;
+
+   /** CSS class that will be applied to the legend entry. */
+   entryClass?: Cx.ClassProp;
+
+   /** CSS style that will be applied to the legend entry value segment. */
+   valueStyle?: Cx.StyleProp;
+
+   /** CSS class that will be applied to the legend entry value segment. */
+   valueClass?: Cx.ClassProp;
+
+   /** Set to true to show values. Mostly used for PieChart legends. */
+   showValues?: Cx.BooleanProp;
+
+   /** Format used for values, i.e. n;2 or currency. The default value is s.*/
+   valueFormat?: string;
+}
+
+export class Legend extends Cx.Widget<LegendProps> {
+   static Scope(): any;
+}
+
+export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/LegendEntry.js

@@ -1,128 +1,128 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { getShape } from "./shapes";
-import { Selection } from "../ui/selection/Selection";
-import { stopPropagation } from "../util/eventCallbacks";
-import { isUndefined } from "../util/isUndefined";
-import { Container } from "../ui/Container";
-
-export class LegendEntry extends Container {
-   init() {
-      this.selection = Selection.create(this.selection);
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(...arguments, selection, {
-         selected: undefined,
-         shape: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         active: true,
-         size: undefined,
-         rx: undefined,
-         ry: undefined,
-         text: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      var { data } = instance;
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      var { data, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
-
-      e.stopPropagation();
-
-      var any = this.legendAction == "auto";
-
-      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
-
-      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-         >
-            {this.renderShape(instance)}
-            {content != null && <div>{content}</div>}
-         </div>
-      );
-   }
-
-   renderShape(instance) {
-      var entry = instance.data;
-      var className = this.CSS.element(this.baseClass, "shape", {
-         disabled: entry.disabled,
-         selected: entry.selected || this.selection.isInstanceSelected(instance),
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      var shape = getShape(entry.shape || "square");
-
-      // if the entry has a custom fill or stroke set, use it for both values
-      let style = { ...entry.style };
-      style.fill = style.fill ?? style.stroke;
-      style.stroke = style.stroke ?? style.fill;
-
-      return (
-         <svg
-            key="svg"
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
-               style,
-               className,
-               rx: entry.rx,
-               ry: entry.ry,
-            })}
-         </svg>
-      );
-   }
-}
-
-LegendEntry.prototype.baseClass = "legendentry";
-LegendEntry.prototype.shape = "square";
-LegendEntry.prototype.legendAction = "auto";
-LegendEntry.prototype.size = 18;
-LegendEntry.prototype.svgSize = 20;
-LegendEntry.prototype.styled = true;
-
-Widget.alias("legend-entry", LegendEntry);
+import { Widget, VDOM } from "../ui/Widget";
+import { getShape } from "./shapes";
+import { Selection } from "../ui/selection/Selection";
+import { stopPropagation } from "../util/eventCallbacks";
+import { isUndefined } from "../util/isUndefined";
+import { Container } from "../ui/Container";
+
+export class LegendEntry extends Container {
+   init() {
+      this.selection = Selection.create(this.selection);
+      super.init();
+   }
+
+   declareData() {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(...arguments, selection, {
+         selected: undefined,
+         shape: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         name: undefined,
+         active: true,
+         size: undefined,
+         rx: undefined,
+         ry: undefined,
+         text: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      var { data } = instance;
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+      super.explore(context, instance);
+   }
+
+   prepare(context, instance) {
+      var { data, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+   }
+
+   handleClick(e, instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      e.stopPropagation();
+
+      var any = this.legendAction == "auto";
+
+      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
+
+      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+         >
+            {this.renderShape(instance)}
+            {content != null && <div>{content}</div>}
+         </div>
+      );
+   }
+
+   renderShape(instance) {
+      var entry = instance.data;
+      var className = this.CSS.element(this.baseClass, "shape", {
+         disabled: entry.disabled,
+         selected: entry.selected || this.selection.isInstanceSelected(instance),
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      var shape = getShape(entry.shape || "square");
+
+      // if the entry has a custom fill or stroke set, use it for both values
+      let style = { ...entry.style };
+      style.fill = style.fill ?? style.stroke;
+      style.stroke = style.stroke ?? style.fill;
+
+      return (
+         <svg
+            key="svg"
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
+               style,
+               className,
+               rx: entry.rx,
+               ry: entry.ry,
+            })}
+         </svg>
+      );
+   }
+}
+
+LegendEntry.prototype.baseClass = "legendentry";
+LegendEntry.prototype.shape = "square";
+LegendEntry.prototype.legendAction = "auto";
+LegendEntry.prototype.size = 18;
+LegendEntry.prototype.svgSize = 20;
+LegendEntry.prototype.styled = true;
+
+Widget.alias("legend-entry", LegendEntry);

package/src/charts/LegendEntry.scss

@@ -1,27 +1,27 @@
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: 5px;
-      gap: 5px;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: #eee;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 5px;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: #eee;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}