@capillarytech/blaze-ui 6.1.7 → 6.3.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 (43) hide show
  1. package/CapDateRangePicker/index.d.ts.map +1 -1
  2. package/CapDateRangePicker/index.js +5 -1
  3. package/CapDateRangePicker/styles.css +28 -0
  4. package/CapDateRangePicker/styles.module.scss.js +2 -1
  5. package/CapDateRangePicker/styles.scss +37 -0
  6. package/CapDateRangePicker/types.d.ts +5 -0
  7. package/CapDateRangePicker/types.d.ts.map +1 -1
  8. package/CapEmojiPicker/Picker/index.d.ts +1 -1
  9. package/CapEmojiPicker/Picker/index.d.ts.map +1 -1
  10. package/CapIcon/index.js +12 -12
  11. package/CapIcon/styles.css +21 -17
  12. package/CapIcon/styles.module.scss.js +4 -3
  13. package/CapIcon/styles.scss +15 -10
  14. package/CapMobileDateRangePicker/DateRangeInputSelectors.d.ts +7 -0
  15. package/CapMobileDateRangePicker/DateRangeInputSelectors.d.ts.map +1 -0
  16. package/CapMobileDateRangePicker/DateRangeInputSelectors.js +68 -0
  17. package/CapMobileDateRangePicker/ReactMobileDatePickerModule.d.ts.map +1 -1
  18. package/CapMobileDateRangePicker/ReactMobileDatePickerModule.js +2 -1
  19. package/CapMobileDateRangePicker/index.d.ts +5 -21
  20. package/CapMobileDateRangePicker/index.d.ts.map +1 -1
  21. package/CapMobileDateRangePicker/index.js +262 -309
  22. package/CapMobileDateRangePicker/messages.d.ts +17 -0
  23. package/CapMobileDateRangePicker/messages.d.ts.map +1 -0
  24. package/CapMobileDateRangePicker/messages.js +20 -0
  25. package/CapMobileDateRangePicker/styles.css +107 -144
  26. package/CapMobileDateRangePicker/styles.module.scss.js +21 -0
  27. package/CapMobileDateRangePicker/styles.scss +188 -192
  28. package/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.d.ts +18 -0
  29. package/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.d.ts.map +1 -0
  30. package/CapMobileDateRangePicker/types.d.ts +95 -0
  31. package/CapMobileDateRangePicker/types.d.ts.map +1 -0
  32. package/CapMobileDateRangePicker/types.js +1 -0
  33. package/CapSelectFilter/types.d.ts +1 -1
  34. package/CapSelectFilter/types.d.ts.map +1 -1
  35. package/index.d.ts +2 -0
  36. package/index.d.ts.map +1 -1
  37. package/index.js +110 -108
  38. package/package.json +2 -2
  39. package/utils/dayjs.d.ts +29 -0
  40. package/utils/dayjs.d.ts.map +1 -1
  41. package/utils/dayjs.js +30 -0
  42. package/utils/getCapThemeConfig.d.ts +1 -1
  43. package/utils/getCapThemeConfig.d.ts.map +1 -1
