cx 24.6.1 → 24.6.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 (10) hide show
  1. package/dist/charts.js +12 -4
  2. package/dist/manifest.js +812 -812
  3. package/package.json +1 -1
  4. package/src/charts/ColumnGraph.js +112 -112
  5. package/src/charts/LineGraph.js +1 -1
  6. package/src/charts/helpers/SnapPointFinder.d.ts +30 -24
  7. package/src/charts/helpers/SnapPointFinder.js +49 -47
  8. package/src/charts/helpers/ValueAtFinder.d.ts +16 -17
  9. package/src/widgets/form/Calendar.js +527 -527
  10. package/src/widgets/form/Calendar.scss +164 -164
package/src/widgets/form/Calendar.scss CHANGED
@@ -1,164 +1,164 @@
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
- @include cx-add-state-rules($state-style-map, "default");
15
-
16
- display: inline-block;
17
- vertical-align: middle;
18
- width: 18em;
19
- box-sizing: border-box;
20
-
21
- &:hover {
22
- @include cx-add-state-rules($state-style-map, "hover");
23
- }
24
-
25
- &:focus {
26
- @include cx-add-state-rules($state-style-map, "focus");
27
- }
28
-
29
- &.#{$state}error {
30
- @include cx-add-state-rules($state-style-map, "error");
31
-
32
- &:focus {
33
- @include cx-add-state-rules($state-style-map, "error-focus");
34
- }
35
- }
36
-
37
- table {
38
- border-spacing: 0;
39
- width: 100%;
40
- }
41
-
42
- td,
43
- th {
44
- text-align: center;
45
- width: 2em;
46
- line-height: 2em;
47
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
48
- }
49
-
50
- th {
51
- font-weight: cx-get-state-rule($state-style-map, header, font-weight);
52
- }
53
-
54
- tbody td {
55
- @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
56
- user-select: none;
57
- }
58
-
59
- .#{$element}#{$name}-header {
60
- @include cx-add-state-rules($state-style-map, header);
61
- }
62
-
63
- td.#{$state}today {
64
- @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
65
-
66
- &:hover {
67
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
68
- }
69
- }
70
-
71
- td.#{$state}outside {
72
- @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
73
- }
74
-
75
- td.#{$state}unselectable {
76
- @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
77
- }
78
-
79
- td.#{$state}cursor,
80
- .#{$element}#{$name}-header td:hover {
81
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
82
- }
83
-
84
- td.#{$state}selected {
85
- @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
86
- }
87
-
88
- &:not(.#{$state}disabled) {
89
- td {
90
- cursor: pointer;
91
- }
92
- }
93
-
94
- td:first-child,
95
- td:last-child {
96
- display: none;
97
- pointer-events: none;
98
- }
99
-
100
- &:focus {
101
- td.#{$state}cursor,
102
- .#{$element}#{$name}-header td:hover {
103
- @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
104
-
105
- &:active {
106
- @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
107
- }
108
- }
109
-
110
- td.#{$state}selected {
111
- @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
112
- }
113
- }
114
-
115
- &.#{$state}disabled {
116
- background-color: transparent;
117
- border-color: transparent;
118
- color: darken(#fff, 18);
119
- pointer-events: none;
120
- opacity: 0.9;
121
- }
122
- }
123
-
124
- .#{$element}#{$name}-header td {
125
- line-height: 0;
126
- }
127
-
128
- .#{$element}#{$name}-icon-next-year,
129
- .#{$element}#{$name}-icon-prev-year,
130
- .#{$element}#{$name}-icon-prev-month,
131
- .#{$element}#{$name}-icon-next-month {
132
- width: $icon-size;
133
- height: $icon-size;
134
- display: inline-block;
135
- font-size: $icon-size;
136
- line-height: $icon-size;
137
- user-select: none;
138
- }
139
-
140
- .#{$element}#{$name}-icon-prev-year {
141
- transform: rotate(180deg);
142
- }
143
- .#{$element}#{$name}-icon-prev-month {
144
- transform: rotate(90deg);
145
- }
146
- .#{$element}#{$name}-icon-next-month {
147
- transform: rotate(-90deg);
148
- }
149
-
150
- th.#{$element}#{$name}-display {
151
- line-height: 1.5;
152
- padding: 0.5em;
153
- }
154
-
155
- .#{$element}#{$name}-toolbar {
156
- display: flex;
157
- justify-content: center;
158
- margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
159
- }
160
- }
161
-
162
- @if (cx-should-include("cx/widgets/Calendar")) {
163
- @include cx-calendar();
164
- }
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
+ @include cx-add-state-rules($state-style-map, "default");
15
+
16
+ display: inline-block;
17
+ vertical-align: middle;
18
+ width: 18em;
19
+ box-sizing: border-box;
20
+
21
+ &:hover {
22
+ @include cx-add-state-rules($state-style-map, "hover");
23
+ }
24
+
25
+ &:focus {
26
+ @include cx-add-state-rules($state-style-map, "focus");
27
+ }
28
+
29
+ &.#{$state}error {
30
+ @include cx-add-state-rules($state-style-map, "error");
31
+
32
+ &:focus {
33
+ @include cx-add-state-rules($state-style-map, "error-focus");
34
+ }
35
+ }
36
+
37
+ table {
38
+ border-spacing: 0;
39
+ width: 100%;
40
+ }
41
+
42
+ td,
43
+ th {
44
+ text-align: center;
45
+ width: 2em;
46
+ line-height: 2em;
47
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
48
+ }
49
+
50
+ th {
51
+ font-weight: cx-get-state-rule($state-style-map, header, font-weight);
52
+ }
53
+
54
+ tbody td {
55
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
56
+ user-select: none;
57
+ }
58
+
59
+ .#{$element}#{$name}-header {
60
+ @include cx-add-state-rules($state-style-map, header);
61
+ }
62
+
63
+ td.#{$state}today {
64
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
65
+
66
+ &:hover {
67
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
68
+ }
69
+ }
70
+
71
+ td.#{$state}outside {
72
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
73
+ }
74
+
75
+ td.#{$state}unselectable {
76
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
77
+ }
78
+
79
+ td.#{$state}cursor,
80
+ .#{$element}#{$name}-header td:hover {
81
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
82
+ }
83
+
84
+ td.#{$state}selected {
85
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
86
+ }
87
+
88
+ &:not(.#{$state}disabled) {
89
+ td {
90
+ cursor: pointer;
91
+ }
92
+ }
93
+
94
+ td:first-child,
95
+ td:last-child {
96
+ display: none;
97
+ pointer-events: none;
98
+ }
99
+
100
+ &:focus {
101
+ td.#{$state}cursor,
102
+ .#{$element}#{$name}-header td:hover {
103
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
104
+
105
+ &:active {
106
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
107
+ }
108
+ }
109
+
110
+ td.#{$state}selected {
111
+ @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
112
+ }
113
+ }
114
+
115
+ &.#{$state}disabled {
116
+ background-color: transparent;
117
+ border-color: transparent;
118
+ color: darken(#fff, 18);
119
+ pointer-events: none;
120
+ opacity: 0.9;
121
+ }
122
+ }
123
+
124
+ .#{$element}#{$name}-header td {
125
+ line-height: 0;
126
+ }
127
+
128
+ .#{$element}#{$name}-icon-next-year,
129
+ .#{$element}#{$name}-icon-prev-year,
130
+ .#{$element}#{$name}-icon-prev-month,
131
+ .#{$element}#{$name}-icon-next-month {
132
+ width: $icon-size;
133
+ height: $icon-size;
134
+ display: inline-block;
135
+ font-size: $icon-size;
136
+ line-height: $icon-size;
137
+ user-select: none;
138
+ }
139
+
140
+ .#{$element}#{$name}-icon-prev-year {
141
+ transform: rotate(180deg);
142
+ }
143
+ .#{$element}#{$name}-icon-prev-month {
144
+ transform: rotate(90deg);
145
+ }
146
+ .#{$element}#{$name}-icon-next-month {
147
+ transform: rotate(-90deg);
148
+ }
149
+
150
+ th.#{$element}#{$name}-display {
151
+ line-height: 1.5;
152
+ padding: 0.5em;
153
+ }
154
+
155
+ .#{$element}#{$name}-toolbar {
156
+ display: flex;
157
+ justify-content: center;
158
+ margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
159
+ }
160
+ }
161
+
162
+ @if (cx-should-include("cx/widgets/Calendar")) {
163
+ @include cx-calendar();
164
+ }