@capillarytech/blaze-ui 6.3.0 → 6.4.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 (94) hide show
  1. package/CapDateRangePicker/index.d.ts.map +1 -1
  2. package/CapDateRangePicker/index.js +1 -5
  3. package/CapDateRangePicker/styles.css +0 -28
  4. package/CapDateRangePicker/styles.module.scss.js +1 -2
  5. package/CapDateRangePicker/styles.scss +0 -37
  6. package/CapDateRangePicker/types.d.ts +0 -5
  7. package/CapDateRangePicker/types.d.ts.map +1 -1
  8. package/CapDragAndDrop/index.d.ts +3 -19
  9. package/CapDragAndDrop/index.d.ts.map +1 -1
  10. package/CapDragAndDrop/index.js +24 -29
  11. package/CapDragAndDrop/messages.d.ts +25 -0
  12. package/CapDragAndDrop/messages.d.ts.map +1 -0
  13. package/CapDragAndDrop/messages.js +28 -0
  14. package/CapDragAndDrop/styles.css +17 -15
  15. package/CapDragAndDrop/styles.module.scss.js +21 -0
  16. package/CapDragAndDrop/styles.scss +18 -16
  17. package/CapDragAndDrop/types.d.ts +17 -0
  18. package/CapDragAndDrop/types.d.ts.map +1 -0
  19. package/CapMobileDateRangePicker/ReactMobileDatePickerModule.d.ts.map +1 -1
  20. package/CapMobileDateRangePicker/ReactMobileDatePickerModule.js +1 -2
  21. package/CapMobileDateRangePicker/index.d.ts +21 -5
  22. package/CapMobileDateRangePicker/index.d.ts.map +1 -1
  23. package/CapMobileDateRangePicker/index.js +309 -262
  24. package/CapMobileDateRangePicker/styles.css +144 -107
  25. package/CapMobileDateRangePicker/styles.scss +192 -188
  26. package/CapTimeline/CapTimelineCard.d.ts +4 -27
  27. package/CapTimeline/CapTimelineCard.d.ts.map +1 -1
  28. package/CapTimeline/CapTimelineCard.js +40 -157
  29. package/CapTimeline/CapTimelinePanesWrapper.d.ts +4 -25
  30. package/CapTimeline/CapTimelinePanesWrapper.d.ts.map +1 -1
  31. package/CapTimeline/CapTimelinePanesWrapper.js +24 -20
  32. package/CapTimeline/index.d.ts +2 -17
  33. package/CapTimeline/index.d.ts.map +1 -1
  34. package/CapTimeline/index.js +62 -23
  35. package/CapTimeline/messages.d.ts +21 -0
  36. package/CapTimeline/messages.d.ts.map +1 -0
  37. package/CapTimeline/messages.js +24 -0
  38. package/CapTimeline/styles.css +40 -40
  39. package/CapTimeline/styles.module.scss.js +30 -0
  40. package/CapTimeline/styles.scss +76 -57
  41. package/CapTimeline/tests/CapTimeline.mockData.d.ts +14 -0
  42. package/CapTimeline/tests/CapTimeline.mockData.d.ts.map +1 -0
  43. package/CapTimeline/types.d.ts +60 -0
  44. package/CapTimeline/types.d.ts.map +1 -0
  45. package/CapTimeline/types.js +1 -0
  46. package/index.d.ts +4 -2
  47. package/index.d.ts.map +1 -1
  48. package/index.js +99 -97
  49. package/package.json +1 -1
  50. package/utils/dayjs.d.ts +0 -29
  51. package/utils/dayjs.d.ts.map +1 -1
  52. package/utils/dayjs.js +0 -30
  53. package/utils/getCapThemeConfig.d.ts.map +1 -1
  54. package/utils/getCapThemeConfig.js +9 -1
  55. package/CapMobileDateRangePicker/DateRangeInputSelectors.d.ts +0 -7
  56. package/CapMobileDateRangePicker/DateRangeInputSelectors.d.ts.map +0 -1
  57. package/CapMobileDateRangePicker/DateRangeInputSelectors.js +0 -68
  58. package/CapMobileDateRangePicker/messages.d.ts +0 -17
  59. package/CapMobileDateRangePicker/messages.d.ts.map +0 -1
  60. package/CapMobileDateRangePicker/messages.js +0 -20
  61. package/CapMobileDateRangePicker/styles.module.scss.js +0 -21
  62. package/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.d.ts +0 -18
  63. package/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.d.ts.map +0 -1
  64. package/CapMobileDateRangePicker/types.d.ts +0 -95
  65. package/CapMobileDateRangePicker/types.d.ts.map +0 -1
  66. package/CapVirtualSelect/actions.d.ts +0 -16
  67. package/CapVirtualSelect/actions.d.ts.map +0 -1
  68. package/CapVirtualSelect/actions.js +0 -21
  69. package/CapVirtualSelect/constants.d.ts +0 -13
  70. package/CapVirtualSelect/constants.d.ts.map +0 -1
  71. package/CapVirtualSelect/constants.js +0 -26
  72. package/CapVirtualSelect/index.d.ts +0 -169
  73. package/CapVirtualSelect/index.d.ts.map +0 -1
  74. package/CapVirtualSelect/index.js +0 -409
  75. package/CapVirtualSelect/messages.d.ts +0 -9
  76. package/CapVirtualSelect/messages.d.ts.map +0 -1
  77. package/CapVirtualSelect/messages.js +0 -12
  78. package/CapVirtualSelect/reducer.d.ts +0 -4
  79. package/CapVirtualSelect/reducer.d.ts.map +0 -1
  80. package/CapVirtualSelect/reducer.js +0 -63
  81. package/CapVirtualSelect/saga.d.ts +0 -40
  82. package/CapVirtualSelect/saga.d.ts.map +0 -1
  83. package/CapVirtualSelect/saga.js +0 -91
  84. package/CapVirtualSelect/selectors.d.ts +0 -28
  85. package/CapVirtualSelect/selectors.d.ts.map +0 -1
  86. package/CapVirtualSelect/selectors.js +0 -30
  87. package/CapVirtualSelect/styles.css +0 -110
  88. package/CapVirtualSelect/styles.scss +0 -106
  89. package/CapVirtualSelect/tests/mockData.d.ts +0 -7
  90. package/CapVirtualSelect/tests/mockData.d.ts.map +0 -1
  91. package/CapVirtualSelect/utils.d.ts +0 -2
  92. package/CapVirtualSelect/utils.d.ts.map +0 -1
  93. package/CapVirtualSelect/utils.js +0 -12
  94. /package/{CapMobileDateRangePicker → CapDragAndDrop}/types.js +0 -0
