at-carbon-stepper.html

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

<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../iron-selector/iron-selector.html">

<link rel="import" href="../at-core-style-classes/at-core-style-classes.html" />
<link rel="import" href="../at-carbon-icon/at-carbon-icon.html">

<link rel="import" href="../at-core-resize-sensor/at-core-resize-sensor.html">

<link rel="import" href="at-carbon-stepper-step.html">

<dom-module id="at-carbon-stepper">
  <template>
    <style include="at-core-style-classes">
      :host {
        display: block;
        box-sizing: border-box;       
        font-size: 14px;
        font-weight: 500;
      }

      .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .clear-float {
        clear: both;
      }

      .content-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      #tabsContainer {
        position: relative;
        height: 100%;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
      }

      #tabsContent {
        position: relative;
        height: 100%;
      }

     #tabsContent.scrollable {
       position: absolute;
     }

      [hidden] * {
        display: none !important;
      }
    </style>

    <div class="wrapper">
      <div class="layout-vertical">
        <slot></slot>
      </div>
    </div>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'at-carbon-stepper',

    properties: {

      /**
       * Gets or sets the selected element. The default is to use the index of the item.
       *
       * @attribute selected
       * @type {string}
       */
      selected: {
        type: String,
        notify: true,
        observer: 'selectedChanged'
      },

      attrForSelected: {
        type: String,
        value: 'id'
      },

      tabs: {
        type: Array,
        value: function() {
          return [];
        },
        schema: {
          items: {
            type: "object",
            properties: {
              heading: {
                type: String,
                value: ''
              },
              circleNumber: {
                type: String,
                value: ''
              },

              forStepper: {
                type: String,
                value: ''
              },

              dataName: {
                type: String,
                value: ''
              },

              stepper: {
                type: Object,
                value: null
              },
            }
          }
        },
        layout: "vertical",
        title: "Steps",
        xgridcols: "12"
      },

    },

    /**
     * This function switches the current step to the step with id
     */
    selectedChanged: function(newValue, oldValue) {
      var self = this;

      this.fire('tab-changed', {
        value: {
          currentTab: newValue,
          previousTab: oldValue
        }
      });

      // get parent container which contains at-carbon-stepper-heading elements
      var parentContainer = Polymer.dom(self).parentNode;

      // get headings from parentContainer
      var headings = Polymer.dom(parentContainer).querySelectorAll('at-carbon-stepper-heading');

      // Change currently active stepper heading. This changes circle color.
      if (headings) {
        headings.forEach(function (heading, index) {
          if (heading.dataName == self.selected) {
            heading.isActive = true;
          } else {
            heading.isActive = false;
          }
        })
      }

    },
  });
</script>