cx 24.10.9 → 24.10.10

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 (71) hide show
  1. package/dist/manifest.js +690 -690
  2. package/package.json +32 -32
  3. package/src/charts/PieChart.js +529 -529
  4. package/src/charts/PieLabel.js +71 -71
  5. package/src/charts/axis/Axis.js +280 -280
  6. package/src/charts/axis/CategoryAxis.js +235 -235
  7. package/src/charts/axis/NumericAxis.js +351 -351
  8. package/src/charts/axis/Stack.js +55 -55
  9. package/src/charts/axis/TimeAxis.d.ts +28 -28
  10. package/src/charts/axis/TimeAxis.js +610 -610
  11. package/src/charts/helpers/PointReducer.js +47 -47
  12. package/src/charts/helpers/SnapPointFinder.js +69 -69
  13. package/src/data/Binding.spec.js +69 -69
  14. package/src/data/Expression.js +221 -221
  15. package/src/data/Expression.spec.js +184 -184
  16. package/src/data/StringTemplate.spec.js +105 -105
  17. package/src/data/getAccessor.spec.js +11 -11
  18. package/src/index.scss +6 -6
  19. package/src/svg/Text.d.ts +40 -40
  20. package/src/ui/Culture.d.ts +55 -55
  21. package/src/ui/Culture.js +139 -139
  22. package/src/ui/FocusManager.js +171 -171
  23. package/src/ui/Instance.d.ts +72 -72
  24. package/src/ui/Instance.js +614 -614
  25. package/src/ui/VDOM.d.ts +12 -12
  26. package/src/ui/app/startAppLoop.js +58 -58
  27. package/src/ui/index.d.ts +42 -42
  28. package/src/ui/layout/ContentPlaceholder.d.ts +19 -19
  29. package/src/ui/layout/ContentPlaceholder.js +105 -105
  30. package/src/ui/layout/ContentPlaceholder.spec.js +579 -579
  31. package/src/ui/layout/LabelsTopLayout.js +134 -134
  32. package/src/util/Console.d.ts +4 -4
  33. package/src/util/index.d.ts +51 -51
  34. package/src/util/index.js +54 -54
  35. package/src/util/isValidIdentifierName.d.ts +1 -1
  36. package/src/util/isValidIdentifierName.js +5 -5
  37. package/src/util/isValidIdentifierName.spec.js +33 -33
  38. package/src/util/scss/add-rules.scss +38 -38
  39. package/src/widgets/CxCredit.scss +37 -37
  40. package/src/widgets/HighlightedSearchText.js +36 -36
  41. package/src/widgets/HighlightedSearchText.scss +18 -18
  42. package/src/widgets/List.scss +91 -91
  43. package/src/widgets/drag-drop/DropZone.js +214 -214
  44. package/src/widgets/form/Calendar.scss +196 -196
  45. package/src/widgets/form/ColorField.js +397 -397
  46. package/src/widgets/form/ColorPicker.scss +283 -283
  47. package/src/widgets/form/DateTimeField.js +573 -573
  48. package/src/widgets/form/LookupField.d.ts +179 -179
  49. package/src/widgets/form/MonthField.js +516 -516
  50. package/src/widgets/form/MonthPicker.scss +118 -118
  51. package/src/widgets/form/NumberField.js +459 -459
  52. package/src/widgets/form/NumberField.scss +61 -61
  53. package/src/widgets/form/Select.scss +99 -99
  54. package/src/widgets/form/Slider.scss +118 -118
  55. package/src/widgets/form/Switch.scss +140 -140
  56. package/src/widgets/form/TextArea.scss +43 -43
  57. package/src/widgets/form/TextField.js +290 -290
  58. package/src/widgets/form/TextField.scss +55 -55
  59. package/src/widgets/form/UploadButton.d.ts +34 -34
  60. package/src/widgets/form/variables.scss +353 -353
  61. package/src/widgets/grid/Grid.d.ts +5 -5
  62. package/src/widgets/grid/TreeNode.d.ts +16 -18
  63. package/src/widgets/grid/TreeNode.scss +88 -88
  64. package/src/widgets/nav/Menu.scss +74 -74
  65. package/src/widgets/overlay/Dropdown.js +612 -612
  66. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  67. package/src/widgets/overlay/Tooltip.js +300 -300
  68. package/src/widgets/overlay/Window.js +196 -196
  69. package/src/widgets/overlay/captureMouse.js +124 -124
  70. package/src/widgets/overlay/variables.scss +83 -83
  71. package/src/widgets/variables.scss +144 -144
