@colijnit/sharedcomponents 1.0.67 → 1.0.69

package/lib/components/date-planning/component/agenda/agenda-header.component.d.ts

@@ -22,6 +22,7 @@ export declare class AgendaHeaderComponent implements OnInit, OnDestroy, AfterCo
     set firstAvailableDate(value: Date);
     get firstAvailableDate(): Date;
     set eventsPerDay(value: AgendaEventPerDay[]);
+    viewSelection: boolean;
     viewChange: EventEmitter<CalendarView>;
     selectedDateChange: EventEmitter<Date>;
     rangeChange: EventEmitter<Date>;
@@ -45,4 +46,5 @@ export declare class AgendaHeaderComponent implements OnInit, OnDestroy, AfterCo
      */
     private _resizeHost;
     private _prepareHeaderData;
+    capitalizeString(label: string): string;
 }

package/lib/components/date-planning/component/agenda/style/_layout.scss

@@ -16,7 +16,6 @@
       display: flex;
       width: inherit;
       height: $agenda-week-view-header-height;
-      background: white;
       z-index: 9001;
     }
 
@@ -41,30 +40,27 @@
       align-items: center;
       justify-content: center;
     }
-
     .week-day-label {
-      margin: 0.25em;
-      padding: 0.25em;
-      background: white;
-      pointer-events: none;
+      margin: 0;
+      padding: 0;
       position: relative;
       flex-basis: 100%;
       display: flex;
+      gap: 10px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      border: 1px solid $color-border;
-
+      border: none;
+      cursor: pointer;
+      &:not(.days-around) {
+        pointer-events: none;
+      }
       .weekday-description, .weekday-value, .day-description {
         color: $color-dark;
       }
-
       &.selectable {
         pointer-events: all;
       }
-
-
-
       &.selectable:not(.selected) {
         cursor: pointer;
         color: $color-label;
@@ -77,73 +73,57 @@
           }
         }
       }
-
       .add-unit-icon, .sub-unit-icon {
         pointer-events: all;
       }
-
-      &:hover {
-        background: $color-border;
-      }
     }
-
     .weekday-description {
       color: $color-inactive-day;
       font-size: 14px;
       text-transform: uppercase;
       margin-top: 7px;
     }
-
     .weekday-value {
       color: $color-inactive-day;
       font-size: $agenda-week-label-value-font-size;
-
     }
-
     .sub-unit-icon {
       position: absolute;
       left: 7px;
     }
-
     .add-unit-icon {
       position: absolute;
       right: 7px;
     }
-
     .day-description {
       color: $color-inactive-day;
       font-size: $agenda-week-label-value-font-size;
       font-weight: bold;
     }
-
     .month-description {
-      top: 1px;
+      top: 15px;
       left: 3px;
       font-size: 11px;
       text-transform: capitalize;
       position: absolute;
       width: 100px;
     }
-
     .view-wrapper {
       display: flex;
       width: 100%;
       margin-top: -1px;
     }
-
     .week-select-view {
       display: flex;
       position: relative;
       padding: 50px;
       height: 100%;
     }
-
     .week-day {
       display: flex;
       position: relative;
       flex-basis: 100%;
     }
-
     @media screen and (max-width: $xs-width) {
       .popup-card-content {
         padding: 0 0 15px !important;
@@ -157,48 +137,58 @@
         bottom: 0;
       }
     }
-
     agenda {
       position: relative;
     }
-
     .agenda-content-wrapper {
       min-width: 0 !important;
     }
-
     agenda-header {
       width: 100% !important;
     }