package/CapMobileDateRangePicker/styles.css CHANGED
@@ -1,148 +1,185 @@
1
- /* Color Palette */
2
- /* Fonts */
3
- /* Backward Compatibility Aliases */
4
- /* Component Heights */
5
- /* Border Radius */
6
- /* Border Width */
7
- /* Transition */
8
- /* Timezones Footer */
9
- .cap-mobile-date-range-picker-modal-header {
10
- margin-bottom: 0.857rem !important;
11
- }
12
- .cap-mobile-date-range-picker-modal-footer {
1
+ .mobile-view .mobile-date-range-picker-modal .modal-footer {
13
2
  display: flex;
14
3
  justify-content: flex-end;
15
- width: inherit;
16
- padding: 1.714rem;
4
+ padding-right: 10px;
17
5
  }
18
- .cap-mobile-date-range-picker-modal-footer-cancel-button {
19
- color: #2466ea !important;
20
- cursor: pointer !important;
21
- font-size: 1rem !important;
22
- margin-right: 1.714rem;
6
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .cap-divider-v2 {
7
+ margin-top: 22px;
8
+ margin-bottom: 12px;
23
9
  }
24
- .cap-mobile-date-range-picker-modal-footer-done-button {
25
- color: #2466ea !important;
26
- cursor: pointer !important;
27
- font-size: 1rem !important;
10
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .compare-mobile-date-picker .datepicker .datepicker-wheel {
11
+ background: rgba(229, 31, 163, 0.1);
12
+ }
13
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .compare-mobile-date-picker .datepicker .datepicker-scroll > li.selected {
14
+ color: rgb(229, 31, 163);
15
+ }
16
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .datepicker {
17
+ position: static;
28
18
  }
29
- .cap-mobile-date-range-picker-divider {
30
- margin: 0.857rem 0;
19
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .datepicker .datepicker-content {
20
+ background: #fff;
21
+ padding: 0.75em 0.25em;
22
+ }
23
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .datepicker .datepicker-viewport {
24
+ height: calc(38vh - 12px);
25
+ }
26
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .datepicker .datepicker-scroll > li {
27
+ font-family: "Roboto", sans-serif;
28
+ font-size: 14px;
31
29
  }
32
- .cap-mobile-date-range-picker-inputs {
30
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .datepicker .datepicker-scroll > li.selected {
31
+ color: rgb(36, 102, 234);
32
+ }
33
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-body .datepicker .datepicker-wheel {
34
+ border-top: 0;
35
+ border-bottom: 0;
36
+ background: rgb(233, 240, 254);
37
+ }
38
+ .mobile-view .mobile-date-range-picker-modal .ant-modal-content .ant-modal-footer {
39
+ padding-top: 1.714rem;
40
+ }
41
+ .mobile-view .mobile-dateRange-picker-inputs {
33
42
  display: flex;
34
43
  align-items: center;
35
44
  }
36
- .cap-mobile-date-range-picker-inputs-date-range-hyphen {
37
- margin-inline: 0.571rem;
45
+ .mobile-view .mobile-dateRange-picker-inputs .cap-column-v2.ant-col-11 {
46
+ width: 45%;
38
47
  }
39
- .cap-mobile-date-range-picker-inputs-date-range-hyphen-vertical-align {
40
- margin-top: 1rem;
48
+ .mobile-view .mobile-dateRange-picker-inputs .cap-column-v2.ant-col-2 {
49
+ width: 2%;
41
50
  }
42
- .cap-mobile-date-range-picker-inputs-label {
43
- margin-bottom: 0.285rem;
51
+ .mobile-view .mobile-dateRange-picker-inputs input {
52
+ margin-top: 5px;
53
+ max-width: 100px;
44
54
  }
45
- .cap-mobile-date-range-picker-inputs-focused .ant-input {
55
+ .mobile-view .mobile-dateRange-picker-inputs .focused .ant-input {
46
56
  border: 1px solid #091e42;
47
57
  }
48
- .cap-mobile-date-range-picker-inputs .ant-input {
49
- font-size: 0.857rem;
58
+ .mobile-view .mobile-dateRange-picker-inputs .ant-input[disabled] {
59
+ background-color: transparent;
60
+ color: rgb(9, 30, 66);
61
+ -webkit-text-fill-color: rgb(9, 30, 66) !important;
50
62
  }
51
- .cap-mobile-date-range-picker-reset-button {
52
- color: #2466ea !important;
53
- cursor: pointer !important;
54
- font-size: 1rem !important;
55
- margin-top: 1rem;
63
+ .mobile-view .mobile-dateRange-picker-inputs .placeholder-text {
64
+ font-size: 12px;
65
+ color: rgb(94, 108, 132);
56
66
  }
57
- .cap-mobile-date-range-picker-switch-label {
58
- color: #2466ea !important;
59
- cursor: pointer !important;
60
- font-size: 1rem !important;
61
- text-align: right;
62
- margin: 0;
67
+ .mobile-view .mobile-dateRange-picker-inputs .date-range-hyphen {
68
+ margin-left: 10px;
69
+ margin-right: 10px;
63
70
  }
64
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown {
65
- position: static;
66
- width: 100%;
71
+ .mobile-view .mobile-dateRange-picker-inputs .vertical-align {
72
+ margin-top: 28px;
67
73
  }
68
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container {
69
- border: none;
70
- box-shadow: none;
71
- background: transparent;
72
- width: inherit;
74
+ .mobile-view .mobile-dateRange-picker-inputs .ant-input-affix-wrapper .ant-input:not(:last-child) {
75
+ padding-right: 0;
73
76
  }
74
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout {
75
- width: inherit;
77
+ .mobile-view .calender-only {
78
+ margin-top: 8px;
76
79
  }
77
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout > div:first-of-type {
78
- width: inherit;
80
+ .mobile-view .calender-only .DayPicker_transitionContainer {
81
+ max-width: 80vw;
79
82
  }
80
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels {
81
- width: inherit;
83
+ .mobile-view .calender-only .DayPicker {
84
+ max-width: 80vw;
82
85
  }
83
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel {
84
- width: inherit;
86
+ .mobile-view .calender-only .DateRangePicker .ant-select-dropdown.cap-select-v2-dropdown .ant-select-dropdown-menu li {
87
+ font-size: 14px;
88
+ padding: 4px 12px;
89
+ height: 36px;
90
+ line-height: 30px;
85
91
  }
86
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel {
87
- width: inherit;
92
+ .mobile-view .DateRangePicker_picker .year-selector .cap-select-v2 .ant-select-selection {
93
+ height: 28px;
88
94
  }
89
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-start .ant-picker-cell-inner,
90
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-end .ant-picker-cell-inner {
91
- background-color: #2466ea;
95
+ .mobile-view .DateRangePicker_picker .year-selector .cap-select-v2 .ant-select-selection .ant-select-selection__rendered {
96
+ line-height: 26px;
92
97
  }
93
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-start::before,
94
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-end::before {
95
- background-color: #e9f0fe;
98
+ .mobile-view .DateRangePicker_picker .year-selector .cap-select-v2 .ant-select-selection .ant-select-selection-selected-value {
99
+ font-size: 14px;
96
100
  }
97
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-in-range::before {
98
- background-color: #e9f0fe;
101
+ .mobile-view .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker .CalendarDay__selected .calendar-day-content span {
102
+ background: rgb(229, 31, 163);
99
103
  }
100
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-today .ant-picker-cell-inner::before {
101
- border-color: #2466ea;
104
+ .mobile-view .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker .CalendarDay__selected_span .calendar-day-content, .mobile-view .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker .DateRangePicker_picker .CalendarDay__hovered_span .calendar-day-content {
105
+ background: rgba(229, 31, 163, 0.1);
102
106
  }
103
- .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-header-view {
104
- pointer-events: none;
107
+ .mobile-view .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker .CalendarDay__selected_start .calendar-day-content {
108
+ background: linear-gradient(90deg, #ffffff 50%, rgba(229, 31, 163, 0.1) 50%);
105
109
  }
106
- .cap-mobile-date-range-picker-scroller-datepicker {
107
- margin-top: 1.142rem;
110
+ .mobile-view .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker .CalendarDay__selected_end .calendar-day-content {
111
+ background: linear-gradient(90deg, rgba(229, 31, 163, 0.1) 50%, #ffffff 50%);
108
112
  }
109
- .cap-mobile-date-range-picker-scroller-datepicker .datepicker {
110
- position: static;
111
- background: transparent;
113
+ .mobile-view .control-section .action-item {
114
+ padding-top: 8%;
115
+ margin-left: -6%;
116
+ width: 16%;
117
+ text-align: right;
112
118
  }
113
- .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-content {
114
- background: transparent;
115
- padding: 0.75em 0.25em;
119
+ .mobile-view .control-section .cap-column-v2.ant-col-11 {
120
+ width: 40%;
121
+ min-width: 100px;
116
122
  }
117
- .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-scroll > li {
118
- font-family: "Roboto", sans-serif;
119
- font-size: 1rem;
123
+ .mobile-view .control-section .cap-column-v2.ant-col-2 {
124
+ width: 2%;
120
125
  }
121
- .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-scroll > li.selected {
122
- color: #2466ea;
126
+ .mobile-view .toggle-text {
127
+ text-align: right;
128
+ margin: 0;
123
129
  }
124
- .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-wheel {
125
- border-top: 0;
126
- border-bottom: 0;
127
- background: #e9f0fe;
130
+ .mobile-view .DayPicker_weekHeader, .mobile-view .CalendarMonth {
131
+ padding: 0 6px !important;
128
132
  }
129
- .cap-mobile-date-range-picker-compare-mobile-date-picker .datepicker .datepicker-scroll > li.selected {
130
- color: #e51fa3;
133
+ .mobile-view .CalendarMonth .CalendarMonth_caption {
134
+ padding: 6px 0 10px;
135
+ line-height: 20px;
136
+ font-weight: 400;
137
+ font-size: 14px;
138
+ color: rgb(9, 30, 66);
131
139
  }
132
- .cap-mobile-date-range-picker-compare-mobile-date-picker .datepicker .datepicker-wheel {
133
- background: rgba(229, 31, 163, 0.1);
140
+ .mobile-view .CalendarMonth .CalendarMonth_caption .month-name {
141
+ padding-top: 3px;
142
+ }
143
+ .mobile-view .CalendarMonth .CalendarMonth_caption .ant-select-lg {
144
+ width: 75px;
134
145
  }
135
- .cap-mobile-date-range-picker-compare-mobile-date-range-picker .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-start .ant-picker-cell-inner,
136
- .cap-mobile-date-range-picker-compare-mobile-date-range-picker .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-end .ant-picker-cell-inner {
137
- background-color: #e51fa3;
146
+ .mobile-view .DateRangePicker_picker {
147
+ left: -16px !important;
138
148
  }
139
- .cap-mobile-date-range-picker-compare-mobile-date-range-picker .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-start::before,
140
- .cap-mobile-date-range-picker-compare-mobile-date-range-picker .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-range-end::before {
141
- background-color: rgba(229, 31, 163, 0.1);
149
+ .mobile-view .DateRangePicker_picker .calendar-day-content {
150
+ padding: 0 5px;
142
151
  }
143
- .cap-mobile-date-range-picker-compare-mobile-date-range-picker .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-in-range::before {
144
- background-color: rgba(229, 31, 163, 0.1);
152
+ .mobile-view .DateRangePicker_picker .DayPicker__withBorder {
153
+ box-shadow: none;
145
154
  }
146
- .cap-mobile-date-range-picker-compare-mobile-date-range-picker .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout .ant-picker-panels .ant-picker-panel .ant-picker-date-panel .ant-picker-cell-today .ant-picker-cell-inner::before {
147
- border-color: #e51fa3;
155
+ .mobile-view .DateRangePicker_picker .month-nav-btn {
156
+ top: 6px;
157
+ margin-left: -2px;
158
+ margin-right: 14px;
159
+ }
160
+ .mobile-view .DateRangePicker_picker .CalendarDay__selected_span .calendar-day-content, .mobile-view .DateRangePicker_picker .DateRangePicker_picker .CalendarDay__hovered_span .calendar-day-content {
161
+ background: rgb(233, 240, 254);
162
+ }
163
+ .mobile-view .DateRangePicker_picker .CalendarDay__selected_start .calendar-day-content {
164
+ background: linear-gradient(90deg, #ffffff 50%, rgb(233, 240, 254), 50%);
165
+ }
166
+ .mobile-view .DateRangePicker_picker .CalendarDay__selected_end .calendar-day-content {
167
+ background: linear-gradient(90deg, rgb(233, 240, 254), 50%, #ffffff 50%);
168
+ }
169
+
170
+ @media screen and (max-height: 930px) {
171
+ .calender-only {
172
+ height: 32vh !important;
173
+ }
174
+ .calender-only .DayPicker_transitionContainer {
175
+ height: 32vh !important;
176
+ }
177
+ }
178
+ @media screen and (max-height: 854px) {
179
+ .calender-only {
180
+ height: 38.5vh !important;
181
+ }
182
+ .calender-only .DayPicker_transitionContainer {
183
+ height: 38.5vh !important;
184
+ }
148
185
  }