cx 26.0.6 → 26.0.8

package/build/charts/palette.scss

@@ -0,0 +1,97 @@
+//https://www.materialui.co/colors
+//normal:200 900
+//hover:100 700
+//selected: 300 900
+//disabled: 0 100
+@use "sass:map";
+@use "sass:list";
+
+$cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
+   rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
+   rgba(76, 175, 80, 1) rgba(139, 195, 74, 1) rgba(205, 220, 57, 1) rgba(255, 235, 59, 1) rgba(255, 193, 7, 1)
+   rgba(255, 152, 0, 1) rgba(255, 87, 34, 1) !default;
+
+$cx-default-palette-fill-whiten: 60% !default;
+$cx-default-palette-fill-hover-whiten: 50% !default;
+$cx-default-palette-fill-selected-whiten: 20% !default;
+$cx-default-palette-fill-disabled-whiten: 90% !default;
+
+$cx-default-palette-fill-blacken: 0% !default;
+$cx-default-palette-fill-hover-blacken: 0% !default;
+$cx-default-palette-fill-selected-blacken: 0% !default;
+$cx-default-palette-fill-disabled-blacken: 0% !default;
+
+$cx-default-palette-stroke-whiten: 0% !default;
+$cx-default-palette-stroke-blacken: 10% !default;
+
+@mixin cx-palette(
+   $palette-colors: $cx-default-palette-colors,
+   $palette-fill-whiten: $cx-default-palette-fill-whiten,
+   $palette-fill-hover-whiten: $cx-default-palette-fill-hover-whiten,
+   $palette-fill-selected-whiten: $cx-default-palette-fill-selected-whiten,
+   $palette-fill-disabled-whiten: $cx-default-palette-fill-disabled-whiten,
+   $palette-fill-blacken: $cx-default-palette-fill-blacken,
+   $palette-fill-hover-blacken: $cx-default-palette-fill-hover-blacken,
+   $palette-fill-selected-blacken: $cx-default-palette-fill-selected-blacken,
+   $palette-fill-disabled-blacken: $cx-default-palette-fill-disabled-blacken,
+   $palette-stroke-whiten: $cx-default-palette-stroke-whiten,
+   $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   @for $i from 1 through list.length($palette-colors) {
+      $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
+
+      .#{$state}color-#{$i - 1} {
+         $fill: cx-blacken(cx-whiten($c, $palette-fill-whiten), $palette-fill-blacken);
+         $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+         fill: $fill;
+         stroke: $stroke;
+         background: $fill;
+         border-color: $stroke;
+
+         &.#{$state}selectable:hover,
+         &.#{$state}selectable.#{$state}hover,
+         .#{$state}color-root:hover &,
+         .#{$state}color-root.#{$state}hover & {
+            $fill: cx-blacken(cx-whiten($c, $palette-fill-hover-whiten), $palette-fill-hover-blacken);
+            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}selected,
+         &.#{$state}selected:hover,
+         &.#{$state}selected.#{$state}hover,
+         .#{$state}color-root.#{$state}selected &,
+         .#{$state}color-root.#{$state}selected:hover &,
+         .#{$state}color-root.#{$state}selected.#{$state}hover & {
+            $fill: cx-blacken(cx-whiten($c, $palette-fill-selected-whiten), $palette-fill-selected-blacken);
+            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}disabled,
+         .#{$state}color-root.#{$state}disabled & {
+            $fill: cx-blacken(cx-whiten($c, $palette-fill-disabled-whiten), $palette-fill-disabled-blacken);
+            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/palette")) {
+   @include cx-palette();
+}

package/build/charts/variables.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+@import "axis/variables";
+
+$cx-default-swimlanes-lane-background-color: #f1f1f1;
+$cx-default-range-marker-color: #696969;
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/charts/Bar": "cx/charts/palette",
+      "cx/charts/BarGraph": "cx/charts/palette",
+      "cx/charts/Column": "cx/charts/palette",
+      "cx/charts/ColumnGraph": "cx/charts/palette",
+      "cx/charts/LineGraph": "cx/charts/palette",
+      "cx/charts/ColorMap": "cx/charts/palette",
+      "cx/charts/ScatterGraph": "cx/charts/palette",
+      "cx/charts/BubbleGraph": "cx/charts/palette",
+      "cx/charts/MarkerLine": "cx/charts/palette",
+      "cx/charts/Marker": "cx/charts/palette",
+      "cx/charts/PieChart": "cx/charts/palette",
+   )
+);

package/build/global.scss

