key-pad.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-icons/maps-icons.html">

<link rel="import" href="key-pad-key.html">

<link rel="import" href="key-pad-styles.html">
<!--
`key-pad`
A custom UI keypad

@demo demo/index.html 
-->
<dom-module id="key-pad">
    <style include="key-pad-styles key-pad-animations"></style>
    <template>
        <section class="key-pad__wrapper">

            <div class="key-pad__headerTitle"></div>

            <header class="key-pad__containerPoints">
                <div class="key-pad__points">
                    <template is="dom-repeat" items="[[ _getInputLength(maxLength) ]]">
                        <div class$="[[ _computeClassKeypadPoint(index) ]]"></div>
                    </template>

                    <!-- <div class="key-pad__point key-pad__point--selected key-pad__point--1"></div> -->
                </div>
                <div class="key-pad__reset"
                     on-tap="_onTapReset">
                    <iron-icon icon="icons:close"></iron-icon>
                </div>
            </header>

            <div class="key-pad__keyNums">
                <template is="dom-repeat" items="[[ _keypadNums ]]" as="keyNum">
                    <key-pad-key key="[[ keyNum ]]"></key-pad-key>
                </template>
                <key-pad-key key="Intro" label="OK"></key-pad-key>
            </div>
        </section>
    </template>
    <script src="key-pad.js"></script>
</dom-module>