cx 26.3.10 → 26.4.1

package/dist/util.js

@@ -484,7 +484,7 @@ function skipQuotedString(bodyAndNext, openingQuote, i) {
  */
 function innerTextTrim(str) {
 	str = str.replace(/\t/g, "");
-	str = str.replace(/(\s*[\r\n]\s*)/g, " ");
+	str = str.replace(/(\s*[\r\n]\s*)/g, "");
 	return str;
 }
 

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,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.3.10",
+  "version": "26.4.1",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {
@@ -48,7 +48,8 @@
     "./sass/*": "./src/*",
     "./locale/*": "./build/locale/*",
     "./manifest": "./dist/manifest.js",
-    "./manifest.js": "./dist/manifest.js"
+    "./manifest.js": "./dist/manifest.js",
+    "./package.json": "./package.json"
   },
   "sideEffects": [
     "./src/widgets/icons/*.tsx",
@@ -70,7 +71,7 @@
   "dependencies": {
     "@types/route-parser": "^0.1.7",
     "intl-io": "^0.4.4",
-    "route-parser-ts": "^1.1.0"
+    "route-parser-ts": "^1.1.2"
   },
   "peerDependencies": {
     "@types/react": ">=18",

package/src/charts/BarGraph.scss

@@ -1,31 +1,31 @@
-@use "sass:math";
-@use "sass:map";
-@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 *;
-
-@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-bar {
-      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/BarGraph")) {
-   @include cx-bargraph();
-}
+@use "sass:math";
+@use "sass:map";
+@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 *;
+
+@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-bar {
+      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/BarGraph")) {
+   @include cx-bargraph();
+}

package/src/charts/Legend.scss

@@ -1,57 +1,57 @@
-@use "sass:math";
-@use "sass:map";
-@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 *;
-
-@mixin cx-legend($name: "legend", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: $cx-default-chart-legend-gap;
-   }
-
-   .#{$block}#{$name}.#{$state}vertical {
-      flex-direction: column;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      font-size: $cx-default-chart-legend-font-size;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-legend-shape-color;
-      stroke-width: $cx-default-chart-legend-shape-stroke-width;
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}
+@use "sass:math";
+@use "sass:map";
+@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 *;
+
+@mixin cx-legend($name: "legend", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: $cx-default-chart-legend-gap;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      font-size: $cx-default-chart-legend-font-size;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-legend-shape-color;
+      stroke-width: $cx-default-chart-legend-shape-stroke-width;
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/LegendEntry.scss

@@ -1,35 +1,35 @@
-@use "sass:math";
-@use "sass:map";
-@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 *;
-
-@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: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-shape-fill-color;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@use "sass:math";
+@use "sass:map";
+@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 *;
+
+@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: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-shape-fill-color;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.scss

@@ -1,28 +1,28 @@
-@use "sass:math";
-@use "sass:map";
-@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 *;
-
-@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: $cx-default-chart-line-stroke-color;
-      stroke-width: $cx-default-chart-line-stroke-width;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: $cx-default-chart-area-opacity;
-   }
-}
-
-@if (cx-should-include("cx/charts/LineGraph")) {
-   @include cx-linegraph();
-}
+@use "sass:math";
+@use "sass:map";
+@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 *;
+
+@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-line {
+      stroke: $cx-default-chart-line-stroke-color;
+      stroke-width: $cx-default-chart-line-stroke-width;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: $cx-default-chart-area-opacity;
+   }
+}
+
+@if (cx-should-include("cx/charts/LineGraph")) {
+   @include cx-linegraph();
+}

package/src/charts/Swimlane.scss

@@ -1,4 +1,7 @@
 @use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
 
 @mixin cx-swimlane($name: "swimlane", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
    $block: map.get($besm, block);

package/src/charts/Swimlanes.scss

@@ -1,4 +1,7 @@
 @use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
 
 @mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
    $block: map.get($besm, block);