mtz-wizard-step-behavior.html

<link rel="import" href="../polymer/polymer.html">

<script>
  window.mtz = window.mtz || {};

  /**
   * `mtz.WizardStepBehavior`
   * Works with wizard to register and build out the steps array so stepper can accurately report on the available
   *  steps, also contains meta-data needed by stepper to display the steps for navigation.
   *
   * @polymerBehavior mtz.WizardStepBehavior
   * @demo demo/mtz-wizard-step.html
   */
  mtz.WizardStepBehavior = {
    hostAttributes: {
      'wizard-step': true
    },
    properties: {
      /* Used to stamp the content for the first time, supports a single lazy-load/API call per wizard instance */
      active: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
        notify: true,
      },
      /* Used to track the dirty state of the form, if there is one */
      dirty: {
        type: Boolean,
        value: false,
        readOnly: true,
        reflectToAttribute: true,
        notify: true
      },
      /* The form associated with this step, or null if one isn't found */
      form: {
        type: Object,
        notify: true,
        value: null
      },
      /* The query selector to base the form selection off of */
      formSelector: {
        type: String,
        value: '[wizard-form],.wizard-form'
      },
      /* The validity state of the element */
      invalid: {
        type: Boolean,
        reflectToAttribute: true,
        notify: true,
        value: false
      },
      /* TODO: Add optional flows */
      /* A step that is not required in the flow */
      optional: {
        type: Boolean,
        value: false
      },
      /* TODO: Add setting of completed flag */
      /* Step was finished used for flow control and display */
      completed: {
        type: Boolean,
        value: false
      },
      /* TODO: Add editable/non-editable functionality */
      /* Determines if the step is able to be revisited for modifications */
      editable: {
        type: Boolean,
        value: false
      },
      /* Used by the stepper to give a pretty name */
      label: String,
      /* Used to map the UI and API together for validation and data interfacing */
      name: {
        type: String,
        reflectToAttribute: true
      },
      /* Whether or not the step is required */
      required: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },
      /* The nodeObserver for tracking forms being added */
      __nodeObserver: Object
    },
    /**
     * Replaces methods with bound methods for ease of use in event listeners.
     */
    ready() {
      this.__updateDirty = this.__updateDirty.bind(this);
    },
    /**
     * Binds the event listeners and node observers.
     */
    attached() {
      this.addEventListener('change', this.__updateDirty);

      // For non-shadow DOM manipulations
      this.__nonShadowObserver = Polymer.dom(this).observeNodes(() => {
        const form = Polymer.dom(this).queryDistributedElements(this.formSelector)[0];
        this.set('form', form || this.form || null);
      });
      // For Shadow DOM manipulations
      this.__shadowObserver = Polymer.dom(this.root).observeNodes(() => {
        const form = Polymer.dom(this.root).queryDistributedElements(this.formSelector)[0];
        this.set('form', form || this.form || null);
      });
    },
    /**
     * Cleans up the event listeners and node observers.
     */
    detached() {
      this.removeEventListener('change', this.__updateDirty);

      // For non-shadow child observer
      if (this.__nonShadowObserver) {
        Polymer.dom(this).unobserveNodes(this.__nonShadowObserver);
        this.__nonShadowObserver = null;
      }
      // For shadow DOM child observer
      if (this.__shadowObserver) {
        Polymer.dom(this.root).unobserveNodes(this.__shadowObserver);
        this.__shadowObserver = null;
      }
    },
    /**
     * Reverts the form back to initial state if one exists, clears validity and dirty states.
     */
    reset() {
      if (this.form) this.form.reset();
      this.invalid = false;
      this._setDirty(false);
    },
    /**
     * Validates all the required elements (custom and native) in the form, if one exists, and checks step validity.
     * NOTE: this method is a promise so validation for the step in custom implementations can rely on async validation
     *  via things like API services.
     *
     * @return {Promise} - resolves with a Boolean that says if the wizard is valid or not
     */
    validate() {
      const validForm = !this.form || this.form.validate();
      const valid = !this.required || validForm;
      this.invalid = !valid;
      return Promise.resolve(valid);
    },
    /**
     * Sets the dirty state to true.
     * @listens change
     * @private
     */
    __updateDirty() {
      this._setDirty(true);
    }
  };
</script>