cx 24.9.1 → 24.9.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 (55) hide show
  1. package/dist/charts.js +22 -25
  2. package/dist/data.js +26 -29
  3. package/dist/manifest.js +775 -775
  4. package/dist/svg.js +59 -56
  5. package/dist/ui.js +51 -52
  6. package/dist/widgets.js +46 -49
  7. package/package.json +32 -32
  8. package/src/charts/Legend.js +151 -151
  9. package/src/charts/PieLabel.js +71 -71
  10. package/src/charts/axis/NumericAxis.js +347 -347
  11. package/src/charts/axis/Stack.js +55 -55
  12. package/src/charts/helpers/PointReducer.js +43 -43
  13. package/src/charts/helpers/SnapPointFinder.js +69 -69
  14. package/src/data/Binding.spec.js +69 -69
  15. package/src/data/StringTemplate.spec.js +105 -105
  16. package/src/data/getAccessor.spec.js +11 -11
  17. package/src/index.scss +6 -6
  18. package/src/svg/Text.d.ts +40 -40
  19. package/src/ui/Culture.d.ts +55 -55
  20. package/src/ui/Culture.js +139 -139
  21. package/src/ui/FocusManager.js +171 -171
  22. package/src/ui/Instance.d.ts +72 -72
  23. package/src/ui/VDOM.d.ts +12 -12
  24. package/src/ui/app/startAppLoop.js +58 -58
  25. package/src/ui/index.d.ts +42 -42
  26. package/src/ui/layout/LabelsTopLayout.js +134 -134
  27. package/src/util/Console.d.ts +4 -4
  28. package/src/util/scss/add-rules.scss +38 -38
  29. package/src/widgets/CxCredit.scss +37 -37
  30. package/src/widgets/List.scss +91 -91
  31. package/src/widgets/drag-drop/DropZone.js +214 -214
  32. package/src/widgets/form/Calendar.scss +196 -196
  33. package/src/widgets/form/ColorField.js +397 -397
  34. package/src/widgets/form/ColorPicker.scss +283 -283
  35. package/src/widgets/form/DateTimeField.js +573 -573
  36. package/src/widgets/form/MonthField.js +516 -516
  37. package/src/widgets/form/MonthPicker.scss +118 -118
  38. package/src/widgets/form/NumberField.js +459 -459
  39. package/src/widgets/form/NumberField.scss +61 -61
  40. package/src/widgets/form/Select.scss +99 -99
  41. package/src/widgets/form/Slider.scss +118 -118
  42. package/src/widgets/form/Switch.scss +140 -140
  43. package/src/widgets/form/TextArea.scss +43 -43
  44. package/src/widgets/form/TextField.js +290 -289
  45. package/src/widgets/form/TextField.scss +55 -55
  46. package/src/widgets/form/UploadButton.d.ts +34 -34
  47. package/src/widgets/grid/TreeNode.scss +88 -88
  48. package/src/widgets/grid/variables.scss +88 -88
  49. package/src/widgets/nav/Menu.scss +74 -74
  50. package/src/widgets/overlay/Dropdown.js +612 -612
  51. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  52. package/src/widgets/overlay/Tooltip.js +300 -300
  53. package/src/widgets/overlay/Window.js +196 -196
  54. package/src/widgets/overlay/captureMouse.js +124 -124
  55. package/src/widgets/overlay/variables.scss +83 -83
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
+ }