cx 26.7.0 → 26.7.2

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 (26) hide show
  1. package/build/ui/Cx.d.ts +2 -0
  2. package/build/ui/Cx.d.ts.map +1 -1
  3. package/build/ui/Cx.js +36 -7
  4. package/build/widgets/DocumentTitle.d.ts.map +1 -1
  5. package/build/widgets/DocumentTitle.js +2 -0
  6. package/build/widgets/grid/TreeNode.d.ts +2 -0
  7. package/build/widgets/grid/TreeNode.d.ts.map +1 -1
  8. package/dist/manifest.js +822 -822
  9. package/dist/ui.js +50 -14
  10. package/dist/widgets.js +1 -0
  11. package/package.json +1 -1
  12. package/src/ui/Cx.tsx +416 -386
  13. package/src/ui/DataProxy.ts +55 -55
  14. package/src/ui/Rescope.ts +50 -50
  15. package/src/ui/Restate.tsx +217 -217
  16. package/src/ui/exprHelpers.ts +96 -96
  17. package/src/widgets/DocumentTitle.ts +2 -0
  18. package/src/widgets/Sandbox.ts +104 -104
  19. package/src/widgets/form/ColorField.scss +112 -112
  20. package/src/widgets/form/DateTimeField.scss +111 -111
  21. package/src/widgets/form/LookupField.maps.scss +26 -26
  22. package/src/widgets/form/MonthField.scss +113 -113
  23. package/src/widgets/form/Select.scss +104 -104
  24. package/src/widgets/form/TextField.scss +66 -66
  25. package/src/widgets/grid/TreeNode.tsx +3 -0
  26. package/src/widgets/nav/MenuItem.tsx +525 -525
package/src/widgets/form/DateTimeField.scss CHANGED
@@ -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
+ }
package/src/widgets/form/LookupField.maps.scss CHANGED
@@ -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;
package/src/widgets/form/MonthField.scss CHANGED
@@ -1,113 +1,113 @@
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-monthfield(
14
- $name: "monthfield",
15
- $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, $state-style-map, $width: $width);
31
- }
32
-
33
- $padding: cx-get-state-rule($state-style-map, default, "padding");
34
-
35
- .#{$element}#{$name}-input {
36
- @include cxe-field-input(
37
- $besm,
38
- $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($state-style-map, disabled);
76
- border-width: 0;
77
- }
78
-
79
- .#{$state}focus > & {
80
- @include cx-add-state-rules($left-icon-state-style-map, focus);
81
- }
82
- .#{$state}error > & {
83
- @include cx-add-state-rules($left-icon-state-style-map, error);
84
- }
85
- }
86
-
87
- .#{$element}#{$name}-right-icon {
88
- @include cxe-field-button($besm, $right-icon-state-style-map);
89
-
90
- .#{$state}disabled > & {
91
- @include cx-add-state-rules($state-style-map, disabled);
92
- border-width: 0;
93
- }
94
- .#{$state}focus > & {
95
- @include cx-add-state-rules($right-icon-state-style-map, focus);
96
- }
97
- .#{$state}error > & {
98
- @include cx-add-state-rules($right-icon-state-style-map, error);
99
- }
100
- }
101
-
102
- .#{$element}#{$name}-icon {
103
- @include cxe-field-button-icon($besm, $icon-size);
104
- }
105
-
106
- .#{$element}#{$name}-empty-text {
107
- @include cxe-field-empty-text($empty-text);
108
- }
109
- }
110
-
111
- @if (cx-should-include("cx/widgets/MonthField")) {
112
- @include cx-monthfield();
113
- }
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-monthfield(
14
+ $name: "monthfield",
15
+ $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, $state-style-map, $width: $width);
31
+ }
32
+
33
+ $padding: cx-get-state-rule($state-style-map, default, "padding");
34
+
35
+ .#{$element}#{$name}-input {
36
+ @include cxe-field-input(
37
+ $besm,
38
+ $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($state-style-map, disabled);
76
+ border-width: 0;
77
+ }
78
+
79
+ .#{$state}focus > & {
80
+ @include cx-add-state-rules($left-icon-state-style-map, focus);
81
+ }
82
+ .#{$state}error > & {
83
+ @include cx-add-state-rules($left-icon-state-style-map, error);
84
+ }
85
+ }
86
+
87
+ .#{$element}#{$name}-right-icon {
88
+ @include cxe-field-button($besm, $right-icon-state-style-map);
89
+
90
+ .#{$state}disabled > & {
91
+ @include cx-add-state-rules($state-style-map, disabled);
92
+ border-width: 0;
93
+ }
94
+ .#{$state}focus > & {
95
+ @include cx-add-state-rules($right-icon-state-style-map, focus);
96
+ }
97
+ .#{$state}error > & {
98
+ @include cx-add-state-rules($right-icon-state-style-map, error);
99
+ }
100
+ }
101
+
102
+ .#{$element}#{$name}-icon {
103
+ @include cxe-field-button-icon($besm, $icon-size);
104
+ }
105
+
106
+ .#{$element}#{$name}-empty-text {
107
+ @include cxe-field-empty-text($empty-text);
108
+ }
109
+ }
110
+
111
+ @if (cx-should-include("cx/widgets/MonthField")) {
112
+ @include cx-monthfield();
113
+ }