package/src/widgets/form/Calendar.scss CHANGED
@@ -1,196 +1,196 @@
1
- @mixin cx-calendar(
2
- $name: "calendar",
3
- $state-style-map: $cx-calendar-state-style-map,
4
- $width: $cx-default-input-width,
5
- $icon-size: $cx-default-icon-size,
6
- $besm: $cx-besm
7
- ) {
8
- $block: map-get($besm, block);
9
- $element: map-get($besm, element);
10
- $state: map-get($besm, state);
11
- $mod: map-get($besm, mod);
12
-
13
- .#{$block}calendar {
14
- display: inline-block;
15
- vertical-align: middle;
16
- width: 18em;
17
- overflow-y: auto;
18
- box-sizing: border-box;
19
-
20
- @include cx-add-state-rules($state-style-map, "default");
21
-
22
- &:hover {
23
- @include cx-add-state-rules($state-style-map, "hover");
24
- }
25
-
26
- &:focus {
27
- @include cx-add-state-rules($state-style-map, "focus");
28
- }
29
-
30
- &.#{$state}error {
31
- @include cx-add-state-rules($state-style-map, "error");
32
-
33
- &:focus {
34
- @include cx-add-state-rules($state-style-map, "error-focus");
35
- }
36
- }
37
-
38
- table {
39
- border-spacing: 0;
40
- width: 100%;
41
- }
42
-
43
- td,
44
- th {
45
- text-align: center;
46
- width: 2em;
47
- line-height: 2em;
48
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
49
- }
50
-
51
- th {
52
- font-weight: cx-get-state-rule($state-style-map, header, font-weight);
53
- }
54
-
55
- tbody td {
56
- user-select: none;
57
- @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
58
- }
59
-
60
- .#{$element}#{$name}-header {
61
- @include cx-add-state-rules($state-style-map, header);
62
- }
63
-
64
- td.#{$state}today {
65
- @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
66
-
67
- &:hover {
68
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
69
- }
70
- }
71
-
72
- td.#{$state}outside {
73
- @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
74
- }
75
-
76
- td.#{$state}unselectable {
77
- @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
78
- }
79
-
80
- td.#{$state}cursor,
81
- .#{$element}#{$name}-header td:hover {
82
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
83
- }
84
-
85
- td.#{$state}selected {
86
- @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
87
- }
88
-
89
- &:not(.#{$state}disabled) {
90
- td {
91
- cursor: pointer;
92
- }
93
- }
94
-
95
- td:not(.cxe-calendar-year-option):first-child,
96
- td:not(.cxe-calendar-year-option):last-child {
97
- display: none;
98
- pointer-events: none;
99
- }
100
-
101
- &:focus {
102
- td.#{$state}cursor,
103
- .#{$element}#{$name}-header td:hover {
104
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
105
-
106
- &:active {
107
- @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
108
- }
109
- }
110
-
111
- td.#{$state}selected {
112
- @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
113
- }
114
- }
115
-
116
- &.#{$state}disabled {
117
- background-color: transparent;
118
- border-color: transparent;
119
- color: darken(#fff, 18);
120
- pointer-events: none;
121
- opacity: 0.9;
122
- }
123
- }
124
-
125
- .#{$element}#{$name}-header td {
126
- line-height: 0;
127
- }
128
-
129
- .#{$element}#{$name}-icon-next-year,
130
- .#{$element}#{$name}-icon-prev-year,
131
- .#{$element}#{$name}-icon-prev-month,
132
- .#{$element}#{$name}-icon-next-month {
133
- width: $icon-size;
134
- height: $icon-size;
135
- display: inline-block;
136
- font-size: $icon-size;
137
- line-height: $icon-size;
138
- user-select: none;
139
- }
140
-
141
- .#{$element}#{$name}-year {
142
- &-name {
143
- cursor: pointer;
144
- }
145
-
146
- &-picker {
147
- user-select: none;
148
- overflow-y: scroll;
149
- width: 100%;
150
- max-height: 24em;
151
- height: auto;
152
- }
153
-
154
- &-option {
155
- cursor: pointer;
156
- @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
157
-
158
- &.#{$state}active {
159
- @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
160
- }
161
-
162
- &:hover {
163
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
164
- }
165
-
166
- &.#{$state}selected {
167
- @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
168
- }
169
- }
170
- }
171
-
172
- .#{$element}#{$name}-icon-prev-year {
173
- transform: rotate(180deg);
174
- }
175
- .#{$element}#{$name}-icon-prev-month {
176
- transform: rotate(90deg);
177
- }
178
- .#{$element}#{$name}-icon-next-month {
179
- transform: rotate(-90deg);
180
- }
181
-
182
- th.#{$element}#{$name}-display {
183
- line-height: 1.5;
184
- padding: 0.5em;
185
- }
186
-
187
- .#{$element}#{$name}-toolbar {
188
- display: flex;
189
- justify-content: center;
190
- margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
191
- }
192
- }
193
-
194
- @if (cx-should-include("cx/widgets/Calendar")) {
195
- @include cx-calendar();
196
- }
1
+ @mixin cx-calendar(
2
+ $name: "calendar",
3
+ $state-style-map: $cx-calendar-state-style-map,
4
+ $width: $cx-default-input-width,
5
+ $icon-size: $cx-default-icon-size,
6
+ $besm: $cx-besm
7
+ ) {
8
+ $block: map-get($besm, block);
9
+ $element: map-get($besm, element);
10
+ $state: map-get($besm, state);
11
+ $mod: map-get($besm, mod);
12
+
13
+ .#{$block}calendar {
14
+ display: inline-block;
15
+ vertical-align: middle;
16
+ width: 18em;
17
+ overflow-y: auto;
18
+ box-sizing: border-box;
19
+
20
+ @include cx-add-state-rules($state-style-map, "default");
21
+
22
+ &:hover {
23
+ @include cx-add-state-rules($state-style-map, "hover");
24
+ }
25
+
26
+ &:focus {
27
+ @include cx-add-state-rules($state-style-map, "focus");
28
+ }
29
+
30
+ &.#{$state}error {
31
+ @include cx-add-state-rules($state-style-map, "error");
32
+
33
+ &:focus {
34
+ @include cx-add-state-rules($state-style-map, "error-focus");
35
+ }
36
+ }
37
+
38
+ table {
39
+ border-spacing: 0;
40
+ width: 100%;
41
+ }
42
+
43
+ td,
44
+ th {
45
+ text-align: center;
46
+ width: 2em;
47
+ line-height: 2em;
48
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
49
+ }
50
+
51
+ th {
52
+ font-weight: cx-get-state-rule($state-style-map, header, font-weight);
53
+ }
54
+
55
+ tbody td {
56
+ user-select: none;
57
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
58
+ }
59
+
60
+ .#{$element}#{$name}-header {
61
+ @include cx-add-state-rules($state-style-map, header);
62
+ }
63
+
64
+ td.#{$state}today {
65
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
66
+
67
+ &:hover {
68
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
69
+ }
70
+ }
71
+
72
+ td.#{$state}outside {
73
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
74
+ }
75
+
76
+ td.#{$state}unselectable {
77
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
78
+ }
79
+
80
+ td.#{$state}cursor,
81
+ .#{$element}#{$name}-header td:hover {
82
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
83
+ }
84
+
85
+ td.#{$state}selected {
86
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
87
+ }
88
+
89
+ &:not(.#{$state}disabled) {
90
+ td {
91
+ cursor: pointer;
92
+ }
93
+ }
94
+
95
+ td:not(.cxe-calendar-year-option):first-child,
96
+ td:not(.cxe-calendar-year-option):last-child {
97
+ display: none;
98
+ pointer-events: none;
99
+ }
100
+
101
+ &:focus {
102
+ td.#{$state}cursor,
103
+ .#{$element}#{$name}-header td:hover {
104
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
105
+
106
+ &:active {
107
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
108
+ }
109
+ }
110
+
111
+ td.#{$state}selected {
112
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
113
+ }
114
+ }
115
+
116
+ &.#{$state}disabled {
117
+ background-color: transparent;
118
+ border-color: transparent;
119
+ color: darken(#fff, 18);
120
+ pointer-events: none;
121
+ opacity: 0.9;
122
+ }
123
+ }
124
+
125
+ .#{$element}#{$name}-header td {
126
+ line-height: 0;
127
+ }
128
+
129
+ .#{$element}#{$name}-icon-next-year,
130
+ .#{$element}#{$name}-icon-prev-year,
131
+ .#{$element}#{$name}-icon-prev-month,
132
+ .#{$element}#{$name}-icon-next-month {
133
+ width: $icon-size;
134
+ height: $icon-size;
135
+ display: inline-block;
136
+ font-size: $icon-size;
137
+ line-height: $icon-size;
138
+ user-select: none;
139
+ }
140
+
141
+ .#{$element}#{$name}-year {
142
+ &-name {
143
+ cursor: pointer;
144
+ }
145
+
146
+ &-picker {
147
+ user-select: none;
148
+ overflow-y: scroll;
149
+ width: 100%;
150
+ max-height: 24em;
151
+ height: auto;
152
+ }
153
+
154
+ &-option {
155
+ cursor: pointer;
156
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
157
+
158
+ &.#{$state}active {
159
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
160
+ }
161
+
162
+ &:hover {
163
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
164
+ }
165
+
166
+ &.#{$state}selected {
167
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
168
+ }
169
+ }
170
+ }
171
+
172
+ .#{$element}#{$name}-icon-prev-year {
173
+ transform: rotate(180deg);
174
+ }
175
+ .#{$element}#{$name}-icon-prev-month {
176
+ transform: rotate(90deg);
177
+ }
178
+ .#{$element}#{$name}-icon-next-month {
179
+ transform: rotate(-90deg);
180
+ }
181
+
182
+ th.#{$element}#{$name}-display {
183
+ line-height: 1.5;
184
+ padding: 0.5em;
185
+ }
186
+
187
+ .#{$element}#{$name}-toolbar {
188
+ display: flex;
189
+ justify-content: center;
190
+ margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
191
+ }
192
+ }
193
+
194
+ @if (cx-should-include("cx/widgets/Calendar")) {
195
+ @include cx-calendar();
196
+ }