@colijnit/corecomponents_v12 256.1.5 → 256.1.7

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5863,7 +5863,7 @@
             _this.rightIcon = exports.CoreComponentsIcon.CalendarDayRegular;
             _this.locale = 'en-EN';
             _this.leftIconClick = new i0.EventEmitter();
-            _this.closeAfterDateSelection = true;
+            _this.closeAfterDateSelection = false;
             return _this;
         }
         return BaseInputDatePickerDirective;
@@ -5897,7 +5897,7 @@
     CalendarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-calendar",
-                    template: "\n    <div class=\"date-picker-container\" [overlay]=\"parentForOverlay\" (clickOutside)=\"clickedOutside.next()\">\n      <calendar-template\n        [locale]=\"locale\"\n        [highlightDaysBetweenDates]=\"highlightDaysBetweenDates\"\n        [selectedDate]=\"selectedDate\"\n        [secondSelectedDate]=\"secondSelectedDate\"\n        [secondHoveringDate]=\"secondHoveringDate\"\n        (dateSelected)=\"dateSelected.next($event)\"\n        (hoveringDate)=\"hoveringDate.next($event)\"\n      ></calendar-template>\n    </div>\n  ",
+                    template: "\n    <div class=\"date-picker-container\" [overlay]=\"parentForOverlay\" (clickOutside)=\"clickedOutside.next()\">\n      <calendar-template\n        [locale]=\"locale\"\n        [highlightDaysBetweenDates]=\"highlightDaysBetweenDates\"\n        [selectedDate]=\"selectedDate\"\n        [secondSelectedDate]=\"secondSelectedDate\"\n        [secondHoveringDate]=\"secondHoveringDate\"\n        (dateSelected)=\"dateSelected.next($event)\"\n        (hoveringDate)=\"hoveringDate.next($event)\"\n        (clickedOutside)=\"clickedOutside.next()\"\n      ></calendar-template>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -5924,7 +5924,7 @@
         };
         InputDatePickerComponent.prototype.handleDateSelected = function (date) {
             this.setModel(date);
-            if (this.closeAfterDateSelection) {
+            if (this.closeAfterDateSelection || !date) {
                 this.toggleCalendar(false);
             }
         };
@@ -5940,7 +5940,7 @@
                     selectedDate: this.model
                 }, {
                     dateSelected: function (event) { return _this.handleDateSelected(event); },
-                    clickedOutside: function () { return _this.toggleCalendar(false); }
+                    clickedOutside: function () { return _this.toggleCalendar(false); } // Close when clicked outside
                 });
             }
             else {
@@ -5974,7 +5974,7 @@
     InputDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-date',
-                    template: "\n      <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n                     [hidden]=\"hidden\"\n                     [readonly]=\"readonly\"\n                     [(model)]=\"modelAsString\"\n                     [rightIcon]=\"rightIcon\"\n                     [leftIcon]=\"leftIcon\"\n                     [leftIconData]=\"leftIconData\"\n                     [pattern]=\"'yyyy-MM-dd'\"\n                     [type]=\"'date'\"\n                     [placeholder]=\"placeholder\"\n                     (leftIconClick)=\"leftIconClick.emit($event)\"\n                     (rightIconClick)=\"toggleCalendar(true)\"\n                     (blur)=\"handleDateChange(modelAsString)\"\n                     (clearIconClick)=\"handleClearIconClicked()\"\n      ></co-input-text>\n    ",
+                    template: "\n      <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n                     [hidden]=\"hidden\"\n                     [readonly]=\"readonly\"\n                     [(model)]=\"modelAsString\"\n                     [rightIcon]=\"rightIcon\"\n                     [leftIcon]=\"leftIcon\"\n                     [leftIconData]=\"leftIconData\"\n                     [pattern]=\"'yyyy-MM-dd'\"\n                     [type]=\"'date'\"\n                     [placeholder]=\"placeholder\"\n                     (leftIconClick)=\"leftIconClick.emit($event)\"\n                     (rightIconClick)=\"toggleCalendar(true)\"\n                     (blur)=\"handleDateChange(modelAsString)\"\n                     (clearIconClick)=\"handleClearIconClicked()\"\n                     [emptyPlace]=\"true\"\n      ></co-input-text>\n    ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
@@ -6214,6 +6214,7 @@
             _this.showClearButton = true;
             _this.showPlaceholderOnFocus = true;
             _this.selectOnFocus = false;
+            _this.emptyPlace = false;
             _this.noStyle = false;
             _this.hideArrowButtons = false;
             _this.leftIconClick = new i0.EventEmitter();
@@ -6225,6 +6226,7 @@
             _this.clearIconClick = new i0.EventEmitter();
             _this.isFocused = new i0.EventEmitter();
             _this.hasOwnLabel = true;
+            _this.isFocusedOnDate = false;
             _this._isLeftIconMouseDown = false;
             _this._isRightIconMouseDown = false;
             _super.prototype._markAsOnPush.call(_this);
@@ -6324,14 +6326,20 @@
         InputTextComponent.prototype.handleInputFocus = function (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);
         };
         InputTextComponent.prototype.handleBlur = function (event) {
             event.preventDefault();
             event.stopPropagation();
+            if (this.type === 'date') {
+                this.isFocusedOnDate = false;
+            }
             this.isFocused.emit(false);
         };
         InputTextComponent.prototype.clearInput = function (event) {
@@ -6343,7 +6351,7 @@
     InputTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-text',
-                    template: "\n    <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n      <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n               (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n               (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n      <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"digitsOnly ? 'number' : type\"\n               [pattern]=\"type === 'date' ? pattern : undefined\"\n               [ngModel]=\"model\"\n               [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n               [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n               (keyup)=\"keyUp.emit($event)\"\n               (focusin)=\"handleInputFocus($event)\"\n               (focusout)=\"handleBlur($event)\"\n        >\n        <ng-container *ngIf=\"useContent\">\n          <div class=\"input-content-wrapper\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n        <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\"\n                 [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n        <div class=\"required-indicator\"></div>\n      </div>\n      <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n      <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"\n               [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\"\n               (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n    </div>\n    <!--\n            <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                               [committing]=\"committing\"\n                               [commitFinished]=\"commitFinished\"\n                               (commitClick)=\"commitClick($event)\"\n                               (cancelClick)=\"cancelClick($event)\"\n            >\n            </co-commit-buttons>\n    -->\n  ",
+                    template: "\n    <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n      <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n               (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n               (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n      <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"(isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))\"\n               [placeholder]=\"type === 'date' && !isFocusedOnDate ? '' : ''\"\n               [pattern]=\"type === 'date' ? pattern : undefined\"\n               [ngModel]=\"model\"\n               [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n               [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n               (keyup)=\"keyUp.emit($event)\"\n               (focusin)=\"handleInputFocus($event)\"\n               (focusout)=\"handleBlur($event)\"\n        >\n        <ng-container *ngIf=\"useContent\">\n          <div class=\"input-content-wrapper\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n        <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\"\n                 [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n        <div class=\"required-indicator\"></div>\n      </div>\n      <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n      <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"\n               [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\"\n               (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n    </div>\n    <!--\n            <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                               [committing]=\"committing\"\n                               [commitFinished]=\"commitFinished\"\n                               (commitClick)=\"commitClick($event)\"\n                               (cancelClick)=\"cancelClick($event)\"\n            >\n            </co-commit-buttons>\n    -->\n  ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -6383,6 +6391,7 @@
         leftIconData: [{ type: i0.Input }],
         rightIconData: [{ type: i0.Input }],
         selectOnFocus: [{ type: i0.Input }],
+        emptyPlace: [{ type: i0.Input }],
         noStyle: [{ type: i0.HostBinding, args: ['class.no-style',] }, { type: i0.Input }],
         hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
         isDate: [{ type: i0.HostBinding, args: ["class.isDate",] }],
@@ -6849,8 +6858,13 @@
             this.weekNumbers = [];
             this.locale = "nl-NL";
             this.highlightDaysBetweenDates = false;
+            this.showButtons = true;
+            this.doubleCalendar = false;
             this.dateSelected = new i0.EventEmitter();
+            this.secondDateSelected = new i0.EventEmitter();
             this.hoveringDate = new i0.EventEmitter();
+            this.clickedOutside = new i0.EventEmitter();
+            this.clearDates = new i0.EventEmitter();
             this.showCalendarBody = true;
             this.showMonthSelection = false;
             this.showYearSelection = false;
@@ -6865,6 +6879,7 @@
             this.daysInMonth = [];
             this.daysUnixTimestamps = [];
             this.daysToHighlight = [];
+            this._initialSelectedDate = null;
         }
         Object.defineProperty(CalendarTemplateComponent.prototype, "selectedDate", {
             get: function () {
@@ -6872,6 +6887,10 @@
             },
             set: function (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 = [];
                 }
@@ -7016,7 +7035,9 @@
             if (day) {
                 this.selectedDate = day;
                 this._fillDatesBetweenSelected();
-                this.dateSelected.emit(new Date(this.selectedDate));
+                if (this.doubleCalendar) {
+                    this.dateSelected.emit(new Date(this.selectedDate));
+                }
             }
         };
         CalendarTemplateComponent.prototype.selectMonth = function (month) {
@@ -7045,7 +7066,7 @@
             for (var i = 1; i <= 7; i++) {
                 var date = new Date(2018, 0, i);
                 var weekdayName = date.toLocaleString(this.locale, { weekday: 'short' });
-                this.dayNames.push(this._capitalizeFirstLetter(weekdayName));
+                this.dayNames.push(this._capitalizeFirstLetter(weekdayName.charAt(0)));
             }
         };
         CalendarTemplateComponent.prototype.handleMouseOverDay = function (day) {
@@ -7120,12 +7141,37 @@
             var weekNumber = Math.ceil(((d.valueOf() - yearStart.valueOf()) / 86400000 + 1) / 7);
             return weekNumber;
         };
+        CalendarTemplateComponent.prototype.setAndClose = function () {
+            if (this.selectedDate) {
+                this.dateSelected.emit(this.selectedDate);
+                this.secondDateSelected.emit(this.secondSelectedDate); // Emit the selected date
+                this.closePopup(); // Trigger popup close
+            }
+        };
+        CalendarTemplateComponent.prototype.clearDate = function () {
+            if (this.selectedDate) {
+                this.selectedDate = null;
+                this.dateSelected.emit(null);
+            }
+            if (this.secondSelectedDate) {
+                this.secondSelectedDate = null;
+                this.secondDateSelected.emit(null);
+            }
+            this.clearDates.emit();
+        };
+        CalendarTemplateComponent.prototype.closeDate = function () {
+            this.selectedDate = this._initialSelectedDate;
+            this.closePopup(); // Trigger popup close without making changes
+        };
+        CalendarTemplateComponent.prototype.closePopup = function () {
+            this.clickedOutside.emit(); // Emit the `clickedOutside` event to notify the parent
+        };
         return CalendarTemplateComponent;
     }());
     CalendarTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "calendar-template",
