cx 26.3.10 → 26.4.1

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 (50) hide show
  1. package/build/util/innerTextTrim.js +1 -1
  2. package/build/widgets/nav/Menu.d.ts +1 -0
  3. package/build/widgets/nav/Menu.d.ts.map +1 -1
  4. package/build/widgets/nav/Menu.js +3 -0
  5. package/dist/charts.css +10 -0
  6. package/dist/manifest.js +768 -768
  7. package/dist/util.js +1 -1
  8. package/dist/widgets.css +14 -6
  9. package/dist/widgets.js +3 -0
  10. package/package.json +4 -3
  11. package/src/charts/BarGraph.scss +31 -31
  12. package/src/charts/Legend.scss +57 -57
  13. package/src/charts/LegendEntry.scss +35 -35
  14. package/src/charts/LineGraph.scss +28 -28
  15. package/src/charts/Swimlane.scss +3 -0
  16. package/src/charts/Swimlanes.scss +3 -0
  17. package/src/charts/helpers/SnapPointFinder.ts +136 -136
  18. package/src/charts/helpers/ValueAtFinder.ts +72 -72
  19. package/src/charts/index.scss +2 -0
  20. package/src/data/createAccessorModelProxy.ts +66 -66
  21. package/src/ui/DataProxy.ts +55 -55
  22. package/src/ui/Repeater.spec.tsx +38 -0
  23. package/src/ui/Rescope.ts +50 -50
  24. package/src/ui/adapter/ArrayAdapter.ts +229 -229
  25. package/src/ui/exprHelpers.ts +96 -96
  26. package/src/ui/layout/LabelsTopLayout.scss +10 -0
  27. package/src/util/innerTextTrim.ts +1 -1
  28. package/src/util/scss/include.scss +69 -69
  29. package/src/widgets/Button.maps.scss +103 -103
  30. package/src/widgets/Sandbox.ts +104 -104
  31. package/src/widgets/form/Calendar.tsx +772 -772
  32. package/src/widgets/form/ColorField.scss +112 -112
  33. package/src/widgets/form/DateTimeField.scss +111 -111
  34. package/src/widgets/form/LookupField.maps.scss +26 -26
  35. package/src/widgets/form/LookupField.scss +227 -227
  36. package/src/widgets/form/MonthField.scss +113 -113
  37. package/src/widgets/form/NumberField.scss +72 -72
  38. package/src/widgets/form/Select.scss +104 -104
  39. package/src/widgets/form/TextField.scss +66 -66
  40. package/src/widgets/form/variables.scss +114 -111
  41. package/src/widgets/grid/Grid.scss +657 -657
  42. package/src/widgets/grid/variables.scss +47 -47
  43. package/src/widgets/index.ts +63 -63
  44. package/src/widgets/nav/Menu.tsx +5 -0
  45. package/src/widgets/nav/MenuItem.scss +2 -2
  46. package/src/widgets/nav/MenuItem.tsx +525 -525
  47. package/src/widgets/nav/Tab.ts +122 -122
  48. package/src/widgets/overlay/Overlay.tsx +1028 -1028
  49. package/src/widgets/overlay/Window.tsx +320 -320
  50. package/src/widgets/variables.scss +61 -61
