RubyGems - polymer-gold-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-gold-rails 1.0.0.pre.rc.1

Files changed (202) hide show

data/app/assets/components/paper-input/test/paper-textarea.html ADDED Viewed

@@ -0,0 +1,169 @@
+<!doctype html>
+<!--
+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
+-->
+<html>
+<head>
+  <title>paper-textarea tests</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../paper-textarea.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <paper-textarea></paper-textarea>
+    </template>
+  </test-fixture>
+  <test-fixture id="label">
+    <template>
+      <paper-textarea label="foo"></paper-textarea>
+    </template>
+  </test-fixture>
+  <test-fixture id="char-counter">
+    <template>
+      <paper-textarea char-counter></paper-textarea>
+    </template>
+  </test-fixture>
+  <test-fixture id="required">
+    <template>
+      <paper-textarea auto-validate required error-message="error"></paper-textarea>
+    </template>
+  </test-fixture>
+  <test-fixture id="required-char-counter">
+    <template>
+      <paper-textarea auto-validate char-counter required error-message="error"></paper-textarea>
+    </template>
+  </test-fixture>
+  <test-fixture id="always-float-label">
+    <template>
+      <paper-textarea always-float-label label="label"></paper-textarea>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic', function() {
+      test('setting value sets the input value', function() {
+        var input = fixture('basic');
+        input.value = 'foobar';
+        assert.equal(input.inputElement.bindValue, input.value, 'inputElement value equals input.value');
+      });
+      test('empty required input shows error', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+      test('caret position is preserved', function() {
+        var input = fixture('basic');
+        var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-textarea');
+        input.value = 'nananana';
+        ironTextarea.selectionStart = 2;
+        ironTextarea.selectionEnd = 2;
+        input.updateValueAndPreserveCaret('nanananabatman');
+        assert.equal(ironTextarea.selectionStart, 2, 'selectionStart is preserved');
+        assert.equal(ironTextarea.selectionEnd, 2, 'selectionEnd is preserved');
+      });
+      test('input attributes are bound to textarea', function() {
+        var input = fixture('basic');
+        var attrs = {
+          'autocomplete': 'true',
+          'autofocus': true,
+          'inputmode': 'number',
+          'name': 'foo',
+          'placeholder': 'bar',
+          'readonly': true,
+          'required': true,
+          'maxlength': 3
+        };
+        for (var attr in attrs) {
+          input[attr] = attrs[attr];
+        }
+        for (var attr in attrs) {
+          var inputAttr = input.inputElement.getAttribute(attr);
+          if (typeof attrs[attr] === 'boolean') {
+            assert.equal(inputAttr !== null, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr !== null + ')');
+          } else {
+            assert.equal(inputAttr, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr + ')');
+          }
+        }
+      });
+      test('always-float-label attribute works', function() {
+        var input = fixture('always-float-label');
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
+      });
+    });
+    suite('a11y', function() {
+      test('has aria-labelledby', function() {
+        var input = fixture('label');
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-labelledby'))
+        assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+      });
+      test('has aria-describedby for error message', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
+      });
+      test('has aria-describedby for character counter', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
+      });
+      test('has aria-describedby for character counter and error', function() {
+        var input = fixture('required-char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-styles/README.md ADDED Viewed

@@ -0,0 +1,3 @@
+# paper-styles
+Material design CSS styles.

data/app/assets/components/paper-styles/bower.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "paper-styles",
+  "version": "1.0.4",
+  "description": "Common (global) styles for Material Design elements.",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-component",
+    "polymer",
+    "style"
+  ],
+  "main": "paper-styles.html",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/polymerelements/paper-styles/",
+  "ignore": [
+    "/.*",
+    "/demo/"
+  ],
+  "dependencies": {
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-styles/classes/global.html ADDED Viewed

@@ -0,0 +1,96 @@
+<!--
+@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="../paper-styles-classes.html">
+<!--
+A set of base styles that are applied to the document and standard elements that
+match the Material Design spec.
+-->
+<style>
+/*
+Note that there is a lot of style duplication here. The hope is that the Polymer
+0.8 styling solution will allow for inheritance of properties so that we can
+eventually avoid it.
+*/
+/* Mixins */
+/* [paper-font] */
+body {
+  font-family: 'Roboto', 'Noto', sans-serif;
+  -webkit-font-smoothing: antialiased;  /* OS X subpixel AA bleed bug */
+}
+/* [paper-font=display2] */
+h1 {
+  font-size: 45px;
+  font-weight: 400;
+  letter-spacing: -.018em;
+  line-height: 48px;
+}
+/* [paper-font=display1] */
+h2 {
+  font-size: 34px;
+  font-weight: 400;
+  letter-spacing: -.01em;
+  line-height: 40px;
+}
+/* [paper-font=headline] */
+h3 {
+  font-size: 24px;
+  font-weight: 400;
+  letter-spacing: -.012em;
+  line-height: 32px;
+}
+/* [paper-font=subhead] */
+h4 {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+/* [paper-font=body2] */
+h5, h6 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+/* [paper-font=button] */
+a {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.018em;
+  line-height: 24px;
+  text-transform: uppercase;
+}
+/* Overrides */
+body, a {
+  color: #212121;
+}
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0 0 20px 0;
+}
+h1, h2, h3, h4, h5, h6, a {
+  text-rendering: optimizeLegibility;
+}
+a {
+  text-decoration: none;
+}
+</style>

data/app/assets/components/paper-styles/classes/shadow-layout.html ADDED Viewed

@@ -0,0 +1,302 @@
+<!--
+@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
+-->
+<style>
+  /*******************************
+            Flex Layout
+  *******************************/
+  html /deep/ .layout.horizontal,
+  html /deep/ .layout.horizontal-reverse,
+  html /deep/ .layout.vertical,
+  html /deep/ .layout.vertical-reverse {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  }
+  html /deep/ .layout.inline {
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+  }
+  html /deep/ .layout.horizontal {
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+  }
+  html /deep/ .layout.horizontal-reverse {
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+  }
+  html /deep/ .layout.vertical {
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+  html /deep/ .layout.vertical-reverse {
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+  }
+  html /deep/ .layout.wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+  }
+  html /deep/ .layout.wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+  }
+  html /deep/ .flex-auto {
+    -ms-flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+  }
+  html /deep/ .flex-none {
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+  }
+  html /deep/ .flex,
+  html /deep/ .flex-1 {
+    -ms-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+  }
+  html /deep/ .flex-2 {
+    -ms-flex: 2;
+    -webkit-flex: 2;
+    flex: 2;
+  }
+  html /deep/ .flex-3 {
+    -ms-flex: 3;
+    -webkit-flex: 3;
+    flex: 3;
+  }
+  html /deep/ .flex-4 {
+    -ms-flex: 4;
+    -webkit-flex: 4;
+    flex: 4;
+  }
+  html /deep/ .flex-5 {
+    -ms-flex: 5;
+    -webkit-flex: 5;
+    flex: 5;
+  }
+  html /deep/ .flex-6 {
+    -ms-flex: 6;
+    -webkit-flex: 6;
+    flex: 6;
+  }
+  html /deep/ .flex-7 {
+    -ms-flex: 7;
+    -webkit-flex: 7;
+    flex: 7;
+  }
+  html /deep/ .flex-8 {
+    -ms-flex: 8;
+    -webkit-flex: 8;
+    flex: 8;
+  }
+  html /deep/ .flex-9 {
+    -ms-flex: 9;
+    -webkit-flex: 9;
+    flex: 9;
+  }
+  html /deep/ .flex-10 {
+    -ms-flex: 10;
+    -webkit-flex: 10;
+    flex: 10;
+  }
+  html /deep/ .flex-11 {
+    -ms-flex: 11;
+    -webkit-flex: 11;
+    flex: 11;
+  }
+  html /deep/ .flex-12 {
+    -ms-flex: 12;
+    -webkit-flex: 12;
+    flex: 12;
+  }
+  /* alignment in cross axis */
+  html /deep/ .layout.start {
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+  }
+  html /deep/ .layout.center,
+  html /deep/ .layout.center-center {
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+  html /deep/ .layout.end {
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+  }
+  /* alignment in main axis */
+  html /deep/ .layout.start-justified {
+    -ms-flex-pack: start;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+  }
+  html /deep/ .layout.center-justified,
+  html /deep/ .layout.center-center {
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+  }
+  html /deep/ .layout.end-justified {
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+  }
+  html /deep/ .layout.around-justified {
+    -ms-flex-pack: around;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+  }
+  html /deep/ .layout.justified {
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
+  /* self alignment */
+  html /deep/ .self-start {
+    -ms-align-self: flex-start;
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+  }
+  html /deep/ .self-center {
+    -ms-align-self: center;
+    -webkit-align-self: center;
+    align-self: center;
+  }
+  html /deep/ .self-end {
+    -ms-align-self: flex-end;
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+  }
+  html /deep/ .self-stretch {
+    -ms-align-self: stretch;
+    -webkit-align-self: stretch;
+    align-self: stretch;
+  }
+  /*******************************
+            Other Layout
+  *******************************/
+  html /deep/ .block {
+    display: block;
+  }
+  /* IE 10 support for HTML5 hidden attr */
+  html /deep/ [hidden] {
+    display: none !important;
+  }
+  html /deep/ .invisible {
+    visibility: hidden !important;
+  }
+  html /deep/ .relative {
+    position: relative;
+  }
+  html /deep/ .fit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  body.fullbleed {
+    margin: 0;
+    height: 100vh;
+  }
+  html /deep/ .scroll {
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+  }
+  .fixed-bottom,
+  .fixed-left,
+  .fixed-right,
+  .fixed-top {
+    position: fixed;
+  }
+  html /deep/ .fixed-top {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  html /deep/ .fixed-right {
+    top: 0;
+    right: 0;
+    botttom: 0;
+  }
+  html /deep/ .fixed-bottom {
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  html /deep/ .fixed-left {
+    top: 0;
+    botttom: 0;
+    left: 0;
+  }
+</style>