component-page.html

<link rel="import" href="../component-list/component-list.html">
<link rel="import" href="../component-adder/component-adder.html">
<link rel="import" href="../polymerfire/firebase-document.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../bower-installer/bower-installer.html">

<dom-module id="component-page">
    <template>
        <style>
            :host {
                @apply(--layout-fullbleed);
                display: none;
                background: white;
            }
            :host([active]){
                display: block;
                @apply(--layout-horizontal);
                @apply(--layout-vertical);
            }
            component-list {
                margin-top: 50px;
                --component-list--height: auto;
            }
            component-adder {
                position: fixed;
                bottom: 50px;
                right: 50px;
            }
            bower-installer {
                position: fixed;
                bottom: 50px;
                right: 120px;
            }
        </style>
        <firebase-document
            id="doc"
            path="/components"
            data="{{components}}">
        </firebase-document>


        <component-list components="[[components]]" showcomponentinfo="true"></component-list>
        <component-adder next-index="[[components.length]]"></component-adder>
        <bower-installer components="[[components]]"></bower-installer>
    </template>
    <script>
        Polymer({
            is: 'component-page',

            properties: {
                components: {
                    type: Array,
                    notify: true
                }
            }
        });
    </script>
</dom-module>