@@ -0,0 +1,14 @@
+
+$cx-include-global-rules: false !default;
+
+@mixin cx-global-rules() {
+   @each $tag, $styles in $cx-element-style-map {
+      #{$tag} {
+         @include cx-add-rules($styles)
+      }
+   }
+}
+
+@if ($cx-include-global-rules and cx-call-once('cx/globals')) {
+   @include cx-global-rules();
+}

package/build/index.scss

@@ -0,0 +1,6 @@
+@import "global";
+@import "util/index";
+@import "ui/index";
+@import "widgets/index";
+@import "svg/index";
+@import "charts/index";

package/build/jsx-runtime.d.ts

@@ -1,15 +1,16 @@
 import type { JSX as ReactJSX } from "react";
 import { Instance } from "./ui/Instance";
-import type { Prop } from "./ui/Prop";
+import type { ClassProp, Prop } from "./ui/Prop";
 import { Widget } from "./ui/Widget";
 import { HtmlElementConfig } from "./widgets/HtmlElement";
+import { ChildNode } from "./ui/Container";
 export declare function jsx(typeName: any, props: any, key?: string): any;
 export declare const jsxs: typeof jsx;
 type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
 type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
 type CxEventHandler<T> = T extends (event: infer E) => any ? string | ((event: E, instance: Instance) => void) : string | T;
 type CxIntrinsicElement<T> = {
-    [K in keyof T]: K extends "children" ? any : IsEventHandler<K, T[K]> extends true ? CxEventHandler<T[K]> : Prop<T[K]>;
+    [K in keyof T]: K extends "children" ? ChildNode | ChildNode[] : K extends "className" | "class" ? ClassProp : IsEventHandler<K, T[K]> extends true ? CxEventHandler<T[K]> : Prop<T[K]>;
 } & HtmlElementConfig;
 type CxIntrinsicElements = {
     [K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;

package/build/svg/Svg.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+
+@mixin cx-svg(
+   $name: 'svg',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      box-sizing: border-box;
+      overflow: hidden;
+      position: relative;
+      height: 150px; //default height
+
+      & > svg {
+         width: 100%;
+         height: 100%;
+         position: absolute;
+      }
+   }
+}
+
+@if (cx-should-include('cx/svg/Svg')) {
+   @include cx-svg;
+}

package/build/svg/index.scss

@@ -0,0 +1,9 @@
+.cxs-text-anchor-middle {
+   text-anchor: middle;
+}
+
+.cxs-text-anchor-right {
+   text-anchor: end;
+}
+
+@import "Svg";

package/build/ui/index.scss

@@ -0,0 +1,2 @@
+
+@import 'layout/index';

package/build/ui/layout/LabelsLeftLayout.scss

@@ -0,0 +1,47 @@
+
+@use "sass:map";
+
+@mixin cx-labelsleftlayout(
+   $name: 'labelsleftlayout',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}labelsleftlayout {
+      border-spacing: 0;
+
+      &.#{$mod}stretch {
+         width: 100%;
+
+         .#{$element}labelsleftlayout-label {
+            width: 5em;
+
+            .#{$block}label {
+               white-space: nowrap;
+            }
+         }
+      }
+   }
+
+   .#{$element}labelsleftlayout-field {
+      padding: 5px 0 5px 5px;
+   }
+
+   .#{$element}labelsleftlayout-label {
+      text-align: right;
+      vertical-align: top;
+
+      padding: 5px 5px 5px 0;
+
+      .#{$block}label {
+         padding-right: 0;
+      }
+   }
+}
+
+@if (cx-should-include('cx/ui/LabelsLeftLayout')) {
+  @include cx-labelsleftlayout();
+}

package/build/ui/layout/LabelsTopLayout.scss

@@ -0,0 +1,65 @@
+@use "sass:map";
+
+@mixin cx-labelstoplayout(
+   $name: 'labelstoplayout',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}labelstoplayout {
+      border-spacing: 0 3px;
+
+      &.#{$mod}stretch {
+         width: 100%;
+
+         //unsure what it does
+         //.#{$element}labelstoplayout-label {
+         //   width: 10em;
+         //}
+      }
+   }
+
+   .#{$element}labelstoplayout-field {
+      padding: 0 5px;
+      box-sizing: border-box;
+      vertical-align: top;
+
+      &:first-child {
+         padding-left: 0;
+      }
+
+      &:last-child {
+         padding-right: 0;
+      }
+   }
+
+   .#{$element}labelstoplayout-label {
+      vertical-align: bottom;
+      padding: 5px 5px 0 5px;
+      box-sizing: border-box;
+
+      .#{$block}label {
+         padding-left: 0;
+         padding-bottom: 0;
+      }
+
+      &:first-child {
+         padding-left: 0;
+      }
+
+      &:last-child {
+         padding-right: 0;
+      }
+   }
+
+   .#{$mod}fixed {
+      table-layout: fixed;
+   }
+}
+
+@if (cx-should-include('cx/ui/LabelsTopLayout')) {
+   @include cx-labelstoplayout();
+}