-
     .agenda-header-wrapper {
       padding: 0 50px;
       height: auto;
-
-      .week-day-label {
-
-        .sub-unit-icon {
-          height: 100%;
-          width: 50px;
-          left: -50px;
-        }
-
-        .add-unit-icon {
-          height: 100%;
-          width: 50px;
-          right: -50px;
-        }
-
-        @media screen and (max-width: $xs-width) {
+      gap: 10px;
+      margin-top: 30px;
+      &.days-around {
+        padding: 0;
+        margin: 0;
+        gap: 5px;
+        background: transparent;
+        justify-content: center;
+        .week-day-label {
           .sub-unit-icon {
-            width: 25px;
-            left: -25px;
+            height: 24px;
+            width: 24px;
+            left: -30px;
+            padding: 5px;
           }
-
           .add-unit-icon {
-            width: 25px;
-            right: -25px;
+            height: 24px;
+            width: 24px;
+            right: -30px;
+            padding: 5px;
           }
         }
+      }
+      .week-day-label {
+        .sub-unit-icon {
+          height: 30px;
+          width: 30px;
+          left: 0;
+          background: #f5f5fa;
+          border-radius: 100%;
+          padding: 7px
+        }
+        .add-unit-icon {
+          height: 30px;
+          width: 30px;
+          right: 0;
+          background: #f5f5fa;
+          border-radius: 100%;
+          padding: 7px;
+        }
 
         .weekday-description {
           font-size: 14px;
@@ -208,16 +198,37 @@
         .weekday-value {
           line-height: 30px;
         }
-
+        &.days-around {
+          width: 45px;
+          height: 45px;
+          flex-basis: 45px;
+          border-radius: 100%;
+          border: none;
+          background: transparent;
+          margin: 0;
+          padding: 0;
+          gap: 0;
+          .weekday-value {
+            display: block;
+            font-size: 12px;
+            line-height: 1.2;
+          }
+          &.selected {
+            background: #1A73E8;
+            .weekday-value {
+              color: #FFF;
+            }
+          }
+        }
         @media screen and (min-width: $sm-width) {
           .weekday-value {
-            font-size: 18px;
+            font-size: 16px;
           }
         }
         @media screen and (max-width: $xs-width) {
           .weekday-value {
             line-height: 20px;
-            font-size: 9px;
+            font-size: 12px;
           }
         }
       }

package/lib/components/date-planning/component/agenda/style/_material-definition.scss

@@ -5,7 +5,7 @@ $color-label: #5B6875;
 $color-dark: #171721;
 $color-border: rgba(grey, 0.4);
 $color-inactive-day: rgba($color-dark, 0.2);
-$agenda-week-label-value-font-size: 22px;
+$agenda-week-label-value-font-size: 16px;
 $xs-width: 600px;
 $sm-width: 960px;
 $md-width: 1280px;

package/lib/components/date-planning/date-planning.component.d.ts

@@ -13,6 +13,7 @@ export declare class DatePlanningComponent {
     buttonLabel: string;
     eventsPerDay: AgendaEventPerDay[];
     view: CalendarView;
+    viewSelection: boolean;
     readonly eventChecked: EventEmitter<any>;
     readonly selectedDateChange: EventEmitter<Date>;
     readonly rangeChange: EventEmitter<Date>;

package/lib/components/date-planning/style/_layout.scss

@@ -35,6 +35,7 @@
       width: 100%;
       height: 100%;
       flex-direction: column;
+      display: flex;
     }
 
     calendar {

package/lib/enum/calendar-view.enum.d.ts

@@ -1,5 +1,6 @@
 export declare enum CalendarView {
     DayView = "DAY",
+    DaysAround = "DAYS_AROUND",
     WeekView = "WEEK",
     WeekSelectView = "WEEK_SELECT",
     WeekPlanningView = "WEEK_PLANNING",

package/lib/utils/calendar.utils.d.ts

@@ -7,4 +7,5 @@ export declare class CalendarUtils {
     constructor(_locale: LanguageCode);
     static GetDayHours(day: Date): Date[];
     static GetDaysOfWeek(date: Date): Week;
+    static GetDaysAround(date: Date): Week;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/sharedcomponents",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "private": false,
   "dependencies": {
     "chart.js": "4.3.0",