rg-select-input.html

<link rel='import' href='../../../bower_components/polymer/polymer.html'>
<link rel='import' href="../../../bower_components/iron-icons/iron-icons.html">
<link rel='import' href="../../../bower_components/iron-validatable-behavior/iron-validatable-behavior.html">
<link rel='import' href="../../../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
<link rel='import' href="../../../bower_components/paper-ripple/paper-ripple.html">

<!--
    Custom Polymer element.
    Element mimics material design UI of the Polymer iron-input.
    Element is validatable, read only and has flexible width (width would be determined by selected item).
    Used as a trigger for rg-select dropdown.
-->
 
<dom-module id='rg-select-input'>
    <style include="shared-styles">
        :host {
            top: 23px;
            margin-top: -23px;
            position: relative;
            display: inline-block;
            font-family: 'Roboto', 'Noto', sans-serif;
            font-size: 16px;
            padding: 8px 0;
            cursor: pointer;
        }

        :host iron-icon {
            float: right;
            color: var(--disabled-text-color, --paper-input-container-color);
            margin: -3px -3px 0 -3px;
        }

        :host .label {
            color: var(--paper-input-container-color, --secondary-text-color);
            font-size: 12px;
            display: inline-block;
            position: relative;
            top: -1px;
        }

        :host .disabled {
            color: var(--paper-input-container-color, --secondary-text-color);
        }

        :host .error {
            color: var(--error-color);
            font-size: 12px;
            display: inline-block;
            top: -2px;
            position: relative;
        }

        :host .content {
            border-bottom: 1px solid var(--paper-input-container-color, --secondary-text-color);
            padding-bottom: 2px;
        }

        :host .invalid-content {
            border-bottom: 2px solid var(--error-color);
            padding-bottom: 1px;
        }

        :host .ripple-container {
            position: relative;
        }
    </style>

    <template>

        <div class="ripple-container">
            <paper-ripple></paper-ripple>
            <div class="label">
                <span hidden$="[[!_isSet(value)]]">[[label]]</span>
            </div>
            <div class$="content [[_contentClass(invalid)]]">
                <span class$="[[_showValueClass(value)]]">[[_showValue(value, label)]]</span>
                <iron-icon icon="arrow-drop-down"></iron-icon>
            </div>
        </div>
        <div class="error">
            <span hidden$="[[!invalid]]">[[errorMessage]]</span>
        </div>

    </template>

    <script>
        (function() {
            'use strict';

            Polymer({
                is: 'rg-select-input',

                behaviors: [
                    Polymer.IronFormElementBehavior,
                    Polymer.IronValidatableBehavior
                ],

                properties: {
                    // optional validator function wrapped in an Object: {validate: (val)=>{}}
                    validator: Object,
                    label: {
                        type: String,
                        value: ''
                    },
                    value: {
                        type: String,
                        value: ''
                    },
                    name: String,
                    required: Boolean,
                    errorMessage: String,
                },

                _isSet(value) {
                    return Util.hasText(value);
                },

                _showValue(value, label) {
                    return Util.hasText(value) ? value : label;
                },

                _showValueClass(value) {
                    return Util.hasText(value) ? '' : 'disabled';
                },

                _contentClass(invalid) {
                    return invalid ? 'invalid-content' : '';
                },

                // custom validation function (do not override validate()!! use _getValidity() instead)
                _getValidity() {
                    if (Util.exists(this.validator)) {
                        return this.validator.validate(this.value);
                    } else {
                        return Util.hasText(this.value);
                    }
                }

            });

        })();
    </script>
</dom-module>