ud-stepper.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../neon-animation/neon-animated-pages.html">
<link rel="import" href="../neon-animation/neon-animations.html">
<link rel="import" href="../paper-styles/element-styles/paper-material-styles.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../polymer/lib/mixins/mutable-data.html">
<link rel="import" href="ud-step.html">
<link rel="import" href="ud-iconset.html">
<dom-module id="ud-stepper-button">
  <!--  <template>
    <style>
      host: {
        display: block
      }
    </style>
    <slot></slot>
  </template> -->
  <script>
  (function() {
    /**
     * `ud-stepper-button`
     *  private element to make sure we capture 'spacebar' downkey event when the 
     *  element has focus. This is similar to how paper-tab work. 
     */
    class UdStepperButton extends
    Polymer.mixinBehaviors(Polymer.IronButtonState, Polymer.Element) {
      static get is() {
        return 'ud-stepper-button';
      }
    }
    customElements.define(UdStepperButton.is, UdStepperButton);
  })();

  </script>
</dom-module>
<dom-module id="ud-stepper">
  <template>
    <style include="paper-material-styles">
    :host {
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      --ud-stepper-circle-size: 30px;
      --ud-stepper-icon-size: 18px;
    }

    #pageContainer {
      min-height: var(--ud-stepper-container-min-height);
    }

    .header-container {
      display: flex;
      flex-direction: row;

      flex-wrap: nowrap;
      align-items: center;
      @apply --ud-stepper-header-container-style;
    }

    /* Horizontal Styles */

    .header {
      display: flex;
      flex-direction: row;
      justify-content: center;
      overflow: hidden;
      flex: 1;
    }

    :host(:not([vertical])) .header[aria-selected] {
      background: var(--ud-stepper-selected-header-background, var(--google-grey-300));
      @apply --ud-stepper-selected-header;
    }


    :host(:not([vertical])) .header:not(:last-of-type)::after {
      content: '';
      display: inline-block;
      position: relative;
      flex: 1;
      top: 36px;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.3);
    }

    :host(:not([vertical])) .header:not(:first-of-type)::before {
      content: '';
      display: inline-block;
      position: relative;
      flex: 1;
      top: 36px;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .header .label {
      display: flex;
      flex-direction: row;
      cursor: pointer;
      align-items: center;
      max-height: var(--ud-stepper-icon-size);
      padding: 24px 24px 24px 24px;
    }

    .header:hover,
    .header:focus {
      background-color: var(--google-grey-100);
      font-weight: 500;
      outline: none;
    }
    .header:focus {
      box-shadow: 0 1px 0 var(--ud-stepper-icon-selected-color, var(--google-blue-500));
    }

    .header:focus-visible {
      box-shadow: 0 2px 0 var(--ud-stepper-icon-selected-color, var(--google-blue-500));
    }

    .label-circle {
      @apply --paper-font-caption;
      text-align: center;
      line-height: 24px;
      color: white;
      background-color: rgba(0, 0, 0, 0.38);
      border-radius: 50%;
      line-height: var(--ud-stepper-circle-size);
      width: var(--ud-stepper-circle-size);
      height: var(--ud-stepper-circle-size);
    }

    iron-icon {
      --iron-icon-width: var(--ud-stepper-icon-size);
      --iron-icon-height: var(--ud-stepper-icon-size);
      margin-bottom: 4px;
    }

    .label-text {
      /*@apply --paper-font-body1;*/
      padding-left: 8px;
      color: rgba(0, 0, 0, 0.54);
    }

    .label-text .optional,
    .label-text .summary {
      @apply --paper-font-caption;
    }

    :host(:not([vertical])) .label-text .main {
      @apply --paper-font-common-nowrap;
      max-width: 120px;
    }


    :host(:not([vertical])) .header:hover,
    :host(:not([vertical])) .header[aria-selected] {
      overflow: visible;
    }

    :host(:not([vertical])) .header:hover .label-text .main,
    :host(:not([vertical])) .header[aria-selected] .label-text .main {
      max-width: fit-content;
    }

    .header[aria-checked] .label-circle {
      background-color: var(--ud-stepper-icon-completed-color, var(--google-blue-500));
    }

    .header[aria-selected] .label-circle {
      background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
    }

    .header[aria-selected] .label-text,
    .header[aria-checked] .label-text {
      color: rgba(0, 0, 0, 0.87);
    }

    .header[aria-selected] .label-text {
      @apply --paper-font-body2;
    }

    .header[aria-invalid] .label-circle {
      background-color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
    }

    .header[aria-invalid] .label-text {
      color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
    }

    .step-number {}

    .header.selected .step-number {
      background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
    }

    :host(:not([animate])) ::slotted(ud-step:not([selected])) {
      display: none;
    }

    /* Vertical Styles */
    :host([vertical]) .header-container {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
    }

    :host([vertical]) [selected] .label {
      background: var(--ud-stepper-header-background, #dedede);
      @apply --paper-font-body2;
      @apply --ud-stepper-header-selected;
    }

    :host([vertical]) .header {
      flex-direction: column;
      justify-content: flex-start;
      overflow: visible;
    }

    :host([vertical]) .header {
      flex-direction: column;
      justify-content: flex-start;
      overflow: visible;
    }

    :host([vertical]) .vertical-step ::slotted(ud-step) {
      flex: 1;
    }

    .vertical-step {
      padding-left: 32px;
      display: flex;
      flex-flow: row;
      align-items: stretch;
    }

    .header:not(:last-of-type) .vertical-step::before {
      content: '';
      display: inline-block;
      position: relative;
      width: 1px;
      left: 6px;
      margin-top: -10px;
      margin-bottom: -16px;
      background-color: rgba(0, 0, 0, 0.3);
    }

    :host([vertical]) .header .label {
      padding: 24px 24px 16px 24px;
    }

    :host([animate]) .vertical-step ::slotted(ud-step) {
      transform: scaleY(0);
      transition: transform 0.26s ease;
    }

    :host([animate]) .vertical-step ::slotted(ud-step[selected]) {
      transform: scaleY(1);
    }

    :host([vertical][animate]) .step-container {
      height: 0px;
    }

    :host([vertical][animate]) [selected] .step-container {
      display: flex;
      height: fit-content;
    }

    :host(:not([animate])) .vertical-step ::slotted(ud-step:not([selected])) {
      display: none;
    }

    :host(:not([animate])) .vertical-step ::slotted(ud-step:not([selected])) {
      display: none;
    }



    vertical-step ::slotted(ud-step:not([selected])) {
      display: none;
    }

    </style>
    <div class="header-container" role="tablist">
      <template is="dom-repeat" items="[[_steps]]" mutable-data>
        <ud-stepper-button class="header selectable" role="tab" aria-checked$="[[item.completed]]" aria-disabled$="[[item.disabled]]" aria-invalid$="[[item.error]]">
          <div class="label">
            <div class="label-circle">
              <template is="dom-if" if="[[item._currentIcon]]">
                <iron-icon icon="[[item._currentIcon]]"></iron-icon>
              </template>
              <template is="dom-if" if="[[!item._currentIcon]]">
                <div class="step-number">[[_getStepNumber(index)]]</div>
              </template>
            </div>
            <div class="label-text">
              <div class="main">[[item.title]]</div>
              <div class="summary">[[item.summary]]</div>
              <template is="dom-if" if="[[item.optional]]">
                <div class="optional">[[item.optionalText]]</div>
              </template>
            </div>
          </div>
          <template is="dom-if" if="[[vertical]]" restamp>
            <div class="vertical-step step-container" visible$="[[item.selected]]">
              <slot name$="slot[[index]]"></slot>
            </div>
          </template>
        </ud-stepper-button>
      </template>
    </div>
    <template is="dom-if" if="[[!vertical]]" restamp>
      <template is="dom-if" if="[[animate]]" restamp>
        <neon-animated-pages id="pageContainer" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
          <slot name="horizontal"></slot>
        </neon-animated-pages>
      </template>
      <template is="dom-if" if="[[!animate]]" restamp>
        <slot name="horizontal"></slot>
      </template>
    </template>
  </template>
  <script>
  {
    /**
     * `ud-stepper`
     * Material Design Stepper
     *
     * ### Styling
     *
     * The following custom properties and mixins are available for styling:
     *
     * Custom Property | Description | Default
     * ----------------------|-------------|--------
     * `--ud-stepper-header-container-style` | Style mixin for the header container | `{}`
     * `--ud-stepper-icon-completed-color` | The icon color of a completed step | `--google-blue-500`
     * `--ud-stepper-icon-error-color` | The icon color of a step with error | `--paper-deep-orange-a700`
     * `--ud-stepper-icon-selected-color` | The icon color of a selected step | `--google-blue-500`
     * `--ud-stepper-icon-circle-size` | size of circle | `30px`
     * `--ud-stepper-icon-icon-size` | size of icon within circle | `18px`
     * `--ud-stepper-container-min-height` | Height applied to #pageContainer | 
     * `--ud-stepper-selected-header-background` | The color of a selected header label  | `--google-grey-300`
     * `--ud-stepper-selected-header` | Style mixin for selected header | `{}`
     *
     * ### Accesibility
     *
     * As the stepper inherits from IronMenubarBehavior, it can be navigated through keyboard. 
     * Role of header is `tablist`, each stepper button has a `tab` role.
     * When a step is completed, `aria-checked` of its corresponding button is set to true. 
     * Steps not accesible have `aria-disabled` set to true. 
     * `aria-invalid` is set to true when a step has an error.
     *
     * @customElement
     * @polymer
     * @memberof UrDeveloper
     * @demo demo/index.html
     */
    class UdStepperElement extends
    Polymer.mixinBehaviors(Polymer.IronMenubarBehavior,
      Polymer.MutableData(
        Polymer.Element)) {

      static get is() {
        return 'ud-stepper';
      }

      static get properties() {
        return {

          /**
           * If true, the stepper becomes vertical.
           */
          vertical: {
            type: Boolean,
            value: false,
            reflectToAttribute: Boolean
          },

          /**
           * If true, the stepper performs animations.
           */
          animate: {
            type: Boolean,
            value: false,
            reflectToAttribute: Boolean
          },

          /**
           * If true, the stepper becomes linear.
           */
          linear: {
            type: Boolean,
            reflectToAttribute: Boolean
          },

          _steps: {
            type: Array
          },

          /**
           * Gets or sets the currently selected step index (zero based).
           **/
          selected: {
            type: String,
            notify: true,
            observer: '_selectionChanged'
          },

          /**
           * Determines if the stepper is compeleted. The stepper is completed when all its non-optional steps are completed.
           **/
          completed: {
            type: Boolean,
            notify: true,
            reflectToAttribute: true,
            computed: '_isCompleted(_steps)'
          },

          /* 
           * `sizing` 
           * Sets a sizing option for the stepper. 
           * Valid values is `contain` (will set the height of the stepper so as to contain the larger ud-step).
           * or ``
           */
          sizing: {
            type: String
          },

          /* 
           * `containerHeight` the height of the container. with anilated steps, should be set or sizing should be 'contain'
           */
          containerHeight: {
            type: Number
          },

          selectable: {
            type: String,
            value: '.header.selectable'
          },

          selectedAttribute: {
            type: String,
            value: 'active'
          },

          // @override prevent listen to arrow binding
          // keyEventTarget: {
          //   type: Object,
          //   value: null
          // }

        };
      }

      static get observers() {
        return [
          '_setSlotNames(_steps, vertical)',
          '_setHeight(sizing, containerHeight, vertical, animate)'
        ];
      }

      connectedCallback() {
        super.connectedCallback();
        this.addEventListener('step-action', evt => this._handleStepAction(evt));
        this.addEventListener('step-error', evt => this.notifyPath('_steps'));
        // this.addEventListener('iron-activate', evt => this._handleStepActivate(evt));

        this._templateObserver = new Polymer.FlattenedNodesObserver(this, info => {
          if (info.addedNodes.filter(this._isStep).length > 0 ||
            info.removedNodes.filter(this._isStep).length > 0) {
            this._steps = this._findSteps();
            this._prepareSteps(this._steps);
            Polymer.RenderStatus.afterNextRender(this, () => {
              this._setHeight(this.sizing, this._maxHeight, this.vertical, this.animate);
              const items = this.shadowRoot.querySelectorAll(this.selectable)
              this._setItems([...items]);
              if (!this.selected) {
                this.selected = 0;
              }
              // Note(cg): without call to _selectionChanges,  selected step is not marked as selected.
              this._selectionChanged(this.selected);
            });

          }
        });
      }

      disconnectedCallback() {
        super.disconnectedCallback();
        this._templateObserver.disconnect();
      }

      // @override menubarbehavior. we do not want to activate menu search 
      _focusWithKeyboardEvent() {
      }

      _findSteps() {
        return Array.from(this.querySelectorAll('ud-step'));
      }

      _prepareSteps(steps) {
        let maxHeight = 0;
        steps.forEach((step, i) => {
          //don't overwrite the step's actions, if they're already set
          if (step.actions) return;
          step.disabled = i !== 0;

          //By default all steps have continue and cancel action
          const actions = [{
            name: 'continue'
          }, {
            name: 'cancel'
          }];
          if (!this.linear) {
            //Disable the back for the first step
            actions.push({
              name: 'back',
              disabled: i === 0
            });

          } else if (step.optional) {
            //In linear stepper, optional step has a skip action
            actions.push({
              name: 'skip'
            });
          }
          step.actions = actions;


          const stepHeight = parseInt(getComputedStyle(step).height);
          if (stepHeight > maxHeight) {
            maxHeight = stepHeight;
          }
        });
        if (this.sizing === 'contain') {
          this.containerHeight = maxHeight;
        }
      }

      /* 
       * `_setHeight` set height of stepper if sizing === 'contain'. 
       * This is now necessary as `ud-steps` are absoluted positionned within neon-animated-page. Hence, stepper cannot be aware of its own size.
       */
      _setHeight(sizing, containerHeight, vertical, animate) {
        // Note(cg): this is only useful for horizontal and animated layout (relying on neon-animated-page).
        const pageContainer = this.shadowRoot.querySelector('#pageContainer');
        if (!pageContainer) { return; }
        if (vertical === true || animate !== true) {
          pageContainer.style.height = null;
          return;
        }

        if (sizing === 'contain' && containerHeight) {
          pageContainer.style.height = containerHeight + 3 + 'px';
        }
      }

      _isStep(node) {
        return node.nodeType === Node.ELEMENT_NODE && /ud-step/i.test(node.localName);
      }

      _getStepNumber(index) {
        return index + 1;
      }

      _handleStepAction(evt) {
        const actionHandler = this[evt.detail.toLowerCase()];
        const path = evt.path || evt.composedPath();
        const step = path.find(node => this._isStep(node));
        if (actionHandler && step) actionHandler.apply(this, [step]);
      }

      _findNextStep(currentStep) {
        if (currentStep == this._steps.length - 1) return currentStep;
        //if it's a linear stepper, find the next not completed or editable step
        if (this.linear) {
          let index = currentStep + 1;
          while (index < this._steps.length - 1) {
            let step = this._steps[index];
            if (step.editable || !step.completed) {
              return index;
            }
            index++;
          }
          return index;
        } else {
          return currentStep + 1;
        }
      }

      /**
       * Go to the next available step
       */
      next() {
        if (!this._steps) return;
        this.continue(this._steps[this.selected]);
      }

      /** @protected */
      continue (step) {
        if (this.linear && step.error) return;
        step.completed = true;
        // Note(cg): reset disabled to true if not editable or alwaysSelectable
        // step was marked as displabled = false on _selectionChanged.
        if (!(step.alwaysSelectable || step.editable)) {
          step.disabled = true;
        }
        this.notifyPath('_steps');
        this.selected = this._findNextStep(this.selected);
      }

      /** @protected */
      back(step) {
        if (this.selected > 0) {
          this.selected = this.selected - 1;
        }
      }

      /** @protected */
      skip(step) {
        this.selected = this._findNextStep(this.selected);
      }

      /** @protected */
      cancel(step) {

      }

      /**
       * Reset the stepper and all its steps to the initial state.
       */
      reset() {
        this.selected = 0;
        this._steps.forEach(s => s._reset());
        this.notifyPath('_steps');
      }

      /**
       * Toggle the orientation between horizontal and vertical
       */
      toggleOrientation() {
        this.vertical = !this.vertical;
      }

      /**
       * Toggle the animation 
       */
      toggleAnimation() {
        this.animate = !this.animate;
      }

      // @overide iron-menutab-behavior
      _activateHandler(e) {
        /*
         * the logic here:
         * User is allowed to select any step if stepper is not linear
         * If stepper is linear: 
         *  - allow user to revisit a completed editable step
         *  - allow user to revist an optional step as long as is not completed
         *  - bypass this logic for `always-selectable`
         */
        const tap = e.composedPath().find(el => el.role === 'tab');
        const index = this.items.indexOf(tap);
        const step = this._steps[index];
        if (step && index > -1) {
          e.stopPropagation();
          // e.preventDefault();
          // console.info('handle', step, step.disabled);
          if (this.linear) {
            // if ((step.completed && step.editable) || (!step.completed && step.optional) || step.alwaysSelectable) {
            if (!step.disabled) {
              this._itemActivate(index, step);
            }
            return;
          }
          this._itemActivate(index, step);
        }
      }

      _setSlotNames(steps, vertical) {
        if (!this._steps) return;
        steps.forEach((step, i) => {
          step.setAttribute('slot', this.vertical ? 'slot' + i : 'horizontal');
        });
      }

      _selectionChanged(selected) {
        if (!this._steps) return;
        this._steps.forEach((step, i) => {
          step.selected = i == selected;
          if (i === selected) {
            step.disabled = false;
            setTimeout(() => {step.setFocus()}, this.animate ? 500 : 0);
          }
        });
      }

      _isCompleted(steps) {
        if (!steps || steps.length === 0) return false;
        //stepper is completed when all non-optional steps are completed.
        return steps.filter(s => s.completed || s.optional).length == steps.length;
      }
    }

    window.customElements.define(UdStepperElement.is, UdStepperElement);

    /**
     * @namespace UrDeveloper
     */
    window.UrDeveloper = window.UrDeveloper || {};
    UrDeveloper.UdStepperElement = UdStepperElement;
  }

  </script>
</dom-module>