package/build/ui/layout/index.scss

@@ -0,0 +1,3 @@
+
+@import "LabelsLeftLayout";
+@import "LabelsTopLayout";

package/build/ui/layout/variables.scss

@@ -0,0 +1,2 @@
+
+// Layout variables

package/build/ui/variables.scss

@@ -0,0 +1,2 @@
+
+@import "layout/variables";

package/build/util/addEventListenerWithOptions.d.ts

@@ -12,6 +12,6 @@ interface EventMap {
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
 }
-export declare function addEventListenerWithOptions<K extends keyof EventMap>(element: Element, event: K, callback: (event: EventMap[K]) => void, options: AddEventListenerOptions): () => void;
-export declare function addEventListenerWithOptions(element: Element, event: string, callback: (event: Event) => void, options: AddEventListenerOptions): () => void;
+export declare function addEventListenerWithOptions<K extends keyof EventMap>(element: Element | Document, event: K, callback: (event: EventMap[K]) => void, options: AddEventListenerOptions): () => void;
+export declare function addEventListenerWithOptions(element: Element | Document, event: string, callback: (event: Event) => void, options: AddEventListenerOptions): () => void;
 export {};

package/build/util/call-once.scss

@@ -0,0 +1,7 @@
+$cx-call-once-data: () !default;
+
+@function cx-call-once($name) {
+   $result: map_get($cx-call-once-data, $name);
+   $cx-call-once-data: map_merge($cx-call-once-data, ($name: true)) !global;
+   @return $result != true;
+}

package/build/util/index.scss

@@ -0,0 +1,11 @@
+.cx-text-left.cx-text-left {
+   text-align: left;
+}
+
+.cx-text-right.cx-text-right {
+   text-align: right;
+}
+
+.cx-text-center.cx-text-center  {
+   text-align: center;
+}

package/build/util/scss/add-rules.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+
+@mixin cx-add-rules($styles) {
+   @each $rule, $value in $styles {
+      #{$rule}: $value;
+   }
+}
+
+@mixin cx-add-state-rules($state-style-map, $key) {
+   @include cx-add-rules(map.get($state-style-map, $key));
+}
+
+@function cx-merge-state-style-maps($state-style-map, $override-style-map) {
+   $result: $state-style-map;
+
+   @if ($override-style-map != null) {
+      @each $key, $new-value in $override-style-map {
+         $old-value: map.get($state-style-map, $key);
+         @if ($old-value != null) {
+            $new-value: map.merge($old-value, $new-value);
+         }
+         $result: map.merge(
+            $result,
+            (
+               $key: $new-value,
+            )
+         );
+      }
+   }
+
+   @return $result;
+}
+
+@function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
+   $result: map.get(map.get($state-style-map, $key), $rule);
+   @if ($result != null) {
+      @return $result;
+   }
+   @return $default;
+}

package/build/util/scss/calc.scss

@@ -0,0 +1,45 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
+@function cx-calc($lengths...) {
+   $units: ();
+
+   @each $l in $lengths {
+      $unit: math.unit($l);
+      @if (map.has-key($units, $unit)) {
+         $nl: map.get($units, $unit) + $l;
+         $units: map.merge($units, ($unit: $nl))
+      } @else {
+         $units: map.merge($units, ($unit: $l))
+      }
+   }
+
+   $keys: map.keys($units);
+   @if (list.length($keys) == 1) {
+      @return map.get($units, list.nth($keys, 1));
+   }
+
+   $calc: '';
+   $count: 0;
+
+   @each $u, $v in $units {
+      @if ($v != 0) {
+         $count: $count + 1;
+         @if ($count > 1) {
+            $calc: $calc + ' + ';
+         }
+         $calc: $calc + $v;
+      }
+   }
+
+   @if ($count == 0) {
+      @return 0;
+   }
+
+   @if ($count == 1) {
+      @return #{$calc};
+   }
+
+   @return #{'calc(' + $calc  + ')'};
+}

package/build/util/scss/call-once.scss