package/CapMobileDateRangePicker/styles.css CHANGED
@@ -1,185 +1,148 @@
1
- .mobile-view .mobile-date-range-picker-modal .modal-footer {
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 {
2
13
  display: flex;
3
14
  justify-content: flex-end;
4
- padding-right: 10px;
15
+ width: inherit;
16
+ padding: 1.714rem;
5
17
  }
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;
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;
9
23
  }
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;
24
+ .cap-mobile-date-range-picker-modal-footer-done-button {
25
+ color: #2466ea !important;
26
+ cursor: pointer !important;
27
+ font-size: 1rem !important;
18
28
  }
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;
29
+ .cap-mobile-date-range-picker-divider {
30
+ margin: 0.857rem 0;
29
31
  }
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 {
32
+ .cap-mobile-date-range-picker-inputs {
42
33
  display: flex;
43
34
  align-items: center;
44
35
  }
45
- .mobile-view .mobile-dateRange-picker-inputs .cap-column-v2.ant-col-11 {
46
- width: 45%;
36
+ .cap-mobile-date-range-picker-inputs-date-range-hyphen {
37
+ margin-inline: 0.571rem;
47
38
  }
48
- .mobile-view .mobile-dateRange-picker-inputs .cap-column-v2.ant-col-2 {
49
- width: 2%;
39
+ .cap-mobile-date-range-picker-inputs-date-range-hyphen-vertical-align {
40
+ margin-top: 1rem;
50
41
  }
51
- .mobile-view .mobile-dateRange-picker-inputs input {
52
- margin-top: 5px;
53
- max-width: 100px;
42
+ .cap-mobile-date-range-picker-inputs-label {
43
+ margin-bottom: 0.285rem;
54
44
  }
55
- .mobile-view .mobile-dateRange-picker-inputs .focused .ant-input {
45
+ .cap-mobile-date-range-picker-inputs-focused .ant-input {
56
46
  border: 1px solid #091e42;
57
47
  }
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;
62
- }
63
- .mobile-view .mobile-dateRange-picker-inputs .placeholder-text {
64
- font-size: 12px;
65
- color: rgb(94, 108, 132);
48
+ .cap-mobile-date-range-picker-inputs .ant-input {
49
+ font-size: 0.857rem;
66
50
  }
67
- .mobile-view .mobile-dateRange-picker-inputs .date-range-hyphen {
68
- margin-left: 10px;
69
- margin-right: 10px;
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;
70
56
  }
71
- .mobile-view .mobile-dateRange-picker-inputs .vertical-align {
72
- margin-top: 28px;
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;
73
63
  }
74
- .mobile-view .mobile-dateRange-picker-inputs .ant-input-affix-wrapper .ant-input:not(:last-child) {
75
- padding-right: 0;
64
+ .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown {
65
+ position: static;
66
+ width: 100%;
76
67
  }
77
- .mobile-view .calender-only {
78
- margin-top: 8px;
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;
79
73
  }
80
- .mobile-view .calender-only .DayPicker_transitionContainer {
81
- max-width: 80vw;
74
+ .cap-mobile-date-range-picker-calender-only .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panel-layout {
75
+ width: inherit;
82
76
  }
83
- .mobile-view .calender-only .DayPicker {
84
- max-width: 80vw;
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;
85
79
  }
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;
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;
91
82
  }
92
- .mobile-view .DateRangePicker_picker .year-selector .cap-select-v2 .ant-select-selection {
93
- height: 28px;
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;
94
85
  }
95
- .mobile-view .DateRangePicker_picker .year-selector .cap-select-v2 .ant-select-selection .ant-select-selection__rendered {
96
- line-height: 26px;
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;
97
88
  }
98
- .mobile-view .DateRangePicker_picker .year-selector .cap-select-v2 .ant-select-selection .ant-select-selection-selected-value {
99
- font-size: 14px;
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;
100
92
  }
101
- .mobile-view .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker .CalendarDay__selected .calendar-day-content span {
102
- background: rgb(229, 31, 163);
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;
103
96
  }
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);
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;
106
99
  }
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%);
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;
109
102
  }
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%);
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;
112
105
  }