package/src/widgets/form/variables.scss CHANGED
@@ -1,111 +1,114 @@
1
- @use "sass:map";
2
- @use "../../util/scss/include.scss" as *;
3
- @use "../../util/scss/defaults.scss" as *;
4
- @use "../../util/scss/clockwise.scss" as *;
5
- @use "../../util/scss/calc.scss" as *;
6
- @use "../box.scss" as *;
7
- @use "./Field.variables.scss" as *;
8
-
9
- // Label
10
- $cx-default-label-padding: $cx-default-box-padding 0 !default;
11
- $cx-default-label-font-size: $cx-default-box-font-size !default;
12
- $cx-default-label-font-family: $cx-default-box-font-family !default;
13
- $cx-default-label-font-weight: normal !default;
14
- $cx-default-label-line-height: $cx-default-box-line-height !default;
15
- $cx-default-label-color: null !default;
16
- $cx-default-label-asterisk-color: #a80000 !default;
17
-
18
- // DATE TIME PICKER
19
- $cx-default-datetimepicker-font-size: $cx-default-font-size !default;
20
- $cx-default-datetimepicker-background-color: #fff !default;
21
- $cx-default-datetimepicker-border-width: 1px !default;
22
- $cx-default-datetimepicker-border-radius: 0 !default;
23
- $cx-default-datetimepicker-border-color: #d3d3d3 !default;
24
- $cx-default-datetimepicker-padding: 0 5px !default;
25
-
26
- // wheel
27
- $cx-default-wheel-clip-background-color: #fff !default;
28
- $cx-default-wheel-clip-border-width: 1px !default;
29
- $cx-default-wheel-clip-border-radius: 0 !default;
30
- $cx-default-wheel-clip-border-color: #d3d3d3 !default;
31
- $cx-default-wheel-option-padding: 5px 15px !default;
32
-
33
- $cx-wheel-selection-state-style-map: (
34
- default: (
35
- border-width: 2px 0 2px 0,
36
- border-style: solid,
37
- border-color: #9bc8ff,
38
- background-color: rgba(#9bc8ff, 0.1),
39
- ),
40
- active: (
41
- border-color: #3c7eff,
42
- background: rgba(#3c7eff, 0.1),
43
- ),
44
- ) !default;
45
-
46
- // COLORFIELD
47
- $cx-default-colorfield-font-family: "Consolas", monospace !default;
48
-
49
- // MONTHPICKER
50
- @forward "./MonthPicker.variables.scss";
51
-
52
- // SLIDER
53
- $cx-default-slider-axis-size: 8px !default;
54
- $cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
55
- $cx-default-slider-range-background-color: #98d4ff !default;
56
-
57
- // handle
58
- $cx-default-slider-handle-size: 18px !default;
59
- $cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
60
- $cx-default-slider-handle-border-width: 1px !default;
61
- $cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
62
- $cx-default-slider-handle-border-radius: 50% !default;
63
- $cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
64
-
65
- // SWITCH
66
- $cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
67
- $cx-default-switch-range-background-color: #87cc8a !default;
68
- $cx-default-switch-axis-size: 20px !default;
69
- $cx-default-switch-width: 32px !default;
70
-
71
- $cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
72
- $cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
73
- $cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
74
- $cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
75
- $cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
76
- $cx-default-switch-handle-size: 18px !default;
77
-
78
- // TEXTAREA
79
- $cx-default-textarea-width: 300px !default;
80
-
81
- // LOOKUPFIELD TAG
82
- $cx-default-input-tag-spacing: 3px !default;
83
- $cx-default-input-tag-font-size: null !default;
84
- $cx-default-input-tag-background-color: #eee !default;
85
- $cx-default-input-tag-border-radius: $cx-default-border-radius !default;
86
- $cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
87
-
88
- // Note: Field.variables.scss is @use'd above, not @forward'd here
89
- // to avoid "module already loaded" errors with @forward...with() configuration
90
- @forward "./Calendar.variables.scss";
91
- @forward "./Checkbox.variables.scss";
92
- @forward "./Radio.variables.scss";
93
- @forward "./ColorPicker.variables.scss";
94
-
95
- @include cx-register-dependencies(
96
- (
97
- "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
98
- "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
99
- "cx/widgets/Dropdown",
100
- "cx/widgets/DateField": "cx/widgets/DateTimeField",
101
- "cx/widgets/TimeField": "cx/widgets/DateTimeField",
102
- "cx/widgets/TextField": "cx/widgets/Field",
103
- "cx/widgets/NumberField": "cx/widgets/Field",
104
- "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
105
- "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
106
- "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
107
- "cx/widgets/Select": "cx/widgets/Field",
108
- "cx/widgets/Slider": "cx/widgets/Field",
109
- "cx/widgets/Switch": "cx/widgets/Field",
110
- )
111
- );
1
+ @use "sass:map";
2
+ @use "../../util/scss/include.scss" as *;
3
+ @use "../../util/scss/defaults.scss" as *;
4
+ @use "../../util/scss/clockwise.scss" as *;
5
+ @use "../../util/scss/calc.scss" as *;
6
+ @use "../box.scss" as *;
7
+ @use "../Button.variables.scss" as *;
8
+ @use "./Field.variables.scss" as *;
9
+
10
+ // Label
11
+ $cx-default-label-padding: $cx-default-box-padding 0 !default;
12
+ $cx-default-label-font-size: $cx-default-box-font-size !default;
13
+ $cx-default-label-font-family: $cx-default-box-font-family !default;
14
+ $cx-default-label-font-weight: normal !default;
15
+ $cx-default-label-line-height: $cx-default-box-line-height !default;
16
+ $cx-default-label-color: null !default;
17
+ $cx-default-label-asterisk-color: #a80000 !default;
18
+
19
+ // DATE TIME PICKER
20
+ $cx-default-datetimepicker-font-size: $cx-default-font-size !default;
21
+ $cx-default-datetimepicker-background-color: #fff !default;
22
+ $cx-default-datetimepicker-border-width: 1px !default;
23
+ $cx-default-datetimepicker-border-radius: 0 !default;
24
+ $cx-default-datetimepicker-border-color: #d3d3d3 !default;
25
+ $cx-default-datetimepicker-padding: 0 5px !default;
26
+
27
+ // wheel
28
+ $cx-default-wheel-clip-background-color: #fff !default;
29
+ $cx-default-wheel-clip-border-width: 1px !default;
30
+ $cx-default-wheel-clip-border-radius: 0 !default;
31
+ $cx-default-wheel-clip-border-color: #d3d3d3 !default;
32
+ $cx-default-wheel-option-padding: 5px 15px !default;
33
+
34
+ $cx-wheel-selection-state-style-map: (
35
+ default: (
36
+ border-width: 2px 0 2px 0,
37
+ border-style: solid,
38
+ border-color: #9bc8ff,
39
+ background-color: rgba(#9bc8ff, 0.1),
40
+ ),
41
+ active: (
42
+ border-color: #3c7eff,
43
+ background: rgba(#3c7eff, 0.1),
44
+ ),
45
+ ) !default;
46
+
47
+ // COLORFIELD
48
+ $cx-default-colorfield-font-family: "Consolas", monospace !default;
49
+
50
+ // MONTHPICKER
51
+ @forward "./MonthPicker.variables.scss";
52
+
53
+ // SLIDER
54
+ $cx-default-slider-axis-size: 8px !default;
55
+ $cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
56
+ $cx-default-slider-range-background-color: #98d4ff !default;
57
+
58
+ // handle
59
+ $cx-default-slider-handle-size: 18px !default;
60
+ $cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
61
+ $cx-default-slider-handle-border-width: 1px !default;
62
+ $cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
63
+ $cx-default-slider-handle-border-radius: 50% !default;
64
+ $cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
65
+
66
+ // SWITCH
67
+ $cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
68
+ $cx-default-switch-range-background-color: #87cc8a !default;
69
+ $cx-default-switch-axis-size: 20px !default;
70
+ $cx-default-switch-width: 32px !default;
71
+
72
+ $cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
73
+ $cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
74
+ $cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
75
+ $cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
76
+ $cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
77
+ $cx-default-switch-handle-size: 18px !default;
78
+
79
+ // TEXTAREA
80
+ $cx-default-textarea-width: 300px !default;
81
+
82
+ // LOOKUPFIELD TAG
83
+ $cx-default-input-tag-spacing: 3px !default;
84
+ $cx-default-input-tag-font-size: null !default;
85
+ $cx-default-input-tag-background-color: #eee !default;
86
+ $cx-default-input-tag-border-radius: $cx-default-border-radius !default;
87
+ $cx-default-input-tag-border-width: $cx-default-button-border-width !default;
88
+ $cx-default-input-tag-border-color: $cx-default-button-border-color !default;
89
+ $cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
90
+
91
+ // Note: Field.variables.scss is @use'd above, not @forward'd here
92
+ // to avoid "module already loaded" errors with @forward...with() configuration
93
+ @forward "./Calendar.variables.scss";
94
+ @forward "./Checkbox.variables.scss";
95
+ @forward "./Radio.variables.scss";
96
+ @forward "./ColorPicker.variables.scss";
97
+
98
+ @include cx-register-dependencies(
99
+ (
100
+ "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
101
+ "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
102
+ "cx/widgets/Dropdown",
103
+ "cx/widgets/DateField": "cx/widgets/DateTimeField",
104
+ "cx/widgets/TimeField": "cx/widgets/DateTimeField",
105
+ "cx/widgets/TextField": "cx/widgets/Field",
106
+ "cx/widgets/NumberField": "cx/widgets/Field",
107
+ "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
108
+ "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
109
+ "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
110
+ "cx/widgets/Select": "cx/widgets/Field",
111
+ "cx/widgets/Slider": "cx/widgets/Field",
112
+ "cx/widgets/Switch": "cx/widgets/Field",
113
+ )
114
+ );