update polymer
This commit is contained in:
Luke Pulverenti
parent
571dd964e6
commit
c526176a6a
23 changed files with 707 additions and 243 deletions
|
|
@ -10803,6 +10803,27 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
/** @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
|
||||
*
|
||||
**/
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
|
|
@ -10856,7 +10877,7 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
},
|
||||
|
||||
/**
|
||||
* This is a CSS selector sting. If this is set, only items that matches the CSS selector
|
||||
* This is a CSS selector string. If this is set, only items that match the CSS selector
|
||||
* are selectable.
|
||||
*
|
||||
* @attribute selectable
|
||||
|
|
@ -10884,18 +10905,30 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
selectedAttribute: {
|
||||
type: String,
|
||||
value: null
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The set of excluded elements where the key is the `localName`
|
||||
* of the element that will be ignored from the item list.
|
||||
*
|
||||
* @type {object}
|
||||
* @default {template: 1}
|
||||
*/
|
||||
|
||||
excludedLocalNames: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'template': 1
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateSelected(attrForSelected, selected)'
|
||||
],
|
||||
|
||||
excludedLocalNames: {
|
||||
'template': 1
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this._bindFilterItem = this._filterItem.bind(this);
|
||||
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
||||
|
|
@ -10974,9 +11007,7 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
},
|
||||
|
||||
_removeListener: function(eventName) {
|
||||
// There is no unlisten yet...
|
||||
// https://github.com/Polymer/polymer/issues/1639
|
||||
//this.removeEventListener(eventName, this._bindActivateHandler);
|
||||
this.unlisten(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_activateEventChanged: function(eventName, old) {
|
||||
|
|
@ -11065,11 +11096,6 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
},
|
||||
|
||||
_activateHandler: function(e) {
|
||||
// TODO: remove this when https://github.com/Polymer/polymer/issues/1639 is fixed so we
|
||||
// can just remove the old event listener.
|
||||
if (e.type !== this.activateEvent) {
|
||||
return;
|
||||
}
|
||||
var t = e.target;
|
||||
var items = this.items;
|
||||
while (t && t != this) {
|
||||
|
|
@ -11779,6 +11805,194 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.paper-font-display4,
|
||||
.paper-font-display3,
|
||||
.paper-font-display2,
|
||||
.paper-font-display1,
|
||||
.paper-font-headline,
|
||||
.paper-font-title,
|
||||
.paper-font-subhead,
|
||||
.paper-font-body2,
|
||||
.paper-font-body1,
|
||||
.paper-font-caption,
|
||||
.paper-font-menu,
|
||||
.paper-font-button {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
}
|
||||
|
||||
.paper-font-code2,
|
||||
.paper-font-code1 {
|
||||
font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
}
|
||||
|
||||
/* Opt for better kerning for headers & other short labels. */
|
||||
.paper-font-display4,
|
||||
.paper-font-display3,
|
||||
.paper-font-display2,
|
||||
.paper-font-display1,
|
||||
.paper-font-headline,
|
||||
.paper-font-title,
|
||||
.paper-font-subhead,
|
||||
.paper-font-menu,
|
||||
.paper-font-button {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
"Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
|
||||
styles. All other styles should exist as single lines."
|
||||
*/
|
||||
.paper-font-display4,
|
||||
.paper-font-display3,
|
||||
.paper-font-title,
|
||||
.paper-font-caption,
|
||||
.paper-font-menu,
|
||||
.paper-font-button {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.paper-font-display4 {
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.044em;
|
||||
line-height: 120px;
|
||||
}
|
||||
|
||||
.paper-font-display3 {
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.026em;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.paper-font-display2 {
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.018em;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.paper-font-display1 {
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.01em;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.paper-font-headline {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.012em;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.paper-font-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.paper-font-subhead {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.paper-font-body2 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.paper-font-body1 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.paper-font-caption {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.011em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.paper-font-menu {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.paper-font-button {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.018em;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.paper-font-code2 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.paper-font-code1 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.shadow-transition {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.shadow-elevation-2dp {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.shadow-elevation-3dp {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-4dp {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-6dp {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-8dp {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-16dp {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
|
||||
/**
|
||||
|
|
@ -12308,6 +12522,11 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
Polymer.PaperInputBehaviorImpl = {
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Fired when the input changes due to user interaction.
|
||||
*
|
||||
* @event change
|
||||
*/
|
||||
|
||||
/**
|
||||
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
|
||||
|
|
@ -12678,6 +12897,19 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -16355,13 +16587,34 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
<dom-module id="paper-progress" assetpath="bower_components/paper-progress/">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host(.transiting) #activeProgress,
|
||||
:host(.transiting) #secondaryProgress {
|
||||
#progressContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#progressContainer,
|
||||
/* the stripe for the indeterminate animation*/
|
||||
.indeterminate:after {
|
||||
height: var(--paper-progress-height, 4px);
|
||||
}
|
||||
|
||||
#primaryProgress,
|
||||
#secondaryProgress,
|
||||
.indeterminate:after {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
#progressContainer,
|
||||
.indeterminate:after {
|
||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||
}
|
||||
|
||||
:host(.transiting) > * {
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
transition-property: transform;
|
||||
|
||||
|
|
@ -16378,48 +16631,45 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||
}
|
||||
|
||||
#progressContainer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@apply(--paper-progress-container);
|
||||
}
|
||||
|
||||
#progressContainer, #indeterminateSplitter {
|
||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||
}
|
||||
|
||||
#activeProgress,
|
||||
#primaryProgress,
|
||||
#secondaryProgress {
|
||||
@apply(--layout-fit);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#activeProgress {
|
||||
#primaryProgress {
|
||||
background-color: var(--paper-progress-active-color, --google-green-500);
|
||||
}
|
||||
|
||||
#secondaryProgress {
|
||||
position: relative;
|
||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||
}
|
||||
|
||||
#indeterminateSplitter {
|
||||
display: none;
|
||||
|
||||
:host([disabled]) #primaryProgress {
|
||||
background-color: var(--paper-progress-disabled-active-color, --google-grey-500);
|
||||
}
|
||||
|
||||
#activeProgress.indeterminate {
|
||||
:host([disabled]) #secondaryProgress {
|
||||
background-color: var(--paper-progress-disabled-active-color, --google-grey-300);
|
||||
}
|
||||
|
||||
:host(:not([disabled])) #primaryProgress.indeterminate {
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center;
|
||||
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||
animation: indeterminate-bar 2s linear infinite;
|
||||
}
|
||||
|
||||
#indeterminateSplitter.indeterminate {
|
||||
display: block;
|
||||
:host(:not([disabled])) #primaryProgress.indeterminate:after {
|
||||
content: "";
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
|
||||
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
||||
animation: indeterminate-splitter 2s linear infinite;
|
||||
}
|
||||
|
|
@ -16489,10 +16739,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
||||
<div id="secondaryProgress" class="fit"></div>
|
||||
<div id="activeProgress" class="fit"></div>
|
||||
<div id="indeterminateSplitter" class="fit"></div>
|
||||
<div id="progressContainer">
|
||||
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
||||
<div id="primaryProgress"></div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
|
@ -16513,8 +16762,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
*/
|
||||
secondaryProgress: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
value: 0
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -16523,8 +16771,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
secondaryRatio: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true,
|
||||
observer: '_secondaryRatioChanged'
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -16533,21 +16780,32 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
indeterminate: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
observer: '_toggleIndeterminate'
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the progress is disabled.
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
observer: '_disabledChanged'
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_ratioChanged(ratio)',
|
||||
'_secondaryProgressChanged(secondaryProgress, min, max)'
|
||||
'_progressChanged(secondaryProgress, value, min, max)'
|
||||
],
|
||||
|
||||
_toggleIndeterminate: function() {
|
||||
hostAttributes: {
|
||||
role: 'progressbar'
|
||||
},
|
||||
|
||||
_toggleIndeterminate: function(indeterminate) {
|
||||
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
||||
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
||||
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
||||
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
||||
this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress);
|
||||
},
|
||||
|
||||
_transformProgress: function(progress, ratio) {
|
||||
|
|
@ -16555,17 +16813,34 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
progress.style.transform = progress.style.webkitTransform = transform;
|
||||
},
|
||||
|
||||
_ratioChanged: function(ratio) {
|
||||
this._transformProgress(this.$.activeProgress, ratio);
|
||||
_mainRatioChanged: function(ratio) {
|
||||
this._transformProgress(this.$.primaryProgress, ratio);
|
||||
},
|
||||
|
||||
_secondaryRatioChanged: function(secondaryRatio) {
|
||||
_progressChanged: function(secondaryProgress, value, min, max) {
|
||||
secondaryProgress = this._clampValue(secondaryProgress);
|
||||
value = this._clampValue(value);
|
||||
|
||||
var secondaryRatio = this._calcRatio(secondaryProgress) * 100;
|
||||
var mainRatio = this._calcRatio(value) * 100;
|
||||
|
||||
this._setSecondaryRatio(secondaryRatio);
|
||||
this._transformProgress(this.$.secondaryProgress, secondaryRatio);
|
||||
this._transformProgress(this.$.primaryProgress, mainRatio);
|
||||
|
||||
this.secondaryProgress = secondaryProgress;
|
||||
|
||||
this.setAttribute('aria-valuenow', value);
|
||||
this.setAttribute('aria-valuemin', min);
|
||||
this.setAttribute('aria-valuemax', max);
|
||||
},
|
||||
|
||||
_secondaryProgressChanged: function() {
|
||||
this.secondaryProgress = this._clampValue(this.secondaryProgress);
|
||||
this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
|
||||
_disabledChanged: function(disabled) {
|
||||
this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||
},
|
||||
|
||||
_hideSecondaryProgress: function(secondaryRatio) {
|
||||
return secondaryRatio === 0;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -17183,7 +17458,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
|
||||
<label hidden$="[[!label]]">[[label]]</label>
|
||||
|
||||
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" 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]]">
|
||||
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" 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">
|
||||
|
||||
<content select="[suffix]"></content>
|
||||
|
||||
|
|
@ -17233,24 +17508,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
:host(:not([disabled])) #sliderBar {
|
||||
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
|
||||
}
|
||||
|
||||
:host(:not([disabled])) #sliderBar {
|
||||
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
|
||||
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
|
||||
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
|
||||
}
|
||||
|
||||
:host([disabled]) #sliderBar {
|
||||
--paper-progress-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
|
||||
}
|
||||
|
||||
:host([disabled]) #sliderBar {
|
||||
--paper-progress-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
|
||||
}
|
||||
|
||||
/* focus shows the ripple */
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -17295,11 +17559,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
position: absolute;
|
||||
top: 15px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
margin: -8px 0;
|
||||
background-color: var(--paper-slider-bar-color, transparent);
|
||||
--paper-progress-height: var(--paper-slider-height, 2px);
|
||||
}
|
||||
|
||||
.ring #sliderBar {
|
||||
|
|
@ -17450,7 +17714,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
.slider-input {
|
||||
--paper-input-container-input: {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -17479,7 +17743,7 @@ paper-ripple {
|
|||
<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
||||
|
||||
<div class="bar-container">
|
||||
<paper-progress class$="[[_getProgressClass(transiting)]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
|
||||
<paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
|
||||
</paper-progress>
|
||||
</div>
|
||||
|
||||
|
|
@ -17494,7 +17758,7 @@ paper-ripple {
|
|||
<div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
|
||||
<paper-ripple center="" id="ink" class="circle" hidden$="[[!receivedFocusFromKeyboard]]">
|
||||
</paper-ripple>
|
||||
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
|
||||
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -17565,7 +17829,8 @@ paper-ripple {
|
|||
immediateValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -17696,7 +17961,6 @@ paper-ripple {
|
|||
|
||||
_positionKnob: function(ratio) {
|
||||
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
||||
this._setPinValue(this.immediateValue);
|
||||
this._setRatio(this._calcRatio(this.immediateValue));
|
||||
|
||||
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
||||
|
|
@ -17751,7 +18015,6 @@ paper-ripple {
|
|||
// update knob's position
|
||||
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
||||
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
||||
this._setPinValue(immediateValue);
|
||||
},
|
||||
|
||||
_trackEnd: function() {
|
||||
|
|
@ -17828,23 +18091,15 @@ paper-ripple {
|
|||
},
|
||||
|
||||
_getClassNames: function() {
|
||||
var classes = {};
|
||||
|
||||
classes.disabled = this.disabled;
|
||||
classes.pin = this.pin;
|
||||
classes.snaps = this.snaps;
|
||||
classes.ring = this.immediateValue <= this.min;
|
||||
classes.expand = this.expand;
|
||||
classes.dragging = this.dragging;
|
||||
classes.transiting = this.transiting;
|
||||
classes.editable = this.editable;
|
||||
|
||||
return this._mergeClasses(classes);
|
||||
},
|
||||
|
||||
_getProgressClass: function() {
|
||||
return this._mergeClasses({
|
||||
transiting: this.transiting
|
||||
disabled: this.disabled,
|
||||
pin: this.pin,
|
||||
snaps: this.snaps,
|
||||
ring: this.immediateValue <= this.min,
|
||||
expand: this.expand,
|
||||
dragging: this.dragging,
|
||||
transiting: this.transiting,
|
||||
editable: this.editable
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -17864,9 +18119,6 @@ paper-ripple {
|
|||
this.decrement();
|
||||
}
|
||||
this.fire('change');
|
||||
},
|
||||
_setPinValue: function (value) {
|
||||
this.pinValue = value;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -18231,7 +18483,7 @@ paper-ripple {
|
|||
|
||||
<label hidden$="[[!label]]">[[label]]</label>
|
||||
|
||||
<iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]"></iron-autogrow-textarea>
|
||||
<iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]" on-change="_onChange"></iron-autogrow-textarea>
|
||||
|
||||
<template is="dom-if" if="[[errorMessage]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue