@colijnit/sharedcomponents 1.0.68 → 1.0.69

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 (15) hide show
  1. package/bundles/colijnit-sharedcomponents.umd.js +50 -3
  2. package/bundles/colijnit-sharedcomponents.umd.js.map +1 -1
  3. package/colijnit-sharedcomponents.metadata.json +1 -1
  4. package/esm2015/lib/components/date-planning/component/agenda/agenda-header.component.js +32 -3
  5. package/esm2015/lib/enum/calendar-view.enum.js +2 -1
  6. package/esm2015/lib/model/icon-svg.js +3 -3
  7. package/esm2015/lib/utils/calendar.utils.js +34 -1
  8. package/fesm2015/colijnit-sharedcomponents.js +67 -4
  9. package/fesm2015/colijnit-sharedcomponents.js.map +1 -1
  10. package/lib/components/date-planning/component/agenda/style/_layout.scss +68 -55
  11. package/lib/components/date-planning/component/agenda/style/_material-definition.scss +1 -1
  12. package/lib/components/date-planning/style/_layout.scss +1 -0
  13. package/lib/enum/calendar-view.enum.d.ts +1 -0
  14. package/lib/utils/calendar.utils.d.ts +1 -0
  15. package/package.json +1 -1
package/lib/components/date-planning/component/agenda/style/_layout.scss CHANGED
@@ -16,7 +16,6 @@
16
16
  display: flex;
17
17
  width: inherit;
18
18
  height: $agenda-week-view-header-height;
19
- background: white;
20
19
  z-index: 9001;
21
20
  }
22
21
 
@@ -41,30 +40,27 @@
41
40
  align-items: center;
42
41
  justify-content: center;
43
42
  }
44
-
45
43
  .week-day-label {
46
- margin: 0.25em;
47
- padding: 0.25em;
48
- background: white;
49
- pointer-events: none;
44
+ margin: 0;
45
+ padding: 0;
50
46
  position: relative;
51
47
  flex-basis: 100%;
52
48
  display: flex;
49
+ gap: 10px;
53
50
  flex-direction: column;
54
51
  align-items: center;
55
52
  justify-content: center;
56
- border: 1px solid $color-border;
57
-
53
+ border: none;
54
+ cursor: pointer;
55
+ &:not(.days-around) {
56
+ pointer-events: none;
57
+ }
58
58
  .weekday-description, .weekday-value, .day-description {
59
59
  color: $color-dark;
60
60
  }
61
-
62
61
  &.selectable {
63
62
  pointer-events: all;
64
63
  }
65
-
66
-
67
-
68
64
  &.selectable:not(.selected) {
69
65
  cursor: pointer;
70
66
  color: $color-label;
@@ -77,71 +73,57 @@
77
73
  }
78
74
  }
79
75
  }
80
-
81
76
  .add-unit-icon, .sub-unit-icon {
82
77
  pointer-events: all;
83
78
  }
84
-
85
-
86
79
  }
87
-
88
80
  .weekday-description {
89
81
  color: $color-inactive-day;
90
82
  font-size: 14px;
91
83
  text-transform: uppercase;
92
84
  margin-top: 7px;
93
85
  }
94
-
95
86
  .weekday-value {
96
87
  color: $color-inactive-day;
97
88
  font-size: $agenda-week-label-value-font-size;
98
-
99
89
  }
100
-
101
90
  .sub-unit-icon {
102
91
  position: absolute;
103
92
  left: 7px;
104
93
  }
105
-
106
94
  .add-unit-icon {
107
95
  position: absolute;
108
96
  right: 7px;
109
97
  }
110
-
111
98
  .day-description {
112
99
  color: $color-inactive-day;
113
100
  font-size: $agenda-week-label-value-font-size;
114
101
  font-weight: bold;
115
102
  }
116
-
117
103
  .month-description {
118
- top: 1px;
104
+ top: 15px;
119
105
  left: 3px;
120
106
  font-size: 11px;
121
107
  text-transform: capitalize;
122
108
  position: absolute;
123
109
  width: 100px;
124
110
  }
125
-
126
111
  .view-wrapper {
127
112
  display: flex;
128
113
  width: 100%;
129
114
  margin-top: -1px;
130
115
  }
131
-
132
116
  .week-select-view {
133
117
  display: flex;
134
118
  position: relative;
135
119
  padding: 50px;
136
120
  height: 100%;
137
121
  }
138
-
139
122
  .week-day {
140
123
  display: flex;
141
124
  position: relative;
142
125
  flex-basis: 100%;
143
126
  }
144
-
145
127
  @media screen and (max-width: $xs-width) {
146
128
  .popup-card-content {
147
129
  padding: 0 0 15px !important;
@@ -155,48 +137,58 @@
155
137
  bottom: 0;
156
138
  }
157
139
  }
158
-
159
140
  agenda {
160
141
  position: relative;
161
142
  }