-                    template: "\n      <div class=\"calendar\">\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -7133,11 +7179,16 @@
         showWeekNumbers: [{ type: i0.Input }],
         locale: [{ type: i0.Input }],
         highlightDaysBetweenDates: [{ type: i0.Input }],
+        showButtons: [{ type: i0.Input }],
+        doubleCalendar: [{ type: i0.Input }],
         selectedDate: [{ type: i0.Input }],
         secondSelectedDate: [{ type: i0.Input }],
         secondHoveringDate: [{ type: i0.Input }],
         dateSelected: [{ type: i0.Output }],
+        secondDateSelected: [{ type: i0.Output }],
         hoveringDate: [{ type: i0.Output }],
+        clickedOutside: [{ type: i0.Output }],
+        clearDates: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.calendar-template",] }]
     };
 
@@ -7152,7 +7203,8 @@
                         common.CommonModule,
                         IconModule,
                         OverlayModule,
-                        ClickoutsideModule
+                        ClickoutsideModule,
+                        CoreComponentsTranslationModule
                     ],
                     declarations: [
                         CalendarComponent,
@@ -7191,7 +7243,7 @@
         __extends(DoubleCalendarComponent, _super);
         function DoubleCalendarComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.selectedDates = [undefined, undefined];
+            _this.selectedDates = [null, null]; // Initialize with valid array elements
             _this.datesSelected = new i0.EventEmitter();
             _this.secondDateSelected = new i0.EventEmitter();
             _this.clickedOutside = new i0.EventEmitter();
@@ -7201,26 +7253,32 @@
             return true;
         };
         DoubleCalendarComponent.prototype.ngOnInit = function () {
+            // Ensure `selectedDates` always has two elements
+            this.selectedDates = this.selectedDates || [null, null];
             this.selectedFirstDate = this.selectedDates[0];
             this.selectedSecondDate = this.selectedDates[1];
         };
         DoubleCalendarComponent.prototype.handleFirstDateSelected = function (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();
         };
         DoubleCalendarComponent.prototype.handleSecondDateSelected = function (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();
             }
