| Index: appengine/swarming/elements/build/elements.html
|
| diff --git a/appengine/swarming/elements/build/elements.html b/appengine/swarming/elements/build/elements.html
|
| index c27f391eb821f00bada53e8e231b28ea766e2e41..6979e82b5e0feb0d9fa6d2ce9c2edd51c9f55a1e 100644
|
| --- a/appengine/swarming/elements/build/elements.html
|
| +++ b/appengine/swarming/elements/build/elements.html
|
| @@ -12231,6 +12231,404 @@ if (!window.Promise) {
|
| });
|
| </script>
|
| </dom-module>
|
| +
|
| +<dom-module id="iron-flex" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| + <template>
|
| + <style>
|
| + .layout.horizontal,
|
| + .layout.vertical {
|
| + display: -ms-flexbox;
|
| + display: -webkit-flex;
|
| + display: flex;
|
| + }
|
| +
|
| + .layout.inline {
|
| + display: -ms-inline-flexbox;
|
| + display: -webkit-inline-flex;
|
| + display: inline-flex;
|
| + }
|
| +
|
| + .layout.horizontal {
|
| + -ms-flex-direction: row;
|
| + -webkit-flex-direction: row;
|
| + flex-direction: row;
|
| + }
|
| +
|
| + .layout.vertical {
|
| + -ms-flex-direction: column;
|
| + -webkit-flex-direction: column;
|
| + flex-direction: column;
|
| + }
|
| +
|
| + .layout.wrap {
|
| + -ms-flex-wrap: wrap;
|
| + -webkit-flex-wrap: wrap;
|
| + flex-wrap: wrap;
|
| + }
|
| +
|
| + .layout.center,
|
| + .layout.center-center {
|
| + -ms-flex-align: center;
|
| + -webkit-align-items: center;
|
| + align-items: center;
|
| + }
|
| +
|
| + .layout.center-justified,
|
| + .layout.center-center {
|
| + -ms-flex-pack: center;
|
| + -webkit-justify-content: center;
|
| + justify-content: center;
|
| + }
|
| +
|
| + .flex {
|
| + -ms-flex: 1 1 0.000000001px;
|
| + -webkit-flex: 1;
|
| + flex: 1;
|
| + -webkit-flex-basis: 0.000000001px;
|
| + flex-basis: 0.000000001px;
|
| + }
|
| +
|
| + .flex-auto {
|
| + -ms-flex: 1 1 auto;
|
| + -webkit-flex: 1 1 auto;
|
| + flex: 1 1 auto;
|
| + }
|
| +
|
| + .flex-none {
|
| + -ms-flex: none;
|
| + -webkit-flex: none;
|
| + flex: none;
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="iron-flex-reverse" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| + <template>
|
| + <style>
|
| + .layout.horizontal-reverse,
|
| + .layout.vertical-reverse {
|
| + display: -ms-flexbox;
|
| + display: -webkit-flex;
|
| + display: flex;
|
| + }
|
| +
|
| + .layout.horizontal-reverse {
|
| + -ms-flex-direction: row-reverse;
|
| + -webkit-flex-direction: row-reverse;
|
| + flex-direction: row-reverse;
|
| + }
|
| +
|
| + .layout.vertical-reverse {
|
| + -ms-flex-direction: column-reverse;
|
| + -webkit-flex-direction: column-reverse;
|
| + flex-direction: column-reverse;
|
| + }
|
| +
|
| + .layout.wrap-reverse {
|
| + -ms-flex-wrap: wrap-reverse;
|
| + -webkit-flex-wrap: wrap-reverse;
|
| + flex-wrap: wrap-reverse;
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="iron-flex-alignment" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| + <template>
|
| + <style>
|
| + /**
|
| + * Alignment in cross axis.
|
| + */
|
| + .layout.start {
|
| + -ms-flex-align: start;
|
| + -webkit-align-items: flex-start;
|
| + align-items: flex-start;
|
| + }
|
| +
|
| + .layout.center,
|
| + .layout.center-center {
|
| + -ms-flex-align: center;
|
| + -webkit-align-items: center;
|
| + align-items: center;
|
| + }
|
| +
|
| + .layout.end {
|
| + -ms-flex-align: end;
|
| + -webkit-align-items: flex-end;
|
| + align-items: flex-end;
|
| + }
|
| +
|
| + .layout.baseline {
|
| + -ms-flex-align: baseline;
|
| + -webkit-align-items: baseline;
|
| + align-items: baseline;
|
| + }
|
| +
|
| + /**
|
| + * Alignment in main axis.
|
| + */
|
| + .layout.start-justified {
|
| + -ms-flex-pack: start;
|
| + -webkit-justify-content: flex-start;
|
| + justify-content: flex-start;
|
| + }
|
| +
|
| + .layout.center-justified,
|
| + .layout.center-center {
|
| + -ms-flex-pack: center;
|
| + -webkit-justify-content: center;
|
| + justify-content: center;
|
| + }
|
| +
|
| + .layout.end-justified {
|
| + -ms-flex-pack: end;
|
| + -webkit-justify-content: flex-end;
|
| + justify-content: flex-end;
|
| + }
|
| +
|
| + .layout.around-justified {
|
| + -ms-flex-pack: distribute;
|
| + -webkit-justify-content: space-around;
|
| + justify-content: space-around;
|
| + }
|
| +
|
| + .layout.justified {
|
| + -ms-flex-pack: justify;
|
| + -webkit-justify-content: space-between;
|
| + justify-content: space-between;
|
| + }
|
| +
|
| + /**
|
| + * Self alignment.
|
| + */
|
| + .self-start {
|
| + -ms-align-self: flex-start;
|
| + -webkit-align-self: flex-start;
|
| + align-self: flex-start;
|
| + }
|
| +
|
| + .self-center {
|
| + -ms-align-self: center;
|
| + -webkit-align-self: center;
|
| + align-self: center;
|
| + }
|
| +
|
| + .self-end {
|
| + -ms-align-self: flex-end;
|
| + -webkit-align-self: flex-end;
|
| + align-self: flex-end;
|
| + }
|
| +
|
| + .self-stretch {
|
| + -ms-align-self: stretch;
|
| + -webkit-align-self: stretch;
|
| + align-self: stretch;
|
| + }
|
| +
|
| + .self-baseline {
|
| + -ms-align-self: baseline;
|
| + -webkit-align-self: baseline;
|
| + align-self: baseline;
|
| + };
|
| +
|
| + /**
|
| + * multi-line alignment in main axis.
|
| + */
|
| + .layout.start-aligned {
|
| + -ms-flex-line-pack: start; /* IE10 */
|
| + -ms-align-content: flex-start;
|
| + -webkit-align-content: flex-start;
|
| + align-content: flex-start;
|
| + }
|
| +
|
| + .layout.end-aligned {
|
| + -ms-flex-line-pack: end; /* IE10 */
|
| + -ms-align-content: flex-end;
|
| + -webkit-align-content: flex-end;
|
| + align-content: flex-end;
|
| + }
|
| +
|
| + .layout.center-aligned {
|
| + -ms-flex-line-pack: center; /* IE10 */
|
| + -ms-align-content: center;
|
| + -webkit-align-content: center;
|
| + align-content: center;
|
| + }
|
| +
|
| + .layout.between-aligned {
|
| + -ms-flex-line-pack: justify; /* IE10 */
|
| + -ms-align-content: space-between;
|
| + -webkit-align-content: space-between;
|
| + align-content: space-between;
|
| + }
|
| +
|
| + .layout.around-aligned {
|
| + -ms-flex-line-pack: distribute; /* IE10 */
|
| + -ms-align-content: space-around;
|
| + -webkit-align-content: space-around;
|
| + align-content: space-around;
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<dom-module id="iron-flex-factors" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| + <template>
|
| + <style>
|
| + .flex,
|
| + .flex-1 {
|
| + -ms-flex: 1 1 0.000000001px;
|
| + -webkit-flex: 1;
|
| + flex: 1;
|
| + -webkit-flex-basis: 0.000000001px;
|
| + flex-basis: 0.000000001px;
|
| + }
|
| +
|
| + .flex-2 {
|
| + -ms-flex: 2;
|
| + -webkit-flex: 2;
|
| + flex: 2;
|
| + }
|
| +
|
| + .flex-3 {
|
| + -ms-flex: 3;
|
| + -webkit-flex: 3;
|
| + flex: 3;
|
| + }
|
| +
|
| + .flex-4 {
|
| + -ms-flex: 4;
|
| + -webkit-flex: 4;
|
| + flex: 4;
|
| + }
|
| +
|
| + .flex-5 {
|
| + -ms-flex: 5;
|
| + -webkit-flex: 5;
|
| + flex: 5;
|
| + }
|
| +
|
| + .flex-6 {
|
| + -ms-flex: 6;
|
| + -webkit-flex: 6;
|
| + flex: 6;
|
| + }
|
| +
|
| + .flex-7 {
|
| + -ms-flex: 7;
|
| + -webkit-flex: 7;
|
| + flex: 7;
|
| + }
|
| +
|
| + .flex-8 {
|
| + -ms-flex: 8;
|
| + -webkit-flex: 8;
|
| + flex: 8;
|
| + }
|
| +
|
| + .flex-9 {
|
| + -ms-flex: 9;
|
| + -webkit-flex: 9;
|
| + flex: 9;
|
| + }
|
| +
|
| + .flex-10 {
|
| + -ms-flex: 10;
|
| + -webkit-flex: 10;
|
| + flex: 10;
|
| + }
|
| +
|
| + .flex-11 {
|
| + -ms-flex: 11;
|
| + -webkit-flex: 11;
|
| + flex: 11;
|
| + }
|
| +
|
| + .flex-12 {
|
| + -ms-flex: 12;
|
| + -webkit-flex: 12;
|
| + flex: 12;
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="iron-positioning" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| + <template>
|
| + <style>
|
| + .block {
|
| + display: block;
|
| + }
|
| +
|
| + /* IE 10 support for HTML5 hidden attr */
|
| + [hidden] {
|
| + display: none !important;
|
| + }
|
| +
|
| + .invisible {
|
| + visibility: hidden !important;
|
| + }
|
| +
|
| + .relative {
|
| + position: relative;
|
| + }
|
| +
|
| + .fit {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + }
|
| +
|
| + body.fullbleed {
|
| + margin: 0;
|
| + height: 100vh;
|
| + }
|
| +
|
| + .scroll {
|
| + -webkit-overflow-scrolling: touch;
|
| + overflow: auto;
|
| + }
|
| +
|
| + /* fixed position */
|
| + .fixed-bottom,
|
| + .fixed-left,
|
| + .fixed-right,
|
| + .fixed-top {
|
| + position: fixed;
|
| + }
|
| +
|
| + .fixed-top {
|
| + top: 0;
|
| + left: 0;
|
| + right: 0;
|
| + }
|
| +
|
| + .fixed-right {
|
| + top: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| + }
|
| +
|
| + .fixed-bottom {
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + }
|
| +
|
| + .fixed-left {
|
| + top: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| <style is="custom-style">
|
|
|
| :root {
|
| @@ -12982,404 +13380,6 @@ if (!window.Promise) {
|
| });
|
| </script>
|
| </dom-module>
|
| -
|
| -<dom-module id="iron-flex" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| - <template>
|
| - <style>
|
| - .layout.horizontal,
|
| - .layout.vertical {
|
| - display: -ms-flexbox;
|
| - display: -webkit-flex;
|
| - display: flex;
|
| - }
|
| -
|
| - .layout.inline {
|
| - display: -ms-inline-flexbox;
|
| - display: -webkit-inline-flex;
|
| - display: inline-flex;
|
| - }
|
| -
|
| - .layout.horizontal {
|
| - -ms-flex-direction: row;
|
| - -webkit-flex-direction: row;
|
| - flex-direction: row;
|
| - }
|
| -
|
| - .layout.vertical {
|
| - -ms-flex-direction: column;
|
| - -webkit-flex-direction: column;
|
| - flex-direction: column;
|
| - }
|
| -
|
| - .layout.wrap {
|
| - -ms-flex-wrap: wrap;
|
| - -webkit-flex-wrap: wrap;
|
| - flex-wrap: wrap;
|
| - }
|
| -
|
| - .layout.center,
|
| - .layout.center-center {
|
| - -ms-flex-align: center;
|
| - -webkit-align-items: center;
|
| - align-items: center;
|
| - }
|
| -
|
| - .layout.center-justified,
|
| - .layout.center-center {
|
| - -ms-flex-pack: center;
|
| - -webkit-justify-content: center;
|
| - justify-content: center;
|
| - }
|
| -
|
| - .flex {
|
| - -ms-flex: 1 1 0.000000001px;
|
| - -webkit-flex: 1;
|
| - flex: 1;
|
| - -webkit-flex-basis: 0.000000001px;
|
| - flex-basis: 0.000000001px;
|
| - }
|
| -
|
| - .flex-auto {
|
| - -ms-flex: 1 1 auto;
|
| - -webkit-flex: 1 1 auto;
|
| - flex: 1 1 auto;
|
| - }
|
| -
|
| - .flex-none {
|
| - -ms-flex: none;
|
| - -webkit-flex: none;
|
| - flex: none;
|
| - }
|
| - </style>
|
| - </template>
|
| -</dom-module>
|
| -
|
| -
|
| -<dom-module id="iron-flex-reverse" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| - <template>
|
| - <style>
|
| - .layout.horizontal-reverse,
|
| - .layout.vertical-reverse {
|
| - display: -ms-flexbox;
|
| - display: -webkit-flex;
|
| - display: flex;
|
| - }
|
| -
|
| - .layout.horizontal-reverse {
|
| - -ms-flex-direction: row-reverse;
|
| - -webkit-flex-direction: row-reverse;
|
| - flex-direction: row-reverse;
|
| - }
|
| -
|
| - .layout.vertical-reverse {
|
| - -ms-flex-direction: column-reverse;
|
| - -webkit-flex-direction: column-reverse;
|
| - flex-direction: column-reverse;
|
| - }
|
| -
|
| - .layout.wrap-reverse {
|
| - -ms-flex-wrap: wrap-reverse;
|
| - -webkit-flex-wrap: wrap-reverse;
|
| - flex-wrap: wrap-reverse;
|
| - }
|
| - </style>
|
| - </template>
|
| -</dom-module>
|
| -
|
| -
|
| -<dom-module id="iron-flex-alignment" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| - <template>
|
| - <style>
|
| - /**
|
| - * Alignment in cross axis.
|
| - */
|
| - .layout.start {
|
| - -ms-flex-align: start;
|
| - -webkit-align-items: flex-start;
|
| - align-items: flex-start;
|
| - }
|
| -
|
| - .layout.center,
|
| - .layout.center-center {
|
| - -ms-flex-align: center;
|
| - -webkit-align-items: center;
|
| - align-items: center;
|
| - }
|
| -
|
| - .layout.end {
|
| - -ms-flex-align: end;
|
| - -webkit-align-items: flex-end;
|
| - align-items: flex-end;
|
| - }
|
| -
|
| - .layout.baseline {
|
| - -ms-flex-align: baseline;
|
| - -webkit-align-items: baseline;
|
| - align-items: baseline;
|
| - }
|
| -
|
| - /**
|
| - * Alignment in main axis.
|
| - */
|
| - .layout.start-justified {
|
| - -ms-flex-pack: start;
|
| - -webkit-justify-content: flex-start;
|
| - justify-content: flex-start;
|
| - }
|
| -
|
| - .layout.center-justified,
|
| - .layout.center-center {
|
| - -ms-flex-pack: center;
|
| - -webkit-justify-content: center;
|
| - justify-content: center;
|
| - }
|
| -
|
| - .layout.end-justified {
|
| - -ms-flex-pack: end;
|
| - -webkit-justify-content: flex-end;
|
| - justify-content: flex-end;
|
| - }
|
| -
|
| - .layout.around-justified {
|
| - -ms-flex-pack: distribute;
|
| - -webkit-justify-content: space-around;
|
| - justify-content: space-around;
|
| - }
|
| -
|
| - .layout.justified {
|
| - -ms-flex-pack: justify;
|
| - -webkit-justify-content: space-between;
|
| - justify-content: space-between;
|
| - }
|
| -
|
| - /**
|
| - * Self alignment.
|
| - */
|
| - .self-start {
|
| - -ms-align-self: flex-start;
|
| - -webkit-align-self: flex-start;
|
| - align-self: flex-start;
|
| - }
|
| -
|
| - .self-center {
|
| - -ms-align-self: center;
|
| - -webkit-align-self: center;
|
| - align-self: center;
|
| - }
|
| -
|
| - .self-end {
|
| - -ms-align-self: flex-end;
|
| - -webkit-align-self: flex-end;
|
| - align-self: flex-end;
|
| - }
|
| -
|
| - .self-stretch {
|
| - -ms-align-self: stretch;
|
| - -webkit-align-self: stretch;
|
| - align-self: stretch;
|
| - }
|
| -
|
| - .self-baseline {
|
| - -ms-align-self: baseline;
|
| - -webkit-align-self: baseline;
|
| - align-self: baseline;
|
| - };
|
| -
|
| - /**
|
| - * multi-line alignment in main axis.
|
| - */
|
| - .layout.start-aligned {
|
| - -ms-flex-line-pack: start; /* IE10 */
|
| - -ms-align-content: flex-start;
|
| - -webkit-align-content: flex-start;
|
| - align-content: flex-start;
|
| - }
|
| -
|
| - .layout.end-aligned {
|
| - -ms-flex-line-pack: end; /* IE10 */
|
| - -ms-align-content: flex-end;
|
| - -webkit-align-content: flex-end;
|
| - align-content: flex-end;
|
| - }
|
| -
|
| - .layout.center-aligned {
|
| - -ms-flex-line-pack: center; /* IE10 */
|
| - -ms-align-content: center;
|
| - -webkit-align-content: center;
|
| - align-content: center;
|
| - }
|
| -
|
| - .layout.between-aligned {
|
| - -ms-flex-line-pack: justify; /* IE10 */
|
| - -ms-align-content: space-between;
|
| - -webkit-align-content: space-between;
|
| - align-content: space-between;
|
| - }
|
| -
|
| - .layout.around-aligned {
|
| - -ms-flex-line-pack: distribute; /* IE10 */
|
| - -ms-align-content: space-around;
|
| - -webkit-align-content: space-around;
|
| - align-content: space-around;
|
| - }
|
| - </style>
|
| - </template>
|
| -</dom-module>
|
| -
|
| -<dom-module id="iron-flex-factors" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| - <template>
|
| - <style>
|
| - .flex,
|
| - .flex-1 {
|
| - -ms-flex: 1 1 0.000000001px;
|
| - -webkit-flex: 1;
|
| - flex: 1;
|
| - -webkit-flex-basis: 0.000000001px;
|
| - flex-basis: 0.000000001px;
|
| - }
|
| -
|
| - .flex-2 {
|
| - -ms-flex: 2;
|
| - -webkit-flex: 2;
|
| - flex: 2;
|
| - }
|
| -
|
| - .flex-3 {
|
| - -ms-flex: 3;
|
| - -webkit-flex: 3;
|
| - flex: 3;
|
| - }
|
| -
|
| - .flex-4 {
|
| - -ms-flex: 4;
|
| - -webkit-flex: 4;
|
| - flex: 4;
|
| - }
|
| -
|
| - .flex-5 {
|
| - -ms-flex: 5;
|
| - -webkit-flex: 5;
|
| - flex: 5;
|
| - }
|
| -
|
| - .flex-6 {
|
| - -ms-flex: 6;
|
| - -webkit-flex: 6;
|
| - flex: 6;
|
| - }
|
| -
|
| - .flex-7 {
|
| - -ms-flex: 7;
|
| - -webkit-flex: 7;
|
| - flex: 7;
|
| - }
|
| -
|
| - .flex-8 {
|
| - -ms-flex: 8;
|
| - -webkit-flex: 8;
|
| - flex: 8;
|
| - }
|
| -
|
| - .flex-9 {
|
| - -ms-flex: 9;
|
| - -webkit-flex: 9;
|
| - flex: 9;
|
| - }
|
| -
|
| - .flex-10 {
|
| - -ms-flex: 10;
|
| - -webkit-flex: 10;
|
| - flex: 10;
|
| - }
|
| -
|
| - .flex-11 {
|
| - -ms-flex: 11;
|
| - -webkit-flex: 11;
|
| - flex: 11;
|
| - }
|
| -
|
| - .flex-12 {
|
| - -ms-flex: 12;
|
| - -webkit-flex: 12;
|
| - flex: 12;
|
| - }
|
| - </style>
|
| - </template>
|
| -</dom-module>
|
| -
|
| -
|
| -<dom-module id="iron-positioning" assetpath="/res/imp/bower_components/iron-flex-layout/">
|
| - <template>
|
| - <style>
|
| - .block {
|
| - display: block;
|
| - }
|
| -
|
| - /* IE 10 support for HTML5 hidden attr */
|
| - [hidden] {
|
| - display: none !important;
|
| - }
|
| -
|
| - .invisible {
|
| - visibility: hidden !important;
|
| - }
|
| -
|
| - .relative {
|
| - position: relative;
|
| - }
|
| -
|
| - .fit {
|
| - position: absolute;
|
| - top: 0;
|
| - right: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - }
|
| -
|
| - body.fullbleed {
|
| - margin: 0;
|
| - height: 100vh;
|
| - }
|
| -
|
| - .scroll {
|
| - -webkit-overflow-scrolling: touch;
|
| - overflow: auto;
|
| - }
|
| -
|
| - /* fixed position */
|
| - .fixed-bottom,
|
| - .fixed-left,
|
| - .fixed-right,
|
| - .fixed-top {
|
| - position: fixed;
|
| - }
|
| -
|
| - .fixed-top {
|
| - top: 0;
|
| - left: 0;
|
| - right: 0;
|
| - }
|
| -
|
| - .fixed-right {
|
| - top: 0;
|
| - right: 0;
|
| - bottom: 0;
|
| - }
|
| -
|
| - .fixed-bottom {
|
| - right: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - }
|
| -
|
| - .fixed-left {
|
| - top: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - }
|
| - </style>
|
| - </template>
|
| -</dom-module>
|
| <script>
|
| (function() {
|
| "use strict";
|
| @@ -14547,7 +14547,7 @@ You can bind to `isAuthorized` property to monitor authorization state.
|
| }
|
|
|
| app-toolbar {
|
| - background-color: #4285f4;
|
| + background-color: #1F78B4;
|
| color: #fff;
|
| }
|
|
|
| @@ -14564,6 +14564,10 @@ You can bind to `isAuthorized` property to monitor authorization state.
|
| padding: 3px;
|
| }
|
|
|
| + .main-content a {
|
| + color: #1F78B4;
|
| + }
|
| +
|
| paper-spinner-lite {
|
| --paper-spinner-color: var(--google-yellow-500);
|
| }
|
| @@ -14606,12 +14610,22 @@ You can bind to `isAuthorized` property to monitor authorization state.
|
|
|
| });
|
| </script>
|
| +</dom-module>
|
| +
|
| +<dom-module id="swarming-app-style" assetpath="/res/imp/common/">
|
| + <style>
|
| + * {
|
| + font-family: sans-serif;
|
| + }
|
| + /* Only style anchor tags that are actually linking somewhere.*/
|
| + a[href] {
|
| + color: #1F78B4;
|
| + }
|
| + </style>
|
| </dom-module><dom-module id="swarming-index" assetpath="/res/imp/index/">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| - }
|
| + <style include="swarming-app-style">
|
| +
|
| </style>
|
|
|
| <swarming-app auth_headers="{{auth_headers}}" name="Swarming" busy="[[busy]]">
|
| @@ -14647,4 +14661,6994 @@ You can bind to `isAuthorized` property to monitor authorization state.
|
|
|
| });
|
| </script>
|
| +</dom-module>
|
| +
|
| +<script>
|
| +
|
| + (function() {
|
| +
|
| + // monostate data
|
| + var metaDatas = {};
|
| + var metaArrays = {};
|
| + var singleton = null;
|
| +
|
| + Polymer.IronMeta = Polymer({
|
| +
|
| + is: 'iron-meta',
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * The type of meta-data. All meta-data of the same type is stored
|
| + * together.
|
| + */
|
| + type: {
|
| + type: String,
|
| + value: 'default',
|
| + observer: '_typeChanged'
|
| + },
|
| +
|
| + /**
|
| + * The key used to store `value` under the `type` namespace.
|
| + */
|
| + key: {
|
| + type: String,
|
| + observer: '_keyChanged'
|
| + },
|
| +
|
| + /**
|
| + * The meta-data to store or retrieve.
|
| + */
|
| + value: {
|
| + type: Object,
|
| + notify: true,
|
| + observer: '_valueChanged'
|
| + },
|
| +
|
| + /**
|
| + * If true, `value` is set to the iron-meta instance itself.
|
| + */
|
| + self: {
|
| + type: Boolean,
|
| + observer: '_selfChanged'
|
| + },
|
| +
|
| + /**
|
| + * Array of all meta-data values for the given type.
|
| + */
|
| + list: {
|
| + type: Array,
|
| + notify: true
|
| + }
|
| +
|
| + },
|
| +
|
| + hostAttributes: {
|
| + hidden: true
|
| + },
|
| +
|
| + /**
|
| + * Only runs if someone invokes the factory/constructor directly
|
| + * e.g. `new Polymer.IronMeta()`
|
| + *
|
| + * @param {{type: (string|undefined), key: (string|undefined), value}=} config
|
| + */
|
| + factoryImpl: function(config) {
|
| + if (config) {
|
| + for (var n in config) {
|
| + switch(n) {
|
| + case 'type':
|
| + case 'key':
|
| + case 'value':
|
| + this[n] = config[n];
|
| + break;
|
| + }
|
| + }
|
| + }
|
| + },
|
| +
|
| + created: function() {
|
| + // TODO(sjmiles): good for debugging?
|
| + this._metaDatas = metaDatas;
|
| + this._metaArrays = metaArrays;
|
| + },
|
| +
|
| + _keyChanged: function(key, old) {
|
| + this._resetRegistration(old);
|
| + },
|
| +
|
| + _valueChanged: function(value) {
|
| + this._resetRegistration(this.key);
|
| + },
|
| +
|
| + _selfChanged: function(self) {
|
| + if (self) {
|
| + this.value = this;
|
| + }
|
| + },
|
| +
|
| + _typeChanged: function(type) {
|
| + this._unregisterKey(this.key);
|
| + if (!metaDatas[type]) {
|
| + metaDatas[type] = {};
|
| + }
|
| + this._metaData = metaDatas[type];
|
| + if (!metaArrays[type]) {
|
| + metaArrays[type] = [];
|
| + }
|
| + this.list = metaArrays[type];
|
| + this._registerKeyValue(this.key, this.value);
|
| + },
|
| +
|
| + /**
|
| + * Retrieves meta data value by key.
|
| + *
|
| + * @method byKey
|
| + * @param {string} key The key of the meta-data to be returned.
|
| + * @return {*}
|
| + */
|
| + byKey: function(key) {
|
| + return this._metaData && this._metaData[key];
|
| + },
|
| +
|
| + _resetRegistration: function(oldKey) {
|
| + this._unregisterKey(oldKey);
|
| + this._registerKeyValue(this.key, this.value);
|
| + },
|
| +
|
| + _unregisterKey: function(key) {
|
| + this._unregister(key, this._metaData, this.list);
|
| + },
|
| +
|
| + _registerKeyValue: function(key, value) {
|
| + this._register(key, value, this._metaData, this.list);
|
| + },
|
| +
|
| + _register: function(key, value, data, list) {
|
| + if (key && data && value !== undefined) {
|
| + data[key] = value;
|
| + list.push(value);
|
| + }
|
| + },
|
| +
|
| + _unregister: function(key, data, list) {
|
| + if (key && data) {
|
| + if (key in data) {
|
| + var value = data[key];
|
| + delete data[key];
|
| + this.arrayDelete(list, value);
|
| + }
|
| + }
|
| + }
|
| +
|
| + });
|
| +
|
| + Polymer.IronMeta.getIronMeta = function getIronMeta() {
|
| + if (singleton === null) {
|
| + singleton = new Polymer.IronMeta();
|
| + }
|
| + return singleton;
|
| + };
|
| +
|
| + /**
|
| + `iron-meta-query` can be used to access infomation stored in `iron-meta`.
|
| +
|
| + Examples:
|
| +
|
| + If I create an instance like this:
|
| +
|
| + <iron-meta key="info" value="foo/bar"></iron-meta>
|
| +
|
| + Note that value="foo/bar" is the metadata I've defined. I could define more
|
| + attributes or use child nodes to define additional metadata.
|
| +
|
| + Now I can access that element (and it's metadata) from any `iron-meta-query` instance:
|
| +
|
| + var value = new Polymer.IronMetaQuery({key: 'info'}).value;
|
| +
|
| + @group Polymer Iron Elements
|
| + @element iron-meta-query
|
| + */
|
| + Polymer.IronMetaQuery = Polymer({
|
| +
|
| + is: 'iron-meta-query',
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * The type of meta-data. All meta-data of the same type is stored
|
| + * together.
|
| + */
|
| + type: {
|
| + type: String,
|
| + value: 'default',
|
| + observer: '_typeChanged'
|
| + },
|
| +
|
| + /**
|
| + * Specifies a key to use for retrieving `value` from the `type`
|
| + * namespace.
|
| + */
|
| + key: {
|
| + type: String,
|
| + observer: '_keyChanged'
|
| + },
|
| +
|
| + /**
|
| + * The meta-data to store or retrieve.
|
| + */
|
| + value: {
|
| + type: Object,
|
| + notify: true,
|
| + readOnly: true
|
| + },
|
| +
|
| + /**
|
| + * Array of all meta-data values for the given type.
|
| + */
|
| + list: {
|
| + type: Array,
|
| + notify: true
|
| + }
|
| +
|
| + },
|
| +
|
| + /**
|
| + * Actually a factory method, not a true constructor. Only runs if
|
| + * someone invokes it directly (via `new Polymer.IronMeta()`);
|
| + *
|
| + * @param {{type: (string|undefined), key: (string|undefined)}=} config
|
| + */
|
| + factoryImpl: function(config) {
|
| + if (config) {
|
| + for (var n in config) {
|
| + switch(n) {
|
| + case 'type':
|
| + case 'key':
|
| + this[n] = config[n];
|
| + break;
|
| + }
|
| + }
|
| + }
|
| + },
|
| +
|
| + created: function() {
|
| + // TODO(sjmiles): good for debugging?
|
| + this._metaDatas = metaDatas;
|
| + this._metaArrays = metaArrays;
|
| + },
|
| +
|
| + _keyChanged: function(key) {
|
| + this._setValue(this._metaData && this._metaData[key]);
|
| + },
|
| +
|
| + _typeChanged: function(type) {
|
| + this._metaData = metaDatas[type];
|
| + this.list = metaArrays[type];
|
| + if (this.key) {
|
| + this._keyChanged(this.key);
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Retrieves meta data value by key.
|
| + * @param {string} key The key of the meta-data to be returned.
|
| + * @return {*}
|
| + */
|
| + byKey: function(key) {
|
| + return this._metaData && this._metaData[key];
|
| + }
|
| +
|
| + });
|
| +
|
| + })();
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="iron-icon" assetpath="/res/imp/bower_components/iron-icon/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + @apply(--layout-inline);
|
| + @apply(--layout-center-center);
|
| + position: relative;
|
| +
|
| + vertical-align: middle;
|
| +
|
| + fill: var(--iron-icon-fill-color, currentcolor);
|
| + stroke: var(--iron-icon-stroke-color, none);
|
| +
|
| + width: var(--iron-icon-width, 24px);
|
| + height: var(--iron-icon-height, 24px);
|
| + }
|
| + </style>
|
| + </template>
|
| +
|
| + <script>
|
| +
|
| + Polymer({
|
| +
|
| + is: 'iron-icon',
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * The name of the icon to use. The name should be of the form:
|
| + * `iconset_name:icon_name`.
|
| + */
|
| + icon: {
|
| + type: String,
|
| + observer: '_iconChanged'
|
| + },
|
| +
|
| + /**
|
| + * The name of the theme to used, if one is specified by the
|
| + * iconset.
|
| + */
|
| + theme: {
|
| + type: String,
|
| + observer: '_updateIcon'
|
| + },
|
| +
|
| + /**
|
| + * If using iron-icon without an iconset, you can set the src to be
|
| + * the URL of an individual icon image file. Note that this will take
|
| + * precedence over a given icon attribute.
|
| + */
|
| + src: {
|
| + type: String,
|
| + observer: '_srcChanged'
|
| + },
|
| +
|
| + /**
|
| + * @type {!Polymer.IronMeta}
|
| + */
|
| + _meta: {
|
| + value: Polymer.Base.create('iron-meta', {type: 'iconset'}),
|
| + observer: '_updateIcon'
|
| + }
|
| +
|
| + },
|
| +
|
| + _DEFAULT_ICONSET: 'icons',
|
| +
|
| + _iconChanged: function(icon) {
|
| + var parts = (icon || '').split(':');
|
| + this._iconName = parts.pop();
|
| + this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
|
| + this._updateIcon();
|
| + },
|
| +
|
| + _srcChanged: function(src) {
|
| + this._updateIcon();
|
| + },
|
| +
|
| + _usesIconset: function() {
|
| + return this.icon || !this.src;
|
| + },
|
| +
|
| + /** @suppress {visibility} */
|
| + _updateIcon: function() {
|
| + if (this._usesIconset()) {
|
| + if (this._img && this._img.parentNode) {
|
| + Polymer.dom(this.root).removeChild(this._img);
|
| + }
|
| + if (this._iconName === "") {
|
| + if (this._iconset) {
|
| + this._iconset.removeIcon(this);
|
| + }
|
| + } else if (this._iconsetName && this._meta) {
|
| + this._iconset = /** @type {?Polymer.Iconset} */ (
|
| + this._meta.byKey(this._iconsetName));
|
| + if (this._iconset) {
|
| + this._iconset.applyIcon(this, this._iconName, this.theme);
|
| + this.unlisten(window, 'iron-iconset-added', '_updateIcon');
|
| + } else {
|
| + this.listen(window, 'iron-iconset-added', '_updateIcon');
|
| + }
|
| + }
|
| + } else {
|
| + if (this._iconset) {
|
| + this._iconset.removeIcon(this);
|
| + }
|
| + if (!this._img) {
|
| + this._img = document.createElement('img');
|
| + this._img.style.width = '100%';
|
| + this._img.style.height = '100%';
|
| + this._img.draggable = false;
|
| + }
|
| + this._img.src = this.src;
|
| + Polymer.dom(this.root).appendChild(this._img);
|
| + }
|
| + }
|
| +
|
| + });
|
| +
|
| + </script>
|
| +
|
| +</dom-module>
|
| +<script>
|
| + /**
|
| + * The `iron-iconset-svg` element allows users to define their own icon sets
|
| + * that contain svg icons. The svg icon elements should be children of the
|
| + * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
|
| + *
|
| + * Using svg elements to create icons has a few advantages over traditional
|
| + * bitmap graphics like jpg or png. Icons that use svg are vector based so
|
| + * they are resolution independent and should look good on any device. They
|
| + * are stylable via css. Icons can be themed, colorized, and even animated.
|
| + *
|
| + * Example:
|
| + *
|
| + * <iron-iconset-svg name="my-svg-icons" size="24">
|
| + * <svg>
|
| + * <defs>
|
| + * <g id="shape">
|
| + * <rect x="12" y="0" width="12" height="24" />
|
| + * <circle cx="12" cy="12" r="12" />
|
| + * </g>
|
| + * </defs>
|
| + * </svg>
|
| + * </iron-iconset-svg>
|
| + *
|
| + * This will automatically register the icon set "my-svg-icons" to the iconset
|
| + * database. To use these icons from within another element, make a
|
| + * `iron-iconset` element and call the `byId` method
|
| + * to retrieve a given iconset. To apply a particular icon inside an
|
| + * element use the `applyIcon` method. For example:
|
| + *
|
| + * iconset.applyIcon(iconNode, 'car');
|
| + *
|
| + * @element iron-iconset-svg
|
| + * @demo demo/index.html
|
| + * @implements {Polymer.Iconset}
|
| + */
|
| + Polymer({
|
| + is: 'iron-iconset-svg',
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * The name of the iconset.
|
| + */
|
| + name: {
|
| + type: String,
|
| + observer: '_nameChanged'
|
| + },
|
| +
|
| + /**
|
| + * The size of an individual icon. Note that icons must be square.
|
| + */
|
| + size: {
|
| + type: Number,
|
| + value: 24
|
| + }
|
| +
|
| + },
|
| +
|
| + attached: function() {
|
| + this.style.display = 'none';
|
| + },
|
| +
|
| + /**
|
| + * Construct an array of all icon names in this iconset.
|
| + *
|
| + * @return {!Array} Array of icon names.
|
| + */
|
| + getIconNames: function() {
|
| + this._icons = this._createIconMap();
|
| + return Object.keys(this._icons).map(function(n) {
|
| + return this.name + ':' + n;
|
| + }, this);
|
| + },
|
| +
|
| + /**
|
| + * Applies an icon to the given element.
|
| + *
|
| + * An svg icon is prepended to the element's shadowRoot if it exists,
|
| + * otherwise to the element itself.
|
| + *
|
| + * @method applyIcon
|
| + * @param {Element} element Element to which the icon is applied.
|
| + * @param {string} iconName Name of the icon to apply.
|
| + * @return {?Element} The svg element which renders the icon.
|
| + */
|
| + applyIcon: function(element, iconName) {
|
| + // insert svg element into shadow root, if it exists
|
| + element = element.root || element;
|
| + // Remove old svg element
|
| + this.removeIcon(element);
|
| + // install new svg element
|
| + var svg = this._cloneIcon(iconName);
|
| + if (svg) {
|
| + var pde = Polymer.dom(element);
|
| + pde.insertBefore(svg, pde.childNodes[0]);
|
| + return element._svgIcon = svg;
|
| + }
|
| + return null;
|
| + },
|
| +
|
| + /**
|
| + * Remove an icon from the given element by undoing the changes effected
|
| + * by `applyIcon`.
|
| + *
|
| + * @param {Element} element The element from which the icon is removed.
|
| + */
|
| + removeIcon: function(element) {
|
| + // Remove old svg element
|
| + if (element._svgIcon) {
|
| + Polymer.dom(element).removeChild(element._svgIcon);
|
| + element._svgIcon = null;
|
| + }
|
| + },
|
| +
|
| + /**
|
| + *
|
| + * When name is changed, register iconset metadata
|
| + *
|
| + */
|
| + _nameChanged: function() {
|
| + new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
|
| + this.async(function() {
|
| + this.fire('iron-iconset-added', this, {node: window});
|
| + });
|
| + },
|
| +
|
| + /**
|
| + * Create a map of child SVG elements by id.
|
| + *
|
| + * @return {!Object} Map of id's to SVG elements.
|
| + */
|
| + _createIconMap: function() {
|
| + // Objects chained to Object.prototype (`{}`) have members. Specifically,
|
| + // on FF there is a `watch` method that confuses the icon map, so we
|
| + // need to use a null-based object here.
|
| + var icons = Object.create(null);
|
| + Polymer.dom(this).querySelectorAll('[id]')
|
| + .forEach(function(icon) {
|
| + icons[icon.id] = icon;
|
| + });
|
| + return icons;
|
| + },
|
| +
|
| + /**
|
| + * Produce installable clone of the SVG element matching `id` in this
|
| + * iconset, or `undefined` if there is no matching element.
|
| + *
|
| + * @return {Element} Returns an installable clone of the SVG element
|
| + * matching `id`.
|
| + */
|
| + _cloneIcon: function(id) {
|
| + // create the icon map on-demand, since the iconset itself has no discrete
|
| + // signal to know when it's children are fully parsed
|
| + this._icons = this._icons || this._createIconMap();
|
| + return this._prepareSvgClone(this._icons[id], this.size);
|
| + },
|
| +
|
| + /**
|
| + * @param {Element} sourceSvg
|
| + * @param {number} size
|
| + * @return {Element}
|
| + */
|
| + _prepareSvgClone: function(sourceSvg, size) {
|
| + if (sourceSvg) {
|
| + var content = sourceSvg.cloneNode(true),
|
| + svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
|
| + viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + size;
|
| + svg.setAttribute('viewBox', viewBox);
|
| + svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
| + // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/370136
|
| + // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
|
| + svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
|
| + svg.appendChild(content).removeAttribute('id');
|
| + return svg;
|
| + }
|
| + return null;
|
| + }
|
| +
|
| + });
|
| +</script>
|
| +<iron-iconset-svg name="icons" size="24">
|
| +<svg><defs>
|
| +<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"></path></g>
|
| +<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"></path></g>
|
| +<g id="accessible"><circle cx="12" cy="4" r="2"></circle><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z"></path></g>
|
| +<g id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"></path></g>
|
| +<g id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></g>
|
| +<g id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path></g>
|
| +<g id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path></g>
|
| +<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
|
| +<g id="add-alert"><path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z"></path></g>
|
| +<g id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></g>
|
| +<g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></g>
|
| +<g id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></g>
|
| +<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"></path></g>
|
| +<g id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path></g>
|
| +<g id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"></path></g>
|
| +<g id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z"></path></g>
|
| +<g id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z"></path></g>
|
| +<g id="all-out"><path d="M16.21 4.16l4 4v-4zm4 12l-4 4h4zm-12 4l-4-4v4zm-4-12l4-4h-4zm12.95-.95c-2.73-2.73-7.17-2.73-9.9 0s-2.73 7.17 0 9.9 7.17 2.73 9.9 0 2.73-7.16 0-9.9zm-1.1 8.8c-2.13 2.13-5.57 2.13-7.7 0s-2.13-5.57 0-7.7 5.57-2.13 7.7 0 2.13 5.57 0 7.7z"></path></g>
|
| +<g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"></path></g>
|
| +<g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"></path></g>
|
| +<g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path></g>
|
| +<g id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"></path></g>
|
| +<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g>
|
| +<g id="arrow-downward"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path></g>
|
| +<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
|
| +<g id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"></path></g>
|
| +<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"></path></g>
|
| +<g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></g>
|
| +<g id="arrow-upward"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path></g>
|
| +<g id="aspect-ratio"><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"></path></g>
|
| +<g id="assessment"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"></path></g>
|
| +<g id="assignment"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path></g>
|
| +<g id="assignment-ind"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></g>
|
| +<g id="assignment-late"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-6 15h-2v-2h2v2zm0-4h-2V8h2v6zm-1-9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></g>
|
| +<g id="assignment-return"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm4 12h-4v3l-5-5 5-5v3h4v4z"></path></g>
|
| +<g id="assignment-returned"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 15l-5-5h3V9h4v4h3l-5 5z"></path></g>
|
| +<g id="assignment-turned-in"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></g>
|
| +<g id="attachment"><path d="M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z"></path></g>
|
| +<g id="autorenew"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"></path></g>
|
| +<g id="backspace"><path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z"></path></g>
|
| +<g id="backup"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path></g>
|
| +<g id="block"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"></path></g>
|
| +<g id="book"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"></path></g>
|
| +<g id="bookmark"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="bookmark-border"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"></path></g>
|
| +<g id="bug-report"><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"></path></g>
|
| +<g id="build"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path></g>
|
| +<g id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"></path></g>
|
| +<g id="camera-enhance"><path d="M9 3L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-1l1.25-2.75L16 13l-2.75-1.25L12 9l-1.25 2.75L8 13l2.75 1.25z"></path></g>
|
| +<g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></g>
|
| +<g id="card-giftcard"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"></path></g>
|
| +<g id="card-membership"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path></g>
|
| +<g id="card-travel"><path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z"></path></g>
|
| +<g id="change-history"><path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"></path></g>
|
| +<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g>
|
| +<g id="check-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g>
|
| +<g id="check-box-outline-blank"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g>
|
| +<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g>
|
| +<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
|
| +<g id="chrome-reader-mode"><path d="M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z"></path></g>
|
| +<g id="class"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"></path></g>
|
| +<g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
|
| +<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
|
| +<g id="cloud"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"></path></g>
|
| +<g id="cloud-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.5 14H8c-1.66 0-3-1.34-3-3s1.34-3 3-3l.14.01C8.58 8.28 10.13 7 12 7c2.21 0 4 1.79 4 4h.5c1.38 0 2.5 1.12 2.5 2.5S17.88 16 16.5 16z"></path></g>
|
| +<g id="cloud-done"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"></path></g>
|
| +<g id="cloud-download"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"></path></g>
|
| +<g id="cloud-off"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"></path></g>
|
| +<g id="cloud-queue"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z"></path></g>
|
| +<g id="cloud-upload"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path></g>
|
| +<g id="code"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></g>
|
| +<g id="compare-arrows"><path d="M9.01 14H2v2h7.01v3L13 15l-3.99-4v3zm5.98-1v-3H22V8h-7.01V5L11 9l3.99 4z"></path></g>
|
| +<g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g>
|
| +<g id="content-cut"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"></path></g>
|
| +<g id="content-paste"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path></g>
|
| +<g id="copyright"><path d="M10.08 10.86c.05-.33.16-.62.3-.87s.34-.46.59-.62c.24-.15.54-.22.91-.23.23.01.44.05.63.13.2.09.38.21.52.36s.25.33.34.53.13.42.14.64h1.79c-.02-.47-.11-.9-.28-1.29s-.4-.73-.7-1.01-.66-.5-1.08-.66-.88-.23-1.39-.23c-.65 0-1.22.11-1.7.34s-.88.53-1.2.92-.56.84-.71 1.36S8 11.29 8 11.87v.27c0 .58.08 1.12.23 1.64s.39.97.71 1.35.72.69 1.2.91 1.05.34 1.7.34c.47 0 .91-.08 1.32-.23s.77-.36 1.08-.63.56-.58.74-.94.29-.74.3-1.15h-1.79c-.01.21-.06.4-.15.58s-.21.33-.36.46-.32.23-.52.3c-.19.07-.39.09-.6.1-.36-.01-.66-.08-.89-.23-.25-.16-.45-.37-.59-.62s-.25-.55-.3-.88-.08-.67-.08-1v-.27c0-.35.03-.68.08-1.01zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></g>
|
| +<g id="create"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
|
| +<g id="create-new-folder"><path d="M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z"></path></g>
|
| +<g id="credit-card"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></g>
|
| +<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path></g>
|
| +<g id="date-range"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"></path></g>
|
| +<g id="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></g>
|
| +<g id="description"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path></g>
|
| +<g id="dns"><path d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"></path></g>
|
| +<g id="done"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></g>
|
| +<g id="done-all"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"></path></g>
|
| +<g id="donut-large"><path d="M11 5.08V2c-5 .5-9 4.81-9 10s4 9.5 9 10v-3.08c-3-.48-6-3.4-6-6.92s3-6.44 6-6.92zM18.97 11H22c-.47-5-4-8.53-9-9v3.08C16 5.51 18.54 8 18.97 11zM13 18.92V22c5-.47 8.53-4 9-9h-3.03c-.43 3-2.97 5.49-5.97 5.92z"></path></g>
|
| +<g id="donut-small"><path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"></path></g>
|
| +<g id="drafts"><path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"></path></g>
|
| +<g id="eject"><path d="M5 17h14v2H5zm7-12L5.33 15h13.34z"></path></g>
|
| +<g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g>
|
| +<g id="error-outline"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></g>
|
| +<g id="event"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"></path></g>
|
| +<g id="event-seat"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v3h-3zM2 10h3v3H2zm15 3H7V5c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v8z"></path></g>
|
| +<g id="exit-to-app"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path></g>
|
| +<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></g>
|
| +<g id="explore"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"></path></g>
|
| +<g id="extension"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"></path></g>
|
| +<g id="face"><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"></path></g>
|
| +<g id="favorite"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></g>
|
| +<g id="favorite-border"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path></g>
|
| +<g id="feedback"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path></g>
|
| +<g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></g>
|
| +<g id="file-upload"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"></path></g>
|
| +<g id="filter-list"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></g>
|
| +<g id="find-in-page"><path d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"></path></g>
|
| +<g id="find-replace"><path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z"></path></g>
|
| +<g id="fingerprint"><path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"></path></g>
|
| +<g id="flag"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"></path></g>
|
| +<g id="flight-land"><path d="M2.5 19h19v2h-19zm7.18-5.73l4.35 1.16 5.31 1.42c.8.21 1.62-.26 1.84-1.06.21-.8-.26-1.62-1.06-1.84l-5.31-1.42-2.76-9.02L10.12 2v8.28L5.15 8.95l-.93-2.32-1.45-.39v5.17l1.6.43 5.31 1.43z"></path></g>
|
| +<g id="flight-takeoff"><path d="M2.5 19h19v2h-19zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10l-6.9-6.43-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 1.82 3.16.77 1.33 1.6-.43 5.31-1.42 4.35-1.16L21 11.49c.81-.23 1.28-1.05 1.07-1.85z"></path></g>
|
| +<g id="flip-to-back"><path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8c-1.11 0-2 .9-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2c0-1.1-.9-2-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.89 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zM5 7H3v12c0 1.1.89 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z"></path></g>
|
| +<g id="flip-to-front"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"></path></g>
|
| +<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></g>
|
| +<g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></g>
|
| +<g id="folder-shared"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 3c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm4 8h-8v-1c0-1.33 2.67-2 4-2s4 .67 4 2v1z"></path></g>
|
| +<g id="font-download"><path d="M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z"></path></g>
|
| +<g id="forward"><path d="M12 8V4l8 8-8 8v-4H4V8z"></path></g>
|
| +<g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g>
|
| +<g id="fullscreen-exit"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"></path></g>
|
| +<g id="gavel"><path d="M1 21h12v2H1zM5.245 8.07l2.83-2.827 14.14 14.142-2.828 2.828zM12.317 1l5.657 5.656-2.83 2.83-5.654-5.66zM3.825 9.485l5.657 5.657-2.828 2.828-5.657-5.657z"></path></g>
|
| +<g id="gesture"><path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"></path></g>
|
| +<g id="get-app"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></g>
|
| +<g id="gif"><path d="M11.5 9H13v6h-1.5zM9 9H6c-.6 0-1 .5-1 1v4c0 .5.4 1 1 1h3c.6 0 1-.5 1-1v-2H8.5v1.5h-2v-3H10V10c0-.5-.4-1-1-1zm10 1.5V9h-4.5v6H16v-2h2v-1.5h-2v-1z"></path></g>
|
| +<g id="grade"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></g>
|
| +<g id="group-work"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM9.5 8c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8zm6.5 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></g>
|
| +<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></g>
|
| +<g id="help-outline"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></g>
|
| +<g id="highlight-off"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></g>
|
| +<g id="history"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path></g>
|
| +<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
|
| +<g id="hourglass-empty"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z"></path></g>
|
| +<g id="hourglass-full"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z"></path></g>
|
| +<g id="http"><path d="M4.5 11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5v2zm2.5-.5h1.5V15H10v-4.5h1.5V9H7v1.5zm5.5 0H14V15h1.5v-4.5H17V9h-4.5v1.5zm9-1.5H18v6h1.5v-2h2c.8 0 1.5-.7 1.5-1.5v-1c0-.8-.7-1.5-1.5-1.5zm0 2.5h-2v-1h2v1z"></path></g>
|
| +<g id="https"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></g>
|
| +<g id="important-devices"><path d="M23 11.01L18 11c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-9c0-.55-.45-.99-1-.99zM23 20h-5v-7h5v7zM20 2H2C.89 2 0 2.89 0 4v12c0 1.1.89 2 2 2h7v2H7v2h8v-2h-2v-2h2v-2H2V4h18v5h2V4c0-1.11-.9-2-2-2zm-8.03 7L11 6l-.97 3H7l2.47 1.76-.94 2.91 2.47-1.8 2.47 1.8-.94-2.91L15 9h-3.03z"></path></g>
|
| +<g id="inbox"><path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"></path></g>
|
| +<g id="indeterminate-check-box"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"></path></g>
|
| +<g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></g>
|
| +<g id="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></g>
|
| +<g id="input"><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"></path></g>
|
| +<g id="invert-colors"><path d="M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"></path></g>
|
| +<g id="label"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"></path></g>
|
| +<g id="label-outline"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16zM16 17H5V7h11l3.55 5L16 17z"></path></g>
|
| +<g id="language"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path></g>
|
| +<g id="launch"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></g>
|
| +<g id="lightbulb-outline"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path></g>
|
| +<g id="line-style"><path d="M3 16h5v-2H3v2zm6.5 0h5v-2h-5v2zm6.5 0h5v-2h-5v2zM3 20h2v-2H3v2zm4 0h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zM3 12h8v-2H3v2zm10 0h8v-2h-8v2zM3 4v4h18V4H3z"></path></g>
|
| +<g id="line-weight"><path d="M3 17h18v-2H3v2zm0 3h18v-1H3v1zm0-7h18v-3H3v3zm0-9v4h18V4H3z"></path></g>
|
| +<g id="link"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></g>
|
| +<g id="list"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"></path></g>
|
| +<g id="lock"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></g>
|
| +<g id="lock-open"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"></path></g>
|
| +<g id="lock-outline"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8.9 6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2H8.9V6zM18 20H6V10h12v10z"></path></g>
|
| +<g id="loyalty"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7zm11.77 8.27L13 19.54l-4.27-4.27C8.28 14.81 8 14.19 8 13.5c0-1.38 1.12-2.5 2.5-2.5.69 0 1.32.28 1.77.74l.73.72.73-.73c.45-.45 1.08-.73 1.77-.73 1.38 0 2.5 1.12 2.5 2.5 0 .69-.28 1.32-.73 1.77z"></path></g>
|
| +<g id="mail"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></g>
|
| +<g id="markunread"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></g>
|
| +<g id="markunread-mailbox"><path d="M20 6H10v6H8V4h6V0H6v6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g>
|
| +<g id="more-horiz"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></g>
|
| +<g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></g>
|
| +<g id="motorcycle"><path d="M19.44 9.03L15.41 5H11v2h3.59l2 2H5c-2.8 0-5 2.2-5 5s2.2 5 5 5c2.46 0 4.45-1.69 4.9-4h1.65l2.77-2.77c-.21.54-.32 1.14-.32 1.77 0 2.8 2.2 5 5 5s5-2.2 5-5c0-2.65-1.97-4.77-4.56-4.97zM7.82 15C7.4 16.15 6.28 17 5 17c-1.63 0-3-1.37-3-3s1.37-3 3-3c1.28 0 2.4.85 2.82 2H5v2h2.82zM19 17c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></g>
|
| +<g id="move-to-inbox"><path d="M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"></path></g>
|
| +<g id="next-week"><path d="M20 7h-4V5c0-.55-.22-1.05-.59-1.41C15.05 3.22 14.55 3 14 3h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 5h4v2h-4V5zm1 13.5l-1-1 3-3-3-3 1-1 4 4-4 4z"></path></g>
|
| +<g id="note-add"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"></path></g>
|
| +<g id="offline-pin"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 16H7v-2h10v2zm-6.7-4L7 10.7l1.4-1.4 1.9 1.9 5.3-5.3L17 7.3 10.3 14z"></path></g>
|
| +<g id="opacity"><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"></path></g>
|
| +<g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"></path></g>
|
| +<g id="open-in-new"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></g>
|
| +<g id="open-with"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path></g>
|
| +<g id="pageview"><path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"></path></g>
|
| +<g id="pan-tool"><path d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"></path></g>
|
| +<g id="payment"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></g>
|
| +<g id="perm-camera-mic"><path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v-2.09c-2.83-.48-5-2.94-5-5.91h2c0 2.21 1.79 4 4 4s4-1.79 4-4h2c0 2.97-2.17 5.43-5 5.91V21h7c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-6 8c0 1.1-.9 2-2 2s-2-.9-2-2V9c0-1.1.9-2 2-2s2 .9 2 2v4z"></path></g>
|
| +<g id="perm-contact-calendar"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1z"></path></g>
|
| +<g id="perm-data-setting"><path d="M18.99 11.5c.34 0 .67.03 1 .07L20 0 0 20h11.56c-.04-.33-.07-.66-.07-1 0-4.14 3.36-7.5 7.5-7.5zm3.71 7.99c.02-.16.04-.32.04-.49 0-.17-.01-.33-.04-.49l1.06-.83c.09-.08.12-.21.06-.32l-1-1.73c-.06-.11-.19-.15-.31-.11l-1.24.5c-.26-.2-.54-.37-.85-.49l-.19-1.32c-.01-.12-.12-.21-.24-.21h-2c-.12 0-.23.09-.25.21l-.19 1.32c-.3.13-.59.29-.85.49l-1.24-.5c-.11-.04-.24 0-.31.11l-1 1.73c-.06.11-.04.24.06.32l1.06.83c-.02.16-.03.32-.03.49 0 .17.01.33.03.49l-1.06.83c-.09.08-.12.21-.06.32l1 1.73c.06.11.19.15.31.11l1.24-.5c.26.2.54.37.85.49l.19 1.32c.02.12.12.21.25.21h2c.12 0 .23-.09.25-.21l.19-1.32c.3-.13.59-.29.84-.49l1.25.5c.11.04.24 0 .31-.11l1-1.73c.06-.11.03-.24-.06-.32l-1.07-.83zm-3.71 1.01c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></g>
|
| +<g id="perm-device-information"><path d="M13 7h-2v2h2V7zm0 4h-2v6h2v-6zm4-9.99L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"></path></g>
|
| +<g id="perm-identity"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></g>
|
| +<g id="perm-media"><path d="M2 6H0v5h.01L0 20c0 1.1.9 2 2 2h18v-2H2V6zm20-2h-8l-2-2H6c-1.1 0-1.99.9-1.99 2L4 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 15l4.5-6 3.5 4.51 2.5-3.01L21 15H7z"></path></g>
|
| +<g id="perm-phone-msg"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM12 3v10l3-3h6V3h-9z"></path></g>
|
| +<g id="perm-scan-wifi"><path d="M12 3C6.95 3 3.15 4.85 0 7.23L12 22 24 7.25C20.85 4.87 17.05 3 12 3zm1 13h-2v-6h2v6zm-2-8V6h2v2h-2z"></path></g>
|
| +<g id="pets"><circle cx="4.5" cy="9.5" r="2.5"></circle><circle cx="9" cy="5.5" r="2.5"></circle><circle cx="15" cy="5.5" r="2.5"></circle><circle cx="19.5" cy="9.5" r="2.5"></circle><path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"></path></g>
|
| +<g id="picture-in-picture"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"></path></g>
|
| +<g id="picture-in-picture-alt"><path d="M19 11h-8v6h8v-6zm4 8V4.98C23 3.88 22.1 3 21 3H3c-1.1 0-2 .88-2 1.98V19c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H3V4.97h18v14.05z"></path></g>
|
| +<g id="play-for-work"><path d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"></path></g>
|
| +<g id="polymer"><path d="M19 4h-4L7.11 16.63 4.5 12 9 4H5L.5 12 5 20h4l7.89-12.63L19.5 12 15 20h4l4.5-8z"></path></g>
|
| +<g id="power-settings-new"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"></path></g>
|
| +<g id="pregnant-woman"><path d="M9 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm7 9c-.01-1.34-.83-2.51-2-3 0-1.66-1.34-3-3-3s-3 1.34-3 3v7h2v5h3v-5h3v-4z"></path></g>
|
| +<g id="print"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></g>
|
| +<g id="query-builder"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g>
|
| +<g id="question-answer"><path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"></path></g>
|
| +<g id="radio-button-checked"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></g>
|
| +<g id="radio-button-unchecked"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></g>
|
| +<g id="receipt"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"></path></g>
|
| +<g id="record-voice-over"><circle cx="9" cy="9" r="4"></circle><path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"></path></g>
|
| +<g id="redeem"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"></path></g>
|
| +<g id="redo"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path></g>
|
| +<g id="refresh"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></g>
|
| +<g id="remove"><path d="M19 13H5v-2h14v2z"></path></g>
|
| +<g id="remove-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"></path></g>
|
| +<g id="remove-circle-outline"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></g>
|
| +<g id="reorder"><path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"></path></g>
|
| +<g id="reply"><path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"></path></g>
|
| +<g id="reply-all"><path d="M7 8V5l-7 7 7 7v-3l-4-4 4-4zm6 1V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"></path></g>
|
| +<g id="report"><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"></path></g>
|
| +<g id="report-problem"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
|
| +<g id="restore"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path></g>
|
| +<g id="room"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></g>
|
| +<g id="rounded-corner"><path d="M19 19h2v2h-2v-2zm0-2h2v-2h-2v2zM3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm0-4h2V3H3v2zm4 0h2V3H7v2zm8 16h2v-2h-2v2zm-4 0h2v-2h-2v2zm4 0h2v-2h-2v2zm-8 0h2v-2H7v2zm-4 0h2v-2H3v2zM21 8c0-2.76-2.24-5-5-5h-5v2h5c1.65 0 3 1.35 3 3v5h2V8z"></path></g>
|
| +<g id="rowing"><path d="M8.5 14.5L4 19l1.5 1.5L9 17h2l-2.5-2.5zM15 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 20.01L18 24l-2.99-3.01V19.5l-7.1-7.09c-.31.05-.61.07-.91.07v-2.16c1.66.03 3.61-.87 4.67-2.04l1.4-1.55c.19-.21.43-.38.69-.5.29-.14.62-.23.96-.23h.03C15.99 6.01 17 7.02 17 8.26v5.75c0 .84-.35 1.61-.92 2.16l-3.58-3.58v-2.27c-.63.52-1.43 1.02-2.29 1.39L16.5 18H18l3 3.01z"></path></g>
|
| +<g id="save"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path></g>
|
| +<g id="schedule"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g>
|
| +<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
|
| +<g id="select-all"><path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z"></path></g>
|
| +<g id="send"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></g>
|
| +<g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g>
|
| +<g id="settings-applications"><path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"></path></g>
|
| +<g id="settings-backup-restore"><path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"></path></g>
|
| +<g id="settings-bluetooth"><path d="M11 24h2v-2h-2v2zm-4 0h2v-2H7v2zm8 0h2v-2h-2v2zm2.71-18.29L12 0h-1v7.59L6.41 3 5 4.41 10.59 10 5 15.59 6.41 17 11 12.41V20h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 3.83l1.88 1.88L13 7.59V3.83zm1.88 10.46L13 16.17v-3.76l1.88 1.88z"></path></g>
|
| +<g id="settings-brightness"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02zM8 16h2.5l1.5 1.5 1.5-1.5H16v-2.5l1.5-1.5-1.5-1.5V8h-2.5L12 6.5 10.5 8H8v2.5L6.5 12 8 13.5V16zm4-7c1.66 0 3 1.34 3 3s-1.34 3-3 3V9z"></path></g>
|
| +<g id="settings-cell"><path d="M7 24h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zM16 .01L8 0C6.9 0 6 .9 6 2v16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V2c0-1.1-.9-1.99-2-1.99zM16 16H8V4h8v12z"></path></g>
|
| +<g id="settings-ethernet"><path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"></path></g>
|
| +<g id="settings-input-antenna"><path d="M12 5c-3.87 0-7 3.13-7 7h2c0-2.76 2.24-5 5-5s5 2.24 5 5h2c0-3.87-3.13-7-7-7zm1 9.29c.88-.39 1.5-1.26 1.5-2.29 0-1.38-1.12-2.5-2.5-2.5S9.5 10.62 9.5 12c0 1.02.62 1.9 1.5 2.29v3.3L7.59 21 9 22.41l3-3 3 3L16.41 21 13 17.59v-3.3zM12 1C5.93 1 1 5.93 1 12h2c0-4.97 4.03-9 9-9s9 4.03 9 9h2c0-6.07-4.93-11-11-11z"></path></g>
|
| +<g id="settings-input-component"><path d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"></path></g>
|
| +<g id="settings-input-composite"><path d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"></path></g>
|
| +<g id="settings-input-hdmi"><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z"></path></g>
|
| +<g id="settings-input-svideo"><path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path></g>
|
| +<g id="settings-overscan"><path d="M12.01 5.5L10 8h4l-1.99-2.5zM18 10v4l2.5-1.99L18 10zM6 10l-2.5 2.01L6 14v-4zm8 6h-4l2.01 2.5L14 16zm7-13H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"></path></g>
|
| +<g id="settings-phone"><path d="M13 9h-2v2h2V9zm4 0h-2v2h2V9zm3 6.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 9v2h2V9h-2z"></path></g>
|
| +<g id="settings-power"><path d="M7 24h2v-2H7v2zm4 0h2v-2h-2v2zm2-22h-2v10h2V2zm3.56 2.44l-1.45 1.45C16.84 6.94 18 8.83 18 11c0 3.31-2.69 6-6 6s-6-2.69-6-6c0-2.17 1.16-4.06 2.88-5.12L7.44 4.44C5.36 5.88 4 8.28 4 11c0 4.42 3.58 8 8 8s8-3.58 8-8c0-2.72-1.36-5.12-3.44-6.56zM15 24h2v-2h-2v2z"></path></g>
|
| +<g id="settings-remote"><path d="M15 9H9c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1zm-3 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM7.05 6.05l1.41 1.41C9.37 6.56 10.62 6 12 6s2.63.56 3.54 1.46l1.41-1.41C15.68 4.78 13.93 4 12 4s-3.68.78-4.95 2.05zM12 0C8.96 0 6.21 1.23 4.22 3.22l1.41 1.41C7.26 3.01 9.51 2 12 2s4.74 1.01 6.36 2.64l1.41-1.41C17.79 1.23 15.04 0 12 0z"></path></g>
|
| +<g id="settings-voice"><path d="M7 24h2v-2H7v2zm5-11c1.66 0 2.99-1.34 2.99-3L15 4c0-1.66-1.34-3-3-3S9 2.34 9 4v6c0 1.66 1.34 3 3 3zm-1 11h2v-2h-2v2zm4 0h2v-2h-2v2zm4-14h-1.7c0 3-2.54 5.1-5.3 5.1S6.7 13 6.7 10H5c0 3.41 2.72 6.23 6 6.72V20h2v-3.28c3.28-.49 6-3.31 6-6.72z"></path></g>
|
| +<g id="shop"><path d="M16 6V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H2v13c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6h-6zm-6-2h4v2h-4V4zM9 18V9l7.5 4L9 18z"></path></g>
|
| +<g id="shop-two"><path d="M3 9H1v11c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2H3V9zm15-4V3c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H5v11c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5h-5zm-6-2h4v2h-4V3zm0 12V8l5.5 3-5.5 4z"></path></g>
|
| +<g id="shopping-basket"><path d="M17.21 9l-4.38-6.56c-.19-.28-.51-.42-.83-.42-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"></path></g>
|
| +<g id="shopping-cart"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"></path></g>
|
| +<g id="sort"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"></path></g>
|
| +<g id="speaker-notes"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 14H6v-2h2v2zm0-3H6V9h2v2zm0-3H6V6h2v2zm7 6h-5v-2h5v2zm3-3h-8V9h8v2zm0-3h-8V6h8v2z"></path></g>
|
| +<g id="spellcheck"><path d="M12.45 16h2.09L9.43 3H7.57L2.46 16h2.09l1.12-3h5.64l1.14 3zm-6.02-5L8.5 5.48 10.57 11H6.43zm15.16.59l-8.09 8.09L9.83 16l-1.41 1.41 5.09 5.09L23 13l-1.41-1.41z"></path></g>
|
| +<g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></g>
|
| +<g id="star-border"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"></path></g>
|
| +<g id="star-half"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"></path></g>
|
| +<g id="stars"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"></path></g>
|
| +<g id="store"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"></path></g>
|
| +<g id="subdirectory-arrow-left"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z"></path></g>
|
| +<g id="subdirectory-arrow-right"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"></path></g>
|
| +<g id="subject"><path d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"></path></g>
|
| +<g id="supervisor-account"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"></path></g>
|
| +<g id="swap-horiz"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"></path></g>
|
| +<g id="swap-vert"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"></path></g>
|
| +<g id="swap-vertical-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM6.5 9L10 5.5 13.5 9H11v4H9V9H6.5zm11 6L14 18.5 10.5 15H13v-4h2v4h2.5z"></path></g>
|
| +<g id="system-update-alt"><path d="M12 16.5l4-4h-3v-9h-2v9H8l4 4zm9-13h-6v1.99h6v14.03H3V5.49h6V3.5H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="tab"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"></path></g>
|
| +<g id="tab-unselected"><path d="M1 9h2V7H1v2zm0 4h2v-2H1v2zm0-8h2V3c-1.1 0-2 .9-2 2zm8 16h2v-2H9v2zm-8-4h2v-2H1v2zm2 4v-2H1c0 1.1.9 2 2 2zM21 3h-8v6h10V5c0-1.1-.9-2-2-2zm0 14h2v-2h-2v2zM9 5h2V3H9v2zM5 21h2v-2H5v2zM5 5h2V3H5v2zm16 16c1.1 0 2-.9 2-2h-2v2zm0-8h2v-2h-2v2zm-8 8h2v-2h-2v2zm4 0h2v-2h-2v2z"></path></g>
|
| +<g id="text-format"><path d="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z"></path></g>
|
| +<g id="theaters"><path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path></g>
|
| +<g id="thumb-down"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path></g>
|
| +<g id="thumb-up"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path></g>
|
| +<g id="thumbs-up-down"><path d="M12 6c0-.55-.45-1-1-1H5.82l.66-3.18.02-.23c0-.31-.13-.59-.33-.8L5.38 0 .44 4.94C.17 5.21 0 5.59 0 6v6.5c0 .83.67 1.5 1.5 1.5h6.75c.62 0 1.15-.38 1.38-.91l2.26-5.29c.07-.17.11-.36.11-.55V6zm10.5 4h-6.75c-.62 0-1.15.38-1.38.91l-2.26 5.29c-.07.17-.11.36-.11.55V18c0 .55.45 1 1 1h5.18l-.66 3.18-.02.24c0 .31.13.59.33.8l.79.78 4.94-4.94c.27-.27.44-.65.44-1.06v-6.5c0-.83-.67-1.5-1.5-1.5z"></path></g>
|
| +<g id="timeline"><path d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z"></path></g>
|
| +<g id="toc"><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path></g>
|
| +<g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"></path></g>
|
| +<g id="toll"><path d="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM3 12c0-2.61 1.67-4.83 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09c-2.33-.82-4-3.04-4-5.65z"></path></g>
|
| +<g id="touch-app"><path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"></path></g>
|
| +<g id="track-changes"><path d="M19.07 4.93l-1.41 1.41C19.1 7.79 20 9.79 20 12c0 4.42-3.58 8-8 8s-8-3.58-8-8c0-4.08 3.05-7.44 7-7.93v2.02C8.16 6.57 6 9.03 6 12c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.66-.67-3.16-1.76-4.24l-1.41 1.41C15.55 9.9 16 10.9 16 12c0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.86 1.28-3.41 3-3.86v2.14c-.6.35-1 .98-1 1.72 0 1.1.9 2 2 2s2-.9 2-2c0-.74-.4-1.38-1-1.72V2h-1C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-2.76-1.12-5.26-2.93-7.07z"></path></g>
|
| +<g id="translate"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></g>
|
| +<g id="trending-down"><path d="M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z"></path></g>
|
| +<g id="trending-flat"><path d="M22 12l-4-4v3H3v2h15v3z"></path></g>
|
| +<g id="trending-up"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"></path></g>
|
| +<g id="turned-in"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="turned-in-not"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"></path></g>
|
| +<g id="unarchive"><path d="M20.55 5.22l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.15.55L3.46 5.22C3.17 5.57 3 6.01 3 6.5V19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.49-.17-.93-.45-1.28zM12 9.5l5.5 5.5H14v2h-4v-2H6.5L12 9.5zM5.12 5l.82-1h12l.93 1H5.12z"></path></g>
|
| +<g id="undo"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path></g>
|
| +<g id="unfold-less"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"></path></g>
|
| +<g id="unfold-more"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"></path></g>
|
| +<g id="update"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"></path></g>
|
| +<g id="verified-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></g>
|
| +<g id="view-agenda"><path d="M20 13H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zm0-10H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z"></path></g>
|
| +<g id="view-array"><path d="M4 18h3V5H4v13zM18 5v13h3V5h-3zM8 18h9V5H8v13z"></path></g>
|
| +<g id="view-carousel"><path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"></path></g>
|
| +<g id="view-column"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></g>
|
| +<g id="view-day"><path d="M2 21h19v-3H2v3zM20 8H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zM2 3v3h19V3H2z"></path></g>
|
| +<g id="view-headline"><path d="M4 15h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V9H4v2zm0-6v2h16V5H4z"></path></g>
|
| +<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"></path></g>
|
| +<g id="view-module"><path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"></path></g>
|
| +<g id="view-quilt"><path d="M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z"></path></g>
|
| +<g id="view-stream"><path d="M4 18h17v-6H4v6zM4 5v6h17V5H4z"></path></g>
|
| +<g id="view-week"><path d="M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z"></path></g>
|
| +<g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></g>
|
| +<g id="visibility-off"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path></g>
|
| +<g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
|
| +<g id="watch-later"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></g>
|
| +<g id="weekend"><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z"></path></g>
|
| +<g id="work"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"></path></g>
|
| +<g id="youtube-searched-for"><path d="M17.01 14h-.8l-.27-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 3-6.5 6.5H2l3.84 4 4.16-4H6.51C6.51 7 8.53 5 11.01 5s4.5 2.01 4.5 4.5c0 2.48-2.02 4.5-4.5 4.5-.65 0-1.26-.14-1.82-.38L7.71 15.1c.97.57 2.09.9 3.3.9 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l5.01 4.99L22 19l-4.99-5z"></path></g>
|
| +<g id="zoom-in"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm2.5-4h-2v2H9v-2H7V9h2V7h1v2h2v1z"></path></g>
|
| +<g id="zoom-out"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"></path></g>
|
| +</defs></svg>
|
| +</iron-iconset-svg>
|
| +<dom-module id="sort-toggle" assetpath="/res/imp/common/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + position: relative;
|
| + min-width: 20px;
|
| + min-height: 16px;
|
| + vertical-align: middle;
|
| + }
|
| + iron-icon {
|
| + position: absolute;
|
| + left: 0;
|
| + cursor: pointer;
|
| + }
|
| + .hidden {
|
| + visibility: hidden;
|
| + }
|
| + </style>
|
| +
|
| + <span on-click="toggle">
|
| + <iron-icon style="top:0" class$="[[_hidden(direction,'asc')]]" icon="icons:arrow-drop-down">
|
| + </iron-icon>
|
| + <iron-icon style="bottom:0" class$="[[_hidden(direction,'desc')]]" icon="icons:arrow-drop-up">
|
| + </iron-icon>
|
| + </span>
|
| +
|
| + </template>
|
| + <script>
|
| + Polymer({
|
| + is: "sort-toggle",
|
| + properties: {
|
| + current: {
|
| + type: Object,
|
| + observer: "_resetSort",
|
| + },
|
| + name: {
|
| + type: String,
|
| + observer: "_resetSort",
|
| + },
|
| +
|
| + direction: {
|
| + type: String,
|
| + value: "",
|
| + notify: true,
|
| + },
|
| + },
|
| +
|
| + toggle: function() {
|
| + if (this.direction === "asc") {
|
| + this.set("direction", "desc");
|
| + } else {
|
| + this.set("direction", "asc");
|
| + }
|
| + this.fire("sort_change", {direction: this.direction, name: this.name});
|
| + },
|
| +
|
| + _hidden: function(num, compare) {
|
| + if (num === compare) {
|
| + return "hidden";
|
| + }
|
| + return "";
|
| + },
|
| +
|
| + _resetSort: function() {
|
| + // Because of how Polymer inserts and moves elements around, we need to
|
| + // update the direction value if the name changes so the ascending sort
|
| + // by "os" doesn't become the ascending sort by "gpu" if a column gets
|
| + // added before "os", for example. Additionally, this makes sure that
|
| + // only one sort-toggle is active at a given time.
|
| + if (this.current && this.current.name === this.name) {
|
| + this.set("direction", this.current.direction);
|
| + } else {
|
| + this.set("direction", "");
|
| + }
|
| +
|
| + },
|
| + });
|
| + </script>
|
| +</dom-module><script>
|
| +
|
| + /**
|
| + * @param {!Function} selectCallback
|
| + * @constructor
|
| + */
|
| + Polymer.IronSelection = function(selectCallback) {
|
| + this.selection = [];
|
| + this.selectCallback = selectCallback;
|
| + };
|
| +
|
| + Polymer.IronSelection.prototype = {
|
| +
|
| + /**
|
| + * Retrieves the selected item(s).
|
| + *
|
| + * @method get
|
| + * @returns Returns the selected item(s). If the multi property is true,
|
| + * `get` will return an array, otherwise it will return
|
| + * the selected item or undefined if there is no selection.
|
| + */
|
| + get: function() {
|
| + return this.multi ? this.selection.slice() : this.selection[0];
|
| + },
|
| +
|
| + /**
|
| + * Clears all the selection except the ones indicated.
|
| + *
|
| + * @method clear
|
| + * @param {Array} excludes items to be excluded.
|
| + */
|
| + clear: function(excludes) {
|
| + this.selection.slice().forEach(function(item) {
|
| + if (!excludes || excludes.indexOf(item) < 0) {
|
| + this.setItemSelected(item, false);
|
| + }
|
| + }, this);
|
| + },
|
| +
|
| + /**
|
| + * Indicates if a given item is selected.
|
| + *
|
| + * @method isSelected
|
| + * @param {*} item The item whose selection state should be checked.
|
| + * @returns Returns true if `item` is selected.
|
| + */
|
| + isSelected: function(item) {
|
| + return this.selection.indexOf(item) >= 0;
|
| + },
|
| +
|
| + /**
|
| + * Sets the selection state for a given item to either selected or deselected.
|
| + *
|
| + * @method setItemSelected
|
| + * @param {*} item The item to select.
|
| + * @param {boolean} isSelected True for selected, false for deselected.
|
| + */
|
| + setItemSelected: function(item, isSelected) {
|
| + if (item != null) {
|
| + if (isSelected !== this.isSelected(item)) {
|
| + // proceed to update selection only if requested state differs from current
|
| + if (isSelected) {
|
| + this.selection.push(item);
|
| + } else {
|
| + var i = this.selection.indexOf(item);
|
| + if (i >= 0) {
|
| + this.selection.splice(i, 1);
|
| + }
|
| + }
|
| + if (this.selectCallback) {
|
| + this.selectCallback(item, isSelected);
|
| + }
|
| + }
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Sets the selection state for a given item. If the `multi` property
|
| + * is true, then the selected state of `item` will be toggled; otherwise
|
| + * the `item` will be selected.
|
| + *
|
| + * @method select
|
| + * @param {*} item The item to select.
|
| + */
|
| + select: function(item) {
|
| + if (this.multi) {
|
| + this.toggle(item);
|
| + } else if (this.get() !== item) {
|
| + this.setItemSelected(this.get(), false);
|
| + this.setItemSelected(item, true);
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Toggles the selection state for `item`.
|
| + *
|
| + * @method toggle
|
| + * @param {*} item The item to toggle.
|
| + */
|
| + toggle: function(item) {
|
| + this.setItemSelected(item, !this.isSelected(item));
|
| + }
|
| +
|
| + };
|
| +
|
| +</script>
|
| +<script>
|
| +
|
| + /** @polymerBehavior */
|
| + Polymer.IronSelectableBehavior = {
|
| +
|
| + /**
|
| + * Fired when iron-selector is activated (selected or deselected).
|
| + * It is fired before the selected items are changed.
|
| + * Cancel the event to abort selection.
|
| + *
|
| + * @event iron-activate
|
| + */
|
| +
|
| + /**
|
| + * Fired when an item is selected
|
| + *
|
| + * @event iron-select
|
| + */
|
| +
|
| + /**
|
| + * Fired when an item is deselected
|
| + *
|
| + * @event iron-deselect
|
| + */
|
| +
|
| + /**
|
| + * Fired when the list of selectable items changes (e.g., items are
|
| + * added or removed). The detail of the event is a mutation record that
|
| + * describes what changed.
|
| + *
|
| + * @event iron-items-changed
|
| + */
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * If you want to use an attribute value or property of an element for
|
| + * `selected` instead of the index, set this to the name of the attribute
|
| + * or property. Hyphenated values are converted to camel case when used to
|
| + * look up the property of a selectable element. Camel cased values are
|
| + * *not* converted to hyphenated values for attribute lookup. It's
|
| + * recommended that you provide the hyphenated form of the name so that
|
| + * selection works in both cases. (Use `attr-or-property-name` instead of
|
| + * `attrOrPropertyName`.)
|
| + */
|
| + attrForSelected: {
|
| + type: String,
|
| + value: null
|
| + },
|
| +
|
| + /**
|
| + * Gets or sets the selected element. The default is to use the index of the item.
|
| + * @type {string|number}
|
| + */
|
| + selected: {
|
| + type: String,
|
| + notify: true
|
| + },
|
| +
|
| + /**
|
| + * Returns the currently selected item.
|
| + *
|
| + * @type {?Object}
|
| + */
|
| + selectedItem: {
|
| + type: Object,
|
| + readOnly: true,
|
| + notify: true
|
| + },
|
| +
|
| + /**
|
| + * The event that fires from items when they are selected. Selectable
|
| + * will listen for this event from items and update the selection state.
|
| + * Set to empty string to listen to no events.
|
| + */
|
| + activateEvent: {
|
| + type: String,
|
| + value: 'tap',
|
| + observer: '_activateEventChanged'
|
| + },
|
| +
|
| + /**
|
| + * This is a CSS selector string. If this is set, only items that match the CSS selector
|
| + * are selectable.
|
| + */
|
| + selectable: String,
|
| +
|
| + /**
|
| + * The class to set on elements when selected.
|
| + */
|
| + selectedClass: {
|
| + type: String,
|
| + value: 'iron-selected'
|
| + },
|
| +
|
| + /**
|
| + * The attribute to set on elements when selected.
|
| + */
|
| + selectedAttribute: {
|
| + type: String,
|
| + value: null
|
| + },
|
| +
|
| + /**
|
| + * Default fallback if the selection based on selected with `attrForSelected`
|
| + * is not found.
|
| + */
|
| + fallbackSelection: {
|
| + type: String,
|
| + value: null
|
| + },
|
| +
|
| + /**
|
| + * The list of items from which a selection can be made.
|
| + */
|
| + items: {
|
| + type: Array,
|
| + readOnly: true,
|
| + notify: true,
|
| + value: function() {
|
| + return [];
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * The set of excluded elements where the key is the `localName`
|
| + * of the element that will be ignored from the item list.
|
| + *
|
| + * @default {template: 1}
|
| + */
|
| + _excludedLocalNames: {
|
| + type: Object,
|
| + value: function() {
|
| + return {
|
| + 'template': 1
|
| + };
|
| + }
|
| + }
|
| + },
|
| +
|
| + observers: [
|
| + '_updateAttrForSelected(attrForSelected)',
|
| + '_updateSelected(selected)',
|
| + '_checkFallback(fallbackSelection)'
|
| + ],
|
| +
|
| + created: function() {
|
| + this._bindFilterItem = this._filterItem.bind(this);
|
| + this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
| + },
|
| +
|
| + attached: function() {
|
| + this._observer = this._observeItems(this);
|
| + this._updateItems();
|
| + if (!this._shouldUpdateSelection) {
|
| + this._updateSelected();
|
| + }
|
| + this._addListener(this.activateEvent);
|
| + },
|
| +
|
| + detached: function() {
|
| + if (this._observer) {
|
| + Polymer.dom(this).unobserveNodes(this._observer);
|
| + }
|
| + this._removeListener(this.activateEvent);
|
| + },
|
| +
|
| + /**
|
| + * Returns the index of the given item.
|
| + *
|
| + * @method indexOf
|
| + * @param {Object} item
|
| + * @returns Returns the index of the item
|
| + */
|
| + indexOf: function(item) {
|
| + return this.items.indexOf(item);
|
| + },
|
| +
|
| + /**
|
| + * Selects the given value.
|
| + *
|
| + * @method select
|
| + * @param {string|number} value the value to select.
|
| + */
|
| + select: function(value) {
|
| + this.selected = value;
|
| + },
|
| +
|
| + /**
|
| + * Selects the previous item.
|
| + *
|
| + * @method selectPrevious
|
| + */
|
| + selectPrevious: function() {
|
| + var length = this.items.length;
|
| + var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
|
| + this.selected = this._indexToValue(index);
|
| + },
|
| +
|
| + /**
|
| + * Selects the next item.
|
| + *
|
| + * @method selectNext
|
| + */
|
| + selectNext: function() {
|
| + var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
|
| + this.selected = this._indexToValue(index);
|
| + },
|
| +
|
| + /**
|
| + * Selects the item at the given index.
|
| + *
|
| + * @method selectIndex
|
| + */
|
| + selectIndex: function(index) {
|
| + this.select(this._indexToValue(index));
|
| + },
|
| +
|
| + /**
|
| + * Force a synchronous update of the `items` property.
|
| + *
|
| + * NOTE: Consider listening for the `iron-items-changed` event to respond to
|
| + * updates to the set of selectable items after updates to the DOM list and
|
| + * selection state have been made.
|
| + *
|
| + * WARNING: If you are using this method, you should probably consider an
|
| + * alternate approach. Synchronously querying for items is potentially
|
| + * slow for many use cases. The `items` property will update asynchronously
|
| + * on its own to reflect selectable items in the DOM.
|
| + */
|
| + forceSynchronousItemUpdate: function() {
|
| + this._updateItems();
|
| + },
|
| +
|
| + get _shouldUpdateSelection() {
|
| + return this.selected != null;
|
| + },
|
| +
|
| + _checkFallback: function() {
|
| + if (this._shouldUpdateSelection) {
|
| + this._updateSelected();
|
| + }
|
| + },
|
| +
|
| + _addListener: function(eventName) {
|
| + this.listen(this, eventName, '_activateHandler');
|
| + },
|
| +
|
| + _removeListener: function(eventName) {
|
| + this.unlisten(this, eventName, '_activateHandler');
|
| + },
|
| +
|
| + _activateEventChanged: function(eventName, old) {
|
| + this._removeListener(old);
|
| + this._addListener(eventName);
|
| + },
|
| +
|
| + _updateItems: function() {
|
| + var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
|
| + nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
|
| + this._setItems(nodes);
|
| + },
|
| +
|
| + _updateAttrForSelected: function() {
|
| + if (this._shouldUpdateSelection) {
|
| + this.selected = this._indexToValue(this.indexOf(this.selectedItem));
|
| + }
|
| + },
|
| +
|
| + _updateSelected: function() {
|
| + this._selectSelected(this.selected);
|
| + },
|
| +
|
| + _selectSelected: function(selected) {
|
| + this._selection.select(this._valueToItem(this.selected));
|
| + // Check for items, since this array is populated only when attached
|
| + // Since Number(0) is falsy, explicitly check for undefined
|
| + if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
|
| + this.selected = this.fallbackSelection;
|
| + }
|
| + },
|
| +
|
| + _filterItem: function(node) {
|
| + return !this._excludedLocalNames[node.localName];
|
| + },
|
| +
|
| + _valueToItem: function(value) {
|
| + return (value == null) ? null : this.items[this._valueToIndex(value)];
|
| + },
|
| +
|
| + _valueToIndex: function(value) {
|
| + if (this.attrForSelected) {
|
| + for (var i = 0, item; item = this.items[i]; i++) {
|
| + if (this._valueForItem(item) == value) {
|
| + return i;
|
| + }
|
| + }
|
| + } else {
|
| + return Number(value);
|
| + }
|
| + },
|
| +
|
| + _indexToValue: function(index) {
|
| + if (this.attrForSelected) {
|
| + var item = this.items[index];
|
| + if (item) {
|
| + return this._valueForItem(item);
|
| + }
|
| + } else {
|
| + return index;
|
| + }
|
| + },
|
| +
|
| + _valueForItem: function(item) {
|
| + var propValue = item[Polymer.CaseMap.dashToCamelCase(this.attrForSelected)];
|
| + return propValue != undefined ? propValue : item.getAttribute(this.attrForSelected);
|
| + },
|
| +
|
| + _applySelection: function(item, isSelected) {
|
| + if (this.selectedClass) {
|
| + this.toggleClass(this.selectedClass, isSelected, item);
|
| + }
|
| + if (this.selectedAttribute) {
|
| + this.toggleAttribute(this.selectedAttribute, isSelected, item);
|
| + }
|
| + this._selectionChange();
|
| + this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
|
| + },
|
| +
|
| + _selectionChange: function() {
|
| + this._setSelectedItem(this._selection.get());
|
| + },
|
| +
|
| + // observe items change under the given node.
|
| + _observeItems: function(node) {
|
| + return Polymer.dom(node).observeNodes(function(mutation) {
|
| + this._updateItems();
|
| +
|
| + if (this._shouldUpdateSelection) {
|
| + this._updateSelected();
|
| + }
|
| +
|
| + // Let other interested parties know about the change so that
|
| + // we don't have to recreate mutation observers everywhere.
|
| + this.fire('iron-items-changed', mutation, {
|
| + bubbles: false,
|
| + cancelable: false
|
| + });
|
| + });
|
| + },
|
| +
|
| + _activateHandler: function(e) {
|
| + var t = e.target;
|
| + var items = this.items;
|
| + while (t && t != this) {
|
| + var i = items.indexOf(t);
|
| + if (i >= 0) {
|
| + var value = this._indexToValue(i);
|
| + this._itemActivate(value, t);
|
| + return;
|
| + }
|
| + t = t.parentNode;
|
| + }
|
| + },
|
| +
|
| + _itemActivate: function(value, item) {
|
| + if (!this.fire('iron-activate',
|
| + {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
|
| + this.select(value);
|
| + }
|
| + }
|
| +
|
| + };
|
| +
|
| +</script>
|
| +<script>
|
| + /** @polymerBehavior Polymer.IronMultiSelectableBehavior */
|
| + Polymer.IronMultiSelectableBehaviorImpl = {
|
| + properties: {
|
| +
|
| + /**
|
| + * If true, multiple selections are allowed.
|
| + */
|
| + multi: {
|
| + type: Boolean,
|
| + value: false,
|
| + observer: 'multiChanged'
|
| + },
|
| +
|
| + /**
|
| + * Gets or sets the selected elements. This is used instead of `selected` when `multi`
|
| + * is true.
|
| + */
|
| + selectedValues: {
|
| + type: Array,
|
| + notify: true
|
| + },
|
| +
|
| + /**
|
| + * Returns an array of currently selected items.
|
| + */
|
| + selectedItems: {
|
| + type: Array,
|
| + readOnly: true,
|
| + notify: true
|
| + },
|
| +
|
| + },
|
| +
|
| + observers: [
|
| + '_updateSelected(selectedValues.splices)'
|
| + ],
|
| +
|
| + /**
|
| + * Selects the given value. If the `multi` property is true, then the selected state of the
|
| + * `value` will be toggled; otherwise the `value` will be selected.
|
| + *
|
| + * @method select
|
| + * @param {string|number} value the value to select.
|
| + */
|
| + select: function(value) {
|
| + if (this.multi) {
|
| + if (this.selectedValues) {
|
| + this._toggleSelected(value);
|
| + } else {
|
| + this.selectedValues = [value];
|
| + }
|
| + } else {
|
| + this.selected = value;
|
| + }
|
| + },
|
| +
|
| + multiChanged: function(multi) {
|
| + this._selection.multi = multi;
|
| + },
|
| +
|
| + get _shouldUpdateSelection() {
|
| + return this.selected != null ||
|
| + (this.selectedValues != null && this.selectedValues.length);
|
| + },
|
| +
|
| + _updateAttrForSelected: function() {
|
| + if (!this.multi) {
|
| + Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
|
| + } else if (this._shouldUpdateSelection) {
|
| + this.selectedValues = this.selectedItems.map(function(selectedItem) {
|
| + return this._indexToValue(this.indexOf(selectedItem));
|
| + }, this).filter(function(unfilteredValue) {
|
| + return unfilteredValue != null;
|
| + }, this);
|
| + }
|
| + },
|
| +
|
| + _updateSelected: function() {
|
| + if (this.multi) {
|
| + this._selectMulti(this.selectedValues);
|
| + } else {
|
| + this._selectSelected(this.selected);
|
| + }
|
| + },
|
| +
|
| + _selectMulti: function(values) {
|
| + if (values) {
|
| + var selectedItems = this._valuesToItems(values);
|
| + // clear all but the current selected items
|
| + this._selection.clear(selectedItems);
|
| + // select only those not selected yet
|
| + for (var i = 0; i < selectedItems.length; i++) {
|
| + this._selection.setItemSelected(selectedItems[i], true);
|
| + }
|
| + // Check for items, since this array is populated only when attached
|
| + if (this.fallbackSelection && this.items.length && !this._selection.get().length) {
|
| + var fallback = this._valueToItem(this.fallbackSelection);
|
| + if (fallback) {
|
| + this.selectedValues = [this.fallbackSelection];
|
| + }
|
| + }
|
| + } else {
|
| + this._selection.clear();
|
| + }
|
| + },
|
| +
|
| + _selectionChange: function() {
|
| + var s = this._selection.get();
|
| + if (this.multi) {
|
| + this._setSelectedItems(s);
|
| + } else {
|
| + this._setSelectedItems([s]);
|
| + this._setSelectedItem(s);
|
| + }
|
| + },
|
| +
|
| + _toggleSelected: function(value) {
|
| + var i = this.selectedValues.indexOf(value);
|
| + var unselected = i < 0;
|
| + if (unselected) {
|
| + this.push('selectedValues',value);
|
| + } else {
|
| + this.splice('selectedValues',i,1);
|
| + }
|
| + },
|
| +
|
| + _valuesToItems: function(values) {
|
| + return (values == null) ? null : values.map(function(value) {
|
| + return this._valueToItem(value);
|
| + }, this);
|
| + }
|
| + };
|
| +
|
| + /** @polymerBehavior */
|
| + Polymer.IronMultiSelectableBehavior = [
|
| + Polymer.IronSelectableBehavior,
|
| + Polymer.IronMultiSelectableBehaviorImpl
|
| + ];
|
| +
|
| +</script>
|
| +<script>
|
| + /**
|
| + `iron-selector` is an element which can be used to manage a list of elements
|
| + that can be selected. Tapping on the item will make the item selected. The `selected` indicates
|
| + which item is being selected. The default is to use the index of the item.
|
| +
|
| + Example:
|
| +
|
| + <iron-selector selected="0">
|
| + <div>Item 1</div>
|
| + <div>Item 2</div>
|
| + <div>Item 3</div>
|
| + </iron-selector>
|
| +
|
| + If you want to use the attribute value of an element for `selected` instead of the index,
|
| + set `attrForSelected` to the name of the attribute. For example, if you want to select item by
|
| + `name`, set `attrForSelected` to `name`.
|
| +
|
| + Example:
|
| +
|
| + <iron-selector attr-for-selected="name" selected="foo">
|
| + <div name="foo">Foo</div>
|
| + <div name="bar">Bar</div>
|
| + <div name="zot">Zot</div>
|
| + </iron-selector>
|
| +
|
| + You can specify a default fallback with `fallbackSelection` in case the `selected` attribute does
|
| + not match the `attrForSelected` attribute of any elements.
|
| +
|
| + Example:
|
| +
|
| + <iron-selector attr-for-selected="name" selected="non-existing"
|
| + fallback-selection="default">
|
| + <div name="foo">Foo</div>
|
| + <div name="bar">Bar</div>
|
| + <div name="default">Default</div>
|
| + </iron-selector>
|
| +
|
| + Note: When the selector is multi, the selection will set to `fallbackSelection` iff
|
| + the number of matching elements is zero.
|
| +
|
| + `iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.
|
| +
|
| + Example:
|
| +
|
| + <style>
|
| + .iron-selected {
|
| + background: #eee;
|
| + }
|
| + </style>
|
| +
|
| + ...
|
| +
|
| + <iron-selector selected="0">
|
| + <div>Item 1</div>
|
| + <div>Item 2</div>
|
| + <div>Item 3</div>
|
| + </iron-selector>
|
| +
|
| + @demo demo/index.html
|
| + */
|
| +
|
| + Polymer({
|
| +
|
| + is: 'iron-selector',
|
| +
|
| + behaviors: [
|
| + Polymer.IronMultiSelectableBehavior
|
| + ]
|
| +
|
| + });
|
| +
|
| +</script>
|
| +
|
| +
|
| +<style is="custom-style">
|
| +
|
| + :root {
|
| + /*
|
| + * You can use these generic variables in your elements for easy theming.
|
| + * For example, if all your elements use `--primary-text-color` as its main
|
| + * color, then switching from a light to a dark theme is just a matter of
|
| + * changing the value of `--primary-text-color` in your application.
|
| + */
|
| + --primary-text-color: var(--light-theme-text-color);
|
| + --primary-background-color: var(--light-theme-background-color);
|
| + --secondary-text-color: var(--light-theme-secondary-color);
|
| + --disabled-text-color: var(--light-theme-disabled-color);
|
| + --divider-color: var(--light-theme-divider-color);
|
| + --error-color: var(--paper-deep-orange-a700);
|
| +
|
| + /*
|
| + * Primary and accent colors. Also see color.html for more colors.
|
| + */
|
| + --primary-color: var(--paper-indigo-500);
|
| + --light-primary-color: var(--paper-indigo-100);
|
| + --dark-primary-color: var(--paper-indigo-700);
|
| +
|
| + --accent-color: var(--paper-pink-a200);
|
| + --light-accent-color: var(--paper-pink-a100);
|
| + --dark-accent-color: var(--paper-pink-a400);
|
| +
|
| +
|
| + /*
|
| + * Material Design Light background theme
|
| + */
|
| + --light-theme-background-color: #ffffff;
|
| + --light-theme-base-color: #000000;
|
| + --light-theme-text-color: var(--paper-grey-900);
|
| + --light-theme-secondary-color: #737373; /* for secondary text and icons */
|
| + --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */
|
| + --light-theme-divider-color: #dbdbdb;
|
| +
|
| + /*
|
| + * Material Design Dark background theme
|
| + */
|
| + --dark-theme-background-color: var(--paper-grey-900);
|
| + --dark-theme-base-color: #ffffff;
|
| + --dark-theme-text-color: #ffffff;
|
| + --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */
|
| + --dark-theme-disabled-color: #646464; /* disabled/hint text */
|
| + --dark-theme-divider-color: #3c3c3c;
|
| +
|
| + /*
|
| + * Deprecated values because of their confusing names.
|
| + */
|
| + --text-primary-color: var(--dark-theme-text-color);
|
| + --default-primary-color: var(--primary-color);
|
| +
|
| + }
|
| +
|
| +</style>
|
| +<script>
|
| + /**
|
| + * Singleton IronMeta instance.
|
| + */
|
| + Polymer.IronValidatableBehaviorMeta = null;
|
| +
|
| + /**
|
| + * `Use Polymer.IronValidatableBehavior` to implement an element that validates user input.
|
| + * Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input.
|
| + *
|
| + * By default, an `<iron-form>` element validates its fields when the user presses the submit button.
|
| + * To validate a form imperatively, call the form's `validate()` method, which in turn will
|
| + * call `validate()` on all its children. By using `Polymer.IronValidatableBehavior`, your
|
| + * custom element will get a public `validate()`, which
|
| + * will return the validity of the element, and a corresponding `invalid` attribute,
|
| + * which can be used for styling.
|
| + *
|
| + * To implement the custom validation logic of your element, you must override
|
| + * the protected `_getValidity()` method of this behaviour, rather than `validate()`.
|
| + * See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)
|
| + * for an example.
|
| + *
|
| + * ### Accessibility
|
| + *
|
| + * Changing the `invalid` property, either manually or by calling `validate()` will update the
|
| + * `aria-invalid` attribute.
|
| + *
|
| + * @demo demo/index.html
|
| + * @polymerBehavior
|
| + */
|
| + Polymer.IronValidatableBehavior = {
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * Name of the validator to use.
|
| + */
|
| + validator: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * True if the last call to `validate` is invalid.
|
| + */
|
| + invalid: {
|
| + notify: true,
|
| + reflectToAttribute: true,
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * This property is deprecated and should not be used. Use the global
|
| + * validator meta singleton, `Polymer.IronValidatableBehaviorMeta` instead.
|
| + */
|
| + _validatorMeta: {
|
| + type: Object
|
| + },
|
| +
|
| + /**
|
| + * Namespace for this validator. This property is deprecated and should
|
| + * not be used. For all intents and purposes, please consider it a
|
| + * read-only, config-time property.
|
| + */
|
| + validatorType: {
|
| + type: String,
|
| + value: 'validator'
|
| + },
|
| +
|
| + _validator: {
|
| + type: Object,
|
| + computed: '__computeValidator(validator)'
|
| + }
|
| + },
|
| +
|
| + observers: [
|
| + '_invalidChanged(invalid)'
|
| + ],
|
| +
|
| + registered: function() {
|
| + Polymer.IronValidatableBehaviorMeta = new Polymer.IronMeta({type: 'validator'});
|
| + },
|
| +
|
| + _invalidChanged: function() {
|
| + if (this.invalid) {
|
| + this.setAttribute('aria-invalid', 'true');
|
| + } else {
|
| + this.removeAttribute('aria-invalid');
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * @return {boolean} True if the validator `validator` exists.
|
| + */
|
| + hasValidator: function() {
|
| + return this._validator != null;
|
| + },
|
| +
|
| + /**
|
| + * Returns true if the `value` is valid, and updates `invalid`. If you want
|
| + * your element to have custom validation logic, do not override this method;
|
| + * override `_getValidity(value)` instead.
|
| +
|
| + * @param {Object} value The value to be validated. By default, it is passed
|
| + * to the validator's `validate()` function, if a validator is set.
|
| + * @return {boolean} True if `value` is valid.
|
| + */
|
| + validate: function(value) {
|
| + this.invalid = !this._getValidity(value);
|
| + return !this.invalid;
|
| + },
|
| +
|
| + /**
|
| + * Returns true if `value` is valid. By default, it is passed
|
| + * to the validator's `validate()` function, if a validator is set. You
|
| + * should override this method if you want to implement custom validity
|
| + * logic for your element.
|
| + *
|
| + * @param {Object} value The value to be validated.
|
| + * @return {boolean} True if `value` is valid.
|
| + */
|
| +
|
| + _getValidity: function(value) {
|
| + if (this.hasValidator()) {
|
| + return this._validator.validate(value);
|
| + }
|
| + return true;
|
| + },
|
| +
|
| + __computeValidator: function() {
|
| + return Polymer.IronValidatableBehaviorMeta &&
|
| + Polymer.IronValidatableBehaviorMeta.byKey(this.validator);
|
| + }
|
| + };
|
| +
|
| +</script>
|
| +<script>
|
| + /**
|
| + Polymer.IronFormElementBehavior enables a custom element to be included
|
| + in an `iron-form`.
|
| +
|
| + @demo demo/index.html
|
| + @polymerBehavior
|
| + */
|
| + Polymer.IronFormElementBehavior = {
|
| +
|
| + properties: {
|
| + /**
|
| + * Fired when the element is added to an `iron-form`.
|
| + *
|
| + * @event iron-form-element-register
|
| + */
|
| +
|
| + /**
|
| + * Fired when the element is removed from an `iron-form`.
|
| + *
|
| + * @event iron-form-element-unregister
|
| + */
|
| +
|
| + /**
|
| + * The name of this element.
|
| + */
|
| + name: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The value for this element.
|
| + */
|
| + value: {
|
| + notify: true,
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Set to true to mark the input as required. If used in a form, a
|
| + * custom element that uses this behavior should also use
|
| + * Polymer.IronValidatableBehavior and define a custom validation method.
|
| + * Otherwise, a `required` element will always be considered valid.
|
| + * It's also strongly recommended to provide a visual style for the element
|
| + * when its value is invalid.
|
| + */
|
| + required: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * The form that the element is registered to.
|
| + */
|
| + _parentForm: {
|
| + type: Object
|
| + }
|
| + },
|
| +
|
| + attached: function() {
|
| + // Note: the iron-form that this element belongs to will set this
|
| + // element's _parentForm property when handling this event.
|
| + this.fire('iron-form-element-register');
|
| + },
|
| +
|
| + detached: function() {
|
| + if (this._parentForm) {
|
| + this._parentForm.fire('iron-form-element-unregister', {target: this});
|
| + }
|
| + }
|
| +
|
| + };
|
| +
|
| +</script>
|
| +<script>
|
| +
|
| + /**
|
| + * Use `Polymer.IronCheckedElementBehavior` to implement a custom element
|
| + * that has a `checked` property, which can be used for validation if the
|
| + * element is also `required`. Element instances implementing this behavior
|
| + * will also be registered for use in an `iron-form` element.
|
| + *
|
| + * @demo demo/index.html
|
| + * @polymerBehavior Polymer.IronCheckedElementBehavior
|
| + */
|
| + Polymer.IronCheckedElementBehaviorImpl = {
|
| +
|
| + properties: {
|
| + /**
|
| + * Fired when the checked state changes.
|
| + *
|
| + * @event iron-change
|
| + */
|
| +
|
| + /**
|
| + * Gets or sets the state, `true` is checked and `false` is unchecked.
|
| + */
|
| + checked: {
|
| + type: Boolean,
|
| + value: false,
|
| + reflectToAttribute: true,
|
| + notify: true,
|
| + observer: '_checkedChanged'
|
| + },
|
| +
|
| + /**
|
| + * If true, the button toggles the active state with each tap or press
|
| + * of the spacebar.
|
| + */
|
| + toggles: {
|
| + type: Boolean,
|
| + value: true,
|
| + reflectToAttribute: true
|
| + },
|
| +
|
| + /* Overriden from Polymer.IronFormElementBehavior */
|
| + value: {
|
| + type: String,
|
| + value: 'on',
|
| + observer: '_valueChanged'
|
| + }
|
| + },
|
| +
|
| + observers: [
|
| + '_requiredChanged(required)'
|
| + ],
|
| +
|
| + created: function() {
|
| + // Used by `iron-form` to handle the case that an element with this behavior
|
| + // doesn't have a role of 'checkbox' or 'radio', but should still only be
|
| + // included when the form is serialized if `this.checked === true`.
|
| + this._hasIronCheckedElementBehavior = true;
|
| + },
|
| +
|
| + /**
|
| + * Returns false if the element is required and not checked, and true otherwise.
|
| + * @param {*=} _value Ignored.
|
| + * @return {boolean} true if `required` is false or if `checked` is true.
|
| + */
|
| + _getValidity: function(_value) {
|
| + return this.disabled || !this.required || this.checked;
|
| + },
|
| +
|
| + /**
|
| + * Update the aria-required label when `required` is changed.
|
| + */
|
| + _requiredChanged: function() {
|
| + if (this.required) {
|
| + this.setAttribute('aria-required', 'true');
|
| + } else {
|
| + this.removeAttribute('aria-required');
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Fire `iron-changed` when the checked state changes.
|
| + */
|
| + _checkedChanged: function() {
|
| + this.active = this.checked;
|
| + this.fire('iron-change');
|
| + },
|
| +
|
| + /**
|
| + * Reset value to 'on' if it is set to `undefined`.
|
| + */
|
| + _valueChanged: function() {
|
| + if (this.value === undefined || this.value === null) {
|
| + this.value = 'on';
|
| + }
|
| + }
|
| + };
|
| +
|
| + /** @polymerBehavior Polymer.IronCheckedElementBehavior */
|
| + Polymer.IronCheckedElementBehavior = [
|
| + Polymer.IronFormElementBehavior,
|
| + Polymer.IronValidatableBehavior,
|
| + Polymer.IronCheckedElementBehaviorImpl
|
| + ];
|
| +
|
| +</script>
|
| +<script>
|
| + (function() {
|
| + 'use strict';
|
| +
|
| + /**
|
| + * Chrome uses an older version of DOM Level 3 Keyboard Events
|
| + *
|
| + * Most keys are labeled as text, but some are Unicode codepoints.
|
| + * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
|
| + */
|
| + var KEY_IDENTIFIER = {
|
| + 'U+0008': 'backspace',
|
| + 'U+0009': 'tab',
|
| + 'U+001B': 'esc',
|
| + 'U+0020': 'space',
|
| + 'U+007F': 'del'
|
| + };
|
| +
|
| + /**
|
| + * Special table for KeyboardEvent.keyCode.
|
| + * KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better
|
| + * than that.
|
| + *
|
| + * Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
|
| + */
|
| + var KEY_CODE = {
|
| + 8: 'backspace',
|
| + 9: 'tab',
|
| + 13: 'enter',
|
| + 27: 'esc',
|
| + 33: 'pageup',
|
| + 34: 'pagedown',
|
| + 35: 'end',
|
| + 36: 'home',
|
| + 32: 'space',
|
| + 37: 'left',
|
| + 38: 'up',
|
| + 39: 'right',
|
| + 40: 'down',
|
| + 46: 'del',
|
| + 106: '*'
|
| + };
|
| +
|
| + /**
|
| + * MODIFIER_KEYS maps the short name for modifier keys used in a key
|
| + * combo string to the property name that references those same keys
|
| + * in a KeyboardEvent instance.
|
| + */
|
| + var MODIFIER_KEYS = {
|
| + 'shift': 'shiftKey',
|
| + 'ctrl': 'ctrlKey',
|
| + 'alt': 'altKey',
|
| + 'meta': 'metaKey'
|
| + };
|
| +
|
| + /**
|
| + * KeyboardEvent.key is mostly represented by printable character made by
|
| + * the keyboard, with unprintable keys labeled nicely.
|
| + *
|
| + * However, on OS X, Alt+char can make a Unicode character that follows an
|
| + * Apple-specific mapping. In this case, we fall back to .keyCode.
|
| + */
|
| + var KEY_CHAR = /[a-z0-9*]/;
|
| +
|
| + /**
|
| + * Matches a keyIdentifier string.
|
| + */
|
| + var IDENT_CHAR = /U\+/;
|
| +
|
| + /**
|
| + * Matches arrow keys in Gecko 27.0+
|
| + */
|
| + var ARROW_KEY = /^arrow/;
|
| +
|
| + /**
|
| + * Matches space keys everywhere (notably including IE10's exceptional name
|
| + * `spacebar`).
|
| + */
|
| + var SPACE_KEY = /^space(bar)?/;
|
| +
|
| + /**
|
| + * Matches ESC key.
|
| + *
|
| + * Value from: http://w3c.github.io/uievents-key/#key-Escape
|
| + */
|
| + var ESC_KEY = /^escape$/;
|
| +
|
| + /**
|
| + * Transforms the key.
|
| + * @param {string} key The KeyBoardEvent.key
|
| + * @param {Boolean} [noSpecialChars] Limits the transformation to
|
| + * alpha-numeric characters.
|
| + */
|
| + function transformKey(key, noSpecialChars) {
|
| + var validKey = '';
|
| + if (key) {
|
| + var lKey = key.toLowerCase();
|
| + if (lKey === ' ' || SPACE_KEY.test(lKey)) {
|
| + validKey = 'space';
|
| + } else if (ESC_KEY.test(lKey)) {
|
| + validKey = 'esc';
|
| + } else if (lKey.length == 1) {
|
| + if (!noSpecialChars || KEY_CHAR.test(lKey)) {
|
| + validKey = lKey;
|
| + }
|
| + } else if (ARROW_KEY.test(lKey)) {
|
| + validKey = lKey.replace('arrow', '');
|
| + } else if (lKey == 'multiply') {
|
| + // numpad '*' can map to Multiply on IE/Windows
|
| + validKey = '*';
|
| + } else {
|
| + validKey = lKey;
|
| + }
|
| + }
|
| + return validKey;
|
| + }
|
| +
|
| + function transformKeyIdentifier(keyIdent) {
|
| + var validKey = '';
|
| + if (keyIdent) {
|
| + if (keyIdent in KEY_IDENTIFIER) {
|
| + validKey = KEY_IDENTIFIER[keyIdent];
|
| + } else if (IDENT_CHAR.test(keyIdent)) {
|
| + keyIdent = parseInt(keyIdent.replace('U+', '0x'), 16);
|
| + validKey = String.fromCharCode(keyIdent).toLowerCase();
|
| + } else {
|
| + validKey = keyIdent.toLowerCase();
|
| + }
|
| + }
|
| + return validKey;
|
| + }
|
| +
|
| + function transformKeyCode(keyCode) {
|
| + var validKey = '';
|
| + if (Number(keyCode)) {
|
| + if (keyCode >= 65 && keyCode <= 90) {
|
| + // ascii a-z
|
| + // lowercase is 32 offset from uppercase
|
| + validKey = String.fromCharCode(32 + keyCode);
|
| + } else if (keyCode >= 112 && keyCode <= 123) {
|
| + // function keys f1-f12
|
| + validKey = 'f' + (keyCode - 112);
|
| + } else if (keyCode >= 48 && keyCode <= 57) {
|
| + // top 0-9 keys
|
| + validKey = String(keyCode - 48);
|
| + } else if (keyCode >= 96 && keyCode <= 105) {
|
| + // num pad 0-9
|
| + validKey = String(keyCode - 96);
|
| + } else {
|
| + validKey = KEY_CODE[keyCode];
|
| + }
|
| + }
|
| + return validKey;
|
| + }
|
| +
|
| + /**
|
| + * Calculates the normalized key for a KeyboardEvent.
|
| + * @param {KeyboardEvent} keyEvent
|
| + * @param {Boolean} [noSpecialChars] Set to true to limit keyEvent.key
|
| + * transformation to alpha-numeric chars. This is useful with key
|
| + * combinations like shift + 2, which on FF for MacOS produces
|
| + * keyEvent.key = @
|
| + * To get 2 returned, set noSpecialChars = true
|
| + * To get @ returned, set noSpecialChars = false
|
| + */
|
| + function normalizedKeyForEvent(keyEvent, noSpecialChars) {
|
| + // Fall back from .key, to .keyIdentifier, to .keyCode, and then to
|
| + // .detail.key to support artificial keyboard events.
|
| + return transformKey(keyEvent.key, noSpecialChars) ||
|
| + transformKeyIdentifier(keyEvent.keyIdentifier) ||
|
| + transformKeyCode(keyEvent.keyCode) ||
|
| + transformKey(keyEvent.detail ? keyEvent.detail.key : keyEvent.detail, noSpecialChars) || '';
|
| + }
|
| +
|
| + function keyComboMatchesEvent(keyCombo, event) {
|
| + // For combos with modifiers we support only alpha-numeric keys
|
| + var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers);
|
| + return keyEvent === keyCombo.key &&
|
| + (!keyCombo.hasModifiers || (
|
| + !!event.shiftKey === !!keyCombo.shiftKey &&
|
| + !!event.ctrlKey === !!keyCombo.ctrlKey &&
|
| + !!event.altKey === !!keyCombo.altKey &&
|
| + !!event.metaKey === !!keyCombo.metaKey)
|
| + );
|
| + }
|
| +
|
| + function parseKeyComboString(keyComboString) {
|
| + if (keyComboString.length === 1) {
|
| + return {
|
| + combo: keyComboString,
|
| + key: keyComboString,
|
| + event: 'keydown'
|
| + };
|
| + }
|
| + return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboPart) {
|
| + var eventParts = keyComboPart.split(':');
|
| + var keyName = eventParts[0];
|
| + var event = eventParts[1];
|
| +
|
| + if (keyName in MODIFIER_KEYS) {
|
| + parsedKeyCombo[MODIFIER_KEYS[keyName]] = true;
|
| + parsedKeyCombo.hasModifiers = true;
|
| + } else {
|
| + parsedKeyCombo.key = keyName;
|
| + parsedKeyCombo.event = event || 'keydown';
|
| + }
|
| +
|
| + return parsedKeyCombo;
|
| + }, {
|
| + combo: keyComboString.split(':').shift()
|
| + });
|
| + }
|
| +
|
| + function parseEventString(eventString) {
|
| + return eventString.trim().split(' ').map(function(keyComboString) {
|
| + return parseKeyComboString(keyComboString);
|
| + });
|
| + }
|
| +
|
| + /**
|
| + * `Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
|
| + * keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
|
| + * The element takes care of browser differences with respect to Keyboard events
|
| + * and uses an expressive syntax to filter key presses.
|
| + *
|
| + * Use the `keyBindings` prototype property to express what combination of keys
|
| + * will trigger the callback. A key binding has the format
|
| + * `"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or
|
| + * `"KEY:EVENT": "callback"` are valid as well). Some examples:
|
| + *
|
| + * keyBindings: {
|
| + * 'space': '_onKeydown', // same as 'space:keydown'
|
| + * 'shift+tab': '_onKeydown',
|
| + * 'enter:keypress': '_onKeypress',
|
| + * 'esc:keyup': '_onKeyup'
|
| + * }
|
| + *
|
| + * The callback will receive with an event containing the following information in `event.detail`:
|
| + *
|
| + * _onKeydown: function(event) {
|
| + * console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab"
|
| + * console.log(event.detail.key); // KEY only, e.g. "tab"
|
| + * console.log(event.detail.event); // EVENT, e.g. "keydown"
|
| + * console.log(event.detail.keyboardEvent); // the original KeyboardEvent
|
| + * }
|
| + *
|
| + * Use the `keyEventTarget` attribute to set up event handlers on a specific
|
| + * node.
|
| + *
|
| + * See the [demo source code](https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/master/demo/x-key-aware.html)
|
| + * for an example.
|
| + *
|
| + * @demo demo/index.html
|
| + * @polymerBehavior
|
| + */
|
| + Polymer.IronA11yKeysBehavior = {
|
| + properties: {
|
| + /**
|
| + * The EventTarget that will be firing relevant KeyboardEvents. Set it to
|
| + * `null` to disable the listeners.
|
| + * @type {?EventTarget}
|
| + */
|
| + keyEventTarget: {
|
| + type: Object,
|
| + value: function() {
|
| + return this;
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * If true, this property will cause the implementing element to
|
| + * automatically stop propagation on any handled KeyboardEvents.
|
| + */
|
| + stopKeyboardEventPropagation: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + _boundKeyHandlers: {
|
| + type: Array,
|
| + value: function() {
|
| + return [];
|
| + }
|
| + },
|
| +
|
| + // We use this due to a limitation in IE10 where instances will have
|
| + // own properties of everything on the "prototype".
|
| + _imperativeKeyBindings: {
|
| + type: Object,
|
| + value: function() {
|
| + return {};
|
| + }
|
| + }
|
| + },
|
| +
|
| + observers: [
|
| + '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)'
|
| + ],
|
| +
|
| +
|
| + /**
|
| + * To be used to express what combination of keys will trigger the relative
|
| + * callback. e.g. `keyBindings: { 'esc': '_onEscPressed'}`
|
| + * @type {Object}
|
| + */
|
| + keyBindings: {},
|
| +
|
| + registered: function() {
|
| + this._prepKeyBindings();
|
| + },
|
| +
|
| + attached: function() {
|
| + this._listenKeyEventListeners();
|
| + },
|
| +
|
| + detached: function() {
|
| + this._unlistenKeyEventListeners();
|
| + },
|
| +
|
| + /**
|
| + * Can be used to imperatively add a key binding to the implementing
|
| + * element. This is the imperative equivalent of declaring a keybinding
|
| + * in the `keyBindings` prototype property.
|
| + */
|
| + addOwnKeyBinding: function(eventString, handlerName) {
|
| + this._imperativeKeyBindings[eventString] = handlerName;
|
| + this._prepKeyBindings();
|
| + this._resetKeyEventListeners();
|
| + },
|
| +
|
| + /**
|
| + * When called, will remove all imperatively-added key bindings.
|
| + */
|
| + removeOwnKeyBindings: function() {
|
| + this._imperativeKeyBindings = {};
|
| + this._prepKeyBindings();
|
| + this._resetKeyEventListeners();
|
| + },
|
| +
|
| + /**
|
| + * Returns true if a keyboard event matches `eventString`.
|
| + *
|
| + * @param {KeyboardEvent} event
|
| + * @param {string} eventString
|
| + * @return {boolean}
|
| + */
|
| + keyboardEventMatchesKeys: function(event, eventString) {
|
| + var keyCombos = parseEventString(eventString);
|
| + for (var i = 0; i < keyCombos.length; ++i) {
|
| + if (keyComboMatchesEvent(keyCombos[i], event)) {
|
| + return true;
|
| + }
|
| + }
|
| + return false;
|
| + },
|
| +
|
| + _collectKeyBindings: function() {
|
| + var keyBindings = this.behaviors.map(function(behavior) {
|
| + return behavior.keyBindings;
|
| + });
|
| +
|
| + if (keyBindings.indexOf(this.keyBindings) === -1) {
|
| + keyBindings.push(this.keyBindings);
|
| + }
|
| +
|
| + return keyBindings;
|
| + },
|
| +
|
| + _prepKeyBindings: function() {
|
| + this._keyBindings = {};
|
| +
|
| + this._collectKeyBindings().forEach(function(keyBindings) {
|
| + for (var eventString in keyBindings) {
|
| + this._addKeyBinding(eventString, keyBindings[eventString]);
|
| + }
|
| + }, this);
|
| +
|
| + for (var eventString in this._imperativeKeyBindings) {
|
| + this._addKeyBinding(eventString, this._imperativeKeyBindings[eventString]);
|
| + }
|
| +
|
| + // Give precedence to combos with modifiers to be checked first.
|
| + for (var eventName in this._keyBindings) {
|
| + this._keyBindings[eventName].sort(function (kb1, kb2) {
|
| + var b1 = kb1[0].hasModifiers;
|
| + var b2 = kb2[0].hasModifiers;
|
| + return (b1 === b2) ? 0 : b1 ? -1 : 1;
|
| + })
|
| + }
|
| + },
|
| +
|
| + _addKeyBinding: function(eventString, handlerName) {
|
| + parseEventString(eventString).forEach(function(keyCombo) {
|
| + this._keyBindings[keyCombo.event] =
|
| + this._keyBindings[keyCombo.event] || [];
|
| +
|
| + this._keyBindings[keyCombo.event].push([
|
| + keyCombo,
|
| + handlerName
|
| + ]);
|
| + }, this);
|
| + },
|
| +
|
| + _resetKeyEventListeners: function() {
|
| + this._unlistenKeyEventListeners();
|
| +
|
| + if (this.isAttached) {
|
| + this._listenKeyEventListeners();
|
| + }
|
| + },
|
| +
|
| + _listenKeyEventListeners: function() {
|
| + if (!this.keyEventTarget) {
|
| + return;
|
| + }
|
| + Object.keys(this._keyBindings).forEach(function(eventName) {
|
| + var keyBindings = this._keyBindings[eventName];
|
| + var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings);
|
| +
|
| + this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyHandler]);
|
| +
|
| + this.keyEventTarget.addEventListener(eventName, boundKeyHandler);
|
| + }, this);
|
| + },
|
| +
|
| + _unlistenKeyEventListeners: function() {
|
| + var keyHandlerTuple;
|
| + var keyEventTarget;
|
| + var eventName;
|
| + var boundKeyHandler;
|
| +
|
| + while (this._boundKeyHandlers.length) {
|
| + // My kingdom for block-scope binding and destructuring assignment..
|
| + keyHandlerTuple = this._boundKeyHandlers.pop();
|
| + keyEventTarget = keyHandlerTuple[0];
|
| + eventName = keyHandlerTuple[1];
|
| + boundKeyHandler = keyHandlerTuple[2];
|
| +
|
| + keyEventTarget.removeEventListener(eventName, boundKeyHandler);
|
| + }
|
| + },
|
| +
|
| + _onKeyBindingEvent: function(keyBindings, event) {
|
| + if (this.stopKeyboardEventPropagation) {
|
| + event.stopPropagation();
|
| + }
|
| +
|
| + // if event has been already prevented, don't do anything
|
| + if (event.defaultPrevented) {
|
| + return;
|
| + }
|
| +
|
| + for (var i = 0; i < keyBindings.length; i++) {
|
| + var keyCombo = keyBindings[i][0];
|
| + var handlerName = keyBindings[i][1];
|
| + if (keyComboMatchesEvent(keyCombo, event)) {
|
| + this._triggerKeyHandler(keyCombo, handlerName, event);
|
| + // exit the loop if eventDefault was prevented
|
| + if (event.defaultPrevented) {
|
| + return;
|
| + }
|
| + }
|
| + }
|
| + },
|
| +
|
| + _triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) {
|
| + var detail = Object.create(keyCombo);
|
| + detail.keyboardEvent = keyboardEvent;
|
| + var event = new CustomEvent(keyCombo.event, {
|
| + detail: detail,
|
| + cancelable: true
|
| + });
|
| + this[handlerName].call(this, event);
|
| + if (event.defaultPrevented) {
|
| + keyboardEvent.preventDefault();
|
| + }
|
| + }
|
| + };
|
| + })();
|
| +</script>
|
| +<script>
|
| +
|
| + /**
|
| + * @demo demo/index.html
|
| + * @polymerBehavior
|
| + */
|
| + Polymer.IronControlState = {
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * If true, the element currently has focus.
|
| + */
|
| + focused: {
|
| + type: Boolean,
|
| + value: false,
|
| + notify: true,
|
| + readOnly: true,
|
| + reflectToAttribute: true
|
| + },
|
| +
|
| + /**
|
| + * If true, the user cannot interact with this element.
|
| + */
|
| + disabled: {
|
| + type: Boolean,
|
| + value: false,
|
| + notify: true,
|
| + observer: '_disabledChanged',
|
| + reflectToAttribute: true
|
| + },
|
| +
|
| + _oldTabIndex: {
|
| + type: Number
|
| + },
|
| +
|
| + _boundFocusBlurHandler: {
|
| + type: Function,
|
| + value: function() {
|
| + return this._focusBlurHandler.bind(this);
|
| + }
|
| + }
|
| +
|
| + },
|
| +
|
| + observers: [
|
| + '_changedControlState(focused, disabled)'
|
| + ],
|
| +
|
| + ready: function() {
|
| + this.addEventListener('focus', this._boundFocusBlurHandler, true);
|
| + this.addEventListener('blur', this._boundFocusBlurHandler, true);
|
| + },
|
| +
|
| + _focusBlurHandler: function(event) {
|
| + // NOTE(cdata): if we are in ShadowDOM land, `event.target` will
|
| + // eventually become `this` due to retargeting; if we are not in
|
| + // ShadowDOM land, `event.target` will eventually become `this` due
|
| + // to the second conditional which fires a synthetic event (that is also
|
| + // handled). In either case, we can disregard `event.path`.
|
| +
|
| + if (event.target === this) {
|
| + this._setFocused(event.type === 'focus');
|
| + } else if (!this.shadowRoot) {
|
| + var target = /** @type {Node} */(Polymer.dom(event).localTarget);
|
| + if (!this.isLightDescendant(target)) {
|
| + this.fire(event.type, {sourceEvent: event}, {
|
| + node: this,
|
| + bubbles: event.bubbles,
|
| + cancelable: event.cancelable
|
| + });
|
| + }
|
| + }
|
| + },
|
| +
|
| + _disabledChanged: function(disabled, old) {
|
| + this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
| + this.style.pointerEvents = disabled ? 'none' : '';
|
| + if (disabled) {
|
| + this._oldTabIndex = this.tabIndex;
|
| + this._setFocused(false);
|
| + this.tabIndex = -1;
|
| + this.blur();
|
| + } else if (this._oldTabIndex !== undefined) {
|
| + this.tabIndex = this._oldTabIndex;
|
| + }
|
| + },
|
| +
|
| + _changedControlState: function() {
|
| + // _controlStateChanged is abstract, follow-on behaviors may implement it
|
| + if (this._controlStateChanged) {
|
| + this._controlStateChanged();
|
| + }
|
| + }
|
| +
|
| + };
|
| +
|
| +</script>
|
| +<script>
|
| +
|
| + /**
|
| + * @demo demo/index.html
|
| + * @polymerBehavior Polymer.IronButtonState
|
| + */
|
| + Polymer.IronButtonStateImpl = {
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * If true, the user is currently holding down the button.
|
| + */
|
| + pressed: {
|
| + type: Boolean,
|
| + readOnly: true,
|
| + value: false,
|
| + reflectToAttribute: true,
|
| + observer: '_pressedChanged'
|
| + },
|
| +
|
| + /**
|
| + * If true, the button toggles the active state with each tap or press
|
| + * of the spacebar.
|
| + */
|
| + toggles: {
|
| + type: Boolean,
|
| + value: false,
|
| + reflectToAttribute: true
|
| + },
|
| +
|
| + /**
|
| + * If true, the button is a toggle and is currently in the active state.
|
| + */
|
| + active: {
|
| + type: Boolean,
|
| + value: false,
|
| + notify: true,
|
| + reflectToAttribute: true
|
| + },
|
| +
|
| + /**
|
| + * True if the element is currently being pressed by a "pointer," which
|
| + * is loosely defined as mouse or touch input (but specifically excluding
|
| + * keyboard input).
|
| + */
|
| + pointerDown: {
|
| + type: Boolean,
|
| + readOnly: true,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * True if the input device that caused the element to receive focus
|
| + * was a keyboard.
|
| + */
|
| + receivedFocusFromKeyboard: {
|
| + type: Boolean,
|
| + readOnly: true
|
| + },
|
| +
|
| + /**
|
| + * The aria attribute to be set if the button is a toggle and in the
|
| + * active state.
|
| + */
|
| + ariaActiveAttribute: {
|
| + type: String,
|
| + value: 'aria-pressed',
|
| + observer: '_ariaActiveAttributeChanged'
|
| + }
|
| + },
|
| +
|
| + listeners: {
|
| + down: '_downHandler',
|
| + up: '_upHandler',
|
| + tap: '_tapHandler'
|
| + },
|
| +
|
| + observers: [
|
| + '_detectKeyboardFocus(focused)',
|
| + '_activeChanged(active, ariaActiveAttribute)'
|
| + ],
|
| +
|
| + keyBindings: {
|
| + 'enter:keydown': '_asyncClick',
|
| + 'space:keydown': '_spaceKeyDownHandler',
|
| + 'space:keyup': '_spaceKeyUpHandler',
|
| + },
|
| +
|
| + _mouseEventRe: /^mouse/,
|
| +
|
| + _tapHandler: function() {
|
| + if (this.toggles) {
|
| + // a tap is needed to toggle the active state
|
| + this._userActivate(!this.active);
|
| + } else {
|
| + this.active = false;
|
| + }
|
| + },
|
| +
|
| + _detectKeyboardFocus: function(focused) {
|
| + this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
|
| + },
|
| +
|
| + // to emulate native checkbox, (de-)activations from a user interaction fire
|
| + // 'change' events
|
| + _userActivate: function(active) {
|
| + if (this.active !== active) {
|
| + this.active = active;
|
| + this.fire('change');
|
| + }
|
| + },
|
| +
|
| + _downHandler: function(event) {
|
| + this._setPointerDown(true);
|
| + this._setPressed(true);
|
| + this._setReceivedFocusFromKeyboard(false);
|
| + },
|
| +
|
| + _upHandler: function() {
|
| + this._setPointerDown(false);
|
| + this._setPressed(false);
|
| + },
|
| +
|
| + /**
|
| + * @param {!KeyboardEvent} event .
|
| + */
|
| + _spaceKeyDownHandler: function(event) {
|
| + var keyboardEvent = event.detail.keyboardEvent;
|
| + var target = Polymer.dom(keyboardEvent).localTarget;
|
| +
|
| + // Ignore the event if this is coming from a focused light child, since that
|
| + // element will deal with it.
|
| + if (this.isLightDescendant(/** @type {Node} */(target)))
|
| + return;
|
| +
|
| + keyboardEvent.preventDefault();
|
| + keyboardEvent.stopImmediatePropagation();
|
| + this._setPressed(true);
|
| + },
|
| +
|
| + /**
|
| + * @param {!KeyboardEvent} event .
|
| + */
|
| + _spaceKeyUpHandler: function(event) {
|
| + var keyboardEvent = event.detail.keyboardEvent;
|
| + var target = Polymer.dom(keyboardEvent).localTarget;
|
| +
|
| + // Ignore the event if this is coming from a focused light child, since that
|
| + // element will deal with it.
|
| + if (this.isLightDescendant(/** @type {Node} */(target)))
|
| + return;
|
| +
|
| + if (this.pressed) {
|
| + this._asyncClick();
|
| + }
|
| + this._setPressed(false);
|
| + },
|
| +
|
| + // trigger click asynchronously, the asynchrony is useful to allow one
|
| + // event handler to unwind before triggering another event
|
| + _asyncClick: function() {
|
| + this.async(function() {
|
| + this.click();
|
| + }, 1);
|
| + },
|
| +
|
| + // any of these changes are considered a change to button state
|
| +
|
| + _pressedChanged: function(pressed) {
|
| + this._changedButtonState();
|
| + },
|
| +
|
| + _ariaActiveAttributeChanged: function(value, oldValue) {
|
| + if (oldValue && oldValue != value && this.hasAttribute(oldValue)) {
|
| + this.removeAttribute(oldValue);
|
| + }
|
| + },
|
| +
|
| + _activeChanged: function(active, ariaActiveAttribute) {
|
| + if (this.toggles) {
|
| + this.setAttribute(this.ariaActiveAttribute,
|
| + active ? 'true' : 'false');
|
| + } else {
|
| + this.removeAttribute(this.ariaActiveAttribute);
|
| + }
|
| + this._changedButtonState();
|
| + },
|
| +
|
| + _controlStateChanged: function() {
|
| + if (this.disabled) {
|
| + this._setPressed(false);
|
| + } else {
|
| + this._changedButtonState();
|
| + }
|
| + },
|
| +
|
| + // provide hook for follow-on behaviors to react to button-state
|
| +
|
| + _changedButtonState: function() {
|
| + if (this._buttonStateChanged) {
|
| + this._buttonStateChanged(); // abstract
|
| + }
|
| + }
|
| +
|
| + };
|
| +
|
| + /** @polymerBehavior */
|
| + Polymer.IronButtonState = [
|
| + Polymer.IronA11yKeysBehavior,
|
| + Polymer.IronButtonStateImpl
|
| + ];
|
| +
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="paper-ripple" assetpath="/res/imp/bower_components/paper-ripple/">
|
| +
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + position: absolute;
|
| + border-radius: inherit;
|
| + overflow: hidden;
|
| + top: 0;
|
| + left: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| +
|
| + /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
|
| + * creating a node (with a position:absolute) in the middle of an event
|
| + * handler "interrupts" that event handler (which happens when the
|
| + * ripple is created on demand) */
|
| + pointer-events: none;
|
| + }
|
| +
|
| + :host([animating]) {
|
| + /* This resolves a rendering issue in Chrome (as of 40) where the
|
| + ripple is not properly clipped by its parent (which may have
|
| + rounded corners). See: http://jsbin.com/temexa/4
|
| +
|
| + Note: We only apply this style conditionally. Otherwise, the browser
|
| + will create a new compositing layer for every ripple element on the
|
| + page, and that would be bad. */
|
| + -webkit-transform: translate(0, 0);
|
| + transform: translate3d(0, 0, 0);
|
| + }
|
| +
|
| + #background,
|
| + #waves,
|
| + .wave-container,
|
| + .wave {
|
| + pointer-events: none;
|
| + position: absolute;
|
| + top: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + height: 100%;
|
| + }
|
| +
|
| + #background,
|
| + .wave {
|
| + opacity: 0;
|
| + }
|
| +
|
| + #waves,
|
| + .wave {
|
| + overflow: hidden;
|
| + }
|
| +
|
| + .wave-container,
|
| + .wave {
|
| + border-radius: 50%;
|
| + }
|
| +
|
| + :host(.circle) #background,
|
| + :host(.circle) #waves {
|
| + border-radius: 50%;
|
| + }
|
| +
|
| + :host(.circle) .wave-container {
|
| + overflow: hidden;
|
| + }
|
| + </style>
|
| +
|
| + <div id="background"></div>
|
| + <div id="waves"></div>
|
| + </template>
|
| +</dom-module>
|
| +<script>
|
| + (function() {
|
| + var Utility = {
|
| + distance: function(x1, y1, x2, y2) {
|
| + var xDelta = (x1 - x2);
|
| + var yDelta = (y1 - y2);
|
| +
|
| + return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
|
| + },
|
| +
|
| + now: window.performance && window.performance.now ?
|
| + window.performance.now.bind(window.performance) : Date.now
|
| + };
|
| +
|
| + /**
|
| + * @param {HTMLElement} element
|
| + * @constructor
|
| + */
|
| + function ElementMetrics(element) {
|
| + this.element = element;
|
| + this.width = this.boundingRect.width;
|
| + this.height = this.boundingRect.height;
|
| +
|
| + this.size = Math.max(this.width, this.height);
|
| + }
|
| +
|
| + ElementMetrics.prototype = {
|
| + get boundingRect () {
|
| + return this.element.getBoundingClientRect();
|
| + },
|
| +
|
| + furthestCornerDistanceFrom: function(x, y) {
|
| + var topLeft = Utility.distance(x, y, 0, 0);
|
| + var topRight = Utility.distance(x, y, this.width, 0);
|
| + var bottomLeft = Utility.distance(x, y, 0, this.height);
|
| + var bottomRight = Utility.distance(x, y, this.width, this.height);
|
| +
|
| + return Math.max(topLeft, topRight, bottomLeft, bottomRight);
|
| + }
|
| + };
|
| +
|
| + /**
|
| + * @param {HTMLElement} element
|
| + * @constructor
|
| + */
|
| + function Ripple(element) {
|
| + this.element = element;
|
| + this.color = window.getComputedStyle(element).color;
|
| +
|
| + this.wave = document.createElement('div');
|
| + this.waveContainer = document.createElement('div');
|
| + this.wave.style.backgroundColor = this.color;
|
| + this.wave.classList.add('wave');
|
| + this.waveContainer.classList.add('wave-container');
|
| + Polymer.dom(this.waveContainer).appendChild(this.wave);
|
| +
|
| + this.resetInteractionState();
|
| + }
|
| +
|
| + Ripple.MAX_RADIUS = 300;
|
| +
|
| + Ripple.prototype = {
|
| + get recenters() {
|
| + return this.element.recenters;
|
| + },
|
| +
|
| + get center() {
|
| + return this.element.center;
|
| + },
|
| +
|
| + get mouseDownElapsed() {
|
| + var elapsed;
|
| +
|
| + if (!this.mouseDownStart) {
|
| + return 0;
|
| + }
|
| +
|
| + elapsed = Utility.now() - this.mouseDownStart;
|
| +
|
| + if (this.mouseUpStart) {
|
| + elapsed -= this.mouseUpElapsed;
|
| + }
|
| +
|
| + return elapsed;
|
| + },
|
| +
|
| + get mouseUpElapsed() {
|
| + return this.mouseUpStart ?
|
| + Utility.now () - this.mouseUpStart : 0;
|
| + },
|
| +
|
| + get mouseDownElapsedSeconds() {
|
| + return this.mouseDownElapsed / 1000;
|
| + },
|
| +
|
| + get mouseUpElapsedSeconds() {
|
| + return this.mouseUpElapsed / 1000;
|
| + },
|
| +
|
| + get mouseInteractionSeconds() {
|
| + return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
|
| + },
|
| +
|
| + get initialOpacity() {
|
| + return this.element.initialOpacity;
|
| + },
|
| +
|
| + get opacityDecayVelocity() {
|
| + return this.element.opacityDecayVelocity;
|
| + },
|
| +
|
| + get radius() {
|
| + var width2 = this.containerMetrics.width * this.containerMetrics.width;
|
| + var height2 = this.containerMetrics.height * this.containerMetrics.height;
|
| + var waveRadius = Math.min(
|
| + Math.sqrt(width2 + height2),
|
| + Ripple.MAX_RADIUS
|
| + ) * 1.1 + 5;
|
| +
|
| + var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
|
| + var timeNow = this.mouseInteractionSeconds / duration;
|
| + var size = waveRadius * (1 - Math.pow(80, -timeNow));
|
| +
|
| + return Math.abs(size);
|
| + },
|
| +
|
| + get opacity() {
|
| + if (!this.mouseUpStart) {
|
| + return this.initialOpacity;
|
| + }
|
| +
|
| + return Math.max(
|
| + 0,
|
| + this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
|
| + );
|
| + },
|
| +
|
| + get outerOpacity() {
|
| + // Linear increase in background opacity, capped at the opacity
|
| + // of the wavefront (waveOpacity).
|
| + var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
|
| + var waveOpacity = this.opacity;
|
| +
|
| + return Math.max(
|
| + 0,
|
| + Math.min(outerOpacity, waveOpacity)
|
| + );
|
| + },
|
| +
|
| + get isOpacityFullyDecayed() {
|
| + return this.opacity < 0.01 &&
|
| + this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
|
| + },
|
| +
|
| + get isRestingAtMaxRadius() {
|
| + return this.opacity >= this.initialOpacity &&
|
| + this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
|
| + },
|
| +
|
| + get isAnimationComplete() {
|
| + return this.mouseUpStart ?
|
| + this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
|
| + },
|
| +
|
| + get translationFraction() {
|
| + return Math.min(
|
| + 1,
|
| + this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
|
| + );
|
| + },
|
| +
|
| + get xNow() {
|
| + if (this.xEnd) {
|
| + return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
|
| + }
|
| +
|
| + return this.xStart;
|
| + },
|
| +
|
| + get yNow() {
|
| + if (this.yEnd) {
|
| + return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
|
| + }
|
| +
|
| + return this.yStart;
|
| + },
|
| +
|
| + get isMouseDown() {
|
| + return this.mouseDownStart && !this.mouseUpStart;
|
| + },
|
| +
|
| + resetInteractionState: function() {
|
| + this.maxRadius = 0;
|
| + this.mouseDownStart = 0;
|
| + this.mouseUpStart = 0;
|
| +
|
| + this.xStart = 0;
|
| + this.yStart = 0;
|
| + this.xEnd = 0;
|
| + this.yEnd = 0;
|
| + this.slideDistance = 0;
|
| +
|
| + this.containerMetrics = new ElementMetrics(this.element);
|
| + },
|
| +
|
| + draw: function() {
|
| + var scale;
|
| + var translateString;
|
| + var dx;
|
| + var dy;
|
| +
|
| + this.wave.style.opacity = this.opacity;
|
| +
|
| + scale = this.radius / (this.containerMetrics.size / 2);
|
| + dx = this.xNow - (this.containerMetrics.width / 2);
|
| + dy = this.yNow - (this.containerMetrics.height / 2);
|
| +
|
| +
|
| + // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
|
| + // https://bugs.webkit.org/show_bug.cgi?id=98538
|
| + this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
|
| + this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
|
| + this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
|
| + this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
|
| + },
|
| +
|
| + /** @param {Event=} event */
|
| + downAction: function(event) {
|
| + var xCenter = this.containerMetrics.width / 2;
|
| + var yCenter = this.containerMetrics.height / 2;
|
| +
|
| + this.resetInteractionState();
|
| + this.mouseDownStart = Utility.now();
|
| +
|
| + if (this.center) {
|
| + this.xStart = xCenter;
|
| + this.yStart = yCenter;
|
| + this.slideDistance = Utility.distance(
|
| + this.xStart, this.yStart, this.xEnd, this.yEnd
|
| + );
|
| + } else {
|
| + this.xStart = event ?
|
| + event.detail.x - this.containerMetrics.boundingRect.left :
|
| + this.containerMetrics.width / 2;
|
| + this.yStart = event ?
|
| + event.detail.y - this.containerMetrics.boundingRect.top :
|
| + this.containerMetrics.height / 2;
|
| + }
|
| +
|
| + if (this.recenters) {
|
| + this.xEnd = xCenter;
|
| + this.yEnd = yCenter;
|
| + this.slideDistance = Utility.distance(
|
| + this.xStart, this.yStart, this.xEnd, this.yEnd
|
| + );
|
| + }
|
| +
|
| + this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
|
| + this.xStart,
|
| + this.yStart
|
| + );
|
| +
|
| + this.waveContainer.style.top =
|
| + (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
|
| + this.waveContainer.style.left =
|
| + (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
|
| +
|
| + this.waveContainer.style.width = this.containerMetrics.size + 'px';
|
| + this.waveContainer.style.height = this.containerMetrics.size + 'px';
|
| + },
|
| +
|
| + /** @param {Event=} event */
|
| + upAction: function(event) {
|
| + if (!this.isMouseDown) {
|
| + return;
|
| + }
|
| +
|
| + this.mouseUpStart = Utility.now();
|
| + },
|
| +
|
| + remove: function() {
|
| + Polymer.dom(this.waveContainer.parentNode).removeChild(
|
| + this.waveContainer
|
| + );
|
| + }
|
| + };
|
| +
|
| + Polymer({
|
| + is: 'paper-ripple',
|
| +
|
| + behaviors: [
|
| + Polymer.IronA11yKeysBehavior
|
| + ],
|
| +
|
| + properties: {
|
| + /**
|
| + * The initial opacity set on the wave.
|
| + *
|
| + * @attribute initialOpacity
|
| + * @type number
|
| + * @default 0.25
|
| + */
|
| + initialOpacity: {
|
| + type: Number,
|
| + value: 0.25
|
| + },
|
| +
|
| + /**
|
| + * How fast (opacity per second) the wave fades out.
|
| + *
|
| + * @attribute opacityDecayVelocity
|
| + * @type number
|
| + * @default 0.8
|
| + */
|
| + opacityDecayVelocity: {
|
| + type: Number,
|
| + value: 0.8
|
| + },
|
| +
|
| + /**
|
| + * If true, ripples will exhibit a gravitational pull towards
|
| + * the center of their container as they fade away.
|
| + *
|
| + * @attribute recenters
|
| + * @type boolean
|
| + * @default false
|
| + */
|
| + recenters: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * If true, ripples will center inside its container
|
| + *
|
| + * @attribute recenters
|
| + * @type boolean
|
| + * @default false
|
| + */
|
| + center: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * A list of the visual ripples.
|
| + *
|
| + * @attribute ripples
|
| + * @type Array
|
| + * @default []
|
| + */
|
| + ripples: {
|
| + type: Array,
|
| + value: function() {
|
| + return [];
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * True when there are visible ripples animating within the
|
| + * element.
|
| + */
|
| + animating: {
|
| + type: Boolean,
|
| + readOnly: true,
|
| + reflectToAttribute: true,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * If true, the ripple will remain in the "down" state until `holdDown`
|
| + * is set to false again.
|
| + */
|
| + holdDown: {
|
| + type: Boolean,
|
| + value: false,
|
| + observer: '_holdDownChanged'
|
| + },
|
| +
|
| + /**
|
| + * If true, the ripple will not generate a ripple effect
|
| + * via pointer interaction.
|
| + * Calling ripple's imperative api like `simulatedRipple` will
|
| + * still generate the ripple effect.
|
| + */
|
| + noink: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + _animating: {
|
| + type: Boolean
|
| + },
|
| +
|
| + _boundAnimate: {
|
| + type: Function,
|
| + value: function() {
|
| + return this.animate.bind(this);
|
| + }
|
| + }
|
| + },
|
| +
|
| + get target () {
|
| + return this.keyEventTarget;
|
| + },
|
| +
|
| + keyBindings: {
|
| + 'enter:keydown': '_onEnterKeydown',
|
| + 'space:keydown': '_onSpaceKeydown',
|
| + 'space:keyup': '_onSpaceKeyup'
|
| + },
|
| +
|
| + attached: function() {
|
| + // Set up a11yKeysBehavior to listen to key events on the target,
|
| + // so that space and enter activate the ripple even if the target doesn't
|
| + // handle key events. The key handlers deal with `noink` themselves.
|
| + if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
|
| + this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host;
|
| + } else {
|
| + this.keyEventTarget = this.parentNode;
|
| + }
|
| + var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget);
|
| + this.listen(keyEventTarget, 'up', 'uiUpAction');
|
| + this.listen(keyEventTarget, 'down', 'uiDownAction');
|
| + },
|
| +
|
| + detached: function() {
|
| + this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
|
| + this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
|
| + this.keyEventTarget = null;
|
| + },
|
| +
|
| + get shouldKeepAnimating () {
|
| + for (var index = 0; index < this.ripples.length; ++index) {
|
| + if (!this.ripples[index].isAnimationComplete) {
|
| + return true;
|
| + }
|
| + }
|
| +
|
| + return false;
|
| + },
|
| +
|
| + simulatedRipple: function() {
|
| + this.downAction(null);
|
| +
|
| + // Please see polymer/polymer#1305
|
| + this.async(function() {
|
| + this.upAction();
|
| + }, 1);
|
| + },
|
| +
|
| + /**
|
| + * Provokes a ripple down effect via a UI event,
|
| + * respecting the `noink` property.
|
| + * @param {Event=} event
|
| + */
|
| + uiDownAction: function(event) {
|
| + if (!this.noink) {
|
| + this.downAction(event);
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Provokes a ripple down effect via a UI event,
|
| + * *not* respecting the `noink` property.
|
| + * @param {Event=} event
|
| + */
|
| + downAction: function(event) {
|
| + if (this.holdDown && this.ripples.length > 0) {
|
| + return;
|
| + }
|
| +
|
| + var ripple = this.addRipple();
|
| +
|
| + ripple.downAction(event);
|
| +
|
| + if (!this._animating) {
|
| + this._animating = true;
|
| + this.animate();
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Provokes a ripple up effect via a UI event,
|
| + * respecting the `noink` property.
|
| + * @param {Event=} event
|
| + */
|
| + uiUpAction: function(event) {
|
| + if (!this.noink) {
|
| + this.upAction(event);
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Provokes a ripple up effect via a UI event,
|
| + * *not* respecting the `noink` property.
|
| + * @param {Event=} event
|
| + */
|
| + upAction: function(event) {
|
| + if (this.holdDown) {
|
| + return;
|
| + }
|
| +
|
| + this.ripples.forEach(function(ripple) {
|
| + ripple.upAction(event);
|
| + });
|
| +
|
| + this._animating = true;
|
| + this.animate();
|
| + },
|
| +
|
| + onAnimationComplete: function() {
|
| + this._animating = false;
|
| + this.$.background.style.backgroundColor = null;
|
| + this.fire('transitionend');
|
| + },
|
| +
|
| + addRipple: function() {
|
| + var ripple = new Ripple(this);
|
| +
|
| + Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
|
| + this.$.background.style.backgroundColor = ripple.color;
|
| + this.ripples.push(ripple);
|
| +
|
| + this._setAnimating(true);
|
| +
|
| + return ripple;
|
| + },
|
| +
|
| + removeRipple: function(ripple) {
|
| + var rippleIndex = this.ripples.indexOf(ripple);
|
| +
|
| + if (rippleIndex < 0) {
|
| + return;
|
| + }
|
| +
|
| + this.ripples.splice(rippleIndex, 1);
|
| +
|
| + ripple.remove();
|
| +
|
| + if (!this.ripples.length) {
|
| + this._setAnimating(false);
|
| + }
|
| + },
|
| +
|
| + animate: function() {
|
| + if (!this._animating) {
|
| + return;
|
| + }
|
| + var index;
|
| + var ripple;
|
| +
|
| + for (index = 0; index < this.ripples.length; ++index) {
|
| + ripple = this.ripples[index];
|
| +
|
| + ripple.draw();
|
| +
|
| + this.$.background.style.opacity = ripple.outerOpacity;
|
| +
|
| + if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
|
| + this.removeRipple(ripple);
|
| + }
|
| + }
|
| +
|
| + if (!this.shouldKeepAnimating && this.ripples.length === 0) {
|
| + this.onAnimationComplete();
|
| + } else {
|
| + window.requestAnimationFrame(this._boundAnimate);
|
| + }
|
| + },
|
| +
|
| + _onEnterKeydown: function() {
|
| + this.uiDownAction();
|
| + this.async(this.uiUpAction, 1);
|
| + },
|
| +
|
| + _onSpaceKeydown: function() {
|
| + this.uiDownAction();
|
| + },
|
| +
|
| + _onSpaceKeyup: function() {
|
| + this.uiUpAction();
|
| + },
|
| +
|
| + // note: holdDown does not respect noink since it can be a focus based
|
| + // effect.
|
| + _holdDownChanged: function(newVal, oldVal) {
|
| + if (oldVal === undefined) {
|
| + return;
|
| + }
|
| + if (newVal) {
|
| + this.downAction();
|
| + } else {
|
| + this.upAction();
|
| + }
|
| + }
|
| +
|
| + /**
|
| + Fired when the animation finishes.
|
| + This is useful if you want to wait until
|
| + the ripple animation finishes to perform some action.
|
| +
|
| + @event transitionend
|
| + @param {{node: Object}} detail Contains the animated node.
|
| + */
|
| + });
|
| + })();
|
| +</script>
|
| +<script>
|
| + /**
|
| + * `Polymer.PaperRippleBehavior` dynamically implements a ripple
|
| + * when the element has focus via pointer or keyboard.
|
| + *
|
| + * NOTE: This behavior is intended to be used in conjunction with and after
|
| + * `Polymer.IronButtonState` and `Polymer.IronControlState`.
|
| + *
|
| + * @polymerBehavior Polymer.PaperRippleBehavior
|
| + */
|
| + Polymer.PaperRippleBehavior = {
|
| + properties: {
|
| + /**
|
| + * If true, the element will not produce a ripple effect when interacted
|
| + * with via the pointer.
|
| + */
|
| + noink: {
|
| + type: Boolean,
|
| + observer: '_noinkChanged'
|
| + },
|
| +
|
| + /**
|
| + * @type {Element|undefined}
|
| + */
|
| + _rippleContainer: {
|
| + type: Object,
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Ensures a `<paper-ripple>` element is available when the element is
|
| + * focused.
|
| + */
|
| + _buttonStateChanged: function() {
|
| + if (this.focused) {
|
| + this.ensureRipple();
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * In addition to the functionality provided in `IronButtonState`, ensures
|
| + * a ripple effect is created when the element is in a `pressed` state.
|
| + */
|
| + _downHandler: function(event) {
|
| + Polymer.IronButtonStateImpl._downHandler.call(this, event);
|
| + if (this.pressed) {
|
| + this.ensureRipple(event);
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Ensures this element contains a ripple effect. For startup efficiency
|
| + * the ripple effect is dynamically on demand when needed.
|
| + * @param {!Event=} optTriggeringEvent (optional) event that triggered the
|
| + * ripple.
|
| + */
|
| + ensureRipple: function(optTriggeringEvent) {
|
| + if (!this.hasRipple()) {
|
| + this._ripple = this._createRipple();
|
| + this._ripple.noink = this.noink;
|
| + var rippleContainer = this._rippleContainer || this.root;
|
| + if (rippleContainer) {
|
| + Polymer.dom(rippleContainer).appendChild(this._ripple);
|
| + }
|
| + if (optTriggeringEvent) {
|
| + // Check if the event happened inside of the ripple container
|
| + // Fall back to host instead of the root because distributed text
|
| + // nodes are not valid event targets
|
| + var domContainer = Polymer.dom(this._rippleContainer || this);
|
| + var target = Polymer.dom(optTriggeringEvent).rootTarget;
|
| + if (domContainer.deepContains( /** @type {Node} */(target))) {
|
| + this._ripple.uiDownAction(optTriggeringEvent);
|
| + }
|
| + }
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Returns the `<paper-ripple>` element used by this element to create
|
| + * ripple effects. The element's ripple is created on demand, when
|
| + * necessary, and calling this method will force the
|
| + * ripple to be created.
|
| + */
|
| + getRipple: function() {
|
| + this.ensureRipple();
|
| + return this._ripple;
|
| + },
|
| +
|
| + /**
|
| + * Returns true if this element currently contains a ripple effect.
|
| + * @return {boolean}
|
| + */
|
| + hasRipple: function() {
|
| + return Boolean(this._ripple);
|
| + },
|
| +
|
| + /**
|
| + * Create the element's ripple effect via creating a `<paper-ripple>`.
|
| + * Override this method to customize the ripple element.
|
| + * @return {!PaperRippleElement} Returns a `<paper-ripple>` element.
|
| + */
|
| + _createRipple: function() {
|
| + return /** @type {!PaperRippleElement} */ (
|
| + document.createElement('paper-ripple'));
|
| + },
|
| +
|
| + _noinkChanged: function(noink) {
|
| + if (this.hasRipple()) {
|
| + this._ripple.noink = noink;
|
| + }
|
| + }
|
| + };
|
| +</script>
|
| +<script>
|
| + /**
|
| + * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
|
| + *
|
| + * @polymerBehavior Polymer.PaperInkyFocusBehavior
|
| + */
|
| + Polymer.PaperInkyFocusBehaviorImpl = {
|
| + observers: [
|
| + '_focusedChanged(receivedFocusFromKeyboard)'
|
| + ],
|
| +
|
| + _focusedChanged: function(receivedFocusFromKeyboard) {
|
| + if (receivedFocusFromKeyboard) {
|
| + this.ensureRipple();
|
| + }
|
| + if (this.hasRipple()) {
|
| + this._ripple.holdDown = receivedFocusFromKeyboard;
|
| + }
|
| + },
|
| +
|
| + _createRipple: function() {
|
| + var ripple = Polymer.PaperRippleBehavior._createRipple();
|
| + ripple.id = 'ink';
|
| + ripple.setAttribute('center', '');
|
| + ripple.classList.add('circle');
|
| + return ripple;
|
| + }
|
| + };
|
| +
|
| + /** @polymerBehavior Polymer.PaperInkyFocusBehavior */
|
| + Polymer.PaperInkyFocusBehavior = [
|
| + Polymer.IronButtonState,
|
| + Polymer.IronControlState,
|
| + Polymer.PaperRippleBehavior,
|
| + Polymer.PaperInkyFocusBehaviorImpl
|
| + ];
|
| +</script>
|
| +<script>
|
| + /**
|
| + * Use `Polymer.PaperCheckedElementBehavior` to implement a custom element
|
| + * that has a `checked` property similar to `Polymer.IronCheckedElementBehavior`
|
| + * and is compatible with having a ripple effect.
|
| + * @polymerBehavior Polymer.PaperCheckedElementBehavior
|
| + */
|
| + Polymer.PaperCheckedElementBehaviorImpl = {
|
| + /**
|
| + * Synchronizes the element's checked state with its ripple effect.
|
| + */
|
| + _checkedChanged: function() {
|
| + Polymer.IronCheckedElementBehaviorImpl._checkedChanged.call(this);
|
| + if (this.hasRipple()) {
|
| + if (this.checked) {
|
| + this._ripple.setAttribute('checked', '');
|
| + } else {
|
| + this._ripple.removeAttribute('checked');
|
| + }
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Synchronizes the element's `active` and `checked` state.
|
| + */
|
| + _buttonStateChanged: function() {
|
| + Polymer.PaperRippleBehavior._buttonStateChanged.call(this);
|
| + if (this.disabled) {
|
| + return;
|
| + }
|
| + if (this.isAttached) {
|
| + this.checked = this.active;
|
| + }
|
| + }
|
| + };
|
| +
|
| + /** @polymerBehavior Polymer.PaperCheckedElementBehavior */
|
| + Polymer.PaperCheckedElementBehavior = [
|
| + Polymer.PaperInkyFocusBehavior,
|
| + Polymer.IronCheckedElementBehavior,
|
| + Polymer.PaperCheckedElementBehaviorImpl
|
| + ];
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="paper-checkbox" assetpath="/res/imp/bower_components/paper-checkbox/">
|
| + <template strip-whitespace="">
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + white-space: nowrap;
|
| + cursor: pointer;
|
| + --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
|
| + @apply(--paper-font-common-base);
|
| + line-height: 0;
|
| + -webkit-tap-highlight-color: transparent;
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + :host(:focus) {
|
| + outline: none;
|
| + }
|
| +
|
| + .hidden {
|
| + display: none;
|
| + }
|
| +
|
| + #checkboxContainer {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: var(--calculated-paper-checkbox-size);
|
| + height: var(--calculated-paper-checkbox-size);
|
| + min-width: var(--calculated-paper-checkbox-size);
|
| + margin: var(--paper-checkbox-margin, initial);
|
| + vertical-align: var(--paper-checkbox-vertical-align, middle);
|
| + background-color: var(--paper-checkbox-unchecked-background-color, transparent);
|
| + }
|
| +
|
| + #ink {
|
| + position: absolute;
|
| +
|
| + /* Center the ripple in the checkbox by negative offsetting it by
|
| + * (inkWidth - rippleWidth) / 2 */
|
| + top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
|
| + left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
|
| + width: calc(2.66 * var(--calculated-paper-checkbox-size));
|
| + height: calc(2.66 * var(--calculated-paper-checkbox-size));
|
| + color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
|
| + opacity: 0.6;
|
| + pointer-events: none;
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) #ink {
|
| + right: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
|
| + left: auto;
|
| + }
|
| +
|
| + #ink[checked] {
|
| + color: var(--paper-checkbox-checked-ink-color, --primary-color);
|
| + }
|
| +
|
| + #checkbox {
|
| + position: relative;
|
| + box-sizing: border-box;
|
| + height: 100%;
|
| + border: solid 2px;
|
| + border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
| + border-radius: 2px;
|
| + pointer-events: none;
|
| + -webkit-transition: background-color 140ms, border-color 140ms;
|
| + transition: background-color 140ms, border-color 140ms;
|
| + }
|
| +
|
| + /* checkbox checked animations */
|
| + #checkbox.checked #checkmark {
|
| + -webkit-animation: checkmark-expand 140ms ease-out forwards;
|
| + animation: checkmark-expand 140ms ease-out forwards;
|
| + }
|
| +
|
| + @-webkit-keyframes checkmark-expand {
|
| + 0% {
|
| + -webkit-transform: scale(0, 0) rotate(45deg);
|
| + }
|
| + 100% {
|
| + -webkit-transform: scale(1, 1) rotate(45deg);
|
| + }
|
| + }
|
| +
|
| + @keyframes checkmark-expand {
|
| + 0% {
|
| + transform: scale(0, 0) rotate(45deg);
|
| + }
|
| + 100% {
|
| + transform: scale(1, 1) rotate(45deg);
|
| + }
|
| + }
|
| +
|
| + #checkbox.checked {
|
| + background-color: var(--paper-checkbox-checked-color, --primary-color);
|
| + border-color: var(--paper-checkbox-checked-color, --primary-color);
|
| + }
|
| +
|
| + #checkmark {
|
| + position: absolute;
|
| + width: 36%;
|
| + height: 70%;
|
| + border-style: solid;
|
| + border-top: none;
|
| + border-left: none;
|
| + border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
|
| + border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
|
| + border-color: var(--paper-checkbox-checkmark-color, white);
|
| + -webkit-transform-origin: 97% 86%;
|
| + transform-origin: 97% 86%;
|
| + box-sizing: content-box; /* protect against page-level box-sizing */
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) #checkmark {
|
| + -webkit-transform-origin: 50% 14%;
|
| + transform-origin: 50% 14%;
|
| + }
|
| +
|
| + /* label */
|
| + #checkboxLabel {
|
| + position: relative;
|
| + display: inline-block;
|
| + vertical-align: middle;
|
| + padding-left: var(--paper-checkbox-label-spacing, 8px);
|
| + white-space: normal;
|
| + line-height: normal;
|
| + color: var(--paper-checkbox-label-color, --primary-text-color);
|
| + @apply(--paper-checkbox-label);
|
| + }
|
| +
|
| + :host([checked]) #checkboxLabel {
|
| + color: var(--paper-checkbox-label-checked-color, --paper-checkbox-label-color);
|
| + @apply(--paper-checkbox-label-checked);
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) #checkboxLabel {
|
| + padding-right: var(--paper-checkbox-label-spacing, 8px);
|
| + padding-left: 0;
|
| + }
|
| +
|
| + #checkboxLabel[hidden] {
|
| + display: none;
|
| + }
|
| +
|
| + /* disabled state */
|
| +
|
| + :host([disabled]) #checkbox {
|
| + opacity: 0.5;
|
| + border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
| + }
|
| +
|
| + :host([disabled][checked]) #checkbox {
|
| + background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
| + opacity: 0.5;
|
| + }
|
| +
|
| + :host([disabled]) #checkboxLabel {
|
| + opacity: 0.65;
|
| + }
|
| +
|
| + /* invalid state */
|
| + #checkbox.invalid:not(.checked) {
|
| + border-color: var(--paper-checkbox-error-color, --error-color);
|
| + }
|
| + </style>
|
| +
|
| + <div id="checkboxContainer">
|
| + <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
|
| + <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
|
| + </div>
|
| + </div>
|
| +
|
| + <div id="checkboxLabel"><content></content></div>
|
| + </template>
|
| +
|
| + <script>
|
| + Polymer({
|
| + is: 'paper-checkbox',
|
| +
|
| + behaviors: [
|
| + Polymer.PaperCheckedElementBehavior
|
| + ],
|
| +
|
| + hostAttributes: {
|
| + role: 'checkbox',
|
| + 'aria-checked': false,
|
| + tabindex: 0
|
| + },
|
| +
|
| + properties: {
|
| + /**
|
| + * Fired when the checked state changes due to user interaction.
|
| + *
|
| + * @event change
|
| + */
|
| +
|
| + /**
|
| + * Fired when the checked state changes.
|
| + *
|
| + * @event iron-change
|
| + */
|
| + ariaActiveAttribute: {
|
| + type: String,
|
| + value: 'aria-checked'
|
| + }
|
| + },
|
| +
|
| + _computeCheckboxClass: function(checked, invalid) {
|
| + var className = '';
|
| + if (checked) {
|
| + className += 'checked ';
|
| + }
|
| + if (invalid) {
|
| + className += 'invalid';
|
| + }
|
| + return className;
|
| + },
|
| +
|
| + _computeCheckmarkClass: function(checked) {
|
| + return checked ? '' : 'hidden';
|
| + },
|
| +
|
| + // create ripple inside the checkboxContainer
|
| + _createRipple: function() {
|
| + this._rippleContainer = this.$.checkboxContainer;
|
| + return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
|
| + }
|
| +
|
| + });
|
| + </script>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="paper-icon-button" assetpath="/res/imp/bower_components/paper-icon-button/">
|
| + <template strip-whitespace="">
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + position: relative;
|
| + padding: 8px;
|
| + outline: none;
|
| + -webkit-user-select: none;
|
| + -moz-user-select: none;
|
| + -ms-user-select: none;
|
| + user-select: none;
|
| + cursor: pointer;
|
| + z-index: 0;
|
| + line-height: 1;
|
| +
|
| + width: 40px;
|
| + height: 40px;
|
| +
|
| + /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
| + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
| + -webkit-tap-highlight-color: transparent;
|
| +
|
| + /* Because of polymer/2558, this style has lower specificity than * */
|
| + box-sizing: border-box !important;
|
| +
|
| + @apply(--paper-icon-button);
|
| + }
|
| +
|
| + :host #ink {
|
| + color: var(--paper-icon-button-ink-color, --primary-text-color);
|
| + opacity: 0.6;
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + color: var(--paper-icon-button-disabled-text, --disabled-text-color);
|
| + pointer-events: none;
|
| + cursor: auto;
|
| +
|
| + @apply(--paper-icon-button-disabled);
|
| + }
|
| +
|
| + :host(:hover) {
|
| + @apply(--paper-icon-button-hover);
|
| + }
|
| +
|
| + iron-icon {
|
| + --iron-icon-width: 100%;
|
| + --iron-icon-height: 100%;
|
| + }
|
| + </style>
|
| +
|
| + <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
| + </template>
|
| +
|
| + <script>
|
| + Polymer({
|
| + is: 'paper-icon-button',
|
| +
|
| + hostAttributes: {
|
| + role: 'button',
|
| + tabindex: '0'
|
| + },
|
| +
|
| + behaviors: [
|
| + Polymer.PaperInkyFocusBehavior
|
| + ],
|
| +
|
| + properties: {
|
| + /**
|
| + * The URL of an image for the icon. If the src property is specified,
|
| + * the icon property should not be.
|
| + */
|
| + src: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Specifies the icon name or index in the set of icons available in
|
| + * the icon's icon set. If the icon property is specified,
|
| + * the src property should not be.
|
| + */
|
| + icon: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Specifies the alternate text for the button, for accessibility.
|
| + */
|
| + alt: {
|
| + type: String,
|
| + observer: "_altChanged"
|
| + }
|
| + },
|
| +
|
| + _altChanged: function(newValue, oldValue) {
|
| + var label = this.getAttribute('aria-label');
|
| +
|
| + // Don't stomp over a user-set aria-label.
|
| + if (!label || oldValue == label) {
|
| + this.setAttribute('aria-label', newValue);
|
| + }
|
| + }
|
| + });
|
| + </script>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="iron-a11y-announcer" assetpath="/res/imp/bower_components/iron-a11y-announcer/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + position: fixed;
|
| + clip: rect(0px,0px,0px,0px);
|
| + }
|
| + </style>
|
| + <div aria-live$="[[mode]]">[[_text]]</div>
|
| + </template>
|
| +
|
| + <script>
|
| +
|
| + (function() {
|
| + 'use strict';
|
| +
|
| + Polymer.IronA11yAnnouncer = Polymer({
|
| + is: 'iron-a11y-announcer',
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * The value of mode is used to set the `aria-live` attribute
|
| + * for the element that will be announced. Valid values are: `off`,
|
| + * `polite` and `assertive`.
|
| + */
|
| + mode: {
|
| + type: String,
|
| + value: 'polite'
|
| + },
|
| +
|
| + _text: {
|
| + type: String,
|
| + value: ''
|
| + }
|
| + },
|
| +
|
| + created: function() {
|
| + if (!Polymer.IronA11yAnnouncer.instance) {
|
| + Polymer.IronA11yAnnouncer.instance = this;
|
| + }
|
| +
|
| + document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
|
| + },
|
| +
|
| + /**
|
| + * Cause a text string to be announced by screen readers.
|
| + *
|
| + * @param {string} text The text that should be announced.
|
| + */
|
| + announce: function(text) {
|
| + this._text = '';
|
| + this.async(function() {
|
| + this._text = text;
|
| + }, 100);
|
| + },
|
| +
|
| + _onIronAnnounce: function(event) {
|
| + if (event.detail && event.detail.text) {
|
| + this.announce(event.detail.text);
|
| + }
|
| + }
|
| + });
|
| +
|
| + Polymer.IronA11yAnnouncer.instance = null;
|
| +
|
| + Polymer.IronA11yAnnouncer.requestAvailability = function() {
|
| + if (!Polymer.IronA11yAnnouncer.instance) {
|
| + Polymer.IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer');
|
| + }
|
| +
|
| + document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
|
| + };
|
| + })();
|
| +
|
| + </script>
|
| +</dom-module>
|
| +<script>
|
| +
|
| +/*
|
| +`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
|
| +to `<input>`.
|
| +
|
| +### Two-way binding
|
| +
|
| +By default you can only get notified of changes to an `input`'s `value` due to user input:
|
| +
|
| + <input value="{{myValue::input}}">
|
| +
|
| +`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
|
| +for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
|
| +
|
| + <input is="iron-input" bind-value="{{myValue}}">
|
| +
|
| +### Custom validators
|
| +
|
| +You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
|
| +
|
| + <input is="iron-input" validator="my-custom-validator">
|
| +
|
| +### Stopping invalid input
|
| +
|
| +It may be desirable to only allow users to enter certain characters. You can use the
|
| +`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
|
| +is separate from validation, and `allowed-pattern` does not affect how the input is validated.
|
| +
|
| + <!-- only allow characters that match [0-9] -->
|
| + <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
|
| +
|
| +@hero hero.svg
|
| +@demo demo/index.html
|
| +*/
|
| +
|
| + Polymer({
|
| +
|
| + is: 'iron-input',
|
| +
|
| + extends: 'input',
|
| +
|
| + behaviors: [
|
| + Polymer.IronValidatableBehavior
|
| + ],
|
| +
|
| + properties: {
|
| +
|
| + /**
|
| + * Use this property instead of `value` for two-way data binding.
|
| + */
|
| + bindValue: {
|
| + observer: '_bindValueChanged',
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Set to true to prevent the user from entering invalid input. If `allowedPattern` is set,
|
| + * any character typed by the user will be matched against that pattern, and rejected if it's not a match.
|
| + * Pasted input will have each character checked individually; if any character
|
| + * doesn't match `allowedPattern`, the entire pasted string will be rejected.
|
| + * If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`).
|
| + */
|
| + preventInvalidInput: {
|
| + type: Boolean
|
| + },
|
| +
|
| + /**
|
| + * Regular expression that list the characters allowed as input.
|
| + * This pattern represents the allowed characters for the field; as the user inputs text,
|
| + * each individual character will be checked against the pattern (rather than checking
|
| + * the entire value as a whole). The recommended format should be a list of allowed characters;
|
| + * for example, `[a-zA-Z0-9.+-!;:]`
|
| + */
|
| + allowedPattern: {
|
| + type: String,
|
| + observer: "_allowedPatternChanged"
|
| + },
|
| +
|
| + _previousValidInput: {
|
| + type: String,
|
| + value: ''
|
| + },
|
| +
|
| + _patternAlreadyChecked: {
|
| + type: Boolean,
|
| + value: false
|
| + }
|
| +
|
| + },
|
| +
|
| + listeners: {
|
| + 'input': '_onInput',
|
| + 'keypress': '_onKeypress'
|
| + },
|
| +
|
| + /** @suppress {checkTypes} */
|
| + registered: function() {
|
| + // Feature detect whether we need to patch dispatchEvent (i.e. on FF and IE).
|
| + if (!this._canDispatchEventOnDisabled()) {
|
| + this._origDispatchEvent = this.dispatchEvent;
|
| + this.dispatchEvent = this._dispatchEventFirefoxIE;
|
| + }
|
| + },
|
| +
|
| + created: function() {
|
| + Polymer.IronA11yAnnouncer.requestAvailability();
|
| + },
|
| +
|
| + _canDispatchEventOnDisabled: function() {
|
| + var input = document.createElement('input');
|
| + var canDispatch = false;
|
| + input.disabled = true;
|
| +
|
| + input.addEventListener('feature-check-dispatch-event', function() {
|
| + canDispatch = true;
|
| + });
|
| +
|
| + try {
|
| + input.dispatchEvent(new Event('feature-check-dispatch-event'));
|
| + } catch(e) {}
|
| +
|
| + return canDispatch;
|
| + },
|
| +
|
| + _dispatchEventFirefoxIE: function() {
|
| + // Due to Firefox bug, events fired on disabled form controls can throw
|
| + // errors; furthermore, neither IE nor Firefox will actually dispatch
|
| + // events from disabled form controls; as such, we toggle disable around
|
| + // the dispatch to allow notifying properties to notify
|
| + // See issue #47 for details
|
| + var disabled = this.disabled;
|
| + this.disabled = false;
|
| + this._origDispatchEvent.apply(this, arguments);
|
| + this.disabled = disabled;
|
| + },
|
| +
|
| + get _patternRegExp() {
|
| + var pattern;
|
| + if (this.allowedPattern) {
|
| + pattern = new RegExp(this.allowedPattern);
|
| + } else {
|
| + switch (this.type) {
|
| + case 'number':
|
| + pattern = /[0-9.,e-]/;
|
| + break;
|
| + }
|
| + }
|
| + return pattern;
|
| + },
|
| +
|
| + ready: function() {
|
| + this.bindValue = this.value;
|
| + },
|
| +
|
| + /**
|
| + * @suppress {checkTypes}
|
| + */
|
| + _bindValueChanged: function() {
|
| + if (this.value !== this.bindValue) {
|
| + this.value = !(this.bindValue || this.bindValue === 0 || this.bindValue === false) ? '' : this.bindValue;
|
| + }
|
| + // manually notify because we don't want to notify until after setting value
|
| + this.fire('bind-value-changed', {value: this.bindValue});
|
| + },
|
| +
|
| + _allowedPatternChanged: function() {
|
| + // Force to prevent invalid input when an `allowed-pattern` is set
|
| + this.preventInvalidInput = this.allowedPattern ? true : false;
|
| + },
|
| +
|
| + _onInput: function() {
|
| + // Need to validate each of the characters pasted if they haven't
|
| + // been validated inside `_onKeypress` already.
|
| + if (this.preventInvalidInput && !this._patternAlreadyChecked) {
|
| + var valid = this._checkPatternValidity();
|
| + if (!valid) {
|
| + this._announceInvalidCharacter('Invalid string of characters not entered.');
|
| + this.value = this._previousValidInput;
|
| + }
|
| + }
|
| +
|
| + this.bindValue = this.value;
|
| + this._previousValidInput = this.value;
|
| + this._patternAlreadyChecked = false;
|
| + },
|
| +
|
| + _isPrintable: function(event) {
|
| + // What a control/printable character is varies wildly based on the browser.
|
| + // - most control characters (arrows, backspace) do not send a `keypress` event
|
| + // in Chrome, but the *do* on Firefox
|
| + // - in Firefox, when they do send a `keypress` event, control chars have
|
| + // a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
|
| + // - printable characters always send a keypress event.
|
| + // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
|
| + // always matches the charCode.
|
| + // None of this makes any sense.
|
| +
|
| + // For these keys, ASCII code == browser keycode.
|
| + var anyNonPrintable =
|
| + (event.keyCode == 8) || // backspace
|
| + (event.keyCode == 9) || // tab
|
| + (event.keyCode == 13) || // enter
|
| + (event.keyCode == 27); // escape
|
| +
|
| + // For these keys, make sure it's a browser keycode and not an ASCII code.
|
| + var mozNonPrintable =
|
| + (event.keyCode == 19) || // pause
|
| + (event.keyCode == 20) || // caps lock
|
| + (event.keyCode == 45) || // insert
|
| + (event.keyCode == 46) || // delete
|
| + (event.keyCode == 144) || // num lock
|
| + (event.keyCode == 145) || // scroll lock
|
| + (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, home, arrows
|
| + (event.keyCode > 111 && event.keyCode < 124); // fn keys
|
| +
|
| + return !anyNonPrintable && !(event.charCode == 0 && mozNonPrintable);
|
| + },
|
| +
|
| + _onKeypress: function(event) {
|
| + if (!this.preventInvalidInput && this.type !== 'number') {
|
| + return;
|
| + }
|
| + var regexp = this._patternRegExp;
|
| + if (!regexp) {
|
| + return;
|
| + }
|
| +
|
| + // Handle special keys and backspace
|
| + if (event.metaKey || event.ctrlKey || event.altKey)
|
| + return;
|
| +
|
| + // Check the pattern either here or in `_onInput`, but not in both.
|
| + this._patternAlreadyChecked = true;
|
| +
|
| + var thisChar = String.fromCharCode(event.charCode);
|
| + if (this._isPrintable(event) && !regexp.test(thisChar)) {
|
| + event.preventDefault();
|
| + this._announceInvalidCharacter('Invalid character ' + thisChar + ' not entered.');
|
| + }
|
| + },
|
| +
|
| + _checkPatternValidity: function() {
|
| + var regexp = this._patternRegExp;
|
| + if (!regexp) {
|
| + return true;
|
| + }
|
| + for (var i = 0; i < this.value.length; i++) {
|
| + if (!regexp.test(this.value[i])) {
|
| + return false;
|
| + }
|
| + }
|
| + return true;
|
| + },
|
| +
|
| + /**
|
| + * Returns true if `value` is valid. The validator provided in `validator` will be used first,
|
| + * then any constraints.
|
| + * @return {boolean} True if the value is valid.
|
| + */
|
| + validate: function() {
|
| + // First, check what the browser thinks. Some inputs (like type=number)
|
| + // behave weirdly and will set the value to "" if something invalid is
|
| + // entered, but will set the validity correctly.
|
| + var valid = this.checkValidity();
|
| +
|
| + // Only do extra checking if the browser thought this was valid.
|
| + if (valid) {
|
| + // Empty, required input is invalid
|
| + if (this.required && this.value === '') {
|
| + valid = false;
|
| + } else if (this.hasValidator()) {
|
| + valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
|
| + }
|
| + }
|
| +
|
| + this.invalid = !valid;
|
| + this.fire('iron-input-validate');
|
| + return valid;
|
| + },
|
| +
|
| + _announceInvalidCharacter: function(message) {
|
| + this.fire('iron-announce', { text: message });
|
| + }
|
| + });
|
| +
|
| + /*
|
| + The `iron-input-validate` event is fired whenever `validate()` is called.
|
| + @event iron-input-validate
|
| + */
|
| +
|
| +</script>
|
| +<script>
|
| +
|
| + // Generate unique, monotonically increasing IDs for labels (needed by
|
| + // aria-labelledby) and add-ons.
|
| + Polymer.PaperInputHelper = {};
|
| + Polymer.PaperInputHelper.NextLabelID = 1;
|
| + Polymer.PaperInputHelper.NextAddonID = 1;
|
| +
|
| + /**
|
| + * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
|
| + * behavior is implemented by `<paper-input>`. It exposes a number of properties from
|
| + * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
|
| + * template.
|
| + *
|
| + * The input element can be accessed by the `inputElement` property if you need to access
|
| + * properties or methods that are not exposed.
|
| + * @polymerBehavior Polymer.PaperInputBehavior
|
| + */
|
| + Polymer.PaperInputBehaviorImpl = {
|
| +
|
| + properties: {
|
| + /**
|
| + * Fired when the input changes due to user interaction.
|
| + *
|
| + * @event change
|
| + */
|
| +
|
| + /**
|
| + * The label for this input. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * `<label>`'s content and `hidden` property, e.g.
|
| + * `<label hidden$="[[!label]]">[[label]]</label>` in your `template`
|
| + */
|
| + label: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The value for this input. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<input is="iron-input">`'s `bindValue`
|
| + * property, or the value property of your input that is `notify:true`.
|
| + */
|
| + value: {
|
| + notify: true,
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Set to true to disable this input. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * both the `<paper-input-container>`'s and the input's `disabled` property.
|
| + */
|
| + disabled: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * Returns true if the value is invalid. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to both the
|
| + * `<paper-input-container>`'s and the input's `invalid` property.
|
| + *
|
| + * If `autoValidate` is true, the `invalid` attribute is managed automatically,
|
| + * which can clobber attempts to manage it manually.
|
| + */
|
| + invalid: {
|
| + type: Boolean,
|
| + value: false,
|
| + notify: true
|
| + },
|
| +
|
| + /**
|
| + * Set to true to prevent the user from entering invalid input. If you're
|
| + * using PaperInputBehavior to implement your own paper-input-like element,
|
| + * bind this to `<input is="iron-input">`'s `preventInvalidInput` property.
|
| + */
|
| + preventInvalidInput: {
|
| + type: Boolean
|
| + },
|
| +
|
| + /**
|
| + * Set this to specify the pattern allowed by `preventInvalidInput`. If
|
| + * you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `allowedPattern`
|
| + * property.
|
| + */
|
| + allowedPattern: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The type of the input. The supported types are `text`, `number` and `password`.
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like element,
|
| + * bind this to the `<input is="iron-input">`'s `type` property.
|
| + */
|
| + type: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The datalist of the input (if any). This should match the id of an existing `<datalist>`.
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `list` property.
|
| + */
|
| + list: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * A pattern to validate the `input` with. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<input is="iron-input">`'s `pattern` property.
|
| + */
|
| + pattern: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Set to true to mark the input as required. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<input is="iron-input">`'s `required` property.
|
| + */
|
| + required: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * The error message to display when the input is invalid. If you're using
|
| + * PaperInputBehavior to implement your own paper-input-like element,
|
| + * bind this to the `<paper-input-error>`'s content, if using.
|
| + */
|
| + errorMessage: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Set to true to show a character counter.
|
| + */
|
| + charCounter: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * Set to true to disable the floating label. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<paper-input-container>`'s `noLabelFloat` property.
|
| + */
|
| + noLabelFloat: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * Set to true to always float the label. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<paper-input-container>`'s `alwaysFloatLabel` property.
|
| + */
|
| + alwaysFloatLabel: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * Set to true to auto-validate the input value. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<paper-input-container>`'s `autoValidate` property.
|
| + */
|
| + autoValidate: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * Name of the validator to use. If you're using PaperInputBehavior to
|
| + * implement your own paper-input-like element, bind this to
|
| + * the `<input is="iron-input">`'s `validator` property.
|
| + */
|
| + validator: {
|
| + type: String
|
| + },
|
| +
|
| + // HTMLInputElement attributes for binding if needed
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `autocomplete` property.
|
| + */
|
| + autocomplete: {
|
| + type: String,
|
| + value: 'off'
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `autofocus` property.
|
| + */
|
| + autofocus: {
|
| + type: Boolean,
|
| + observer: '_autofocusChanged'
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `inputmode` property.
|
| + */
|
| + inputmode: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The minimum length of the input value.
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `minlength` property.
|
| + */
|
| + minlength: {
|
| + type: Number
|
| + },
|
| +
|
| + /**
|
| + * The maximum length of the input value.
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `maxlength` property.
|
| + */
|
| + maxlength: {
|
| + type: Number
|
| + },
|
| +
|
| + /**
|
| + * The minimum (numeric or date-time) input value.
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `min` property.
|
| + */
|
| + min: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The maximum (numeric or date-time) input value.
|
| + * Can be a String (e.g. `"2000-1-1"`) or a Number (e.g. `2`).
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `max` property.
|
| + */
|
| + max: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * Limits the numeric or date-time increments.
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `step` property.
|
| + */
|
| + step: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `name` property.
|
| + */
|
| + name: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * A placeholder string in addition to the label. If this is set, the label will always float.
|
| + */
|
| + placeholder: {
|
| + type: String,
|
| + // need to set a default so _computeAlwaysFloatLabel is run
|
| + value: ''
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `readonly` property.
|
| + */
|
| + readonly: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `size` property.
|
| + */
|
| + size: {
|
| + type: Number
|
| + },
|
| +
|
| + // Nonstandard attributes for binding if needed
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `autocapitalize` property.
|
| + */
|
| + autocapitalize: {
|
| + type: String,
|
| + value: 'none'
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `autocorrect` property.
|
| + */
|
| + autocorrect: {
|
| + type: String,
|
| + value: 'off'
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `autosave` property,
|
| + * used with type=search.
|
| + */
|
| + autosave: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `results` property,
|
| + * used with type=search.
|
| + */
|
| + results: {
|
| + type: Number
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the `<input is="iron-input">`'s `accept` property,
|
| + * used with type=file.
|
| + */
|
| + accept: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * If you're using PaperInputBehavior to implement your own paper-input-like
|
| + * element, bind this to the`<input is="iron-input">`'s `multiple` property,
|
| + * used with type=file.
|
| + */
|
| + multiple: {
|
| + type: Boolean
|
| + },
|
| +
|
| + _ariaDescribedBy: {
|
| + type: String,
|
| + value: ''
|
| + },
|
| +
|
| + _ariaLabelledBy: {
|
| + type: String,
|
| + value: ''
|
| + }
|
| +
|
| + },
|
| +
|
| + listeners: {
|
| + 'addon-attached': '_onAddonAttached',
|
| + },
|
| +
|
| + keyBindings: {
|
| + 'shift+tab:keydown': '_onShiftTabDown'
|
| + },
|
| +
|
| + hostAttributes: {
|
| + tabindex: 0
|
| + },
|
| +
|
| + /**
|
| + * Returns a reference to the input element.
|
| + */
|
| + get inputElement() {
|
| + return this.$.input;
|
| + },
|
| +
|
| + /**
|
| + * Returns a reference to the focusable element.
|
| + */
|
| + get _focusableElement() {
|
| + return this.inputElement;
|
| + },
|
| +
|
| + registered: function() {
|
| + // These types have some default placeholder text; overlapping
|
| + // the label on top of it looks terrible. Auto-float the label in this case.
|
| + this._typesThatHaveText = ["date", "datetime", "datetime-local", "month",
|
| + "time", "week", "file"];
|
| + },
|
| +
|
| + attached: function() {
|
| + this._updateAriaLabelledBy();
|
| +
|
| + if (this.inputElement &&
|
| + this._typesThatHaveText.indexOf(this.inputElement.type) !== -1) {
|
| + this.alwaysFloatLabel = true;
|
| + }
|
| + },
|
| +
|
| + _appendStringWithSpace: function(str, more) {
|
| + if (str) {
|
| + str = str + ' ' + more;
|
| + } else {
|
| + str = more;
|
| + }
|
| + return str;
|
| + },
|
| +
|
| + _onAddonAttached: function(event) {
|
| + var target = event.path ? event.path[0] : event.target;
|
| + if (target.id) {
|
| + this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
|
| + } else {
|
| + var id = 'paper-input-add-on-' + Polymer.PaperInputHelper.NextAddonID++;
|
| + target.id = id;
|
| + this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Validates the input element and sets an error style if needed.
|
| + *
|
| + * @return {boolean}
|
| + */
|
| + validate: function() {
|
| + return this.inputElement.validate();
|
| + },
|
| +
|
| + /**
|
| + * Forward focus to inputElement. Overriden from IronControlState.
|
| + */
|
| + _focusBlurHandler: function(event) {
|
| + Polymer.IronControlState._focusBlurHandler.call(this, event);
|
| +
|
| + // Forward the focus to the nested input.
|
| + if (this.focused && !this._shiftTabPressed)
|
| + this._focusableElement.focus();
|
| + },
|
| +
|
| + /**
|
| + * Handler that is called when a shift+tab keypress is detected by the menu.
|
| + *
|
| + * @param {CustomEvent} event A key combination event.
|
| + */
|
| + _onShiftTabDown: function(event) {
|
| + var oldTabIndex = this.getAttribute('tabindex');
|
| + this._shiftTabPressed = true;
|
| + this.setAttribute('tabindex', '-1');
|
| + this.async(function() {
|
| + this.setAttribute('tabindex', oldTabIndex);
|
| + this._shiftTabPressed = false;
|
| + }, 1);
|
| + },
|
| +
|
| + /**
|
| + * If `autoValidate` is true, then validates the element.
|
| + */
|
| + _handleAutoValidate: function() {
|
| + if (this.autoValidate)
|
| + this.validate();
|
| + },
|
| +
|
| + /**
|
| + * Restores the cursor to its original position after updating the value.
|
| + * @param {string} newValue The value that should be saved.
|
| + */
|
| + updateValueAndPreserveCaret: function(newValue) {
|
| + // Not all elements might have selection, and even if they have the
|
| + // right properties, accessing them might throw an exception (like for
|
| + // <input type=number>)
|
| + try {
|
| + var start = this.inputElement.selectionStart;
|
| + this.value = newValue;
|
| +
|
| + // The cursor automatically jumps to the end after re-setting the value,
|
| + // so restore it to its original position.
|
| + this.inputElement.selectionStart = start;
|
| + this.inputElement.selectionEnd = start;
|
| + } catch (e) {
|
| + // Just set the value and give up on the caret.
|
| + this.value = newValue;
|
| + }
|
| + },
|
| +
|
| + _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
|
| + return placeholder || alwaysFloatLabel;
|
| + },
|
| +
|
| + _updateAriaLabelledBy: function() {
|
| + var label = Polymer.dom(this.root).querySelector('label');
|
| + if (!label) {
|
| + this._ariaLabelledBy = '';
|
| + return;
|
| + }
|
| + var labelledBy;
|
| + if (label.id) {
|
| + labelledBy = label.id;
|
| + } else {
|
| + labelledBy = 'paper-input-label-' + Polymer.PaperInputHelper.NextLabelID++;
|
| + label.id = labelledBy;
|
| + }
|
| + this._ariaLabelledBy = labelledBy;
|
| + },
|
| +
|
| + _onChange:function(event) {
|
| + // In the Shadow DOM, the `change` event is not leaked into the
|
| + // ancestor tree, so we must do this manually.
|
| + // See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-not-leaked-into-ancestor-trees.
|
| + if (this.shadowRoot) {
|
| + this.fire(event.type, {sourceEvent: event}, {
|
| + node: this,
|
| + bubbles: event.bubbles,
|
| + cancelable: event.cancelable
|
| + });
|
| + }
|
| + },
|
| +
|
| + _autofocusChanged: function() {
|
| + // Firefox doesn't respect the autofocus attribute if it's applied after
|
| + // the page is loaded (Chrome/WebKit do respect it), preventing an
|
| + // autofocus attribute specified in markup from taking effect when the
|
| + // element is upgraded. As a workaround, if the autofocus property is set,
|
| + // and the focus hasn't already been moved elsewhere, we take focus.
|
| + if (this.autofocus && this._focusableElement) {
|
| +
|
| + // In IE 11, the default document.activeElement can be the page's
|
| + // outermost html element, but there are also cases (under the
|
| + // polyfill?) in which the activeElement is not a real HTMLElement, but
|
| + // just a plain object. We identify the latter case as having no valid
|
| + // activeElement.
|
| + var activeElement = document.activeElement;
|
| + var isActiveElementValid = activeElement instanceof HTMLElement;
|
| +
|
| + // Has some other element has already taken the focus?
|
| + var isSomeElementActive = isActiveElementValid &&
|
| + activeElement !== document.body &&
|
| + activeElement !== document.documentElement; /* IE 11 */
|
| + if (!isSomeElementActive) {
|
| + // No specific element has taken the focus yet, so we can take it.
|
| + this._focusableElement.focus();
|
| + }
|
| + }
|
| + }
|
| + }
|
| +
|
| + /** @polymerBehavior */
|
| + Polymer.PaperInputBehavior = [
|
| + Polymer.IronControlState,
|
| + Polymer.IronA11yKeysBehavior,
|
| + Polymer.PaperInputBehaviorImpl
|
| + ];
|
| +</script>
|
| +<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
|
| +<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
|
| +<style is="custom-style">
|
| +
|
| + :root {
|
| +
|
| + /* Shared Styles */
|
| + --paper-font-common-base: {
|
| + font-family: 'Roboto', 'Noto', sans-serif;
|
| + -webkit-font-smoothing: antialiased;
|
| + };
|
| +
|
| + --paper-font-common-code: {
|
| + font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
| + -webkit-font-smoothing: antialiased;
|
| + };
|
| +
|
| + --paper-font-common-expensive-kerning: {
|
| + text-rendering: optimizeLegibility;
|
| + };
|
| +
|
| + --paper-font-common-nowrap: {
|
| + white-space: nowrap;
|
| + overflow: hidden;
|
| + text-overflow: ellipsis;
|
| + };
|
| +
|
| + /* Material Font Styles */
|
| +
|
| + --paper-font-display4: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 112px;
|
| + font-weight: 300;
|
| + letter-spacing: -.044em;
|
| + line-height: 120px;
|
| + };
|
| +
|
| + --paper-font-display3: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 56px;
|
| + font-weight: 400;
|
| + letter-spacing: -.026em;
|
| + line-height: 60px;
|
| + };
|
| +
|
| + --paper-font-display2: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 45px;
|
| + font-weight: 400;
|
| + letter-spacing: -.018em;
|
| + line-height: 48px;
|
| + };
|
| +
|
| + --paper-font-display1: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 34px;
|
| + font-weight: 400;
|
| + letter-spacing: -.01em;
|
| + line-height: 40px;
|
| + };
|
| +
|
| + --paper-font-headline: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 24px;
|
| + font-weight: 400;
|
| + letter-spacing: -.012em;
|
| + line-height: 32px;
|
| + };
|
| +
|
| + --paper-font-title: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 20px;
|
| + font-weight: 500;
|
| + line-height: 28px;
|
| + };
|
| +
|
| + --paper-font-subhead: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 16px;
|
| + font-weight: 400;
|
| + line-height: 24px;
|
| + };
|
| +
|
| + --paper-font-body2: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + line-height: 24px;
|
| + };
|
| +
|
| + --paper-font-body1: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 400;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + --paper-font-caption: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 12px;
|
| + font-weight: 400;
|
| + letter-spacing: 0.011em;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + --paper-font-menu: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 13px;
|
| + font-weight: 500;
|
| + line-height: 24px;
|
| + };
|
| +
|
| + --paper-font-button: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + letter-spacing: 0.018em;
|
| + line-height: 24px;
|
| + text-transform: uppercase;
|
| + };
|
| +
|
| + --paper-font-code2: {
|
| + @apply(--paper-font-common-code);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 700;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + --paper-font-code1: {
|
| + @apply(--paper-font-common-code);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + }
|
| +
|
| +</style>
|
| +<script>
|
| +
|
| + /**
|
| + * Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-container>`. A
|
| + * add-on appears below the input, and may display information based on the input value and
|
| + * validity such as a character counter or an error message.
|
| + * @polymerBehavior
|
| + */
|
| + Polymer.PaperInputAddonBehavior = {
|
| +
|
| + hostAttributes: {
|
| + 'add-on': ''
|
| + },
|
| +
|
| + attached: function() {
|
| + this.fire('addon-attached');
|
| + },
|
| +
|
| + /**
|
| + * The function called by `<paper-input-container>` when the input value or validity changes.
|
| + * @param {{
|
| + * inputElement: (Element|undefined),
|
| + * value: (string|undefined),
|
| + * invalid: boolean
|
| + * }} state -
|
| + * inputElement: The input element.
|
| + * value: The input value.
|
| + * invalid: True if the input value is invalid.
|
| + */
|
| + update: function(state) {
|
| + }
|
| +
|
| + };
|
| +
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="paper-input-char-counter" assetpath="/res/imp/bower_components/paper-input/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + float: right;
|
| +
|
| + @apply(--paper-font-caption);
|
| + @apply(--paper-input-char-counter);
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) {
|
| + float: left;
|
| + }
|
| + </style>
|
| +
|
| + <span>[[_charCounterStr]]</span>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<script>
|
| + Polymer({
|
| + is: 'paper-input-char-counter',
|
| +
|
| + behaviors: [
|
| + Polymer.PaperInputAddonBehavior
|
| + ],
|
| +
|
| + properties: {
|
| + _charCounterStr: {
|
| + type: String,
|
| + value: '0'
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * This overrides the update function in PaperInputAddonBehavior.
|
| + * @param {{
|
| + * inputElement: (Element|undefined),
|
| + * value: (string|undefined),
|
| + * invalid: boolean
|
| + * }} state -
|
| + * inputElement: The input element.
|
| + * value: The input value.
|
| + * invalid: True if the input value is invalid.
|
| + */
|
| + update: function(state) {
|
| + if (!state.inputElement) {
|
| + return;
|
| + }
|
| +
|
| + state.value = state.value || '';
|
| +
|
| + var counter = state.value.toString().length.toString();
|
| +
|
| + if (state.inputElement.hasAttribute('maxlength')) {
|
| + counter += '/' + state.inputElement.getAttribute('maxlength');
|
| + }
|
| +
|
| + this._charCounterStr = counter;
|
| + }
|
| + });
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="paper-input-container" assetpath="/res/imp/bower_components/paper-input/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + padding: 8px 0;
|
| +
|
| + @apply(--paper-input-container);
|
| + }
|
| +
|
| + :host([inline]) {
|
| + display: inline-block;
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + pointer-events: none;
|
| + opacity: 0.33;
|
| +
|
| + @apply(--paper-input-container-disabled);
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + .floated-label-placeholder {
|
| + @apply(--paper-font-caption);
|
| + }
|
| +
|
| + .underline {
|
| + position: relative;
|
| + }
|
| +
|
| + .focused-line {
|
| + @apply(--layout-fit);
|
| +
|
| + background: var(--paper-input-container-focus-color, --primary-color);
|
| + height: 2px;
|
| +
|
| + -webkit-transform-origin: center center;
|
| + transform-origin: center center;
|
| + -webkit-transform: scale3d(0,1,1);
|
| + transform: scale3d(0,1,1);
|
| +
|
| + @apply(--paper-input-container-underline-focus);
|
| + }
|
| +
|
| + .underline.is-highlighted .focused-line {
|
| + -webkit-transform: none;
|
| + transform: none;
|
| + -webkit-transition: -webkit-transform 0.25s;
|
| + transition: transform 0.25s;
|
| +
|
| + @apply(--paper-transition-easing);
|
| + }
|
| +
|
| + .underline.is-invalid .focused-line {
|
| + background: var(--paper-input-container-invalid-color, --error-color);
|
| + -webkit-transform: none;
|
| + transform: none;
|
| + -webkit-transition: -webkit-transform 0.25s;
|
| + transition: transform 0.25s;
|
| +
|
| + @apply(--paper-transition-easing);
|
| + }
|
| +
|
| + .unfocused-line {
|
| + @apply(--layout-fit);
|
| +
|
| + background: var(--paper-input-container-color, --secondary-text-color);
|
| + height: 1px;
|
| +
|
| + @apply(--paper-input-container-underline);
|
| + }
|
| +
|
| + :host([disabled]) .unfocused-line {
|
| + border-bottom: 1px dashed;
|
| + border-color: var(--paper-input-container-color, --secondary-text-color);
|
| + background: transparent;
|
| +
|
| + @apply(--paper-input-container-underline-disabled);
|
| + }
|
| +
|
| + .label-and-input-container {
|
| + @apply(--layout-flex-auto);
|
| + @apply(--layout-relative);
|
| +
|
| + width: 100%;
|
| + max-width: 100%;
|
| + }
|
| +
|
| + .input-content {
|
| + @apply(--layout-horizontal);
|
| + @apply(--layout-center);
|
| +
|
| + position: relative;
|
| + }
|
| +
|
| + .input-content ::content label,
|
| + .input-content ::content .paper-input-label {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + font: inherit;
|
| + color: var(--paper-input-container-color, --secondary-text-color);
|
| + -webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
| + transition: transform 0.25s, width 0.25s;
|
| + -webkit-transform-origin: left top;
|
| + transform-origin: left top;
|
| +
|
| + @apply(--paper-font-common-nowrap);
|
| + @apply(--paper-font-subhead);
|
| + @apply(--paper-input-container-label);
|
| + @apply(--paper-transition-easing);
|
| + }
|
| +
|
| + .input-content.label-is-floating ::content label,
|
| + .input-content.label-is-floating ::content .paper-input-label {
|
| + -webkit-transform: translateY(-75%) scale(0.75);
|
| + transform: translateY(-75%) scale(0.75);
|
| +
|
| + /* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
| + original space now available */
|
| + width: 133%;
|
| +
|
| + @apply(--paper-input-container-label-floating);
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) .input-content.label-is-floating ::content label,
|
| + :host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label {
|
| + /* TODO(noms): Figure out why leaving the width at 133% before the animation
|
| + * actually makes
|
| + * it wider on the right side, not left side, as you would expect in RTL */
|
| + width: 100%;
|
| + -webkit-transform-origin: right top;
|
| + transform-origin: right top;
|
| + }
|
| +
|
| + .input-content.label-is-highlighted ::content label,
|
| + .input-content.label-is-highlighted ::content .paper-input-label {
|
| + color: var(--paper-input-container-focus-color, --primary-color);
|
| +
|
| + @apply(--paper-input-container-label-focus);
|
| + }
|
| +
|
| + .input-content.is-invalid ::content label,
|
| + .input-content.is-invalid ::content .paper-input-label {
|
| + color: var(--paper-input-container-invalid-color, --error-color);
|
| + }
|
| +
|
| + .input-content.label-is-hidden ::content label,
|
| + .input-content.label-is-hidden ::content .paper-input-label {
|
| + visibility: hidden;
|
| + }
|
| +
|
| + .input-content ::content input,
|
| + .input-content ::content textarea,
|
| + .input-content ::content iron-autogrow-textarea,
|
| + .input-content ::content .paper-input-input {
|
| + position: relative; /* to make a stacking context */
|
| + outline: none;
|
| + box-shadow: none;
|
| + padding: 0;
|
| + width: 100%;
|
| + max-width: 100%;
|
| + background: transparent;
|
| + border: none;
|
| + color: var(--paper-input-container-input-color, --primary-text-color);
|
| + -webkit-appearance: none;
|
| + text-align: inherit;
|
| +
|
| + @apply(--paper-font-subhead);
|
| + @apply(--paper-input-container-input);
|
| + }
|
| +
|
| + ::content [prefix] {
|
| + @apply(--paper-font-subhead);
|
| +
|
| + @apply(--paper-input-prefix);
|
| + @apply(--layout-flex-none);
|
| + }
|
| +
|
| + ::content [suffix] {
|
| + @apply(--paper-font-subhead);
|
| +
|
| + @apply(--paper-input-suffix);
|
| + @apply(--layout-flex-none);
|
| + }
|
| +
|
| + /* Firefox sets a min-width on the input, which can cause layout issues */
|
| + .input-content ::content input {
|
| + min-width: 0;
|
| + }
|
| +
|
| + .input-content ::content textarea {
|
| + resize: none;
|
| + }
|
| +
|
| + .add-on-content {
|
| + position: relative;
|
| + }
|
| +
|
| + .add-on-content.is-invalid ::content * {
|
| + color: var(--paper-input-container-invalid-color, --error-color);
|
| + }
|
| +
|
| + .add-on-content.is-highlighted ::content * {
|
| + color: var(--paper-input-container-focus-color, --primary-color);
|
| + }
|
| + </style>
|
| +
|
| + <template is="dom-if" if="[[!noLabelFloat]]">
|
| + <div class="floated-label-placeholder" aria-hidden="true"> </div>
|
| + </template>
|
| +
|
| + <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
| + <content select="[prefix]" id="prefix"></content>
|
| +
|
| + <div class="label-and-input-container" id="labelAndInputContainer">
|
| + <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
| + </div>
|
| +
|
| + <content select="[suffix]"></content>
|
| + </div>
|
| +
|
| + <div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
| + <div class="unfocused-line"></div>
|
| + <div class="focused-line"></div>
|
| + </div>
|
| +
|
| + <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
| + <content id="addOnContent" select="[add-on]"></content>
|
| + </div>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<script>
|
| + Polymer({
|
| + is: 'paper-input-container',
|
| +
|
| + properties: {
|
| + /**
|
| + * Set to true to disable the floating label. The label disappears when the input value is
|
| + * not null.
|
| + */
|
| + noLabelFloat: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * Set to true to always float the floating label.
|
| + */
|
| + alwaysFloatLabel: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * The attribute to listen for value changes on.
|
| + */
|
| + attrForValue: {
|
| + type: String,
|
| + value: 'bind-value'
|
| + },
|
| +
|
| + /**
|
| + * Set to true to auto-validate the input value when it changes.
|
| + */
|
| + autoValidate: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * True if the input is invalid. This property is set automatically when the input value
|
| + * changes if auto-validating, or when the `iron-input-validate` event is heard from a child.
|
| + */
|
| + invalid: {
|
| + observer: '_invalidChanged',
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * True if the input has focus.
|
| + */
|
| + focused: {
|
| + readOnly: true,
|
| + type: Boolean,
|
| + value: false,
|
| + notify: true
|
| + },
|
| +
|
| + _addons: {
|
| + type: Array
|
| + // do not set a default value here intentionally - it will be initialized lazily when a
|
| + // distributed child is attached, which may occur before configuration for this element
|
| + // in polyfill.
|
| + },
|
| +
|
| + _inputHasContent: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + _inputSelector: {
|
| + type: String,
|
| + value: 'input,textarea,.paper-input-input'
|
| + },
|
| +
|
| + _boundOnFocus: {
|
| + type: Function,
|
| + value: function() {
|
| + return this._onFocus.bind(this);
|
| + }
|
| + },
|
| +
|
| + _boundOnBlur: {
|
| + type: Function,
|
| + value: function() {
|
| + return this._onBlur.bind(this);
|
| + }
|
| + },
|
| +
|
| + _boundOnInput: {
|
| + type: Function,
|
| + value: function() {
|
| + return this._onInput.bind(this);
|
| + }
|
| + },
|
| +
|
| + _boundValueChanged: {
|
| + type: Function,
|
| + value: function() {
|
| + return this._onValueChanged.bind(this);
|
| + }
|
| + }
|
| + },
|
| +
|
| + listeners: {
|
| + 'addon-attached': '_onAddonAttached',
|
| + 'iron-input-validate': '_onIronInputValidate'
|
| + },
|
| +
|
| + get _valueChangedEvent() {
|
| + return this.attrForValue + '-changed';
|
| + },
|
| +
|
| + get _propertyForValue() {
|
| + return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
|
| + },
|
| +
|
| + get _inputElement() {
|
| + return Polymer.dom(this).querySelector(this._inputSelector);
|
| + },
|
| +
|
| + get _inputElementValue() {
|
| + return this._inputElement[this._propertyForValue] || this._inputElement.value;
|
| + },
|
| +
|
| + ready: function() {
|
| + if (!this._addons) {
|
| + this._addons = [];
|
| + }
|
| + this.addEventListener('focus', this._boundOnFocus, true);
|
| + this.addEventListener('blur', this._boundOnBlur, true);
|
| + },
|
| +
|
| + attached: function() {
|
| + if (this.attrForValue) {
|
| + this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
|
| + } else {
|
| + this.addEventListener('input', this._onInput);
|
| + }
|
| +
|
| + // Only validate when attached if the input already has a value.
|
| + if (this._inputElementValue != '') {
|
| + this._handleValueAndAutoValidate(this._inputElement);
|
| + } else {
|
| + this._handleValue(this._inputElement);
|
| + }
|
| + },
|
| +
|
| + _onAddonAttached: function(event) {
|
| + if (!this._addons) {
|
| + this._addons = [];
|
| + }
|
| + var target = event.target;
|
| + if (this._addons.indexOf(target) === -1) {
|
| + this._addons.push(target);
|
| + if (this.isAttached) {
|
| + this._handleValue(this._inputElement);
|
| + }
|
| + }
|
| + },
|
| +
|
| + _onFocus: function() {
|
| + this._setFocused(true);
|
| + },
|
| +
|
| + _onBlur: function() {
|
| + this._setFocused(false);
|
| + this._handleValueAndAutoValidate(this._inputElement);
|
| + },
|
| +
|
| + _onInput: function(event) {
|
| + this._handleValueAndAutoValidate(event.target);
|
| + },
|
| +
|
| + _onValueChanged: function(event) {
|
| + this._handleValueAndAutoValidate(event.target);
|
| + },
|
| +
|
| + _handleValue: function(inputElement) {
|
| + var value = this._inputElementValue;
|
| +
|
| + // type="number" hack needed because this.value is empty until it's valid
|
| + if (value || value === 0 || (inputElement.type === 'number' && !inputElement.checkValidity())) {
|
| + this._inputHasContent = true;
|
| + } else {
|
| + this._inputHasContent = false;
|
| + }
|
| +
|
| + this.updateAddons({
|
| + inputElement: inputElement,
|
| + value: value,
|
| + invalid: this.invalid
|
| + });
|
| + },
|
| +
|
| + _handleValueAndAutoValidate: function(inputElement) {
|
| + if (this.autoValidate) {
|
| + var valid;
|
| + if (inputElement.validate) {
|
| + valid = inputElement.validate(this._inputElementValue);
|
| + } else {
|
| + valid = inputElement.checkValidity();
|
| + }
|
| + this.invalid = !valid;
|
| + }
|
| +
|
| + // Call this last to notify the add-ons.
|
| + this._handleValue(inputElement);
|
| + },
|
| +
|
| + _onIronInputValidate: function(event) {
|
| + this.invalid = this._inputElement.invalid;
|
| + },
|
| +
|
| + _invalidChanged: function() {
|
| + if (this._addons) {
|
| + this.updateAddons({invalid: this.invalid});
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Call this to update the state of add-ons.
|
| + * @param {Object} state Add-on state.
|
| + */
|
| + updateAddons: function(state) {
|
| + for (var addon, index = 0; addon = this._addons[index]; index++) {
|
| + addon.update(state);
|
| + }
|
| + },
|
| +
|
| + _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
|
| + var cls = 'input-content';
|
| + if (!noLabelFloat) {
|
| + var label = this.querySelector('label');
|
| +
|
| + if (alwaysFloatLabel || _inputHasContent) {
|
| + cls += ' label-is-floating';
|
| + // If the label is floating, ignore any offsets that may have been
|
| + // applied from a prefix element.
|
| + this.$.labelAndInputContainer.style.position = 'static';
|
| +
|
| + if (invalid) {
|
| + cls += ' is-invalid';
|
| + } else if (focused) {
|
| + cls += " label-is-highlighted";
|
| + }
|
| + } else {
|
| + // When the label is not floating, it should overlap the input element.
|
| + if (label) {
|
| + this.$.labelAndInputContainer.style.position = 'relative';
|
| + }
|
| + }
|
| + } else {
|
| + if (_inputHasContent) {
|
| + cls += ' label-is-hidden';
|
| + }
|
| + }
|
| + return cls;
|
| + },
|
| +
|
| + _computeUnderlineClass: function(focused, invalid) {
|
| + var cls = 'underline';
|
| + if (invalid) {
|
| + cls += ' is-invalid';
|
| + } else if (focused) {
|
| + cls += ' is-highlighted'
|
| + }
|
| + return cls;
|
| + },
|
| +
|
| + _computeAddOnContentClass: function(focused, invalid) {
|
| + var cls = 'add-on-content';
|
| + if (invalid) {
|
| + cls += ' is-invalid';
|
| + } else if (focused) {
|
| + cls += ' is-highlighted'
|
| + }
|
| + return cls;
|
| + }
|
| + });
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="paper-input-error" assetpath="/res/imp/bower_components/paper-input/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + visibility: hidden;
|
| +
|
| + color: var(--paper-input-container-invalid-color, --error-color);
|
| +
|
| + @apply(--paper-font-caption);
|
| + @apply(--paper-input-error);
|
| + position: absolute;
|
| + left:0;
|
| + right:0;
|
| + }
|
| +
|
| + :host([invalid]) {
|
| + visibility: visible;
|
| + };
|
| + </style>
|
| +
|
| + <content></content>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<script>
|
| + Polymer({
|
| + is: 'paper-input-error',
|
| +
|
| + behaviors: [
|
| + Polymer.PaperInputAddonBehavior
|
| + ],
|
| +
|
| + properties: {
|
| + /**
|
| + * True if the error is showing.
|
| + */
|
| + invalid: {
|
| + readOnly: true,
|
| + reflectToAttribute: true,
|
| + type: Boolean
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * This overrides the update function in PaperInputAddonBehavior.
|
| + * @param {{
|
| + * inputElement: (Element|undefined),
|
| + * value: (string|undefined),
|
| + * invalid: boolean
|
| + * }} state -
|
| + * inputElement: The input element.
|
| + * value: The input value.
|
| + * invalid: True if the input value is invalid.
|
| + */
|
| + update: function(state) {
|
| + this._setInvalid(state.invalid);
|
| + }
|
| + });
|
| +</script>
|
| +
|
| +
|
| +<dom-module id="paper-input" assetpath="/res/imp/bower_components/paper-input/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + input::-webkit-input-placeholder {
|
| + color: var(--paper-input-container-color, --secondary-text-color);
|
| + }
|
| +
|
| + input:-moz-placeholder {
|
| + color: var(--paper-input-container-color, --secondary-text-color);
|
| + }
|
| +
|
| + input::-moz-placeholder {
|
| + color: var(--paper-input-container-color, --secondary-text-color);
|
| + }
|
| +
|
| + input:-ms-input-placeholder {
|
| + color: var(--paper-input-container-color, --secondary-text-color);
|
| + }
|
| + </style>
|
| +
|
| + <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
|
| +
|
| + <content select="[prefix]"></content>
|
| +
|
| + <label hidden$="[[!label]]" aria-hidden="true" for="input">[[label]]</label>
|
| +
|
| + <input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" title$="[[title]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange" tabindex$="[[tabindex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
|
| +
|
| + <content select="[suffix]"></content>
|
| +
|
| + <template is="dom-if" if="[[errorMessage]]">
|
| + <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
|
| + </template>
|
| +
|
| + <template is="dom-if" if="[[charCounter]]">
|
| + <paper-input-char-counter></paper-input-char-counter>
|
| + </template>
|
| +
|
| + </paper-input-container>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<script>
|
| + Polymer({
|
| + is: 'paper-input',
|
| +
|
| + behaviors: [
|
| + Polymer.IronFormElementBehavior,
|
| + Polymer.PaperInputBehavior
|
| + ]
|
| + });
|
| +</script>
|
| +<dom-module id="bot-filters" assetpath="/res/imp/botlist/">
|
| + <template>
|
| + <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
|
| + :host {
|
| + display: block;
|
| + font-family: sans-serif;
|
| + }
|
| + #filter {
|
| + margin:0 5px;
|
| + }
|
| +
|
| + .container {
|
| + min-height: 120px;
|
| + width: 100%;
|
| + }
|
| +
|
| + .item {
|
| + border-bottom: 1px solid #EEE;
|
| + max-width: 250px;
|
| + min-height: 1.0em;
|
| + min-width: 100px;
|
| + padding: 0.1em 0.2em;
|
| + line-height: 1.5em;
|
| + }
|
| +
|
| + .header {
|
| + height: 2em;
|
| + padding: .25em;
|
| + line-height: 2em;
|
| + }
|
| +
|
| + .selector {
|
| + border: 1px solid black;
|
| + margin: 0 5px;
|
| + max-height: 200px;
|
| + min-height: 130px;
|
| + min-width: 200px;
|
| + overflow-y: auto;
|
| + overflow-x: hidden;
|
| + }
|
| +
|
| + .selectable {
|
| + cursor: pointer;
|
| + }
|
| +
|
| + .selectable:hover {
|
| + /* See https://sites.google.com/a/google.com/skia-infrastructure/design-docs/general-design-guidance */
|
| + background-color: #A6CEE3;
|
| + }
|
| +
|
| + .iron-selected {
|
| + /* See https://sites.google.com/a/google.com/skia-infrastructure/design-docs/general-design-guidance */
|
| + background-color: #1F78B4;
|
| + color: white;
|
| + }
|
| +
|
| + .icons {
|
| + cursor:pointer;
|
| + height:20px;
|
| + margin:2px;
|
| + width:20px;
|
| + flex-shrink: 0;
|
| + }
|
| +
|
| + .side-by-side {
|
| + display: inline-block;
|
| + vertical-align: top;
|
| + }
|
| +
|
| + .bold {
|
| + font-weight: bold;
|
| + }
|
| +
|
| + paper-checkbox {
|
| + max-height: 2em;
|
| + margin: 2px;
|
| + /* See https://sites.google.com/a/google.com/skia-infrastructure/design-docs/general-design-guidance */
|
| + --paper-checkbox-checked-color: black;
|
| + --paper-checkbox-checked-ink-color: black;
|
| + --paper-checkbox-unchecked-color: black;
|
| + --paper-checkbox-unchecked-ink-color: black;
|
| + --paper-checkbox-label-color: black;
|
| + }
|
| + </style>
|
| +
|
| + <div class="container horizontal layout">
|
| +
|
| +
|
| + <div class="narrow-down-selector">
|
| + <div>
|
| + <paper-input id="filter" label="Search columns and filters" placeholder="gpu nvidia" value="{{_query}}"></paper-input>
|
| + </div>
|
| +
|
| + <div class="selector side-by-side">
|
| + <iron-selector attr-for-selected="label" selected="{{_primarySelected}}">
|
| + <template is="dom-repeat" items="[[_primaryItems]]" as="item">
|
| + <div class="selectable item horizontal layout" label="[[item]]">
|
| +
|
| + <span>[[_beforeBold(item,_query)]]<span class="bold">[[_bold(item,_query)]]</span>[[_afterBold(item,_query)]]</span>
|
| + <span class="flex"></span>
|
| + <paper-checkbox noink="" disabled$="[[_cantToggleColumn(item)]]" checked="[[_columnState(item,columns.*)]]" on-change="_toggleColumn">
|
| + </paper-checkbox>
|
| + </div>
|
| + </template>
|
| + </iron-selector>
|
| + </div>
|
| +
|
| + <div class="selector side-by-side">
|
| + <template is="dom-repeat" id="secondaryList" items="[[_secondaryItems]]" as="item">
|
| + <div class="item horizontal layout" label="[[item]]">
|
| +
|
| + <span>[[_beforeBold(item,_query)]]<span class="bold">[[_bold(item,_query)]]</span>[[_afterBold(item,_query)]]</span>
|
| + <span class="flex"></span>
|
| + <iron-icon class="icons" icon="icons:arrow-forward" hidden="[[_cantAddFilter(_primarySelected,item,_filters.*)]]" on-tap="_addFilter">
|
| + </iron-icon>
|
| + </div>
|
| + </template>
|
| + </div>
|
| +
|
| + <div class="selector side-by-side">
|
| + <template is="dom-repeat" items="[[_filters]]" as="fil">
|
| + <div class="item horizontal layout" label="[[fil]]">
|
| + <span>[[fil]]</span>
|
| + <span class="flex"></span>
|
| + <iron-icon class="icons" icon="icons:remove-circle-outline" hidden="[[_cantRemoveFilter(fil,_filters.*)]]" on-tap="_removeFilter">
|
| + </iron-icon>
|
| + </div>
|
| + </template>
|
| + </div>
|
| +
|
| + <paper-checkbox checked="{{verbose}}">Verbose Entries</paper-checkbox>
|
| + </div>
|
| +
|
| + </div>
|
| +
|
| + </template>
|
| + <script>
|
| + (function(){
|
| + var FILTER_SEP = " | ";
|
| + // filterMap is a map of primary -> function. The function returns a
|
| + // boolean "does the bot (first arg) match the second argument". These
|
| + // functions will have "this" be the botlist, and will have access to all
|
| + // functions defined in bot-list and bot-list-shared.
|
| + var filterMap = {
|
| + cores: function(bot, cores){
|
| + var o = this._cores(bot);
|
| + return o.indexOf(cores) !== -1;
|
| + },
|
| + cpu: function(bot, cpu){
|
| + var o = this._dimension(bot, "cpu") || ["none"];
|
| + return o.indexOf(cpu) !== -1;
|
| + },
|
| + devices: function(bot, device){
|
| + if (device === "none") {
|
| + return this._devices(bot).length === 0;
|
| + }
|
| + // extract the deviceType, if it is not "unknown".
|
| + device = this._unalias(device);
|
| + var found = false;
|
| + this._devices(bot).forEach(function(d) {
|
| + if (this._deviceType(d) === device) {
|
| + found = true;
|
| + }
|
| + }.bind(this));
|
| + return found;
|
| + },
|
| + gpu: function(bot, gpu){
|
| + var o = this._dimension(bot, "gpu") || ["none"];
|
| + return o.indexOf(this._unalias(gpu)) !== -1;
|
| + },
|
| + id: function(bot, id) {
|
| + return bot.bot_id === id;
|
| + },
|
| + os: function(bot, os){
|
| + var o = this._dimension(bot, "os") || ["Unknown"];
|
| + return o.indexOf(os) !== -1;
|
| + },
|
| + pool: function(bot, pool){
|
| + var o = this._dimension(bot, "pool") || ["Unknown"];
|
| + return o.indexOf(pool) !== -1;
|
| + },
|
| + status: function(bot, status){
|
| + if (status === "quarantined") {
|
| + return bot.quarantined;
|
| + } else if (status === "dead") {
|
| + return bot.is_dead;
|
| + } else {
|
| + // Status must be "available".
|
| + return !bot.quarantined && !bot.is_dead;
|
| + }
|
| + },
|
| + task: function(bot, task) {
|
| + if (task === "idle") {
|
| + return this._taskId(bot) === "idle";
|
| + }
|
| + // Task must be "busy".
|
| + return this._taskId(bot) !== "idle";
|
| + }
|
| + };
|
| +
|
| + // Given a space separated list of queries, matchPartCaseInsensitive
|
| + // returns an object of any query that matches a part of str, case
|
| + // insensitive. The object has an idx (index) and the part that matched.
|
| + var matchPartCaseInsensitive = function(str, queries) {
|
| + if (!queries) {
|
| + return {
|
| + idx: 0,
|
| + part: "",
|
| + };
|
| + }
|
| + if (!str) {
|
| + return {
|
| + idx: -1,
|
| + };
|
| + }
|
| + queries = queries.trim().toLocaleLowerCase();
|
| + str = str.toLocaleLowerCase();
|
| + var xq = queries.split(" ");
|
| + for (var i = 0; i < xq.length; i++) {
|
| + var idx = str.indexOf(xq[i]);
|
| + if (idx !== -1) {
|
| + return {
|
| + idx: idx,
|
| + part: xq[i],
|
| + };
|
| + }
|
| + }
|
| + return {
|
| + idx: -1,
|
| + };
|
| + };
|
| +
|
| + Polymer({
|
| + is: "bot-filters",
|
| + properties: {
|
| + // input
|
| + primary_map: {
|
| + type: Object,
|
| + },
|
| + primary_arr: {
|
| + type: Array,
|
| + },
|
| +
|
| + // output
|
| + columns: {
|
| + type: Array,
|
| + value: function() {
|
| + // TODO(kjlubick) back these up to URL params and load them from
|
| + // there on reload.
|
| + return ["id","os","task","status"];
|
| + },
|
| + notify: true,
|
| + },
|
| + filter: {
|
| + type: Object,
|
| + computed: "_makeFilter(_filters.*)",
|
| + notify: true,
|
| + },
|
| + verbose: {
|
| + type: Boolean,
|
| + value: false,
|
| + notify: true,
|
| + },
|
| +
|
| + // private
|
| + _filters: {
|
| + type:Array,
|
| + value: function() {
|
| + return [];
|
| + }
|
| + },
|
| + _primaryItems: {
|
| + type: Array,
|
| + computed: "_primary(_query, primary_map, primary_arr, columns.*)",
|
| + },
|
| + _primarySelected: {
|
| + type: String,
|
| + value: "",
|
| + },
|
| + // query is treated as a space separated list.
|
| + _query: {
|
| + type:String,
|
| + value: "",
|
| + },
|
| + _secondaryItems: {
|
| + type: Array,
|
| + computed: "_secondary(_primarySelected, _query, primary_map)",
|
| + },
|
| +
|
| + },
|
| +
|
| + _addFilter: function(e) {
|
| + // e.model.foo is a way to get access to the "foo" inside a dom-repeat
|
| + // that had the event (in our case, a tap) acted upon it. This name,
|
| + // "foo", is set by the dom-repeat above 'as="foo"'
|
| + var filterItem = e.model.item;
|
| + if (this._cantAddFilter(this._primarySelected, filterItem)) {
|
| + return;
|
| + }
|
| + var filter = this._primarySelected + FILTER_SEP + filterItem;
|
| + this.push("_filters", filter);
|
| + },
|
| +
|
| + _removeFilter: function(e){
|
| + var filter = e.model.fil;
|
| + if (this._cantRemoveFilter(filter)){
|
| + return;
|
| + }
|
| + var idx = this._filters.indexOf(filter);
|
| + if (idx !== -1) {
|
| + this.splice("_filters", idx, 1);
|
| + }
|
| + },
|
| +
|
| + _cantAddFilter: function(primarySelected, filterItem) {
|
| + // Check that everything is selected and this filter isn't already in
|
| + // the array.
|
| + if (!primarySelected || !filterItem) {
|
| + return true;
|
| + }
|
| + var filter = primarySelected + FILTER_SEP + filterItem;
|
| + return this._filters.indexOf(filter) !== -1;
|
| + },
|
| +
|
| + _cantRemoveFilter: function(filter) {
|
| + return !filter || this._filters.indexOf(filter) === -1;
|
| + },
|
| +
|
| + _toggleColumn: function(e) {
|
| + var col = e.model.item;
|
| +
|
| + if (this._cantToggleColumn(col)) {
|
| + return;
|
| + }
|
| + if (this._columnState(col)) {
|
| + var idx = this.columns.indexOf(col);
|
| + if (idx !== -1) {
|
| + this.splice("columns", idx, 1);
|
| + }
|
| + return;
|
| + }
|
| + this.push("columns", col);
|
| + },
|
| +
|
| + _cantToggleColumn: function(col) {
|
| + // Don't allow the id column to be removed, as the bot list is basically
|
| + // meaningless without it.
|
| + return !col || col === "id" ;
|
| + },
|
| +
|
| + _columnState: function(col) {
|
| + if (!col) {
|
| + return false;
|
| + }
|
| + return this.columns.indexOf(col) !== -1;
|
| + },
|
| +
|
| + _makeFilter: function() {
|
| + // The filters belonging to the same primary key will be or'd together.
|
| + // Those groups will be and'd together.
|
| + // filterGroups will be a map of primary (i.e. column) -> array of
|
| + // options that should be filtered to.
|
| + // e.g. "os" -> ["Windows", "Linux"]
|
| + // Since they will be or'd together, order doesn't matter.
|
| + var filterGroups = {};
|
| + this._filters.forEach(function(filterString){
|
| + var idx = filterString.indexOf(FILTER_SEP);
|
| + var primary = filterString.slice(0, idx);
|
| + var param = filterString.slice(idx + FILTER_SEP.length);
|
| + var arr = filterGroups[primary] || [];
|
| + arr.push(param);
|
| + filterGroups[primary] = arr;
|
| + });
|
| + return {
|
| + filter: function(bot){
|
| + var retVal = true;
|
| + // Look up all the primary keys we are filter by, then look up how
|
| + // to filter (in filterMap) and apply the filter for each filter
|
| + // option.
|
| + for (primary in filterGroups){
|
| + var params = filterGroups[primary];
|
| + var filter = filterMap[primary];
|
| + var groupResult = false;
|
| + if (filter) {
|
| + params.forEach(function(param){
|
| + groupResult = groupResult || filter.bind(this)(bot,param);
|
| + }.bind(this));
|
| + }
|
| + retVal = retVal && groupResult;
|
| + }
|
| + return retVal;
|
| + }
|
| + }
|
| + },
|
| +
|
| + _primary: function(query, primary_map, primary_arr) {
|
| + // If the user has typed in a query, only show those primary keys that
|
| + // partially match the query or that have secondary values which
|
| + // partially match.
|
| + var arr = this.primary_arr.filter(function(s){
|
| + if (matchPartCaseInsensitive(s, query).idx !== -1) {
|
| + return true;
|
| + }
|
| + var opts = primary_map[s];
|
| + for (var i = 0; i < opts.length; i++) {
|
| + if (matchPartCaseInsensitive(opts[i], query).idx !== -1) {
|
| + return true;
|
| + }
|
| + }
|
| + return false;
|
| + });
|
| + // Update the selected to be the current one (if it is still with being
|
| + // shown) or the first match. This saves the user from having to click
|
| + // the first result before seeing results.
|
| + if (query && arr.length > 0 &&
|
| + arr.indexOf(this._primarySelected) === -1) {
|
| + this.set("_primarySelected", arr[0]);
|
| + }
|
| + return arr;
|
| + },
|
| +
|
| + _secondary: function(primarySelected, query, primary_map) {
|
| + // Changing the secondary list doesn't always trigger a reorder of the
|
| + // secondary elements. So, we request it be done asynchronously.
|
| + requestAnimationFrame(function(){
|
| + this.$.secondaryList.render();
|
| + }.bind(this));
|
| +
|
| + // Only show secondary options when a primary option has been selected.
|
| + // If the user has typed in a query, show all secondary elements if
|
| + // their primary element matches. If it doesn't match the primary
|
| + // element, only show those secondary elements that do.
|
| + if (!primarySelected) {
|
| + return [];
|
| + }
|
| + if (matchPartCaseInsensitive(primarySelected, query).idx !== -1) {
|
| + // Sort the secondaries alphabetically, but prioritize query matches.
|
| + return primary_map[primarySelected].sort(function(a, b){
|
| + var aMatch = matchPartCaseInsensitive(a, query).idx !== -1;
|
| + var bMatch = matchPartCaseInsensitive(b, query).idx !== -1;
|
| + if (aMatch === bMatch) {
|
| + return swarming.naturalCompare(a,b);
|
| + }
|
| + // true == 1 and false == 0. So, put the one that matches first.
|
| + return bMatch - aMatch;
|
| + });
|
| + }
|
| + // Otherwise, filter out those that do not match.
|
| + return primary_map[primarySelected].filter(function(s) {
|
| + return matchPartCaseInsensitive(s, query).idx !== -1;
|
| + });
|
| + },
|
| +
|
| + // These three methods (_beforeBold, _bold, _afterBold) bold the first
|
| + // instance of the filter query, making it easier to see why elements
|
| + // show up.
|
| + _beforeBold: function(item, query) {
|
| + var match = matchPartCaseInsensitive(item, query);
|
| + if (match.idx === -1) {
|
| + return item;
|
| + }
|
| + return item.substring(0, match.idx);
|
| + },
|
| +
|
| + _bold: function(item, query) {
|
| + var match = matchPartCaseInsensitive(item, query);
|
| + if (match.idx === -1) {
|
| + return "";
|
| + }
|
| + return item.substring(match.idx, match.idx + match.part.length);
|
| + },
|
| +
|
| + _afterBold: function(item, query) {
|
| + var match = matchPartCaseInsensitive(item, query);
|
| + if (match.idx === -1) {
|
| + return "";
|
| + }
|
| + return item.substring(match.idx + match.part.length);
|
| + },
|
| +
|
| + });
|
| + })();
|
| + </script>
|
| +</dom-module><script>
|
| +
|
| + window.SwarmingBehaviors = window.SwarmingBehaviors || {};
|
| + (function(){
|
| + var ANDROID_ALIASES = {
|
| + "bullhead": "Nexus 5X",
|
| + "flo": "Nexus 7",
|
| + "hammerhead": "Nexus 5",
|
| + "mako": "Nexus 4",
|
| + "shamu": "Nexus 6",
|
| + };
|
| + // Taken from http://developer.android.com/reference/android/os/BatteryManager.html
|
| + var BATTERY_HEALTH_UNKNOWN = 1;
|
| + var BATTERY_HEALTH_GOOD = 2;
|
| + var BATTERY_STATUS_CHARGING = 2;
|
| +
|
| + var UNAUTHENTICATED = "unauthenticated";
|
| + var AVAILABLE = "available";
|
| +
|
| + var GPU_ALIASES = {
|
| + "1002": "AMD",
|
| + "1002:6779": "AMD Radeon HD 6450/7450/8450",
|
| + "1002:6821": "AMD Radeon HD 8870M",
|
| + "102b": "Matrox",
|
| + "102b:0522": "Matrox MGA G200e",
|
| + "102b:0532": "Matrox MGA G200eW",
|
| + "102b:0534": "Matrox G200eR2",
|
| + "10de": "NVIDIA",
|
| + "10de:08aa": "NVIDIA GeForce 320M",
|
| + "10de:0fe9": "NVIDIA GeForce GT 750M Mac Edition",
|
| + "10de:104a": "NVIDIA GeForce GT 610",
|
| + "10de:11c0": "NVIDIA GeForce GTX 660",
|
| + "10de:1244": "NVIDIA GeForce GTX 550 Ti",
|
| + "10de:1401": "NVIDIA GeForce GTX 960",
|
| + "8086": "Intel",
|
| + "8086:041a": "Intel Xeon Integrated",
|
| + "8086:0a2e": "Intel Haswell Integrated",
|
| + "8086:0d26": "Intel Crystal Well Integrated",
|
| + }
|
| +
|
| + // For consistency, all aliases are displayed like:
|
| + // Nexus 5X (bullhead)
|
| + // This regex matches a string like "ALIAS (ORIG)", with ORIG as group 1.
|
| + var ALIAS_REGEXP = /.+ \((.*)\)/;
|
| +
|
| + // This behavior wraps up all the shared bot-list functionality.
|
| + SwarmingBehaviors.BotListBehavior = {
|
| +
|
| + _androidAlias: function(device) {
|
| + if (device.notReady) {
|
| + return UNAUTHENTICATED.toUpperCase();
|
| + }
|
| + var t = this._deviceType(device);
|
| + var a = ANDROID_ALIASES[t];
|
| + if (!a) {
|
| + return "UNKNOWN";
|
| + }
|
| + return a;
|
| + },
|
| +
|
| + // _applyAlias is the consistent way to modify a string to show its alias.
|
| + _applyAlias: function(orig, alias) {
|
| + return alias +" ("+orig+")";
|
| + },
|
| +
|
| + _cores: function(bot) {
|
| + // For whatever reason, sometimes cores are in dimensions and sometimes
|
| + // they are in state, but never both.
|
| + var c = (bot && bot.state && bot.state.cores);
|
| + if (c && c.length > 0) {
|
| + return c;
|
| + }
|
| + c = this._dimension(bot, "cores") || ["Unknown"];
|
| + return c;
|
| + },
|
| +
|
| + _devices: function(bot) {
|
| + var devices = [];
|
| + var d = (bot && bot.state && bot.state.devices) || {};
|
| + // state.devices is like {Serial:Object}, so we need to keep the serial
|
| + for (key in d) {
|
| + var o = d[key];
|
| + o.serial = key;
|
| + o.okay = (o.state === AVAILABLE);
|
| + devices.push(o);
|
| + }
|
| + return devices;
|
| + },
|
| +
|
| + // _deviceType returns the codename of a given Android device.
|
| + _deviceType: function(device) {
|
| + if (!device || !device.build) {
|
| + return "unknown";
|
| + }
|
| + var t = device.build["build.product"] || device.build["product.board"] ||
|
| + device.build["product.device"] || "unknown";
|
| + return t.toLowerCase();
|
| + },
|
| +
|
| + // _dimension returns the given dimension of a bot. If it is defined, it
|
| + // is typically an array of strings.
|
| + _dimension: function(bot, dim) {
|
| + if (!bot || !bot.dimensions || !dim) {
|
| + return undefined;
|
| + }
|
| + for (var i = 0; i < bot.dimensions.length; i++) {
|
| + if (bot.dimensions[i].key === dim) {
|
| + return bot.dimensions[i].value;
|
| + }
|
| + }
|
| + return undefined;
|
| + },
|
| +
|
| + _gpuAlias: function(gpu) {
|
| + var a = GPU_ALIASES[gpu];
|
| + if (!a) {
|
| + return "UNKNOWN";
|
| + }
|
| + return a;
|
| + },
|
| +
|
| + _not: function(a) {
|
| + return a;
|
| + },
|
| +
|
| + _taskId: function(bot) {
|
| + if (bot && bot.task_id) {
|
| + return bot.task_id;
|
| + }
|
| + return "idle";
|
| + },
|
| +
|
| + // _unalias will return the base dimension/state with its alias removed
|
| + // if it had one. This is handy for sorting and filtering.
|
| + _unalias: function(str) {
|
| + var match = ALIAS_REGEXP.exec(str);
|
| + if (match) {
|
| + return match[1];
|
| + }
|
| + return str;
|
| + },
|
| + }
|
| + })()
|
| +</script>
|
| +<dom-module id="bot-list-data" assetpath="/res/imp/botlist/">
|
| + <template>
|
| + <iron-ajax id="request" url="/_ah/api/swarming/v1/bots/list" headers="[[auth_headers]]" handle-as="json" last-response="{{_data}}" loading="{{busy}}">
|
| + </iron-ajax>
|
| + </template>
|
| + <script>
|
| + (function(){
|
| + // TODO(kjlubick): Add more of these as well as things from state
|
| + // i.e. disk space remaining.
|
| + var DIMENSIONS = ["cores", "cpu", "id", "os", "pool"];
|
| + // "gpu" and "devices" are added separately because we need to
|
| + // deal with aliases.
|
| + var BOT_PROPERTIES = ["gpu", "devices", "task", "status"];
|
| + Polymer({
|
| + is: 'bot-list-data',
|
| + properties: {
|
| + // inputs
|
| + auth_headers: {
|
| + type: Object,
|
| + observer: "signIn",
|
| + },
|
| +
|
| + //outputs
|
| + bots: {
|
| + type: Array,
|
| + computed: "_bots(_data)",
|
| + notify: true,
|
| + },
|
| + busy: {
|
| + type: Boolean,
|
| + notify: true,
|
| + },
|
| + primary_map: {
|
| + type:Object,
|
| + computed: "_primaryMap(bots)",
|
| + notify: true,
|
| + },
|
| + primary_arr: {
|
| + type:Array,
|
| + value: function() {
|
| + return DIMENSIONS.concat(BOT_PROPERTIES);
|
| + },
|
| + notify: true,
|
| + },
|
| +
|
| + // private
|
| + _data: {
|
| + type: Object,
|
| + },
|
| + },
|
| + behaviors: [SwarmingBehaviors.BotListBehavior],
|
| +
|
| + signIn: function(){
|
| + this.$.request.generateRequest();
|
| + },
|
| +
|
| + _bots: function(){
|
| + if (!this._data || !this._data.items) {
|
| + return [];
|
| + }
|
| + this._data.items.forEach(function(o){
|
| + o.state = JSON.parse(o.state);
|
| + });
|
| + return this._data.items;
|
| + },
|
| +
|
| + _primaryMap: function(bots){
|
| + // map will keep track of dimensions that we have seen at least once.
|
| + // This will then basically get turned into an array to be used for
|
| + // filtering.
|
| + var map = {};
|
| + DIMENSIONS.forEach(function(p){
|
| + map[p] = {};
|
| + });
|
| + map["devices"] = {};
|
| + map["gpu"] = {};
|
| + bots.forEach(function(b){
|
| + DIMENSIONS.forEach(function(d){
|
| + var dims = this._dimension(b, d) || [];
|
| + dims.forEach(function(e){
|
| + map[d][e] = true;
|
| + });
|
| + }.bind(this));
|
| +
|
| + // Add Android devices and their aliases
|
| + this._devices(b).forEach(function(d){
|
| + var dt = this._deviceType(d);
|
| + var alias = this._androidAlias(d);
|
| + if (dt !== "unknown") {
|
| + dt = this._applyAlias(dt,alias);
|
| + }
|
| + map["devices"][dt] = true;
|
| + }.bind(this));
|
| + map["devices"]["none"] = true;
|
| +
|
| + // Add GPUs and their aliases
|
| + var gpus = this._dimension(b, "gpu") || [];
|
| + gpus.forEach(function(g){
|
| + var alias = this._gpuAlias(g);
|
| + if (alias !== "UNKNOWN") {
|
| + map["gpu"][this._applyAlias(g, alias)] = true;
|
| + } else {
|
| + map["gpu"][g] = true;
|
| + }
|
| +
|
| + }.bind(this));
|
| + }.bind(this));
|
| +
|
| + // Turn the Map<Object,Map<Boolean>> into a Map<Object,Array<String>>
|
| + // with all of the secondary elements sorted appropriately.
|
| + var pMap = {};
|
| + for (key in map){
|
| + pMap[key] = Object.keys(map[key]).sort(swarming.naturalCompare);
|
| + }
|
| +
|
| + // Create custom filter options
|
| + pMap["task"] = ["busy", "idle"];
|
| + pMap["status"] = ["available", "dead", "quarantined"];
|
| + return pMap;
|
| + },
|
| +
|
| + });
|
| + })();
|
| + </script>
|
| +</dom-module><dom-module id="bot-list" assetpath="/res/imp/botlist/">
|
| + <template>
|
| + <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style">
|
| + bot-filters {
|
| + margin-bottom: 5px;
|
| + }
|
| + .bot {
|
| + margin:5px;
|
| + max-width:400px;
|
| + min-height:100px;
|
| + min-width:300px;
|
| + }
|
| + table {
|
| + border-collapse: collapse;
|
| + margin-left: 5px;
|
| + }
|
| + td, th {
|
| + border: 1px solid #DDD;
|
| + padding: 5px;
|
| + }
|
| +
|
| + .quarantined, .bad-device {
|
| + background-color: #ffdddd;
|
| + }
|
| + .dead {
|
| + background-color: #cccccc;
|
| + }
|
| +
|
| + th {
|
| + position: relative;
|
| + }
|
| + sort-toggle {
|
| + position: absolute;
|
| + right: 0;
|
| + top: 0.4em;
|
| + }
|
| + .bot-list th > span {
|
| + /* Leave space for sort-toggle*/
|
| + padding-right: 30px;
|
| + }
|
| + </style>
|
| +
|
| + <swarming-app auth_headers="{{auth_headers}}" busy="[[busy]]" name="Swarming Bot List">
|
| +
|
| + <bot-filters primary_map="[[primary_map]]" primary_arr="[[primary_arr]]" columns="{{columns}}" filter="{{filter}}" verbose="{{verbose}}">
|
| + </bot-filters>
|
| +
|
| + <bot-list-data auth_headers="[[auth_headers]]" bots="{{bots}}" busy="{{busy}}" primary_map="{{primary_map}}" primary_arr="{{primary_arr}}">
|
| + </bot-list-data>
|
| +
|
| + <table class="bot-list">
|
| + <thead on-sort_change="sortChange">
|
| +
|
| + <tr><th>
|
| + <span>Bot Id</span>
|
| + <sort-toggle name="id" current="[[sort]]">
|
| + </sort-toggle>
|
| + </th>
|
| +
|
| + <th hidden$="[[_hide('task', columns.*)]]">
|
| + <span>Current Task</span>
|
| + <sort-toggle name="task" current="[[sort]]">
|
| + </sort-toggle>
|
| + </th>
|
| +
|
| + <template is="dom-repeat" items="[[plain_columns]]" as="c">
|
| + <th hidden$="[[_hide(c)]]">
|
| + <span>[[_header(c)]]</span>
|
| + <sort-toggle name="[[c]]" current="[[sort]]">
|
| + </sort-toggle>
|
| + </th>
|
| + </template>
|
| + </tr></thead>
|
| + <tbody>
|
| + <template id="bot_table" is="dom-repeat" items="[[bots]]" as="bot" initial-count="50" filter="_filterBotTable">
|
| +
|
| + <tr class$="[[_botClass(bot)]]">
|
| + <td>
|
| + <a class="center" href$="[[_botLink(bot.bot_id)]]" target="_blank">
|
| + [[bot.bot_id]]
|
| + </a>
|
| + </td>
|
| + <td hidden$="[[_hide('task', columns.*)]]">
|
| + <a href$="[[_taskLink(bot)]]">[[_taskId(bot)]]</a>
|
| + </td>
|
| +
|
| + <template is="dom-repeat" items="[[plain_columns]]" as="c">
|
| + <td hidden$="[[_hide(c)]]">
|
| + [[_column(c, bot, verbose)]]
|
| + </td>
|
| + </template>
|
| +
|
| + </tr>
|
| + <template is="dom-repeat" items="[[_devices(bot)]]" as="device">
|
| + <tr hidden$="[[_hide('devices', columns.*)]]" class$="[[_deviceClass(device)]]">
|
| + <td></td>
|
| + <td hidden$="[[_hide('task', columns.*)]]"></td>
|
| + <template is="dom-repeat" items="[[plain_columns]]" as="c">
|
| + <td hidden$="[[_hide(c)]]">
|
| + [[_deviceColumn(c, device, verbose)]]
|
| + </td>
|
| + </template>
|
| + </tr>
|
| + </template>
|
| + </template>
|
| + </tbody>
|
| + </table>
|
| +
|
| + </swarming-app>
|
| +
|
| + </template>
|
| + <script>
|
| + (function(){
|
| + var special_columns = ["id", "task"];
|
| +
|
| + var headerMap = {
|
| + // "id" and "task" are special, so they don't go here and have their
|
| + // headers hard-coded below.
|
| + "cores": "Cores",
|
| + "cpu": "CPU",
|
| + "devices": "Devices",
|
| + "gpu": "GPU",
|
| + "os": "OS",
|
| + "pool": "Pool",
|
| + "status": "Status",
|
| + };
|
| +
|
| + // This maps column name to a function that will return the content for a
|
| + // given bot. These functions are bound to this element, and have access
|
| + // to all functions defined here and in bot-list-shared.
|
| + var columnMap = {
|
| + cores: function(bot){
|
| + var cores = this._cores(bot);
|
| + if (this.verbose){
|
| + return cores.join(" | ");
|
| + }
|
| + return cores[0];
|
| + },
|
| + cpu: function(bot){
|
| + var cpus = this._dimension(bot, 'cpu') || ['Unknown'];
|
| + if (this.verbose){
|
| + return cpus.join(" | ");
|
| + }
|
| + return cpus[0];
|
| + },
|
| + devices: function(bot){
|
| + return this._devices(bot).length + " devices attached";
|
| + },
|
| + gpu: function(bot){
|
| + var gpus = this._dimension(bot, 'gpu')
|
| + if (!gpus) {
|
| + return "none";
|
| + }
|
| + var verbose = []
|
| + var named = [];
|
| + // non-verbose mode has only the top level GPU info "e.g. NVidia"
|
| + // which is found by looking for gpu ids w/o a colon.
|
| + gpus.forEach(function(g){
|
| + var alias = this._gpuAlias(g);
|
| + if (alias === "UNKNOWN") {
|
| + verbose.push(g);
|
| + if (g.indexOf(":") === -1) {
|
| + named.push(g);
|
| + }
|
| + return;
|
| + }
|
| + verbose.push(this._applyAlias(g, alias));
|
| + if (g.indexOf(":") === -1) {
|
| + named.push(this._applyAlias(g, alias));
|
| + }
|
| + }.bind(this))
|
| + if (this.verbose) {
|
| + return verbose.join(" | ");
|
| + }
|
| + return named.join(" | ");
|
| + },
|
| + id: function(bot) {
|
| + return bot.bot_id;
|
| + },
|
| + os: function(bot) {
|
| + var os = this._dimension(bot, 'os') || ['Unknown'];
|
| + if (this.verbose){
|
| + return os.join(" | ");
|
| + }
|
| + return os[0];
|
| + },
|
| + pool: function(bot) {
|
| + var pool = this._dimension(bot, 'pool') || ['Unknown'];
|
| + return pool.join(" | ");
|
| + },
|
| + status: function(bot) {
|
| + // If a bot is both dead and quarantined, show the deadness over the
|
| + // quarentinedness.
|
| + if (bot.is_dead) {
|
| + return "Dead: " + bot.is_dead;
|
| + }
|
| + if (bot.quarantined) {
|
| + return "Quarantined: " + bot.quarantined;
|
| + }
|
| + return "Alive";
|
| + },
|
| + task: function(bot){
|
| + return this._taskId(bot);
|
| + },
|
| + };
|
| +
|
| + Polymer({
|
| + is: 'bot-list',
|
| + behaviors: [SwarmingBehaviors.BotListBehavior],
|
| +
|
| + properties: {
|
| +
|
| + columns: {
|
| + type: Array,
|
| + },
|
| + // Should have a property "filter" which is a function.
|
| + filter: {
|
| + type: Object,
|
| + },
|
| +
|
| + plain_columns: {
|
| + type: Array,
|
| + computed: "_stripSpecial(columns.*)",
|
| + },
|
| +
|
| + // sort is an Object {name:String, direction:String}.
|
| + sort: {
|
| + type: Object,
|
| + },
|
| +
|
| + verbose: {
|
| + type: Boolean,
|
| + }
|
| + },
|
| +
|
| + observers: [
|
| + '_reRender(filter.*)',
|
| + '_checkSorts(columns.*)'
|
| + ],
|
| +
|
| + _botClass: function(bot) {
|
| + if (bot.is_dead) {
|
| + return "dead";
|
| + }
|
| + if (bot.quarantined) {
|
| + return "quarantined";
|
| + }
|
| + return "";
|
| + },
|
| +
|
| + _botLink: function(id) {
|
| + // TODO(kjlubick) Make this point to /newui/ when appropriate.
|
| + return "/restricted/bot/"+id;
|
| + },
|
| +
|
| + // _checkSorts makes sure that if a column has been removed, the related
|
| + // sort is also removed.
|
| + _checkSorts: function() {
|
| + if (!this.sort) {
|
| + return;
|
| + }
|
| + this._reRender();
|
| + },
|
| +
|
| + _column: function(col, bot) {
|
| + return columnMap[col].bind(this)(bot);
|
| + },
|
| +
|
| + _deviceColumn: function(col, device) {
|
| + if (col === "devices") {
|
| + var str = this._androidAlias(device);
|
| + if (device.okay) {
|
| + str = this._applyAlias(this._deviceType(device), str);
|
| + }
|
| + str += " S/N:";
|
| + str += device.serial;
|
| + return str;
|
| + }
|
| + if (col === "status") {
|
| + return device.state;
|
| + }
|
| + return "";
|
| + },
|
| +
|
| + _deviceClass: function(device) {
|
| + if (!device.okay) {
|
| + return "bad-device";
|
| + }
|
| + return "";
|
| + },
|
| +
|
| + _filterBotTable: function(bot) {
|
| + if (!this.filter || !this.filter.filter) {
|
| + return true;
|
| + }
|
| + return this.filter.filter.bind(this)(bot);
|
| + },
|
| +
|
| + _header: function(col){
|
| + return headerMap[col];
|
| + },
|
| +
|
| + _hide: function(col) {
|
| + return this.columns.indexOf(col) === -1;
|
| + },
|
| +
|
| + _reRender: function(filter, sort) {
|
| + this.$.bot_table.render();
|
| + },
|
| +
|
| + _sortBotTable: function(botA, botB) {
|
| + if (!this.sort) {
|
| + return 0;
|
| + }
|
| + var dir = 1;
|
| + if (this.sort.direction === "desc") {
|
| + dir = -1;
|
| + }
|
| + var botACol = this._column(this.sort.name, botA);
|
| + var botBCol = this._column(this.sort.name, botB);
|
| +
|
| + return dir * swarming.naturalCompare(botACol, botBCol);
|
| + },
|
| +
|
| + sortChange: function(e) {
|
| + // The event we get from sort-toggle tells us the name of what needs
|
| + // to be sorting and how to sort it.
|
| + if (!(e && e.detail && e.detail.name)) {
|
| + return;
|
| + }
|
| + this.set("sort", e.detail);
|
| + swarming.stableSort(this.bots, this._sortBotTable.bind(this));
|
| + this._reRender();
|
| + },
|
| +
|
| + // _stripSpecial removes the special columns and sorts the remaining
|
| + // columns so they always appear in the same order, regardless of
|
| + // the order they are added.
|
| + _stripSpecial: function(){
|
| + return this.columns.filter(function(c){
|
| + return special_columns.indexOf(c) === -1;
|
| + }).sort();
|
| + },
|
| +
|
| + _taskLink: function(data) {
|
| + if (data && data.task_id) {
|
| + return "/user/task/" + data.task_id;
|
| + }
|
| + return undefined;
|
| + }
|
| +
|
| + });
|
| + })();
|
| + </script>
|
| </dom-module></div></body></html>
|
|
|
Chromium Code Reviews
Issue 2182693002:
Add new botlist for swarming (Closed)
Base URL: https://chromium.googlesource.com/external/github.com/luci/luci-py@app-wrapper