@@ -0,0 +1,13 @@
+@use "sass:map";
+
+$cx-call-once-data: () !default;
+
+@function cx-call-once($name) {
+   $result: map.get($cx-call-once-data, $name);
+   $cx-call-once-data: map.merge($cx-call-once-data, ($name: true)) !global;
+   @return $result != true;
+}
+
+@function cx-called-once($name) {
+   @return map.get($cx-call-once-data, $name);
+}

package/build/util/scss/clockwise.scss

@@ -0,0 +1,49 @@
+@use "sass:list";
+
+@function cx-top($list) {
+   @if (list.length($list) > 0) {
+      @return list.nth($list, 1);
+   }
+   @return null;
+}
+
+@function cx-right($list) {
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
+   }
+   @if (list.length($list) > 1) {
+      @return list.nth($list, 2);
+   }
+   @return null;
+}
+
+@function cx-bottom($list) {
+   @if (list.length($list) > 2) {
+      @return list.nth($list, 3);
+   }
+
+   @if (list.length($list) >= 1) {
+      @return list.nth($list, 1);
+   }
+
+   @return null;
+}
+
+@function cx-left($list) {
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
+   }
+
+   @if (list.length($list) == 2) {
+      @return list.nth($list, 2);
+   }
+
+   @if (list.length($list) == 3) {
+      @return list.nth($list, 2);
+   }
+
+   @if (list.length($list) == 4) {
+      @return list.nth($list, 4);
+   }
+   @return null;
+}

package/build/util/scss/colors.scss

@@ -0,0 +1,10 @@
+
+@use "sass:color";
+
+@function cx-whiten($color, $percentage) {
+   @return color.mix(white, $color, $percentage);
+}
+
+@function cx-blacken($color, $percentage) {
+   @return color.mix(black, $color, $percentage);
+}

package/build/util/scss/deep-get.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+@function cx-map-deep-get($map, $keys...){
+   @each $key in $keys {
+      $map: map.get($map, $key)
+   }
+   @if $map != null {
+      @return $map
+   } @else {
+      @return null
+   }
+};

package/build/util/scss/deep-merge.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:meta";
+
+@function cx-deep-map-merge($parent-map, $child-map) {
+	$result: $parent-map;
+	@each $key, $value in $child-map {
+		//If the parent map does not have the child map's key, or
+		//If their type don't match, or
+		//If they are not both maps,
+		@if (not map.has-key($result, $key)) or (meta.type-of(map.get($result, $key)) != meta.type-of($value)) or (not (meta.type-of(map.get($result, $key)) == map and meta.type-of($value) == map)) {
+			//Simply add that key to the parent map.
+			$result: map.merge($result, ($key: $value));
+		}
+		@else {
+			//If they are both maps, we need another non-destructive merger.
+			//Recursive, yay!
+			$result: map.merge($result, ($key: cx-deep-map-merge(map.get($result, $key), $value)));
+		}
+	}
+	@return $result;
+}

package/build/util/scss/divide.scss

@@ -0,0 +1,3 @@
+@function cx-divide($a, $b) {
+   @return $a / $b;
+}

package/build/util/scss/include.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@import "call-once";
+@import "colors";
+
+$cx-include-all: true !default;
+
+$cx-excluded: () !default;
+$cx-used: null !default;
+
+$cx-dependencies: () !default;
+
+@function cx-should-include($name, $once: true) {
+   @return (
+       (map.get($cx-excluded, $name) != true) and
+       ($cx-include-all or
+       ($cx-used != null and map.get($cx-used, $name) == true))
+   )
+   and ($once != true or cx-call-once($name));
+}
+
+@function cx-included($name) {
+   @return cx-called-once($name);
+}
+
+@function cx-widget($name) {
+   @if (map.get($cx-excluded, $name)) {
+      @return 0;
+   }
+   $cx-used: map.merge($cx-used, ($name: true)) !global;
+   $dummy: 1;
+   $deps: map.get($cx-dependencies, $name);
+   @if ($deps == null) {
+      @return 0;
+   }
+   @each $dep in $deps {
+      $dummy: cx-widget($dep);
+   }
+   @return $dummy;
+}
+
+@mixin cx-widgets($names...) {
+   $dummy: 1;
+   $cx-used: () !default !global;
+
+   @each $name in $names {
+      $dummy: cx-widget($name)
+   }
+}

package/build/util/scss/index.scss

@@ -0,0 +1,9 @@
+@import "add-rules";
+@import "calc";
+@import "call-once";
+@import "clockwise";
+@import "colors";
+@import "deep-merge";
+@import "deep-get";
+@import "include";
+@import "divide";