@colijnit/corecomponents_v12 256.1.5 → 256.1.7

package/lib/components/calendar/calendar-template.component.d.ts

@@ -6,6 +6,8 @@ export declare class CalendarTemplateComponent {
     weekNumbers: number[];
     locale: string;
     highlightDaysBetweenDates: boolean;
+    showButtons: boolean;
+    doubleCalendar: boolean;
     set selectedDate(date: Date);
     get selectedDate(): Date;
     set secondSelectedDate(date: Date);
@@ -13,7 +15,10 @@ export declare class CalendarTemplateComponent {
     set secondHoveringDate(date: Date);
     get secondHoveringDate(): Date;
     dateSelected: EventEmitter<Date>;
+    secondDateSelected: EventEmitter<Date>;
     hoveringDate: EventEmitter<Date>;
+    clickedOutside: EventEmitter<void>;
+    clearDates: EventEmitter<void>;
     showCalendarBody: boolean;
     showMonthSelection: boolean;
     showYearSelection: boolean;
@@ -36,6 +41,7 @@ export declare class CalendarTemplateComponent {
     private _secondHoveringDate;
     private _secondSelectedDate;
     private _selectedDate;
+    private _initialSelectedDate;
     showClass(): boolean;
     ngOnInit(): void;
     prevMonth(): void;
@@ -57,4 +63,8 @@ export declare class CalendarTemplateComponent {
     private _capitalizeFirstLetter;
     private calculateWeekNumbers;
     getISOWeek(date: Date): number;
+    setAndClose(): void;
+    clearDate(): void;
+    closeDate(): void;
+    private closePopup;
 }

package/lib/components/calendar/style/_layout.scss

@@ -25,6 +25,7 @@
       align-items: center;
       margin-bottom: $cc-co-calendar-header-margin-bottom;
       user-select: none;
+      padding: 10px;
 
       .calendar-change-month-button {
         cursor: pointer;
@@ -39,11 +40,13 @@
 
         .calendar-header-title {
           font-size: $cc-co-calendar-header-title-font-size;
+          font-weight: 500;
         }
       }
     }
     .calendar-wrapper {
       display: flex;
+      padding: 0 15px;
       .week-wrapper {
         display: grid;
         grid-template-columns: repeat(1, 1fr);
@@ -75,6 +78,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      position: relative;
       height: $cc-co-calendar-day-height;
       margin: $cc-co-calendar-day-margin;
       cursor: pointer;
@@ -83,8 +87,18 @@
       }
 
       &:hover {
-        background-color: $cc-co-calendar-day-hover-background-color;
-        color: $cc-co-calendar-day-hover-color;
+        &:before {
+          background-color: $cc-co-calendar-day-hover-background-color;
+          border-radius: $cc-co-calendar-selected-day-start-border-radius;
+          position: absolute;
+          top: 0;
+          left: -5px;
+          width: 40px;
+          height: 40px;
+          content: '';
+          z-index: 0;
+        }
+
       }
 
       &.selected {
@@ -121,6 +135,8 @@
     .day-number {
       font-size: $cc-co-calendar-day-number-font-size;
       font-weight: $cc-co-calendar-day-number-font-weight;
+      position: relative;
+      z-index: 2;
     }
 
     .highlighted-day {
@@ -134,9 +150,24 @@
       border-radius: $cc-co-calendar-selected-day-end-border-radius;
     }
     .selected-day {
-      background-color: $cc-co-calendar-selected-day-background-color;
       color: $cc-co-calendar-selected-day-color;
-      border-radius: $cc-co-calendar-selected-day-start-border-radius;
+      &:before {
+        background-color: $cc-co-calendar-selected-day-background-color;
+        border-radius: $cc-co-calendar-selected-day-start-border-radius;
+        position: absolute;
+        top: 0;
+        left: -5px;
+        width: 40px;
+        height: 40px;
+        content: '';
+        z-index: 1;
+      }
+      &:hover {
+        &:before {
+          background-color: $cc-co-calendar-selected-day-background-color;
+          border-radius: $cc-co-calendar-selected-day-start-border-radius;
+        }
+      }
     }
 
     .selection-grid {
@@ -156,4 +187,26 @@
       }
     }
   }
+  .selected-date-display {
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+    background: $cc-co-calendar-selected-day-background-color;
+    color: #FFF;
+    font-size: 16px;
+    min-height: 85px;
+    .selected-date-day {
+      font-size: 30px;
+    }
+  }
+  .calendar-action-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 15px;
+    padding: 15px 20px;
+    font-size: 12px;
+    color: $cc-co-calendar-selected-day-background-color;
+    cursor: pointer;
+  }
 }

package/lib/components/calendar/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $cc-co-calendar-font-family: $cc-font-family !default;
 $cc-co-calendar-width: auto !default;
-$cc-co-calendar-padding: 10px !default;
+$cc-co-calendar-padding: 0 !default;
 $cc-co-calendar-background-color: white !default;
 $cc-co-calendar-border-radius: 5px !default;
 $cc-co-calendar-border: 1px solid #CCCCCC !default;
