<commit_before><!--
Usage:



@element futu-process-arrow
@status beta
-->
<polymer-element name="futu-process-arrow" attributes="selected">
  <template>
    <style>
      :host {
        display: block;
      }

      #container {
        height: 100%;
      }

      .stage-element {
        position: relative;
        margin: 0 2px 0 0;
        padding: 0 0.8em;
        font-size: 0.7em;
      }

      .stage-element p {
        position: relative;
        z-index: 1;
        margin: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: currentColor;
      }

      .stage-element[highlighted] p {
        color: #fff;
      }

      .stage-element::before, .stage-element::after {
        content: "";
        display: block;
        position: absolute;
        height: 50%;
        width: 100%;
        background-color: rgba(0,0,0,0.1);
        left: 0;
      }

      .stage-element::before {
        top: 0;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        transform: skew(30deg);
      }

      .stage-element::after {
        bottom: 0;
        -webkit-transform: skew(-30deg);
        -moz-transform: skew(-30deg);
        transform: skew(-30deg);
      }

      .stage-element[highlighted]::before, .stage-element[highlighted]::after {
        background-color: currentColor;
      }

      .stage-element:last-child {
        margin-right: 0;
      }

      .stage-element core-tooltip {
        max-width: 100%;
      }

      core-select {
        display: none;
      }

    </style>
    <div id="container" layout horizontal>
      <template repeat="{{stage in stages}}">
          <div
            class="stage-element" flex layout horizontal center
            highlighted?="{{ activeStages[stage] }}"
            title="{{ stage }}">
            <p>{{ stage }}</p>
          </div>
      </template>

      <core-select id="stages" selected="{{ selected }}">
        <content select="*"></content>
      </core-select>
    </div>
  </template>
  <script>
    Polymer('futu-process-arrow', {
      created: function(){
        this.stages = [];
      },<commit_msg>Use a simple div instead of core-select for now<commit_after><!--
Usage:



@element futu-process-arrow
@status beta
-->
<polymer-element name="futu-process-arrow" attributes="selected">
  <template>
    <style>
      :host {
        display: block;
      }

      #container {
        height: 100%;
      }

      .stage-element {
        position: relative;
        margin: 0 2px 0 0;
        padding: 0 0.8em;
        font-size: 0.7em;
      }

      .stage-element p {
        position: relative;
        z-index: 1;
        margin: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: currentColor;
      }

      .stage-element[highlighted] p {
        color: #fff;
      }

      .stage-element::before, .stage-element::after {
        content: "";
        display: block;
        position: absolute;
        height: 50%;
        width: 100%;
        background-color: rgba(0,0,0,0.1);
        left: 0;
      }

      .stage-element::before {
        top: 0;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        transform: skew(30deg);
      }

      .stage-element::after {
        bottom: 0;
        -webkit-transform: skew(-30deg);
        -moz-transform: skew(-30deg);
        transform: skew(-30deg);
      }

      .stage-element[highlighted]::before, .stage-element[highlighted]::after {
        background-color: currentColor;
      }

      .stage-element:last-child {
        margin-right: 0;
      }

      .stage-element core-tooltip {
        max-width: 100%;
      }

      #stages {
        display: none;
      }

    </style>
    <div id="container" layout horizontal>
      <template repeat="{{stage in stages}}">
          <div
            class="stage-element" flex layout horizontal center
            highlighted?="{{ activeStages[stage] }}"
            title="{{ stage }}">
            <p>{{ stage }}</p>
          </div>
      </template>

      <div id="stages" selected="{{ selected }}">
        <content select="*"></content>
      </div>
    </div>
  </template>
  <script>
    Polymer('futu-process-arrow', {
      created: function(){
        this.stages = [];
      },
{'fraction_non_alphanumeric': 0.14671201814058957, 'fraction_numerical': 0.020861678004535148, 'mean_word_length': 1.687995124923827, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3183609', 'n_tokens_mistral': 1439, 'n_tokens_neox': 1314, 'n_words': 282}