designer

designer.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">
<link rel="import" href="../yodlee-component/yodlee-transactions-card.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="../speech-mic/speech-mic.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #yodlee_data_list {
        width: 400px;
        height: 500px;
        left: 30px;
        top: 20px;
        position: absolute;
      }
      #yodlee_data_collection {
        left: 940px;
        top: 500px;
        position: absolute;
      }
      #yodlee_data_list1 {
        width: 400px;
        height: 500px;
        left: 550px;
        top: 80px;
        position: absolute;
      }
      #yodlee_data_collection1 {
        left: 980px;
        top: 450px;
        position: absolute;
      }
      #yodlee_text_field {
        width: 200px;
        left: 470px;
        top: 20px;
        position: absolute;
      }
      #core_icon {
        height: 24px;
        width: 24px;
      }
    </style>
    <yodlee-data-list data="{{ $.yodlee_data_collection.response }}" id="yodlee_data_list" selectedmodel='{"id":"1","name":"ING Bank","balance":"$20000.00","lastUpdate":"2 mins ago","type":"Savings","icon":"banks/ing-2-logo-primary.jpg","masked":"xxxx-5556","siteName":"Dag Site - Insurance"}'>
      <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-data-collection api="accountsummary" query="{{ $.core_input.value }}" id="yodlee_data_collection"></yodlee-data-collection>
    <yodlee-data-list data="{{ $.yodlee_data_collection1.response }}" id="yodlee_data_list1">
      <yodlee-transactions-card query="max-width: 400px" id="yodlee_transactions_card" class="card {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}} {{ {debit: type == 'Debit', credit: type == 'Credit'} | tokenList}}">
        <h2 id="h21">{{description}}</h2>
        <h3 id="h31">{{category}}</h3>
        <a id="a1">{{accountName}}</a>
        <h4 id="h4">{{accountNumber}}</h4>
        <p id="p1">{{amount}}</p>
        <span id="span1">{{postDate}}</span>
        <h5 id="h5">{{type}}</h5>
      </yodlee-transactions-card>
    </yodlee-data-list>
    <yodlee-data-collection api="transactions" fetchid="{{ $.yodlee_data_list.selectedModel.id }}" query="6" id="yodlee_data_collection1"></yodlee-data-collection>
    <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" value="{{ $.speech_mic.transcript }}" id="core_input" flex></core-input>
      <speech-mic id="speech_mic"></speech-mic>
    </yodlee-text-field>
  </template>

  <script>

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

  </script>

</polymer-element>