How to use the @material/ripple.util.getMatchesProperty function in @material/ripple

private _initRipple(): void {
    if (!this._getInputElement()) { return; }

    const MATCHES = util.getMatchesProperty(HTMLElement.prototype);
    if (!this._ripple.initialized && !this.outlined && !this.textarea) {
      const rippleAdapter = Object.assign(this._ripple.createAdapter({
        surface: this.elementRef.nativeElement,
        activator: this._getInputElement()
      }), { isSurfaceActive: () => this._getInputElement()[MATCHES](':active') });

      this._ripple.init({
        surface: this.elementRef.nativeElement,
        activator: this._getInputElement()
      }, rippleAdapter);
    } else {
      this._ripple.destroy();
    }
  }

isSurfaceActive(): boolean {
    return this._getHostElement()[util.getMatchesProperty(HTMLElement.prototype)](':active');
  }

import { get } from '@ember/object';
import { run } from '@ember/runloop';
import getElementProperty from '../utils/get-element-property';
import { util } from '@material/ripple';

const MATCHES = util.getMatchesProperty(HTMLElement.prototype);

/**
 * @param {Ember.Component} component - The component must mix in {@link MDCComponent}
 * @param {Object} overrides
 * @returns {Object}
 */
export const createRippleAdapter = (component, overrides) =>
  Object.assign(
    {
      browserSupportsCssVars: () => util.supportsCssVariables(window),
      isUnbounded: () => false,
      isSurfaceActive: () => get(component, 'element')[MATCHES](':active'),
      isSurfaceDisabled: () => get(component, 'disabled'),
      addClass: className => run(() => get(component, 'mdcClasses').addObject(className)),
      removeClass: className => run(() => get(component, 'mdcClasses').removeObject(className)),
      registerInteractionHandler: (evtType, handler) => component.registerMdcInteractionHandler(evtType, handler),

import { bool } from '@ember/object/computed';
import { camelize } from '@ember/string';
import { A } from '@ember/array';
import Component from '@ember/component';
import { computed, set, get } from '@ember/object';
import { isPresent } from '@ember/utils';
import layout from '../templates/components/mdc-textfield';
import { MDCComponent, addClass, removeClass } from '../mixins/mdc-component';
import getElementProperty from '../utils/get-element-property';
import { MDCTextfieldFoundation } from '@material/textfield';
import { util } from '@material/ripple';

const MATCHES = util.getMatchesProperty(HTMLElement.prototype);
const { cssClasses } = MDCTextfieldFoundation;

export default Component.extend(MDCComponent, {
  //region Attributes
  /**
   * This property is considered read-only by the component, and will not be
   * updated by user action. Please see `onchange` to handle user actions.
   * @type {String}
   */
  value: '',
  /**
   * @type {Boolean}
   */
  disabled: false,
  /**
   * @type {Boolean}