@colijnit/corecomponents_v12 256.1.6 → 256.1.8

package/fesm2015/colijnit-corecomponents_v12.js

@@ -5333,7 +5333,7 @@ class BaseInputDatePickerDirective extends BaseInputComponent {
         this.rightIcon = CoreComponentsIcon.CalendarDayRegular;
         this.locale = 'en-EN';
         this.leftIconClick = new EventEmitter();
-        this.closeAfterDateSelection = true;
+        this.closeAfterDateSelection = false;
     }
 }
 BaseInputDatePickerDirective.decorators = [
@@ -5374,6 +5374,7 @@ CalendarComponent.decorators = [
         [secondHoveringDate]="secondHoveringDate"
         (dateSelected)="dateSelected.next($event)"
         (hoveringDate)="hoveringDate.next($event)"
+        (clickedOutside)="clickedOutside.next()"
       ></calendar-template>
     </div>
   `,
@@ -5399,7 +5400,7 @@ class InputDatePickerComponent extends BaseInputDatePickerDirective {
     }
     handleDateSelected(date) {
         this.setModel(date);
-        if (this.closeAfterDateSelection) {
+        if (this.closeAfterDateSelection || !date) {
             this.toggleCalendar(false);
         }
     }
@@ -5414,7 +5415,7 @@ class InputDatePickerComponent extends BaseInputDatePickerDirective {
                 selectedDate: this.model
             }, {
                 dateSelected: (event) => this.handleDateSelected(event),
-                clickedOutside: () => this.toggleCalendar(false)
+                clickedOutside: () => this.toggleCalendar(false) // Close when clicked outside
             });
         }
         else {
@@ -5462,6 +5463,7 @@ InputDatePickerComponent.decorators = [
                      (rightIconClick)="toggleCalendar(true)"
                      (blur)="handleDateChange(modelAsString)"
                      (clearIconClick)="handleClearIconClicked()"
+                     [emptyPlace]="true"
       ></co-input-text>
     `,
                 providers: [
@@ -5691,6 +5693,7 @@ class InputTextComponent extends BaseInputComponent {
         this.showClearButton = true;
         this.showPlaceholderOnFocus = true;
         this.selectOnFocus = false;
+        this.emptyPlace = false;
         this.noStyle = false;
         this.hideArrowButtons = false;
         this.leftIconClick = new EventEmitter();
@@ -5702,6 +5705,7 @@ class InputTextComponent extends BaseInputComponent {
         this.clearIconClick = new EventEmitter();
         this.isFocused = new EventEmitter();
         this.hasOwnLabel = true;
+        this.isFocusedOnDate = false;
         this._isLeftIconMouseDown = false;
         this._isRightIconMouseDown = false;
         super._markAsOnPush();
@@ -5784,14 +5788,20 @@ class InputTextComponent extends BaseInputComponent {
     handleInputFocus(event) {
         event.preventDefault();
         event.stopPropagation();
+        if (this.type === 'date') {
+            this.isFocusedOnDate = true; // Switch to 'date' type when focused
+        }
         if (this.selectOnFocus) {
             this.input.select();
         }
-        this.isFocused.emit(this.focused);
+        this.isFocused.emit(true);
     }
     handleBlur(event) {
         event.preventDefault();
         event.stopPropagation();
+        if (this.type === 'date') {
+            this.isFocusedOnDate = false;
+        }
         this.isFocused.emit(false);
     }
     clearInput(event) {
@@ -5814,7 +5824,8 @@ InputTextComponent.decorators = [
         <input #input
                [class.input-input-hidden]="useContent"
                [ngClass]="align"
-               [type]="digitsOnly ? 'number' : type"
+               [type]="(isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))"
+               [placeholder]="type === 'date' && !isFocusedOnDate ? '' : ''"
                [pattern]="type === 'date' ? pattern : undefined"
                [ngModel]="model"
                [min]="(type === 'number' || type === 'date') && this.min ? this.min : undefined"
@@ -5891,6 +5902,7 @@ InputTextComponent.propDecorators = {
     leftIconData: [{ type: Input }],
     rightIconData: [{ type: Input }],
     selectOnFocus: [{ type: Input }],
+    emptyPlace: [{ type: Input }],
     noStyle: [{ type: HostBinding, args: ['class.no-style',] }, { type: Input }],
     hideArrowButtons: [{ type: Input }, { type: HostBinding, args: ['class.hide-arrows',] }],
     isDate: [{ type: HostBinding, args: ["class.isDate",] }],
@@ -6308,8 +6320,13 @@ class CalendarTemplateComponent {
         this.weekNumbers = [];
         this.locale = "nl-NL";
         this.highlightDaysBetweenDates = false;
+        this.showButtons = true;
+        this.doubleCalendar = false;
         this.dateSelected = new EventEmitter();
+        this.secondDateSelected = new EventEmitter();
         this.hoveringDate = new EventEmitter();
+        this.clickedOutside = new EventEmitter();
+        this.clearDates = new EventEmitter();
         this.showCalendarBody = true;
         this.showMonthSelection = false;
         this.showYearSelection = false;
@@ -6324,9 +6341,14 @@ class CalendarTemplateComponent {
         this.daysInMonth = [];
         this.daysUnixTimestamps = [];
         this.daysToHighlight = [];
+        this._initialSelectedDate = null;
     }
     set selectedDate(date) {
         this._selectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
+        // Store the initial selected date when the calendar is first opened
+        if (this._initialSelectedDate === null) {
+            this._initialSelectedDate = this._selectedDate;
+        }
         if (this.secondSelectedDate && date && this.secondSelectedDate.getTime() < this.selectedDate.getTime() && this.temporarySelectedSecondaryDate) {
             this.daysToHighlight = [];
         }
@@ -6463,7 +6485,9 @@ class CalendarTemplateComponent {
         if (day) {
             this.selectedDate = day;
             this._fillDatesBetweenSelected();
-            this.dateSelected.emit(new Date(this.selectedDate));
+            if (this.doubleCalendar) {
+                this.dateSelected.emit(new Date(this.selectedDate));
+            }
         }
     }
     selectMonth(month) {
@@ -6492,7 +6516,7 @@ class CalendarTemplateComponent {
         for (let i = 1; i <= 7; i++) {
             const date = new Date(2018, 0, i);
             const weekdayName = date.toLocaleString(this.locale, { weekday: 'short' });
-            this.dayNames.push(this._capitalizeFirstLetter(weekdayName));
+            this.dayNames.push(this._capitalizeFirstLetter(weekdayName.charAt(0)));
         }
     }
     handleMouseOverDay(day) {
@@ -6563,12 +6587,46 @@ class CalendarTemplateComponent {
         const weekNumber = Math.ceil(((d.valueOf() - yearStart.valueOf()) / 86400000 + 1) / 7);
         return weekNumber;
     }
+    setAndClose() {
+        if (this.selectedDate) {
+            this.dateSelected.emit(this.selectedDate);
+            this.secondDateSelected.emit(this.secondSelectedDate); // Emit the selected date
+            this.closePopup(); // Trigger popup close
+        }
+    }
+    clearDate() {
+        if (this.selectedDate) {
+            this.selectedDate = null;
+            this.dateSelected.emit(null);
+        }
+        if (this.secondSelectedDate) {
+            this.secondSelectedDate = null;
+            this.secondDateSelected.emit(null);
+        }
+        this.clearDates.emit();
+    }
+    closeDate() {
+        this.selectedDate = this._initialSelectedDate;
+        this.closePopup(); // Trigger popup close without making changes
+    }
+    closePopup() {
+        this.clickedOutside.emit(); // Emit the `clickedOutside` event to notify the parent
+    }
 }
 CalendarTemplateComponent.decorators = [
     { type: Component, args: [{
                 selector: "calendar-template",
                 template: `
       <div class="calendar">
+        <div class="selected-date-display">
+            <span *ngIf="selectedDate" class="selected-date-year">
+                {{ selectedDate.getFullYear() }}
+            </span>
+            <span *ngIf="selectedDate" class="selected-date-day">
+              {{ selectedDate | date: 'EEE d MMM' }}
+            </span>
+            <span *ngIf="!selectedDate" class="no-date-selected" [textContent]="'Selecteer datum'"></span>
+        </div>
         <div class="calendar-header" *ngIf="monthSelection || yearSelection">
           <co-icon class="calendar-change-month-button" [icon]="icons.ArrowPointLeft" (click)="prevMonth()"></co-icon>
 
@@ -6626,6 +6684,11 @@ CalendarTemplateComponent.decorators = [
             </div>
           </div>
         </div>
+        <div class="calendar-action-buttons" *ngIf="showButtons">
+          <span class="set-and-close-button" (click)="setAndClose()">Instellen</span>
+          <span class="clear-date-button" (click)="clearDate()">Wissen</span>
+          <span class="cancel-button" (click)="closeDate()">Annuleren</span>
+        </div>
       </div>
   `,
                 encapsulation: ViewEncapsulation.None
@@ -6635,11 +6698,16 @@ CalendarTemplateComponent.propDecorators = {
     showWeekNumbers: [{ type: Input }],
     locale: [{ type: Input }],
     highlightDaysBetweenDates: [{ type: Input }],
+    showButtons: [{ type: Input }],
+    doubleCalendar: [{ type: Input }],
     selectedDate: [{ type: Input }],
     secondSelectedDate: [{ type: Input }],
     secondHoveringDate: [{ type: Input }],
     dateSelected: [{ type: Output }],
+    secondDateSelected: [{ type: Output }],
     hoveringDate: [{ type: Output }],
+    clickedOutside: [{ type: Output }],
+    clearDates: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.calendar-template",] }]
 };
 
@@ -6651,7 +6719,8 @@ CalendarModule.decorators = [
                     CommonModule,
                     IconModule,
                     OverlayModule,
-                    ClickoutsideModule
+                    ClickoutsideModule,
+                    CoreComponentsTranslationModule
                 ],
                 declarations: [
                     CalendarComponent,
@@ -6686,7 +6755,7 @@ InputDatePickerModule.decorators = [
 class DoubleCalendarComponent extends BaseInputDatePickerDirective {
     constructor() {
         super(...arguments);
-        this.selectedDates = [undefined, undefined];
+        this.selectedDates = [null, null]; // Initialize with valid array elements
         this.datesSelected = new EventEmitter();
         this.secondDateSelected = new EventEmitter();
         this.clickedOutside = new EventEmitter();
@@ -6695,26 +6764,32 @@ class DoubleCalendarComponent extends BaseInputDatePickerDirective {
         return true;
     }
     ngOnInit() {
+        // Ensure `selectedDates` always has two elements
+        this.selectedDates = this.selectedDates || [null, null];
         this.selectedFirstDate = this.selectedDates[0];
         this.selectedSecondDate = this.selectedDates[1];
     }
     handleFirstDateSelected(date) {
         this.selectedFirstDate = date;
         this.selectedDates[0] = date;
-        if (this.selectedSecondDate && this.selectedFirstDate.getTime() > this.selectedSecondDate.getTime()) {
-            this.selectedSecondDate = null;
+        if (this.selectedSecondDate && this.selectedFirstDate) {
+            if (this.selectedFirstDate.getTime() > this.selectedSecondDate.getTime()) {
+                this.selectedSecondDate = null;
+            }
         }
         this.outputRangeIfValid();
     }
     handleSecondDateSelected(date) {
         this.selectedSecondDate = date;
         this.selectedDates[1] = date;
-        if (this.selectedFirstDate && this.selectedSecondDate.getTime() < this.selectedFirstDate.getTime()) {
-            this.selectedFirstDate = null;
-            this.selectedSecondDate = null;
-            this.secondHoveringDate = null;
+        if (this.selectedFirstDate && this.selectedSecondDate) {
+            if (this.selectedSecondDate.getTime() < this.selectedFirstDate.getTime()) {
+                this.selectedFirstDate = null;
+                this.selectedSecondDate = null;
+                this.secondHoveringDate = null;
+            }
         }
-        if (this.selectedSecondDate && this.selectedDates[0] instanceof Date) {
+        if (this.selectedSecondDate && this.selectedFirstDate) {
             this.outputRangeIfValid();
             this.secondDateSelected.next();
         }
@@ -6727,6 +6802,13 @@ class DoubleCalendarComponent extends BaseInputDatePickerDirective {
     handleSecondHoveringDate(day) {
         this.secondHoveringDate = day;
     }
+    clearAllDates() {
+        this.selectedFirstDate = null;
+        this.selectedSecondDate = null;
+        this.selectedDates = [null, null];
+        // Emit updated state to parent
+        this.datesSelected.emit(this.selectedDates);
+    }
 }
 DoubleCalendarComponent.decorators = [
     { type: Component, args: [{
@@ -6739,6 +6821,9 @@ DoubleCalendarComponent.decorators = [
         [secondHoveringDate]="secondHoveringDate"
         [highlightDaysBetweenDates]="true"
         (dateSelected)="handleFirstDateSelected($event)"
+        [showButtons]="false"
+        (clearDates)="clearAllDates()"
+        [doubleCalendar]="true"
       ></calendar-template>
       <calendar-template
         [selectedDate]="selectedSecondDate"
@@ -6746,6 +6831,10 @@ DoubleCalendarComponent.decorators = [
         [highlightDaysBetweenDates]="true"
         (hoveringDate)="handleSecondHoveringDate($event)"
         (dateSelected)="handleSecondDateSelected($event)"
+        (clickedOutside)="clickedOutside.next()"
+        [showButtons]="true"
+        [doubleCalendar]="true"
+        (clearDates)="clearAllDates()"
       ></calendar-template>
     </div>
   `,
@@ -6876,6 +6965,7 @@ InputDateRangePickerComponent.decorators = [
                        (blur)="handleFirstDateChanged(firstDateAsString)"
                        (clearIconClick)="clearDate(0)"
                        (click)="handleFirstInputClick($event)"
+                       [emptyPlace]="true"
         ></co-input-text>
         <co-input-text #secondInput class="no-focus-line custom-height"
                        [(model)]= "secondDateAsString"
@@ -6887,6 +6977,7 @@ InputDateRangePickerComponent.decorators = [
                        (blur)="handleSecondDateChanged(secondDateAsString)"
                        (clearIconClick)="clearDate(1)"
                        (click)="handleSecondInputClick($event)"
+                       [emptyPlace]="true"
         ></co-input-text>
       </div>
     `,
@@ -13002,9 +13093,11 @@ function emailValidator(control) {
 }
 
 class TooltipComponent {
-    constructor(_elementRef, _changeDetector) {
+    constructor(_elementRef, _changeDetector, _renderer) {
         this._elementRef = _elementRef;
         this._changeDetector = _changeDetector;
+        this._renderer = _renderer;
+        this.tooltipClosed = new EventEmitter();
         this.top = -100;
         this.left = -100;
         this.bottom = false;
@@ -13024,6 +13117,17 @@ class TooltipComponent {
         setTimeout(() => {
             this._positionTooltip();
         });
+        this._documentClickListener = this._renderer.listen('document', 'click', (event) => {
+            if (!this._elementRef.nativeElement.contains(event.target)) {
+                this.closeTooltip();
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Remove the click listener to prevent memory leaks
+        if (this._documentClickListener) {
+            this._documentClickListener();
+        }
     }
     _positionTooltip() {
         if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
@@ -13044,6 +13148,9 @@ class TooltipComponent {
             this._changeDetector.detectChanges();
         }
     }
+    closeTooltip() {
+        this.tooltipClosed.emit();
+    }
 }
 TooltipComponent.decorators = [
     { type: Component, args: [{
@@ -13064,11 +13171,13 @@ TooltipComponent.decorators = [
 ];
 TooltipComponent.ctorParameters = () => [
     { type: ElementRef },
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: Renderer2 }
 ];
 TooltipComponent.propDecorators = {
     hostElement: [{ type: Input }],
     toolTip: [{ type: Input }],
+    tooltipClosed: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ['class.co-tooltip',] }],
     top: [{ type: HostBinding, args: ["style.top.px",] }],
     left: [{ type: HostBinding, args: ["style.left.px",] }],
@@ -14120,6 +14229,10 @@ class HourSchedulingExpandableComponent {
     allowDrop(event, hour) {
         event.preventDefault();
         event.stopPropagation();
+        const target = event.target;
+        if (!target.classList.contains('drag-over')) {
+            target.classList.add('drag-over');
+        }
         if (this.currentDraggingObject) {
             let newStartDate = this.convertDateToEuropean(this.currentDraggingObject.start);
             let hourSplit = hour.split(":");
@@ -14133,6 +14246,12 @@ class HourSchedulingExpandableComponent {
             }
         }
     }
+    handleDragLeave(event) {
+        const target = event.target;
+        if (target.classList.contains('drag-over')) {
+            target.classList.remove('drag-over');
+        }
+    }
     // Triggered when resizing starts
     onResizeStart(event, obj, direction) {
         this.resizing = true;
@@ -14251,11 +14370,15 @@ HourSchedulingExpandableComponent.decorators = [
         <div class="hour-label"><span [textContent]="hour"></span></div>
 
         <div class="object-display">
-          <div class="first-half-hour object-half" (dragover)="allowDrop($event, hour)"
+          <div class="first-half-hour object-half"
+               (dragover)="allowDrop($event, hour)"
+               (dragleave)="handleDragLeave($event)"
                (drop)="handleDrop($event, hour)">
           </div>
 
-          <div class="second-half-hour object-half" (dragover)="allowDrop($event, addHalfHour(hour))"
+          <div class="second-half-hour object-half"
+               (dragover)="allowDrop($event, addHalfHour(hour))"
+               (dragleave)="handleDragLeave($event)"
                (drop)="handleDrop($event, addHalfHour(hour))">
           </div>
         </div>