Cancel Button Performing Clear Button Behavior

[AnnuValand13]

Versions

• Angular version: 18.2.1
• component version: 6.0.4

Describe the bug
Clicking the cancel button currently performs the functionality of the clear button.

To Reproduce
Steps to reproduce the behavior:

<ngx-daterangepicker-material [ngClass]="isDatePickerVisible ? 'd-block' : 'd-none'" [opens]="'right'" [showDropdowns]="false" [showCustomRangeLabel]="true" [ranges]="dateRanges" [linkedCalendars]="false" [closeOnAutoApply]="true" [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="false" [showRangeLabelOnInput]="true" [showCancel]="true" (rangeClicked)="rangeClicked($event)" (datesUpdated)="choosedDate($event)" (applyDateClick)="applyDateClick()" (cancelClicked)="cancelDateClick($event)" #dateRangePicker> </ngx-daterangepicker-material>

Below is TS code:

`Ts :

  start_date: any;
  end_date: any;
  selected_range: string = '';

  tempStartDate!: string;
  tempEndDate!: string;
  selected: { start: Dayjs; end: Dayjs; } | undefined;
  dateRanges: any = {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  };
  dateRangeControl = new FormControl([this.dateRanges['Last 7 Days'][0], this.dateRanges['Last 7 Days'][1]]);
  choosedDate(value: any) {
    this.start_date = value.startDate.format('YYYY-MM-DD');
    this.end_date = value.endDate.format('YYYY-MM-DD');
    this.selected_range = this.start_date + " to " + this.end_date;

    this.getAllUsers(this.currentPage, this.itemsPerPage);
    this.toggleDatePicker();
  }

  toggleDatePicker(): void {
    this.isDatePickerVisible = !this.isDatePickerVisible;
  }

  rangeClicked(range: any): void {
    this.start_date = range.dates[0].format('YYYY-MM-DD');
    this.end_date = range.dates[1].format('YYYY-MM-DD');
    this.selected_range = this.start_date + " to " + this.end_date;
    this.getAllUsers(this.currentPage, this.itemsPerPage);
  }

  datesUpdated(range: any): void {
    this.start_date = range.dates[0].format('YYYY-MM-DD');
    this.end_date = range.dates[1].format('YYYY-MM-DD');
    this.selected_range = this.start_date + " to " + this.end_date;
    this.getAllUsers(this.currentPage, this.itemsPerPage);
    this.toggleDatePicker();
  }

  applyDateClick(): void {
    this.start_date = this.tempStartDate;
    this.end_date = this.tempEndDate;
    this.selected_range = ${this.start_date} to ${this.end_date};
    this.getAllUsers(this.currentPage, this.itemsPerPage);
    this.toggleDatePicker();
  }

  cancelDateClick(range: any): void {
    this.isDatePickerVisible = false;
  }`

Expected behavior
Cancle should only close calender, do not clear selection.