How to use the lit-element.eventOptions function in lit-element

//  Will wrap to the appropriate day in the following month.
  // PgUp Move focus to the same date of the previous month. If that date does not exist,
  //  focus is placed on the last day of the month.
  // PgDn Move focus to the same date of the following month. If that date does not exist,
  //  focus is placed on the last day of the month.
  // Alt+PgUp Move focus to the same date of the previous year.
  //  If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  // Alt+PgDn Move focus to the same date of the following year.
  //  If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  // Home Move to the first day of the month.
  // End Move to the last day of the month
  // Tab / Shift+Tab If the datepicker is in modal mode, navigate between calender grid and
  //  close/previous/next selection buttons, otherwise move to the field following/preceding the
  //  date textbox associated with the datepicker
  // Enter / Space Fill the date textbox with the selected date then close the datepicker widget.
  @eventOptions({ passive: true })
  private _updateFocusedDateWithKeyboard(ev: KeyboardEvent) {
    const keyCode = ev.keyCode;

    /** NOTE: Skip updating and fire an event to notify of updated focused date. */
    if (KEYCODES_MAP.ENTER === keyCode || KEYCODES_MAP.SPACE === keyCode) {
      dispatchCustomEvent(
        this, 'datepicker-keyboard-selected', { value: this.value });
      return;
    }

    /** NOTE: Skip for TAB key and other non-related keys */
    if (keyCode === KEYCODES_MAP.TAB || !ALL_NAV_KEYS_SET.has(keyCode)) return;

    const selectedDate = this._selectedDate;
    const nextFocusedDate = computeNextFocusedDate({
      keyCode,

this._hideTooltip();
    }, 500);
  }

  private _listboxFocusIn(ev) {
    if (this.expanded || ev.target.nodeName !== "A") {
      return;
    }
    this._showTooltip(ev.target.querySelector("paper-icon-item"));
  }

  private _listboxFocusOut() {
    this._hideTooltip();
  }

  @eventOptions({
    passive: true,
  })
  private _listboxScroll() {
    // On keypresses on the listbox, we're going to ignore scroll events
    // for 100ms so that if pressing down arrow scrolls the sidebar, the tooltip
    // will not be hidden.
    if (new Date().getTime() < this._recentKeydownActiveUntil) {
      return;
    }
    this._hideTooltip();
  }

  private _listboxKeydown() {
    this._recentKeydownActiveUntil = new Date().getTime() + 100;
  }

this.mdcFoundation.setUseNativeValidation(false);
    } else {
      this.mdcFoundation.setUseNativeValidation(true);
    }

    this._validity = validity;

    return this._validity.valid;
  }

  setCustomValidity(message: string) {
    this.validationMessage = message;
    this.formElement.setCustomValidity(message);
  }

  @eventOptions({passive: true})
  protected handleInputChange() {
    this.value = this.formElement.value;
  }

  protected createFoundation() {
    if (this.mdcFoundation !== undefined) {
      this.mdcFoundation.destroy();
    }
    this.mdcFoundation = new this.mdcFoundationClass(this.createAdapter(), {
      characterCounter: this.maxLength !== -1 ?
          this.charCounterElement.charCounterFoundation :
          undefined
    });
    this.mdcFoundation.init();
  }

import {eventOptions, html, query} from 'lit-element';

export class TabScrollerBase extends BaseElement {
  protected mdcFoundation!: MDCTabScrollerFoundation;

  protected mdcFoundationClass = MDCTabScrollerFoundation;

  @query('.mdc-tab-scroller') protected mdcRoot!: HTMLElement;

  @query('.mdc-tab-scroller__scroll-area')
  protected scrollAreaElement!: HTMLElement;

  @query('.mdc-tab-scroller__scroll-content')
  protected scrollContentElement!: HTMLElement;

  @eventOptions({passive: true})
  private _handleInteraction() {
    this.mdcFoundation.handleInteraction();
  }

  private _handleTransitionEnd(e: Event) {
    this.mdcFoundation.handleTransitionEnd(e);
  }

  private _scrollbarHeight = -1;

  protected render() {
    return html`
      <div class="mdc-tab-scroller">
        </div>

/**
       * NOTE: This improves spamming animations via gestures but relying on another property
       * to keep track of the last/ latest selected date so that when you spam click on
       * the navigate next button 3 times, based on the expected mental model and behavior,
       * the calendar month should switch 3 times, e.g. Jan 2020 -> 3 clicks -> Apr 2020.
       */
      this._lastSelectedDate = newSelectedDate;
      this._selectedDate = this._lastSelectedDate!;

      return this.updateComplete;
    };

    return passiveHandler(handleUpdateMonth);
  }

  @eventOptions({ passive: true })
  private _updateYear(ev: MouseEvent) {
    const selectedYearEl = findShadowTarget(
      ev,
      (n: HTMLElement) => hasClass(n, 'year-list-view__list-item')) as HTMLButtonElement;

    if (selectedYearEl == null) return;

    /**
     * 2 things to do here:
     *  - Update `_selectedDate` and `_focusedDate` with update `year` value of old focused date
     *  - Update `_startView` to `START_VIEW.CALENDAR`
     */

    const newFocusedDate = updateYearWithMinMax(new Date(
      this._focusedDate!).setUTCFullYear(+selectedYearEl.year), this._min!, this._max!);