cx 26.4.2 → 26.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/build/jsx-dev-runtime.d.ts +1 -0
  2. package/build/jsx-dev-runtime.d.ts.map +1 -1
  3. package/build/jsx-dev-runtime.js +1 -0
  4. package/dist/manifest.js +889 -889
  5. package/package.json +1 -1
  6. package/src/charts/BarGraph.scss +31 -31
  7. package/src/charts/Legend.scss +57 -57
  8. package/src/charts/LegendEntry.scss +35 -35
  9. package/src/charts/LineGraph.scss +28 -28
  10. package/src/charts/helpers/SnapPointFinder.ts +136 -136
  11. package/src/charts/helpers/ValueAtFinder.ts +72 -72
  12. package/src/data/createAccessorModelProxy.ts +66 -66
  13. package/src/jsx-dev-runtime.ts +1 -0
  14. package/src/ui/DataProxy.ts +55 -55
  15. package/src/ui/Repeater.spec.tsx +181 -181
  16. package/src/ui/Rescope.ts +50 -50
  17. package/src/ui/adapter/ArrayAdapter.ts +229 -229
  18. package/src/ui/exprHelpers.ts +96 -96
  19. package/src/util/scss/include.scss +69 -69
  20. package/src/widgets/Button.maps.scss +103 -103
  21. package/src/widgets/Sandbox.ts +104 -104
  22. package/src/widgets/form/Calendar.tsx +772 -772
  23. package/src/widgets/form/ColorField.scss +112 -112
  24. package/src/widgets/form/DateTimeField.scss +111 -111
  25. package/src/widgets/form/LookupField.maps.scss +26 -26
  26. package/src/widgets/form/LookupField.scss +227 -227
  27. package/src/widgets/form/MonthField.scss +113 -113
  28. package/src/widgets/form/NumberField.scss +72 -72
  29. package/src/widgets/form/Select.scss +104 -104
  30. package/src/widgets/form/TextField.scss +66 -66
  31. package/src/widgets/grid/Grid.scss +657 -657
  32. package/src/widgets/grid/variables.scss +47 -47
  33. package/src/widgets/index.ts +63 -63
  34. package/src/widgets/nav/MenuItem.scss +150 -150
  35. package/src/widgets/nav/MenuItem.tsx +525 -525
  36. package/src/widgets/nav/Tab.ts +122 -122
  37. package/src/widgets/overlay/Overlay.tsx +1029 -1029
  38. package/src/widgets/variables.scss +61 -61
