exon-item.html

<link rel="import" href="exon-graphic.html">
<link rel="import" href="coding-exon-text.html">
<link rel="import" href="external-scripts.html">

<!--
`exon-item`
Exon item demo

@demo demo/exon-item-demo.html
-->
<dom-module id="exon-item">
    <template>
        <style>
            :host{
                display:flex;
            }

            #coding-exon-text {
                padding-top: 1px;
                padding-left: 6px;
            }
        </style>
        <template is="dom-if" if="[[data]]">
            <exon-graphic data="[[data]]" exon-width="[[exonWidth]]"></exon-graphic>
            <template is="dom-if" if="[[data.firstAminoAcid]]">
                <coding-exon-text id="coding-exon-text" data="[[data]]"></coding-exon-text>
            </template>
        </template>
    </template>
    <script>
        Polymer({
            is: 'exon-item',
            properties: {
                data: {
                    type: Object
                }
            }
        });
    </script>
</dom-module>