113
- .mobile-view .control-section .action-item {
114
- padding-top: 8%;
115
- margin-left: -6%;
116
- width: 16%;
117
- text-align: right;
106
+ .cap-mobile-date-range-picker-scroller-datepicker {
107
+ margin-top: 1.142rem;
118
108
  }
119
- .mobile-view .control-section .cap-column-v2.ant-col-11 {
120
- width: 40%;
121
- min-width: 100px;
109
+ .cap-mobile-date-range-picker-scroller-datepicker .datepicker {
110
+ position: static;
111
+ background: transparent;
122
112
  }
123
- .mobile-view .control-section .cap-column-v2.ant-col-2 {
124
- width: 2%;
113
+ .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-content {
114
+ background: transparent;
115
+ padding: 0.75em 0.25em;
125
116
  }
126
- .mobile-view .toggle-text {
127
- text-align: right;
128
- margin: 0;
117
+ .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-scroll > li {
118
+ font-family: "Roboto", sans-serif;
119
+ font-size: 1rem;
129
120
  }
130
- .mobile-view .DayPicker_weekHeader, .mobile-view .CalendarMonth {
131
- padding: 0 6px !important;
121
+ .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-scroll > li.selected {
122
+ color: #2466ea;
132
123
  }
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);
124
+ .cap-mobile-date-range-picker-scroller-datepicker .datepicker .datepicker-wheel {
125
+ border-top: 0;
126
+ border-bottom: 0;
127
+ background: #e9f0fe;
139
128
  }
140
- .mobile-view .CalendarMonth .CalendarMonth_caption .month-name {
141
- padding-top: 3px;
129
+ .cap-mobile-date-range-picker-compare-mobile-date-picker .datepicker .datepicker-scroll > li.selected {
130
+ color: #e51fa3;
142
131
  }
143
- .mobile-view .CalendarMonth .CalendarMonth_caption .ant-select-lg {
144
- width: 75px;
132
+ .cap-mobile-date-range-picker-compare-mobile-date-picker .datepicker .datepicker-wheel {
133
+ background: rgba(229, 31, 163, 0.1);
145
134
  }
146
- .mobile-view .DateRangePicker_picker {
147
- left: -16px !important;
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;
148
138
  }
149
- .mobile-view .DateRangePicker_picker .calendar-day-content {
150
- padding: 0 5px;
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);
151
142
  }
152
- .mobile-view .DateRangePicker_picker .DayPicker__withBorder {
153
- box-shadow: none;
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);
154
145
  }
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
- }
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;
185
148
  }
package/CapMobileDateRangePicker/styles.module.scss.js ADDED
@@ -0,0 +1,21 @@
1
+ import './styles.css';const styles = {
2
+ "cap-mobile-date-range-picker-modal-header": "cap-mobile-date-range-picker-modal-header",
3
+ "cap-mobile-date-range-picker-modal-footer": "cap-mobile-date-range-picker-modal-footer",
4
+ "cap-mobile-date-range-picker-modal-footer-cancel-button": "cap-mobile-date-range-picker-modal-footer-cancel-button",
5
+ "cap-mobile-date-range-picker-modal-footer-done-button": "cap-mobile-date-range-picker-modal-footer-done-button",
6
+ "cap-mobile-date-range-picker-divider": "cap-mobile-date-range-picker-divider",
7
+ "cap-mobile-date-range-picker-inputs": "cap-mobile-date-range-picker-inputs",
8
+ "cap-mobile-date-range-picker-inputs-date-range-hyphen": "cap-mobile-date-range-picker-inputs-date-range-hyphen",
9
+ "cap-mobile-date-range-picker-inputs-date-range-hyphen-vertical-align": "cap-mobile-date-range-picker-inputs-date-range-hyphen-vertical-align",
10
+ "cap-mobile-date-range-picker-inputs-label": "cap-mobile-date-range-picker-inputs-label",
11
+ "cap-mobile-date-range-picker-inputs-focused": "cap-mobile-date-range-picker-inputs-focused",
12
+ "cap-mobile-date-range-picker-reset-button": "cap-mobile-date-range-picker-reset-button",
13
+ "cap-mobile-date-range-picker-switch-label": "cap-mobile-date-range-picker-switch-label",
14
+ "cap-mobile-date-range-picker-calender-only": "cap-mobile-date-range-picker-calender-only",
15
+ "cap-mobile-date-range-picker-scroller-datepicker": "cap-mobile-date-range-picker-scroller-datepicker",
16
+ "cap-mobile-date-range-picker-compare-mobile-date-picker": "cap-mobile-date-range-picker-compare-mobile-date-picker",
17
+ "cap-mobile-date-range-picker-compare-mobile-date-range-picker": "cap-mobile-date-range-picker-compare-mobile-date-range-picker"
18
+ };
19
+ export {
20
+ styles as default
21
+ };