@@ -7233,12 +7291,19 @@
         DoubleCalendarComponent.prototype.handleSecondHoveringDate = function (day) {
             this.secondHoveringDate = day;
         };
+        DoubleCalendarComponent.prototype.clearAllDates = function () {
+            this.selectedFirstDate = null;
+            this.selectedSecondDate = null;
+            this.selectedDates = [null, null];
+            // Emit updated state to parent
+            this.datesSelected.emit(this.selectedDates);
+        };
         return DoubleCalendarComponent;
     }(BaseInputDatePickerDirective));
     DoubleCalendarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-double-calendar",
-                    template: "\n    <div class=\"dual-calendar-wrapper\" [overlay]=\"parentForOverlay\" (clickOutside)=\"clickedOutside.next()\">\n      <calendar-template\n        [selectedDate]=\"selectedFirstDate\"\n        [secondSelectedDate]=\"selectedSecondDate\"\n        [secondHoveringDate]=\"secondHoveringDate\"\n        [highlightDaysBetweenDates]=\"true\"\n        (dateSelected)=\"handleFirstDateSelected($event)\"\n      ></calendar-template>\n      <calendar-template\n        [selectedDate]=\"selectedSecondDate\"\n        [secondSelectedDate]=\"selectedFirstDate\"\n        [highlightDaysBetweenDates]=\"true\"\n        (hoveringDate)=\"handleSecondHoveringDate($event)\"\n        (dateSelected)=\"handleSecondDateSelected($event)\"\n      ></calendar-template>\n    </div>\n  ",
+                    template: "\n    <div class=\"dual-calendar-wrapper\" [overlay]=\"parentForOverlay\" (clickOutside)=\"clickedOutside.next()\">\n      <calendar-template\n        [selectedDate]=\"selectedFirstDate\"\n        [secondSelectedDate]=\"selectedSecondDate\"\n        [secondHoveringDate]=\"secondHoveringDate\"\n        [highlightDaysBetweenDates]=\"true\"\n        (dateSelected)=\"handleFirstDateSelected($event)\"\n        [showButtons]=\"false\"\n        (clearDates)=\"clearAllDates()\"\n        [doubleCalendar]=\"true\"\n      ></calendar-template>\n      <calendar-template\n        [selectedDate]=\"selectedSecondDate\"\n        [secondSelectedDate]=\"selectedFirstDate\"\n        [highlightDaysBetweenDates]=\"true\"\n        (hoveringDate)=\"handleSecondHoveringDate($event)\"\n        (dateSelected)=\"handleSecondDateSelected($event)\"\n        (clickedOutside)=\"clickedOutside.next()\"\n        [showButtons]=\"true\"\n        [doubleCalendar]=\"true\"\n        (clearDates)=\"clearAllDates()\"\n      ></calendar-template>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -7362,7 +7427,7 @@
     InputDateRangePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-date-range',
