SGH / COMPONENTS

<link rel='import' href='../iron-page-url.html'>
<link rel='import' href='../../polymer/polymer.html'>

<script>
  Polymer({
    is: 'default-value',
    properties: {
      val: {
        type: String,
        notify: true,
        value: 'default-value'
      }
    },
  });

  Polymer({
    is: 'on-attached',
    properties: {
      val: {
        type: String,
        notify: true,
        value: 'on-attached-default-value'
      }
    },
    attached: function() {
      if (this.val === 'on-attached-default-value') {
        this.val = 'on-attached';
      }
    }
  });

  Polymer({
    is: 'on-ready',
    properties: {
      val: {
        type: String,
        notify: true,
        value: 'on-ready-default-value'
      }
    },
    ready: function() {
      this.val = 'on-ready';
    }
  });

  Polymer({
    is: 'on-timeout',
    properties: {
      val: {
        type: String,
        notify: true,
        value: 'on-timeout-default-value'
      }
    },
    attached: function() {
      setTimeout(function() {
        this.val = 'on-timeout';
      }.bind(this), 10);
    }
  })
</script>

<dom-module id='default-before'>
  <template>
    <default-value value='{{val}}'></default-value>
    <iron-page-url query='{{val}}'></iron-page-url>

  </template>
  <script>Polymer({is: 'default-before', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='attached-before'>
  <template>
    <on-attached val='{{val}}'></on-attached>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>Polymer({is: 'attached-before', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='ready-before'>
  <template>
    <on-ready val='{{val}}'></on-ready>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>Polymer({is: 'ready-before', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='timeout-before'>
  <template>
    <on-timeout val='{{val}}'></on-timeout>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>Polymer({is: 'timeout-before', properties: {val: {type: String}}});</script>
</dom-module>


<dom-module id='default-after'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
    <default-value value='{{val}}'></default-value>
  </template>
  <script>Polymer({is: 'default-after', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='attached-after'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
    <on-attached val='{{val}}'></on-attached>
  </template>
  <script>Polymer({is: 'attached-after', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='ready-after'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
    <on-ready val='{{val}}'></on-ready>
  </template>
  <script>Polymer({is: 'ready-after', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='timeout-after'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
    <on-timeout val='{{val}}'></on-timeout>
  </template>
  <script>Polymer({is: 'timeout-after', properties: {val: {type: String}}});</script>
</dom-module>


<dom-module id='default-below'>
  <template>
    <iron-page-url query='{{val}}'>
      <default-value value='{{val}}'></default-value>
    </iron-page-url>
  </template>
  <script>Polymer({is: 'default-below', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='attached-below'>
  <template>
    <iron-page-url query='{{val}}'>
      <on-attached val='{{val}}'></on-attached>
    </iron-page-url>
  </template>
  <script>Polymer({is: 'attached-below', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='ready-below'>
  <template>
    <iron-page-url query='{{val}}'>
      <on-ready val='{{val}}'></on-ready>
    </iron-page-url>
  </template>
  <script>Polymer({is: 'ready-below', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='timeout-below'>
  <template>
    <iron-page-url query='{{val}}'>
      <on-timeout val='{{val}}'></on-timeout>
    </iron-page-url>
  </template>
  <script>Polymer({is: 'timeout-below', properties: {val: {type: String}}});</script>
</dom-module>


<dom-module id='default-above'>
  <template>
    <default-value value='{{val}}'>
      <iron-page-url query='{{val}}'></iron-page-url>
    </default-value>
  </template>
  <script>Polymer({is: 'default-above', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='attached-above'>
  <template>
    <on-attached val='{{val}}'>
      <iron-page-url query='{{val}}'>
      </iron-page-url>
    </on-attached>
  </template>
  <script>Polymer({is: 'attached-above', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='ready-above'>
  <template>
    <on-ready val='{{val}}'>
      <iron-page-url query='{{val}}'>
      </iron-page-url>
    </on-ready>
  </template>
  <script>Polymer({is: 'ready-above', properties: {val: {type: String}}});</script>
</dom-module>

<dom-module id='timeout-above'>
  <template>
    <on-timeout val='{{val}}'>
      <iron-page-url query='{{val}}'></iron-page-url>
    </on-timeout>
  </template>
  <script>Polymer({is: 'timeout-above', properties: {val: {type: String}}});</script>
</dom-module>


<dom-module id='default-container'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>
    Polymer({
      is: 'default-container',
      properties: {val: {type: String, value: 'default-container-val'}}
    });
  </script>
</dom-module>

<dom-module id='attached-container'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>
    Polymer({
      is: 'attached-container',
      properties: {val: {type: String, value: 'container-attached-default-val'}},
      attached: function() {
        if (this.val === 'container-attached-default-val') {
          this.val = 'attached-container-val';
        }
      }
    });
  </script>
</dom-module>

<dom-module id='ready-container'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>
    Polymer({
      is: 'ready-container', properties: {val: {type: String}},
      ready: function() {
        this.val = 'ready-container-val';
      }
    });
  </script>
</dom-module>

<dom-module id='timeout-container'>
  <template>
    <iron-page-url query='{{val}}'></iron-page-url>
  </template>
  <script>Polymer({
    is: 'timeout-container',
    properties: {
      val: {type: String}
    },
    attached: function() {
      setTimeout(function() {
        this.val = 'on-timeout';
      }.bind(this), 10);
    }
  });</script>
</dom-module>