paper-horizontal-step.html

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/editor-icons.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="paper-step-behavior.html">
<link rel="import" href="paper-step-shared-styles.html">

<!--
@element paper-horizontal-step
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-horizontal-step">
  <template>
    <style include="paper-step-shared-styles">
      :host {
        @apply(--layout-flex);
        overflow: hidden;
      }
      :host(:hover) {
        overflow: visible;
      }
      #textWrapper {
        @apply(--layout-vertical);
        padding-right: 8px;
        overflow: hidden;
      }
      #textLabel, #optional {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      #badge {
        margin: 0 8px;
      }
      #badgeWrapper, #textWrapper {
        /* to be above paper-ripple*/
        z-index: 1;
      }
      :host(:not([alternative-label])) #label {
        @apply(--layout-horizontal);
        @apply(--layout-center);
        height: 72px;
      }
      :host(.firstStep:not([alternative-label])) #badge {
        margin-left: 24px;
      }
      :host(.lastStep:not([alternative-label])) #textWrapper {
        padding-right: 24px;
      }
      :host(:not([alternative-label]):not(.firstStep)) #label::before, 
      :host(:not([alternative-label]):not(.lastStep)) #label::after,
      :host([alternative-label]) #badgeWrapper::before,
      :host([alternative-label]) #badgeWrapper::after  {
        height: 1px;
        min-width: 16px;
        background: var(--divider-color, --paper-grey-300);
        @apply(--layout-flex);
        content: '';
      }
      :host([alternative-label].firstStep) #badgeWrapper::before,
      :host([alternative-label].lastStep) #badgeWrapper::after {
        visibility: hidden;
      }
      :host([alternative-label]) {
        @apply(--layout);
      }
      :host([alternative-label]) #textWrapper{
        padding: 0 16px;
        @apply(--layout-vertical);
        @apply(--layout-center);
      }
      :host([alternative-label]) #textLabel, :host([alternative-label]) #optional{
        text-align: center;
        @apply(--layout-self-stretch);
      }
      :host([alternative-label]) #label{
        @apply(--layout-vertical);
        @apply(--layout-self-stretch);
        padding: 24px 0;
        width: 100%;
      }
      :host([alternative-label]) #badgeWrapper {
        @apply(--layout-horizontal);
        @apply(--layout-center);
        padding-bottom: 16px;
      }
    </style>
    <div id="label" on-tap="_stepLabelTapped">
      <paper-ripple></paper-ripple>
      <div id="badgeWrapper">
        <div id="badge">
          <iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
          <span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
        </div>
      </div>
      <div id="textWrapper">
        <span id="textLabel">[[label]]</span>
        <template is="dom-if" if="[[optional]]">
          <span id="optional">Optional</span>
        </template>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'paper-horizontal-step',

      behaviors: [
        Zecat.PaperStepBehavior
      ],

      listeners: {
        'tap': '_stepLabelTapped'
      },

      properties: {
        alternativeLabel: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        }
      }
    });
  </script>
</dom-module>