-                    template: "\n      <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n        <co-input-text #firstInput class=\"no-focus-line custom-height\"\n                       [(model)]=\"firstDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [leftIcon]=\"leftIcon\"\n                       [leftIconData]=\"leftIconData\"\n                       [placeholder]=\"placeholder\"\n                       (blur)=\"handleFirstDateChanged(firstDateAsString)\"\n                       (clearIconClick)=\"clearDate(0)\"\n                       (click)=\"handleFirstInputClick($event)\"\n        ></co-input-text>\n        <co-input-text #secondInput class=\"no-focus-line custom-height\"\n                       [(model)]= \"secondDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [rightIcon]=\"rightIcon\"\n                       (rightIconClick)=\"toggleCalendar()\"\n                       (blur)=\"handleSecondDateChanged(secondDateAsString)\"\n                       (clearIconClick)=\"clearDate(1)\"\n                       (click)=\"handleSecondInputClick($event)\"\n        ></co-input-text>\n      </div>\n    ",
+                    template: "\n      <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n        <co-input-text #firstInput class=\"no-focus-line custom-height\"\n                       [(model)]=\"firstDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [leftIcon]=\"leftIcon\"\n                       [leftIconData]=\"leftIconData\"\n                       [placeholder]=\"placeholder\"\n                       (blur)=\"handleFirstDateChanged(firstDateAsString)\"\n                       (clearIconClick)=\"clearDate(0)\"\n                       (click)=\"handleFirstInputClick($event)\"\n                       [emptyPlace]=\"true\"\n        ></co-input-text>\n        <co-input-text #secondInput class=\"no-focus-line custom-height\"\n                       [(model)]= \"secondDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [rightIcon]=\"rightIcon\"\n                       (rightIconClick)=\"toggleCalendar()\"\n                       (blur)=\"handleSecondDateChanged(secondDateAsString)\"\n                       (clearIconClick)=\"clearDate(1)\"\n                       (click)=\"handleSecondInputClick($event)\"\n                       [emptyPlace]=\"true\"\n        ></co-input-text>\n      </div>\n    ",
                     providers: [
                         OverlayService,
                         {