plain-picker.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="./src/pp-nav.html">
<link rel="import" href="./src/pp-month.html">
<link rel="import" href="./src/pp-default-locale.html">
<link rel="import" href="./src/pp-week-header.html">
<link rel="import" href="./src/pp-date-transformer.html">
<!--
    `plain-picker`

    @demo demo/index.html
-->

<dom-module id="plain-picker">
    <template>
        <style>
            :host {
                display: block;
                padding: 1.428em; /* 20 px on 14px font size */
            }

            pp-week-header {
                margin: 0.3em 0;
                border-color: var(--plain-picker-base-color, black);
                border-width: 1px 0;
                border-style: solid;
            }
        </style>
        <!-- begin:data --> 
        <pp-date-transformer date="{{_date}}"
                             json="{{date}}"></pp-date-transformer>
        <pp-date-transformer date="{{_minDate}}"
                             json="{{minDate}}"></pp-date-transformer>
        <pp-date-transformer date="{{_maxDate}}" 
                             json="{{maxDate}}"></pp-date-transformer>
        <pp-default-locale id="default-locale" value="{{_defaultLocale}}"></pp-default-locale>
        <!-- end: data -->

        <!-- begin: ui -->
        <pp-nav year="{{_year}}"
                month="{{_month}}"
                date="[[_date]]"
                locale="[[_locale]]"
                min-date="[[_minDate]]"
                max-date="[[_maxDate]]"></pp-nav>
        <pp-week-header locale="[[_locale]]"
                        day-format="single"></pp-week-header>
        <pp-month active-date="{{_date}}"
                  year="[[_year]]"
                  month="[[_month]]"
                  locale="[[_locale]]"
                  min-date="[[_minDate]]"
                  max-date="[[_maxDate]]"></pp-month>
        <!-- end: ui -->
    </template>

    <script>
        Polymer({
            is: 'plain-picker',
            properties: {
                date: {
                    type: String,
                    notify: true,
                    value: () => (new Date()).toJSON()
                },
                locale: {
                    type: Object,
                    value: () => ({})
                },
                minDate: {
                    type: Object,
                    value: null
                },
                maxDate: {
                    type: Object,
                    value: null
                },
                _locale: {
                    type: Object,
                    computed: '_localeWithDefaults(locale.*, _defaultLocale)'
                },
                _year: Number,
                _month: Number,
                _defaultLocale: Object,
                _date: Object,
                _minDate: Object,
                _maxDate: Object
            },

            _localeWithDefaults (localeMutations, defaultLocale) {
                const locale = localeMutations.base;
                return Object.assign({}, defaultLocale, locale);
            }
        });
    </script>
</dom-module>