@colijnit/corecomponents_v12 255.1.1 → 255.1.3

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

@@ -1,715 +0,0 @@
-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;
-    }
-  }
-}