How to use @material/dialog - 10 common examples

notifyOpened: () => this.$emit(strings.OPENED_EVENT, {}),
      notifyClosing: action => {
        this.$emit('change', false);
        // console.log(action)
        this.$emit(strings.CLOSING_EVENT, action ? { action } : {});
        LAYOUT_EVENTS.forEach(evt =>
          window.removeEventListener(evt, this.handleLayout),
        );
        document.removeEventListener('keydown', this.handleDocumentKeyDown);
      },
      notifyClosed: action => {
        this.$emit(strings.CLOSED_EVENT, action ? { action } : {});
      },
    };

    this.foundation = new MDCDialogFoundation(adapter);

    this.foundation.init();

    if (!autoStackButtons) {
      this.foundation.setAutoStackButtons(autoStackButtons);
    }

    if (typeof escapeKeyAction === 'string') {
      // set even if empty string
      this.foundation.setEscapeKeyAction(escapeKeyAction);
    }

    if (typeof scrimClickAction === 'string') {
      // set even if empty string
      this.foundation.setScrimClickAction(scrimClickAction);
    }

notifyOpened: () => this.$emit(strings.OPENED_EVENT, {}),
      notifyClosing: action => {
        this.$emit('change', false);
        // console.log(action)
        this.$emit(strings.CLOSING_EVENT, action ? { action } : {});
        LAYOUT_EVENTS.forEach(evt =>
          window.removeEventListener(evt, this.handleLayout),
        );
        document.removeEventListener('keydown', this.handleDocumentKeyDown);
      },
      notifyClosed: action => {
        this.$emit(strings.CLOSED_EVENT, action ? { action } : {});
      },
    };

    this.foundation = new MDCDialogFoundation(adapter);

    this.foundation.init();

    if (!autoStackButtons) {
      this.foundation.setAutoStackButtons(autoStackButtons);
    }

    if (typeof escapeKeyAction === 'string') {
      // set even if empty string
      this.foundation.setEscapeKeyAction(escapeKeyAction);
    }

    if (typeof scrimClickAction === 'string') {
      // set even if empty string
      this.foundation.setScrimClickAction(scrimClickAction);
    }

componentDidMount() {
    this.dialog = new MDCDialog(this.refs.na)
    this.dialog.listen('MDCDialog:closed', (event) => {
      // NB default action needs to happen in all cases,
      // do not add breaks.
      switch (event.detail.action) {
        case 'add_attribute':
          this.props.add(this.state.attribute)
        case 'add_from_picker':
        case 'cancel':
        default:
          this.setState({attribute: this.defaultValue})
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {
      this.dialog.layout()

const mdcTextContent = controller.textContent || options.textContent ||
          controller.content || options.content || '';

        if (mdcHtmlContent && !$injector.has('$sanitize')) {
          throw Error('The ngSanitize module must be loaded in order to use htmlContent.');
        }

        if (mdcHtmlContent && mdcTextContent) {
          throw Error('mdc-dialog cannot have both `htmlContent` and `textContent`');
        }

        // Only assign the content if nothing throws, otherwise it'll still be compiled.
        controller.mdcHtmlContent = mdcHtmlContent;
        controller.mdcTextContent = mdcTextContent;
      }
      options.mdcDialog = new MDCDialog(element[0]);
    }

this._snackbar = new MDCSnackbar(document.querySelector('.mm-snackbar'));

    // Add event listener to button to toggle the menu on and off.
    this._elements.more.addEventListener('click', () =>
        this._booted.then(() => (menu.open = !menu.open)));

    // Add event listener to open Settings screen.
    document.querySelector('.mm-menu__settings').addEventListener('click',
        () => this._settingsViewPromise.then((view) => {
          view.show(this._screens.convert);
          history.pushState({page: 'settings'}, 'Settings');
        }));

    const ratesDialog =
        new MDCDialog(document.querySelector('#mm-rates-dialog'));
    document.querySelector('.mm-menu__rates').addEventListener('click', () => {
      this._updateRateInfo();
      ratesDialog.show();
    });
    document.querySelector('.mm-convert__last-updated').addEventListener(
        'click', () => {
          this._updateRateInfo();
          ratesDialog.show();
        });

    const aboutDialog =
        new MDCDialog(document.querySelector('#mm-about-dialog'));
    document.querySelector('.mm-menu__about').addEventListener('click', () => {
      this._updateRateInfo();
      aboutDialog.show();
    });

getDefaultFoundation() {
    return new MDCDialogFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      hasClass: (className: string) => this.root.hasClass(className),
      addBodyClass: (className: string) =>
        document.body && document.body.classList.add(className),
      removeBodyClass: (className: string) =>
        document.body && document.body.classList.remove(className),
      eventTargetMatches: (target: HTMLElement, selector: string) =>
        matches(target, selector),
      trapFocus: () => {
        try {
          // we dont always have an item to focus
          // so we try catch it
          this.focusTrap && this.focusTrap.activate();
        } catch (err) {}
      },

getDefaultFoundation() {
    return new MDCDialogFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      hasClass: (className: string) => this.root.hasClass(className),
      addBodyClass: (className: string) =>
        document.body && document.body.classList.add(className),
      removeBodyClass: (className: string) =>
        document.body && document.body.classList.remove(className),
      eventTargetMatches: (target: HTMLElement, selector: string) =>
        matches(target, selector),
      trapFocus: () => {
        try {
          // we dont always have an item to focus
          // so we try catch it
          this.focusTrap && this.focusTrap.activate();
        } catch (err) {}
      },

const interval = $interval(function() {
          // wait for close animation to finish before destroying
          if (!element.hasClass(MDCDialogFoundation.cssClasses.ANIMATING)) {
            $interval.cancel(interval);
            resolve();
          }
        }, 10);
      }).then(function() {

getDefaultFoundation() {
    // prettier-ignore
    return new MDCDialogFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      addBodyClass: helper.addClass(document.body),
      removeBodyClass: helper.removeClass(document.body),
      eventTargetHasClass: helper.eventTargetHasClass(),
      registerInteractionHandler: helper.registerHandler('rootProps', this),
      deregisterInteractionHandler: helper.deregisterHandler('rootProps', this),
      registerSurfaceInteractionHandler: helper.registerHandler('surfaceProps', this),
      deregisterSurfaceInteractionHandler: helper.deregisterHandler('surfaceProps', this),
      registerDocumentKeydownHandler: helper.registerHandler(document, 'keydown'),
      deregisterDocumentKeydownHandler: helper.deregisterHandler(document, 'keydown'),
      registerTransitionEndHandler: helper.registerHandler('surfaceProps', this, 'transitionend'),
      deregisterTransitionEndHandler: helper.deregisterHandler('surfaceProps', this, 'transitionend'),
      notifyAccept: () => {
        this.props.onAccept()
        this.props.onAccept_()

mounted() {
        let vm = this;
        vm.mdcDialog = new MDCDialog(this.$el)
        vm.mdcDialog.listen('MDCDialog:accept', function() {
            vm.$emit('accept')
        })
        vm.mdcDialog.listen('MDCDialog:cancel', function() {
            vm.$emit('cancel')
        })

        if (vm.$slots.dialogAcceptButton)
            vm.$slots.dialogAcceptButton.map((n) => {
                n.elm.classList.add('mdc-dialog__footer__button')
                n.elm.classList.add('mdc-dialog__footer__button--accept')
            })
        if (vm.$slots.dialogCancelButton)
            vm.$slots.dialogCancelButton.map((n) => {
                n.elm.classList.add('mdc-dialog__footer__button')
                n.elm.classList.add('mdc-dialog__footer__button--cancel')