@@ -1,112 +1,112 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../variables" as *;
4
- @use "../maps" as *;
5
- @use "../../util/call-once.scss" as *;
6
- @use "../../util/scss/add-rules.scss" as *;
7
- @use "../../util/scss/calc.scss" as *;
8
- @use "../../util/scss/clockwise.scss" as *;
9
- @use "../../util/scss/deep-merge.scss" as *;
10
- @use "../../util/scss/besm.scss" as *;
11
- @use "../../util/scss/include.scss" as *;
12
- @use "./Field.scss" as *;
13
- @use "./ColorPicker.scss" as *;
14
-
15
- @mixin cx-colorfield(
16
- $name: "colorfield",
17
- $state-style-map: $cx-std-field-state-style-map,
18
- $placeholder: $cx-input-placeholder,
19
- $empty-text: $cx-empty-text,
20
- $clear-state-style-map: $cx-clear-state-style-map,
21
- $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
22
- $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
23
- $width: $cx-default-input-width,
24
- $icon-size: $cx-default-icon-size,
25
- $besm: $cx-besm
26
- ) {
27
- $block: map.get($besm, block);
28
- $element: map.get($besm, element);
29
- $state: map.get($besm, state);
30
-
31
- .#{$block}#{$name} {
32
- @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
33
- }
34
-
35
- $padding: cx-get-state-rule($state-style-map, default, "padding");
36
-
37
- .#{$element}#{$name}-input {
38
- @include cxe-field-input(
39
- $besm,
40
- $state-style-map,
41
- $placeholder: $placeholder,
42
- $overrides: (
43
- default: (
44
- font-family: $cx-default-colorfield-font-family,
45
- font-size: 11px,
46
- padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
47
- cx-bottom($padding)
48
- cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
49
- )
50
- )
51
- );
52
- }
53
-
54
- .#{$element}#{$name}-clear {
55
- @include cxe-field-button($besm, $clear-state-style-map);
56
-
57
- .#{$state}focus > & {
58
- @include cx-add-state-rules($clear-state-style-map, focus);
59
- }
60
- .#{$state}error > & {
61
- @include cx-add-state-rules($clear-state-style-map, error);
62
- }
63
- }
64
-
65
- .#{$element}#{$name}-right-icon {
66
- @include cxe-field-button($besm, $right-icon-state-style-map);
67
-
68
- .#{$state}focus > & {
69
- @include cx-add-state-rules($right-icon-state-style-map, focus);
70
- }
71
- .#{$state}error > & {
72
- @include cx-add-state-rules($right-icon-state-style-map, error);
73
- }
74
- }
75
-
76
- .#{$element}#{$name}-left-icon {
77
- box-sizing: border-box;
78
-
79
- @include cx-checker-background();
80
-
81
- @include cxe-field-button(
82
- $besm,
83
- cx-deep-map-merge(
84
- $left-icon-state-style-map,
85
- (
86
- default: (
87
- opacity: 1,
88
- cursor: pointer,
89
- ),
90
- )
91
- )
92
- );
93
-
94
- div {
95
- width: 100%;
96
- height: 100%;
97
- border-radius: inherit;
98
- }
99
- }
100
-
101
- .#{$element}#{$name}-icon {
102
- @include cxe-field-button-icon($besm, $icon-size);
103
- }
104
-
105
- .#{$element}#{$name}-empty-text {
106
- @include cxe-field-empty-text($empty-text);
107
- }
108
- }
109
-
110
- @if (cx-should-include("cx/widgets/ColorField")) {
111
- @include cx-colorfield();
112
- }
1
+ @use "sass:math";
2
+ @use "sass:map";
3
+ @use "../variables" as *;
4
+ @use "../maps" as *;
5
+ @use "../../util/call-once.scss" as *;
6
+ @use "../../util/scss/add-rules.scss" as *;
7
+ @use "../../util/scss/calc.scss" as *;
8
+ @use "../../util/scss/clockwise.scss" as *;
9
+ @use "../../util/scss/deep-merge.scss" as *;
10
+ @use "../../util/scss/besm.scss" as *;
11
+ @use "../../util/scss/include.scss" as *;
12
+ @use "./Field.scss" as *;
13
+ @use "./ColorPicker.scss" as *;
14
+
15
+ @mixin cx-colorfield(
16
+ $name: "colorfield",
17
+ $state-style-map: $cx-std-field-state-style-map,
18
+ $placeholder: $cx-input-placeholder,
19
+ $empty-text: $cx-empty-text,
20
+ $clear-state-style-map: $cx-clear-state-style-map,
21
+ $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
22
+ $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
23
+ $width: $cx-default-input-width,
24
+ $icon-size: $cx-default-icon-size,
25
+ $besm: $cx-besm
26
+ ) {
27
+ $block: map.get($besm, block);
28
+ $element: map.get($besm, element);
29
+ $state: map.get($besm, state);
30
+
31
+ .#{$block}#{$name} {
32
+ @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
33
+ }
34
+
35
+ $padding: cx-get-state-rule($state-style-map, default, "padding");
36
+
37
+ .#{$element}#{$name}-input {
38
+ @include cxe-field-input(
39
+ $besm,
40
+ $state-style-map,
41
+ $placeholder: $placeholder,
42
+ $overrides: (
43
+ default: (
44
+ font-family: $cx-default-colorfield-font-family,
45
+ font-size: 11px,
46
+ padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
47
+ cx-bottom($padding)
48
+ cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
49
+ )
50
+ )
51
+ );
52
+ }
53
+
54
+ .#{$element}#{$name}-clear {
55
+ @include cxe-field-button($besm, $clear-state-style-map);
56
+
57
+ .#{$state}focus > & {
58
+ @include cx-add-state-rules($clear-state-style-map, focus);
59
+ }
60
+ .#{$state}error > & {
61
+ @include cx-add-state-rules($clear-state-style-map, error);
62
+ }
63
+ }
64
+
65
+ .#{$element}#{$name}-right-icon {
66
+ @include cxe-field-button($besm, $right-icon-state-style-map);
67
+
68
+ .#{$state}focus > & {
69
+ @include cx-add-state-rules($right-icon-state-style-map, focus);
70
+ }
71
+ .#{$state}error > & {
72
+ @include cx-add-state-rules($right-icon-state-style-map, error);
73
+ }
74
+ }
75
+
76
+ .#{$element}#{$name}-left-icon {
77
+ box-sizing: border-box;
78
+
79
+ @include cx-checker-background();
80
+
81
+ @include cxe-field-button(
82
+ $besm,
83
+ cx-deep-map-merge(
84
+ $left-icon-state-style-map,
85
+ (
86
+ default: (
87
+ opacity: 1,
88
+ cursor: pointer,
89
+ ),
90
+ )
91
+ )
92
+ );
93
+
94
+ div {
95
+ width: 100%;
96
+ height: 100%;
97
+ border-radius: inherit;
98
+ }
99
+ }
100
+
101
+ .#{$element}#{$name}-icon {
102
+ @include cxe-field-button-icon($besm, $icon-size);
103
+ }
104
+
105
+ .#{$element}#{$name}-empty-text {
106
+ @include cxe-field-empty-text($empty-text);
107
+ }
108
+ }
109
+
110
+ @if (cx-should-include("cx/widgets/ColorField")) {
111
+ @include cx-colorfield();
112
+ }
@@ -1,111 +1,111 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../variables" as *;
4
- @use "../maps" as *;
5
- @use "../../util/scss/add-rules.scss" as *;
6
- @use "../../util/scss/calc.scss" as *;
7
- @use "../../util/scss/clockwise.scss" as *;
8
- @use "../../util/scss/deep-merge.scss" as *;
9
- @use "../../util/scss/besm.scss" as *;
10
- @use "../../util/scss/include.scss" as *;
11
- @use "./Field.scss" as *;
12
-
13
- @mixin cx-datetimefield(
14
- $name: "datetimefield",
15
- $input-state-style-map: $cx-std-field-state-style-map,
16
- $placeholder: $cx-input-placeholder,
17
- $empty-text: $cx-empty-text,
18
- $clear-state-style-map: $cx-clear-state-style-map,
19
- $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
20
- $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
21
- $icon-size: $cx-default-input-icon-size,
22
- $width: $cx-default-input-width,
23
- $besm: $cx-besm
24
- ) {
25
- $block: map.get($besm, block);
26
- $element: map.get($besm, element);
27
- $state: map.get($besm, state);
28
-
29
- .#{$block}#{$name} {
30
- @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
31
- }
32
-
33
- $padding: cx-get-state-rule($input-state-style-map, default, "padding");
34
-
35
- .#{$element}#{$name}-input {
36
- @include cxe-field-input(
37
- $besm,
38
- $input-state-style-map,
39
- $placeholder: $placeholder,
40
- $overrides: (
41
- default: (
42
- padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
43
- cx-bottom($padding)
44
- cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
45
- )
46
- )
47
- );
48
- }
49
-
50
- .#{$element}#{$name}-clear {
51
- @include cxe-field-button($besm, $clear-state-style-map);
52
-
53
- .#{$state}focus > & {
54
- @include cx-add-state-rules($clear-state-style-map, focus);
55
- }
56
- .#{$state}error > & {
57
- @include cx-add-state-rules($clear-state-style-map, error);
58
- }
59
- }
60
-
61
- .#{$element}#{$name}-left-icon {
62
- @include cxe-field-button(
63
- $besm,
64
- cx-deep-map-merge(
65
- $left-icon-state-style-map,
66
- (
67
- default: (
68
- cursor: pointer,
69
- ),
70
- )
71
- )
72
- );
73
-
74
- .#{$state}disabled > & {
75
- @include cx-add-state-rules($input-state-style-map, disabled);
76
- border-width: 0;
77
- }
78
- .#{$state}focus > & {
79
- @include cx-add-state-rules($left-icon-state-style-map, focus);
80
- }
81
- .#{$state}error > & {
82
- @include cx-add-state-rules($left-icon-state-style-map, error);
83
- }
84
- }
85
-
86
- .#{$element}#{$name}-right-icon {
87
- @include cxe-field-button($besm, $right-icon-state-style-map);
88
- .#{$state}disabled > & {
89
- @include cx-add-state-rules($input-state-style-map, disabled);
90
- border-width: 0;
91
- }
92
- .#{$state}focus > & {
93
- @include cx-add-state-rules($right-icon-state-style-map, focus);
94
- }
95
- .#{$state}error > & {
96
- @include cx-add-state-rules($right-icon-state-style-map, error);
97
- }
98
- }
99
-
100
- .#{$element}#{$name}-icon {
101
- @include cxe-field-button-icon($besm, $icon-size);
102
- }
103
-
104
- .#{$element}#{$name}-empty-text {
105
- @include cxe-field-empty-text($empty-text);
106
- }
107
- }
108
-
109
- @if (cx-should-include("cx/widgets/DateTimeField")) {
110
- @include cx-datetimefield();
111
- }
1
+ @use "sass:math";
2
+ @use "sass:map";
3
+ @use "../variables" as *;
4
+ @use "../maps" as *;
5
+ @use "../../util/scss/add-rules.scss" as *;
6
+ @use "../../util/scss/calc.scss" as *;
7
+ @use "../../util/scss/clockwise.scss" as *;
8
+ @use "../../util/scss/deep-merge.scss" as *;
9
+ @use "../../util/scss/besm.scss" as *;
10
+ @use "../../util/scss/include.scss" as *;
11
+ @use "./Field.scss" as *;
12
+
13
+ @mixin cx-datetimefield(
14
+ $name: "datetimefield",
15
+ $input-state-style-map: $cx-std-field-state-style-map,
16
+ $placeholder: $cx-input-placeholder,
17
+ $empty-text: $cx-empty-text,
18
+ $clear-state-style-map: $cx-clear-state-style-map,
19
+ $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
20
+ $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
21
+ $icon-size: $cx-default-input-icon-size,
22
+ $width: $cx-default-input-width,
23
+ $besm: $cx-besm
24
+ ) {
25
+ $block: map.get($besm, block);
26
+ $element: map.get($besm, element);
27
+ $state: map.get($besm, state);
28
+
29
+ .#{$block}#{$name} {
30
+ @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
31
+ }
32
+
33
+ $padding: cx-get-state-rule($input-state-style-map, default, "padding");
34
+
35
+ .#{$element}#{$name}-input {
36
+ @include cxe-field-input(
37
+ $besm,
38
+ $input-state-style-map,
39
+ $placeholder: $placeholder,
40
+ $overrides: (
41
+ default: (
42
+ padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
43
+ cx-bottom($padding)
44
+ cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
45
+ )
46
+ )
47
+ );
48
+ }
49
+
50
+ .#{$element}#{$name}-clear {
51
+ @include cxe-field-button($besm, $clear-state-style-map);
52
+
53
+ .#{$state}focus > & {
54
+ @include cx-add-state-rules($clear-state-style-map, focus);
55
+ }
56
+ .#{$state}error > & {
57
+ @include cx-add-state-rules($clear-state-style-map, error);
58
+ }
59
+ }
60
+
61
+ .#{$element}#{$name}-left-icon {
62
+ @include cxe-field-button(
63
+ $besm,
64
+ cx-deep-map-merge(
65
+ $left-icon-state-style-map,
66
+ (
67
+ default: (
68
+ cursor: pointer,
69
+ ),
70
+ )
71
+ )
72
+ );
73
+
74
+ .#{$state}disabled > & {
75
+ @include cx-add-state-rules($input-state-style-map, disabled);
76
+ border-width: 0;
77
+ }
78
+ .#{$state}focus > & {
79
+ @include cx-add-state-rules($left-icon-state-style-map, focus);
80
+ }
81
+ .#{$state}error > & {
82
+ @include cx-add-state-rules($left-icon-state-style-map, error);
83
+ }
84
+ }
85
+
86
+ .#{$element}#{$name}-right-icon {
87
+ @include cxe-field-button($besm, $right-icon-state-style-map);
88
+ .#{$state}disabled > & {
89
+ @include cx-add-state-rules($input-state-style-map, disabled);
90
+ border-width: 0;
91
+ }
92
+ .#{$state}focus > & {
93
+ @include cx-add-state-rules($right-icon-state-style-map, focus);
94
+ }
95
+ .#{$state}error > & {
96
+ @include cx-add-state-rules($right-icon-state-style-map, error);
97
+ }
98
+ }
99
+
100
+ .#{$element}#{$name}-icon {
101
+ @include cxe-field-button-icon($besm, $icon-size);
102
+ }
103
+
104
+ .#{$element}#{$name}-empty-text {
105
+ @include cxe-field-empty-text($empty-text);
106
+ }
107
+ }
108
+
109
+ @if (cx-should-include("cx/widgets/DateTimeField")) {
110
+ @include cx-datetimefield();
111
+ }
@@ -1,26 +1,26 @@
1
- @use "../variables" as *;
2
- @use "./Field.maps.scss" as *;
3
- @use "../../util/scss/deep-merge.scss" as *;
4
- @use "../../util/scss/calc.scss" as *;
5
-
6
- $cx-input-tag-state-style-map: (
7
- default: (
8
- font-size: $cx-default-input-tag-font-size,
9
- background-color: $cx-default-input-tag-background-color,
10
- padding: $cx-default-input-tag-padding,
11
- padding-right: cx-calc($cx-default-clear-size, 2px),
12
- border-radius: $cx-default-input-tag-border-radius,
13
- border-width: $cx-default-input-tag-border-width,
14
- border-style: solid,
15
- border-color: $cx-default-input-tag-border-color,
16
- ),
17
- ) !default;
18
-
19
- $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
20
- $cx-clear-state-style-map,
21
- (
22
- default: (
23
- right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
24
- ),
25
- )
26
- ) !default;
1
+ @use "../variables" as *;
2
+ @use "./Field.maps.scss" as *;
3
+ @use "../../util/scss/deep-merge.scss" as *;
4
+ @use "../../util/scss/calc.scss" as *;
5
+
6
+ $cx-input-tag-state-style-map: (
7
+ default: (
8
+ font-size: $cx-default-input-tag-font-size,
9
+ background-color: $cx-default-input-tag-background-color,
10
+ padding: $cx-default-input-tag-padding,
11
+ padding-right: cx-calc($cx-default-clear-size, 2px),
12
+ border-radius: $cx-default-input-tag-border-radius,
13
+ border-width: $cx-default-input-tag-border-width,
14
+ border-style: solid,
15
+ border-color: $cx-default-input-tag-border-color,
16
+ ),
17
+ ) !default;
18
+
19
+ $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
20
+ $cx-clear-state-style-map,
21
+ (
22
+ default: (
23
+ right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
24
+ ),
25
+ )
26
+ ) !default;