designer

designer.html

<link rel="import" href="../yodlee-component/yodlee-vertical-container.html">
<link rel="import" href="../yodlee-component/yodlee-toolbar.html">
<link rel="import" href="../yodlee-component/yodlee-text-field/yodlee-text-field.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../yodlee-component/speech-mic/speech-mic.html">
<link rel="import" href="../yodlee-component/yodlee-data-list.html">
<link rel="import" href="../yodlee-component/yodlee-account-summary-card.html">
<link rel="import" href="../yodlee-component/yodlee-data-collection.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #yodlee_vertical_container {
        position: absolute;
        width: 400px;
        height: 500px;
        left: 160px;
        top: 110px;
      }
      #yodlee_data_list {
        width: 400px;
        height: 500px;
      }
      #yodlee_data_collection {
        left: 560px;
        top: 370px;
        position: absolute;
      }
      #yodlee_text_field {
        width: 200px;
      }
      #core_icon {
        height: 24px;
        width: 24px;
      }
    </style>
    <yodlee-vertical-container id="yodlee_vertical_container" layout vertical>
      <yodlee-toolbar titletext="Title" toolbaricon="menu" backgroundcolor="#2A94D6" textcolor="#ffffff" id="yodlee_toolbar">
        <yodlee-text-field id="yodlee_text_field" icon="search" center horizontal layout>
          <core-icon icon="search" id="core_icon"></core-icon>
          <core-input placeholder="Search" inputvalue=" citibank" value="{{ $.speech_mic.transcript }}" id="core_input" flex></core-input>
          <speech-mic transcript=" citibank" completetranscript="bank of america hdfc citibank" id="speech_mic"></speech-mic>
        </yodlee-text-field>
      </yodlee-toolbar>
      <yodlee-data-list data="{{ $.yodlee_data_collection.response }}" id="yodlee_data_list">
        <yodlee-account-summary-card query="max-width: 400px" id="yodlee_account_summary_card" class="card">
          <h2 id="h2">{{name}}</h2>
          <a id="a">{{type}}</a>
          <p id="p">{{masked}}</p>
          <h3 id="h3">{{balance}}</h3>
          <img id="img" src="../yodlee-component/images/{{icon}}">{{icon}}</img>
          <span id="span">{{lastUpdate}}</span>
        </yodlee-account-summary-card>
      </yodlee-data-list>
    </yodlee-vertical-container>
    <yodlee-data-collection api="accountsummary" query="{{ $.core_input.value }}" id="yodlee_data_collection"></yodlee-data-collection>
  </template>

  <script>

    Polymer('my-element', {
      
    });

  </script>

</polymer-element>