appengine/swarming/elements/build/elements.html - Issue 2177353002: Add top level app element

Side by Side Diff: appengine/swarming/elements/build/elements.html

Issue 2177353002: Add top level app element (Closed) Base URL: https://chromium.googlesource.com/external/github.com/luci/luci-py@hello-oauth

Patch Set: Fix presubmits to ignore build files Created 4 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « appengine/swarming/elements/build/botlist-build.html ('k') | appengine/swarming/elements/build/index-build.html » ('j') | appengine/swarming/elements/elements.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html><html><head><!--	1 <!DOCTYPE html><html><head><!--

2 @license	2 @license

	3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved.

	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

	7 Code distributed by Google as part of the polymer project is also

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

	9 --><!--

	10 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.	11 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt	12 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt	13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	14 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also	15 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 --><!--	17 --><!--

10 @license	18 @license

11 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.	19 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

12 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt	20 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt	21 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

14 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	22 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

15 Code distributed by Google as part of the polymer project is also	23 Code distributed by Google as part of the polymer project is also

16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

17 -->	25 --><meta charset="UTF-8">

18 <title>Many World, wow such hello</title>	26

19 <meta charset="utf-8">	27

20 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	28 </head><body><div hidden="" by-vulcanize=""><script>(function () {

21 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">

22

23 <script>/**

24 * @license

25 * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

26 * This code may only be used under the BSD style license found at http://polyme r.github.io/LICENSE.txt

27 * The complete set of authors may be found at http://polymer.github.io/AUTHORS. txt

28 * The complete set of contributors may be found at http://polymer.github.io/CON TRIBUTORS.txt

29 * Code distributed by Google as part of the polymer project is also

30 * subject to an additional IP rights grant found at http://polymer.github.io/PA TENTS.txt

31 */

32 // @version 0.7.22

33 !function(){window.WebComponents=window.WebComponents\|\|{flags:{}};var e="webcomp onents-lite.js",t=document.querySelector('script[src="'+e+'"]'),n={};if(!n.noOp ts){if(location.search.slice(1).split("&").forEach(function(e){var t,o=e.split(" =");o[0]&&(t=o[0].match(/wc-(.+)/))&&(n[t[1]]=o[1]\|\|!0)}),t)for(var o,r=0;o=t.at tributes[r];r++)"src"!==o.name&&(n[o.name]=o.value\|\|!0);if(n.log&&n.log.split){v ar i=n.log.split(",");n.log={},i.forEach(function(e){n.log[e]=!0})}else n.log={} }n.register&&(window.CustomElements=window.CustomElements\|\|{flags:{}},window.Cus tomElements.flags.register=n.register),WebComponents.flags=n}(),function(e){"use strict";function t(e){return void 0!==h[e]}function n(){s.call(this),this._isIn valid=!0}function o(e){return""==e&&n.call(this),e.toLowerCase()}function r(e){v ar t=e.charCodeAt(0);return t>32&&127>t&&-1==[34,35,60,62,63,96].indexOf(t)?e:en codeURIComponent(e)}function i(e){var t=e.charCodeAt(0);return t>32&&127>t&&-1== [34,35,60,62,96].indexOf(t)?e:encodeURIComponent(e)}function a(e,a,s){function c (e){g.push(e)}var d=a\|\|"scheme start",l=0,u="",w=!1,_=!1,g=[];e:for(;(e[l-1]!=p\| \|0==l)&&!this._isInvalid;){var b=e[l];switch(d){case"scheme start":if(!b\|\|!m.tes t(b)){if(a){c("Invalid scheme.");break e}u="",d="no scheme";continue}u+=b.toLowe rCase(),d="scheme";break;case"scheme":if(b&&v.test(b))u+=b.toLowerCase();else{if (":"!=b){if(a){if(p==b)break e;c("Code point not allowed in scheme: "+b);break e }u="",l=0,d="no scheme";continue}if(this._scheme=u,u="",a)break e;t(this._scheme )&&(this._isRelative=!0),d="file"==this._scheme?"relative":this._isRelative&&s&& s._scheme==this._scheme?"relative or authority":this._isRelative?"authority firs t slash":"scheme data"}break;case"scheme data":"?"==b?(this._query="?",d="query" ):"#"==b?(this._fragment="#",d="fragment"):p!=b&&" "!=b&&"\n"!=b&&"\r"!=b&& (this._schemeData+=r(b));break;case"no scheme":if(s&&t(s._scheme)){d="relative"; continue}c("Missing scheme."),n.call(this);break;case"relative or authority":if( "/"!=b\|\|"/"!=e[l+1]){c("Expected /, got: "+b),d="relative";continue}d="authority ignore slashes";break;case"relative":if(this._isRelative=!0,"file"!=this._schem e&&(this._scheme=s._scheme),p==b){this._host=s._host,this._port=s._port,this._pa th=s._path.slice(),this._query=s._query,this._username=s._username,this._passwor d=s._password;break e}if("/"==b\|\|"\\"==b)"\\"==b&&c("\\ is an invalid code point ."),d="relative slash";else if("?"==b)this._host=s._host,this._port=s._port,this ._path=s._path.slice(),this._query="?",this._username=s._username,this._password =s._password,d="query";else{if("#"!=b){var y=e[l+1],E=e[l+2];("file"!=this._sche me\|\|!m.test(b)\|\|":"!=y&&"\|"!=y\|\|p!=E&&"/"!=E&&"\\"!=E&&"?"!=E&&"#"!=E)&&(this._h ost=s._host,this._port=s._port,this._username=s._username,this._password=s._pass word,this._path=s._path.slice(),this._path.pop()),d="relative path";continue}thi s._host=s._host,this._port=s._port,this._path=s._path.slice(),this._query=s._que ry,this._fragment="#",this._username=s._username,this._password=s._password,d="f ragment"}break;case"relative slash":if("/"!=b&&"\\"!=b){"file"!=this._scheme&&(t his._host=s._host,this._port=s._port,this._username=s._username,this._password=s ._password),d="relative path";continue}"\\"==b&&c("\\ is an invalid code point." ),d="file"==this._scheme?"file host":"authority ignore slashes";break;case"autho rity first slash":if("/"!=b){c("Expected '/', got: "+b),d="authority ignore slas hes";continue}d="authority second slash";break;case"authority second slash":if(d ="authority ignore slashes","/"!=b){c("Expected '/', got: "+b);continue}break;ca se"authority ignore slashes":if("/"!=b&&"\\"!=b){d="authority";continue}c("Expec ted authority, got: "+b);break;case"authority":if("@"==b){w&&(c("@ already seen. "),u+="%40"),w=!0;for(var L=0;L<u.length;L++){var N=u[L];if(" "!=N&&"\n"!=N&&" \r"!=N)if(":"!=N\|\|null!==this._password){var M=r(N);null!==this._password?this._ password+=M:this._username+=M}else this._password="";else c("Invalid whitespace in authority.")}u=""}else{if(p==b\|\|"/"==b\|\|"\\"==b\|\|"?"==b\|\|"#"==b){l-=u.length, u="",d="host";continue}u+=b}break;case"file host":if(p==b\|\|"/"==b\|\|"\\"==b\|\|"?"= =b\|\|"#"==b){2!=u.length\|\|!m.test(u[0])\|\|":"!=u[1]&&"\|"!=u[1]?0==u.length?d="rela tive path start":(this._host=o.call(this,u),u="",d="relative path start"):d="rel ative path";continue}" "==b\|\|"\n"==b\|\|"\r"==b?c("Invalid whitespace in file hos t."):u+=b;break;case"host":case"hostname":if(":"!=b\|\|_){if(p==b\|\|"/"==b\|\|"\\"==b \|\|"?"==b\|\|"#"==b){if(this._host=o.call(this,u),u="",d="relative path start",a)br eak e;continue}" "!=b&&"\n"!=b&&"\r"!=b?("["==b?_=!0:"]"==b&&(_=!1),u+=b) :c("Invalid code point in host/hostname: "+b)}else if(this._host=o.call(this,u), u="",d="port","hostname"==a)break e;break;case"port":if(/[0-9]/.test(b))u+=b;els e{if(p==b\|\|"/"==b\|\|"\\"==b\|\|"?"==b\|\|"#"==b\|\|a){if(""!=u){var T=parseInt(u,10);T! =h[this._scheme]&&(this._port=T+""),u=""}if(a)break e;d="relative path start";co ntinue}" "==b\|\|"\n"==b\|\|"\r"==b?c("Invalid code point in port: "+b):n.cal l(this)}break;case"relative path start":if("\\"==b&&c("'\\' not allowed in path. "),d="relative path","/"!=b&&"\\"!=b)continue;break;case"relative path":if(p!=b& &"/"!=b&&"\\"!=b&&(a\|\|"?"!=b&&"#"!=b))" "!=b&&"\n"!=b&&"\r"!=b&&(u+=r(b));else{" \\"==b&&c("\\ not allowed in relative path.");var O;(O=f[u.toLowerCase()])&&(u=O ),".."==u?(this._path.pop(),"/"!=b&&"\\"!=b&&this._path.push("")):"."==u&&"/"!=b &&"\\"!=b?this._path.push(""):"."!=u&&("file"==this._scheme&&0==this._path.lengt h&&2==u.length&&m.test(u[0])&&"\|"==u[1]&&(u=u[0]+":"),this._path.push(u)),u=""," ?"==b?(this._query="?",d="query"):"#"==b&&(this._fragment="#",d="fragment")}brea k;case"query":a\|\|"#"!=b?p!=b&&" "!=b&&"\n"!=b&&"\r"!=b&&(this._query+=i(b)):(thi s._fragment="#",d="fragment");break;case"fragment":p!=b&&" "!=b&&"\n"!=b&&" \r"!=b&&(this._fragment+=b)}l++}}function s(){this._scheme="",this._schemeData=" ",this._username="",this._password=null,this._host="",this._port="",this._path=[ ],this._query="",this._fragment="",this._isInvalid=!1,this._isRelative=!1}functi on c(e,t){void 0===t\|\|t instanceof c\|\|(t=new c(String(t))),this._url=e,s.call(th is);var n=e.replace(/^[ \t\r\n\f]+\|[ \t\r\n\f]+$/g,"");a.call(this,n,null,t)}var d=!1;if(!e.forceJURL)try{var l=new URL("b","http://a");l.pathname="c%20d",d="ht tp://a/c%20d"===l.href}catch(u){}if(!d){var h=Object.create(null);h.ftp=21,h.fil e=0,h.gopher=70,h.http=80,h.https=443,h.ws=80,h.wss=443;var f=Object.create(null );f["%2e"]=".",f[".%2e"]="..",f["%2e."]="..",f["%2e%2e"]="..";var p=void 0,m=/[a -zA-Z]/,v=/[a-zA-Z0-9\+\-\.]/;c.prototype={toString:function(){return this.href} ,get href(){if(this._isInvalid)return this._url;var e="";return""==this._usernam e&&null==this._password\|\|(e=this._username+(null!=this._password?":"+this._passw ord:"")+"@"),this.protocol+(this._isRelative?"//"+e+this.host:"")+this.pathname+ this._query+this._fragment},set href(e){s.call(this),a.call(this,e)},get protoco l(){return this._scheme+":"},set protocol(e){this._isInvalid\|\|a.call(this,e+":", "scheme start")},get host(){return this._isInvalid?"":this._port?this._host+":"+ this._port:this._host},set host(e){!this._isInvalid&&this._isRelative&&a.call(th is,e,"host")},get hostname(){return this._host},set hostname(e){!this._isInvalid &&this._isRelative&&a.call(this,e,"hostname")},get port(){return this._port},set port(e){!this._isInvalid&&this._isRelative&&a.call(this,e,"port")},get pathname (){return this._isInvalid?"":this._isRelative?"/"+this._path.join("/"):this._sch emeData},set pathname(e){!this._isInvalid&&this._isRelative&&(this._path=[],a.ca ll(this,e,"relative path start"))},get search(){return this._isInvalid\|\|!this._q uery\|\|"?"==this._query?"":this._query},set search(e){!this._isInvalid&&this._isR elative&&(this._query="?","?"==e[0]&&(e=e.slice(1)),a.call(this,e,"query"))},get hash(){return this._isInvalid\|\|!this._fragment\|\|"#"==this._fragment?"":this._fr agment},set hash(e){this._isInvalid\|\|(this._fragment="#","#"==e[0]&&(e=e.slice(1 )),a.call(this,e,"fragment"))},get origin(){var e;if(this._isInvalid\|\|!this._sch eme)return"";switch(this._scheme){case"data":case"file":case"javascript":case"ma ilto":return"null"}return e=this.host,e?this._scheme+"://"+e:""}};var w=e.URL;w& &(c.createObjectURL=function(e){return w.createObjectURL.apply(w,arguments)},c.r evokeObjectURL=function(e){w.revokeObjectURL(e)}),e.URL=c}}(self),"undefined"==t ypeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,n=functi on(){this.name="__st"+(1e9Math.random()>>>0)+(t++ +"__")};n.prototype={set:func tion(t,n){var o=t[this.name];return o&&o[0]===t?o[1]=n:e(t,this.name,{value:[t,n ],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1 ]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]= void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window. WeakMap=n}(),function(e){function t(e){b.push(e),g\|\|(g=!0,m(o))}function n(e){re turn window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)\|\|e}funct ion o(){g=!1;var e=b;b=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e .forEach(function(e){var n=e.takeRecords();r(e),n.length&&(e.callback_(n,e),t=!0 )}),t&&o()}function r(e){e.nodes_.forEach(function(t){var n=v.get(t);n&&n.forEac h(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){f or(var n=e;n;n=n.parentNode){var o=v.get(n);if(o)for(var r=0;r<o.length;r++){var i=o[r],a=i.options;if(n===e\|\|a.subtree){var s=t(a);s&&i.enqueue(s)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++y}function s(e ,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previ ousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeName space=null,this.oldValue=null}function c(e){var t=new s(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previo usSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attrib uteName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}functi on d(e,t){return E=new s(e,t)}function l(e){return L?L:(L=c(E),L.oldValue=e,L)}f unction u(){E=L=void 0}function h(e){return e===L\|\|e===E}function f(e,t){return e===t?e:L&&h(e)?L:null}function p(e,t,n){this.observer=e,this.target=t,this.opti ons=n,this.transientObservedNodes=[]}if(!e.JsMutationObserver){var m,v=new WeakM ap;if(/Trident\|Edge/.test(navigator.userAgent))m=setTimeout;else if(window.setIm mediate)m=window.setImmediate;else{var w=[],_=String(Math.random());window.addEv entListener("message",function(e){if(e.data===_){var t=w;w=[],t.forEach(function (e){e()})}}),m=function(e){w.push(e),window.postMessage(_,"")}}var g=!1,b=[],y= 0;a.prototype={observe:function(e,t){if(e=n(e),!t.childList&&!t.attributes&&!t.c haracterData\|\|t.attributeOldValue&&!t.attributes\|\|t.attributeFilter&&t.attribute Filter.length&&!t.attributes\|\|t.characterDataOldValue&&!t.characterData)throw ne w SyntaxError;var o=v.get(e);o\|\|v.set(e,o=[]);for(var r,i=0;i<o.length;i++)if(o[ i].observer===this){r=o[i],r.removeListeners(),r.options=t;break}r\|\|(r=new p(thi s,e,t),o.push(r),this.nodes_.push(e)),r.addListeners()},disconnect:function(){th is.nodes_.forEach(function(e){for(var t=v.get(e),n=0;n<t.length;n++){var o=t[n]; if(o.observer===this){o.removeListeners(),t.splice(n,1);break}}},this),this.reco rds_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}}; var E,L;p.prototype={enqueue:function(e){var n=this.observer.records_,o=n.length ;if(n.length>0){var r=n[o-1],i=f(r,e);if(i)return void(n[o-1]=i)}else t(this.obs erver);n[o]=e},addListeners:function(){this.addListeners_(this.target)},addListe ners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrMo dified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified", this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList \|\|t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:func tion(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=th is.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.char acterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList &&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList\|\|t.subtree)&&e.r emoveEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){i f(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=v.get(e);t\|\|v.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){ var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(funct ion(e){this.removeListeners_(e);for(var t=v.get(e),n=0;n<t.length;n++)if(t[n]=== this){t.splice(n,1);break}},this)},handleEvent:function(e){switch(e.stopImmediat ePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,n=e.relatedNode.na mespaceURI,o=e.target,r=new d("attributes",o);r.attributeName=t,r.attributeNames pace=n;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(o,function (e){return!e.attributes\|\|e.attributeFilter&&e.attributeFilter.length&&-1===e.att ributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(n)?void 0:e.attributeOld Value?l(a):r});break;case"DOMCharacterDataModified":var o=e.target,r=d("characte rData",o),a=e.prevValue;i(o,function(e){return e.characterData?e.characterDataOl dValue?l(a):r:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.ta rget);case"DOMNodeInserted":var s,c,h=e.target;"DOMNodeInserted"===e.type?(s=[h] ,c=[]):(s=[],c=[h]);var f=h.previousSibling,p=h.nextSibling,r=d("childList",e.ta rget.parentNode);r.addedNodes=s,r.removedNodes=c,r.previousSibling=f,r.nextSibli ng=p,i(e.relatedNode,function(e){return e.childList?r:void 0})}u()}},e.JsMutatio nObserver=a,e.MutationObserver\|\|(e.MutationObserver=a,a._isPolyfilled=!0)}}(self ),function(){function e(e){switch(e){case"&":return"&";case"<":return"<"; case">":return">";case" ":return" "}}function t(t){return t.replace(u,e) }var n="undefined"==typeof HTMLTemplateElement;/Trident/.test(navigator.userAgen t)&&!function(){var e=document.importNode;document.importNode=function(){var t=e .apply(document,arguments);if(t.nodeType===Node.DOCUMENT_FRAGMENT_NODE){var n=do cument.createDocumentFragment();return n.appendChild(t),n}return t}}();var o=fun ction(){if(!n){var e=document.createElement("template"),t=document.createElement ("template");t.content.appendChild(document.createElement("div")),e.content.appe ndChild(t);var o=e.cloneNode(!0);return 0===o.content.childNodes.length\|\|0===o.c ontent.firstChild.content.childNodes.length}}(),r="template",i=function(){};if(n ){var a=document.implementation.createHTMLDocument("template"),s=!0,c=document.c reateElement("style");c.textContent=r+"{display:none;}";var d=document.head;d.in sertBefore(c,d.firstElementChild),i.prototype=Object.create(HTMLElement.prototyp e),i.decorate=function(e){if(!e.content){e.content=a.createDocumentFragment();fo r(var n;n=e.firstChild;)e.content.appendChild(n);if(e.cloneNode=function(e){retu rn i.cloneNode(this,e)},s)try{Object.defineProperty(e,"innerHTML",{get:function( ){for(var e="",n=this.content.firstChild;n;n=n.nextSibling)e+=n.outerHTML\|\|t(n.d ata);return e},set:function(e){for(a.body.innerHTML=e,i.bootstrap(a);this.conten t.firstChild;)this.content.removeChild(this.content.firstChild);for(;a.body.firs tChild;)this.content.appendChild(a.body.firstChild)},configurable:!0})}catch(o){ s=!1}i.bootstrap(e.content)}},i.bootstrap=function(e){for(var t,n=e.querySelecto rAll(r),o=0,a=n.length;a>o&&(t=n[o]);o++)i.decorate(t)},document.addEventListene r("DOMContentLoaded",function(){i.bootstrap(document)});var l=document.createEle ment;document.createElement=function(){"use strict";var e=l.apply(document,argum ents);return"template"===e.localName&&i.decorate(e),e};var u=/[&\u00A0<>]/g}if(n \|\|o){var h=Node.prototype.cloneNode;i.cloneNode=function(e,t){var n=h.call(e,!1) ;return this.decorate&&this.decorate(n),t&&(n.content.appendChild(h.call(e.conte nt,!0)),this.fixClonedDom(n.content,e.content)),n},i.fixClonedDom=function(e,t){ if(t.querySelectorAll)for(var n,o,i=t.querySelectorAll(r),a=e.querySelectorAll(r ),s=0,c=a.length;c>s;s++)o=i[s],n=a[s],this.decorate&&this.decorate(o),n.parentN ode.replaceChild(o.cloneNode(!0),n)};var f=document.importNode;Node.prototype.cl oneNode=function(e){var t=h.call(this,e);return e&&i.fixClonedDom(t,this),t},doc ument.importNode=function(e,t){if(e.localName===r)return i.cloneNode(e,t);var n= f.call(document,e,t);return t&&i.fixClonedDom(n,e),n},o&&(HTMLTemplateElement.pr ototype.cloneNode=function(e){return i.cloneNode(this,e)})}n&&(window.HTMLTempla teElement=i)}(),function(e){"use strict";if(!window.performance){var t=Date.now( );window.performance={now:function(){return Date.now()-t}}}window.requestAnimati onFrame\|\|(window.requestAnimationFrame=function(){var e=window.webkitRequestAnim ationFrame\|\|window.mozRequestAnimationFrame;return e?function(t){return e(functi on(){t(performance.now())})}:function(e){return window.setTimeout(e,1e3/60)}}()) ,window.cancelAnimationFrame\|\|(window.cancelAnimationFrame=function(){return win dow.webkitCancelAnimationFrame\|\|window.mozCancelAnimationFrame\|\|function(e){clea rTimeout(e)}}());var n=function(){var e=document.createEvent("Event");return e.i nitEvent("foo",!0,!0),e.preventDefault(),e.defaultPrevented}();if(!n){var o=Even t.prototype.preventDefault;Event.prototype.preventDefault=function(){this.cancel able&&(o.call(this),Object.defineProperty(this,"defaultPrevented",{get:function( ){return!0},configurable:!0}))}}var r=/Trident/.test(navigator.userAgent);if((!w indow.CustomEvent\|\|r&&"function"!=typeof window.CustomEvent)&&(window.CustomEven t=function(e,t){t=t\|\|{};var n=document.createEvent("CustomEvent");return n.initC ustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),n},window.Custom Event.prototype=window.Event.prototype),!window.Event\|\|r&&"function"!=typeof win dow.Event){var i=window.Event;window.Event=function(e,t){t=t\|\|{};var n=document. createEvent("Event");return n.initEvent(e,Boolean(t.bubbles),Boolean(t.cancelabl e)),n},window.Event.prototype=i.prototype}}(window.WebComponents),window.HTMLImp orts=window.HTMLImports\|\|{flags:{}},function(e){function t(e,t){t=t\|\|p,o(functio n(){i(e,t)},t)}function n(e){return"complete"===e.readyState\|\|e.readyState===w}f unction o(e,t){if(n(t))e&&e();else{var r=function(){"complete"!==t.readyState&&t .readyState!==w\|\|(t.removeEventListener(_,r),o(e,t))};t.addEventListener(_,r)}}f unction r(e){e.target.__loaded=!0}function i(e,t){function n(){c==d&&e&&e({allIm ports:s,loadedImports:l,errorImports:u})}function o(e){r(e),l.push(this),c++,n() }function i(e){u.push(this),c++,n()}var s=t.querySelectorAll("link[rel=import]") ,c=0,d=s.length,l=[],u=[];if(d)for(var h,f=0;d>f&&(h=s[f]);f++)a(h)?(l.push(this ),c++,n()):(h.addEventListener("load",o),h.addEventListener("error",i));else n() }function a(e){return u?e.__loaded\|\|e["import"]&&"loading"!==e["import"].readySt ate:e.__importParsed}function s(e){for(var t,n=0,o=e.length;o>n&&(t=e[n]);n++)c( t)&&d(t)}function c(e){return"link"===e.localName&&"import"===e.rel}function d(e ){var t=e["import"];t?r({target:e}):(e.addEventListener("load",r),e.addEventList ener("error",r))}var l="import",u=Boolean(l in document.createElement("link")),h =Boolean(window.ShadowDOMPolyfill),f=function(e){return h?window.ShadowDOMPolyfi ll.wrapIfNeeded(e):e},p=f(document),m={get:function(){var e=window.HTMLImports.c urrentScript\|\|document.currentScript\|\|("complete"!==document.readyState?document .scripts[document.scripts.length-1]:null);return f(e)},configurable:!0};Object.d efineProperty(document,"_currentScript",m),Object.defineProperty(p,"_currentScri pt",m);var v=/Trident/.test(navigator.userAgent),w=v?"complete":"interactive",_= "readystatechange";u&&(new MutationObserver(function(e){for(var t,n=0,o=e.length ;o>n&&(t=e[n]);n++)t.addedNodes&&s(t.addedNodes)}).observe(document.head,{childL ist:!0}),function(){if("loading"===document.readyState)for(var e,t=document.quer ySelectorAll("link[rel=import]"),n=0,o=t.length;o>n&&(e=t[n]);n++)d(e)}()),t(fun ction(e){window.HTMLImports.ready=!0,window.HTMLImports.readyTime=(new Date).get Time();var t=p.createEvent("CustomEvent");t.initCustomEvent("HTMLImportsLoaded", !0,!0,e),p.dispatchEvent(t)}),e.IMPORT_LINK_TYPE=l,e.useNative=u,e.rootDocument= p,e.whenReady=t,e.isIE=v}(window.HTMLImports),function(e){var t=[],n=function(e) {t.push(e)},o=function(){t.forEach(function(t){t(e)})};e.addModule=n,e.initializ eModules=o}(window.HTMLImports),window.HTMLImports.addModule(function(e){var t=/ (url$)([^)])($)/g,n=/(@import[\s]+(?!url\())([^;]*)(;)/g,o={resolveUrlsInStyl e:function(e,t){var n=e.ownerDocument,o=n.createElement("a");return e.textConten t=this.resolveUrlsInCssText(e.textContent,t,o),e},resolveUrlsInCssText:function( e,o,r){var i=this.replaceUrls(e,r,o,t);return i=this.replaceUrls(i,r,o,n)},repla ceUrls:function(e,t,n,o){return e.replace(o,function(e,o,r,i){var a=r.replace(/[ "']/g,"");return n&&(a=new URL(a,n).href),t.href=a,a=t.href,o+"'"+a+"'"+i})}};e. path=o}),window.HTMLImports.addModule(function(e){var t={async:!0,ok:function(e) {return e.status>=200&&e.status<300\|\|304===e.status\|\|0===e.status},load:function (n,o,r){var i=new XMLHttpRequest;return(e.flags.debug\|\|e.flags.bust)&&(n+="?"+Ma th.random()),i.open("GET",n,t.async),i.addEventListener("readystatechange",funct ion(e){if(4===i.readyState){var n=null;try{var a=i.getResponseHeader("Location") ;a&&(n="/"===a.substr(0,1)?location.origin+a:a)}catch(e){console.error(e.message )}o.call(r,!t.ok(i)&&i,i.response\|\|i.responseText,n)}}),i.send(),i},loadDocument :function(e,t,n){this.load(e,t,n).responseType="document"}};e.xhr=t}),window.HTM LImports.addModule(function(e){var t=e.xhr,n=e.flags,o=function(e,t){this.cache= {},this.onload=e,this.oncomplete=t,this.inflight=0,this.pending={}};o.prototype= {addNodes:function(e){this.inflight+=e.length;for(var t,n=0,o=e.length;o>n&&(t=e [n]);n++)this.require(t);this.checkDone()},addNode:function(e){this.inflight++,t his.require(e),this.checkDone()},require:function(e){var t=e.src\|\|e.href;e.__nod eUrl=t,this.dedupe(t,e)\|\|this.fetch(t,e)},dedupe:function(e,t){if(this.pending[e ])return this.pending[e].push(t),!0;return this.cache[e]?(this.onload(e,t,this.c ache[e]),this.tail(),!0):(this.pending[e]=[t],!1)},fetch:function(e,o){if(n.load &&console.log("fetch",e,o),e)if(e.match(/^data:/)){var r=e.split(","),i=r[0],a=r [1];a=i.indexOf(";base64")>-1?atob(a):decodeURIComponent(a),setTimeout(function( ){this.receive(e,o,null,a)}.bind(this),0)}else{var s=function(t,n,r){this.receiv e(e,o,t,n,r)}.bind(this);t.load(e,s)}else setTimeout(function(){this.receive(e,o ,{error:"href must be specified"},null)}.bind(this),0)},receive:function(e,t,n,o ,r){this.cache[e]=o;for(var i,a=this.pending[e],s=0,c=a.length;c>s&&(i=a[s]);s++ )this.onload(e,i,o,n,r),this.tail();this.pending[e]=null},tail:function(){--this .inflight,this.checkDone()},checkDone:function(){this.inflight\|\|this.oncomplete( )}},e.Loader=o}),window.HTMLImports.addModule(function(e){var t=function(e){this .addCallback=e,this.mo=new MutationObserver(this.handler.bind(this))};t.prototyp e={handler:function(e){for(var t,n=0,o=e.length;o>n&&(t=e[n]);n++)"childList"=== t.type&&t.addedNodes.length&&this.addedNodes(t.addedNodes)},addedNodes:function( e){this.addCallback&&this.addCallback(e);for(var t,n=0,o=e.length;o>n&&(t=e[n]); n++)t.children&&t.children.length&&this.addedNodes(t.children)},observe:function (e){this.mo.observe(e,{childList:!0,subtree:!0})}},e.Observer=t}),window.HTMLImp orts.addModule(function(e){function t(e){return"link"===e.localName&&e.rel===l}f unction n(e){var t=o(e);return"data:text/javascript;charset=utf-8,"+encodeURICom ponent(t)}function o(e){return e.textContent+r(e)}function r(e){var t=e.ownerDoc ument;t.__importedScripts=t.__importedScripts\|\|0;var n=e.ownerDocument.baseURI,o =t.__importedScripts?"-"+t.__importedScripts:"";return t.__importedScripts++,"\n //# sourceURL="+n+o+".js\n"}function i(e){var t=e.ownerDocument.createElement("s tyle");return t.textContent=e.textContent,a.resolveUrlsInStyle(t),t}var a=e.path ,s=e.rootDocument,c=e.flags,d=e.isIE,l=e.IMPORT_LINK_TYPE,u="link[rel="+l+"]",h= {documentSelectors:u,importsSelectors:[u,"link[rel=stylesheet]:not([type])","sty le:not([type])","script:not([type])",'script[type="application/javascript"]','sc ript[type="text/javascript"]'].join(","),map:{link:"parseLink",script:"parseScri pt",style:"parseStyle"},dynamicElements:[],parseNext:function(){var e=this.nextT oParse();e&&this.parse(e)},parse:function(e){if(this.isParsed(e))return void(c.p arse&&console.log("[%s] is already parsed",e.localName));var t=this[this.map[e.l ocalName]];t&&(this.markParsing(e),t.call(this,e))},parseDynamic:function(e,t){t his.dynamicElements.push(e),t\|\|this.parseNext()},markParsing:function(e){c.parse &&console.log("parsing",e),this.parsingElement=e},markParsingComplete:function(e ){e.__importParsed=!0,this.markDynamicParsingComplete(e),e.__importElement&&(e._ _importElement.__importParsed=!0,this.markDynamicParsingComplete(e.__importEleme nt)),this.parsingElement=null,c.parse&&console.log("completed",e)},markDynamicPa rsingComplete:function(e){var t=this.dynamicElements.indexOf(e);t>=0&&this.dynam icElements.splice(t,1)},parseImport:function(e){if(e["import"]=e.__doc,window.HT MLImports.__importsParsingHook&&window.HTMLImports.__importsParsingHook(e),e["im port"]&&(e["import"].__importParsed=!0),this.markParsingComplete(e),e.__resource &&!e.__error?e.dispatchEvent(new CustomEvent("load",{bubbles:!1})):e.dispatchEve nt(new CustomEvent("error",{bubbles:!1})),e.__pending)for(var t;e.__pending.leng th;)t=e.__pending.shift(),t&&t({target:e});this.parseNext()},parseLink:function( e){t(e)?this.parseImport(e):(e.href=e.href,this.parseGeneric(e))},parseStyle:fun ction(e){var t=e;e=i(e),t.__appliedElement=e,e.__importElement=t,this.parseGener ic(e)},parseGeneric:function(e){this.trackElement(e),this.addElementToDocument(e )},rootImportForElement:function(e){for(var t=e;t.ownerDocument.__importLink;)t= t.ownerDocument.__importLink;return t},addElementToDocument:function(e){var t=th is.rootImportForElement(e.__importElement\|\|e);t.parentNode.insertBefore(e,t)},tr ackElement:function(e,t){var n=this,o=function(r){e.removeEventListener("load",o ),e.removeEventListener("error",o),t&&t(r),n.markParsingComplete(e),n.parseNext( )};if(e.addEventListener("load",o),e.addEventListener("error",o),d&&"style"===e. localName){var r=!1;if(-1==e.textContent.indexOf("@import"))r=!0;else if(e.sheet ){r=!0;for(var i,a=e.sheet.cssRules,s=a?a.length:0,c=0;s>c&&(i=a[c]);c++)i.type= ==CSSRule.IMPORT_RULE&&(r=r&&Boolean(i.styleSheet))}r&&setTimeout(function(){e.d ispatchEvent(new CustomEvent("load",{bubbles:!1}))})}},parseScript:function(t){v ar o=document.createElement("script");o.__importElement=t,o.src=t.src?t.src:n(t) ,e.currentScript=t,this.trackElement(o,function(t){o.parentNode&&o.parentNode.re moveChild(o),e.currentScript=null}),this.addElementToDocument(o)},nextToParse:fu nction(){return this._mayParse=[],!this.parsingElement&&(this.nextToParseInDoc(s )\|\|this.nextToParseDynamic())},nextToParseInDoc:function(e,n){if(e&&this._mayPar se.indexOf(e)<0){this._mayParse.push(e);for(var o,r=e.querySelectorAll(this.pars eSelectorsForNode(e)),i=0,a=r.length;a>i&&(o=r[i]);i++)if(!this.isParsed(o))retu rn this.hasResource(o)?t(o)?this.nextToParseInDoc(o.__doc,o):o:void 0}return n}, nextToParseDynamic:function(){return this.dynamicElements[0]},parseSelectorsForN ode:function(e){var t=e.ownerDocument\|\|e;return t===s?this.documentSelectors:thi s.importsSelectors},isParsed:function(e){return e.__importParsed},needsDynamicPa rsing:function(e){return this.dynamicElements.indexOf(e)>=0},hasResource:functio n(e){return!t(e)\|\|void 0!==e.__doc}};e.parser=h,e.IMPORT_SELECTOR=u}),window.HTM LImports.addModule(function(e){function t(e){return n(e,a)}function n(e,t){retur n"link"===e.localName&&e.getAttribute("rel")===t}function o(e){return!!Object.ge tOwnPropertyDescriptor(e,"baseURI")}function r(e,t){var n=document.implementatio n.createHTMLDocument(a);n._URL=t;var r=n.createElement("base");r.setAttribute("h ref",t),n.baseURI\|\|o(n)\|\|Object.defineProperty(n,"baseURI",{value:t});var i=n.cr eateElement("meta");return i.setAttribute("charset","utf-8"),n.head.appendChild( i),n.head.appendChild(r),n.body.innerHTML=e,window.HTMLTemplateElement&&HTMLTemp lateElement.bootstrap&&HTMLTemplateElement.bootstrap(n),n}var i=e.flags,a=e.IMPO RT_LINK_TYPE,s=e.IMPORT_SELECTOR,c=e.rootDocument,d=e.Loader,l=e.Observer,u=e.pa rser,h={documents:{},documentPreloadSelectors:s,importsPreloadSelectors:[s].join (","),loadNode:function(e){f.addNode(e)},loadSubtree:function(e){var t=this.mars halNodes(e);f.addNodes(t)},marshalNodes:function(e){return e.querySelectorAll(th is.loadSelectorsForNode(e))},loadSelectorsForNode:function(e){var t=e.ownerDocum ent\|\|e;return t===c?this.documentPreloadSelectors:this.importsPreloadSelectors}, loaded:function(e,n,o,a,s){if(i.load&&console.log("loaded",e,n),n.__resource=o,n .__error=a,t(n)){var c=this.documents[e];void 0===c&&(c=a?null:r(o,s\|\|e),c&&(c._ _importLink=n,this.bootDocument(c)),this.documents[e]=c),n.__doc=c}u.parseNext() },bootDocument:function(e){this.loadSubtree(e),this.observer.observe(e),u.parseN ext()},loadedAll:function(){u.parseNext()}},f=new d(h.loaded.bind(h),h.loadedAll .bind(h));if(h.observer=new l,!document.baseURI){var p={get:function(){var e=doc ument.querySelector("base");return e?e.href:window.location.href},configurable:! 0};Object.defineProperty(document,"baseURI",p),Object.defineProperty(c,"baseURI" ,p)}e.importer=h,e.importLoader=f}),window.HTMLImports.addModule(function(e){var t=e.parser,n=e.importer,o={added:function(e){for(var o,r,i,a,s=0,c=e.length;c>s &&(a=e[s]);s++)o\|\|(o=a.ownerDocument,r=t.isParsed(o)),i=this.shouldLoadNode(a),i &&n.loadNode(a),this.shouldParseNode(a)&&r&&t.parseDynamic(a,i)},shouldLoadNode: function(e){return 1===e.nodeType&&r.call(e,n.loadSelectorsForNode(e))},shouldPa rseNode:function(e){return 1===e.nodeType&&r.call(e,t.parseSelectorsForNode(e))} };n.observer.addCallback=o.added.bind(o);var r=HTMLElement.prototype.matches\|\|HT MLElement.prototype.matchesSelector\|\|HTMLElement.prototype.webkitMatchesSelector \|\|HTMLElement.prototype.mozMatchesSelector\|\|HTMLElement.prototype.msMatchesSelec tor}),function(e){function t(){window.HTMLImports.importer.bootDocument(o)}var n =e.initializeModules;e.isIE;if(!e.useNative){n();var o=e.rootDocument;"complete" ===document.readyState\|\|"interactive"===document.readyState&&!window.attachEvent ?t():document.addEventListener("DOMContentLoaded",t)}}(window.HTMLImports),windo w.CustomElements=window.CustomElements\|\|{flags:{}},function(e){var t=e.flags,n=[ ],o=function(e){n.push(e)},r=function(){n.forEach(function(t){t(e)})};e.addModul e=o,e.initializeModules=r,e.hasNative=Boolean(document.registerElement),e.isIE=/ Trident/.test(navigator.userAgent),e.useNative=!t.register&&e.hasNative&&!window .ShadowDOMPolyfill&&(!window.HTMLImports\|\|window.HTMLImports.useNative)}(window. CustomElements),window.CustomElements.addModule(function(e){function t(e,t){n(e, function(e){return t(e)?!0:void o(e,t)}),o(e,t)}function n(e,t,o){var r=e.firstE lementChild;if(!r)for(r=e.firstChild;r&&r.nodeType!==Node.ELEMENT_NODE;)r=r.next Sibling;for(;r;)t(r,o)!==!0&&n(r,t,o),r=r.nextElementSibling;return null}functio n o(e,n){for(var o=e.shadowRoot;o;)t(o,n),o=o.olderShadowRoot}function r(e,t){i( e,t,[])}function i(e,t,n){if(e=window.wrap(e),!(n.indexOf(e)>=0)){n.push(e);for( var o,r=e.querySelectorAll("link[rel="+a+"]"),s=0,c=r.length;c>s&&(o=r[s]);s++)o ["import"]&&i(o["import"],t,n);t(e)}}var a=window.HTMLImports?window.HTMLImports .IMPORT_LINK_TYPE:"none";e.forDocumentTree=r,e.forSubtree=t}),window.CustomEleme nts.addModule(function(e){function t(e,t){return n(e,t)\|\|o(e,t)}function n(t,n){ return e.upgrade(t,n)?!0:void(n&&a(t))}function o(e,t){g(e,function(e){return n( e,t)?!0:void 0})}function r(e){L.push(e),E\|\|(E=!0,setTimeout(i))}function i(){E= !1;for(var e,t=L,n=0,o=t.length;o>n&&(e=t[n]);n++)e();L=[]}function a(e){y?r(fun ction(){s(e)}):s(e)}function s(e){

34 e.__upgraded__&&!e.__attached&&(e.__attached=!0,e.attachedCallback&&e.attachedCa llback())}function c(e){d(e),g(e,function(e){d(e)})}function d(e){y?r(function() {l(e)}):l(e)}function l(e){e.__upgraded__&&e.__attached&&(e.__attached=!1,e.deta chedCallback&&e.detachedCallback())}function u(e){for(var t=e,n=window.wrap(docu ment);t;){if(t==n)return!0;t=t.parentNode\|\|t.nodeType===Node.DOCUMENT_FRAGMENT_N ODE&&t.host}}function h(e){if(e.shadowRoot&&!e.shadowRoot.__watched){_.dom&&cons ole.log("watching shadow-root for: ",e.localName);for(var t=e.shadowRoot;t;)m(t) ,t=t.olderShadowRoot}}function f(e,n){if(_.dom){var o=n[0];if(o&&"childList"===o .type&&o.addedNodes&&o.addedNodes){for(var r=o.addedNodes[0];r&&r!==document&&!r .host;)r=r.parentNode;var i=r&&(r.URL\|\|r._URL\|\|r.host&&r.host.localName)\|\|"";i=i .split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",n.leng th,i\|\|"")}var a=u(e);n.forEach(function(e){"childList"===e.type&&(N(e.addedNodes ,function(e){e.localName&&t(e,a)}),N(e.removedNodes,function(e){e.localName&&c(e )}))}),_.dom&&console.groupEnd()}function p(e){for(e=window.wrap(e),e\|\|(e=window .wrap(document));e.parentNode;)e=e.parentNode;var t=e.__observer;t&&(f(e,t.takeR ecords()),i())}function m(e){if(!e.__observer){var t=new MutationObserver(f.bind (this,e));t.observe(e,{childList:!0,subtree:!0}),e.__observer=t}}function v(e){e =window.wrap(e),_.dom&&console.group("upgradeDocument: ",e.baseURI.split("/").po p());var n=e===window.wrap(document);t(e,n),m(e),_.dom&&console.groupEnd()}funct ion w(e){b(e,v)}var _=e.flags,g=e.forSubtree,b=e.forDocumentTree,y=window.Mutati onObserver._isPolyfilled&&_["throttle-attached"];e.hasPolyfillMutations=y,e.hasT hrottledAttached=y;var E=!1,L=[],N=Array.prototype.forEach.call.bind(Array.proto type.forEach),M=Element.prototype.createShadowRoot;M&&(Element.prototype.createS hadowRoot=function(){var e=M.call(this);return window.CustomElements.watchShadow (this),e}),e.watchShadow=h,e.upgradeDocumentTree=w,e.upgradeDocument=v,e.upgrade Subtree=o,e.upgradeAll=t,e.attached=a,e.takeRecords=p}),window.CustomElements.ad dModule(function(e){function t(t,o){if("template"===t.localName&&window.HTMLTemp lateElement&&HTMLTemplateElement.decorate&&HTMLTemplateElement.decorate(t),!t.__ upgraded__&&t.nodeType===Node.ELEMENT_NODE){var r=t.getAttribute("is"),i=e.getRe gisteredDefinition(t.localName)\|\|e.getRegisteredDefinition(r);if(i&&(r&&i.tag==t .localName\|\|!r&&!i["extends"]))return n(t,i,o)}}function n(t,n,r){return a.upgra de&&console.group("upgrade:",t.localName),n.is&&t.setAttribute("is",n.is),o(t,n) ,t.__upgraded__=!0,i(t),r&&e.attached(t),e.upgradeSubtree(t,r),a.upgrade&&consol e.groupEnd(),t}function o(e,t){Object.__proto__?e.__proto__=t.prototype:(r(e,t.p rototype,t["native"]),e.__proto__=t.prototype)}function r(e,t,n){for(var o={},r= t;r!==n&&r!==HTMLElement.prototype;){for(var i,a=Object.getOwnPropertyNames(r),s =0;i=a[s];s++)o[i]\|\|(Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r ,i)),o[i]=1);r=Object.getPrototypeOf(r)}}function i(e){e.createdCallback&&e.crea tedCallback()}var a=e.flags;e.upgrade=t,e.upgradeWithDefinition=n,e.implementPro totype=o}),window.CustomElements.addModule(function(e){function t(t,o){var c=o\|\| {};if(!t)throw new Error("document.registerElement: first argument `name` must n ot be empty");if(t.indexOf("-")<0)throw new Error("document.registerElement: fir st argument ('name') must contain a dash ('-'). Argument provided was '"+String( t)+"'.");if(r(t))throw new Error("Failed to execute 'registerElement' on 'Docume nt': Registration failed for type '"+String(t)+"'. The type name is invalid.");i f(d(t))throw new Error("DuplicateDefinitionError: a type with name '"+String(t)+ "' is already registered");return c.prototype\|\|(c.prototype=Object.create(HTMLEl ement.prototype)),c.__name=t.toLowerCase(),c["extends"]&&(c["extends"]=c["extend s"].toLowerCase()),c.lifecycle=c.lifecycle\|\|{},c.ancestry=i(c["extends"]),a(c),s (c),n(c.prototype),l(c.__name,c),c.ctor=u(c),c.ctor.prototype=c.prototype,c.prot otype.constructor=c.ctor,e.ready&&v(document),c.ctor}function n(e){if(!e.setAttr ibute._polyfilled){var t=e.setAttribute;e.setAttribute=function(e,n){o.call(this ,e,n,t)};var n=e.removeAttribute;e.removeAttribute=function(e){o.call(this,e,nul l,n)},e.setAttribute._polyfilled=!0}}function o(e,t,n){e=e.toLowerCase();var o=t his.getAttribute(e);n.apply(this,arguments);var r=this.getAttribute(e);this.attr ibuteChangedCallback&&r!==o&&this.attributeChangedCallback(e,o,r)}function r(e){ for(var t=0;t<y.length;t++)if(e===y[t])return!0}function i(e){var t=d(e);return t?i(t["extends"]).concat([t]):[]}function a(e){for(var t,n=e["extends"],o=0;t=e. ancestry[o];o++)n=t.is&&t.tag;e.tag=n\|\|e.__name,n&&(e.is=e.__name)}function s(e) {if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is){var n=document.creat eElement(e.tag);t=Object.getPrototypeOf(n)}for(var o,r=e.prototype,i=!1;r;)r==t& &(i=!0),o=Object.getPrototypeOf(r),o&&(r.__proto__=o),r=o;i\|\|console.warn(e.tag+ " prototype not found in prototype chain for "+e.is),e["native"]=t}}function c(e ){return _(N(e.tag),e)}function d(e){return e?E[e.toLowerCase()]:void 0}function l(e,t){E[e]=t}function u(e){return function(){return c(e)}}function h(e,t,n){re turn e===L?f(t,n):M(e,t)}function f(e,t){e&&(e=e.toLowerCase()),t&&(t=t.toLowerC ase());var n=d(t\|\|e);if(n){if(e==n.tag&&t==n.is)return new n.ctor;if(!t&&!n.is)r eturn new n.ctor}var o;return t?(o=f(e),o.setAttribute("is",t),o):(o=N(e),e.inde xOf("-")>=0&&g(o,HTMLElement),o)}function p(e,t){var n=e[t];e[t]=function(){var e=n.apply(this,arguments);return w(e),e}}var m,v=(e.isIE,e.upgradeDocumentTree), w=e.upgradeAll,_=e.upgradeWithDefinition,g=e.implementPrototype,b=e.useNative,y= ["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","f ont-face-format","font-face-name","missing-glyph"],E={},L="http://www.w3.org/199 9/xhtml",N=document.createElement.bind(document),M=document.createElementNS.bind (document);m=Object.__proto__\|\|b?function(e,t){return e instanceof t}:function(e ,t){if(e instanceof t)return!0;for(var n=e;n;){if(n===t.prototype)return!0;n=n._ _proto__}return!1},p(Node.prototype,"cloneNode"),p(document,"importNode"),docume nt.registerElement=t,document.createElement=f,document.createElementNS=h,e.regis try=E,e["instanceof"]=m,e.reservedTagList=y,e.getRegisteredDefinition=d,document .register=document.registerElement}),function(e){function t(){i(window.wrap(docu ment)),window.CustomElements.ready=!0;var e=window.requestAnimationFrame\|\|functi on(e){setTimeout(e,16)};e(function(){setTimeout(function(){window.CustomElements .readyTime=Date.now(),window.HTMLImports&&(window.CustomElements.elapsed=window. CustomElements.readyTime-window.HTMLImports.readyTime),document.dispatchEvent(ne w CustomEvent("WebComponentsReady",{bubbles:!0}))})})}var n=e.useNative,o=e.init ializeModules;e.isIE;if(n){var r=function(){};e.watchShadow=r,e.upgrade=r,e.upgr adeAll=r,e.upgradeDocumentTree=r,e.upgradeSubtree=r,e.takeRecords=r,e["instanceo f"]=function(e,t){return e instanceof t}}else o();var i=e.upgradeDocumentTree,a= e.upgradeDocument;if(window.wrap\|\|(window.ShadowDOMPolyfill?(window.wrap=window. ShadowDOMPolyfill.wrapIfNeeded,window.unwrap=window.ShadowDOMPolyfill.unwrapIfNe eded):window.wrap=window.unwrap=function(e){return e}),window.HTMLImports&&(wind ow.HTMLImports.__importsParsingHook=function(e){e["import"]&&a(wrap(e["import"]) )}),"complete"===document.readyState\|\|e.flags.eager)t();else if("interactive"!== document.readyState\|\|window.attachEvent\|\|window.HTMLImports&&!window.HTMLImports .ready){var s=window.HTMLImports&&!window.HTMLImports.ready?"HTMLImportsLoaded": "DOMContentLoaded";window.addEventListener(s,t)}else t()}(window.CustomElements) ,function(e){var t=document.createElement("style");t.textContent="body {transiti on: opacity ease-in 0.2s; } \nbody[unresolved] {opacity: 0; display: block; over flow: hidden; position: relative; } \n";var n=document.querySelector("head");n.i nsertBefore(t,n.firstChild)}(window.WebComponents);</script>

35 </head>

36

37 <body><div hidden="" by-vulcanize=""><script>(function () {

38 function resolve() {	29 function resolve() {

39 document.body.removeAttribute('unresolved');	30 document.body.removeAttribute('unresolved');

40 }	31 }

41 if (window.WebComponents) {	32 if (window.WebComponents) {

42 addEventListener('WebComponentsReady', resolve);	33 addEventListener('WebComponentsReady', resolve);

43 } else {	34 } else {

44 if (document.readyState === 'interactive' \|\| document.readyState === 'complete') {	35 if (document.readyState === 'interactive' \|\| document.readyState === 'complete') {

45 resolve();	36 resolve();

46 } else {	37 } else {

47 addEventListener('DOMContentLoaded', resolve);	38 addEventListener('DOMContentLoaded', resolve);

(...skipping 9104 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
9152 this.generateRequest();	9143 this.generateRequest();

9153 }	9144 }

9154 }, this.debounceDuration);	9145 }, this.debounceDuration);

9155 },	9146 },

9156	9147

9157 });	9148 });

9158 </script>	9149 </script>

9159	9150

9160	9151

9161 <script>	9152 <script>

	9153 Polymer.AppLayout = Polymer.AppLayout \|\| {};

	9154

	9155 Polymer.AppLayout._scrollEffects = Polymer.AppLayout._scrollEffects \|\| {};

	9156

	9157 Polymer.AppLayout.scrollTimingFunction = function easeOutQuad(t, b, c, d) {

	9158 t /= d;

	9159 return -c * t*(t-2) + b;

	9160 };

	9161

	9162 /**

	9163 * Registers a scroll effect to be used in elements that implement the

	9164 * `Polymer.AppScrollEffectsBehavior` behavior.

	9165 *

	9166 * @param {string} effectName The effect name.

	9167 * @param {Object} effectDef The effect definition.

	9168 */

	9169 Polymer.AppLayout.registerEffect = function registerEffect(effectName, effectD ef) {

	9170 if (Polymer.AppLayout._scrollEffects[effectName] != null) {

	9171 throw new Error('effect `'+ effectName + '` is already registered.');

	9172 }

	9173 Polymer.AppLayout._scrollEffects[effectName] = effectDef;

	9174 };

	9175

	9176 /**

	9177 * Scrolls to a particular set of coordinates in a scroll target.

	9178 * If the scroll target is not defined, then it would use the main document as the target.

	9179 *

	9180 * To scroll in a smooth fashion, you can set the option `behavior: 'smooth'`. e.g.

	9181 *

	9182 * ```js

	9183 * Polymer.AppLayout.scroll({top: 0, behavior: 'smooth'});

	9184 * ```

	9185 *

	9186 * To scroll in a silent mode, without notifying scroll changes to any app-lay out elements,

	9187 * you can set the option `behavior: 'silent'`. This is particularly useful we you are using

	9188 * `app-header` and you desire to scroll to the top of a scrolling region with out running

	9189 * scroll effects. e.g.

	9190 *

	9191 * ```js

	9192 * Polymer.AppLayout.scroll({top: 0, behavior: 'silent'});

	9193 * ```

	9194 *

	9195 * @param {Object} options {top: Number, left: Number, behavior: String(smooth \| silent)}

	9196 */

	9197 Polymer.AppLayout.scroll = function scroll(options) {

	9198 options = options \|\| {};

	9199

	9200 var docEl = document.documentElement;

	9201 var target = options.target \|\| docEl;

	9202 var hasNativeScrollBehavior = 'scrollBehavior' in target.style && target.scr oll;

	9203 var scrollClassName = 'app-layout-silent-scroll';

	9204 var scrollTop = options.top \|\| 0;

	9205 var scrollLeft = options.left \|\| 0;

	9206 var scrollTo = target === docEl ? window.scrollTo :

	9207 function scrollTo(scrollLeft, scrollTop) {

	9208 target.scrollLeft = scrollLeft;

	9209 target.scrollTop = scrollTop;

	9210 };

	9211

	9212 if (options.behavior === 'smooth') {

	9213

	9214 if (hasNativeScrollBehavior) {

	9215

	9216 target.scroll(options);

	9217

	9218 } else {

	9219

	9220 var timingFn = Polymer.AppLayout.scrollTimingFunction;

	9221 var startTime = Date.now();

	9222 var currentScrollTop = target === docEl ? window.pageYOffset : target.sc rollTop;

	9223 var currentScrollLeft = target === docEl ? window.pageXOffset : target.s crollLeft;

	9224 var deltaScrollTop = scrollTop - currentScrollTop;

	9225 var deltaScrollLeft = scrollLeft - currentScrollLeft;

	9226 var duration = 300;

	9227 var updateFrame = (function updateFrame() {

	9228 var now = Date.now();

	9229 var elapsedTime = now - startTime;

	9230

	9231 if (elapsedTime < duration) {

	9232 scrollTo(timingFn(elapsedTime, currentScrollLeft, deltaScrollLeft, d uration),

	9233 timingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration ));

	9234 requestAnimationFrame(updateFrame);

	9235 } else {

	9236 scrollTo(scrollLeft, scrollTop);

	9237 }

	9238 }).bind(this);

	9239

	9240 updateFrame();

	9241 }

	9242

	9243 } else if (options.behavior === 'silent') {

	9244

	9245 docEl.classList.add(scrollClassName);

	9246

	9247 // Browsers keep the scroll momentum even if the bottom of the scrolling c ontent

	9248 // was reached. This means that calling scroll({top: 0, behavior: 'silent' }) when

	9249 // the momentum is still going will result in more scroll events and thus scroll effects.

	9250 // This seems to only apply when using document scrolling.

	9251 // Therefore, when should we remove the class from the document element?

	9252

	9253 clearInterval(Polymer.AppLayout._scrollTimer);

	9254

	9255 Polymer.AppLayout._scrollTimer = setTimeout(function() {

	9256 docEl.classList.remove(scrollClassName);

	9257 Polymer.AppLayout._scrollTimer = null;

	9258 }, 100);

	9259

	9260 scrollTo(scrollLeft, scrollTop);

	9261

	9262 } else {

	9263

	9264 scrollTo(scrollLeft, scrollTop);

	9265

	9266 }

	9267 };

	9268

	9269 </script>

	9270

	9271

	9272 <style>

	9273 /* IE 10 support for HTML5 hidden attr */

	9274 [hidden] {

	9275 display: none !important;

	9276 }

	9277 </style>

	9278

	9279 <style is="custom-style">

	9280 :root {

	9281

	9282 --layout: {

	9283 display: -ms-flexbox;

	9284 display: -webkit-flex;

	9285 display: flex;

	9286 };

	9287

	9288 --layout-inline: {

	9289 display: -ms-inline-flexbox;

	9290 display: -webkit-inline-flex;

	9291 display: inline-flex;

	9292 };

	9293

	9294 --layout-horizontal: {

	9295 @apply(--layout);

	9296

	9297 -ms-flex-direction: row;

	9298 -webkit-flex-direction: row;

	9299 flex-direction: row;

	9300 };

	9301

	9302 --layout-horizontal-reverse: {

	9303 @apply(--layout);

	9304

	9305 -ms-flex-direction: row-reverse;

	9306 -webkit-flex-direction: row-reverse;

	9307 flex-direction: row-reverse;

	9308 };

	9309

	9310 --layout-vertical: {

	9311 @apply(--layout);

	9312

	9313 -ms-flex-direction: column;

	9314 -webkit-flex-direction: column;

	9315 flex-direction: column;

	9316 };

	9317

	9318 --layout-vertical-reverse: {

	9319 @apply(--layout);

	9320

	9321 -ms-flex-direction: column-reverse;

	9322 -webkit-flex-direction: column-reverse;

	9323 flex-direction: column-reverse;

	9324 };

	9325

	9326 --layout-wrap: {

	9327 -ms-flex-wrap: wrap;

	9328 -webkit-flex-wrap: wrap;

	9329 flex-wrap: wrap;

	9330 };

	9331

	9332 --layout-wrap-reverse: {

	9333 -ms-flex-wrap: wrap-reverse;

	9334 -webkit-flex-wrap: wrap-reverse;

	9335 flex-wrap: wrap-reverse;

	9336 };

	9337

	9338 --layout-flex-auto: {

	9339 -ms-flex: 1 1 auto;

	9340 -webkit-flex: 1 1 auto;

	9341 flex: 1 1 auto;

	9342 };

	9343

	9344 --layout-flex-none: {

	9345 -ms-flex: none;

	9346 -webkit-flex: none;

	9347 flex: none;

	9348 };

	9349

	9350 --layout-flex: {

	9351 -ms-flex: 1 1 0.000000001px;

	9352 -webkit-flex: 1;

	9353 flex: 1;

	9354 -webkit-flex-basis: 0.000000001px;

	9355 flex-basis: 0.000000001px;

	9356 };

	9357

	9358 --layout-flex-2: {

	9359 -ms-flex: 2;

	9360 -webkit-flex: 2;

	9361 flex: 2;

	9362 };

	9363

	9364 --layout-flex-3: {

	9365 -ms-flex: 3;

	9366 -webkit-flex: 3;

	9367 flex: 3;

	9368 };

	9369

	9370 --layout-flex-4: {

	9371 -ms-flex: 4;

	9372 -webkit-flex: 4;

	9373 flex: 4;

	9374 };

	9375

	9376 --layout-flex-5: {

	9377 -ms-flex: 5;

	9378 -webkit-flex: 5;

	9379 flex: 5;

	9380 };

	9381

	9382 --layout-flex-6: {

	9383 -ms-flex: 6;

	9384 -webkit-flex: 6;

	9385 flex: 6;

	9386 };

	9387

	9388 --layout-flex-7: {

	9389 -ms-flex: 7;

	9390 -webkit-flex: 7;

	9391 flex: 7;

	9392 };

	9393

	9394 --layout-flex-8: {

	9395 -ms-flex: 8;

	9396 -webkit-flex: 8;

	9397 flex: 8;

	9398 };

	9399

	9400 --layout-flex-9: {

	9401 -ms-flex: 9;

	9402 -webkit-flex: 9;

	9403 flex: 9;

	9404 };

	9405

	9406 --layout-flex-10: {

	9407 -ms-flex: 10;

	9408 -webkit-flex: 10;

	9409 flex: 10;

	9410 };

	9411

	9412 --layout-flex-11: {

	9413 -ms-flex: 11;

	9414 -webkit-flex: 11;

	9415 flex: 11;

	9416 };

	9417

	9418 --layout-flex-12: {

	9419 -ms-flex: 12;

	9420 -webkit-flex: 12;

	9421 flex: 12;

	9422 };

	9423

	9424 /* alignment in cross axis */

	9425

	9426 --layout-start: {

	9427 -ms-flex-align: start;

	9428 -webkit-align-items: flex-start;

	9429 align-items: flex-start;

	9430 };

	9431

	9432 --layout-center: {

	9433 -ms-flex-align: center;

	9434 -webkit-align-items: center;

	9435 align-items: center;

	9436 };

	9437

	9438 --layout-end: {

	9439 -ms-flex-align: end;

	9440 -webkit-align-items: flex-end;

	9441 align-items: flex-end;

	9442 };

	9443

	9444 --layout-baseline: {

	9445 -ms-flex-align: baseline;

	9446 -webkit-align-items: baseline;

	9447 align-items: baseline;

	9448 };

	9449

	9450 /* alignment in main axis */

	9451

	9452 --layout-start-justified: {

	9453 -ms-flex-pack: start;

	9454 -webkit-justify-content: flex-start;

	9455 justify-content: flex-start;

	9456 };

	9457

	9458 --layout-center-justified: {

	9459 -ms-flex-pack: center;

	9460 -webkit-justify-content: center;

	9461 justify-content: center;

	9462 };

	9463

	9464 --layout-end-justified: {

	9465 -ms-flex-pack: end;

	9466 -webkit-justify-content: flex-end;

	9467 justify-content: flex-end;

	9468 };

	9469

	9470 --layout-around-justified: {

	9471 -ms-flex-pack: distribute;

	9472 -webkit-justify-content: space-around;

	9473 justify-content: space-around;

	9474 };

	9475

	9476 --layout-justified: {

	9477 -ms-flex-pack: justify;

	9478 -webkit-justify-content: space-between;

	9479 justify-content: space-between;

	9480 };

	9481

	9482 --layout-center-center: {

	9483 @apply(--layout-center);

	9484 @apply(--layout-center-justified);

	9485 };

	9486

	9487 /* self alignment */

	9488

	9489 --layout-self-start: {

	9490 -ms-align-self: flex-start;

	9491 -webkit-align-self: flex-start;

	9492 align-self: flex-start;

	9493 };

	9494

	9495 --layout-self-center: {

	9496 -ms-align-self: center;

	9497 -webkit-align-self: center;

	9498 align-self: center;

	9499 };

	9500

	9501 --layout-self-end: {

	9502 -ms-align-self: flex-end;

	9503 -webkit-align-self: flex-end;

	9504 align-self: flex-end;

	9505 };

	9506

	9507 --layout-self-stretch: {

	9508 -ms-align-self: stretch;

	9509 -webkit-align-self: stretch;

	9510 align-self: stretch;

	9511 };

	9512

	9513 --layout-self-baseline: {

	9514 -ms-align-self: baseline;

	9515 -webkit-align-self: baseline;

	9516 align-self: baseline;

	9517 };

	9518

	9519 /* multi-line alignment in main axis */

	9520

	9521 --layout-start-aligned: {

	9522 -ms-flex-line-pack: start; /* IE10 */

	9523 -ms-align-content: flex-start;

	9524 -webkit-align-content: flex-start;

	9525 align-content: flex-start;

	9526 };

	9527

	9528 --layout-end-aligned: {

	9529 -ms-flex-line-pack: end; /* IE10 */

	9530 -ms-align-content: flex-end;

	9531 -webkit-align-content: flex-end;

	9532 align-content: flex-end;

	9533 };

	9534

	9535 --layout-center-aligned: {

	9536 -ms-flex-line-pack: center; /* IE10 */

	9537 -ms-align-content: center;

	9538 -webkit-align-content: center;

	9539 align-content: center;

	9540 };

	9541

	9542 --layout-between-aligned: {

	9543 -ms-flex-line-pack: justify; /* IE10 */

	9544 -ms-align-content: space-between;

	9545 -webkit-align-content: space-between;

	9546 align-content: space-between;

	9547 };

	9548

	9549 --layout-around-aligned: {

	9550 -ms-flex-line-pack: distribute; /* IE10 */

	9551 -ms-align-content: space-around;

	9552 -webkit-align-content: space-around;

	9553 align-content: space-around;

	9554 };

	9555

	9556 /*******************************

	9557 Other Layout

	9558 *******************************/

	9559

	9560 --layout-block: {

	9561 display: block;

	9562 };

	9563

	9564 --layout-invisible: {

	9565 visibility: hidden !important;

	9566 };

	9567

	9568 --layout-relative: {

	9569 position: relative;

	9570 };

	9571

	9572 --layout-fit: {

	9573 position: absolute;

	9574 top: 0;

	9575 right: 0;

	9576 bottom: 0;

	9577 left: 0;

	9578 };

	9579

	9580 --layout-scroll: {

	9581 -webkit-overflow-scrolling: touch;

	9582 overflow: auto;

	9583 };

	9584

	9585 --layout-fullbleed: {

	9586 margin: 0;

	9587 height: 100vh;

	9588 };

	9589

	9590 /* fixed position */

	9591

	9592 --layout-fixed-top: {

	9593 position: fixed;

	9594 top: 0;

	9595 left: 0;

	9596 right: 0;

	9597 };

	9598

	9599 --layout-fixed-right: {

	9600 position: fixed;

	9601 top: 0;

	9602 right: 0;

	9603 bottom: 0;

	9604 };

	9605

	9606 --layout-fixed-bottom: {

	9607 position: fixed;

	9608 right: 0;

	9609 bottom: 0;

	9610 left: 0;

	9611 };

	9612

	9613 --layout-fixed-left: {

	9614 position: fixed;

	9615 top: 0;

	9616 bottom: 0;

	9617 left: 0;

	9618 };

	9619

	9620 }

	9621

	9622 </style>

	9623

	9624

	9625 <dom-module id="app-drawer" assetpath="bower_components/app-layout/app-drawer/">

	9626 <template>

	9627 <style>

	9628 :host {

	9629 position: fixed;

	9630 top: -120px;

	9631 right: 0;

	9632 bottom: -120px;

	9633 left: 0;

	9634

	9635 visibility: hidden;

	9636

	9637 transition: visibility 0.2s ease;

	9638 }

	9639

	9640 :host([opened]) {

	9641 visibility: visible;

	9642 }

	9643

	9644 :host([persistent]) {

	9645 width: var(--app-drawer-width, 256px);

	9646 }

	9647

	9648 :host([persistent][position=left]) {

	9649 right: auto;

	9650 }

	9651

	9652 :host([persistent][position=right]) {

	9653 left: auto;

	9654 }

	9655

	9656 #contentContainer {

	9657 position: absolute;

	9658 top: 0;

	9659 bottom: 0;

	9660 left: 0;

	9661

	9662 width: var(--app-drawer-width, 256px);

	9663 padding: 120px 0;

	9664

	9665 transition: 0.2s ease;

	9666 transition-property: -webkit-transform;

	9667 transition-property: transform;

	9668 -webkit-transform: translate3d(-100%, 0, 0);

	9669 transform: translate3d(-100%, 0, 0);

	9670

	9671 background-color: #FFF;

	9672

	9673 @apply(--app-drawer-content-container);

	9674 }

	9675

	9676 :host([position=right]) > #contentContainer {

	9677 right: 0;

	9678 left: auto;

	9679

	9680 -webkit-transform: translate3d(100%, 0, 0);

	9681 transform: translate3d(100%, 0, 0);

	9682 }

	9683

	9684 :host([swipe-open]) > #contentContainer::after {

	9685 position: fixed;

	9686 top: 0;

	9687 bottom: 0;

	9688 left: 100%;

	9689

	9690 visibility: visible;

	9691

	9692 width: 20px;

	9693

	9694 content: '';

	9695 }

	9696

	9697 :host([swipe-open][position=right]) > #contentContainer::after {

	9698 right: 100%;

	9699 left: auto;

	9700 }

	9701

	9702 :host([opened]) > #contentContainer {

	9703 -webkit-transform: translate3d(0, 0, 0);

	9704 transform: translate3d(0, 0, 0);

	9705 }

	9706

	9707 #scrim {

	9708 position: absolute;

	9709 top: 0;

	9710 right: 0;

	9711 bottom: 0;

	9712 left: 0;

	9713

	9714 transition: opacity 0.2s ease;

	9715 -webkit-transform: translateZ(0);

	9716 transform: translateZ(0);

	9717

	9718 opacity: 0;

	9719 background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));

	9720 }

	9721

	9722 :host([opened]) > #scrim {

	9723 opacity: 1;

	9724 }

	9725

	9726 :host([opened][persistent]) > #scrim {

	9727 visibility: hidden;

	9728 /**

	9729 * NOTE(keanulee): Keep both opacity: 0 and visibility: hidden to preven t the

	9730 * scrim from showing when toggling between closed and opened/persistent .

	9731 */

	9732

	9733 opacity: 0;

	9734 }

	9735 </style>

	9736

	9737 <div id="scrim" on-tap="close"></div>

	9738

	9739 <div id="contentContainer">

	9740 <content></content>

	9741 </div>

	9742 </template>

	9743

	9744 <script>

	9745

	9746 Polymer({

	9747 is: 'app-drawer',

	9748

	9749 properties: {

	9750 /**

	9751 * The opened state of the drawer.

	9752 */

	9753 opened: {

	9754 type: Boolean,

	9755 value: false,

	9756 notify: true,

	9757 reflectToAttribute: true

	9758 },

	9759

	9760 /**

	9761 * The drawer does not have a scrim and cannot be swiped close.

	9762 */

	9763 persistent: {

	9764 type: Boolean,

	9765 value: false,

	9766 reflectToAttribute: true

	9767 },

	9768

	9769 /**

	9770 * The alignment of the drawer on the screen ('left', 'right', 'start' o r 'end').

	9771 * 'start' computes to left and 'end' to right in LTR layout and vice ve rsa in RTL

	9772 * layout.

	9773 */

	9774 align: {

	9775 type: String,

	9776 value: 'left'

	9777 },

	9778

	9779 /**

	9780 * The computed, read-only position of the drawer on the screen ('left' or 'right').

	9781 */

	9782 position: {

	9783 type: String,

	9784 readOnly: true,

	9785 reflectToAttribute: true

	9786 },

	9787

	9788 /**

	9789 * Create an area at the edge of the screen to swipe open the drawer.

	9790 */

	9791 swipeOpen: {

	9792 type: Boolean,

	9793 value: false,

	9794 reflectToAttribute: true

	9795 },

	9796

	9797 /**

	9798 * Trap keyboard focus when the drawer is opened and not persistent.

	9799 */

	9800 noFocusTrap: {

	9801 type: Boolean,

	9802 value: false

	9803 }

	9804 },

	9805

	9806 observers: [

	9807 'resetLayout(position, isAttached)',

	9808 '_resetPosition(align, isAttached)'

	9809 ],

	9810

	9811 _translateOffset: 0,

	9812

	9813 _trackDetails: null,

	9814

	9815 _drawerState: 0,

	9816

	9817 _boundEscKeydownHandler: null,

	9818

	9819 _firstTabStop: null,

	9820

	9821 _lastTabStop: null,

	9822

	9823 ready: function() {

	9824 // Only transition the drawer after its first render (e.g. app-drawer-la yout

	9825 // may need to set the initial opened state which should not be transiti oned).

	9826 this._setTransitionDuration('0s');

	9827 },

	9828

	9829 attached: function() {

	9830 // Only transition the drawer after its first render (e.g. app-drawer-la yout

	9831 // may need to set the initial opened state which should not be transiti oned).

	9832 Polymer.RenderStatus.afterNextRender(this, function() {

	9833 this._setTransitionDuration('');

	9834 this._boundEscKeydownHandler = this._escKeydownHandler.bind(this);

	9835 this._resetDrawerState();

	9836

	9837 this.addEventListener('transitionend', this._transitionend.bind(this)) ;

	9838 this.addEventListener('keydown', this._tabKeydownHandler.bind(this))

	9839

	9840 // Only listen for horizontal track so you can vertically scroll insid e the drawer.

	9841 this.listen(this, 'track', '_track');

	9842 this.setScrollDirection('y');

	9843 });

	9844 },

	9845

	9846 detached: function() {

	9847 document.removeEventListener('keydown', this._boundEscKeydownHandler);

	9848 },

	9849

	9850 /**

	9851 * Opens the drawer.

	9852 */

	9853 open: function() {

	9854 this.opened = true;

	9855 },

	9856

	9857 /**

	9858 * Closes the drawer.

	9859 */

	9860 close: function() {

	9861 this.opened = false;

	9862 },

	9863

	9864 /**

	9865 * Toggles the drawer open and close.

	9866 */

	9867 toggle: function() {

	9868 this.opened = !this.opened;

	9869 },

	9870

	9871 /**

	9872 * Gets the width of the drawer.

	9873 *

	9874 * @return {number} The width of the drawer in pixels.

	9875 */

	9876 getWidth: function() {

	9877 return this.$.contentContainer.offsetWidth;

	9878 },

	9879

	9880 /**

	9881 * Resets the layout. The event fired is used by app-drawer-layout to posi tion the

	9882 * content.

	9883 *

	9884 * @method resetLayout

	9885 */

	9886 resetLayout: function() {

	9887 this.fire('app-drawer-reset-layout');

	9888 },

	9889

	9890 _isRTL: function() {

	9891 return window.getComputedStyle(this).direction === 'rtl';

	9892 },

	9893

	9894 _resetPosition: function() {

	9895 switch (this.align) {

	9896 case 'start':

	9897 this._setPosition(this._isRTL() ? 'right' : 'left');

	9898 return;

	9899 case 'end':

	9900 this._setPosition(this._isRTL() ? 'left' : 'right');

	9901 return;

	9902 }

	9903 this._setPosition(this.align);

	9904 },

	9905

	9906 _escKeydownHandler: function(event) {

	9907 var ESC_KEYCODE = 27;

	9908 if (event.keyCode === ESC_KEYCODE) {

	9909 // Prevent any side effects if app-drawer closes.

	9910 event.preventDefault();

	9911 this.close();

	9912 }

	9913 },

	9914

	9915 _track: function(event) {

	9916 if (this.persistent) {

	9917 return;

	9918 }

	9919

	9920 // Disable user selection on desktop.

	9921 event.preventDefault();

	9922

	9923 switch (event.detail.state) {

	9924 case 'start':

	9925 this._trackStart(event);

	9926 break;

	9927 case 'track':

	9928 this._trackMove(event);

	9929 break;

	9930 case 'end':

	9931 this._trackEnd(event);

	9932 break;

	9933 }

	9934 },

	9935

	9936 _trackStart: function(event) {

	9937 this._drawerState = this._DRAWER_STATE.TRACKING;

	9938

	9939 // Disable transitions since style attributes will reflect user track ev ents.

	9940 this._setTransitionDuration('0s');

	9941 this.style.visibility = 'visible';

	9942

	9943 var rect = this.$.contentContainer.getBoundingClientRect();

	9944 if (this.position === 'left') {

	9945 this._translateOffset = rect.left;

	9946 } else {

	9947 this._translateOffset = rect.right - window.innerWidth;

	9948 }

	9949

	9950 this._trackDetails = [];

	9951 },

	9952

	9953 _trackMove: function(event) {

	9954 this._translateDrawer(event.detail.dx + this._translateOffset);

	9955

	9956 // Use Date.now() since event.timeStamp is inconsistent across browsers (e.g. most

	9957 // browsers use milliseconds but FF 44 uses microseconds).

	9958 this._trackDetails.push({

	9959 dx: event.detail.dx,

	9960 timeStamp: Date.now()

	9961 });

	9962 },

	9963

	9964 _trackEnd: function(event) {

	9965 var x = event.detail.dx + this._translateOffset;

	9966 var drawerWidth = this.getWidth();

	9967 var isPositionLeft = this.position === 'left';

	9968 var isInEndState = isPositionLeft ? (x >= 0 \|\| x <= -drawerWidth) :

	9969 (x <= 0 \|\| x >= drawerWidth);

	9970

	9971 if (!isInEndState) {

	9972 // No longer need the track events after this method returns - allow t hem to be GC'd.

	9973 var trackDetails = this._trackDetails;

	9974 this._trackDetails = null;

	9975

	9976 this._flingDrawer(event, trackDetails);

	9977 if (this._drawerState === this._DRAWER_STATE.FLINGING) {

	9978 return;

	9979 }

	9980 }

	9981

	9982 // If the drawer is not flinging, toggle the opened state based on the p osition of

	9983 // the drawer.

	9984 var halfWidth = drawerWidth / 2;

	9985 if (event.detail.dx < -halfWidth) {

	9986 this.opened = this.position === 'right';

	9987 } else if (event.detail.dx > halfWidth) {

	9988 this.opened = this.position === 'left';

	9989 }

	9990

	9991 // Trigger app-drawer-transitioned now since there will be no transition end event.

	9992 if (isInEndState) {

	9993 this._resetDrawerState();

	9994 }

	9995

	9996 this._setTransitionDuration('');

	9997 this._resetDrawerTranslate();

	9998 this.style.visibility = '';

	9999 },

	10000

	10001 _calculateVelocity: function(event, trackDetails) {

	10002 // Find the oldest track event that is within 100ms using binary search.

	10003 var now = Date.now();

	10004 var timeLowerBound = now - 100;

	10005 var trackDetail;

	10006 var min = 0;

	10007 var max = trackDetails.length - 1;

	10008

	10009 while (min <= max) {

	10010 // Floor of average of min and max.

	10011 var mid = (min + max) >> 1;

	10012 var d = trackDetails[mid];

	10013 if (d.timeStamp >= timeLowerBound) {

	10014 trackDetail = d;

	10015 max = mid - 1;

	10016 } else {

	10017 min = mid + 1;

	10018 }

	10019 }

	10020

	10021 if (trackDetail) {

	10022 var dx = event.detail.dx - trackDetail.dx;

	10023 var dt = (now - trackDetail.timeStamp) \|\| 1;

	10024 return dx / dt;

	10025 }

	10026 return 0;

	10027 },

	10028

	10029 _flingDrawer: function(event, trackDetails) {

	10030 var velocity = this._calculateVelocity(event, trackDetails);

	10031

	10032 // Do not fling if velocity is not above a threshold.

	10033 if (Math.abs(velocity) < this._MIN_FLING_THRESHOLD) {

	10034 return;

	10035 }

	10036

	10037 this._drawerState = this._DRAWER_STATE.FLINGING;

	10038

	10039 var x = event.detail.dx + this._translateOffset;

	10040 var drawerWidth = this.getWidth();

	10041 var isPositionLeft = this.position === 'left';

	10042 var isVelocityPositive = velocity > 0;

	10043 var isClosingLeft = !isVelocityPositive && isPositionLeft;

	10044 var isClosingRight = isVelocityPositive && !isPositionLeft;

	10045 var dx;

	10046 if (isClosingLeft) {

	10047 dx = -(x + drawerWidth);

	10048 } else if (isClosingRight) {

	10049 dx = (drawerWidth - x);

	10050 } else {

	10051 dx = -x;

	10052 }

	10053

	10054 // Enforce a minimum transition velocity to make the drawer feel snappy.

	10055 if (isVelocityPositive) {

	10056 velocity = Math.max(velocity, this._MIN_TRANSITION_VELOCITY);

	10057 this.opened = this.position === 'left';

	10058 } else {

	10059 velocity = Math.min(velocity, -this._MIN_TRANSITION_VELOCITY);

	10060 this.opened = this.position === 'right';

	10061 }

	10062

	10063 // Calculate the amount of time needed to finish the transition based on the

	10064 // initial slope of the timing function.

	10065 this._setTransitionDuration((this._FLING_INITIAL_SLOPE * dx / velocity) + 'ms');

	10066 this._setTransitionTimingFunction(this._FLING_TIMING_FUNCTION);

	10067

	10068 this._resetDrawerTranslate();

	10069 },

	10070

	10071 _transitionend: function(event) {

	10072 // contentContainer will transition on opened state changed, and scrim w ill

	10073 // transition on persistent state changed when opened - these are the

	10074 // transitions we are interested in.

	10075 var target = Polymer.dom(event).rootTarget;

	10076 if (target === this.$.contentContainer \|\| target === this.$.scrim) {

	10077

	10078 // If the drawer was flinging, we need to reset the style attributes.

	10079 if (this._drawerState === this._DRAWER_STATE.FLINGING) {

	10080 this._setTransitionDuration('');

	10081 this._setTransitionTimingFunction('');

	10082 this.style.visibility = '';

	10083 }

	10084

	10085 this._resetDrawerState();

	10086 }

	10087 },

	10088

	10089 _setTransitionDuration: function(duration) {

	10090 this.$.contentContainer.style.transitionDuration = duration;

	10091 this.$.scrim.style.transitionDuration = duration;

	10092 },

	10093

	10094 _setTransitionTimingFunction: function(timingFunction) {

	10095 this.$.contentContainer.style.transitionTimingFunction = timingFunction;

	10096 this.$.scrim.style.transitionTimingFunction = timingFunction;

	10097 },

	10098

	10099 _translateDrawer: function(x) {

	10100 var drawerWidth = this.getWidth();

	10101

	10102 if (this.position === 'left') {

	10103 x = Math.max(-drawerWidth, Math.min(x, 0));

	10104 this.$.scrim.style.opacity = 1 + x / drawerWidth;

	10105 } else {

	10106 x = Math.max(0, Math.min(x, drawerWidth));

	10107 this.$.scrim.style.opacity = 1 - x / drawerWidth;

	10108 }

	10109

	10110 this.translate3d(x + 'px', '0', '0', this.$.contentContainer);

	10111 },

	10112

	10113 _resetDrawerTranslate: function() {

	10114 this.$.scrim.style.opacity = '';

	10115 this.transform('', this.$.contentContainer);

	10116 },

	10117

	10118 _resetDrawerState: function() {

	10119 var oldState = this._drawerState;

	10120 if (this.opened) {

	10121 this._drawerState = this.persistent ?

	10122 this._DRAWER_STATE.OPENED_PERSISTENT : this._DRAWER_STATE.OPENED;

	10123 } else {

	10124 this._drawerState = this._DRAWER_STATE.CLOSED;

	10125 }

	10126

	10127 if (oldState !== this._drawerState) {

	10128 if (this._drawerState === this._DRAWER_STATE.OPENED) {

	10129 this._setKeyboardFocusTrap();

	10130 document.addEventListener('keydown', this._boundEscKeydownHandler);

	10131 document.body.style.overflow = 'hidden';

	10132 } else {

	10133 document.removeEventListener('keydown', this._boundEscKeydownHandler );

	10134 document.body.style.overflow = '';

	10135 }

	10136

	10137 // Don't fire the event on initial load.

	10138 if (oldState !== this._DRAWER_STATE.INIT) {

	10139 this.fire('app-drawer-transitioned');

	10140 }

	10141 }

	10142 },

	10143

	10144 _setKeyboardFocusTrap: function() {

	10145 if (this.noFocusTrap) {

	10146 return;

	10147 }

	10148

	10149 // NOTE: Unless we use /deep/ (which we shouldn't since it's deprecated) , this will

	10150 // not select focusable elements inside shadow roots.

	10151 var focusableElementsSelector = [

	10152 'a[href]:not([tabindex="-1"])',

	10153 'area[href]:not([tabindex="-1"])',

	10154 'input:not([disabled]):not([tabindex="-1"])',

	10155 'select:not([disabled]):not([tabindex="-1"])',

	10156 'textarea:not([disabled]):not([tabindex="-1"])',

	10157 'button:not([disabled]):not([tabindex="-1"])',

	10158 'iframe:not([tabindex="-1"])',

	10159 '[tabindex]:not([tabindex="-1"])',

	10160 '[contentEditable=true]:not([tabindex="-1"])'

	10161 ].join(',');

	10162 var focusableElements = Polymer.dom(this).querySelectorAll(focusableElem entsSelector);

	10163

	10164 if (focusableElements.length > 0) {

	10165 this._firstTabStop = focusableElements[0];

	10166 this._lastTabStop = focusableElements[focusableElements.length - 1];

	10167 } else {

	10168 // Reset saved tab stops when there are no focusable elements in the d rawer.

	10169 this._firstTabStop = null;

	10170 this._lastTabStop = null;

	10171 }

	10172

	10173 // Focus on app-drawer if it has non-zero tabindex. Otherwise, focus the first focusable

	10174 // element in the drawer, if it exists. Use the tabindex attribute since the this.tabIndex

	10175 // property in IE/Edge returns 0 (instead of -1) when the attribute is n ot set.

	10176 var tabindex = this.getAttribute('tabindex');

	10177 if (tabindex && parseInt(tabindex, 10) > -1) {

	10178 this.focus();

	10179 } else if (this._firstTabStop) {

	10180 this._firstTabStop.focus();

	10181 }

	10182 },

	10183

	10184 _tabKeydownHandler: function(event) {

	10185 if (this.noFocusTrap) {

	10186 return;

	10187 }

	10188

	10189 var TAB_KEYCODE = 9;

	10190 if (this._drawerState === this._DRAWER_STATE.OPENED && event.keyCode === TAB_KEYCODE) {

	10191 if (event.shiftKey) {

	10192 if (this._firstTabStop && Polymer.dom(event).localTarget === this._f irstTabStop) {

	10193 event.preventDefault();

	10194 this._lastTabStop.focus();

	10195 }

	10196 } else {

	10197 if (this._lastTabStop && Polymer.dom(event).localTarget === this._la stTabStop) {

	10198 event.preventDefault();

	10199 this._firstTabStop.focus();

	10200 }

	10201 }

	10202 }

	10203 },

	10204

	10205 _MIN_FLING_THRESHOLD: 0.2,

	10206

	10207 _MIN_TRANSITION_VELOCITY: 1.2,

	10208

	10209 _FLING_TIMING_FUNCTION: 'cubic-bezier(0.667, 1, 0.667, 1)',

	10210

	10211 _FLING_INITIAL_SLOPE: 1.5,

	10212

	10213 _DRAWER_STATE: {

	10214 INIT: 0,

	10215 OPENED: 1,

	10216 OPENED_PERSISTENT: 2,

	10217 CLOSED: 3,

	10218 TRACKING: 4,

	10219 FLINGING: 5

	10220 }

	10221

	10222 /**

	10223 * Fired when the layout of app-drawer has changed.

	10224 *

	10225 * @event app-drawer-reset-layout

	10226 */

	10227

	10228 /**

	10229 * Fired when app-drawer has finished transitioning.

	10230 *

	10231 * @event app-drawer-transitioned

	10232 */

	10233 });

	10234 </script>

	10235 </dom-module>

	10236

	10237

	10238 <script>

	10239

	10240 Polymer({

	10241

	10242 is: 'iron-media-query',

	10243

	10244 properties: {

	10245

	10246 /**

	10247 * The Boolean return value of the media query.

	10248 */

	10249 queryMatches: {

	10250 type: Boolean,

	10251 value: false,

	10252 readOnly: true,

	10253 notify: true

	10254 },

	10255

	10256 /**

	10257 * The CSS media query to evaluate.

	10258 */

	10259 query: {

	10260 type: String,

	10261 observer: 'queryChanged'

	10262 },

	10263

	10264 /**

	10265 * If true, the query attribute is assumed to be a complete media query

	10266 * string rather than a single media feature.

	10267 */

	10268 full: {

	10269 type: Boolean,

	10270 value: false

	10271 },

	10272

	10273 /**

	10274 * @type {function(MediaQueryList)}

	10275 */

	10276 _boundMQHandler: {

	10277 value: function() {

	10278 return this.queryHandler.bind(this);

	10279 }

	10280 },

	10281

	10282 /**

	10283 * @type {MediaQueryList}

	10284 */

	10285 _mq: {

	10286 value: null

	10287 }

	10288 },

	10289

	10290 attached: function() {

	10291 this.style.display = 'none';

	10292 this.queryChanged();

	10293 },

	10294

	10295 detached: function() {

	10296 this._remove();

	10297 },

	10298

	10299 _add: function() {

	10300 if (this._mq) {

	10301 this._mq.addListener(this._boundMQHandler);

	10302 }

	10303 },

	10304

	10305 _remove: function() {

	10306 if (this._mq) {

	10307 this._mq.removeListener(this._boundMQHandler);

	10308 }

	10309 this._mq = null;

	10310 },

	10311

	10312 queryChanged: function() {

	10313 this._remove();

	10314 var query = this.query;

	10315 if (!query) {

	10316 return;

	10317 }

	10318 if (!this.full && query[0] !== '(') {

	10319 query = '(' + query + ')';

	10320 }

	10321 this._mq = window.matchMedia(query);

	10322 this._add();

	10323 this.queryHandler(this._mq);

	10324 },

	10325

	10326 queryHandler: function(mq) {

	10327 this._setQueryMatches(mq.matches);

	10328 }

	10329

	10330 });

	10331

	10332 </script>

	10333 <script>

	10334 /**

	10335 * `IronResizableBehavior` is a behavior that can be used in Polymer elements to

	10336 * coordinate the flow of resize events between "resizers" (elements that cont rol the

	10337 * size or hidden state of their children) and "resizables" (elements that nee d to be

	10338 * notified when they are resized or un-hidden by their parents in order to ta ke

	10339 * action on their new measurements).

	10340 *

	10341 * Elements that perform measurement should add the `IronResizableBehavior` be havior to

	10342 * their element definition and listen for the `iron-resize` event on themselv es.

	10343 * This event will be fired when they become showing after having been hidden,

	10344 * when they are resized explicitly by another resizable, or when the window h as been

	10345 * resized.

	10346 *

	10347 * Note, the `iron-resize` event is non-bubbling.

	10348 *

	10349 * @polymerBehavior Polymer.IronResizableBehavior

	10350 * @demo demo/index.html

	10351 **/

	10352 Polymer.IronResizableBehavior = {

	10353 properties: {

	10354 /**

	10355 * The closest ancestor element that implements `IronResizableBehavior`.

	10356 */

	10357 _parentResizable: {

	10358 type: Object,

	10359 observer: '_parentResizableChanged'

	10360 },

	10361

	10362 /**

	10363 * True if this element is currently notifying its descedant elements of

	10364 * resize.

	10365 */

	10366 _notifyingDescendant: {

	10367 type: Boolean,

	10368 value: false

	10369 }

	10370 },

	10371

	10372 listeners: {

	10373 'iron-request-resize-notifications': '_onIronRequestResizeNotifications'

	10374 },

	10375

	10376 created: function() {

	10377 // We don't really need property effects on these, and also we want them

	10378 // to be created before the `_parentResizable` observer fires:

	10379 this._interestedResizables = [];

	10380 this._boundNotifyResize = this.notifyResize.bind(this);

	10381 },

	10382

	10383 attached: function() {

	10384 this.fire('iron-request-resize-notifications', null, {

	10385 node: this,

	10386 bubbles: true,

	10387 cancelable: true

	10388 });

	10389

	10390 if (!this._parentResizable) {

	10391 window.addEventListener('resize', this._boundNotifyResize);

	10392 this.notifyResize();

	10393 }

	10394 },

	10395

	10396 detached: function() {

	10397 if (this._parentResizable) {

	10398 this._parentResizable.stopResizeNotificationsFor(this);

	10399 } else {

	10400 window.removeEventListener('resize', this._boundNotifyResize);

	10401 }

	10402

	10403 this._parentResizable = null;

	10404 },

	10405

	10406 /**

	10407 * Can be called to manually notify a resizable and its descendant

	10408 * resizables of a resize change.

	10409 */

	10410 notifyResize: function() {

	10411 if (!this.isAttached) {

	10412 return;

	10413 }

	10414

	10415 this._interestedResizables.forEach(function(resizable) {

	10416 if (this.resizerShouldNotify(resizable)) {

	10417 this._notifyDescendant(resizable);

	10418 }

	10419 }, this);

	10420

	10421 this._fireResize();

	10422 },

	10423

	10424 /**

	10425 * Used to assign the closest resizable ancestor to this resizable

	10426 * if the ancestor detects a request for notifications.

	10427 */

	10428 assignParentResizable: function(parentResizable) {

	10429 this._parentResizable = parentResizable;

	10430 },

	10431

	10432 /**

	10433 * Used to remove a resizable descendant from the list of descendants

	10434 * that should be notified of a resize change.

	10435 */

	10436 stopResizeNotificationsFor: function(target) {

	10437 var index = this._interestedResizables.indexOf(target);

	10438

	10439 if (index > -1) {

	10440 this._interestedResizables.splice(index, 1);

	10441 this.unlisten(target, 'iron-resize', '_onDescendantIronResize');

	10442 }

	10443 },

	10444

	10445 /**

	10446 * This method can be overridden to filter nested elements that should or

	10447 * should not be notified by the current element. Return true if an element

	10448 * should be notified, or false if it should not be notified.

	10449 *

	10450 * @param {HTMLElement} element A candidate descendant element that

	10451 * implements `IronResizableBehavior`.

	10452 * @return {boolean} True if the `element` should be notified of resize.

	10453 */

	10454 resizerShouldNotify: function(element) { return true; },

	10455

	10456 _onDescendantIronResize: function(event) {

	10457 if (this._notifyingDescendant) {

	10458 event.stopPropagation();

	10459 return;

	10460 }

	10461

	10462 // NOTE(cdata): In ShadowDOM, event retargetting makes echoing of the

	10463 // otherwise non-bubbling event "just work." We do it manually here for

	10464 // the case where Polymer is not using shadow roots for whatever reason:

	10465 if (!Polymer.Settings.useShadow) {

	10466 this._fireResize();

	10467 }

	10468 },

	10469

	10470 _fireResize: function() {

	10471 this.fire('iron-resize', null, {

	10472 node: this,

	10473 bubbles: false

	10474 });

	10475 },

	10476

	10477 _onIronRequestResizeNotifications: function(event) {

	10478 var target = event.path ? event.path[0] : event.target;

	10479

	10480 if (target === this) {

	10481 return;

	10482 }

	10483

	10484 if (this._interestedResizables.indexOf(target) === -1) {

	10485 this._interestedResizables.push(target);

	10486 this.listen(target, 'iron-resize', '_onDescendantIronResize');

	10487 }

	10488

	10489 target.assignParentResizable(this);

	10490 this._notifyDescendant(target);

	10491

	10492 event.stopPropagation();

	10493 },

	10494

	10495 _parentResizableChanged: function(parentResizable) {

	10496 if (parentResizable) {

	10497 window.removeEventListener('resize', this._boundNotifyResize);

	10498 }

	10499 },

	10500

	10501 _notifyDescendant: function(descendant) {

	10502 // NOTE(cdata): In IE10, attached is fired on children first, so it's

	10503 // important not to notify them if the parent is not attached yet (or

	10504 // else they will get redundantly notified when the parent attaches).

	10505 if (!this.isAttached) {

	10506 return;

	10507 }

	10508

	10509 this._notifyingDescendant = true;

	10510 descendant.notifyResize();

	10511 this._notifyingDescendant = false;

	10512 }

	10513 };

	10514 </script>

	10515

	10516

	10517

	10518 <dom-module id="app-drawer-layout" assetpath="bower_components/app-layout/app-dr awer-layout/">

	10519 <template>

	10520 <style>

	10521 :host {

	10522 display: block;

	10523 }

	10524

	10525 :host([fullbleed]) {

	10526 @apply(--layout-fit);

	10527 }

	10528

	10529 #contentContainer {

	10530 position: relative;

	10531

	10532 height: 100%;

	10533

	10534 transition: var(--app-drawer-layout-content-transition, none);

	10535 }

	10536

	10537 #contentContainer:not(.narrow) > ::content [drawer-toggle] {

	10538 display: none;

	10539 }

	10540 </style>

	10541

	10542 <div id="contentContainer">

	10543 <content select=":not(app-drawer)"></content>

	10544 </div>

	10545

	10546 <content id="drawerContent" select="app-drawer"></content>

	10547

	10548 <iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)] ]" on-query-matches-changed="_onQueryMatchesChanged"></iron-media-query>

	10549 </template>

	10550

	10551 <script>

	10552 Polymer({

	10553 is: 'app-drawer-layout',

	10554

	10555 behaviors: [

	10556 Polymer.IronResizableBehavior

	10557 ],

	10558

	10559 properties: {

	10560 /**

	10561 * If true, ignore `responsiveWidth` setting and force the narrow layout .

	10562 */

	10563 forceNarrow: {

	10564 type: Boolean,

	10565 value: false

	10566 },

	10567

	10568 /**

	10569 * If the viewport's width is smaller than this value, the panel will ch ange to narrow

	10570 * layout. In the mode the drawer will be closed.

	10571 */

	10572 responsiveWidth: {

	10573 type: String,

	10574 value: '640px'

	10575 },

	10576

	10577 /**

	10578 * Returns true if it is in narrow layout. This is useful if you need to show/hide

	10579 * elements based on the layout.

	10580 */

	10581 narrow: {

	10582 type: Boolean,

	10583 readOnly: true,

	10584 notify: true

	10585 }

	10586 },

	10587

	10588 listeners: {

	10589 'tap': '_tapHandler',

	10590 'app-drawer-reset-layout': 'resetLayout'

	10591 },

	10592

	10593 observers: [

	10594 'resetLayout(narrow, isAttached)'

	10595 ],

	10596

	10597 /**

	10598 * A reference to the app-drawer element.

	10599 *

	10600 * @property drawer

	10601 */

	10602 get drawer() {

	10603 return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0];

	10604 },

	10605

	10606 _tapHandler: function(e) {

	10607 var target = Polymer.dom(e).localTarget;

	10608 if (target && target.hasAttribute('drawer-toggle')) {

	10609 this.drawer.toggle();

	10610 }

	10611 },

	10612

	10613 resetLayout: function() {

	10614 this.debounce('_resetLayout', function() {

	10615 var drawer = this.drawer;

	10616 var contentContainer = this.$.contentContainer;

	10617

	10618 if (this.narrow) {

	10619 drawer.opened = drawer.persistent = false;

	10620 contentContainer.classList.add('narrow');

	10621

	10622 contentContainer.style.marginLeft = '';

	10623 contentContainer.style.marginRight = '';

	10624 } else {

	10625 drawer.opened = drawer.persistent = true;

	10626 contentContainer.classList.remove('narrow');

	10627

	10628 var drawerWidth = this.drawer.getWidth();

	10629 if (drawer.position == 'right') {

	10630 contentContainer.style.marginLeft = '';

	10631 contentContainer.style.marginRight = drawerWidth + 'px';

	10632 } else {

	10633 contentContainer.style.marginLeft = drawerWidth + 'px';

	10634 contentContainer.style.marginRight = '';

	10635 }

	10636 }

	10637

	10638 this.notifyResize();

	10639 });

	10640 },

	10641

	10642 _onQueryMatchesChanged: function(event) {

	10643 this._setNarrow(event.detail.value);

	10644 },

	10645

	10646 _computeMediaQuery: function(forceNarrow, responsiveWidth) {

	10647 return forceNarrow ? '(min-width: 0px)' : '(max-width: ' + responsiveWid th + ')';

	10648 }

	10649 });

	10650 </script>

	10651 </dom-module>

	10652

	10653

	10654 <dom-module id="app-grid-style" assetpath="bower_components/app-layout/app-grid/ ">

	10655 <template>

	10656 <style>

	10657

	10658 :host {

	10659 /**

	10660 * The width for the expandible item is:

	10661 * ((100% - subPixelAdjustment) / columns * itemColumns - gutter * (colu mns - itemColumns)

	10662 *

	10663 * - subPixelAdjustment: 0.1px (Required for IE 11)

	10664 * - gutter: var(--app-grid-gutter)

	10665 * - columns: var(--app-grid-columns)

	10666 * - itemColumn: var(--app-grid-expandible-item-columns)

	10667 */

	10668 --app-grid-expandible-item: {

	10669 -webkit-flex-basis: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - (var(--app-grid-gutter, 0px) * (va r(--app-grid-columns, 1) - var(--app-grid-expandible-item-columns, 1)))) !import ant;

	10670 flex-basis: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--a pp-grid-expandible-item-columns, 1) - (var(--app-grid-gutter, 0px) * (var(--app- grid-columns, 1) - var(--app-grid-expandible-item-columns, 1)))) !important;

	10671 max-width: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--ap p-grid-expandible-item-columns, 1) - (var(--app-grid-gutter, 0px) * (var(--app-g rid-columns, 1) - var(--app-grid-expandible-item-columns, 1)))) !important;

	10672

	10673 };

	10674 }

	10675

	10676 .app-grid {

	10677 display: -ms-flexbox;

	10678 display: -webkit-flex;

	10679 display: flex;

	10680

	10681 -ms-flex-direction: row;

	10682 -webkit-flex-direction: row;

	10683 flex-direction: row;

	10684

	10685 -ms-flex-wrap: wrap;

	10686 -webkit-flex-wrap: wrap;

	10687 flex-wrap: wrap;

	10688

	10689 margin-top: var(--app-grid-gutter, 0px);

	10690 margin-left: var(--app-grid-gutter, 0px);

	10691 }

	10692

	10693 .app-grid > * {

	10694 /* Required for IE 10 */

	10695 -ms-flex: 1 1 100%;

	10696 -webkit-flex: 1;

	10697 flex: 1;

	10698

	10699 /* The width for an item is: (100% - subPixelAdjustment - gutter * colum ns) / columns */

	10700 -webkit-flex-basis: calc((100% - 0.1px - (var(--app-grid-gutter, 0px) * var(--app-grid-columns, 1))) / var(--app-grid-columns, 1));

	10701 flex-basis: calc((100% - 0.1px - (var(--app-grid-gutter, 0px) * var(--ap p-grid-columns, 1))) / var(--app-grid-columns, 1));

	10702

	10703 max-width: calc((100% - 0.1px - (var(--app-grid-gutter, 0px) * var(--app -grid-columns, 1))) / var(--app-grid-columns, 1));

	10704 margin-bottom: var(--app-grid-gutter, 0px);

	10705 margin-right: var(--app-grid-gutter, 0px);

	10706 height: var(--app-grid-item-height);

	10707 box-sizing: border-box;

	10708 }

	10709

	10710 .app-grid[has-aspect-ratio] > * {

	10711 position: relative;

	10712 }

	10713

	10714 .app-grid[has-aspect-ratio] > *::before {

	10715 display: block;

	10716 content: "";

	10717 padding-top: var(--app-grid-item-height, 100%);

	10718 }

	10719

	10720 .app-grid[has-aspect-ratio] > * > * {

	10721 position: absolute;

	10722 top: 0;

	10723 right: 0;

	10724 bottom: 0;

	10725 left: 0;

	10726 }

	10727

	10728 </style>

	10729 </template>

	10730 </dom-module>

	10731 <script>

	10732

	10733 /**

	10734 * `Polymer.IronScrollTargetBehavior` allows an element to respond to scroll e vents from a

	10735 * designated scroll target.

	10736 *

	10737 * Elements that consume this behavior can override the `_scrollHandler`

	10738 * method to add logic on the scroll event.

	10739 *

	10740 * @demo demo/scrolling-region.html Scrolling Region

	10741 * @demo demo/document.html Document Element

	10742 * @polymerBehavior

	10743 */

	10744 Polymer.IronScrollTargetBehavior = {

	10745

	10746 properties: {

	10747

	10748 /**

	10749 * Specifies the element that will handle the scroll event

	10750 * on the behalf of the current element. This is typically a reference to an element,

	10751 * but there are a few more posibilities:

	10752 *

	10753 * ### Elements id

	10754 *

	10755 *```html

	10756 * <div id="scrollable-element" style="overflow: auto;">

	10757 * <x-element scroll-target="scrollable-element">

	10758 * <!-- Content-->

	10759 * </x-element>

	10760 * </div>

	10761 *```

	10762 * In this case, the `scrollTarget` will point to the outer div element.

	10763 *

	10764 * ### Document scrolling

	10765 *

	10766 * For document scrolling, you can use the reserved word `document`:

	10767 *

	10768 *```html

	10769 * <x-element scroll-target="document">

	10770 * <!-- Content -->

	10771 * </x-element>

	10772 *```

	10773 *

	10774 * ### Elements reference

	10775 *

	10776 *```js

	10777 * appHeader.scrollTarget = document.querySelector('#scrollable-element');

	10778 *```

	10779 *

	10780 * @type {HTMLElement}

	10781 */

	10782 scrollTarget: {

	10783 type: HTMLElement,

	10784 value: function() {

	10785 return this._defaultScrollTarget;

	10786 }

	10787 }

	10788 },

	10789

	10790 observers: [

	10791 '_scrollTargetChanged(scrollTarget, isAttached)'

	10792 ],

	10793

	10794 _scrollTargetChanged: function(scrollTarget, isAttached) {

	10795 var eventTarget;

	10796

	10797 if (this._oldScrollTarget) {

	10798 eventTarget = this._oldScrollTarget === this._doc ? window : this._oldSc rollTarget;

	10799 eventTarget.removeEventListener('scroll', this._boundScrollHandler);

	10800 this._oldScrollTarget = null;

	10801 }

	10802

	10803 if (!isAttached) {

	10804 return;

	10805 }

	10806 // Support element id references

	10807 if (scrollTarget === 'document') {

	10808

	10809 this.scrollTarget = this._doc;

	10810

	10811 } else if (typeof scrollTarget === 'string') {

	10812

	10813 this.scrollTarget = this.domHost ? this.domHost.$[scrollTarget] :

	10814 Polymer.dom(this.ownerDocument).querySelector('#' + scrollTarget);

	10815

	10816 } else if (this._isValidScrollTarget()) {

	10817

	10818 eventTarget = scrollTarget === this._doc ? window : scrollTarget;

	10819 this._boundScrollHandler = this._boundScrollHandler \|\| this._scrollHandl er.bind(this);

	10820 this._oldScrollTarget = scrollTarget;

	10821

	10822 eventTarget.addEventListener('scroll', this._boundScrollHandler);

	10823 }

	10824 },

	10825

	10826 /**

	10827 * Runs on every scroll event. Consumer of this behavior may override this m ethod.

	10828 *

	10829 * @protected

	10830 */

	10831 _scrollHandler: function scrollHandler() {},

	10832

	10833 /**

	10834 * The default scroll target. Consumers of this behavior may want to customi ze

	10835 * the default scroll target.

	10836 *

	10837 * @type {Element}

	10838 */

	10839 get _defaultScrollTarget() {

	10840 return this._doc;

	10841 },

	10842

	10843 /**

	10844 * Shortcut for the document element

	10845 *

	10846 * @type {Element}

	10847 */

	10848 get _doc() {

	10849 return this.ownerDocument.documentElement;

	10850 },

	10851

	10852 /**

	10853 * Gets the number of pixels that the content of an element is scrolled upwa rd.

	10854 *

	10855 * @type {number}

	10856 */

	10857 get _scrollTop() {

	10858 if (this._isValidScrollTarget()) {

	10859 return this.scrollTarget === this._doc ? window.pageYOffset : this.scrol lTarget.scrollTop;

	10860 }

	10861 return 0;

	10862 },

	10863

	10864 /**

	10865 * Gets the number of pixels that the content of an element is scrolled to t he left.

	10866 *

	10867 * @type {number}

	10868 */

	10869 get _scrollLeft() {

	10870 if (this._isValidScrollTarget()) {

	10871 return this.scrollTarget === this._doc ? window.pageXOffset : this.scrol lTarget.scrollLeft;

	10872 }

	10873 return 0;

	10874 },

	10875

	10876 /**

	10877 * Sets the number of pixels that the content of an element is scrolled upwa rd.

	10878 *

	10879 * @type {number}

	10880 */

	10881 set _scrollTop(top) {

	10882 if (this.scrollTarget === this._doc) {

	10883 window.scrollTo(window.pageXOffset, top);

	10884 } else if (this._isValidScrollTarget()) {

	10885 this.scrollTarget.scrollTop = top;

	10886 }

	10887 },

	10888

	10889 /**

	10890 * Sets the number of pixels that the content of an element is scrolled to t he left.

	10891 *

	10892 * @type {number}

	10893 */

	10894 set _scrollLeft(left) {

	10895 if (this.scrollTarget === this._doc) {

	10896 window.scrollTo(left, window.pageYOffset);

	10897 } else if (this._isValidScrollTarget()) {

	10898 this.scrollTarget.scrollLeft = left;

	10899 }

	10900 },

	10901

	10902 /**

	10903 * Scrolls the content to a particular place.

	10904 *

	10905 * @method scroll

	10906 * @param {number} left The left position

	10907 * @param {number} top The top position

	10908 */

	10909 scroll: function(left, top) {

	10910 if (this.scrollTarget === this._doc) {

	10911 window.scrollTo(left, top);

	10912 } else if (this._isValidScrollTarget()) {

	10913 this.scrollTarget.scrollLeft = left;

	10914 this.scrollTarget.scrollTop = top;

	10915 }

	10916 },

	10917

	10918 /**

	10919 * Gets the width of the scroll target.

	10920 *

	10921 * @type {number}

	10922 */

	10923 get _scrollTargetWidth() {

	10924 if (this._isValidScrollTarget()) {

	10925 return this.scrollTarget === this._doc ? window.innerWidth : this.scroll Target.offsetWidth;

	10926 }

	10927 return 0;

	10928 },

	10929

	10930 /**

	10931 * Gets the height of the scroll target.

	10932 *

	10933 * @type {number}

	10934 */

	10935 get _scrollTargetHeight() {

	10936 if (this._isValidScrollTarget()) {

	10937 return this.scrollTarget === this._doc ? window.innerHeight : this.scrol lTarget.offsetHeight;

	10938 }

	10939 return 0;

	10940 },

	10941

	10942 /**

	10943 * Returns true if the scroll target is a valid HTMLElement.

	10944 *

	10945 * @return {boolean}

	10946 */

	10947 _isValidScrollTarget: function() {

	10948 return this.scrollTarget instanceof HTMLElement;

	10949 }

	10950 };

	10951

	10952 </script>

	10953 <script>

	10954 /**

	10955 * `Polymer.AppScrollEffectsBehavior` provides an interface that allows an ele ment to use scrolls effects.

	10956 *

	10957 * ### Importing the app-layout effects

	10958 *

	10959 * app-layout provides a set of scroll effects that can be used by explicitly importing

	10960 * `app-scroll-effects.html`:

	10961 *

	10962 * ```html

	10963 * <link rel="import" href="/bower_components/app-layout/app-scroll-effects/ap p-scroll-effects.html">

	10964 * ```

	10965 *

	10966 * The scroll effects can also be used by individually importing

	10967 * `app-layout/app-scroll-effects/effects/[effectName].html`. For example:

	10968 *

	10969 * ```html

	10970 * <link rel="import" href="/bower_components/app-layout/app-scroll-effects/e ffects/waterfall.html">

	10971 * ```

	10972 *

	10973 * ### Consuming effects

	10974 *

	10975 * Effects can be consumed via the `effects` property. For example:

	10976 *

	10977 * ```html

	10978 * <app-header effects="waterfall"></app-header>

	10979 * ```

	10980 *

	10981 * ### Creating scroll effects

	10982 *

	10983 * You may want to create a custom scroll effect if you need to modify the CSS of an element

	10984 * based on the scroll position.

	10985 *

	10986 * A scroll effect definition is an object with `setUp()`, `tearDown()` and `r un()` functions.

	10987 *

	10988 * To register the effect, you can use `Polymer.AppLayout.registerEffect(effec tName, effectDef)`

	10989 * For example, let's define an effect that resizes the header's logo:

	10990 *

	10991 * ```js

	10992 * Polymer.AppLayout.registerEffect('resizable-logo', {

	10993 * setUp: function(config) {

	10994 * // the effect's config is passed to the setUp.

	10995 * this._fxResizeLogo = { logo: Polymer.dom(this).querySelector('[logo]') };

	10996 * },

	10997 *

	10998 * run: function(progress) {

	10999 * // the progress of the effect

	11000 * this.transform('scale3d(' + progress + ', '+ progress +', 1)', this._ fxResizeLogo.logo);

	11001 * },

	11002 *

	11003 * tearDown: function() {

	11004 * // clean up and reset of states

	11005 * delete this._fxResizeLogo;

	11006 * }

	11007 * });

	11008 * ```

	11009 * Now, you can consume the effect:

	11010 *

	11011 * ```html

	11012 * <app-header id="appHeader" effects="resizable-logo">

	11013 * <img logo src="logo.svg">

	11014 * </app-header>

	11015 * ```

	11016 *

	11017 * ### Imperative API

	11018 *

	11019 * ```js

	11020 * var logoEffect = appHeader.createEffect('resizable-logo', effectConfig);

	11021 * // run the effect: logoEffect.run(progress);

	11022 * // tear down the effect: logoEffect.tearDown();

	11023 * ```

	11024 *

	11025 * ### Configuring effects

	11026 *

	11027 * For effects installed via the `effects` property, their configuration can b e set

	11028 * via the `effectsConfig` property. For example:

	11029 *

	11030 * ```html

	11031 * <app-header effects="waterfall"

	11032 * effects-config='{"waterfall": {"startsAt": 0, "endsAt": 0.5}}'>

	11033 * </app-header>

	11034 * ```

	11035 *

	11036 * All effects have a `startsAt` and `endsAt` config property. They specify at what

	11037 * point the effect should start and end. This value goes from 0 to 1 inclusiv e.

	11038 *

	11039 * @polymerBehavior

	11040 */

	11041 Polymer.AppScrollEffectsBehavior = [

	11042 Polymer.IronScrollTargetBehavior,

	11043 {

	11044

	11045 properties: {

	11046

	11047 /**

	11048 * A space-separated list of the effects names that will be triggered when the user scrolls.

	11049 * e.g. `waterfall parallax-background` installs the `waterfall` and `para llax-background`.

	11050 */

	11051 effects: {

	11052 type: String

	11053 },

	11054

	11055 /**

	11056 * An object that configurates the effects installed via the `effects` pro perty. e.g.

	11057 * ```js

	11058 * element.effectsConfig = {

	11059 * "blend-background": {

	11060 * "startsAt": 0.5

	11061 * }

	11062 * };

	11063 * ```

	11064 * Every effect has at least two config properties: `startsAt` and `endsAt `.

	11065 * These properties indicate when the event should start and end respectiv ely

	11066 * and relative to the overall element progress. So for example, if `blend -background`

	11067 * starts at `0.5`, the effect will only start once the current element re aches 0.5

	11068 * of its progress. In this context, the progress is a value in the range of `[0, 1]`

	11069 * that indicates where this element is on the screen relative to the view port.

	11070 */

	11071 effectsConfig: {

	11072 type: Object,

	11073 value: function() {

	11074 return {};

	11075 }

	11076 },

	11077

	11078 /**

	11079 * Disables CSS transitions and scroll effects on the element.

	11080 */

	11081 disabled: {

	11082 type: Boolean,

	11083 reflectToAttribute: true,

	11084 value: false

	11085 }

	11086 },

	11087

	11088 observers: [

	11089 '_effectsChanged(effects, effectsConfig, isAttached)'

	11090 ],

	11091

	11092 /**

	11093 * Updates the scroll state. This method should be overridden

	11094 * by the consumer of this behavior.

	11095 *

	11096 * @method _updateScrollState

	11097 */

	11098 _updateScrollState: function() {},

	11099

	11100 /**

	11101 * Returns true if the current element is on the screen.

	11102 * That is, visible in the current viewport. This method should be

	11103 * overridden by the consumer of this behavior.

	11104 *

	11105 * @method isOnScreen

	11106 * @return {boolean}

	11107 */

	11108 isOnScreen: function() {

	11109 return false;

	11110 },

	11111

	11112 /**

	11113 * Returns true if there's content below the current element. This method

	11114 * should be overridden by the consumer of this behavior.

	11115 *

	11116 * @method isContentBelow

	11117 * @return {boolean}

	11118 */

	11119 isContentBelow: function() {

	11120 return false;

	11121 },

	11122

	11123 /**

	11124 * List of effects handlers that will take place during scroll.

	11125 *

	11126 * @type {Array<Function>}

	11127 */

	11128 _effectsRunFn: null,

	11129

	11130 /**

	11131 * List of the effects definitions installed via the `effects` property.

	11132 *

	11133 * @type {Array<Object>}

	11134 */

	11135 _effects: null,

	11136

	11137 /**

	11138 * The clamped value of `_scrollTop`.

	11139 * @type number

	11140 */

	11141 get _clampedScrollTop() {

	11142 return Math.max(0, this._scrollTop);

	11143 },

	11144

	11145 detached: function() {

	11146 this._tearDownEffects();

	11147 },

	11148

	11149 /**

	11150 * Creates an effect object from an effect's name that can be used to run

	11151 * effects programmatically.

	11152 *

	11153 * @method createEffect

	11154 * @param {string} effectName The effect's name registered via `Polymer.AppL ayout.registerEffect`.

	11155 * @param {Object=} effectConfig The effect config object. (Optional)

	11156 * @return {Object} An effect object with the following functions:

	11157 *

	11158 * * `effect.setUp()`, Sets up the requirements for the effect.

	11159 * This function is called automatically before the `effect` function returns.

	11160 * * `effect.run(progress, y)`, Runs the effect given a `progress`.

	11161 * * `effect.tearDown()`, Cleans up any DOM nodes or element references use d by the effect.

	11162 *

	11163 * Example:

	11164 * ```js

	11165 * var parallax = element.createEffect('parallax-background');

	11166 * // runs the effect

	11167 * parallax.run(0.5, 0);

	11168 * ```

	11169 */

	11170 createEffect: function(effectName, effectConfig) {

	11171 var effectDef = Polymer.AppLayout._scrollEffects[effectName];

	11172 if (!effectDef) {

	11173 throw new ReferenceError(this._getUndefinedMsg(effectName));

	11174 }

	11175 var prop = this._boundEffect(effectDef, effectConfig \|\| {});

	11176 prop.setUp();

	11177 return prop;

	11178 },

	11179

	11180 /**

	11181 * Called when `effects` or `effectsConfig` changes.

	11182 */

	11183 _effectsChanged: function(effects, effectsConfig, isAttached) {

	11184 this._tearDownEffects();

	11185

	11186 if (effects === '' \|\| !isAttached) {

	11187 return;

	11188 }

	11189 effects.split(' ').forEach(function(effectName) {

	11190 var effectDef;

	11191 if (effectName !== '') {

	11192 if ((effectDef = Polymer.AppLayout._scrollEffects[effectName])) {

	11193 this._effects.push(this._boundEffect(effectDef, effectsConfig[effect Name]));

	11194 } else {

	11195 this._warn(this._logf('_effectsChanged', this._getUndefinedMsg(effec tName)));

	11196 }

	11197 }

	11198 }, this);

	11199

	11200 this._setUpEffect();

	11201 },

	11202

	11203 /**

	11204 * Forces layout

	11205 */

	11206 _layoutIfDirty: function() {

	11207 return this.offsetWidth;

	11208 },

	11209

	11210 /**

	11211 * Returns an effect object bound to the current context.

	11212 *

	11213 * @param {Object} effectDef

	11214 * @param {Object=} effectsConfig The effect config object if the effect acc epts config values. (Optional)

	11215 */

	11216 _boundEffect: function(effectDef, effectsConfig) {

	11217 effectsConfig = effectsConfig \|\| {};

	11218 var startsAt = parseFloat(effectsConfig.startsAt \|\| 0);

	11219 var endsAt = parseFloat(effectsConfig.endsAt \|\| 1);

	11220 var deltaS = endsAt - startsAt;

	11221 var noop = Function();

	11222 // fast path if possible

	11223 var runFn = (startsAt === 0 && endsAt === 1) ? effectDef.run :

	11224 function(progress, y) {

	11225 effectDef.run.call(this,

	11226 Math.max(0, (progress - startsAt) / deltaS), y);

	11227 };

	11228 return {

	11229 setUp: effectDef.setUp ? effectDef.setUp.bind(this, effectsConfig) : noo p,

	11230 run: effectDef.run ? runFn.bind(this) : noop,

	11231 tearDown: effectDef.tearDown ? effectDef.tearDown.bind(this) : noop

	11232 };

	11233 },

	11234

	11235 /**

	11236 * Sets up the effects.

	11237 */

	11238 _setUpEffect: function() {

	11239 if (this.isAttached && this._effects) {

	11240 this._effectsRunFn = [];

	11241 this._effects.forEach(function(effectDef) {

	11242 // install the effect only if no error was reported

	11243 if (effectDef.setUp() !== false) {

	11244 this._effectsRunFn.push(effectDef.run);

	11245 }

	11246 }, this);

	11247 }

	11248 },

	11249

	11250 /**

	11251 * Tears down the effects.

	11252 */

	11253 _tearDownEffects: function() {

	11254 if (this._effects) {

	11255 this._effects.forEach(function(effectDef) {

	11256 effectDef.tearDown();

	11257 });

	11258 }

	11259 this._effectsRunFn = [];

	11260 this._effects = [];

	11261 },

	11262

	11263 /**

	11264 * Runs the effects.

	11265 *

	11266 * @param {number} p The progress

	11267 * @param {number} y The top position of the current element relative to the viewport.

	11268 */

	11269 _runEffects: function(p, y) {

	11270 if (this._effectsRunFn) {

	11271 this._effectsRunFn.forEach(function(run) {

	11272 run(p, y);

	11273 });

	11274 }

	11275 },

	11276

	11277 /**

	11278 * Overrides the `_scrollHandler`.

	11279 */

	11280 _scrollHandler: function() {

	11281 if (!this.disabled) {

	11282 this._updateScrollState(this._clampedScrollTop);

	11283 }

	11284 },

	11285

	11286 /**

	11287 * Override this method to return a reference to a node in the local DOM.

	11288 * The node is consumed by a scroll effect.

	11289 *

	11290 * @param {string} id The id for the node.

	11291 */

	11292 _getDOMRef: function(id) {

	11293 this._warn(this._logf('_getDOMRef', '`'+ id +'` is undefined'));

	11294 },

	11295

	11296 _getUndefinedMsg: function(effectName) {

	11297 return 'Scroll effect `' + effectName + '` is undefined. ' +

	11298 'Did you forget to import app-layout/app-scroll-effects/effects/' + ef fectName + '.html ?';

	11299 }

	11300

	11301 }];

	11302

	11303 </script>

	11304

	11305

	11306 <dom-module id="app-header" assetpath="bower_components/app-layout/app-header/">

	11307 <template>

	11308 <style>

	11309 :host {

	11310 position: relative;

	11311 display: block;

	11312 transition-timing-function: linear;

	11313 transition-property: -webkit-transform;

	11314 transition-property: transform;

	11315 }

	11316

	11317 :host::after {

	11318 position: absolute;

	11319 right: 0px;

	11320 bottom: -5px;

	11321 left: 0px;

	11322 width: 100%;

	11323 height: 5px;

	11324 content: "";

	11325 transition: opacity 0.4s;

	11326 pointer-events: none;

	11327 opacity: 0;

	11328 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

	11329 will-change: opacity;

	11330 @apply(--app-header-shadow);

	11331 }

	11332

	11333 :host([shadow])::after {

	11334 opacity: 1;

	11335 }

	11336

	11337 #contentContainer > ::content [condensed-title] {

	11338 -webkit-transform-origin: left top;

	11339 transform-origin: left top;

	11340 white-space: nowrap;

	11341 opacity: 0;

	11342 }

	11343

	11344 #contentContainer > ::content [main-title] {

	11345 -webkit-transform-origin: left top;

	11346 transform-origin: left top;

	11347 white-space: nowrap;

	11348 }

	11349

	11350 #background {

	11351 @apply(--layout-fit);

	11352 overflow: hidden;

	11353 }

	11354

	11355 #backgroundFrontLayer,

	11356 #backgroundRearLayer {

	11357 @apply(--layout-fit);

	11358 height: 100%;

	11359 pointer-events: none;

	11360 background-size: cover;

	11361 }

	11362

	11363 #backgroundFrontLayer {

	11364 @apply(--app-header-background-front-layer);

	11365 }

	11366

	11367 #backgroundRearLayer {

	11368 opacity: 0;

	11369 @apply(--app-header-background-rear-layer);

	11370 }

	11371

	11372 #contentContainer {

	11373 position: relative;

	11374 width: 100%;

	11375 height: 100%;

	11376 }

	11377

	11378 :host([disabled]),

	11379 :host([disabled])::after,

	11380 :host([disabled]) #backgroundFrontLayer,

	11381 :host([disabled]) #backgroundRearLayer,

	11382 :host([disabled]) ::content > app-toolbar:first-of-type,

	11383 :host([disabled]) ::content > [sticky],

	11384 /* Silent scrolling should not run CSS transitions */

	11385 :host-context(.app-layout-silent-scroll),

	11386 :host-context(.app-layout-silent-scroll)::after,

	11387 :host-context(.app-layout-silent-scroll) #backgroundFrontLayer,

	11388 :host-context(.app-layout-silent-scroll) #backgroundRearLayer,

	11389 :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of- type,

	11390 :host-context(.app-layout-silent-scroll) ::content > [sticky] {

	11391 transition: none !important;

	11392 }

	11393 </style>

	11394 <div id="contentContainer">

	11395 <content id="content"></content>

	11396 </div>

	11397 </template>

	11398

	11399 <script>

	11400 Polymer({

	11401 is: 'app-header',

	11402

	11403 behaviors: [

	11404 Polymer.AppScrollEffectsBehavior,

	11405 Polymer.IronResizableBehavior

	11406 ],

	11407

	11408 properties: {

	11409 /**

	11410 * If true, the header will automatically collapse when scrolling down.

	11411 * That is, the `sticky` element remains visible when the header is full y condensed

	11412 * whereas the rest of the elements will collapse below `sticky` element .

	11413 *

	11414 * By default, the `sticky` element is the first toolbar in the light DO M:

	11415 *

	11416 *```html

	11417 * <app-header condenses>

	11418 * <app-toolbar>This toolbar remains on top</app-toolbar>

	11419 * <app-toolbar></app-toolbar>

	11420 * <app-toolbar></app-toolbar>

	11421 * </app-header>

	11422 * ```

	11423 *

	11424 * Additionally, you can specify which toolbar or element remains visibl e in condensed mode

	11425 * by adding the `sticky` attribute to that element. For example: if we want the last

	11426 * toolbar to remain visible, we can add the `sticky` attribute to it.

	11427 *

	11428 *```html

	11429 * <app-header condenses>

	11430 * <app-toolbar></app-toolbar>

	11431 * <app-toolbar></app-toolbar>

	11432 * <app-toolbar sticky>This toolbar remains on top</app-toolbar>

	11433 * </app-header>

	11434 * ```

	11435 *

	11436 * Note the `sticky` element must be a direct child of `app-header`.

	11437 */

	11438 condenses: {

	11439 type: Boolean,

	11440 value: false

	11441 },

	11442

	11443 /**

	11444 * Mantains the header fixed at the top so it never moves away.

	11445 */

	11446 fixed: {

	11447 type: Boolean,

	11448 value: false

	11449 },

	11450

	11451 /**

	11452 * Slides back the header when scrolling back up.

	11453 */

	11454 reveals: {

	11455 type: Boolean,

	11456 value: false

	11457 },

	11458

	11459 /**

	11460 * Displays a shadow below the header.

	11461 */

	11462 shadow: {

	11463 type: Boolean,

	11464 reflectToAttribute: true,

	11465 value: false

	11466 }

	11467 },

	11468

	11469 observers: [

	11470 'resetLayout(isAttached, condenses, fixed)'

	11471 ],

	11472

	11473 listeners: {

	11474 'iron-resize': '_resizeHandler'

	11475 },

	11476

	11477 /**

	11478 * A cached offsetHeight of the current element.

	11479 *

	11480 * @type {number}

	11481 */

	11482 _height: 0,

	11483

	11484 /**

	11485 * The distance in pixels the header will be translated to when scrolling.

	11486 *

	11487 * @type {number}

	11488 */

	11489 _dHeight: 0,

	11490

	11491 /**

	11492 * The offsetTop of `_stickyEl`

	11493 *

	11494 * @type {number}

	11495 */

	11496 _stickyElTop: 0,

	11497

	11498 /**

	11499 * The element that remains visible when the header condenses.

	11500 *

	11501 * @type {HTMLElement}

	11502 */

	11503 _stickyEl: null,

	11504

	11505 /**

	11506 * The header's top value used for the `transformY`

	11507 *

	11508 * @type {number}

	11509 */

	11510 _top: 0,

	11511

	11512 /**

	11513 * The current scroll progress.

	11514 *

	11515 * @type {number}

	11516 */

	11517 _progress: 0,

	11518

	11519 _wasScrollingDown: false,

	11520 _initScrollTop: 0,

	11521 _initTimestamp: 0,

	11522 _lastTimestamp: 0,

	11523 _lastScrollTop: 0,

	11524

	11525 /**

	11526 * The distance the header is allowed to move away.

	11527 *

	11528 * @type {number}

	11529 */

	11530 get _maxHeaderTop() {

	11531 return this.fixed ? this._dHeight : this._height + 5;

	11532 },

	11533

	11534 /**

	11535 * Returns a reference to the sticky element.

	11536 *

	11537 * @return {HTMLElement}?

	11538 */

	11539 _getStickyEl: function() {

	11540 /** @type {HTMLElement} */

	11541 var stickyEl;

	11542 var nodes = Polymer.dom(this.$.content).getDistributedNodes();

	11543

	11544 for (var i = 0; i < nodes.length; i++) {

	11545 if (nodes[i].nodeType === Node.ELEMENT_NODE) {

	11546 var node = /** @type {HTMLElement} */ (nodes[i]);

	11547 if (node.hasAttribute('sticky')) {

	11548 stickyEl = node;

	11549 break;

	11550 } else if (!stickyEl) {

	11551 stickyEl = node;

	11552 }

	11553 }

	11554 }

	11555 return stickyEl;

	11556 },

	11557

	11558 /**

	11559 * Resets the layout. If you changed the size of app-header via CSS

	11560 * you can notify the changes by either firing the `iron-resize` event

	11561 * or calling `resetLayout` directly.

	11562 *

	11563 * @method resetLayout

	11564 */

	11565 resetLayout: function() {

	11566 this.fire('app-header-reset-layout');

	11567

	11568 this.debounce('_resetLayout', function() {

	11569 // noop if the header isn't visible

	11570 if (this.offsetWidth === 0 && this.offsetHeight === 0) {

	11571 return;

	11572 }

	11573

	11574 var scrollTop = this._clampedScrollTop;

	11575 var firstSetup = this._height === 0 \|\| scrollTop === 0;

	11576 var currentDisabled = this.disabled;

	11577

	11578 this._height = this.offsetHeight;

	11579 this._stickyEl = this._getStickyEl();

	11580 this.disabled = true;

	11581

	11582 // prepare for measurement

	11583 if (!firstSetup) {

	11584 this._updateScrollState(0, true);

	11585 }

	11586

	11587 if (this._mayMove()) {

	11588 this._dHeight = this._stickyEl ? this._height - this._stickyEl.offse tHeight : 0;

	11589 } else {

	11590 this._dHeight = 0;

	11591 }

	11592

	11593 this._stickyElTop = this._stickyEl ? this._stickyEl.offsetTop : 0;

	11594 this._setUpEffect();

	11595

	11596 if (firstSetup) {

	11597 this._updateScrollState(scrollTop, true);

	11598 } else {

	11599 this._updateScrollState(this._lastScrollTop, true);

	11600 this._layoutIfDirty();

	11601 }

	11602 // restore no transition

	11603 this.disabled = currentDisabled;

	11604 });

	11605 },

	11606

	11607 /**

	11608 * Updates the scroll state.

	11609 *

	11610 * @param {number} scrollTop

	11611 * @param {boolean=} forceUpdate (default: false)

	11612 */

	11613 _updateScrollState: function(scrollTop, forceUpdate) {

	11614 if (this._height === 0) {

	11615 return;

	11616 }

	11617

	11618 var progress = 0;

	11619 var top = 0;

	11620 var lastTop = this._top;

	11621 var lastScrollTop = this._lastScrollTop;

	11622 var maxHeaderTop = this._maxHeaderTop;

	11623 var dScrollTop = scrollTop - this._lastScrollTop;

	11624 var absDScrollTop = Math.abs(dScrollTop);

	11625 var isScrollingDown = scrollTop > this._lastScrollTop;

	11626 var now = Date.now();

	11627

	11628 if (this._mayMove()) {

	11629 top = this._clamp(this.reveals ? lastTop + dScrollTop : scrollTop, 0, maxHeaderTop);

	11630 }

	11631

	11632 if (scrollTop >= this._dHeight) {

	11633 top = this.condenses && !this.fixed ? Math.max(this._dHeight, top) : t op;

	11634 this.style.transitionDuration = '0ms';

	11635 }

	11636

	11637 if (this.reveals && !this.disabled && absDScrollTop < 100) {

	11638 // set the initial scroll position

	11639 if (now - this._initTimestamp > 300 \|\| this._wasScrollingDown !== isSc rollingDown) {

	11640 this._initScrollTop = scrollTop;

	11641 this._initTimestamp = now;

	11642 }

	11643

	11644 if (scrollTop >= maxHeaderTop) {

	11645 // check if the header is allowed to snap

	11646 if (Math.abs(this._initScrollTop - scrollTop) > 30 \|\| absDScrollTop > 10) {

	11647 if (isScrollingDown && scrollTop >= maxHeaderTop) {

	11648 top = maxHeaderTop;

	11649 } else if (!isScrollingDown && scrollTop >= this._dHeight) {

	11650 top = this.condenses && !this.fixed ? this._dHeight : 0;

	11651 }

	11652 var scrollVelocity = dScrollTop / (now - this._lastTimestamp);

	11653 this.style.transitionDuration = this._clamp((top - lastTop) / scro llVelocity, 0, 300) + 'ms';

	11654 } else {

	11655 top = this._top;

	11656 }

	11657 }

	11658 }

	11659

	11660 if (this._dHeight === 0) {

	11661 progress = scrollTop > 0 ? 1 : 0;

	11662 } else {

	11663 progress = top / this._dHeight;

	11664 }

	11665

	11666 if (!forceUpdate) {

	11667 this._lastScrollTop = scrollTop;

	11668 this._top = top;

	11669 this._wasScrollingDown = isScrollingDown;

	11670 this._lastTimestamp = now;

	11671 }

	11672

	11673 if (forceUpdate \|\| progress !== this._progress \|\| lastTop !== top \|\| scr ollTop === 0) {

	11674 this._progress = progress;

	11675 this._runEffects(progress, top);

	11676 this._transformHeader(top);

	11677 }

	11678 },

	11679

	11680 /**

	11681 * Returns true if the current header is allowed to move as the user scrol ls.

	11682 *

	11683 * @return {boolean}

	11684 */

	11685 _mayMove: function() {

	11686 return this.condenses \|\| !this.fixed;

	11687 },

	11688

	11689 /**

	11690 * Returns true if the current header will condense based on the size of t he header

	11691 * and the `consenses` property.

	11692 *

	11693 * @return {boolean}

	11694 */

	11695 willCondense: function() {

	11696 return this._dHeight > 0 && this.condenses;

	11697 },

	11698

	11699 /**

	11700 * Returns true if the current element is on the screen.

	11701 * That is, visible in the current viewport.

	11702 *

	11703 * @method isOnScreen

	11704 * @return {boolean}

	11705 */

	11706 isOnScreen: function() {

	11707 return this._height !== 0 && this._top < this._height;

	11708 },

	11709

	11710 /**

	11711 * Returns true if there's content below the current element.

	11712 *

	11713 * @method isContentBelow

	11714 * @return {boolean}

	11715 */

	11716 isContentBelow: function() {

	11717 if (this._top === 0) {

	11718 return this._clampedScrollTop > 0;

	11719 }

	11720 return this._clampedScrollTop - this._maxHeaderTop >= 0;

	11721 },

	11722

	11723 /**

	11724 * Transforms the header.

	11725 *

	11726 * @param {number} y

	11727 */

	11728 _transformHeader: function(y) {

	11729 this.translate3d(0, (-y) + 'px', 0);

	11730 if (this._stickyEl && this.condenses && y >= this._stickyElTop) {

	11731 this.translate3d(0, (Math.min(y, this._dHeight) - this._stickyElTop) + 'px', 0,

	11732 this._stickyEl);

	11733 }

	11734 },

	11735

	11736 _resizeHandler: function() {

	11737 this.resetLayout();

	11738 },

	11739

	11740 _clamp: function(v, min, max) {

	11741 return Math.min(max, Math.max(min, v));

	11742 },

	11743

	11744 _ensureBgContainers: function() {

	11745 if (!this._bgContainer) {

	11746 this._bgContainer = document.createElement('div');

	11747 this._bgContainer.id = 'background';

	11748

	11749 this._bgRear = document.createElement('div');

	11750 this._bgRear.id = 'backgroundRearLayer';

	11751 this._bgContainer.appendChild(this._bgRear);

	11752

	11753 this._bgFront = document.createElement('div');

	11754 this._bgFront.id = 'backgroundFrontLayer';

	11755 this._bgContainer.appendChild(this._bgFront);

	11756

	11757 Polymer.dom(this.root).insertBefore(this._bgContainer, this.$.contentC ontainer);

	11758 }

	11759 },

	11760

	11761 _getDOMRef: function(id) {

	11762 switch (id) {

	11763 case 'backgroundFrontLayer':

	11764 this._ensureBgContainers();

	11765 return this._bgFront;

	11766 case 'backgroundRearLayer':

	11767 this._ensureBgContainers();

	11768 return this._bgRear;

	11769 case 'background':

	11770 this._ensureBgContainers();

	11771 return this._bgContainer;

	11772 case 'mainTitle':

	11773 return Polymer.dom(this).querySelector('[main-title]');

	11774 case 'condensedTitle':

	11775 return Polymer.dom(this).querySelector('[condensed-title]');

	11776 }

	11777 return null;

	11778 },

	11779

	11780 /**

	11781 * Returns an object containing the progress value of the scroll effects

	11782 * and the top position of the header.

	11783 *

	11784 * @method getScrollState

	11785 * @return {Object}

	11786 */

	11787 getScrollState: function() {

	11788 return { progress: this._progress, top: this._top };

	11789 }

	11790

	11791 /**

	11792 * Fires when the layout of `app-header` changed.

	11793 *

	11794 * @event app-header-reset-layout

	11795 */

	11796 });

	11797 </script>

	11798 </dom-module>

	11799

	11800

	11801 <dom-module id="app-header-layout" assetpath="bower_components/app-layout/app-he ader-layout/">

	11802 <template>

	11803 <style>

	11804 :host {

	11805 display: block;

	11806 /**

	11807 * Force app-header-layout to have its own stacking context so that its parent can

	11808 * control the stacking of it relative to other elements (e.g. app-drawe r-layout).

	11809 * This could be done using `isolation: isolate`, but that's not well su pported

	11810 * across browsers.

	11811 */

	11812 position: relative;

	11813 z-index: 0;

	11814 }

	11815

	11816 :host > ::content > app-header {

	11817 @apply(--layout-fixed-top);

	11818 z-index: 1;

	11819 }

	11820

	11821 :host([has-scrolling-region]) {

	11822 height: 100%;

	11823 }

	11824

	11825 :host([has-scrolling-region]) > ::content > app-header {

	11826 position: absolute;

	11827 }

	11828

	11829 :host([has-scrolling-region]) > #contentContainer {

	11830 @apply(--layout-fit);

	11831 overflow-y: auto;

	11832 -webkit-overflow-scrolling: touch;

	11833 }

	11834

	11835 :host([fullbleed]) {

	11836 @apply(--layout-vertical);

	11837 @apply(--layout-fit);

	11838 }

	11839

	11840 :host([fullbleed]) > #contentContainer {

	11841 @apply(--layout-vertical);

	11842 @apply(--layout-flex);

	11843 }

	11844

	11845 #contentContainer {

	11846 /* Create a stacking context here so that all children appear below the header. */

	11847 position: relative;

	11848 z-index: 0;

	11849 }

	11850

	11851 </style>

	11852

	11853 <content id="header" select="app-header"></content>

	11854

	11855 <div id="contentContainer">

	11856 <content></content>

	11857 </div>

	11858

	11859 </template>

	11860

	11861 <script>

	11862 Polymer({

	11863 is: 'app-header-layout',

	11864

	11865 behaviors: [

	11866 Polymer.IronResizableBehavior

	11867 ],

	11868

	11869 properties: {

	11870 /**

	11871 * If true, the current element will have its own scrolling region.

	11872 * Otherwise, it will use the document scroll to control the header.

	11873 */

	11874 hasScrollingRegion: {

	11875 type: Boolean,

	11876 value: false,

	11877 reflectToAttribute: true

	11878 }

	11879 },

	11880

	11881 listeners: {

	11882 'iron-resize': '_resizeHandler',

	11883 'app-header-reset-layout': 'resetLayout'

	11884 },

	11885

	11886 observers: [

	11887 'resetLayout(isAttached, hasScrollingRegion)'

	11888 ],

	11889

	11890 /**

	11891 * A reference to the app-header element.

	11892 *

	11893 * @property header

	11894 */

	11895 get header() {

	11896 return Polymer.dom(this.$.header).getDistributedNodes()[0];

	11897 },

	11898

	11899 /**

	11900 * Resets the layout. This method is automatically called when the element is attached

	11901 * to the DOM.

	11902 *

	11903 * @method resetLayout

	11904 */

	11905 resetLayout: function() {

	11906 this._updateScroller();

	11907 this.debounce('_resetLayout', this._updateContentPosition);

	11908 },

	11909

	11910 _updateContentPosition: function() {

	11911 var header = this.header;

	11912 if (!this.isAttached \|\| !header) {

	11913 return;

	11914 }

	11915 // Get header height here so that style reads are batched together befor e style writes

	11916 // (i.e. getBoundingClientRect() below).

	11917 var headerHeight = header.offsetHeight;

	11918 // Update the header position.

	11919 if (!this.hasScrollingRegion) {

	11920 var rect = this.getBoundingClientRect();

	11921 var rightOffset = document.documentElement.clientWidth - rect.right;

	11922 header.style.left = rect.left + 'px';

	11923 header.style.right = rightOffset + 'px';

	11924 } else {

	11925 header.style.left = '';

	11926 header.style.right = '';

	11927 }

	11928 // Update the content container position.

	11929 var containerStyle = this.$.contentContainer.style;

	11930 if (header.fixed && !header.willCondense() && this.hasScrollingRegion) {

	11931 // If the header size does not change and we're using a scrolling regi on, exclude

	11932 // the header area from the scrolling region so that the header doesn' t overlap

	11933 // the scrollbar.

	11934 containerStyle.marginTop = headerHeight + 'px';

	11935 containerStyle.paddingTop = '';

	11936 } else {

	11937 containerStyle.paddingTop = headerHeight + 'px';

	11938 containerStyle.marginTop = '';

	11939 }

	11940 },

	11941

	11942 _updateScroller: function() {

	11943 if (!this.isAttached) {

	11944 return;

	11945 }

	11946 var header = this.header;

	11947 if (header) {

	11948 header.scrollTarget = this.hasScrollingRegion ?

	11949 this.$.contentContainer : this.ownerDocument.documentElement;

	11950 }

	11951 },

	11952

	11953 _resizeHandler: function() {

	11954 this.resetLayout();

	11955 }

	11956 });

	11957 </script>

	11958 </dom-module>

	11959

	11960

	11961 <dom-module id="app-scrollpos-control" assetpath="bower_components/app-layout/ap p-scrollpos-control/">

	11962 <script>

	11963 Polymer({

	11964 is: 'app-scrollpos-control',

	11965

	11966 behaviors: [

	11967 Polymer.IronScrollTargetBehavior

	11968 ],

	11969

	11970 properties: {

	11971 /**

	11972 * The selected page.

	11973 */

	11974 selected: {

	11975 type: String,

	11976 observer: '_selectedChanged'

	11977 },

	11978

	11979 /**

	11980 * Reset the scroll position to 0.

	11981 */

	11982 reset: {

	11983 type: Boolean,

	11984 value: false

	11985 }

	11986 },

	11987

	11988 observers: [

	11989 '_updateScrollPos(selected, reset)'

	11990 ],

	11991

	11992 created: function() {

	11993 this._scrollposMap = {};

	11994 },

	11995

	11996 _selectedChanged: function(selected, old) {

	11997 if (old != null) {

	11998 this._scrollposMap[old] = {x: this._scrollLeft, y: this._scrollTop};

	11999 }

	12000 },

	12001

	12002 _updateScrollPos: function(selected, reset) {

	12003 this.debounce('_updateScrollPos', function() {

	12004 var pos = this._scrollposMap[this.selected];

	12005 if (pos != null && !this.reset) {

	12006 this.scroll(pos.x, pos.y);

	12007 } else {

	12008 this.scroll(0, 0);

	12009 }

	12010 });

	12011 }

	12012 });

	12013 </script>

	12014 </dom-module>

	12015

	12016

	12017 <dom-module id="app-toolbar" assetpath="bower_components/app-layout/app-toolbar/ ">

	12018 <template>

	12019 <style>

	12020 :host {

	12021 position: relative;

	12022

	12023 @apply(--layout-horizontal);

	12024 @apply(--layout-center);

	12025

	12026 height: 64px;

	12027 padding: 0 16px;

	12028

	12029 pointer-events: none;

	12030

	12031 font-size: var(--app-toolbar-font-size, 20px);

	12032 }

	12033

	12034 :host > ::content > * {

	12035 pointer-events: auto;

	12036 }

	12037

	12038 :host > ::content > paper-icon-button {

	12039 /* paper-icon-button/issues/33 */

	12040 font-size: 0;

	12041 }

	12042

	12043 :host > ::content > [main-title],

	12044 :host > ::content > [condensed-title] {

	12045 pointer-events: none;

	12046 @apply(--layout-flex);

	12047 }

	12048

	12049 :host > ::content > [bottom-item] {

	12050 position: absolute;

	12051 right: 0;

	12052 bottom: 0;

	12053 left: 0;

	12054 }

	12055

	12056 :host > ::content > [top-item] {

	12057 position: absolute;

	12058 top: 0;

	12059 right: 0;

	12060 left: 0;

	12061 }

	12062

	12063 :host > ::content > [spacer] {

	12064 margin-left: 64px;

	12065 }

	12066 </style>

	12067

	12068 <content></content>

	12069 </template>

	12070

	12071 <script>

	12072 Polymer({

	12073 is: 'app-toolbar'

	12074 });

	12075 </script>

	12076 </dom-module>

	12077

	12078

	12079 <dom-module id="app-box" assetpath="bower_components/app-layout/app-box/">

	12080 <template>

	12081 <style>

	12082 :host {

	12083 position: relative;

	12084

	12085 display: block;

	12086 }

	12087

	12088 #background {

	12089 @apply(--layout-fit);

	12090

	12091 overflow: hidden;

	12092

	12093 height: 100%;

	12094 }

	12095

	12096 #backgroundFrontLayer {

	12097 min-height: 100%;

	12098

	12099 pointer-events: none;

	12100

	12101 background-size: cover;

	12102

	12103 @apply(--app-box-background-front-layer);

	12104 }

	12105

	12106 #contentContainer {

	12107 position: relative;

	12108

	12109 width: 100%;

	12110 height: 100%;

	12111 }

	12112

	12113 :host([disabled]),

	12114 :host([disabled]) #backgroundFrontLayer {

	12115 transition: none !important;

	12116 }

	12117 </style>

	12118

	12119 <div id="background">

	12120 <div id="backgroundFrontLayer">

	12121 <content select="[background]"></content>

	12122 </div>

	12123 </div>

	12124 <div id="contentContainer">

	12125 <content id="content"></content>

	12126 </div>

	12127 </template>

	12128

	12129 <script>

	12130 Polymer({

	12131 is: 'app-box',

	12132

	12133 behaviors: [

	12134 Polymer.AppScrollEffectsBehavior,

	12135 Polymer.IronResizableBehavior

	12136 ],

	12137

	12138 listeners: {

	12139 'iron-resize': '_resizeHandler'

	12140 },

	12141

	12142 /**

	12143 * The current scroll progress.

	12144 *

	12145 * @type {number}

	12146 */

	12147 _progress: 0,

	12148

	12149 attached: function() {

	12150 this.resetLayout();

	12151 },

	12152

	12153 /**

	12154 * Resets the layout. This method is automatically called when the element is attached to the DOM.

	12155 *

	12156 * @method resetLayout

	12157 */

	12158 resetLayout: function() {

	12159 this.debounce('_resetLayout', function() {

	12160 // noop if the box isn't in the rendered tree

	12161 if (this.offsetWidth === 0 && this.offsetHeight === 0) {

	12162 return;

	12163 }

	12164

	12165 var scrollTop = this._clampedScrollTop;

	12166 var savedDisabled = this.disabled;

	12167

	12168 this.disabled = true;

	12169 this._elementTop = this._getElementTop();

	12170 this._elementHeight = this.offsetHeight;

	12171 this._cachedScrollTargetHeight = this._scrollTargetHeight;

	12172 this._setUpEffect();

	12173 this._updateScrollState(scrollTop);

	12174 this.disabled = savedDisabled;

	12175 }, 1);

	12176 },

	12177

	12178 _getElementTop: function() {

	12179 var currentNode = this;

	12180 var top = 0;

	12181

	12182 while (currentNode && currentNode !== this.scrollTarget) {

	12183 top += currentNode.offsetTop;

	12184 currentNode = currentNode.offsetParent;

	12185 }

	12186 return top;

	12187 },

	12188

	12189 _updateScrollState: function(scrollTop) {

	12190 if (this.isOnScreen()) {

	12191 var viewportTop = this._elementTop - scrollTop;

	12192 this._progress = 1 - (viewportTop + this._elementHeight) / this._cache dScrollTargetHeight;

	12193 this._runEffects(this._progress, scrollTop);

	12194 }

	12195 },

	12196

	12197 /**

	12198 * Returns true if this app-box is on the screen.

	12199 * That is, visible in the current viewport.

	12200 *

	12201 * @method isOnScreen

	12202 * @return {boolean}

	12203 */

	12204 isOnScreen: function() {

	12205 return this._elementTop < this._scrollTop + this._cachedScrollTargetHeig ht

	12206 && this._elementTop + this._elementHeight > this._scrollTop;

	12207 },

	12208

	12209 _resizeHandler: function() {

	12210 this.resetLayout();

	12211 },

	12212

	12213 _getDOMRef: function(id) {

	12214 if (id === 'background') {

	12215 return this.$.background;

	12216 }

	12217 if (id === 'backgroundFrontLayer') {

	12218 return this.$.backgroundFrontLayer;

	12219 }

	12220 },

	12221

	12222 /**

	12223 * Returns an object containing the progress value of the scroll effects.

	12224 *

	12225 * @method getScrollState

	12226 * @return {Object}

	12227 */

	12228 getScrollState: function() {

	12229 return { progress: this._progress };

	12230 }

	12231 });

	12232 </script>

	12233 </dom-module>

	12234 <style is="custom-style">

	12235

	12236 :root {

	12237

	12238 /* Material Design color palette for Google products */

	12239

	12240 --google-red-100: #f4c7c3;

	12241 --google-red-300: #e67c73;

	12242 --google-red-500: #db4437;

	12243 --google-red-700: #c53929;

	12244

	12245 --google-blue-100: #c6dafc;

	12246 --google-blue-300: #7baaf7;

	12247 --google-blue-500: #4285f4;

	12248 --google-blue-700: #3367d6;

	12249

	12250 --google-green-100: #b7e1cd;

	12251 --google-green-300: #57bb8a;

	12252 --google-green-500: #0f9d58;

	12253 --google-green-700: #0b8043;

	12254

	12255 --google-yellow-100: #fce8b2;

	12256 --google-yellow-300: #f7cb4d;

	12257 --google-yellow-500: #f4b400;

	12258 --google-yellow-700: #f09300;

	12259

	12260 --google-grey-100: #f5f5f5;

	12261 --google-grey-300: #e0e0e0;

	12262 --google-grey-500: #9e9e9e;

	12263 --google-grey-700: #616161;

	12264

	12265 /* Material Design color palette from online spec document */

	12266

	12267 --paper-red-50: #ffebee;

	12268 --paper-red-100: #ffcdd2;

	12269 --paper-red-200: #ef9a9a;

	12270 --paper-red-300: #e57373;

	12271 --paper-red-400: #ef5350;

	12272 --paper-red-500: #f44336;

	12273 --paper-red-600: #e53935;

	12274 --paper-red-700: #d32f2f;

	12275 --paper-red-800: #c62828;

	12276 --paper-red-900: #b71c1c;

	12277 --paper-red-a100: #ff8a80;

	12278 --paper-red-a200: #ff5252;

	12279 --paper-red-a400: #ff1744;

	12280 --paper-red-a700: #d50000;

	12281

	12282 --paper-pink-50: #fce4ec;

	12283 --paper-pink-100: #f8bbd0;

	12284 --paper-pink-200: #f48fb1;

	12285 --paper-pink-300: #f06292;

	12286 --paper-pink-400: #ec407a;

	12287 --paper-pink-500: #e91e63;

	12288 --paper-pink-600: #d81b60;

	12289 --paper-pink-700: #c2185b;

	12290 --paper-pink-800: #ad1457;

	12291 --paper-pink-900: #880e4f;

	12292 --paper-pink-a100: #ff80ab;

	12293 --paper-pink-a200: #ff4081;

	12294 --paper-pink-a400: #f50057;

	12295 --paper-pink-a700: #c51162;

	12296

	12297 --paper-purple-50: #f3e5f5;

	12298 --paper-purple-100: #e1bee7;

	12299 --paper-purple-200: #ce93d8;

	12300 --paper-purple-300: #ba68c8;

	12301 --paper-purple-400: #ab47bc;

	12302 --paper-purple-500: #9c27b0;

	12303 --paper-purple-600: #8e24aa;

	12304 --paper-purple-700: #7b1fa2;

	12305 --paper-purple-800: #6a1b9a;

	12306 --paper-purple-900: #4a148c;

	12307 --paper-purple-a100: #ea80fc;

	12308 --paper-purple-a200: #e040fb;

	12309 --paper-purple-a400: #d500f9;

	12310 --paper-purple-a700: #aa00ff;

	12311

	12312 --paper-deep-purple-50: #ede7f6;

	12313 --paper-deep-purple-100: #d1c4e9;

	12314 --paper-deep-purple-200: #b39ddb;

	12315 --paper-deep-purple-300: #9575cd;

	12316 --paper-deep-purple-400: #7e57c2;

	12317 --paper-deep-purple-500: #673ab7;

	12318 --paper-deep-purple-600: #5e35b1;

	12319 --paper-deep-purple-700: #512da8;

	12320 --paper-deep-purple-800: #4527a0;

	12321 --paper-deep-purple-900: #311b92;

	12322 --paper-deep-purple-a100: #b388ff;

	12323 --paper-deep-purple-a200: #7c4dff;

	12324 --paper-deep-purple-a400: #651fff;

	12325 --paper-deep-purple-a700: #6200ea;

	12326

	12327 --paper-indigo-50: #e8eaf6;

	12328 --paper-indigo-100: #c5cae9;

	12329 --paper-indigo-200: #9fa8da;

	12330 --paper-indigo-300: #7986cb;

	12331 --paper-indigo-400: #5c6bc0;

	12332 --paper-indigo-500: #3f51b5;

	12333 --paper-indigo-600: #3949ab;

	12334 --paper-indigo-700: #303f9f;

	12335 --paper-indigo-800: #283593;

	12336 --paper-indigo-900: #1a237e;

	12337 --paper-indigo-a100: #8c9eff;

	12338 --paper-indigo-a200: #536dfe;

	12339 --paper-indigo-a400: #3d5afe;

	12340 --paper-indigo-a700: #304ffe;

	12341

	12342 --paper-blue-50: #e3f2fd;

	12343 --paper-blue-100: #bbdefb;

	12344 --paper-blue-200: #90caf9;

	12345 --paper-blue-300: #64b5f6;

	12346 --paper-blue-400: #42a5f5;

	12347 --paper-blue-500: #2196f3;

	12348 --paper-blue-600: #1e88e5;

	12349 --paper-blue-700: #1976d2;

	12350 --paper-blue-800: #1565c0;

	12351 --paper-blue-900: #0d47a1;

	12352 --paper-blue-a100: #82b1ff;

	12353 --paper-blue-a200: #448aff;

	12354 --paper-blue-a400: #2979ff;

	12355 --paper-blue-a700: #2962ff;

	12356

	12357 --paper-light-blue-50: #e1f5fe;

	12358 --paper-light-blue-100: #b3e5fc;

	12359 --paper-light-blue-200: #81d4fa;

	12360 --paper-light-blue-300: #4fc3f7;

	12361 --paper-light-blue-400: #29b6f6;

	12362 --paper-light-blue-500: #03a9f4;

	12363 --paper-light-blue-600: #039be5;

	12364 --paper-light-blue-700: #0288d1;

	12365 --paper-light-blue-800: #0277bd;

	12366 --paper-light-blue-900: #01579b;

	12367 --paper-light-blue-a100: #80d8ff;

	12368 --paper-light-blue-a200: #40c4ff;

	12369 --paper-light-blue-a400: #00b0ff;

	12370 --paper-light-blue-a700: #0091ea;

	12371

	12372 --paper-cyan-50: #e0f7fa;

	12373 --paper-cyan-100: #b2ebf2;

	12374 --paper-cyan-200: #80deea;

	12375 --paper-cyan-300: #4dd0e1;

	12376 --paper-cyan-400: #26c6da;

	12377 --paper-cyan-500: #00bcd4;

	12378 --paper-cyan-600: #00acc1;

	12379 --paper-cyan-700: #0097a7;

	12380 --paper-cyan-800: #00838f;

	12381 --paper-cyan-900: #006064;

	12382 --paper-cyan-a100: #84ffff;

	12383 --paper-cyan-a200: #18ffff;

	12384 --paper-cyan-a400: #00e5ff;

	12385 --paper-cyan-a700: #00b8d4;

	12386

	12387 --paper-teal-50: #e0f2f1;

	12388 --paper-teal-100: #b2dfdb;

	12389 --paper-teal-200: #80cbc4;

	12390 --paper-teal-300: #4db6ac;

	12391 --paper-teal-400: #26a69a;

	12392 --paper-teal-500: #009688;

	12393 --paper-teal-600: #00897b;

	12394 --paper-teal-700: #00796b;

	12395 --paper-teal-800: #00695c;

	12396 --paper-teal-900: #004d40;

	12397 --paper-teal-a100: #a7ffeb;

	12398 --paper-teal-a200: #64ffda;

	12399 --paper-teal-a400: #1de9b6;

	12400 --paper-teal-a700: #00bfa5;

	12401

	12402 --paper-green-50: #e8f5e9;

	12403 --paper-green-100: #c8e6c9;

	12404 --paper-green-200: #a5d6a7;

	12405 --paper-green-300: #81c784;

	12406 --paper-green-400: #66bb6a;

	12407 --paper-green-500: #4caf50;

	12408 --paper-green-600: #43a047;

	12409 --paper-green-700: #388e3c;

	12410 --paper-green-800: #2e7d32;

	12411 --paper-green-900: #1b5e20;

	12412 --paper-green-a100: #b9f6ca;

	12413 --paper-green-a200: #69f0ae;

	12414 --paper-green-a400: #00e676;

	12415 --paper-green-a700: #00c853;

	12416

	12417 --paper-light-green-50: #f1f8e9;

	12418 --paper-light-green-100: #dcedc8;

	12419 --paper-light-green-200: #c5e1a5;

	12420 --paper-light-green-300: #aed581;

	12421 --paper-light-green-400: #9ccc65;

	12422 --paper-light-green-500: #8bc34a;

	12423 --paper-light-green-600: #7cb342;

	12424 --paper-light-green-700: #689f38;

	12425 --paper-light-green-800: #558b2f;

	12426 --paper-light-green-900: #33691e;

	12427 --paper-light-green-a100: #ccff90;

	12428 --paper-light-green-a200: #b2ff59;

	12429 --paper-light-green-a400: #76ff03;

	12430 --paper-light-green-a700: #64dd17;

	12431

	12432 --paper-lime-50: #f9fbe7;

	12433 --paper-lime-100: #f0f4c3;

	12434 --paper-lime-200: #e6ee9c;

	12435 --paper-lime-300: #dce775;

	12436 --paper-lime-400: #d4e157;

	12437 --paper-lime-500: #cddc39;

	12438 --paper-lime-600: #c0ca33;

	12439 --paper-lime-700: #afb42b;

	12440 --paper-lime-800: #9e9d24;

	12441 --paper-lime-900: #827717;

	12442 --paper-lime-a100: #f4ff81;

	12443 --paper-lime-a200: #eeff41;

	12444 --paper-lime-a400: #c6ff00;

	12445 --paper-lime-a700: #aeea00;

	12446

	12447 --paper-yellow-50: #fffde7;

	12448 --paper-yellow-100: #fff9c4;

	12449 --paper-yellow-200: #fff59d;

	12450 --paper-yellow-300: #fff176;

	12451 --paper-yellow-400: #ffee58;

	12452 --paper-yellow-500: #ffeb3b;

	12453 --paper-yellow-600: #fdd835;

	12454 --paper-yellow-700: #fbc02d;

	12455 --paper-yellow-800: #f9a825;

	12456 --paper-yellow-900: #f57f17;

	12457 --paper-yellow-a100: #ffff8d;

	12458 --paper-yellow-a200: #ffff00;

	12459 --paper-yellow-a400: #ffea00;

	12460 --paper-yellow-a700: #ffd600;

	12461

	12462 --paper-amber-50: #fff8e1;

	12463 --paper-amber-100: #ffecb3;

	12464 --paper-amber-200: #ffe082;

	12465 --paper-amber-300: #ffd54f;

	12466 --paper-amber-400: #ffca28;

	12467 --paper-amber-500: #ffc107;

	12468 --paper-amber-600: #ffb300;

	12469 --paper-amber-700: #ffa000;

	12470 --paper-amber-800: #ff8f00;

	12471 --paper-amber-900: #ff6f00;

	12472 --paper-amber-a100: #ffe57f;

	12473 --paper-amber-a200: #ffd740;

	12474 --paper-amber-a400: #ffc400;

	12475 --paper-amber-a700: #ffab00;

	12476

	12477 --paper-orange-50: #fff3e0;

	12478 --paper-orange-100: #ffe0b2;

	12479 --paper-orange-200: #ffcc80;

	12480 --paper-orange-300: #ffb74d;

	12481 --paper-orange-400: #ffa726;

	12482 --paper-orange-500: #ff9800;

	12483 --paper-orange-600: #fb8c00;

	12484 --paper-orange-700: #f57c00;

	12485 --paper-orange-800: #ef6c00;

	12486 --paper-orange-900: #e65100;

	12487 --paper-orange-a100: #ffd180;

	12488 --paper-orange-a200: #ffab40;

	12489 --paper-orange-a400: #ff9100;

	12490 --paper-orange-a700: #ff6500;

	12491

	12492 --paper-deep-orange-50: #fbe9e7;

	12493 --paper-deep-orange-100: #ffccbc;

	12494 --paper-deep-orange-200: #ffab91;

	12495 --paper-deep-orange-300: #ff8a65;

	12496 --paper-deep-orange-400: #ff7043;

	12497 --paper-deep-orange-500: #ff5722;

	12498 --paper-deep-orange-600: #f4511e;

	12499 --paper-deep-orange-700: #e64a19;

	12500 --paper-deep-orange-800: #d84315;

	12501 --paper-deep-orange-900: #bf360c;

	12502 --paper-deep-orange-a100: #ff9e80;

	12503 --paper-deep-orange-a200: #ff6e40;

	12504 --paper-deep-orange-a400: #ff3d00;

	12505 --paper-deep-orange-a700: #dd2c00;

	12506

	12507 --paper-brown-50: #efebe9;

	12508 --paper-brown-100: #d7ccc8;

	12509 --paper-brown-200: #bcaaa4;

	12510 --paper-brown-300: #a1887f;

	12511 --paper-brown-400: #8d6e63;

	12512 --paper-brown-500: #795548;

	12513 --paper-brown-600: #6d4c41;

	12514 --paper-brown-700: #5d4037;

	12515 --paper-brown-800: #4e342e;

	12516 --paper-brown-900: #3e2723;

	12517

	12518 --paper-grey-50: #fafafa;

	12519 --paper-grey-100: #f5f5f5;

	12520 --paper-grey-200: #eeeeee;

	12521 --paper-grey-300: #e0e0e0;

	12522 --paper-grey-400: #bdbdbd;

	12523 --paper-grey-500: #9e9e9e;

	12524 --paper-grey-600: #757575;

	12525 --paper-grey-700: #616161;

	12526 --paper-grey-800: #424242;

	12527 --paper-grey-900: #212121;

	12528

	12529 --paper-blue-grey-50: #eceff1;

	12530 --paper-blue-grey-100: #cfd8dc;

	12531 --paper-blue-grey-200: #b0bec5;

	12532 --paper-blue-grey-300: #90a4ae;

	12533 --paper-blue-grey-400: #78909c;

	12534 --paper-blue-grey-500: #607d8b;

	12535 --paper-blue-grey-600: #546e7a;

	12536 --paper-blue-grey-700: #455a64;

	12537 --paper-blue-grey-800: #37474f;

	12538 --paper-blue-grey-900: #263238;

	12539

	12540 /* opacity for dark text on a light background */

	12541 --dark-divider-opacity: 0.12;

	12542 --dark-disabled-opacity: 0.38; /* or hint text or icon */

	12543 --dark-secondary-opacity: 0.54;

	12544 --dark-primary-opacity: 0.87;

	12545

	12546 /* opacity for light text on a dark background */

	12547 --light-divider-opacity: 0.12;

	12548 --light-disabled-opacity: 0.3; /* or hint text or icon */

	12549 --light-secondary-opacity: 0.7;

	12550 --light-primary-opacity: 1.0;

	12551

	12552 }

	12553

	12554 </style>

	12555 <script>

	12556

	12557 /** @polymerBehavior */

	12558 Polymer.PaperSpinnerBehavior = {

	12559

	12560 listeners: {

	12561 'animationend': '__reset',

	12562 'webkitAnimationEnd': '__reset'

	12563 },

	12564

	12565 properties: {

	12566 /**

	12567 * Displays the spinner.

	12568 */

	12569 active: {

	12570 type: Boolean,

	12571 value: false,

	12572 reflectToAttribute: true,

	12573 observer: '__activeChanged'

	12574 },

	12575

	12576 /**

	12577 * Alternative text content for accessibility support.

	12578 * If alt is present, it will add an aria-label whose content matches alt when active.

	12579 * If alt is not present, it will default to 'loading' as the alt value.

	12580 */

	12581 alt: {

	12582 type: String,

	12583 value: 'loading',

	12584 observer: '__altChanged'

	12585 },

	12586

	12587 __coolingDown: {

	12588 type: Boolean,

	12589 value: false

	12590 }

	12591 },

	12592

	12593 __computeContainerClasses: function(active, coolingDown) {

	12594 return [

	12595 active \|\| coolingDown ? 'active' : '',

	12596 coolingDown ? 'cooldown' : ''

	12597 ].join(' ');

	12598 },

	12599

	12600 __activeChanged: function(active, old) {

	12601 this.__setAriaHidden(!active);

	12602 this.__coolingDown = !active && old;

	12603 },

	12604

	12605 __altChanged: function(alt) {

	12606 // user-provided `aria-label` takes precedence over prototype default

	12607 if (alt === this.getPropertyInfo('alt').value) {

	12608 this.alt = this.getAttribute('aria-label') \|\| alt;

	12609 } else {

	12610 this.__setAriaHidden(alt==='');

	12611 this.setAttribute('aria-label', alt);

	12612 }

	12613 },

	12614

	12615 __setAriaHidden: function(hidden) {

	12616 var attr = 'aria-hidden';

	12617 if (hidden) {

	12618 this.setAttribute(attr, 'true');

	12619 } else {

	12620 this.removeAttribute(attr);

	12621 }

	12622 },

	12623

	12624 __reset: function() {

	12625 this.active = false;

	12626 this.__coolingDown = false;

	12627 }

	12628 };

	12629 </script>

	12630 <dom-module id="paper-spinner-styles" assetpath="bower_components/paper-spinner/ ">

	12631 <template>

	12632 <style>

	12633 /*

	12634 /**************************/

	12635 /* STYLES FOR THE SPINNER */

	12636 /**************************/

	12637

	12638 /*

	12639 * Constants:

	12640 * ARCSIZE = 270 degrees (amount of circle the arc takes up)

	12641 * ARCTIME = 1333ms (time it takes to expand and contract arc)

	12642 * ARCSTARTROT = 216 degrees (how much the start location of the arc

	12643 * should rotate each time, 216 gives us a

	12644 * 5 pointed star shape (it's 360/5 * 3).

	12645 * For a 7 pointed star, we might do

	12646 * 360/7 * 3 = 154.286)

	12647 * SHRINK_TIME = 400ms

	12648 */

	12649

	12650 :host {

	12651 display: inline-block;

	12652 position: relative;

	12653 width: 28px;

	12654 height: 28px;

	12655

	12656 /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */

	12657 --paper-spinner-container-rotation-duration: 1568ms;

	12658

	12659 /* ARCTIME */

	12660 --paper-spinner-expand-contract-duration: 1333ms;

	12661

	12662 /* 4 * ARCTIME */

	12663 --paper-spinner-full-cycle-duration: 5332ms;

	12664

	12665 /* SHRINK_TIME */

	12666 --paper-spinner-cooldown-duration: 400ms;

	12667 }

	12668

	12669 #spinnerContainer {

	12670 width: 100%;

	12671 height: 100%;

	12672

	12673 /* The spinner does not have any contents that would have to be

	12674 * flipped if the direction changes. Always use ltr so that the

	12675 * style works out correctly in both cases. */

	12676 direction: ltr;

	12677 }

	12678

	12679 #spinnerContainer.active {

	12680 -webkit-animation: container-rotate var(--paper-spinner-container-rotati on-duration) linear infinite;

	12681 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite;

	12682 }

	12683

	12684 @-webkit-keyframes container-rotate {

	12685 to { -webkit-transform: rotate(360deg) }

	12686 }

	12687

	12688 @keyframes container-rotate {

	12689 to { transform: rotate(360deg) }

	12690 }

	12691

	12692 .spinner-layer {

	12693 position: absolute;

	12694 width: 100%;

	12695 height: 100%;

	12696 opacity: 0;

	12697 white-space: nowrap;

	12698 border-color: var(--paper-spinner-color, --google-blue-500);

	12699 }

	12700

	12701 .layer-1 {

	12702 border-color: var(--paper-spinner-layer-1-color, --google-blue-500);

	12703 }

	12704

	12705 .layer-2 {

	12706 border-color: var(--paper-spinner-layer-2-color, --google-red-500);

	12707 }

	12708

	12709 .layer-3 {

	12710 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);

	12711 }

	12712

	12713 .layer-4 {

	12714 border-color: var(--paper-spinner-layer-4-color, --google-green-500);

	12715 }

	12716

	12717 /**

	12718 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):

	12719 *

	12720 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel l - it doesn't

	12721 * guarantee that the animation will start _exactly_ after that value. So we avoid using

	12722 * animation-delay and instead set custom keyframes for each color (as lay er-2undant as it

	12723 * seems).

	12724 */

	12725 .active .spinner-layer {

	12726 -webkit-animation-name: fill-unfill-rotate;

	12727 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);

	12728 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);

	12729 -webkit-animation-iteration-count: infinite;

	12730 animation-name: fill-unfill-rotate;

	12731 animation-duration: var(--paper-spinner-full-cycle-duration);

	12732 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);

	12733 animation-iteration-count: infinite;

	12734 opacity: 1;

	12735 }

	12736

	12737 .active .spinner-layer.layer-1 {

	12738 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;

	12739 animation-name: fill-unfill-rotate, layer-1-fade-in-out;

	12740 }

	12741

	12742 .active .spinner-layer.layer-2 {

	12743 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;

	12744 animation-name: fill-unfill-rotate, layer-2-fade-in-out;

	12745 }

	12746

	12747 .active .spinner-layer.layer-3 {

	12748 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;

	12749 animation-name: fill-unfill-rotate, layer-3-fade-in-out;

	12750 }

	12751

	12752 .active .spinner-layer.layer-4 {

	12753 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;

	12754 animation-name: fill-unfill-rotate, layer-4-fade-in-out;

	12755 }

	12756

	12757 @-webkit-keyframes fill-unfill-rotate {

	12758 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */

	12759 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */

	12760 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */

	12761 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */

	12762 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */

	12763 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */

	12764 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */

	12765 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */

	12766 }

	12767

	12768 @keyframes fill-unfill-rotate {

	12769 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */

	12770 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */

	12771 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */

	12772 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */

	12773 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */

	12774 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */

	12775 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */

	12776 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */

	12777 }

	12778

	12779 @-webkit-keyframes layer-1-fade-in-out {

	12780 0% { opacity: 1 }

	12781 25% { opacity: 1 }

	12782 26% { opacity: 0 }

	12783 89% { opacity: 0 }

	12784 90% { opacity: 1 }

	12785 to { opacity: 1 }

	12786 }

	12787

	12788 @keyframes layer-1-fade-in-out {

	12789 0% { opacity: 1 }

	12790 25% { opacity: 1 }

	12791 26% { opacity: 0 }

	12792 89% { opacity: 0 }

	12793 90% { opacity: 1 }

	12794 to { opacity: 1 }

	12795 }

	12796

	12797 @-webkit-keyframes layer-2-fade-in-out {

	12798 0% { opacity: 0 }

	12799 15% { opacity: 0 }

	12800 25% { opacity: 1 }

	12801 50% { opacity: 1 }

	12802 51% { opacity: 0 }

	12803 to { opacity: 0 }

	12804 }

	12805

	12806 @keyframes layer-2-fade-in-out {

	12807 0% { opacity: 0 }

	12808 15% { opacity: 0 }

	12809 25% { opacity: 1 }

	12810 50% { opacity: 1 }

	12811 51% { opacity: 0 }

	12812 to { opacity: 0 }

	12813 }

	12814

	12815 @-webkit-keyframes layer-3-fade-in-out {

	12816 0% { opacity: 0 }

	12817 40% { opacity: 0 }

	12818 50% { opacity: 1 }

	12819 75% { opacity: 1 }

	12820 76% { opacity: 0 }

	12821 to { opacity: 0 }

	12822 }

	12823

	12824 @keyframes layer-3-fade-in-out {

	12825 0% { opacity: 0 }

	12826 40% { opacity: 0 }

	12827 50% { opacity: 1 }

	12828 75% { opacity: 1 }

	12829 76% { opacity: 0 }

	12830 to { opacity: 0 }

	12831 }

	12832

	12833 @-webkit-keyframes layer-4-fade-in-out {

	12834 0% { opacity: 0 }

	12835 65% { opacity: 0 }

	12836 75% { opacity: 1 }

	12837 90% { opacity: 1 }

	12838 to { opacity: 0 }

	12839 }

	12840

	12841 @keyframes layer-4-fade-in-out {

	12842 0% { opacity: 0 }

	12843 65% { opacity: 0 }

	12844 75% { opacity: 1 }

	12845 90% { opacity: 1 }

	12846 to { opacity: 0 }

	12847 }

	12848

	12849 .circle-clipper {

	12850 display: inline-block;

	12851 position: relative;

	12852 width: 50%;

	12853 height: 100%;

	12854 overflow: hidden;

	12855 border-color: inherit;

	12856 }

	12857

	12858 /**

	12859 * Patch the gap that appear between the two adjacent div.circle-clipper w hile the

	12860 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).

	12861 */

	12862 .spinner-layer::after {

	12863 left: 45%;

	12864 width: 10%;

	12865 border-top-style: solid;

	12866 }

	12867

	12868 .spinner-layer::after,

	12869 .circle-clipper::after {

	12870 content: '';

	12871 box-sizing: border-box;

	12872 position: absolute;

	12873 top: 0;

	12874 border-width: var(--paper-spinner-stroke-width, 3px);

	12875 border-color: inherit;

	12876 border-radius: 50%;

	12877 }

	12878

	12879 .circle-clipper::after {

	12880 bottom: 0;

	12881 width: 200%;

	12882 border-style: solid;

	12883 border-bottom-color: transparent !important;

	12884 }

	12885

	12886 .circle-clipper.left::after {

	12887 left: 0;

	12888 border-right-color: transparent !important;

	12889 -webkit-transform: rotate(129deg);

	12890 transform: rotate(129deg);

	12891 }

	12892

	12893 .circle-clipper.right::after {

	12894 left: -100%;

	12895 border-left-color: transparent !important;

	12896 -webkit-transform: rotate(-129deg);

	12897 transform: rotate(-129deg);

	12898 }

	12899

	12900 .active .gap-patch::after,

	12901 .active .circle-clipper::after {

	12902 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration );

	12903 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);

	12904 -webkit-animation-iteration-count: infinite;

	12905 animation-duration: var(--paper-spinner-expand-contract-duration);

	12906 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);

	12907 animation-iteration-count: infinite;

	12908 }

	12909

	12910 .active .circle-clipper.left::after {

	12911 -webkit-animation-name: left-spin;

	12912 animation-name: left-spin;

	12913 }

	12914

	12915 .active .circle-clipper.right::after {

	12916 -webkit-animation-name: right-spin;

	12917 animation-name: right-spin;

	12918 }

	12919

	12920 @-webkit-keyframes left-spin {

	12921 0% { -webkit-transform: rotate(130deg) }

	12922 50% { -webkit-transform: rotate(-5deg) }

	12923 to { -webkit-transform: rotate(130deg) }

	12924 }

	12925

	12926 @keyframes left-spin {

	12927 0% { transform: rotate(130deg) }

	12928 50% { transform: rotate(-5deg) }

	12929 to { transform: rotate(130deg) }

	12930 }

	12931

	12932 @-webkit-keyframes right-spin {

	12933 0% { -webkit-transform: rotate(-130deg) }

	12934 50% { -webkit-transform: rotate(5deg) }

	12935 to { -webkit-transform: rotate(-130deg) }

	12936 }

	12937

	12938 @keyframes right-spin {

	12939 0% { transform: rotate(-130deg) }

	12940 50% { transform: rotate(5deg) }

	12941 to { transform: rotate(-130deg) }

	12942 }

	12943

	12944 #spinnerContainer.cooldown {

	12945 -webkit-animation: container-rotate var(--paper-spinner-container-rotati on-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cu bic-bezier(0.4, 0.0, 0.2, 1);

	12946 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi er(0.4, 0.0, 0.2, 1);

	12947 }

	12948

	12949 @-webkit-keyframes fade-out {

	12950 0% { opacity: 1 }

	12951 to { opacity: 0 }

	12952 }

	12953

	12954 @keyframes fade-out {

	12955 0% { opacity: 1 }

	12956 to { opacity: 0 }

	12957 }

	12958 </style>

	12959 </template>

	12960 </dom-module>

	12961

	12962

	12963 <dom-module id="paper-spinner-lite" assetpath="bower_components/paper-spinner/">

	12964 <template strip-whitespace="">

	12965 <style include="paper-spinner-styles"></style>

	12966

	12967 <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, _ _coolingDown)]]">

	12968 <div class="spinner-layer">

	12969 <div class="circle-clipper left"></div>

	12970 <div class="circle-clipper right"></div>

	12971 </div>

	12972 </div>

	12973 </template>

	12974

	12975 <script>

	12976 Polymer({

	12977 is: 'paper-spinner-lite',

	12978

	12979 behaviors: [

	12980 Polymer.PaperSpinnerBehavior

	12981 ]

	12982 });

	12983 </script>

	12984 </dom-module>

	12985

	12986 <dom-module id="iron-flex" assetpath="bower_components/iron-flex-layout/">

	12987 <template>

	12988 <style>

	12989 .layout.horizontal,

	12990 .layout.vertical {

	12991 display: -ms-flexbox;

	12992 display: -webkit-flex;

	12993 display: flex;

	12994 }

	12995

	12996 .layout.inline {

	12997 display: -ms-inline-flexbox;

	12998 display: -webkit-inline-flex;

	12999 display: inline-flex;

	13000 }

	13001

	13002 .layout.horizontal {

	13003 -ms-flex-direction: row;

	13004 -webkit-flex-direction: row;

	13005 flex-direction: row;

	13006 }

	13007

	13008 .layout.vertical {

	13009 -ms-flex-direction: column;

	13010 -webkit-flex-direction: column;

	13011 flex-direction: column;

	13012 }

	13013

	13014 .layout.wrap {

	13015 -ms-flex-wrap: wrap;

	13016 -webkit-flex-wrap: wrap;

	13017 flex-wrap: wrap;

	13018 }

	13019

	13020 .layout.center,

	13021 .layout.center-center {

	13022 -ms-flex-align: center;

	13023 -webkit-align-items: center;

	13024 align-items: center;

	13025 }

	13026

	13027 .layout.center-justified,

	13028 .layout.center-center {

	13029 -ms-flex-pack: center;

	13030 -webkit-justify-content: center;

	13031 justify-content: center;

	13032 }

	13033

	13034 .flex {

	13035 -ms-flex: 1 1 0.000000001px;

	13036 -webkit-flex: 1;

	13037 flex: 1;

	13038 -webkit-flex-basis: 0.000000001px;

	13039 flex-basis: 0.000000001px;

	13040 }

	13041

	13042 .flex-auto {

	13043 -ms-flex: 1 1 auto;

	13044 -webkit-flex: 1 1 auto;

	13045 flex: 1 1 auto;

	13046 }

	13047

	13048 .flex-none {

	13049 -ms-flex: none;

	13050 -webkit-flex: none;

	13051 flex: none;

	13052 }

	13053 </style>

	13054 </template>

	13055 </dom-module>

	13056

	13057

	13058 <dom-module id="iron-flex-reverse" assetpath="bower_components/iron-flex-layout/ ">

	13059 <template>

	13060 <style>

	13061 .layout.horizontal-reverse,

	13062 .layout.vertical-reverse {

	13063 display: -ms-flexbox;

	13064 display: -webkit-flex;

	13065 display: flex;

	13066 }

	13067

	13068 .layout.horizontal-reverse {

	13069 -ms-flex-direction: row-reverse;

	13070 -webkit-flex-direction: row-reverse;

	13071 flex-direction: row-reverse;

	13072 }

	13073

	13074 .layout.vertical-reverse {

	13075 -ms-flex-direction: column-reverse;

	13076 -webkit-flex-direction: column-reverse;

	13077 flex-direction: column-reverse;

	13078 }

	13079

	13080 .layout.wrap-reverse {

	13081 -ms-flex-wrap: wrap-reverse;

	13082 -webkit-flex-wrap: wrap-reverse;

	13083 flex-wrap: wrap-reverse;

	13084 }

	13085 </style>

	13086 </template>

	13087 </dom-module>

	13088

	13089

	13090 <dom-module id="iron-flex-alignment" assetpath="bower_components/iron-flex-layou t/">

	13091 <template>

	13092 <style>

	13093 /**

	13094 * Alignment in cross axis.

	13095 */

	13096 .layout.start {

	13097 -ms-flex-align: start;

	13098 -webkit-align-items: flex-start;

	13099 align-items: flex-start;

	13100 }

	13101

	13102 .layout.center,

	13103 .layout.center-center {

	13104 -ms-flex-align: center;

	13105 -webkit-align-items: center;

	13106 align-items: center;

	13107 }

	13108

	13109 .layout.end {

	13110 -ms-flex-align: end;

	13111 -webkit-align-items: flex-end;

	13112 align-items: flex-end;

	13113 }

	13114

	13115 .layout.baseline {

	13116 -ms-flex-align: baseline;

	13117 -webkit-align-items: baseline;

	13118 align-items: baseline;

	13119 }

	13120

	13121 /**

	13122 * Alignment in main axis.

	13123 */

	13124 .layout.start-justified {

	13125 -ms-flex-pack: start;

	13126 -webkit-justify-content: flex-start;

	13127 justify-content: flex-start;

	13128 }

	13129

	13130 .layout.center-justified,

	13131 .layout.center-center {

	13132 -ms-flex-pack: center;

	13133 -webkit-justify-content: center;

	13134 justify-content: center;

	13135 }

	13136

	13137 .layout.end-justified {

	13138 -ms-flex-pack: end;

	13139 -webkit-justify-content: flex-end;

	13140 justify-content: flex-end;

	13141 }

	13142

	13143 .layout.around-justified {

	13144 -ms-flex-pack: distribute;

	13145 -webkit-justify-content: space-around;

	13146 justify-content: space-around;

	13147 }

	13148

	13149 .layout.justified {

	13150 -ms-flex-pack: justify;

	13151 -webkit-justify-content: space-between;

	13152 justify-content: space-between;

	13153 }

	13154

	13155 /**

	13156 * Self alignment.

	13157 */

	13158 .self-start {

	13159 -ms-align-self: flex-start;

	13160 -webkit-align-self: flex-start;

	13161 align-self: flex-start;

	13162 }

	13163

	13164 .self-center {

	13165 -ms-align-self: center;

	13166 -webkit-align-self: center;

	13167 align-self: center;

	13168 }

	13169

	13170 .self-end {

	13171 -ms-align-self: flex-end;

	13172 -webkit-align-self: flex-end;

	13173 align-self: flex-end;

	13174 }

	13175

	13176 .self-stretch {

	13177 -ms-align-self: stretch;

	13178 -webkit-align-self: stretch;

	13179 align-self: stretch;

	13180 }

	13181

	13182 .self-baseline {

	13183 -ms-align-self: baseline;

	13184 -webkit-align-self: baseline;

	13185 align-self: baseline;

	13186 };

	13187

	13188 /**

	13189 * multi-line alignment in main axis.

	13190 */

	13191 .layout.start-aligned {

	13192 -ms-flex-line-pack: start; /* IE10 */

	13193 -ms-align-content: flex-start;

	13194 -webkit-align-content: flex-start;

	13195 align-content: flex-start;

	13196 }

	13197

	13198 .layout.end-aligned {

	13199 -ms-flex-line-pack: end; /* IE10 */

	13200 -ms-align-content: flex-end;

	13201 -webkit-align-content: flex-end;

	13202 align-content: flex-end;

	13203 }

	13204

	13205 .layout.center-aligned {

	13206 -ms-flex-line-pack: center; /* IE10 */

	13207 -ms-align-content: center;

	13208 -webkit-align-content: center;

	13209 align-content: center;

	13210 }

	13211

	13212 .layout.between-aligned {

	13213 -ms-flex-line-pack: justify; /* IE10 */

	13214 -ms-align-content: space-between;

	13215 -webkit-align-content: space-between;

	13216 align-content: space-between;

	13217 }

	13218

	13219 .layout.around-aligned {

	13220 -ms-flex-line-pack: distribute; /* IE10 */

	13221 -ms-align-content: space-around;

	13222 -webkit-align-content: space-around;

	13223 align-content: space-around;

	13224 }

	13225 </style>

	13226 </template>

	13227 </dom-module>

	13228

	13229 <dom-module id="iron-flex-factors" assetpath="bower_components/iron-flex-layout/ ">

	13230 <template>

	13231 <style>

	13232 .flex,

	13233 .flex-1 {

	13234 -ms-flex: 1 1 0.000000001px;

	13235 -webkit-flex: 1;

	13236 flex: 1;

	13237 -webkit-flex-basis: 0.000000001px;

	13238 flex-basis: 0.000000001px;

	13239 }

	13240

	13241 .flex-2 {

	13242 -ms-flex: 2;

	13243 -webkit-flex: 2;

	13244 flex: 2;

	13245 }

	13246

	13247 .flex-3 {

	13248 -ms-flex: 3;

	13249 -webkit-flex: 3;

	13250 flex: 3;

	13251 }

	13252

	13253 .flex-4 {

	13254 -ms-flex: 4;

	13255 -webkit-flex: 4;

	13256 flex: 4;

	13257 }

	13258

	13259 .flex-5 {

	13260 -ms-flex: 5;

	13261 -webkit-flex: 5;

	13262 flex: 5;

	13263 }

	13264

	13265 .flex-6 {

	13266 -ms-flex: 6;

	13267 -webkit-flex: 6;

	13268 flex: 6;

	13269 }

	13270

	13271 .flex-7 {

	13272 -ms-flex: 7;

	13273 -webkit-flex: 7;

	13274 flex: 7;

	13275 }

	13276

	13277 .flex-8 {

	13278 -ms-flex: 8;

	13279 -webkit-flex: 8;

	13280 flex: 8;

	13281 }

	13282

	13283 .flex-9 {

	13284 -ms-flex: 9;

	13285 -webkit-flex: 9;

	13286 flex: 9;

	13287 }

	13288

	13289 .flex-10 {

	13290 -ms-flex: 10;

	13291 -webkit-flex: 10;

	13292 flex: 10;

	13293 }

	13294

	13295 .flex-11 {

	13296 -ms-flex: 11;

	13297 -webkit-flex: 11;

	13298 flex: 11;

	13299 }

	13300

	13301 .flex-12 {

	13302 -ms-flex: 12;

	13303 -webkit-flex: 12;

	13304 flex: 12;

	13305 }

	13306 </style>

	13307 </template>

	13308 </dom-module>

	13309

	13310

	13311 <dom-module id="iron-positioning" assetpath="bower_components/iron-flex-layout/" >

	13312 <template>

	13313 <style>

	13314 .block {

	13315 display: block;

	13316 }

	13317

	13318 /* IE 10 support for HTML5 hidden attr */

	13319 [hidden] {

	13320 display: none !important;

	13321 }

	13322

	13323 .invisible {

	13324 visibility: hidden !important;

	13325 }

	13326

	13327 .relative {

	13328 position: relative;

	13329 }

	13330

	13331 .fit {

	13332 position: absolute;

	13333 top: 0;

	13334 right: 0;

	13335 bottom: 0;

	13336 left: 0;

	13337 }

	13338

	13339 body.fullbleed {

	13340 margin: 0;

	13341 height: 100vh;

	13342 }

	13343

	13344 .scroll {

	13345 -webkit-overflow-scrolling: touch;

	13346 overflow: auto;

	13347 }

	13348

	13349 /* fixed position */

	13350 .fixed-bottom,

	13351 .fixed-left,

	13352 .fixed-right,

	13353 .fixed-top {

	13354 position: fixed;

	13355 }

	13356

	13357 .fixed-top {

	13358 top: 0;

	13359 left: 0;

	13360 right: 0;

	13361 }

	13362

	13363 .fixed-right {

	13364 top: 0;

	13365 right: 0;

	13366 bottom: 0;

	13367 }

	13368

	13369 .fixed-bottom {

	13370 right: 0;

	13371 bottom: 0;

	13372 left: 0;

	13373 }

	13374

	13375 .fixed-left {

	13376 top: 0;

	13377 bottom: 0;

	13378 left: 0;

	13379 }

	13380 </style>

	13381 </template>

	13382 </dom-module>

	13383 <script>

