cx 26.3.10 → 26.4.0

package/dist/widgets.css

@@ -3951,7 +3951,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-xsmall-padding > .cxe-menuitem-button {
-  left: calc(-5px + 0.5lh);
+  width: calc(6px + max(16px, 1lh));
 }
 
 .cxb-menuitem.cxs-small-padding > a, .cxb-menuitem.cxs-small-padding > span {
@@ -3978,7 +3978,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-small-padding > .cxe-menuitem-button {
-  left: calc(-3px + 0.5lh);
+  width: calc(10px + max(16px, 1lh));
 }
 
 .cxb-menuitem.cxs-medium-padding > a, .cxb-menuitem.cxs-medium-padding > span {
@@ -4005,7 +4005,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-medium-padding > .cxe-menuitem-button {
-  left: calc(2px + 0.5lh);
+  width: calc(20px + max(16px, 1lh));
 }
 
 .cxb-menuitem.cxs-large-padding > a, .cxb-menuitem.cxs-large-padding > span {
@@ -4032,7 +4032,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-large-padding > .cxe-menuitem-button {
-  left: calc(7px + 0.5lh);
+  width: calc(30px + max(16px, 1lh));
 }
 
 .cxb-menuitem.cxs-xlarge-padding > a, .cxb-menuitem.cxs-xlarge-padding > span {
@@ -4059,7 +4059,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-xlarge-padding > .cxe-menuitem-button {
-  left: calc(12px + 0.5lh);
+  width: calc(40px + max(16px, 1lh));
 }
 
 .cxe-menuitem-arrow {
@@ -4078,7 +4078,7 @@ th.cxe-calendar-display {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: max(16px, 1lh);
+  left: 0;
 }
 
 .cxe-menuitem-baseline {
@@ -5983,6 +5983,14 @@ th.cxe-calendar-display {
   width: 100%;
 }
 
+.cxb-labelstoplayout.cxm-top tbody > tr:first-child > .cxe-labelstoplayout-label {
+  padding-top: 0;
+}
+
+.cxb-labelstoplayout.cxm-top tbody > tr:first-child > .cxe-labelstoplayout-label .cxb-label {
+  padding-top: 0;
+}
+
 .cxe-labelstoplayout-field {
   padding: 0 5px;
   box-sizing: border-box;

package/dist/widgets.js

@@ -5752,6 +5752,9 @@ MenuSpacer.prototype.isMenuSpacer = true;
 class Menu extends HtmlElement {
 	static Item;
 	static Spacer;
+	constructor(config) {
+		super(config);
+	}
 	init() {
 		if (this.itemPadding === true) this.itemPadding = "medium";
 		if (this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultHorizontalItemPadding;

package/package.json

@@ -1,100 +1,100 @@
-{
-  "name": "cx",
-  "version": "26.3.10",
-  "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
-  "exports": {
-    "./data": {
-      "types": "./build/data/index.d.ts",
-      "default": "./build/data/index.js"
-    },
-    "./data/*": "./build/data/*",
-    "./util": {
-      "types": "./build/util/index.d.ts",
-      "default": "./build/util/index.js"
-    },
-    "./util/*": "./build/util/*",
-    "./widgets": {
-      "types": "./build/widgets/index.d.ts",
-      "default": "./build/widgets/index.js"
-    },
-    "./widgets/*": "./build/widgets/*",
-    "./ui": {
-      "types": "./build/ui/index.d.ts",
-      "default": "./build/ui/index.js"
-    },
-    "./ui/*": "./build/ui/*",
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "default": "./build/hooks/index.js"
-    },
-    "./hooks/*": "./build/hooks/*",
-    "./svg": {
-      "types": "./build/svg/index.d.ts",
-      "default": "./build/svg/index.js"
-    },
-    "./svg/*": "./build/svg/*",
-    "./charts": {
-      "types": "./build/charts/index.d.ts",
-      "default": "./build/charts/index.js"
-    },
-    "./charts/*": "./build/charts/*",
-    "./jsx-runtime": "./build/jsx-runtime.js",
-    "./jsx-runtime.js": "./build/jsx-runtime.js",
-    "./jsx-dev-runtime": "./build/jsx-dev-runtime.js",
-    "./jsx-dev-runtime.js": "./build/jsx-dev-runtime.js",
-    "./build/*": "./build/*",
-    "./src/core": "./src/core.d.ts",
-    "./src/*": "./src/*",
-    "./sass/*": "./src/*",
-    "./locale/*": "./build/locale/*",
-    "./manifest": "./dist/manifest.js",
-    "./manifest.js": "./dist/manifest.js"
-  },
-  "sideEffects": [
-    "./src/widgets/icons/*.tsx",
-    "./src/widgets/icons/*.ts",
-    "./build/widgets/icons/*.js"
-  ],
-  "scripts": {
-    "build": "yarn compile && node build",
-    "compile": "tsc -p tsconfig.compile.json",
-    "check-types": "tsc --noEmit",
-    "test": "ts-mocha -p tsconfig.mocha.json"
-  },
-  "author": "Codaxy",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/codaxy/cxjs"
-  },
-  "homepage": "https://cxjs.io",
-  "dependencies": {
-    "@types/route-parser": "^0.1.7",
-    "intl-io": "^0.4.4",
-    "route-parser-ts": "^1.1.0"
-  },
-  "peerDependencies": {
-    "@types/react": ">=18",
-    "@types/react-dom": ">=18",
-    "cx-react": ">=26",
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/codaxy/cxjs.git"
-  },
-  "devDependencies": {
-    "@types/jest": "^30.0.0",
-    "@types/mocha": "^10.0.10",
-    "@types/node": "^25.0.3",
-    "@types/react-dom": "^19.2.3",
-    "@types/react-test-renderer": "^19.1.0",
-    "cx-react": "workspace:*",
-    "mocha": "^11.7.5",
-    "react-test-renderer": "^19.2.3",
-    "ts-mocha": "^11.1.0",
-    "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "cx",
+  "version": "26.4.0",
+  "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
+  "exports": {
+    "./data": {
+      "types": "./build/data/index.d.ts",
+      "default": "./build/data/index.js"
+    },
+    "./data/*": "./build/data/*",
+    "./util": {
+      "types": "./build/util/index.d.ts",
+      "default": "./build/util/index.js"
+    },
+    "./util/*": "./build/util/*",
+    "./widgets": {
+      "types": "./build/widgets/index.d.ts",
+      "default": "./build/widgets/index.js"
+    },
+    "./widgets/*": "./build/widgets/*",
+    "./ui": {
+      "types": "./build/ui/index.d.ts",
+      "default": "./build/ui/index.js"
+    },
+    "./ui/*": "./build/ui/*",
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "default": "./build/hooks/index.js"
+    },
+    "./hooks/*": "./build/hooks/*",
+    "./svg": {
+      "types": "./build/svg/index.d.ts",
+      "default": "./build/svg/index.js"
+    },
+    "./svg/*": "./build/svg/*",
+    "./charts": {
+      "types": "./build/charts/index.d.ts",
+      "default": "./build/charts/index.js"
+    },
+    "./charts/*": "./build/charts/*",
+    "./jsx-runtime": "./build/jsx-runtime.js",
+    "./jsx-runtime.js": "./build/jsx-runtime.js",
+    "./jsx-dev-runtime": "./build/jsx-dev-runtime.js",
+    "./jsx-dev-runtime.js": "./build/jsx-dev-runtime.js",
+    "./build/*": "./build/*",
+    "./src/core": "./src/core.d.ts",
+    "./src/*": "./src/*",
+    "./sass/*": "./src/*",
+    "./locale/*": "./build/locale/*",
+    "./manifest": "./dist/manifest.js",
+    "./manifest.js": "./dist/manifest.js"
+  },
+  "sideEffects": [
+    "./src/widgets/icons/*.tsx",
+    "./src/widgets/icons/*.ts",
+    "./build/widgets/icons/*.js"
+  ],
+  "scripts": {
+    "build": "yarn compile && node build",
+    "compile": "tsc -p tsconfig.compile.json",
+    "check-types": "tsc --noEmit",
+    "test": "ts-mocha -p tsconfig.mocha.json"
+  },
+  "author": "Codaxy",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codaxy/cxjs"
+  },
+  "homepage": "https://cxjs.io",
+  "dependencies": {
+    "@types/route-parser": "^0.1.7",
+    "intl-io": "^0.4.4",
+    "route-parser-ts": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=18",
+    "@types/react-dom": ">=18",
+    "cx-react": ">=26",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/codaxy/cxjs.git"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^25.0.3",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-test-renderer": "^19.1.0",
+    "cx-react": "workspace:*",
+    "mocha": "^11.7.5",
+    "react-test-renderer": "^19.2.3",
+    "ts-mocha": "^11.1.0",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/charts/Bar.scss

@@ -1,32 +1,32 @@
-@use "sass:math";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@use "sass:map";
-
-@mixin cx-bar($name: "bar", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-rect {
-      stroke-width: $cx-default-chart-shape-stroke-width;
-      fill: $cx-default-chart-shape-fill-color;
-      stroke: $cx-default-chart-shape-stroke-color;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/Bar")) {
-   @include cx-bar();
-}
+@use "sass:math";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@use "sass:map";
+
+@mixin cx-bar($name: "bar", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-rect {
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/Bar")) {
+   @include cx-bar();
+}

package/src/charts/Bar.ts

@@ -1,114 +1,114 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarBase, ColumnBarBaseConfig, ColumnBarBaseInstance } from "./ColumnBarBase";
-import { Rect } from "../svg/util/Rect";
-import { isDefined } from "../util/isDefined";
-import { RenderingContext } from "../ui/RenderingContext";
-import { NumberProp, BooleanProp } from "../ui/Prop";
-
-export interface BarConfig extends ColumnBarBaseConfig {
-   /** Base value. Default value is `0`. */
-   x0?: NumberProp;
-
-   /** Size (height) of the bar in axis units. */
-   size?: NumberProp;
-
-   /** Set to true to auto calculate size and offset. Available only if the y axis is a category axis. */
-   autoSize?: BooleanProp;
-
-   /** Alias for size. */
-   height?: number;
-
-   /** Hide the base of the bar (x0). */
-   hiddenBase?: boolean;
-}
-
-export class Bar extends ColumnBarBase {
-   declare x0: number;
-   declare size: number;
-   declare autoSize: boolean;
-   declare height: number;
-   declare hiddenBase: boolean;
-
-   constructor(config: BarConfig) {
-      super(config);
-   }
-
-   init(): void {
-      if (isDefined(this.height)) this.size = this.height;
-
-      super.init();
-   }
-
-   declareData(...args: any[]): any {
-      return super.declareData(
-         {
-            x0: undefined,
-            size: undefined,
-            autoSize: undefined,
-         },
-         ...args,
-      );
-   }
-
-   checkValid(data: any): boolean {
-      return data.y != null && data.x != null && data.x0 != null;
-   }
-
-   explore(context: RenderingContext, instance: ColumnBarBaseInstance): void {
-      let { data, xAxis, yAxis } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (!data.valid) return;
-
-      if (data.active) {
-         yAxis.acknowledge(data.y, data.size, data.offset);
-
-         if (data.autoSize) yAxis.book(data.y, data.stacked ? data.stack : data.name);
-
-         if (data.stacked) {
-            xAxis.stacknowledge(data.stack, data.y, data.x0);
-            xAxis.stacknowledge(data.stack, data.y, data.x);
-         } else {
-            if (!this.hiddenBase) xAxis.acknowledge(data.x0);
-            xAxis.acknowledge(data.x);
-         }
-         super.explore(context, instance);
-      }
-   }
-
-   calculateRect(instance: ColumnBarBaseInstance): Rect {
-      let { data } = instance;
-      var { offset, size } = data;
-
-      if (data.autoSize) {
-         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
-         offset = (size / count) * (index - count / 2 + 0.5);
-         size = size / count;
-      }
-
-      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
-      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
-      var y1 = instance.yAxis.map(data.y, offset - size / 2);
-      var y2 = instance.yAxis.map(data.y, offset + size / 2);
-
-      var bounds = new Rect({
-         l: Math.min(x1, x2),
-         r: Math.max(x1, x2),
-         t: Math.min(y1, y2),
-         b: Math.max(y1, y2),
-      });
-
-      return bounds;
-   }
-}
-
-Bar.prototype.baseClass = "bar";
-Bar.prototype.x0 = 0;
-Bar.prototype.size = 1;
-Bar.prototype.autoSize = false;
-Bar.prototype.legendShape = "bar";
-Bar.prototype.hiddenBase = false;
-
-Widget.alias("bar", Bar);
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarBase, ColumnBarBaseConfig, ColumnBarBaseInstance } from "./ColumnBarBase";
+import { Rect } from "../svg/util/Rect";
+import { isDefined } from "../util/isDefined";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp } from "../ui/Prop";
+
+export interface BarConfig extends ColumnBarBaseConfig {
+   /** Base value. Default value is `0`. */
+   x0?: NumberProp;
+
+   /** Size (height) of the bar in axis units. */
+   size?: NumberProp;
+
+   /** Set to true to auto calculate size and offset. Available only if the y axis is a category axis. */
+   autoSize?: BooleanProp;
+
+   /** Alias for size. */
+   height?: number;
+
+   /** Hide the base of the bar (x0). */
+   hiddenBase?: boolean;
+}
+
+export class Bar extends ColumnBarBase {
+   declare x0: number;
+   declare size: number;
+   declare autoSize: boolean;
+   declare height: number;
+   declare hiddenBase: boolean;
+
+   constructor(config: BarConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (isDefined(this.height)) this.size = this.height;
+
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(
+         {
+            x0: undefined,
+            size: undefined,
+            autoSize: undefined,
+         },
+         ...args,
+      );
+   }
+
+   checkValid(data: any): boolean {
+      return data.y != null && data.x != null && data.x0 != null;
+   }
+
+   explore(context: RenderingContext, instance: ColumnBarBaseInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (!data.valid) return;
+
+      if (data.active) {
+         yAxis.acknowledge(data.y, data.size, data.offset);
+
+         if (data.autoSize) yAxis.book(data.y, data.stacked ? data.stack : data.name);
+
+         if (data.stacked) {
+            xAxis.stacknowledge(data.stack, data.y, data.x0);
+            xAxis.stacknowledge(data.stack, data.y, data.x);
+         } else {
+            if (!this.hiddenBase) xAxis.acknowledge(data.x0);
+            xAxis.acknowledge(data.x);
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   calculateRect(instance: ColumnBarBaseInstance): Rect {
+      let { data } = instance;
+      var { offset, size } = data;
+
+      if (data.autoSize) {
+         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
+         offset = (size / count) * (index - count / 2 + 0.5);
+         size = size / count;
+      }
+
+      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
+      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
+      var y1 = instance.yAxis.map(data.y, offset - size / 2);
+      var y2 = instance.yAxis.map(data.y, offset + size / 2);
+
+      var bounds = new Rect({
+         l: Math.min(x1, x2),
+         r: Math.max(x1, x2),
+         t: Math.min(y1, y2),
+         b: Math.max(y1, y2),
+      });
+
+      return bounds;
+   }
+}
+
+Bar.prototype.baseClass = "bar";
+Bar.prototype.x0 = 0;
+Bar.prototype.size = 1;
+Bar.prototype.autoSize = false;
+Bar.prototype.legendShape = "bar";
+Bar.prototype.hiddenBase = false;
+
+Widget.alias("bar", Bar);