polymer-paper-elements-rails 0.0.1

data/app/assets/components/iron-autogrow-textarea/hero.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<path d="M140,47c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+		c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+		c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+		s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+		c1.3,1.9,2.5,3.6,4.5,3.6V47z"/>
+	<path d="M140,65c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+		c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+		c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+		s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+		c1.3,1.9,2.5,3.6,4.5,3.6V65z"/>
+	<path d="M140,83c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+		c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+		c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+		s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+		c1.3,1.9,2.5,3.6,4.5,3.6V83z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+	<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/iron-autogrow-textarea/iron-autogrow-textarea.html

@@ -0,0 +1,263 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
+
+<!--
+`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
+lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
+never scroll.
+
+Example:
+
+    <iron-autogrow-textarea id="a1">
+      <textarea id="t1"></textarea>
+    </iron-autogrow-textarea>
+
+Because the `textarea`'s `value` property is not observable, you should use
+this element's `bind-value` instead for imperative updates.
+
+@group Iron Elements
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="iron-autogrow-textarea">
+
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      width: 400px;
+      border: 1px solid;
+      padding: 2px;
+      -moz-appearance: textarea;
+      -webkit-appearance: textarea;
+    }
+
+    .mirror-text {
+      visibility: hidden;
+      word-wrap: break-word;
+    }
+
+    textarea {
+      position: relative;
+      outline: none;
+      border: none;
+      resize: none;
+      background: inherit;
+      /* see comments in template */
+      width: 100%;
+      height: 100%;
+      font-size: inherit;
+      font-family: inherit;
+    }
+
+    ::content textarea:invalid {
+      box-shadow: none;
+    }
+
+  </style>
+  <template>
+    <!-- the mirror sizes the input/textarea so it grows with typing -->
+    <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+
+    <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
+    <div class="textarea-container fit">
+      <textarea id="textarea"
+        autocomplete$="[[autocomplete]]"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        name$="[[name]]"
+        placeholder$="[[placeholder]]"
+        readonly$="[[readonly]]"
+        required$="[[required]]"
+        rows$="[[rows]]"
+        maxlength$="[[maxlength]]"></textarea>
+    </div>
+  </template>
+
+<script>
+
+  Polymer({
+
+    is: 'iron-autogrow-textarea',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    properties: {
+
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+
+      /**
+       * The initial number of rows.
+       *
+       * @attribute rows
+       * @type number
+       * @default 1
+       */
+      rows: {
+        type: Number,
+        value: 1,
+        observer: '_updateCached'
+      },
+
+      /**
+       * The maximum number of rows this element can grow to until it
+       * scrolls. 0 means no maximum.
+       *
+       * @attribute maxRows
+       * @type number
+       * @default 0
+       */
+      maxRows: {
+       type: Number,
+       value: 0,
+       observer: '_updateCached'
+      },
+
+      /**
+       * Bound to the textarea's `autocomplete` attribute.
+       */
+      autocomplete: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bound to the textarea's `autofocus` attribute.
+       */
+      autofocus: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bound to the textarea's `inputmode` attribute.
+       */
+      inputmode: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `name` attribute.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `placeholder` attribute.
+       */
+      placeholder: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `readonly` attribute.
+       */
+      readonly: {
+        type: String
+      },
+
+      /**
+       * Set to true to mark the textarea as required.
+       */
+      required: {
+        type: Boolean
+      },
+
+      /**
+       * The maximum length of the input value.
+       */
+      maxlength: {
+        type: Number
+      }
+
+    },
+
+    listeners: {
+      'input': '_onInput'
+    },
+
+    /**
+     * Returns the underlying textarea.
+     */
+    get textarea() {
+      return this.$.textarea;
+    },
+
+    _update: function() {
+      this.$.mirror.innerHTML = this._valueForMirror();
+
+      var textarea = this.textarea;
+      // If the value of the textarea was updated imperatively, then we
+      // need to manually update bindValue as well.
+      if (textarea && this.bindValue != textarea.value) {
+        this.bindValue = textarea.value;
+      }
+    },
+
+    _bindValueChanged: function() {
+      var textarea = this.textarea;
+      if (!textarea) {
+        return;
+      }
+
+      textarea.value = this.bindValue;
+      this._update();
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+
+    _onInput: function(event) {
+      this.bindValue = event.path ? event.path[0].value : event.target.value;
+      this._update();
+    },
+
+    _constrain: function(tokens) {
+      var _tokens;
+      tokens = tokens || [''];
+      // Enforce the min and max heights for a multiline input to avoid measurement
+      if (this.maxRows > 0 && tokens.length > this.maxRows) {
+        _tokens = tokens.slice(0, this.maxRows);
+      } else {
+        _tokens = tokens.slice(0);
+      }
+      while (this.rows > 0 && _tokens.length < this.rows) {
+        _tokens.push('');
+      }
+      return _tokens.join('<br>') + '&nbsp;';
+    },
+
+    _valueForMirror: function() {
+      var input = this.textarea;
+      if (!input) {
+        return;
+      }
+      this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+      return this._constrain(this.tokens);
+    },
+
+    _updateCached: function() {
+      this.$.mirror.innerHTML = this._constrain(this.tokens);
+    }
+  })
+</script>

data/app/assets/components/iron-behaviors/iron-button-state.html

@@ -0,0 +1,195 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="iron-control-state.html">
+
+<script>
+
+  /** @polymerBehavior Polymer.IronButtonState */
+  Polymer.IronButtonStateImpl = {
+
+    properties: {
+
+      /**
+       * If true, the user is currently holding down the button.
+       *
+       * @attribute pressed
+       * @type boolean
+       * @default false
+       */
+      pressed: {
+        type: Boolean,
+        readOnly: true,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_pressedChanged'
+      },
+
+      /**
+       * If true, the button toggles the active state with each tap or press
+       * of the spacebar.
+       *
+       * @attribute toggles
+       * @type boolean
+       * @default false
+       */
+      toggles: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+
+      /**
+       * If true, the button is a toggle and is currently in the active state.
+       *
+       * @attribute active
+       * @type boolean
+       * @default false
+       */
+      active: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        reflectToAttribute: true,
+        observer: '_activeChanged'
+      },
+
+      /**
+       * True if the element is currently being pressed by a "pointer," which
+       * is loosely defined as mouse or touch input (but specifically excluding
+       * keyboard input).
+       */
+      pointerDown: {
+        type: Boolean,
+        readOnly: true,
+        value: false
+      },
+
+      /**
+       * True if the input device that caused the element to receive focus
+       * was a keyboard.
+       */
+      receivedFocusFromKeyboard: {
+        type: Boolean,
+        readOnly: true
+      }
+    },
+
+    listeners: {
+      down: '_downHandler',
+      up: '_upHandler',
+      tap: '_tapHandler'
+    },
+
+    observers: [
+      '_detectKeyboardFocus(focused)'
+    ],
+
+    keyBindings: {
+      'enter:keydown': '_asyncClick',
+      'space:keydown': '_spaceKeyDownHandler',
+      'space:keyup': '_spaceKeyUpHandler',
+    },
+
+    _tapHandler: function() {
+      if (this.toggles) {
+       // a tap is needed to toggle the active state
+        this._userActivate(!this.active);
+      } else {
+        this.active = false;
+      }
+    },
+
+    _detectKeyboardFocus: function(focused) {
+      this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
+    },
+
+    // to emulate native checkbox, (de-)activations from a user interaction fire
+    // 'change' events
+    _userActivate: function(active) {
+      this.active = active;
+      this.fire('change');
+    },
+
+    _downHandler: function() {
+      this._setPointerDown(true);
+      this._setPressed(true);
+      this._setReceivedFocusFromKeyboard(false);
+    },
+
+    _upHandler: function() {
+      this._setPointerDown(false);
+      this._setPressed(false);
+    },
+
+    _spaceKeyDownHandler: function(event) {
+      var keyboardEvent = event.detail.keyboardEvent;
+      keyboardEvent.preventDefault();
+      keyboardEvent.stopImmediatePropagation();
+      this._setPressed(true);
+    },
+
+    _spaceKeyUpHandler: function() {
+      if (this.pressed) {
+        this._asyncClick();
+      }
+      this._setPressed(false);
+    },
+
+    // trigger click asynchronously, the asynchrony is useful to allow one
+    // event handler to unwind before triggering another event
+    _asyncClick: function() {
+      this.async(function() {
+        this.click();
+      }, 1);
+    },
+
+    // any of these changes are considered a change to button state
+
+    _pressedChanged: function(pressed) {
+      this._changedButtonState();
+    },
+
+    _activeChanged: function(active) {
+      if (this.toggles) {
+        this.setAttribute('aria-pressed', active ? 'true' : 'false');
+      } else {
+        this.removeAttribute('aria-pressed');
+      }
+      this._changedButtonState();
+    },
+
+    _controlStateChanged: function() {
+      if (this.disabled) {
+        this._setPressed(false);
+      } else {
+        this._changedButtonState();
+      }
+    },
+
+    // provide hook for follow-on behaviors to react to button-state
+
+    _changedButtonState: function() {
+      if (this._buttonStateChanged) {
+        this._buttonStateChanged(); // abstract
+      }
+    }
+
+  };
+
+  /** @polymerBehavior Polymer.IronButtonState */
+  Polymer.IronButtonState = [
+    Polymer.IronA11yKeysBehavior,
+    Polymer.IronButtonStateImpl
+  ];
+
+</script>