9162 (function() {	13384 (function() {

9163 "use strict";	13385 "use strict";

9164 /**	13386 /**

9165 `Polymer.IronJsonpLibraryBehavior` loads a jsonp library.	13387 `Polymer.IronJsonpLibraryBehavior` loads a jsonp library.

9166 Multiple components can request same library, only one copy will load.	13388 Multiple components can request same library, only one copy will load.

9167	13389

9168 Some libraries require a specific global function be defined.	13390 Some libraries require a specific global function be defined.

9169 If this is the case, specify the `callbackName` property.	13391 If this is the case, specify the `callbackName` property.

9170	13392

9171 You should use an HTML Import to load library dependencies	13393 You should use an HTML Import to load library dependencies

(...skipping 1047 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
10219 }	14441 }

10220 });	14442 });

10221 })();	14443 })();

10222 </script>	14444 </script>

10223 <dom-module id="auth-signin" assetpath="imp/common/">	14445 <dom-module id="auth-signin" assetpath="imp/common/">

10224 <template>	14446 <template>

10225 <style>	14447 <style>

10226 #avatar {	14448 #avatar {

10227 border-radius: 5px;	14449 border-radius: 5px;

10228 }	14450 }

10229 #signinContainer {	14451 a {

10230 margin-top: 14px;	14452 color: white;

	14453 }

	14454 .center {

	14455 vertical-align: middle;

10231 }	14456 }

10232 </style>	14457 </style>

10233	14458

10234 <google-signin-aware id="aware" client-id="[[clientId]]" scopes="email" on-g oogle-signin-aware-success="_onSignin" on-google-signin-aware-signed-out="_onSig nout">	14459 <google-signin-aware id="aware" client-id="[[clientId]]" scopes="email" on-g oogle-signin-aware-success="_onSignin" on-google-signin-aware-signed-out="_onSig nout">

10235 </google-signin-aware>	14460 </google-signin-aware>

10236	14461

10237 <template is="dom-if" if="[[!signedIn]]">	14462 <template is="dom-if" if="[[!signedIn]]">

10238 <div id="signinContainer">	14463 <div id="signinContainer">

10239 <a on-tap="signIn" href="#">Sign in</a>	14464 <a on-tap="signIn" href="#">Sign in</a>

10240 </div>	14465 </div>

10241 </template>	14466 </template>

10242	14467

10243 <template is="dom-if" if="[[signedIn]]">	14468 <template is="dom-if" if="[[signedIn]]">

10244 <img id="avatar" src="[[profile.imageUrl]]" width="30" height="30">	14469 <img class="center" id="avatar" src="[[profile.imageUrl]]" width="30" heig ht="30">

10245 <span>[[profile.email]]</span>	14470 <span class="center">[[profile.email]]</span>

10246 <span>\|</span>	14471 <span class="center">\|</span>

10247 <a on-tap="signOut" href="#">Sign out</a>	14472 <a class="center" on-tap="signOut" href="#">Sign out</a>

10248 </template>	14473 </template>

10249 </template>	14474 </template>

10250 <script>	14475 <script>

10251 'use strict';	14476 'use strict';

10252 Polymer({	14477 Polymer({

10253 is: 'auth-signin',	14478 is: 'auth-signin',

10254 properties: {	14479 properties: {

10255 authHeaders: {	14480 authHeaders: {

10256 type: Object,	14481 type: Object,

10257 computed: "_makeHeader(authResponse)",	14482 computed: "_makeHeader(authResponse)",

(...skipping 45 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
10303	14528

10304 signIn: function() {	14529 signIn: function() {

10305 this.$.aware.signIn();	14530 this.$.aware.signIn();

10306 },	14531 },

10307	14532

10308 signOut: function() {	14533 signOut: function() {

10309 this.$.aware.signOut();	14534 this.$.aware.signOut();

10310 }	14535 }

10311 });	14536 });

10312 </script>	14537 </script>

	14538 </dom-module><dom-module id="swarming-app" assetpath="imp/common/">

	14539 <template>

	14540 <style include="iron-flex">

	14541 :host {

	14542 position: absolute;

	14543 top: 0;

	14544 bottom: 0;

	14545 left: 0;

	14546 right: 0;

	14547 }

	14548

	14549 app-toolbar {

	14550 background-color: #4285f4;

	14551 color: #fff;

	14552 }

	14553

	14554 app-toolbar a {

	14555 color: #fff;

	14556 }

	14557 .left {

	14558 margin-right:15px;

	14559 }

	14560 .right {

	14561 margin-left:15px;

	14562 }

	14563 .main-content {

	14564 padding: 3px;

	14565 }

	14566

	14567 paper-spinner-lite {

	14568 --paper-spinner-color: var(--google-yellow-500);

	14569 }

	14570 </style>

	14571 <app-header-layout>

	14572 <app-header fixed="">

	14573 <app-toolbar>

	14574 <div class="title left">[[name]]</div>

	14575 <paper-spinner-lite class="left" active="[[busy]]"></paper-spinner-lit e>

	14576

	14577 <a class="left" href="/newui/">Home</a>

	14578 <a class="left" href="/newui/botlist">Bot List</a>

	14579 <div class="flex"></div>

	14580

	14581 <auth-signin class="right" client-id="20770472288-t5smpbpjptka4nd888fv 0ctd23ftba2o.apps.googleusercontent.com" auth-headers="{{auth_headers}}">

	14582 </auth-signin>

	14583 </app-toolbar>

	14584 </app-header>

	14585 <div class="main-content">

	14586 <content></content>

	14587 </div>

	14588 </app-header-layout>

	14589

	14590 </template>

	14591 <script>

	14592 Polymer({

	14593 is: 'swarming-app',

	14594 properties: {

	14595 auth_headers: {

	14596 type: Object,

	14597 notify: true,

	14598 },

	14599 busy: {

	14600 type: Boolean,

	14601 },

	14602 name: {

	14603 type: String,

	14604 },

	14605 },

	14606

	14607 });

	14608 </script>

10313 </dom-module><dom-module id="swarming-index" assetpath="imp/index/">	14609 </dom-module><dom-module id="swarming-index" assetpath="imp/index/">

10314 <template>	14610 <template>

10315 <style>	14611 <style>

10316 :host {	14612 :host {

10317 display: block;	14613 display: block;

10318 }	14614 }

10319 </style>	14615 </style>

10320	14616

10321 <h1>HELLO WORLD</h1><h1>	14617 <swarming-app auth_headers="{{auth_headers}}" name="Swarming" busy="[[busy]] ">

10322	14618

10323	14619 <iron-ajax id="request" url="/_ah/api/swarming/v1/server/details" headers= "[[auth_headers]]" handle-as="json" last-response="{{serverDetails}}" loading="{ {busy}}">

10324 <auth-signin auth-headers="{{auth}}" client-id="20770472288-t5smpbpjptka4nd8 88fv0ctd23ftba2o.apps.googleusercontent.com" on-auth-signin="signIn">	14620 </iron-ajax>

10325 </auth-signin>

10326	14621

10327 <iron-ajax id="request" url="/_ah/api/swarming/v1/server/details" headers="[ [auth]]" handle-as="json" on-response="handleResponse">	14622 <h1>HELLO WORLD</h1>

10328 </iron-ajax>

10329	14623

10330 </h1></template>	14624 <div>Server Version: [[serverDetails.server_version]]</div>

	14625

	14626 </swarming-app>

	14627

	14628 </template>

10331 <script>	14629 <script>

10332 Polymer({	14630 Polymer({

10333 is: 'swarming-index',	14631 is: 'swarming-index',

10334	14632

	14633 properties: {

	14634 auth_headers: {

	14635 type: Object,

	14636 observer: "signIn",

	14637 },

	14638

	14639 serverDetails: {

	14640 type: String,

	14641 }

	14642 },

	14643

10335 signIn: function(){	14644 signIn: function(){

10336 this.$.request.generateRequest();	14645 this.$.request.generateRequest();

10337 },	14646 },

10338	14647

10339 handleResponse: function(a,b){

10340 console.log(this.$.request.lastResponse);

10341 }

10342 });	14648 });

10343 </script>	14649 </script>

10344 </dom-module></div>	14650 </dom-module></div></body></html>

10345 <swarming-index></swarming-index>

10346

10347

10348 </body></html>

OLD	NEW