How to use @material/textfield - 10 common examples

instantiate () {
      this.mdcTextField = MDCTextField.attachTo(this.$el)
      this.mdcTextField.useNativeValidation = this.useNativeValidation
      this.mdcTextField.valid = this.valid
      this.mdcTextField.disabled = this.disabled
      this.$nextTick(() => { // wait for the DOM change
        // tell all the children that the parent is initialized
        if (this.mdcTextField.label_ instanceof MDCComponent) {
          this.mdcTextField.label_.emit('_init')
        }
        if (this.mdcTextField.outline_ instanceof MDCComponent) {
          this.mdcTextField.outline_.emit('_init')
        }
        if (this.mdcTextField.lineRipple_ instanceof MDCComponent) {
          this.mdcTextField.lineRipple_.emit('_init')
        }
        if (this.mdcTextField.helperText_ instanceof MDCComponent) {
          this.mdcTextField.helperText_.emit('_init', this.mdcTextField.helperText_)

getNativeInput: () => this._getInputElement(),
    helperText: this._helperText ? this.helperText.helperTextFoundation : undefined,
    icon: this._icons ? this._icons.first.iconTextFoundation : undefined
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    isDisabled(): boolean,
    setDisabled(disabled: boolean): void,
    setValid(isValid: boolean): void,
    setValue(value: any): void,
    isValid(): boolean,
    notchOutline(openNotch: boolean): void,
    setUseNativeValidation(useNativeValidation: boolean): void
  } = new MDCTextFieldFoundation(this._mdcAdapter);

  /** View -> model callback called when value changes */
  _onChange: (value: any) => void = () => { };

  /** View -> model callback called when text field has been touched */
  _onTouched = () => { };

  constructor(
    private _platform: Platform,
    private _changeDetectorRef: ChangeDetectorRef,
    public elementRef: ElementRef,
    private _ripple: MdcRipple) {

    // Force setter to be called in case id was not specified.
    this.id = this.id;
  }

this.document = null
    this.autosaveID = null
    this._isEditingSource = false

    this.autosaveEl.addEventListener('click', this.handleAutosaveClick.bind(this))
    this.saveEl.addEventListener('click', () => { this.save(true) })
    this.podPathEl.addEventListener('change', () => { this.load(this.podPath) })
    this.podPathEl.addEventListener('keyup', () => { this.delayPodPath() })

    this.mobileToggleMd = MDCIconToggle.attachTo(this.mobileToggleEl)
    this.mobileToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleMobileClick.bind(this))
    this.sourceToggleMd = MDCIconToggle.attachTo(this.sourceToggleEl)
    this.sourceToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleSourceClick.bind(this))
    this.podPathMd = new MDCTextField(
      this.containerEl.querySelector('.content__path .mdc-text-field'))
    this.saveProgressMd = MDCLinearProgress.attachTo(
      this.containerEl.querySelector('.sidebar__save .mdc-linear-progress'))
    this.saveProgressMd.close()

    this.api = new EditorApi({
      host: this.host,
      port: this.port,
    })
    this.partials = new Partials(this.api)

    // Default to loading with the UI.
    this.load(this.podPath)

    // TODO Start the autosave depending on local storage.
    // this.startAutosave()

const elementBreadcrumb = document.getElementById('breadcrumb');
const elementReviewForm = document.getElementById('review-form');
const elementRestaurantIdInput = document.getElementById('restaurant-id-input');
const elementRestaurantIdLabel = document.getElementById('restaurant-id-label');
// const elementNameInput = document.getElementById('name-input');
// const elementRestaurantRatingSelect = 
//   document.getElementById('restaurant-rating-select');
// const elementCommentsInput = document.getElementById('comments-input');

/**
 * Material Design
 */
const classRestaurantIdInput = 
  new MDCTextField(document.querySelector('.restaurant-id-input'));
const classNameInput = 
  new MDCTextField(document.querySelector('.name-input'));
const classRestaurantRatingSelect = 
  new MDCSelect(document.querySelector('.restaurant-rating-select'));
const classCommentsInput = 
  new MDCTextField(document.querySelector('.comments-input'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

/**
 * Start the following when the initial HTML document has been
 * completely loaded and parsed, without waiting for stylesheets, images,
 * and subframes to finish loading.
 * Fetch neighborhoods and cuisines.
 * https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
 */
document.addEventListener('DOMContentLoaded', (event) => {

});
    notifyControl.addEventListener('change', () => {
      this._model.settings.notify.value = notifyControl.checked;
    });

    // Handle common values.
    this._commonValues = [];
    const commonValueControls =
        this._screen.querySelectorAll('.mm-js-common-value');

    const labels = ['first', 'second', 'third'];

    for (let i = 0; i < commonValueControls.length; i++) {
      const control = commonValueControls[i];
      const input = control.querySelector('input');
      this._commonValues.push(new MDCTextfield(control));

      // Update model when values change.
      input.addEventListener('change', () => {
        if (input.value !== '') {
          this._model.common[labels[i]].home.value = parseFloat(input.value);
        }
      });

      // Set initial values and listen to model changes.
      input.value = this._model.common[labels[i]].home.value;
      this._model.common[labels[i]].home.listen((val) => (input.value = val));
    }
  }

getDefaultFoundation() {
    return new MDCTextFieldIconFoundation({
      getAttr: (attr: string) =>
        this.root.getProp(attr as any) as string | null,
      setAttr: (attr: string, value: string) =>
        this.root.setProp(attr as any, value),
      removeAttr: (attr: string) => this.root.removeProp(attr as any),
      setContent: (content: string) => {
        // @ts-ignore
        this.root.setProp('icon', content);
      },
      registerInteractionHandler: (
        evtType: K,
        handler: SpecificEventListener
      ): void => this.root.addEventListener(evtType, handler),
      deregisterInteractionHandler: (
        evtType: K,
        handler: SpecificEventListener

mounted () {
    const input = this.$el.parentElement.previousElementSibling.querySelector('.mdc-text-field__input')
    if (input instanceof HTMLInputElement) {
      if (this.currentLength === 0) this.cl = input.value.length
      if (this.maxLength === 0) this.ml = input.getAttribute('maxlength')
    }
    if (!(this.getCharacterCounter instanceof Function)) { // can not be init by parent
      this.mdcTextFieldCharacterCounter = MDCTextFieldCharacterCounter.attachTo(this.$el)
      this.mdcTextFieldCharacterCounter.foundation.setCounterValue(this.cl, this.ml)
    }
  },
  methods: {

MDCTextFieldRootAdapter,
  MDCTextFieldLabelAdapter,
  MDCTextFieldInputAdapter,
  MDCTextFieldOutlineAdapter,
  MDCTextFieldLineRippleAdapter,
} from '@material/textfield/adapter';
import {MDCTextFieldFoundation} from '@material/textfield/foundation';
import Input, {InputProps} from './Input';
import Icon, {IconProps} from './icon';
import HelperText, {HelperTextProps} from './helper-text';
import CharacterCounter, {CharacterCounterProps} from './character-counter';
import FloatingLabel from '@material/react-floating-label';
import LineRipple from '@material/react-line-ripple';
import NotchedOutline from '@material/react-notched-outline';

const cssClasses = MDCTextFieldFoundation.cssClasses;

export interface Props {
  // InputProps includes the prop `id`, which we use below in the constructor
  'children.props'?: InputProps;
  children: React.ReactElement>;
  className?: string;
  dense?: boolean;
  floatingLabelClassName?: string;
  fullWidth?: boolean;
  helperText?: React.ReactElement;
  characterCounter?: React.ReactElement;
  label?: React.ReactNode;
  leadingIcon?: React.ReactElement>;
  lineRippleClassName?: string;
  notchedOutlineClassName?: string;
  outlined?: boolean;

onBeforeFlow() {
        const textField = this.querySelector('.mdc-text-field');
            console.log('i222n',this.mwcInstance)
        if (textField) {

            this.mwcInstance = new MDCTextField(textField);
            console.log('in',this.mwcInstance)
        }
    }
}

export function initDateTime() {
    console.log('\tDateTime');
    let components = document.querySelectorAll('.v-datetime');
    for (let i = 0; i < components.length; i++) {
        let component = components[i];
        if (!component.vComponent) {
            component.vComponent = new VDateTime(component, new MDCTextField(component));
        }
    }
}