ct/res/imp/expanding-textarea-sk.html

<!--
  The <expanding-textarea-sk> custom element declaration. Displays a clickable
  text link that expands a textarea. The value of the textarea is accessible by
  callers via the value attribute.

  Attributes:
    value: Contains the text entered into the textarea.
    displayText: The clickable text that will open/close the textarea.
    placeholderText: Is used as a placeholder in the textarea.

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="expanding-textarea-sk">
  <style>
    paper-input {
      width: 20em;
    }

    .long-field {
      width: 40em;
    }
  </style>
  <template>
    <a href="javascript:void(0);" id="expander">
      <iron-icon icon="{{expanderIcon(opened)}}"></iron-icon>
      {{displayText}}
    </a>
    <span class="long-field">
      <iron-collapse id="collapser" opened="{{opened}}">
        <iron-autogrow-textarea class="long-field" rows=5 max-rows=20 bind-value="{{value}}" placeholder="{{placeholderText}}">
        </iron-autogrow-textarea>
      </iron-collapse>
    </span>
  </template>
  <script>
    Polymer({
      is: "expanding-textarea-sk",
      properties: {
        opened: {
          type: Boolean,
          value: false,
        },
        value: {
          type: String,
          notify: true,
        },
        displayText: {
          type: String,
          value: "Expand/Collapse textarea",
        },
        placeholderText: {
          type: String,
          value: "",
        },
      },

      ready: function() {
        var that = this;
        this.$.expander.addEventListener('click', function(e) {
          that.$.collapser.toggle();
        });
      },

      expanderIcon: function(opened) {
        if (opened) {
          return "expand-less";
        } else {
          return "expand-more";
        }
      },
    });
  </script>

</dom-module>