@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/projects/corecomponents/src/lib/components/filter-item/filter-item.component.ts

@@ -0,0 +1,715 @@
+import {
+  ChangeDetectionStrategy, ChangeDetectorRef,
+  Component,
+  EventEmitter, HostBinding,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
+import {FilterItemViewmodel} from './filter-item-viewmodel';
+import {IconCacheService} from '../icon/icon-cache.service';
+import {FilterItemMode} from '../../core/enum/filterItem-mode.enum';
+
+@Component({
+  selector: "co-filter-item",
+  template: `
+      <div class="co-filter-item-header">
+          <co-collapsible
+                  [headerTitle]="placeholder"
+                  [expandButtonLast]="true"
+                  [iconData]="iconService.getIcon(icons.ArrowPointDown)"
+                  [expanded]="expanded"
+                  [showButton]="showButton"
+                  [buttonText]="filterButtonLabel"
+                  (buttonClicked)="onButtonClicked()"
+          >
+              <div class="co-filter-item-collapsable-content">
+                  <div class="co-filter-item-custom-content" *ngIf="customContent; else collectionContent"
+                       (keydown)="showButton=true" (mousedown)="showButton=true">
+                      <ng-content></ng-content>
+                  </div>
+                  <ng-template #collectionContent>
+                      <div class="co-filter-item-collection-content" *ngIf="mode === modes.Filterlist || mode === modes.SingleSelectList
+                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput">
+                          <co-input-text
+                                  *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
+                                  [placeholder]="searchPlaceholder"
+                                  [model]="filterText"
+                                  (modelChange)="applyFilter($event)"
+                          >
+                          </co-input-text>
+                          <div class="no-results" *ngIf="filteredCollection?.length === 0">
+                              <span [textContent]="noResultsLabel"></span>
+                          </div>
+                          <div class="co-filter-item-collection-results">
+                              <ng-container
+                                      *ngFor="let option of filteredCollection; let index = index">
+                                  <div class="co-filter-item-collection-result-item" *ngIf="index < limitTo || showAllResults">
+                                      <co-input-checkbox *ngIf="mode !== modes.SingleSelectList"
+                                                         [label]="option.description"
+                                                         [model]="option.checked"
+                                                         [clickableLabel]="false"
+                                                         (modelChange)="handleModelChange(option)"
+                                      ></co-input-checkbox>
+                                      <co-input-radio-button *ngIf="mode === modes.SingleSelectList"
+                                                             [label]="option.description"
+                                                             [model]="option.checked"
+                                                             (modelChange)="handleModelChange(option)"
+                                      ></co-input-radio-button>
+                                      <div class="co-filter-item-amount" *ngIf="option.count"
+                                           [textContent]="option.count.toString() | append: ')' | prepend: '      ('"
+                                      ></div>
+                                  </div>
+
+                              </ng-container>
+                          </div>
+                          <div class="co-filter-show-more-or-less" *ngIf="!showAllResults">
+                              <div class="co-filter-show-more clickable"
+                                   *ngIf="moreToShow()">
+                                  <a (click)="increaseLimit()">
+                                      <co-icon [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
+                                      <span [textContent]="showMoreLabel"></span>
+                                  </a>
+                              </div>
+                              <div class="co-filter-show-less clickable"
+                                   *ngIf="lessToShow()">
+                                  <a (click)="setToInitialLimit()">
+                                      <co-icon [iconData]="iconService.getIcon(icons.ArrowPointUp)"></co-icon>
+                                      <span [textContent]="showLessLabel"></span>
+                                  </a>
+                              </div>
+                          </div>
+                      </div>
+                      <div class="co-filter-item-slider-content" *ngIf="mode === modes.Slider">
+                          <co-input-text
+                                  class="slider-from"
+                                  [type]="'number'"
+                                  [digitsOnly]="true"
+                                  [hideArrowButtons]="true"
+                                  [excludePlusMinus]="true"
+                                  [label]="'FROM' | coreLocalize"
+                                  [(model)]="sliderMin"
+                                  (focusout)="handleModelChange(sliderMin)"
+                          ></co-input-text>
+                          <co-input-text
+                                  class="slider-to"
+                                  [type]="'number'"
+                                  [digitsOnly]="true"
+                                  [hideArrowButtons]="true"
+                                  [excludePlusMinus]="true"
+                                  [label]="'TO' | coreLocalize"
+                                  [(model)]="sliderMax"
+                                  (focusout)="handleModelChange(sliderMax)"
+                          ></co-input-text>
+                      </div>
+                      <div class="co-filter-item-slider-content" *ngIf="mode === modes.NullableSlider">
+                          <co-input-text
+                                  class="slider-from"
+                                  [type]="'number'"
+                                  [digitsOnly]="true"
+                                  [hideArrowButtons]="true"
+                                  [excludePlusMinus]="true"
+                                  [label]="'FROM' | coreLocalize"
+                                  [(model)]="sliderMin"
+                                  (focusout)="handleModelChange(sliderMin)"
+                          ></co-input-text>
+                          <co-input-text
+                                  class="slider-to"
+                                  [type]="'number'"
+                                  [digitsOnly]="true"
+                                  [hideArrowButtons]="true"
+                                  [excludePlusMinus]="true"
+                                  [label]="'TO' | coreLocalize"
+                                  [(model)]="sliderMax"
+                                  (focusout)="handleModelChange(sliderMax)"
+                          ></co-input-text>
+                      </div>
+                      <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.Checkbox ">
+                          <co-input-checkbox
+                                  [(model)]="model"
+                                  (modelChange)="handleModelChange($event)"
+                                  [label]="placeholder">
+                          </co-input-checkbox>
+                      </div>
+                      <div class="co-filter-item-checkbox-content"
+                           *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
+                          <co-input-checkbox
+                                  [(model)]="checkBoxToTextModel"
+                                  (modelChange)="handleModelChange($event)"
+                                  [label]="placeholder"></co-input-checkbox>
+                      </div>
+                      <div class="co-filter-item-textfield-content" *ngIf="mode === modes.TextField">
+                          <co-input-text
+                                  [(model)]="model"
+                                  (modelChange)="handleModelChange($event)"></co-input-text>
+                      </div>
+                      <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateField">
+                          <co-input-date
+                                  [(model)]="model"
+                                  (modelChange)="handleModelChange($event)"
+                          ></co-input-date>
+                      </div>
+                      <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateRangeField">
+                          <co-input-date-range
+                                  [model]="[dateRangeStart, dateRangeEnd]"
+                                  (modelChange)="handleModelChange($event)"
+                                  [placeholder]="'SELECT_DATE' | coreLocalize">
+                          </co-input-date-range>
+                      </div>
+                  </ng-template>
+              </div>
+          </co-collapsible>
+      </div>
+
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FilterItemComponent implements OnInit {
+  public icons: typeof CoreComponentsIcon = CoreComponentsIcon;
+  public modes: typeof FilterItemMode = FilterItemMode;
+
+  @Input()
+  public set mode(value: FilterItemMode) {
+    this._mode = value;
+    this.readModelForMode(this._model);
+  }
+
+  public get mode(): FilterItemMode {
+    return this._mode;
+  }
+
+  @Input()
+  public set collection(value: FilterItemViewmodel[]) {
+    this._collection = value;
+    this.filteredCollection = this._collection?.slice();
+    //reset the model in case there was no collection to set its values on when it was set.
+    this.model = this._model;
+  }
+
+  public get collection(): FilterItemViewmodel[] {
+    return this._collection;
+  }
+
+  @Input()
+  public placeholder: string;
+
+  @Input()
+  public initialLimit: number = 10;
+
+  @Input()
+  public expanded: boolean = false;
+
+  @Input()
+  public minSearchCharsToLoadCollection: number;
+
+  @Input()
+  public collectionLoadFn: Function;
+
+  // Set to false to use filter item with a multi selectable collection. Set to true to specify custom content
+  @Input()
+  public customContent: boolean = false;
+
+  // Set to true to show all results. Set to false to get 'show more' and 'show less' buttons to expand and contract.
+  @Input()
+  public showAllResults: boolean = false;
+
+  @Input()
+  public filterButtonLabel: string = "Search";
+
+  @Input()
+  public searchPlaceholder: string = 'Search...';
+
+  @Input()
+  public showMoreLabel: string = 'Show more';
+
+  @Input()
+  public showLessLabel: string = 'Show less';
+
+  @Input()
+  public noResultsLabel: string = "No results";
+
+  @Input()
+  public sliderDefaultMin: number = 0;
+
+  @Input()
+  public sliderDefaultMax: number = 100000;
+
+  @Input()
+  public fullRangeIsNull: boolean = false;
+
+  @Input()
+  public set model(newModel: any) {
+    this.readModelForMode(newModel);
+  }
+
+  public get model(): any {
+    return this._model;
+  }
+
+  @Output()
+  public modelChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public collectionChange: EventEmitter<FilterItemViewmodel[]> = new EventEmitter<FilterItemViewmodel[]>();
+
+  @Output()
+  public filterButtonClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding("class.co-filter-item")
+
+  public filteredCollection: FilterItemViewmodel[] = [];
+  public limitTo: number = 10;
+  public filterText: string = "";
+  public showButton: boolean = false;
+
+  //models for the slider field inputs
+  public sliderMin: number;
+  public sliderMax: number;
+
+  //models for th daterange input
+  public dateRangeStart: Date;
+  public dateRangeEnd: Date;
+
+  //model for the textbox options that need a converted output
+  public checkBoxToTextModel: boolean;
+
+  private _collection: FilterItemViewmodel[] = [];
+  private _mode: FilterItemMode = this.modes.Filterlist;
+  private _model: any;
+
+  constructor(public iconService: IconCacheService,
+              private _changeDetector: ChangeDetectorRef) {
+  }
+
+  public ngOnInit(): void {
+    this.setToInitialLimit();
+    this.showButton = this.valueSelected();
+    if(this.checkBoxToTextModel === undefined || this.checkBoxToTextModel === null) {
+      this.checkBoxToTextModel = false;
+    }
+  }
+
+  public setToInitialLimit(): void {
+    this.limitTo = this.initialLimit;
+  }
+
+  public increaseLimit(): void {
+    this.limitTo += 10;
+  }
+
+  public moreToShow(): boolean {
+    if (this.showAllResults) {
+      return false;
+    }
+    return this.filteredCollection?.length > this.limitTo;
+  }
+
+  public lessToShow() {
+    if (this.showAllResults) {
+      return false;
+    }
+    return this.filteredCollection?.length <= this.limitTo && this.filteredCollection?.length > this.initialLimit;
+  }
+
+  public handleModelChange(model: any) {
+    switch (this.mode) {
+      case this.modes.Filterlist:
+        this.showButton = true;
+        model.checked = !model.checked;
+        this._createModelForFilterList();
+        break;
+      case this.modes.SelectListWithStringCollectionOutput:
+        this.showButton = true;
+        model.checked = !model.checked;
+        this._createModelForStringCollectionList();
+        break;
+      case this.modes.SingleSelectList:
+        this.showButton = true;
+        this.uncheckForSingleSelect(model);
+        model.checked = !model.checked;
+        this._createModelForSingleSelectList();
+        break;
+      case this.modes.SelectListWithNumberOutput:
+        this.showButton = true;
+        model.checked = !model.checked;
+        this._createModelForSelectListWithNumberOutput();
+        break;
+      case this.modes.Slider:
+        this.showButton = true;
+        this._createModelForSliderMode();
+        break;
+      case this.modes.NullableSlider:
+        this.showButton = true;
+        this._createModelForNullableSliderMode();
+        break;
+      case this.modes.CheckboxToText:
+        this.showButton = true;
+        this._createModelForCheckboxToText();
+        break;
+      case this.modes.CheckboxToSimpleText:
+        this.showButton = true;
+        this._createModelForCheckboxToSimpleText();
+        break;
+      case this.modes.CheckboxToBinary:
+        this.showButton = true;
+        this._createModelForCheckboxToBinary();
+        break;
+      case this.modes.DateRangeField:
+        this.showButton = true;
+        this._createModelForDateRange(model);
+        break;
+      case this.modes.TextField:
+        this.showButton = true;
+        this._model = (typeof this._model === 'string' && this._model.length === 0) ? undefined : this._model;
+        break;
+    }
+    this.modelChange.emit(this._model);
+    this.collectionChange.emit(this.collection);
+  }
+
+  public valueSelected() {
+    if (this.collection) {
+      return !!this.collection.find(c => c.checked);
+    }
+    return false;
+  }
+
+  // Applies filter to the collection.
+  public async applyFilter(text: string): Promise<[]> {
+    if (!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn) {
+      if (text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length) {
+        this.collection = await this.collectionLoadFn(text);
+      } else if (text.length < this.minSearchCharsToLoadCollection) {
+        this.collection = undefined;
+      }
+    }
+    this.filterText = text;
+    if (!this.collection) {
+      return [];
+    }
+
+    const filterText: string = this.filterText?.toString().toLowerCase();
+    let filteredItemCount: number = 0;
+    this.filteredCollection = this.collection?.filter((item) => {
+      const labelText: string = item.description?.toString().toLowerCase();
+      const isHiddenByFilter: boolean = (labelText?.indexOf(filterText) === -1);
+      if (isHiddenByFilter) {
+        return false;
+      } else {
+        filteredItemCount++;
+        return true;
+      }
+    });
+  }
+
+  public onButtonClicked(): void {
+    this.filterButtonClicked.emit();
+  }
+
+  private uncheckForSingleSelect(model: FilterItemViewmodel): void {
+    this.collection.forEach(m => {
+      if (m.code !== model.code && m.description !== model.description) {
+        m.checked = false;
+      }
+    });
+  }
+
+  private readModelForMode(newModel: any): void {
+    switch (this.mode) {
+      case this.modes.Filterlist:
+        this._readModelForFilterList(newModel);
+        break;
+      case this.modes.SingleSelectList:
+        this._readModelForSingleSelectList(newModel);
+        break;
+      case this.modes.SelectListWithStringCollectionOutput:
+        this._readModelForStringCollectionList(newModel);
+        break;
+      case this.modes.SelectListWithNumberOutput:
+        this._readModelForSelectListWithNumberOutput(newModel);
+        break;
+      case this.modes.Slider:
+      case this.modes.NullableSlider:
+        this._readModelForSliderMode(newModel);
+        break;
+      case this.modes.CheckboxToText:
+      case this.modes.CheckboxToSimpleText:
+        this._readModelForCheckboxToText(newModel);
+        break;
+      case this.modes.CheckboxToBinary:
+        this._readModelForCheckboxToBinary(newModel);
+        break;
+      case this.modes.DateField:
+        this._readModelForDateField(newModel);
+        break;
+      case this.modes.DateRangeField:
+        this._readModelForDateRangeField(newModel);
+        break;
+      default:
+        this._model = newModel;
+    }
+  }
+  /////////////////////////////////////////////////////////////
+  //Model creation for all of the different options available//
+  /////////////////////////////////////////////////////////////
+  private _createModelForFilterList(): void {
+    let filterRange: string[] = [];
+    if (this.collection !== null && this.collection !== undefined) {
+      this.collection.forEach((viewModel: FilterItemViewmodel) => {
+        if (viewModel.checked) {
+          filterRange.push(`?='${viewModel.code}'`);
+        }
+      });
+      if (filterRange.length > 0) {
+        this._model = filterRange.join(',');
+      } else {
+        this._model = undefined;
+      }
+    }
+  }
+
+  private _createModelForStringCollectionList(): void {
+    let filterRange: string[] = [];
+    this.collection.forEach((viewModel: FilterItemViewmodel) => {
+      if (viewModel.checked) {
+        filterRange.push(viewModel.code.toString());
+      }
+    });
+    if (filterRange.length > 0) {
+      this._model = filterRange;
+    } else {
+      this._model = undefined;
+    }
+  }
+
+  private _createModelForSingleSelectList(): void {
+    let filterString: string = "";
+    this.collection.forEach((viewModel: FilterItemViewmodel) => {
+      if (viewModel.checked) {
+        filterString = viewModel.code.toString();
+      }
+    });
+    if (filterString.length > 0) {
+      this._model = filterString;
+    } else {
+      this._model = undefined;
+    }
+  }
+
+  private _createModelForSelectListWithNumberOutput(): void {
+    let filterNumber: number = null;
+    this.collection.forEach((viewModel: FilterItemViewmodel) => {
+      if (viewModel.checked) {
+        if (filterNumber == null) {
+          filterNumber = 0;
+        }
+        filterNumber += Number(viewModel.code);
+      }
+    });
+    this._model = filterNumber;
+  }
+
+  private _createModelForSliderMode(): void {
+    this.sliderMin = !!this.sliderMin ? this.sliderMin : this.sliderDefaultMin;
+    this.sliderMax = !!this.sliderMax ? this.sliderMax : this.sliderDefaultMax;
+
+    let trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
+    let trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
+
+    this.sliderMin = trueLowerBound;
+    this.sliderMax = trueUpperBound;
+    this._model = `${trueLowerBound} - ${trueUpperBound}`;
+
+  }
+
+  private _createModelForNullableSliderMode(): void {
+
+    if (this.sliderMin && this.sliderMax) {
+      let trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
+      let trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
+
+      this._model = `${trueLowerBound} - ${trueUpperBound}`;
+    } else {
+      this._model = null;
+    }
+  }
+
+  private _createModelForCheckboxToText(): void {
+    if (this.checkBoxToTextModel) {
+      this._model = "?='J'";
+    } else {
+      this._model = "?='N'";
+    }
+  }
+
+  private _createModelForCheckboxToSimpleText(): void {
+    if (this.checkBoxToTextModel) {
+      this._model = "J";
+    } else {
+      this._model = "N";
+    }
+  }
+
+  private _createModelForCheckboxToBinary(): void {
+    if (this.checkBoxToTextModel) {
+      this._model = 1;
+    } else {
+      this._model = 0;
+    }
+  }
+
+  private _createModelForDateRange(dates: Date[]): void {
+    if (dates) {
+      let startDate = dates[0];
+      let endDate = dates[1];
+
+      const startDateRequest = startDate ? this._formatDateToString(startDate) : '';
+      const endDateRequest = endDate ? this._formatDateToString(endDate) : '';
+
+      this._model = `?>=\'${startDateRequest}\'& ?<=\'${endDateRequest}\'`;
+    }
+  }
+
+  private _formatDateToString(date: Date): string {
+    let day = date.getDate().toString().padStart(2, '0');
+    let month = (date.getMonth() + 1).toString().padStart(2, '0');
+    let year = date.getFullYear();
+
+    return `${day}-${month}-${year}`;
+  }
+
+  ////////////////////////////////////////////////////////////
+  //Model reading for all of the different options available//
+  ////////////////////////////////////////////////////////////
+  private _readModelForFilterList(filterModel: string): void {
+    let filterList: string[] = [];
+    let itemsToCheck: string[] = [];
+    this._uncheckAll();
+    this._model = filterModel;
+
+    if (filterModel !== null && filterModel !== undefined && typeof filterModel === 'string' && filterModel.length != 0 && this.collection !== null && this.collection !== undefined) {
+      filterList = filterModel.split(",")
+      filterList.forEach((filter: string) => {
+        itemsToCheck.push(filter.substr(3, filter.length - 4));
+      });
+
+      for (const item of itemsToCheck) {
+        let filter = this.collection.find(element => element.code.toString() === item);
+        if (filter !== null && filter !== undefined) {
+          filter.checked = true;
+        }
+      }
+      this._model = filterModel;
+    }
+
+  }
+
+  private _readModelForSingleSelectList(singleSelectModel: string) {
+    this._uncheckAll();
+    this._model = singleSelectModel;
+
+    if (singleSelectModel !== null && singleSelectModel !== undefined && this.collection !== null && this.collection !== undefined) {
+      let filter = this.collection.find(element => element.code.toString() === singleSelectModel);
+      if (filter !== null && filter !== undefined) {
+        filter.checked = true;
+      }
+    }
+  }
+
+  private _readModelForStringCollectionList(collectionModel: string[]): void {
+    this._uncheckAll();
+    this._model = collectionModel;
+
+    if (collectionModel !== null && collectionModel !== undefined && this.collection !== null && this.collection !== undefined) {
+      this.collection.forEach((viewModel: FilterItemViewmodel) => {
+        if (collectionModel.indexOf(viewModel.code.toString()) > -1) {
+          viewModel.checked = true;
+        } else {
+          viewModel.checked = false;
+        }
+      });
+    }
+  }
+
+  private _readModelForSelectListWithNumberOutput(numberModel: number) {
+    this._uncheckAll();
+    this._model = numberModel;
+
+    if (numberModel !== null && numberModel !== undefined && this.collection !== null && this.collection !== undefined) {
+      for (const item of this.collection) {
+        const itemCode: number = item.code as number;
+        const modValue = (numberModel % (2 * itemCode));
+        item.checked = (modValue >= itemCode);
+      }
+    }
+  }
+
+  private _uncheckAll() {
+    if (this.collection !== null && this.collection !== undefined) {
+      this.collection.forEach(m => {
+        m.checked = false;
+      });
+    }
+  }
+
+  private _readModelForSliderMode(sliderModel: string): void {
+    this._model = sliderModel;
+    if (sliderModel !== undefined && sliderModel !== null) {
+      let sliderInputCollection = sliderModel.split(' - ');
+      this.sliderMin = parseInt(sliderInputCollection[0]);
+      this.sliderMax = parseInt(sliderInputCollection[1]);
+    } else {
+      this.sliderMin = this.sliderDefaultMin;
+      this.sliderMax = this.sliderDefaultMax;
+    }
+  }
+
+  private _readModelForCheckboxToText(checkboxToTextModel: string): void {
+    this._model = checkboxToTextModel;
+    if (checkboxToTextModel !== undefined && checkboxToTextModel !== null) {
+      this.checkBoxToTextModel = (checkboxToTextModel.indexOf('J') > -1);
+    } else {
+      this.checkBoxToTextModel = false;
+    }
+  }
+
+  private _readModelForCheckboxToBinary(checkboxToBinary: number): void {
+    this._model = checkboxToBinary;
+    if (checkboxToBinary !== undefined && checkboxToBinary !== null) {
+      this.checkBoxToTextModel = (checkboxToBinary >= 1);
+    } else {
+      this.checkBoxToTextModel = false;
+    }
+  }
+
+  private _readModelForDateField(dateFieldModel: string): void {
+    this._model = dateFieldModel;
+    if (dateFieldModel !== undefined && dateFieldModel !== null) {
+      this._model = new Date(dateFieldModel);
+    } else {
+      this._model = undefined;
+    }
+  }
+
+  private _readModelForDateRangeField(dateRangeFieldModel: string): void {
+    this._model = dateRangeFieldModel;
+    if (dateRangeFieldModel !== undefined && dateRangeFieldModel !== null) {
+      let dateCollection = dateRangeFieldModel.split('&');
+
+      let startString = dateCollection[0].trim().substr(4, dateCollection[0].length - 5);
+      let endString = dateCollection[1].trim().substr(4, dateCollection[1].length - 5);
+
+      let startDateComponents = startString.split('-');
+      let endDateComponents = endString.split('-');
+
+      this.dateRangeStart = new Date(parseInt(startDateComponents[2]), parseInt(startDateComponents[1]) - 1, parseInt(startDateComponents[0]));
+      this.dateRangeEnd = new Date(parseInt(endDateComponents[2]), parseInt(endDateComponents[1]) - 1, parseInt(endDateComponents[0]));
+    } else {
+      this.dateRangeStart = undefined;
+      this.dateRangeEnd = undefined;
+    }
+  }
+}