cx 24.8.6 → 24.9.0

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 (32) hide show
  1. package/dist/charts.js +22 -25
  2. package/dist/data.js +26 -29
  3. package/dist/manifest.js +692 -692
  4. package/dist/svg.js +59 -56
  5. package/dist/ui.js +62 -54
  6. package/dist/widgets.css +69 -64
  7. package/dist/widgets.js +62 -57
  8. package/package.json +32 -32
  9. package/src/index.scss +6 -7
  10. package/src/ui/Culture.d.ts +55 -51
  11. package/src/ui/Culture.js +139 -129
  12. package/src/util/scss/add-rules.scss +38 -39
  13. package/src/widgets/CxCredit.scss +37 -42
  14. package/src/widgets/List.scss +91 -93
  15. package/src/widgets/form/Calendar.scss +196 -196
  16. package/src/widgets/form/Checkbox.scss +127 -125
  17. package/src/widgets/form/ColorField.scss +95 -92
  18. package/src/widgets/form/ColorPicker.scss +283 -275
  19. package/src/widgets/form/LookupField.scss +219 -219
  20. package/src/widgets/form/MonthPicker.scss +118 -120
  21. package/src/widgets/form/NumberField.scss +61 -66
  22. package/src/widgets/form/Radio.scss +122 -122
  23. package/src/widgets/form/Select.scss +99 -99
  24. package/src/widgets/form/Slider.scss +118 -119
  25. package/src/widgets/form/Switch.scss +140 -140
  26. package/src/widgets/form/TextArea.scss +43 -60
  27. package/src/widgets/form/TextField.scss +55 -55
  28. package/src/widgets/grid/TreeNode.scss +88 -89
  29. package/src/widgets/nav/Menu.scss +74 -74
  30. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -36
  31. package/src/widgets/overlay/Tooltip.js +7 -2
  32. package/src/widgets/overlay/captureMouse.js +124 -124
