npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

bower_components/paper-shadow/paper-shadow.html

-<!--
-Copyright (c) 2014 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
--->
-
-<!--
-The `paper-shadow` element is a helper to add shadows to elements.
-Paper shadows are composed of two shadows on top of each other. We
-mimic this effect by using two elements on top of each other, each with a
-different drop shadow. You can apply the shadow to an element by assigning
-it as the target. If you do not specify a target, the shadow is applied to
-the `paper-shadow` element's parent element or shadow host element if its
-parent is a shadow root. Alternatively, you can use the CSS classes included
-by this element directly.
-
-Example:
-
-    <div id="myCard" class="card"></div>
-    <paper-shadow id="myShadow" z="1"></div>
-
-    // Assign a target explicitly
-    myShadow.target = document.getElementById('myCard');
-
-    // Auto-assign the target.
-    <div class="card">
-      <paper-shadow z="1"></paper-shadow>
-    </div>
-
-    // Use the classes directly
-    <div class="card paper-shadow-top paper-shadow-top-z-1">
-      <div class="card-inner paper-shadow-bottom paper-shadow-bottom-z-1"></div>
-    </div>
-
-If you assign a target to a `paper-shadow` element, it creates two nodes and inserts
-them as the first children of the target, or the first children of the target's shadow
-root if there is one. This implies:
-
-  1. If the primary node that drops the shadow has styling that affects its shape,
-     the same styling must be applied to elements with class `paper-shadow`.
-     `border-radius` is a very common property and is inherited automatically.
-
-  2. The target's overflow property will be set to `overflow: visible` because the
-     shadow is rendered beyond the bounds of its container. Position the shadow as a
-     separate layer and use a different child element for clipping if needed.
-
-@group Paper Elements
-@class paper-shadow
--->
-
-<link href="../polymer/polymer.html" rel="import">
-
-<polymer-element name="paper-shadow">
-
-  <template>
-
-    <link no-shim href="paper-shadow.css" rel="stylesheet">
-
-  </template>
-
-  <script>
-    Polymer('paper-shadow', {
-
-      publish: {
-        /**
-         * If set, the shadow is applied to this node.
-         *
-         * @attribute target
-         * @type Element
-         * @default null
-         */
-        target: {value: null, reflect: true},
-
-        /**
-         * The z-depth of this shadow, from 0-5.
-         *
-         * @attribute z
-         * @type number
-         * @default 1
-         */
-        z: {value: 1, reflect: true},
-
-        /**
-         * If true, the shadow animates between z-depth changes.
-         *
-         * @attribute animated
-         * @type boolean
-         * @default false
-         */
-        animated: {value: false, reflect: true},
-
-        /**
-         * Workaround: getComputedStyle is wrong sometimes so `paper-shadow`
-         * may overwrite the `position` CSS property. Set this property to
-         * true to prevent this.
-         *
-         * @attribute hasPosition
-         * @type boolean
-         * @default false
-         */
-        hasPosition: false
-      },
-
-      // NOTE: include template so that styles are loaded, but remove
-      // so that we can decide dynamically what part to include
-      registerCallback: function(polymerElement) {
-        var template = polymerElement.querySelector('template');
-        this._style = template.content.querySelector('style');
-        this._style.removeAttribute('no-shim');
-      },
-
-      fetchTemplate: function() {
-        return null;
-      },
-
-      attached: function() {
-        // If no target is bound at attach, default the target to the parent
-        // element or shadow host.
-        if (!this.target) {
-          if (!this.parentElement && this.parentNode.host) {
-            this.target = this.parentNode.host;
-          } else if (this.parentElement && (window.ShadowDOMPolyfill ? this.parentElement !== wrap(document.body) : this.parentElement !== document.body)) {
-            this.target = this.parentElement;
-          }
-        }
-      },
-
-      targetChanged: function(old) {
-        if (old) {
-          this.removeShadow(old);
-        }
-        if (this.target) {
-          this.addShadow(this.target);
-        }
-      },
-
-      zChanged: function(old) {
-        if (this.target && this.target._paperShadow) {
-          var shadow = this.target._paperShadow;
-          ['top', 'bottom'].forEach(function(s) {
-            shadow[s].classList.remove('paper-shadow-' + s + '-z-' + old);
-            shadow[s].classList.add('paper-shadow-' + s + '-z-' + this.z);
-          }.bind(this));
-        }
-      },
-
-      animatedChanged: function() {
-        if (this.target && this.target._paperShadow) {
-          var shadow = this.target._paperShadow;
-          ['top', 'bottom'].forEach(function(s) {
-            if (this.animated) {
-              shadow[s].classList.add('paper-shadow-animated');
-            } else {
-              shadow[s].classList.remove('paper-shadow-animated');
-            }
-          }.bind(this));
-        }
-      },
-
-      addShadow: function(node) {
-        if (node._paperShadow) {
-          return;
-        }
-
-        if (!node._hasShadowStyle) {
-          if (!node.shadowRoot) {
-            node.createShadowRoot().innerHTML = '<content></content>';
-          }
-          this.installScopeStyle(this._style, 'shadow', node.shadowRoot);
-          node._hasShadowStyle = true;
-        }
-
-        var computed = getComputedStyle(node);
-        if (!this.hasPosition && computed.position === 'static') {
-          node.style.position = 'relative';
-        }
-        node.style.overflow = 'visible';
-
-        // Both the top and bottom shadows are children of the target, so
-        // it does not affect the classes and CSS properties of the target.
-        ['top', 'bottom'].forEach(function(s) {
-          var inner = (node._paperShadow && node._paperShadow[s]) || document.createElement('div');
-          inner.classList.add('paper-shadow');
-          inner.classList.add('paper-shadow-' + s + '-z-' + this.z);
-          if (this.animated) {
-            inner.classList.add('paper-shadow-animated');
-          }
-
-          if (node.shadowRoot) {
-            node.shadowRoot.insertBefore(inner, node.shadowRoot.firstChild);
-          } else {
-            node.insertBefore(inner, node.firstChild);
-          }
-
-          node._paperShadow = node._paperShadow || {};
-          node._paperShadow[s] = inner;
-        }.bind(this));
-
-      },
-
-      removeShadow: function(node) {
-        if (!node._paperShadow) {
-          return;
-        }
-
-        ['top', 'bottom'].forEach(function(s) {
-          node._paperShadow[s].remove();
-        });
-        node._paperShadow = null;
-
-        node.style.position = null;
-      }
-
-    });
-  </script>
-</polymer-element>