paper-input-wrapper.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<dom-module id="paper-input-wrapper">
  <template id="style">
    <style>
    :host {
      display: block;
      @apply --paper-input-wrapper;
    
      --paper-input-container-underline: {
         display: none;
        }
       --paper-input-container-underline-focus: {
        display: none;
      }
    }

    :host.layout.horizontal .content-container {
      @apply --layout-horizontal;
    }

    :host.layout.vertical .content-container {
      @apply --layout-vertical;
    }

    :host.layout paper-input-container {
      @apply --layout-flex-auto;
    }

    .placeholder {
      color: var(--paper-input-placeholder-color, var(--secondary-text-color));
      font-size: var(--paper-input-wrapper-placehoder-size, 13px);
    }

    paper-input-container {

      --paper-input-prefix: {
        max-width: 90px;
        margin-right: 5px;
        line-height: 15px;
        font-size: 13px;
      }

      --paper-input-suffix: {
        max-width: 90px;
        margin-left: 5px;
        font-size: 13px;
        line-height: 15px;
      }
    }

    ::slotted(paper-input-matrix) {
      margin-top: 20px;
    }
    </style>
  </template>
  <template id="content">
    <template is="dom-if" if="[[placeholder]]">
      <div slot="input" class="placeholder">
        [[placeholder]]
      </div>
    </template>
    <div slot="input" id$="[[_inputId]]" class="paper-input-input content-container">
      <slot></slot>
    </div>
  </template>
  <script>
  (function() {

    let subTemplate;

    customElements.whenDefined('paper-input').then(() => {
      const PaperInput = customElements.get('paper-input');

      /**
       * ## PaperInputWrapper
       *
       * `<paper-input-wrapper>` extends paper-input to be able to wrap form elements without labels 
       * (e.g. radio-group) and provide them with label/placeholder.
       *
       * @memberof PolymerEl
       * @customElement
       * @polymer
       * @demo
       **/
      class PaperInputWrapper extends PaperInput {

        static get is() { return 'paper-input-wrapper'; }

        // Note(cg): this is a temp ugly hack as cannot override 
        // hostAttributes applied while constructing PaperInput Class.
        _ensureAttributes() {
          super._ensureAttributes();
          this.removeAttribute('tabindex');
        }

        static get properties() {
          return {

            /**
             * Set to true to always float the label. If you're using PaperInputBehavior
             * to implement your own paper-input-like element, bind this to the
             * `<paper-input-container>`'s `alwaysFloatLabel` property.
             */
            alwaysFloatLabel: { type: Boolean, value: true },
          };
        }


        static get template() {
          if (!subTemplate) {

            subTemplate = PaperInput.template.cloneNode(true);

            const tplContent = Polymer.DomModule.import('paper-input-wrapper', 'template#content').content;
            const tplStyle = Polymer.DomModule.import('paper-input-wrapper', 'template#style').content;
            const anchor = subTemplate.content.querySelector('#container');

            subTemplate.content.querySelector('style').parentNode.appendChild(tplStyle);

            anchor.replaceChild(tplContent, anchor.querySelector('iron-input') || anchor.querySelector('input'));
          }
          return subTemplate;
        }

        // Note(cg): overriding this function is creating an error for element that do not have an `input` id.
        _onIronInputReady() {

          // Even though this is only used in the next line, save this for
          // backwards compatibility, since the native input had this ID until 2.0.5.
          if (!this.$.nativeInput) {
            this.$.nativeInput = this.$$('input');
          }
          if (this.inputElement && this.$.nativeInput &&
            this._typesThatHaveText.indexOf(this.$.nativeInput.type) !== -1) {
            this.alwaysFloatLabel = true;
          }

          // Only validate when attached if the input already has a value.
          if (!!this.inputElement.bindValue) {
            this.$.container._handleValueAndAutoValidate(this.inputElement);
          }
        }
      }

      customElements.define(PaperInputWrapper.is, PaperInputWrapper);

      if (!window.PolymerEl) {
        window.PolymerEl = {};
      }

      /* 
       * @namespace MultiChart
       */
      window.PolymerEl.PaperInputWrapper = PaperInputWrapper;
    });
  })();
  </script>
</dom-module>