package/src/widgets/form/Checkbox.scss CHANGED
@@ -1,125 +1,127 @@
1
- @mixin cx-checkbox(
2
- $name: "checkbox",
3
- $state-style-map: $cx-checkbox-state-style-map,
4
- $width: $cx-default-input-width,
5
- $empty-text: $cx-empty-text,
6
- $besm: $cx-besm,
7
- $size: $cx-default-checkbox-size
8
- ) {
9
- $block: map-get($besm, block);
10
- $element: map-get($besm, element);
11
- $state: map-get($besm, state);
12
-
13
- $padding: cx-get-state-rule($state-style-map, default, padding);
14
- $border-width: cx-get-state-rule($state-style-map, default, border-width);
15
-
16
- $outer-styles: cx-deep-map-merge(
17
- $state-style-map,
18
- (
19
- default: (
20
- border-width: cx-top($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
21
- ),
22
- )
23
- );
24
-
25
- .#{$block}#{$name} {
26
- @include cxb-field($besm, $outer-styles, $input: false, $box: true);
27
- min-width: $size;
28
- }
29
-
30
- .#{$element}#{$name}-checkbox {
31
- padding: 0;
32
- margin: 0 !important;
33
- width: $size;
34
- height: $size;
35
- top: calc(50% - #{$size * 0.5});
36
- left: 0;
37
- display: inline-block;
38
- position: absolute;
39
- //-webkit-appearance: none;
40
-
41
- &::-moz-focus-inner {
42
- border: 0;
43
- padding: 0;
44
- margin: -1px;
45
- }
46
-
47
- &:focus {
48
- box-shadow: inset 0 0 1px 1px rgba(77, 144, 254, 0.8), 0 0 2px 2px rgba(77, 144, 254, 0.8);
49
- background: rgba(77, 144, 254, 0.8);
50
- outline: 0;
51
- }
52
- }
53
-
54
- .#{$element}#{$name}-text {
55
- display: inline-block;
56
- margin-left: $size;
57
- user-select: none;
58
-
59
- .#{$state}disabled > & {
60
- opacity: 0.5;
61
- }
62
- }
63
-
64
- .#{$element}#{$name}-baseline {
65
- user-select: none;
66
- }
67
-
68
- .#{$element}#{$name}-empty-text {
69
- @include cxe-field-empty-text($empty-text);
70
- }
71
-
72
- //non-native implementation
73
- .#{$element}#{$name}-input {
74
- @include cxe-field-input(
75
- $besm,
76
- $state-style-map,
77
- $input: false,
78
- $overrides: (
79
- default: (
80
- padding: 0,
81
- margin: 0 !important,
82
- )
83
- )
84
- );
85
- width: $size;
86
- height: $size;
87
-
88
- top: calc(50% - #{$size * 0.5});
89
- left: 0;
90
- display: inline-block;
91
- position: absolute;
92
-
93
- &.#{$state}checked {
94
- @include cx-add-state-rules($state-style-map, checked);
95
-
96
- &:focus {
97
- @include cx-add-state-rules($state-style-map, checked-focus);
98
- }
99
-
100
- .#{$state}disabled > & {
101
- @include cx-add-state-rules($state-style-map, disabled-checked);
102
- }
103
- }
104
- }
105
-
106
- .#{$element}#{$name}-input-check {
107
- width: 100%;
108
- height: 100%;
109
- visibility: hidden;
110
- position: absolute;
111
- display: block;
112
- left: 0;
113
- top: 0;
114
- right: 0;
115
- bottom: 0;
116
-
117
- .#{$state}checked > & {
118
- visibility: visible;
119
- }
120
- }
121
- }
122
-
123
- @if (cx-should-include("cx/widgets/Checkbox")) {
124
- @include cx-checkbox();
125
- }
1
+ @mixin cx-checkbox(
2
+ $name: "checkbox",
3
+ $state-style-map: $cx-checkbox-state-style-map,
4
+ $width: $cx-default-input-width,
5
+ $empty-text: $cx-empty-text,
6
+ $besm: $cx-besm,
7
+ $size: $cx-default-checkbox-size
8
+ ) {
9
+ $block: map-get($besm, block);
10
+ $element: map-get($besm, element);
11
+ $state: map-get($besm, state);
12
+
13
+ $padding: cx-get-state-rule($state-style-map, default, padding);
14
+ $border-width: cx-get-state-rule($state-style-map, default, border-width);
15
+
16
+ $outer-styles: cx-deep-map-merge(
17
+ $state-style-map,
18
+ (
19
+ default: (
20
+ border-width: cx-top($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
21
+ ),
22
+ )
23
+ );
24
+
25
+ .#{$block}#{$name} {
26
+ min-width: $size;
27
+ @include cxb-field($besm, $outer-styles, $input: false, $box: true);
28
+ }
29
+
30
+ .#{$element}#{$name}-checkbox {
31
+ padding: 0;
32
+ margin: 0 !important;
33
+ width: $size;
34
+ height: $size;
35
+ top: calc(50% - #{$size * 0.5});
36
+ left: 0;
37
+ display: inline-block;
38
+ position: absolute;
39
+ //-webkit-appearance: none;
40
+
41
+ &::-moz-focus-inner {
42
+ border: 0;
43
+ padding: 0;
44
+ margin: -1px;
45
+ }
46
+
47
+ &:focus {
48
+ box-shadow:
49
+ inset 0 0 1px 1px rgba(77, 144, 254, 0.8),
50
+ 0 0 2px 2px rgba(77, 144, 254, 0.8);
51
+ background: rgba(77, 144, 254, 0.8);
52
+ outline: 0;
53
+ }
54
+ }
55
+
56
+ .#{$element}#{$name}-text {
57
+ display: inline-block;
58
+ margin-left: $size;
59
+ user-select: none;
60
+
61
+ .#{$state}disabled > & {
62
+ opacity: 0.5;
63
+ }
64
+ }
65
+
66
+ .#{$element}#{$name}-baseline {
67
+ user-select: none;
68
+ }
69
+
70
+ .#{$element}#{$name}-empty-text {
71
+ @include cxe-field-empty-text($empty-text);
72
+ }
73
+
74
+ //non-native implementation
75
+ .#{$element}#{$name}-input {
76
+ width: $size;
77
+ height: $size;
78
+ top: calc(50% - #{$size * 0.5});
79
+ left: 0;
80
+ display: inline-block;
81
+ position: absolute;
82
+
83
+ @include cxe-field-input(
84
+ $besm,
85
+ $state-style-map,
86
+ $input: false,
87
+ $overrides: (
88
+ default: (
89
+ padding: 0,
90
+ margin: 0 !important,
91
+ )
92
+ )
93
+ );
94
+
95
+ &.#{$state}checked {
96
+ @include cx-add-state-rules($state-style-map, checked);
97
+
98
+ &:focus {
99
+ @include cx-add-state-rules($state-style-map, checked-focus);
100
+ }
101
+
102
+ .#{$state}disabled > & {
103
+ @include cx-add-state-rules($state-style-map, disabled-checked);
104
+ }
105
+ }
106
+ }
107
+
108
+ .#{$element}#{$name}-input-check {
109
+ width: 100%;
110
+ height: 100%;
111
+ visibility: hidden;
112
+ position: absolute;
113
+ display: block;
114
+ left: 0;
115
+ top: 0;
116
+ right: 0;
117
+ bottom: 0;
118
+
119
+ .#{$state}checked > & {
120
+ visibility: visible;
121
+ }
122
+ }
123
+ }
124
+
125
+ @if (cx-should-include("cx/widgets/Checkbox")) {
126
+ @include cx-checkbox();
127
+ }
package/src/widgets/form/ColorField.scss CHANGED
@@ -1,92 +1,95 @@
1
-
2
- @mixin cx-colorfield(
3
- $name: 'colorfield',
4
- $state-style-map: $cx-std-field-state-style-map,
5
- $placeholder: $cx-input-placeholder,
6
- $empty-text: $cx-empty-text,
7
- $clear-state-style-map: $cx-clear-state-style-map,
8
- $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
9
- $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
10
- $width: $cx-default-input-width,
11
- $icon-size: $cx-default-icon-size,
12
- $besm: $cx-besm
13
- ) {
14
- $block: map-get($besm, block);
15
- $element: map-get($besm, element);
16
- $state: map-get($besm, state);
17
-
18
- .#{$block}#{$name} {
19
- @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
20
- }
21
-
22
- $padding: cx-get-state-rule($state-style-map, default, 'padding');
23
-
24
- .#{$element}#{$name}-input {
25
- @include cxe-field-input(
26
- $besm,
27
- $state-style-map,
28
- $placeholder: $placeholder,
29
- $overrides: (
30
- default: (
31
- font-family: $cx-default-colorfield-font-family,
32
- font-size: 11px,
33
- padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding) cx-calc(cx-left($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing)
34
- )
35
- )
36
- );
37
- }
38
-
39
- .#{$element}#{$name}-clear {
40
- @include cxe-field-button($besm, $clear-state-style-map);
41
-
42
- .#{$state}focus > & {
43
- @include cx-add-state-rules($clear-state-style-map, focus);
44
- }
45
- .#{$state}error > & {
46
- @include cx-add-state-rules($clear-state-style-map, error);
47
- }
48
- }
49
-
50
- .#{$element}#{$name}-right-icon {
51
- @include cxe-field-button($besm, $right-icon-state-style-map);
52
-
53
- .#{$state}focus > & {
54
- @include cx-add-state-rules($right-icon-state-style-map, focus);
55
- }
56
- .#{$state}error > & {
57
- @include cx-add-state-rules($right-icon-state-style-map, error);
58
- }
59
- }
60
-
61
- .#{$element}#{$name}-left-icon {
62
- @include cxe-field-button($besm, cx-deep-map-merge($left-icon-state-style-map, (
63
- default: (
64
- cursor: pointer
65
- )
66
- )));
67
-
68
- @include cx-checker-background();
69
- box-sizing: border-box;
70
- opacity: 1;
71
-
72
- div {
73
- width: 100%;
74
- height: 100%;
75
- }
76
- }
77
-
78
- .#{$element}#{$name}-icon {
79
- @include cxe-field-button-icon($besm, $icon-size);
80
- }
81
-
82
- .#{$element}#{$name}-empty-text {
83
- @include cxe-field-empty-text($empty-text);
84
- }
85
- }
86
-
87
- @if (cx-should-include('cx/widgets/ColorField')) {
88
- @include cx-colorfield();
89
- }
90
-
91
-
92
-
1
+ @mixin cx-colorfield(
2
+ $name: "colorfield",
3
+ $state-style-map: $cx-std-field-state-style-map,
4
+ $placeholder: $cx-input-placeholder,
5
+ $empty-text: $cx-empty-text,
6
+ $clear-state-style-map: $cx-clear-state-style-map,
7
+ $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
8
+ $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
9
+ $width: $cx-default-input-width,
10
+ $icon-size: $cx-default-icon-size,
11
+ $besm: $cx-besm
12
+ ) {
13
+ $block: map-get($besm, block);
14
+ $element: map-get($besm, element);
15
+ $state: map-get($besm, state);
16
+
17
+ .#{$block}#{$name} {
18
+ @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
19
+ }
20
+
21
+ $padding: cx-get-state-rule($state-style-map, default, "padding");
22
+
23
+ .#{$element}#{$name}-input {
24
+ @include cxe-field-input(
25
+ $besm,
26
+ $state-style-map,
27
+ $placeholder: $placeholder,
28
+ $overrides: (
29
+ default: (
30
+ font-family: $cx-default-colorfield-font-family,
31
+ font-size: 11px,
32
+ padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding)
33
+ cx-calc(cx-left($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
34
+ )
35
+ )
36
+ );
37
+ }
38
+
39
+ .#{$element}#{$name}-clear {
40
+ @include cxe-field-button($besm, $clear-state-style-map);
41
+
42
+ .#{$state}focus > & {
43
+ @include cx-add-state-rules($clear-state-style-map, focus);
44
+ }
45
+ .#{$state}error > & {
46
+ @include cx-add-state-rules($clear-state-style-map, error);
47
+ }
48
+ }
49
+
50
+ .#{$element}#{$name}-right-icon {
51
+ @include cxe-field-button($besm, $right-icon-state-style-map);
52
+
53
+ .#{$state}focus > & {
54
+ @include cx-add-state-rules($right-icon-state-style-map, focus);
55
+ }
56
+ .#{$state}error > & {
57
+ @include cx-add-state-rules($right-icon-state-style-map, error);
58
+ }
59
+ }
60
+
61
+ .#{$element}#{$name}-left-icon {
62
+ box-sizing: border-box;
63
+ opacity: 1;
64
+ @include cx-checker-background();
65
+
66
+ @include cxe-field-button(
67
+ $besm,
68
+ cx-deep-map-merge(
69
+ $left-icon-state-style-map,
70
+ (
71
+ default: (
72
+ cursor: pointer,
73
+ ),
74
+ )
75
+ )
76
+ );
77
+
78
+ div {
79
+ width: 100%;
80
+ height: 100%;
81
+ }
82
+ }
83
+
84
+ .#{$element}#{$name}-icon {
85
+ @include cxe-field-button-icon($besm, $icon-size);
86
+ }
87
+
88
+ .#{$element}#{$name}-empty-text {
89
+ @include cxe-field-empty-text($empty-text);
90
+ }
91
+ }
92
+
93
+ @if (cx-should-include("cx/widgets/ColorField")) {
94
+ @include cx-colorfield();
95
+ }