How to use @material/dom - 10 common examples

private getListItemIndex_(evt: Event) {
    const eventTarget = evt.target as Element;
    const nearestParent = closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);

    // Get the index of the element if it is a list item.
    if (nearestParent && matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
      return this.listElements.indexOf(nearestParent);
    }

    return -1;
  }

private getListItemIndex_(evt: Event) {
    const eventTarget = evt.target as Element;
    const nearestParent = closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);

    // Get the index of the element if it is a list item.
    if (nearestParent && matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
      return this.listElements.indexOf(nearestParent);
    }

    return -1;
  }

      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler, applyPassive()),
      registerThumbContainerInteractionHandler: (evtType, handler) => {

deregisterInteractionHandler: (type, handler) => {
        this.$el.removeEventListener(type, handler, applyPassive());
      },
      registerThumbContainerInteractionHandler: (type, handler) => {

registerThumbContainerInteractionHandler: (type, handler) => {
        this.$refs.thumbContainer.addEventListener(
          type,
          handler,
          applyPassive(),
        );
      },
      deregisterThumbContainerInteractionHandler: (type, handler) => {

registerInteractionHandler: (evtType: EventType, handler: EventListener) => {
        this.nativeControl_.addEventListener(evtType, handler, applyPassive());
      },
      removeClass: (className: string) => rippleSurface.classList.remove(className),

this.mdcFoundation) as EventListener;
    this.boundLayout = () => {
      if (this.open) {
        this.mdcFoundation.layout.bind(this.mdcFoundation);
      }
    };
    this.boundHandleKeydown = this.mdcFoundation.handleKeydown.bind(
                                  this.mdcFoundation) as EventListener;
    this.boundHandleDocumentKeydown =
        this.mdcFoundation.handleDocumentKeydown.bind(this.mdcFoundation) as
        EventListener;

    this.mdcRoot.addEventListener('click', this.boundHandleClick);
    window.addEventListener('resize', this.boundLayout, applyPassive());
    window.addEventListener(
        'orientationchange', this.boundLayout, applyPassive());
    this.addEventListener('keydown', this.boundHandleKeydown, applyPassive());
    document.addEventListener(
        'keydown', this.boundHandleDocumentKeydown, applyPassive());
  }

deregisterDocumentInteractionHandler: (evtType, handler) =>
        document.documentElement.removeEventListener(
          evtType,
          handler,
          applyPassive(),
        ),
      deregisterInteractionHandler: (evt, handler) => {

registerThumbContainerInteractionHandler: function (evtType, handler) {
                _this.thumbContainer_.addEventListener(evtType, handler, applyPassive());
            },
            deregisterThumbContainerInteractionHandler: function (evtType, handler) {

deregisterInputInteractionHandler: (evtType, handler) => {
          this.$refs.input.removeEventListener(
            evtType,
            handler,
            applyPassive(),
          );
        },
        getNativeInput: () => {