@@ -8,16 +8,16 @@ $cc-co-calendar-header-margin-bottom: 5px !default;
 $cc-co-calendar-change-month-button-border-radius: 5px !default;
 $cc-co-calendar-change-month-button-border: 0px solid #CCCCCC !default;
 $cc-co-calendar-change-month-button-padding: 5px !default;
-$cc-co-calendar-header-title-font-size: 12px !default;
-$cc-co-calendar-day-height: 34px !default;
+$cc-co-calendar-header-title-font-size: 14px !default;
+$cc-co-calendar-day-height: 40px !default;
 $cc-co-calendar-day-margin: 2px 0 !default;
-$cc-co-calendar-day-hover-background-color: $cc-color-action !default;
+$cc-co-calendar-day-hover-background-color: #f8f8fa !default;
 $cc-co-calendar-day-hover-color: white !default;
 $cc-co-calendar-day-selected-background-color: $cc-color-action !default;
 $cc-co-calendar-day-selected-color: $cc-color-light !default;
-$cc-co-calendar-week-number-height: 36px !default;
+$cc-co-calendar-week-number-height: 40px !default;
 $cc-co-calendar-week-number-margin: 0 2px 0 0 !default;
-$cc-co-calendar-week-number-font-size: 12px !default;
+$cc-co-calendar-week-number-font-size: 10px !default;
 $cc-co-calendar-week-number-width: 30px !default;
 $cc-co-calendar-week-number-background: #F8F8FA !default;
 $cc-co-calendar-week-number-first-height: 30px !default;
@@ -28,9 +28,9 @@ $cc-co-calendar-month-or-year-hover-background-color: $cc-color-hover !default;
 $cc-co-calendar-month-or-year-hover-padding: 5px !default;
 $cc-co-calendar-weekday-font-size: 12px !default;
 $cc-co-calendar-weekday-height: 30px !default;
-$cc-co-calendar-weekday-width: 30px !default;
+$cc-co-calendar-weekday-width: 28px !default;
 $cc-co-calendar-weekday-color: black !default;
-$cc-co-calendar-weekday-background: #F8F8FA !default;
+$cc-co-calendar-weekday-background: transparent !default;
 $cc-co-calendar-weekday-margin: 0 1px !default;
 $cc-co-calendar-day-number-font-size: 12px !default;
 $cc-co-calendar-day-number-font-weight: normal !default;
@@ -39,8 +39,8 @@ $cc-co-calendar-highlighted-day-color: $cc-color-dark !default;
 $cc-co-calendar-highlighted-day-font-weight: normal !default;
 $cc-co-calendar-selected-day-background-color: $cc-color-action !default;
 $cc-co-calendar-selected-day-color: $cc-color-light !default;
-$cc-co-calendar-selected-day-start-border-radius: 100% 0 0 100% !default;
-$cc-co-calendar-selected-day-end-border-radius: 0 100% 100% 0 !default;
+$cc-co-calendar-selected-day-start-border-radius: 100% !default;
+$cc-co-calendar-selected-day-end-border-radius: 100% !default;
 $cc-co-calendar-selection-grid-gap: 15px !default;
 $cc-co-calendar-selection-grid-padding: 5px !default;
 $cc-co-calendar-z-index: 9999 !default;

package/lib/components/double-calendar/double-calendar.component.d.ts

@@ -15,4 +15,5 @@ export declare class DoubleCalendarComponent extends BaseInputDatePickerDirectiv
     handleSecondDateSelected(date: Date): void;
     outputRangeIfValid(): void;
     handleSecondHoveringDate(day: Date): void;
+    clearAllDates(): void;
 }

package/lib/components/input-text/input-text.component.d.ts

@@ -32,6 +32,7 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     leftIconData: SafeHtml | undefined;
     rightIconData: SafeHtml | undefined;
     selectOnFocus: boolean;
+    emptyPlace: boolean;
     noStyle: boolean;
     hideArrowButtons: boolean;
     get isDate(): boolean;
@@ -50,6 +51,7 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     handleDocumentMouseUp(event: MouseEvent): void;
     set model(value: any);
     get model(): any;
+    isFocusedOnDate: boolean;
     private _isLeftIconMouseDown;
     private _isRightIconMouseDown;
     constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, overlayService: OverlayService, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);

package/lib/style/_input.mixins.scss

@@ -71,7 +71,7 @@
         @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-input-border-radius);
       }
     }
-    &.cc-input-focused, &.hasvalue, &.isDate {
+    &.cc-input-focused, &.hasvalue {
       label {
         transform: scale(0.92);
         top: $cc-input-label-top;
@@ -119,12 +119,6 @@
   }
 }
 
-co-input-text.invalid, co-input-text:not(.hasvalue).required {
-  .input-text-wrapper {
-    background-color: #ffe6e6;
-  }
-}
-
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: $cc-color-input-placeholder-color;
   font-style: $cc-input-placeholder-font-style;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "256.1.5",
+  "version": "256.1.7",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {