[polymer] import all elements

pkg/polymer/lib/elements/polymer-ui-arrow/polymer-ui-arrow.html

Index: pkg/polymer/lib/elements/polymer-ui-arrow/polymer-ui-arrow.html
diff --git a/pkg/polymer/lib/elements/polymer-ui-arrow/polymer-ui-arrow.html b/pkg/polymer/lib/elements/polymer-ui-arrow/polymer-ui-arrow.html
new file mode 100644
index 0000000000000000000000000000000000000000..f9280b6668cc878d599920a9611d93d11cd0ff8b
--- /dev/null
+++ b/pkg/polymer/lib/elements/polymer-ui-arrow/polymer-ui-arrow.html
@@ -0,0 +1,125 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!--
+/**
+ * @module Polymer UI Elements
+ */
+/**
+ * polymer-ui-arrow is styled to look like an arrow.
+ *
+ * Example:
+ *
+ *     <polymer-ui-arrow direction="up" size="20"></polymer-ui-arrow>
+ *
+ * @class polymer-ui-arrow
+ */
+-->
+<link rel="import" href="../polymer/polymer.html">
+
+<polymer-element name="polymer-ui-arrow" attributes="direction size color borderColor borderWidth">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-arrow.css">
+    <div id="outer" class="arrow arrow-outer"></div>
+    <div id="inner" class="arrow arrow-inner"></div>
+  </template>
+  <script>
+    Polymer('polymer-ui-arrow', {
+      borders: {
+        up: 'Bottom',
+        down: 'Top',
+        left: 'Right',
+        right: 'Left'
+      },
+      tops: {
+        up: 1,
+        down: -1,
+        left: 0,
+        right: 0
+      },
+      lefts: {
+        up: 0,
+        down: 0,
+        left: 1,
+        right: -1
+      },
+      /**
+       * Direction of the arrow.  Possible values are 'up', 'down', 'left' 
+       * and 'right'.
+       *
+       * @attribute direction
+       * @type string
+       * @default 'up'
+       */
+      direction: 'up',
+      /**
+       * Size of the arrow.
+       *
+       * @attribute size
+       * @type number
+       * @default 10
+       */
+      size: 10,
+      /**
+       * Color of the arrow.
+       *
+       * @attribute color
+       * @type string
+       * @default '#fff'
+       */
+      color: '#fff',
+      /**
+       * Border color.
+       *
+       * @attribute borderColor
+       * @type string
+       * @default '#ccc'
+       */
+      borderColor: '#ccc',
+      /**
+       * Arrow border width.
+       *
+       * @attribute borderWidth
+       * @type number
+       * @default 1
+       */
+      borderWidth: 1,
+      ready: function() {
+        this.asyncUpdate();
+      },
+      directionChanged: function() {
+        this.asyncUpdate();
+      },
+      sizeChanged: function() {
+        this.asyncUpdate();
+      },
+      colorChanged: function() {
+        this.asyncUpdate();
+      },
+      borderColorChanged: function() {
+        this.asyncUpdate();
+      },
+      borderWidthChanged: function() {
+        this.asyncUpdate();
+      },
+      asyncUpdate: function() {
+        this.updateJob = this.job(this.updateJob, this.update, 1);
+      },
+      update: function() {
+        var os = this.$.outer.style;
+        var is = this.$.inner.style;
+        os.borderWidth = this.size + 'px';
+        is.borderWidth = this.size + 'px';
+        os.borderColor = 'transparent';
+        is.borderColor = 'transparent';
+        var bc = 'border' + this.borders[this.direction] + 'Color';
+        os[bc] = this.borderColor;
+        is[bc] = this.color;
+        is.top = this.tops[this.direction] * this.borderWidth + 'px';
+        is.left = this.lefts[this.direction] * this.borderWidth + 'px';
+      }
+    });
+  </script>
+</polymer-element>