457 lines
27 KiB
JavaScript
457 lines
27 KiB
JavaScript
import{P as t,Q as e,S as n,U as i,V as a}from"./main-8113c4f2.js";import{I as o,a as l}from"./c.33d2c1b4.js";const r=t({_template:e`
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
position: fixed;
|
|
clip: rect(0px,0px,0px,0px);
|
|
}
|
|
</style>
|
|
<div aria-live$="[[mode]]">[[_text]]</div>
|
|
`,is:"iron-a11y-announcer",properties:{mode:{type:String,value:"polite"},timeout:{type:Number,value:150},_text:{type:String,value:""}},created:function(){r.instance||(r.instance=this),document.addEventListener("iron-announce",this._onIronAnnounce.bind(this))},announce:function(t){this._text="",this.async((function(){this._text=t}),this.timeout)},_onIronAnnounce:function(t){t.detail&&t.detail.text&&this.announce(t.detail.text)}});r.instance=null,r.requestAvailability=function(){r.instance||(r.instance=document.createElement("iron-a11y-announcer")),document.body?document.body.appendChild(r.instance):document.addEventListener("load",(function(){document.body.appendChild(r.instance)}))};class p{constructor(t){p[" "](t),this.type=t&&t.type||"default",this.key=t&&t.key,t&&"value"in t&&(this.value=t.value)}get value(){var t=this.type,e=this.key;if(t&&e)return p.types[t]&&p.types[t][e]}set value(t){var e=this.type,n=this.key;e&&n&&(e=p.types[e]=p.types[e]||{},null==t?delete e[n]:e[n]=t)}get list(){if(this.type){var t=p.types[this.type];return t?Object.keys(t).map((function(t){return s[this.type][t]}),this):[]}}byKey(t){return this.key=t,this.value}}p[" "]=function(){},p.types={};var s=p.types;t({is:"iron-meta",properties:{type:{type:String,value:"default"},key:{type:String},value:{type:String,notify:!0},self:{type:Boolean,observer:"_selfChanged"},__meta:{type:Boolean,computed:"__computeMeta(type, key, value)"}},hostAttributes:{hidden:!0},__computeMeta:function(t,e,n){var i=new p({type:t,key:e});return void 0!==n&&n!==i.value?i.value=n:this.value!==i.value&&(this.value=i.value),i},get list(){return this.__meta&&this.__meta.list},_selfChanged:function(t){t&&(this.value=this)},byKey:function(t){return new p({type:this.type,key:t}).value}});let u=null;const d={properties:{validator:{type:String},invalid:{notify:!0,reflectToAttribute:!0,type:Boolean,value:!1,observer:"_invalidChanged"}},registered:function(){u=new p({type:"validator"})},_invalidChanged:function(){this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")},get _validator(){return u&&u.byKey(this.validator)},hasValidator:function(){return null!=this._validator},validate:function(t){return void 0===t&&void 0!==this.value?this.invalid=!this._getValidity(this.value):this.invalid=!this._getValidity(t),!this.invalid},_getValidity:function(t){return!this.hasValidator()||this._validator.validate(t)}};t({_template:e`
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
<slot id="content"></slot>
|
|
`,is:"iron-input",behaviors:[d],properties:{bindValue:{type:String,value:""},value:{type:String,computed:"_computeValue(bindValue)"},allowedPattern:{type:String},autoValidate:{type:Boolean,value:!1},_inputElement:Object},observers:["_bindValueChanged(bindValue, _inputElement)"],listeners:{input:"_onInput",keypress:"_onKeypress"},created:function(){r.requestAvailability(),this._previousValidInput="",this._patternAlreadyChecked=!1},attached:function(){this._observer=n(this).observeNodes(function(t){this._initSlottedInput()}.bind(this))},detached:function(){this._observer&&(n(this).unobserveNodes(this._observer),this._observer=null)},get inputElement(){return this._inputElement},_initSlottedInput:function(){this._inputElement=this.getEffectiveChildren()[0],this.inputElement&&this.inputElement.value&&(this.bindValue=this.inputElement.value),this.fire("iron-input-ready")},get _patternRegExp(){var t;if(this.allowedPattern)t=new RegExp(this.allowedPattern);else switch(this.inputElement.type){case"number":t=/[0-9.,e-]/}return t},_bindValueChanged:function(t,e){e&&(void 0===t?e.value=null:t!==e.value&&(this.inputElement.value=t),this.autoValidate&&this.validate(),this.fire("bind-value-changed",{value:t}))},_onInput:function(){this.allowedPattern&&!this._patternAlreadyChecked&&(this._checkPatternValidity()||(this._announceInvalidCharacter("Invalid string of characters not entered."),this.inputElement.value=this._previousValidInput));this.bindValue=this._previousValidInput=this.inputElement.value,this._patternAlreadyChecked=!1},_isPrintable:function(t){var e=8==t.keyCode||9==t.keyCode||13==t.keyCode||27==t.keyCode,n=19==t.keyCode||20==t.keyCode||45==t.keyCode||46==t.keyCode||144==t.keyCode||145==t.keyCode||t.keyCode>32&&t.keyCode<41||t.keyCode>111&&t.keyCode<124;return!(e||0==t.charCode&&n)},_onKeypress:function(t){if(this.allowedPattern||"number"===this.inputElement.type){var e=this._patternRegExp;if(e&&!(t.metaKey||t.ctrlKey||t.altKey)){this._patternAlreadyChecked=!0;var n=String.fromCharCode(t.charCode);this._isPrintable(t)&&!e.test(n)&&(t.preventDefault(),this._announceInvalidCharacter("Invalid character "+n+" not entered."))}}},_checkPatternValidity:function(){var t=this._patternRegExp;if(!t)return!0;for(var e=0;e<this.inputElement.value.length;e++)if(!t.test(this.inputElement.value[e]))return!1;return!0},validate:function(){if(!this.inputElement)return this.invalid=!1,!0;var t=this.inputElement.checkValidity();return t&&(this.required&&""===this.bindValue?t=!1:this.hasValidator()&&(t=d.validate.call(this,this.bindValue))),this.invalid=!t,this.fire("iron-input-validate"),t},_announceInvalidCharacter:function(t){this.fire("iron-announce",{text:t})},_computeValue:function(t){return t}});const c={attached:function(){this.fire("addon-attached")},update:function(t){}};t({_template:e`
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
float: right;
|
|
|
|
@apply --paper-font-caption;
|
|
@apply --paper-input-char-counter;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
:host(:dir(rtl)) {
|
|
float: left;
|
|
}
|
|
</style>
|
|
|
|
<span>[[_charCounterStr]]</span>
|
|
`,is:"paper-input-char-counter",behaviors:[c],properties:{_charCounterStr:{type:String,value:"0"}},update:function(t){if(t.inputElement){t.value=t.value||"";var e=t.value.toString().length.toString();t.inputElement.hasAttribute("maxlength")&&(e+="/"+t.inputElement.getAttribute("maxlength")),this._charCounterStr=e}}});const h=e`
|
|
<custom-style>
|
|
<style is="custom-style">
|
|
html {
|
|
--paper-input-container-shared-input-style: {
|
|
position: relative; /* to make a stacking context */
|
|
outline: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--paper-input-container-input-color, var(--primary-text-color));
|
|
-webkit-appearance: none;
|
|
text-align: inherit;
|
|
vertical-align: var(--paper-input-container-input-align, bottom);
|
|
|
|
@apply --paper-font-subhead;
|
|
};
|
|
}
|
|
</style>
|
|
</custom-style>
|
|
`;h.setAttribute("style","display: none;"),document.head.appendChild(h.content),t({_template:e`
|
|
<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;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.floated-label-placeholder {
|
|
@apply --paper-font-caption;
|
|
}
|
|
|
|
.underline {
|
|
height: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.focused-line {
|
|
@apply --layout-fit;
|
|
border-bottom: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
|
|
|
|
-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 {
|
|
border-color: var(--paper-input-container-invalid-color, var(--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;
|
|
border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
|
|
@apply --paper-input-container-underline;
|
|
}
|
|
|
|
:host([disabled]) .unfocused-line {
|
|
border-bottom: 1px dashed;
|
|
border-color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
@apply --paper-input-container-underline-disabled;
|
|
}
|
|
|
|
.input-wrapper {
|
|
@apply --layout-horizontal;
|
|
@apply --layout-center;
|
|
position: relative;
|
|
}
|
|
|
|
.input-content {
|
|
@apply --layout-flex-auto;
|
|
@apply --layout-relative;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.input-content ::slotted(label),
|
|
.input-content ::slotted(.paper-input-label) {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
font: inherit;
|
|
color: var(--paper-input-container-color, var(--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;
|
|
/* Fix for safari not focusing 0-height date/time inputs with -webkit-apperance: none; */
|
|
min-height: 1px;
|
|
|
|
@apply --paper-font-common-nowrap;
|
|
@apply --paper-font-subhead;
|
|
@apply --paper-input-container-label;
|
|
@apply --paper-transition-easing;
|
|
}
|
|
|
|
|
|
.input-content ::slotted(label):before,
|
|
.input-content ::slotted(.paper-input-label):before {
|
|
@apply --paper-input-container-label-before;
|
|
}
|
|
|
|
.input-content ::slotted(label):after,
|
|
.input-content ::slotted(.paper-input-label):after {
|
|
@apply --paper-input-container-label-after;
|
|
}
|
|
|
|
.input-content.label-is-floating ::slotted(label),
|
|
.input-content.label-is-floating ::slotted(.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(:dir(rtl)) .input-content.label-is-floating ::slotted(label),
|
|
:host(:dir(rtl)) .input-content.label-is-floating ::slotted(.paper-input-label) {
|
|
right: 0;
|
|
left: auto;
|
|
-webkit-transform-origin: right top;
|
|
transform-origin: right top;
|
|
}
|
|
|
|
.input-content.label-is-highlighted ::slotted(label),
|
|
.input-content.label-is-highlighted ::slotted(.paper-input-label) {
|
|
color: var(--paper-input-container-focus-color, var(--primary-color));
|
|
|
|
@apply --paper-input-container-label-focus;
|
|
}
|
|
|
|
.input-content.is-invalid ::slotted(label),
|
|
.input-content.is-invalid ::slotted(.paper-input-label) {
|
|
color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
}
|
|
|
|
.input-content.label-is-hidden ::slotted(label),
|
|
.input-content.label-is-hidden ::slotted(.paper-input-label) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.input-content ::slotted(input),
|
|
.input-content ::slotted(iron-input),
|
|
.input-content ::slotted(textarea),
|
|
.input-content ::slotted(iron-autogrow-textarea),
|
|
.input-content ::slotted(.paper-input-input) {
|
|
@apply --paper-input-container-shared-input-style;
|
|
/* The apply shim doesn't apply the nested color custom property,
|
|
so we have to re-apply it here. */
|
|
color: var(--paper-input-container-input-color, var(--primary-text-color));
|
|
@apply --paper-input-container-input;
|
|
}
|
|
|
|
.input-content ::slotted(input)::-webkit-outer-spin-button,
|
|
.input-content ::slotted(input)::-webkit-inner-spin-button {
|
|
@apply --paper-input-container-input-webkit-spinner;
|
|
}
|
|
|
|
.input-content.focused ::slotted(input),
|
|
.input-content.focused ::slotted(iron-input),
|
|
.input-content.focused ::slotted(textarea),
|
|
.input-content.focused ::slotted(iron-autogrow-textarea),
|
|
.input-content.focused ::slotted(.paper-input-input) {
|
|
@apply --paper-input-container-input-focus;
|
|
}
|
|
|
|
.input-content.is-invalid ::slotted(input),
|
|
.input-content.is-invalid ::slotted(iron-input),
|
|
.input-content.is-invalid ::slotted(textarea),
|
|
.input-content.is-invalid ::slotted(iron-autogrow-textarea),
|
|
.input-content.is-invalid ::slotted(.paper-input-input) {
|
|
@apply --paper-input-container-input-invalid;
|
|
}
|
|
|
|
.prefix ::slotted(*) {
|
|
display: inline-block;
|
|
@apply --paper-font-subhead;
|
|
@apply --layout-flex-none;
|
|
@apply --paper-input-prefix;
|
|
}
|
|
|
|
.suffix ::slotted(*) {
|
|
display: inline-block;
|
|
@apply --paper-font-subhead;
|
|
@apply --layout-flex-none;
|
|
|
|
@apply --paper-input-suffix;
|
|
}
|
|
|
|
/* Firefox sets a min-width on the input, which can cause layout issues */
|
|
.input-content ::slotted(input) {
|
|
min-width: 0;
|
|
}
|
|
|
|
.input-content ::slotted(textarea) {
|
|
resize: none;
|
|
}
|
|
|
|
.add-on-content {
|
|
position: relative;
|
|
}
|
|
|
|
.add-on-content.is-invalid ::slotted(*) {
|
|
color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
}
|
|
|
|
.add-on-content.is-highlighted ::slotted(*) {
|
|
color: var(--paper-input-container-focus-color, var(--primary-color));
|
|
}
|
|
</style>
|
|
|
|
<div class="floated-label-placeholder" aria-hidden="true" hidden="[[noLabelFloat]]"> </div>
|
|
|
|
<div class="input-wrapper">
|
|
<span class="prefix"><slot name="prefix"></slot></span>
|
|
|
|
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]" id="labelAndInputContainer">
|
|
<slot name="label"></slot>
|
|
<slot name="input"></slot>
|
|
</div>
|
|
|
|
<span class="suffix"><slot name="suffix"></slot></span>
|
|
</div>
|
|
|
|
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
|
<div class="unfocused-line"></div>
|
|
<div class="focused-line"></div>
|
|
</div>
|
|
|
|
<div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
|
<slot name="add-on"></slot>
|
|
</div>
|
|
`,is:"paper-input-container",properties:{noLabelFloat:{type:Boolean,value:!1},alwaysFloatLabel:{type:Boolean,value:!1},attrForValue:{type:String,value:"bind-value"},autoValidate:{type:Boolean,value:!1},invalid:{observer:"_invalidChanged",type:Boolean,value:!1},focused:{readOnly:!0,type:Boolean,value:!1,notify:!0},_addons:{type:Array},_inputHasContent:{type:Boolean,value:!1},_inputSelector:{type:String,value:"input,iron-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 i(this.attrForValue)},get _inputElement(){return n(this).querySelector(this._inputSelector)},get _inputElementValue(){return this._inputElement[this._propertyForValue]||this._inputElement.value},ready:function(){this.__isFirstValueUpdate=!0,this._addons||(this._addons=[]),this.addEventListener("focus",this._boundOnFocus,!0),this.addEventListener("blur",this._boundOnBlur,!0)},attached:function(){this.attrForValue?this._inputElement.addEventListener(this._valueChangedEvent,this._boundValueChanged):this.addEventListener("input",this._onInput),this._inputElementValue&&""!=this._inputElementValue?this._handleValueAndAutoValidate(this._inputElement):this._handleValue(this._inputElement)},_onAddonAttached:function(t){this._addons||(this._addons=[]);var e=t.target;-1===this._addons.indexOf(e)&&(this._addons.push(e),this.isAttached&&this._handleValue(this._inputElement))},_onFocus:function(){this._setFocused(!0)},_onBlur:function(){this._setFocused(!1),this._handleValueAndAutoValidate(this._inputElement)},_onInput:function(t){this._handleValueAndAutoValidate(t.target)},_onValueChanged:function(t){var e=t.target;this.__isFirstValueUpdate&&(this.__isFirstValueUpdate=!1,void 0===e.value||""===e.value)||this._handleValueAndAutoValidate(t.target)},_handleValue:function(t){var e=this._inputElementValue;e||0===e||"number"===t.type&&!t.checkValidity()?this._inputHasContent=!0:this._inputHasContent=!1,this.updateAddons({inputElement:t,value:e,invalid:this.invalid})},_handleValueAndAutoValidate:function(t){var e;this.autoValidate&&t&&(e=t.validate?t.validate(this._inputElementValue):t.checkValidity(),this.invalid=!e);this._handleValue(t)},_onIronInputValidate:function(t){this.invalid=this._inputElement.invalid},_invalidChanged:function(){this._addons&&this.updateAddons({invalid:this.invalid})},updateAddons:function(t){for(var e,n=0;e=this._addons[n];n++)e.update(t)},_computeInputContentClass:function(t,e,n,i,a){var o="input-content";if(t)a&&(o+=" label-is-hidden"),i&&(o+=" is-invalid");else{var l=this.querySelector("label");e||a?(o+=" label-is-floating",this.$.labelAndInputContainer.style.position="static",i?o+=" is-invalid":n&&(o+=" label-is-highlighted")):(l&&(this.$.labelAndInputContainer.style.position="relative"),i&&(o+=" is-invalid"))}return n&&(o+=" focused"),o},_computeUnderlineClass:function(t,e){var n="underline";return e?n+=" is-invalid":t&&(n+=" is-highlighted"),n},_computeAddOnContentClass:function(t,e){var n="add-on-content";return e?n+=" is-invalid":t&&(n+=" is-highlighted"),n}}),t({_template:e`
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
visibility: hidden;
|
|
|
|
color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
|
|
@apply --paper-font-caption;
|
|
@apply --paper-input-error;
|
|
position: absolute;
|
|
left:0;
|
|
right:0;
|
|
}
|
|
|
|
:host([invalid]) {
|
|
visibility: visible;
|
|
}
|
|
|
|
#a11yWrapper {
|
|
visibility: hidden;
|
|
}
|
|
|
|
:host([invalid]) #a11yWrapper {
|
|
visibility: visible;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
If the paper-input-error element is directly referenced by an
|
|
\`aria-describedby\` attribute, such as when used as a paper-input add-on,
|
|
then applying \`visibility: hidden;\` to the paper-input-error element itself
|
|
does not hide the error.
|
|
|
|
For more information, see:
|
|
https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description
|
|
-->
|
|
<div id="a11yWrapper">
|
|
<slot></slot>
|
|
</div>
|
|
`,is:"paper-input-error",behaviors:[c],properties:{invalid:{readOnly:!0,reflectToAttribute:!0,type:Boolean}},update:function(t){this._setInvalid(t.invalid)}});const y={properties:{name:{type:String},value:{notify:!0,type:String},required:{type:Boolean,value:!1}},attached:function(){},detached:function(){}},v={NextLabelID:1,NextAddonID:1,NextInputID:1},b={properties:{label:{type:String},value:{notify:!0,type:String},disabled:{type:Boolean,value:!1},invalid:{type:Boolean,value:!1,notify:!0},allowedPattern:{type:String},type:{type:String},list:{type:String},pattern:{type:String},required:{type:Boolean,value:!1},errorMessage:{type:String},charCounter:{type:Boolean,value:!1},noLabelFloat:{type:Boolean,value:!1},alwaysFloatLabel:{type:Boolean,value:!1},autoValidate:{type:Boolean,value:!1},validator:{type:String},autocomplete:{type:String,value:"off"},autofocus:{type:Boolean,observer:"_autofocusChanged"},inputmode:{type:String},minlength:{type:Number},maxlength:{type:Number},min:{type:String},max:{type:String},step:{type:String},name:{type:String},placeholder:{type:String,value:""},readonly:{type:Boolean,value:!1},size:{type:Number},autocapitalize:{type:String,value:"none"},autocorrect:{type:String,value:"off"},autosave:{type:String},results:{type:Number},accept:{type:String},multiple:{type:Boolean},_ariaDescribedBy:{type:String,value:""},_ariaLabelledBy:{type:String,value:""},_inputId:{type:String,value:""}},listeners:{"addon-attached":"_onAddonAttached"},keyBindings:{"shift+tab:keydown":"_onShiftTabDown"},hostAttributes:{tabindex:0},get inputElement(){return this.$||(this.$={}),this.$.input||(this._generateInputId(),this.$.input=this.$$("#"+this._inputId)),this.$.input},get _focusableElement(){return this.inputElement},created:function(){this._typesThatHaveText=["date","datetime","datetime-local","month","time","week","file"]},attached:function(){this._updateAriaLabelledBy(),!a&&this.inputElement&&-1!==this._typesThatHaveText.indexOf(this.inputElement.type)&&(this.alwaysFloatLabel=!0)},_appendStringWithSpace:function(t,e){return t=t?t+" "+e:e},_onAddonAttached:function(t){var e=n(t).rootTarget;if(e.id)this._ariaDescribedBy=this._appendStringWithSpace(this._ariaDescribedBy,e.id);else{var i="paper-input-add-on-"+v.NextAddonID++;e.id=i,this._ariaDescribedBy=this._appendStringWithSpace(this._ariaDescribedBy,i)}},validate:function(){return this.inputElement.validate()},_focusBlurHandler:function(t){o._focusBlurHandler.call(this,t),this.focused&&!this._shiftTabPressed&&this._focusableElement&&this._focusableElement.focus()},_onShiftTabDown:function(t){var e=this.getAttribute("tabindex");this._shiftTabPressed=!0,this.setAttribute("tabindex","-1"),this.async((function(){this.setAttribute("tabindex",e),this._shiftTabPressed=!1}),1)},_handleAutoValidate:function(){this.autoValidate&&this.validate()},updateValueAndPreserveCaret:function(t){try{var e=this.inputElement.selectionStart;this.value=t,this.inputElement.selectionStart=e,this.inputElement.selectionEnd=e}catch(e){this.value=t}},_computeAlwaysFloatLabel:function(t,e){return e||t},_updateAriaLabelledBy:function(){var t,e=n(this.root).querySelector("label");e?(e.id?t=e.id:(t="paper-input-label-"+v.NextLabelID++,e.id=t),this._ariaLabelledBy=t):this._ariaLabelledBy=""},_generateInputId:function(){this._inputId&&""!==this._inputId||(this._inputId="input-"+v.NextInputID++)},_onChange:function(t){this.shadowRoot&&this.fire(t.type,{sourceEvent:t},{node:this,bubbles:t.bubbles,cancelable:t.cancelable})},_autofocusChanged:function(){if(this.autofocus&&this._focusableElement){var t=document.activeElement;t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement||this._focusableElement.focus()}}};t({is:"paper-input",_template:e`
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
:host([focused]) {
|
|
outline: none;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
input {
|
|
/* Firefox sets a min-width on the input, which can cause layout issues */
|
|
min-width: 0;
|
|
}
|
|
|
|
/* In 1.x, the <input> is distributed to paper-input-container, which styles it.
|
|
In 2.x the <iron-input> is distributed to paper-input-container, which styles
|
|
it, but in order for this to work correctly, we need to reset some
|
|
of the native input's properties to inherit (from the iron-input) */
|
|
iron-input > input {
|
|
@apply --paper-input-container-shared-input-style;
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
letter-spacing: inherit;
|
|
word-spacing: inherit;
|
|
line-height: inherit;
|
|
text-shadow: inherit;
|
|
color: inherit;
|
|
cursor: inherit;
|
|
}
|
|
|
|
input:disabled {
|
|
@apply --paper-input-container-input-disabled;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
@apply --paper-input-container-input-webkit-spinner;
|
|
}
|
|
|
|
input::-webkit-clear-button {
|
|
@apply --paper-input-container-input-webkit-clear;
|
|
}
|
|
|
|
input::-webkit-calendar-picker-indicator {
|
|
@apply --paper-input-container-input-webkit-calendar-picker-indicator;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
input:-moz-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
input::-moz-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
input::-ms-clear {
|
|
@apply --paper-input-container-ms-clear;
|
|
}
|
|
|
|
input::-ms-reveal {
|
|
@apply --paper-input-container-ms-reveal;
|
|
}
|
|
|
|
input:-ms-input-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
label {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
|
|
<paper-input-container id="container" no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
|
|
|
|
<slot name="prefix" slot="prefix"></slot>
|
|
|
|
<label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>
|
|
|
|
<!-- Need to bind maxlength so that the paper-input-char-counter works correctly -->
|
|
<iron-input bind-value="{{value}}" slot="input" class="input-element" id$="[[_inputId]]" maxlength$="[[maxlength]]" allowed-pattern="[[allowedPattern]]" invalid="{{invalid}}" validator="[[validator]]">
|
|
<input aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" title$="[[title]]" 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]]" role$="[[inputRole]]" aria-haspopup$="[[inputAriaHaspopup]]">
|
|
</iron-input>
|
|
|
|
<slot name="suffix" slot="suffix"></slot>
|
|
|
|
<template is="dom-if" if="[[errorMessage]]">
|
|
<paper-input-error aria-live="assertive" slot="add-on">[[errorMessage]]</paper-input-error>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[charCounter]]">
|
|
<paper-input-char-counter slot="add-on"></paper-input-char-counter>
|
|
</template>
|
|
|
|
</paper-input-container>
|
|
`,behaviors:[[o,l,b],y],properties:{value:{type:String},inputRole:{type:String,value:void 0},inputAriaHaspopup:{type:String,value:void 0}},get _focusableElement(){return this.inputElement._inputElement},listeners:{"iron-input-ready":"_onIronInputReady"},_onIronInputReady:function(){this.$.nativeInput||(this.$.nativeInput=this.$$("input")),this.inputElement&&-1!==this._typesThatHaveText.indexOf(this.$.nativeInput.type)&&(this.alwaysFloatLabel=!0),this.inputElement.bindValue&&this.$.container._handleValueAndAutoValidate(this.inputElement)}});export{p as I,y as a,d as b};
|