162
-
163
143
  .agenda-content-wrapper {
164
144
  min-width: 0 !important;
165
145
  }
166
-
167
146
  agenda-header {
168
147
  width: 100% !important;
169
148
  }
170
-
171
149
  .agenda-header-wrapper {
172
150
  padding: 0 50px;
173
151
  height: auto;
174
-
175
- .week-day-label {
176
-
177
- .sub-unit-icon {
178
- height: 100%;
179
- width: 50px;
180
- left: -50px;
181
- }
182
-
183
- .add-unit-icon {
184
- height: 100%;
185
- width: 50px;
186
- right: -50px;
187
- }
188
-
189
- @media screen and (max-width: $xs-width) {
152
+ gap: 10px;
153
+ margin-top: 30px;
154
+ &.days-around {
155
+ padding: 0;
156
+ margin: 0;
157
+ gap: 5px;
158
+ background: transparent;
159
+ justify-content: center;
160
+ .week-day-label {
190
161
  .sub-unit-icon {
191
- width: 25px;
192
- left: -25px;
162
+ height: 24px;
163
+ width: 24px;
164
+ left: -30px;
165
+ padding: 5px;
193
166
  }
194
-
195
167
  .add-unit-icon {
196
- width: 25px;
197
- right: -25px;
168
+ height: 24px;
169
+ width: 24px;
170
+ right: -30px;
171
+ padding: 5px;
198
172
  }
199
173
  }
174
+ }
175
+ .week-day-label {
176
+ .sub-unit-icon {
177
+ height: 30px;
178
+ width: 30px;
179
+ left: 0;
180
+ background: #f5f5fa;
181
+ border-radius: 100%;
182
+ padding: 7px
183
+ }
184
+ .add-unit-icon {
185
+ height: 30px;
186
+ width: 30px;
187
+ right: 0;
188
+ background: #f5f5fa;
189
+ border-radius: 100%;
190
+ padding: 7px;
191
+ }
200
192
 
201
193
  .weekday-description {
202
194
  font-size: 14px;
@@ -206,16 +198,37 @@
206
198
  .weekday-value {
207
199
  line-height: 30px;
208
200
  }
209
-
201
+ &.days-around {
202
+ width: 45px;
203
+ height: 45px;
204
+ flex-basis: 45px;
205
+ border-radius: 100%;
206
+ border: none;
207
+ background: transparent;
208
+ margin: 0;
209
+ padding: 0;
210
+ gap: 0;
211
+ .weekday-value {
212
+ display: block;
213
+ font-size: 12px;
214
+ line-height: 1.2;
215
+ }
216
+ &.selected {
217
+ background: #1A73E8;
218
+ .weekday-value {
219
+ color: #FFF;
220
+ }
221
+ }
222
+ }
210
223
  @media screen and (min-width: $sm-width) {
211
224
  .weekday-value {
212
- font-size: 18px;
225
+ font-size: 16px;
213
226
  }
214
227
  }
215
228
  @media screen and (max-width: $xs-width) {
216
229
  .weekday-value {
217
230
  line-height: 20px;
218
- font-size: 9px;
231
+ font-size: 12px;
219
232
  }
220
233
  }
221
234
  }
package/lib/components/date-planning/component/agenda/style/_material-definition.scss CHANGED
@@ -5,7 +5,7 @@ $color-label: #5B6875;
5
5
  $color-dark: #171721;
6
6
  $color-border: rgba(grey, 0.4);
7
7
  $color-inactive-day: rgba($color-dark, 0.2);
8
- $agenda-week-label-value-font-size: 22px;
8
+ $agenda-week-label-value-font-size: 16px;
9
9
  $xs-width: 600px;
10
10
  $sm-width: 960px;
11
11
  $md-width: 1280px;
package/lib/components/date-planning/style/_layout.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  width: 100%;
36
36
  height: 100%;
37
37
  flex-direction: column;
38
+ display: flex;
38
39
  }
39
40
 
40
41
  calendar {
package/lib/enum/calendar-view.enum.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export declare enum CalendarView {
2
2
  DayView = "DAY",
3
+ DaysAround = "DAYS_AROUND",
3
4
  WeekView = "WEEK",
4
5
  WeekSelectView = "WEEK_SELECT",
5
6
  WeekPlanningView = "WEEK_PLANNING",
package/lib/utils/calendar.utils.d.ts CHANGED
@@ -7,4 +7,5 @@ export declare class CalendarUtils {
7
7
  constructor(_locale: LanguageCode);
8
8
  static GetDayHours(day: Date): Date[];
9
9
  static GetDaysOfWeek(date: Date): Week;
10
+ static GetDaysAround(date: Date): Week;
10
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/sharedcomponents",
3
- "version": "1.0.68",
3
+ "version": "1.0.69",
4
4
  "private": false,
5
5
  "dependencies": {
6
6
  "chart.js": "4.3.0",