2395 lines
217 KiB
JavaScript
2395 lines
217 KiB
JavaScript
|
import{I as e,J as t,K as i,L as n,N as s,_ as a,j as o,e as r,y as l,n as d,f as h,i as c,O as u,d as p,E as m,G as v,P as _,Q as f,S as b,T as g,U as y,V as k,t as x,W as w,X as C,p as A,Y as I,Z as E,$ as S,a0 as $,a1 as V,a2 as T,a3 as P,a4 as O,a5 as B,a6 as L,a7 as M}from"./main-85e087f9.js";import{s as R,F as z,a as D,e as F}from"./c.388f6c87.js";import"./c.eab7754a.js";import{c as N}from"./c.7398f5d5.js";let H=!1,q=[],K=[];function j(){H=!0,requestAnimationFrame((function(){H=!1,function(e){for(;e.length;)U(e.shift())}(q),setTimeout((function(){!function(e){for(let t=0,i=e.length;t<i;t++)U(e.shift())}(K)}))}))}function U(e){const t=e[0],i=e[1],n=e[2];try{i.apply(t,n)}catch(e){setTimeout((()=>{throw e}))}}function W(e,t,i){H||j(),K.push([e,t,i])}const X=e(class extends t{constructor(e){if(super(e),i(this,"_element",void 0),e.type!==n.CHILD)throw new Error("dynamicElementDirective can only be used in content bindings")}update(e,[t,i]){return this._element&&this._element.localName===t?(i&&Object.entries(i).forEach((([e,t])=>{this._element[e]=t})),s):this.render(t,i)}render(e,t){return this._element=document.createElement(e),t&&Object.entries(t).forEach((([e,t])=>{this._element[e]=t})),this._element}}),Y={action:()=>import("./c.bae47305.js"),addon:()=>import("./c.c91fa748.js"),area:()=>import("./c.0931d4e5.js"),attribute:()=>import("./c.a1a1fa36.js"),boolean:()=>import("./c.33478cf6.js"),color_rgb:()=>import("./c.4f8247dc.js"),config_entry:()=>import("./c.89afba42.js"),date:()=>import("./c.f03f3db9.js"),datetime:()=>import("./c.a9f9a1ad.js"),device:()=>import("./c.af6192ab.js"),duration:()=>import("./c.92d158dd.js"),entity:()=>import("./c.ecded9d0.js"),statistic:()=>import("./c.d0bb37e8.js"),file:()=>import("./c.a0797e5e.js"),navigation:()=>import("./c.c14afbb0.js"),number:()=>import("./c.ffceae7a.js"),object:()=>import("./c.dd8473cb.js"),select:()=>Promise.resolve().then((function(){return gi})),state:()=>import("./c.3e134699.js"),target:()=>import("./c.4707854b.js"),template:()=>import("./c.1075ceb6.js"),text:()=>import("./c.6d6a8b76.js"),time:()=>import("./c.a23e6b57.js"),icon:()=>import("./c.d1219bde.js"),media:()=>import("./c.b72da797.js").then((function(e){return e.h})),theme:()=>import("./c.81714150.js"),location:()=>import("./c.eaded7f4.js"),color_temp:()=>import("./c.f23c17e5.js"),"ui-action":()=>import("./c.55c222d3.js"),"ui-color":()=>import("./c.9ca1c36a.js")};a([d("ha-selector")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r()],key:"hass",value:void 0},{kind:"field",decorators:[r()],key:"name",value:void 0},{kind:"field",decorators:[r()],key:"selector",value:void 0},{kind:"field",decorators:[r()],key:"value",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r()],key:"placeholder",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"required",value:()=>!0},{kind:"field",decorators:[r()],key:"context",value:void 0},{kind:"method",key:"focus",value:function(){var e,t;null===(e=this.shadowRoot)||void 0===e||null===(t=e.getElementById("selector"))||void 0===t||t.focus()}},{kind:"get",key:"_type",value:function(){return Object.keys(this.selector)[0]}},{kind:"method",key:"willUpdate",value:function(e){var t;e.has("selector")&&this.selector&&(null===(t=Y[this._type])||void 0===t||t.call(Y))}},{kind:"method",key:"render",value:function(){return l`
|
||
|
${X(`ha-selector-${this._type}`,{hass:this.hass,name:this.name,selector:this.selector,value:this.value,label:this.label,placeholder:this.placeholder,disabled:this.disabled,required:this.required,helper:this.helper,context:this.context,id:"selector"})}
|
||
|
`}}]}}),o);let G=class extends z{};G.styles=[R],G=h([d("mwc-formfield")],G),a([d("ha-form-boolean")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r()],key:"schema",value:void 0},{kind:"field",decorators:[r()],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[c("ha-checkbox",!0)],key:"_input",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){return l`
|
||
|
<mwc-formfield .label=${this.label}>
|
||
|
<ha-checkbox
|
||
|
.checked=${this.data}
|
||
|
.disabled=${this.disabled}
|
||
|
@change=${this._valueChanged}
|
||
|
></ha-checkbox>
|
||
|
</mwc-formfield>
|
||
|
`}},{kind:"method",key:"_valueChanged",value:function(e){u(this,"value-changed",{value:e.target.checked})}}]}}),o),a([d("ha-form-constant")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"method",key:"render",value:function(){return l`<span class="label">${this.label}</span>${this.schema.value?`: ${this.schema.value}`:""}`}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host {
|
||
|
display: block;
|
||
|
}
|
||
|
.label {
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
`}}]}}),o),a([d("ha-form-float")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[c("ha-textfield")],key:"_input",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){var e;return l`
|
||
|
<ha-textfield
|
||
|
type="numeric"
|
||
|
inputMode="decimal"
|
||
|
.label=${this.label}
|
||
|
.helper=${this.helper}
|
||
|
helperPersistent
|
||
|
.value=${void 0!==this.data?this.data:""}
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.schema.required}
|
||
|
.autoValidate=${this.schema.required}
|
||
|
.suffix=${null===(e=this.schema.description)||void 0===e?void 0:e.suffix}
|
||
|
.validationMessage=${this.schema.required?"Required":void 0}
|
||
|
@input=${this._valueChanged}
|
||
|
></ha-textfield>
|
||
|
`}},{kind:"method",key:"updated",value:function(e){e.has("schema")&&this.toggleAttribute("own-margin",!!this.schema.required)}},{kind:"method",key:"_valueChanged",value:function(e){const t=e.target,i=t.value.replace(",",".");let n;if(!i.endsWith(".")&&"-"!==i)if(""!==i&&(n=parseFloat(i),isNaN(n)&&(n=void 0)),this.data!==n)u(this,"value-changed",{value:n});else{const e=void 0===n?"":String(n);t.value!==e&&(t.value=e)}}},{kind:"field",static:!0,key:"styles",value:()=>p`
|
||
|
:host([own-margin]) {
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
ha-textfield {
|
||
|
display: block;
|
||
|
}
|
||
|
`}]}}),o),a([d("ha-form-grid")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[r({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r()],key:"computeLabel",value:void 0},{kind:"field",decorators:[r()],key:"computeHelper",value:void 0},{kind:"method",key:"updated",value:function(e){m(v(i.prototype),"updated",this).call(this,e),e.has("schema")&&(this.schema.column_min_width?this.style.setProperty("--form-grid-min-width",this.schema.column_min_width):this.style.setProperty("--form-grid-min-width",""))}},{kind:"method",key:"render",value:function(){return l`
|
||
|
${this.schema.schema.map((e=>l`
|
||
|
<ha-form
|
||
|
.hass=${this.hass}
|
||
|
.data=${this.data}
|
||
|
.schema=${[e]}
|
||
|
.disabled=${this.disabled}
|
||
|
.computeLabel=${this.computeLabel}
|
||
|
.computeHelper=${this.computeHelper}
|
||
|
></ha-form>
|
||
|
`))}
|
||
|
`}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host {
|
||
|
display: grid !important;
|
||
|
grid-template-columns: repeat(
|
||
|
var(--form-grid-column-count, auto-fit),
|
||
|
minmax(var(--form-grid-min-width, 200px), 1fr)
|
||
|
);
|
||
|
grid-column-gap: 8px;
|
||
|
grid-row-gap: 24px;
|
||
|
}
|
||
|
:host > ha-form {
|
||
|
display: block;
|
||
|
}
|
||
|
`}}]}}),o),a([d("ha-form-expandable")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r()],key:"computeLabel",value:void 0},{kind:"field",decorators:[r()],key:"computeHelper",value:void 0},{kind:"method",key:"render",value:function(){var e,t;return l`
|
||
|
<ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
|
||
|
<div
|
||
|
slot="header"
|
||
|
role="heading"
|
||
|
aria-level=${null!==(e=null===(t=this.schema.headingLevel)||void 0===t?void 0:t.toString())&&void 0!==e?e:"3"}
|
||
|
>
|
||
|
${this.schema.icon?l` <ha-icon .icon=${this.schema.icon}></ha-icon> `:this.schema.iconPath?l` <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon> `:null}
|
||
|
${this.schema.title}
|
||
|
</div>
|
||
|
<div class="content">
|
||
|
<ha-form
|
||
|
.hass=${this.hass}
|
||
|
.data=${this.data}
|
||
|
.schema=${this.schema.schema}
|
||
|
.disabled=${this.disabled}
|
||
|
.computeLabel=${this.computeLabel}
|
||
|
.computeHelper=${this.computeHelper}
|
||
|
></ha-form>
|
||
|
</div>
|
||
|
</ha-expansion-panel>
|
||
|
`}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host {
|
||
|
display: flex !important;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
:host ha-form {
|
||
|
display: block;
|
||
|
}
|
||
|
.content {
|
||
|
padding: 12px;
|
||
|
}
|
||
|
ha-expansion-panel {
|
||
|
display: block;
|
||
|
--expansion-panel-content-padding: 0;
|
||
|
border-radius: 6px;
|
||
|
}
|
||
|
ha-svg-icon,
|
||
|
ha-icon {
|
||
|
color: var(--secondary-text-color);
|
||
|
}
|
||
|
`}}]}}),o);const Q=_({_template:f`
|
||
|
<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(){Q.instance||(Q.instance=this),document.addEventListener("iron-announce",this._onIronAnnounce.bind(this))},announce:function(e){this._text="",this.async((function(){this._text=e}),this.timeout)},_onIronAnnounce:function(e){e.detail&&e.detail.text&&this.announce(e.detail.text)}});Q.instance=null,Q.requestAvailability=function(){Q.instance||(Q.instance=document.createElement("iron-a11y-announcer")),document.body?document.body.appendChild(Q.instance):document.addEventListener("load",(function(){document.body.appendChild(Q.instance)}))};class J{constructor(e){J[" "](e),this.type=e&&e.type||"default",this.key=e&&e.key,e&&"value"in e&&(this.value=e.value)}get value(){var e=this.type,t=this.key;if(e&&t)return J.types[e]&&J.types[e][t]}set value(e){var t=this.type,i=this.key;t&&i&&(t=J.types[t]=J.types[t]||{},null==e?delete t[i]:t[i]=e)}get list(){if(this.type){var e=J.types[this.type];return e?Object.keys(e).map((function(e){return Z[this.type][e]}),this):[]}}byKey(e){return this.key=e,this.value}}J[" "]=function(){},J.types={};var Z=J.types;_({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(e,t,i){var n=new J({type:e,key:t});return void 0!==i&&i!==n.value?n.value=i:this.value!==n.value&&(this.value=n.value),n},get list(){return this.__meta&&this.__meta.list},_selfChanged:function(e){e&&(this.value=this)},byKey:function(e){return new J({type:this.type,key:e}).value}});let ee=null;const te={properties:{validator:{type:String},invalid:{notify:!0,reflectToAttribute:!0,type:Boolean,value:!1,observer:"_invalidChanged"}},registered:function(){ee=new J({type:"validator"})},_invalidChanged:function(){this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")},get _validator(){return ee&&ee.byKey(this.validator)},hasValidator:function(){return null!=this._validator},validate:function(e){return void 0===e&&void 0!==this.value?this.invalid=!this._getValidity(this.value):this.invalid=!this._getValidity(e),!this.invalid},_getValidity:function(e){return!this.hasValidator()||this._validator.validate(e)}};_({_template:f`
|
||
|
<style>
|
||
|
:host {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
</style>
|
||
|
<slot id="content"></slot>
|
||
|
`,is:"iron-input",behaviors:[te],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(){Q.requestAvailability(),this._previousValidInput="",this._patternAlreadyChecked=!1},attached:function(){this._observer=b(this).observeNodes(function(e){this._initSlottedInput()}.bind(this))},detached:function(){this._observer&&(b(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 e;if(this.allowedPattern)e=new RegExp(this.allowedPattern);else if("number"===this.inputElement.type)e=/[0-9.,e-]/;return e},_bindValueChanged:function(e,t){t&&(void 0===e?t.value=null:e!==t.value&&(this.inputElement.value=e),this.autoValidate&&this.validate(),this.fire("bind-value-changed",{value:e}))},_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(e){var t=8==e.keyCode||9==e.keyCode||13==e.keyCode||27==e.keyCode,i=19==e.keyCode||20==e.keyCode||45==e.keyCode||46==e.keyCode||144==e.keyCode||145==e.keyCode||e.keyCode>32&&e.keyCode<41||e.keyCode>111&&e.keyCode<124;return!(t||0==e.charCode&&i)},_onKeypress:function(e){if(this.allowedPattern||"number"===this.inputElement.type){var t=this._patternRegExp;if(t&&!(e.metaKey||e.ctrlKey||e.altKey)){this._patternAlreadyChecked=!0;var i=String.fromCharCode(e.charCode);this._isPrintable(e)&&!t.test(i)&&(e.preventDefault(),this._announceInvalidCharacter("Invalid character "+i+" not entered."))}}},_checkPatternValidity:function(){var e=this._patternRegExp;if(!e)return!0;for(var t=0;t<this.inputElement.value.length;t++)if(!e.test(this.inputElement.value[t]))return!1;return!0},validate:function(){if(!this.inputElement)return this.invalid=!1,!0;var e=this.inputElement.checkValidity();return e&&(this.required&&""===this.bindValue?e=!1:this.hasValidator()&&(e=te.validate.call(this,this.bindValue))),this.invalid=!e,this.fire("iron-input-validate"),e},_announceInvalidCharacter:function(e){this.fire("iron-announce",{text:e})},_computeValue:function(e){return e}});const ie={attached:function(){this.fire("addon-attached")},update:function(e){}};_({_template:f`
|
||
|
<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:[ie],properties:{_charCounterStr:{type:String,value:"0"}},update:function(e){if(e.inputElement){e.value=e.value||"";var t=e.value.toString().length.toString();e.inputElement.hasAttribute("maxlength")&&(t+="/"+e.inputElement.getAttribute("maxlength")),this._charCounterStr=t}}});const ne=f`
|
||
|
<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>
|
||
|
`;ne.setAttribute("style","display: none;"),document.head.appendChild(ne.content),_({_template:f`
|
||
|
<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 g(this.attrForValue)},get _inputElement(){return b(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(e){this._addons||(this._addons=[]);var t=e.target;-1===this._addons.indexOf(t)&&(this._addons.push(t),this.isAttached&&this._handleValue(this._inputElement))},_onFocus:function(){this._setFocused(!0)},_onBlur:function(){this._setFocused(!1),this._handleValueAndAutoValidate(this._inputElement)},_onInput:function(e){this._handleValueAndAutoValidate(e.target)},_onValueChanged:function(e){var t=e.target;this.__isFirstValueUpdate&&(this.__isFirstValueUpdate=!1,void 0===t.value||""===t.value)||this._handleValueAndAutoValidate(e.target)},_handleValue:function(e){var t=this._inputElementValue;t||0===t||"number"===e.type&&!e.checkValidity()?this._inputHasContent=!0:this._inputHasContent=!1,this.updateAddons({inputElement:e,value:t,invalid:this.invalid})},_handleValueAndAutoValidate:function(e){var t;this.autoValidate&&e&&(t=e.validate?e.validate(this._inputElementValue):e.checkValidity(),this.invalid=!t);this._handleValue(e)},_onIronInputValidate:function(e){this.invalid=this._inputElement.invalid},_invalidChanged:function(){this._addons&&this.updateAddons({invalid:this.invalid})},updateAddons:function(e){for(var t,i=0;t=this._addons[i];i++)t.update(e)},_computeInputContentClass:function(e,t,i,n,s){var a="input-content";if(e)s&&(a+=" label-is-hidden"),n&&(a+=" is-invalid");else{var o=this.querySelector("label");t||s?(a+=" label-is-floating",this.$.labelAndInputContainer.style.position="static",n?a+=" is-invalid":i&&(a+=" label-is-highlighted")):(o&&(this.$.labelAndInputContainer.style.position="relative"),n&&(a+=" is-invalid"))}return i&&(a+=" focused"),a},_computeUnderlineClass:function(e,t){var i="underline";return t?i+=" is-invalid":e&&(i+=" is-highlighted"),i},_computeAddOnContentClass:function(e,t){var i="add-on-content";return t?i+=" is-invalid":e&&(i+=" is-highlighted"),i}}),_({_template:f`
|
||
|
<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:[ie],properties:{invalid:{readOnly:!0,reflectToAttribute:!0,type:Boolean}},update:function(e){this._setInvalid(e.invalid)}});const se={properties:{name:{type:String},value:{notify:!0,type:String},required:{type:Boolean,value:!1}},attached:function(){},detached:function(){}};var ae={"U+0008":"backspace","U+0009":"tab","U+001B":"esc","U+0020":"space","U+007F":"del"},oe={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:"*"},re={shift:"shiftKey",ctrl:"ctrlKey",alt:"altKey",meta:"metaKey"},le=/[a-z0-9*]/,de=/U\+/,he=/^arrow/,ce=/^space(bar)?/,ue=/^escape$/;function pe(e,t){var i="";if(e){var n=e.toLowerCase();" "===n||ce.test(n)?i="space":ue.test(n)?i="esc":1==n.length?t&&!le.test(n)||(i=n):i=he.test(n)?n.replace("arrow",""):"multiply"==n?"*":n}return i}function me(e,t){return e.key?pe(e.key,t):e.detail&&e.detail.key?pe(e.detail.key,t):(i=e.keyIdentifier,n="",i&&(i in ae?n=ae[i]:de.test(i)?(i=parseInt(i.replace("U+","0x"),16),n=String.fromCharCode(i).toLowerCase()):n=i.toLowerCase()),n||function(e){var t="";return Number(e)&&(t=e>=65&&e<=90?String.fromCharCode(32+e):e>=112&&e<=123?"f"+(e-112+1):e>=48&&e<=57?String(e-48):e>=96&&e<=105?String(e-96):oe[e]),t}(e.keyCode)||"");var i,n}function ve(e,t){return me(t,e.hasModifiers)===e.key&&(!e.hasModifiers||!!t.shiftKey==!!e.shiftKey&&!!t.ctrlKey==!!e.ctrlKey&&!!t.altKey==!!e.altKey&&!!t.metaKey==!!e.metaKey)}function _e(e){return e.trim().split(" ").map((function(e){return function(e){return 1===e.length?{combo:e,key:e,event:"keydown"}:e.split("+").reduce((function(e,t){var i=t.split(":"),n=i[0],s=i[1];return n in re?(e[re[n]]=!0,e.hasModifiers=!0):(e.key=n,e.event=s||"keydown"),e}),{combo:e.split(":").shift()})}(e)}))}const fe={properties:{keyEventTarget:{type:Object,value:function(){return this}},stopKeyboardEventPropagation:{type:Boolean,value:!1},_boundKeyHandlers:{type:Array,value:function(){return[]}},_imperativeKeyBindings:{type:Object,value:function(){return{}}}},observers:["_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)"],keyBindings:{},registered:function(){this._prepKeyBindings()},attached:function(){this._listenKeyEventListeners()},detached:function(){this._unlistenKeyEventListeners()},addOwnKeyBinding:function(e,t){this._imperativeKeyBindings[e]=t,this._prepKeyBindings(),this._resetKeyEventListeners()},removeOwnKeyBindings:function(){this._imperativeKeyBindings={},this._prepKeyBindings(),this._resetKeyEventListeners()},keyboardEventMatchesKeys:function(e,t){for(var i=_e(t),n=0;n<i.length;++n)if(ve(i[n],e))return!0;return!1},_collectKeyBindings:function(){var e=this.behaviors.map((function(e){return e.keyBindings}));return-1===e.indexOf(this.keyBindings)&&e.push(this.keyBindings),e},_prepKeyBindings:function(){for(var e in this._keyBindings={},this._collectKeyBindings().forEach((function(e){for(var t in e)this._addKeyBinding(t,e[t])}),this),this._imperativeKeyBindings)this._addKeyBinding(e,this._imperativeKeyBindings[e]);for(var t in this._keyBindings)this._keyBindings[t].sort((function(e,t){var i=e[0].hasModifiers;return i===t[0].hasModifiers?0:i?-1:1}))},_addKeyBinding:function(e,t){_e(e).forEach((function(e){this._keyBindings[e.event]=this._keyBindings[e.event]||[],this._keyBindings[e.event].push([e,t])}),this)},_resetKeyEventListeners:function(){this._unlistenKeyEventListeners(),this.isAttached&&this._listenKeyEventListeners()},_listenKeyEventListeners:function(){this.keyEventTarget&&Object.keys(this._keyBindings).forEach((function(e){var t=this._keyBindings[e],i=this._onKeyBindingEvent.bind(this,t);this._boundKeyHandlers.push([this.keyEventTarget,e,i]),this.keyEventTarget.addEventListener(e,i)}),this)},_unlistenKeyEventListeners:function(){for(var e,t,i,n;this._boundKeyHandlers.length;)t=(e=this._boundKeyHandlers.pop())[0],i=e[1],n=e[2],t.removeEventListener(i,n)},_onKeyBindingEvent:function(e,t){if(this.stopKeyboardEventPropagation&&t.stopPropagation(),!t.defaultPrevented)for(var i=0;i<e.length;i++){var n=e[i][0],s=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:[[be,fe,ye],se],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)}});const ke={properties:{value:{type:Number,value:0,notify:!0,reflectToAttribute:!0},min:{type:Number,value:0,notify:!0},max:{type:Number,value:100,notify:!0},step:{type:Number,value:1,notify:!0},ratio:{type:Number,value:0,readOnly:!0,notify:!0}},observers:["_update(value, min, max, step)"],_calcRatio:function(e){return(this._clampValue(e)-this.min)/(this.max-this.min)},_clampValue:function(e){return Math.min(this.max,Math.max(this.min,this._calcStep(e)))},_calcStep:function(e){if(e=parseFloat(e),!this.step)return e;var t=Math.round((e-this.min)/this.step);return this.step<1?t/(1/this.step)+this.min:t*this.step+this.min},_validateValue:function(){var e=this._clampValue(this.value);return this.value=this.oldValue=isNaN(e)?this.oldValue:e,this.value!==e},_update:function(){this._validateValue(),this._setRatio(100*this._calcRatio(this.value))}};_({_template:f`
|
||
|
<style>
|
||
|
:host {
|
||
|
display: block;
|
||
|
width: 200px;
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
:host([hidden]), [hidden] {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
#progressContainer {
|
||
|
@apply --paper-progress-container;
|
||
|
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: var(--paper-progress-container-color, var(--google-grey-300));
|
||
|
}
|
||
|
|
||
|
:host(.transiting) #primaryProgress,
|
||
|
:host(.transiting) #secondaryProgress {
|
||
|
-webkit-transition-property: -webkit-transform;
|
||
|
transition-property: transform;
|
||
|
|
||
|
/* Duration */
|
||
|
-webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
||
|
transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
||
|
|
||
|
/* Timing function */
|
||
|
-webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
||
|
transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
||
|
|
||
|
/* Delay */
|
||
|
-webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
|
||
|
transition-delay: var(--paper-progress-transition-delay, 0s);
|
||
|
}
|
||
|
|
||
|
#primaryProgress,
|
||
|
#secondaryProgress {
|
||
|
@apply --layout-fit;
|
||
|
-webkit-transform-origin: left center;
|
||
|
transform-origin: left center;
|
||
|
-webkit-transform: scaleX(0);
|
||
|
transform: scaleX(0);
|
||
|
will-change: transform;
|
||
|
}
|
||
|
|
||
|
#primaryProgress {
|
||
|
background: var(--paper-progress-active-color, var(--google-green-500));
|
||
|
}
|
||
|
|
||
|
#secondaryProgress {
|
||
|
background: var(--paper-progress-secondary-color, var(--google-green-100));
|
||
|
}
|
||
|
|
||
|
:host([disabled]) #primaryProgress {
|
||
|
background: var(--paper-progress-disabled-active-color, var(--google-grey-500));
|
||
|
}
|
||
|
|
||
|
:host([disabled]) #secondaryProgress {
|
||
|
background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300));
|
||
|
}
|
||
|
|
||
|
:host(:not([disabled])) #primaryProgress.indeterminate {
|
||
|
-webkit-transform-origin: right center;
|
||
|
transform-origin: right center;
|
||
|
-webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
||
|
animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
||
|
}
|
||
|
|
||
|
:host(:not([disabled])) #primaryProgress.indeterminate::after {
|
||
|
content: "";
|
||
|
-webkit-transform-origin: center center;
|
||
|
transform-origin: center center;
|
||
|
|
||
|
-webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
||
|
animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes indeterminate-bar {
|
||
|
0% {
|
||
|
-webkit-transform: scaleX(1) translateX(-100%);
|
||
|
}
|
||
|
50% {
|
||
|
-webkit-transform: scaleX(1) translateX(0%);
|
||
|
}
|
||
|
75% {
|
||
|
-webkit-transform: scaleX(1) translateX(0%);
|
||
|
-webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
||
|
}
|
||
|
100% {
|
||
|
-webkit-transform: scaleX(0) translateX(0%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes indeterminate-splitter {
|
||
|
0% {
|
||
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
||
|
}
|
||
|
30% {
|
||
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
||
|
-webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
||
|
}
|
||
|
90% {
|
||
|
-webkit-transform: scaleX(.75) translateX(125%);
|
||
|
}
|
||
|
100% {
|
||
|
-webkit-transform: scaleX(.75) translateX(125%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes indeterminate-bar {
|
||
|
0% {
|
||
|
transform: scaleX(1) translateX(-100%);
|
||
|
}
|
||
|
50% {
|
||
|
transform: scaleX(1) translateX(0%);
|
||
|
}
|
||
|
75% {
|
||
|
transform: scaleX(1) translateX(0%);
|
||
|
animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
||
|
}
|
||
|
100% {
|
||
|
transform: scaleX(0) translateX(0%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes indeterminate-splitter {
|
||
|
0% {
|
||
|
transform: scaleX(.75) translateX(-125%);
|
||
|
}
|
||
|
30% {
|
||
|
transform: scaleX(.75) translateX(-125%);
|
||
|
animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
||
|
}
|
||
|
90% {
|
||
|
transform: scaleX(.75) translateX(125%);
|
||
|
}
|
||
|
100% {
|
||
|
transform: scaleX(.75) translateX(125%);
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<div id="progressContainer">
|
||
|
<div id="secondaryProgress" hidden\$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
||
|
<div id="primaryProgress"></div>
|
||
|
</div>
|
||
|
`,is:"paper-progress",behaviors:[ke],properties:{secondaryProgress:{type:Number,value:0},secondaryRatio:{type:Number,value:0,readOnly:!0},indeterminate:{type:Boolean,value:!1,observer:"_toggleIndeterminate"},disabled:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_disabledChanged"}},observers:["_progressChanged(secondaryProgress, value, min, max, indeterminate)"],hostAttributes:{role:"progressbar"},_toggleIndeterminate:function(e){this.toggleClass("indeterminate",e,this.$.primaryProgress)},_transformProgress:function(e,t){var i="scaleX("+t/100+")";e.style.transform=e.style.webkitTransform=i},_mainRatioChanged:function(e){this._transformProgress(this.$.primaryProgress,e)},_progressChanged:function(e,t,i,n,s){e=this._clampValue(e),t=this._clampValue(t);var a=100*this._calcRatio(e),o=100*this._calcRatio(t);this._setSecondaryRatio(a),this._transformProgress(this.$.secondaryProgress,a),this._transformProgress(this.$.primaryProgress,o),this.secondaryProgress=e,s?this.removeAttribute("aria-valuenow"):this.setAttribute("aria-valuenow",t),this.setAttribute("aria-valuemin",i),this.setAttribute("aria-valuemax",n)},_disabledChanged:function(e){this.setAttribute("aria-disabled",e?"true":"false")},_hideSecondaryProgress:function(e){return 0===e}});const xe={properties:{pressed:{type:Boolean,readOnly:!0,value:!1,reflectToAttribute:!0,observer:"_pressedChanged"},toggles:{type:Boolean,value:!1,reflectToAttribute:!0},active:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0},pointerDown:{type:Boolean,readOnly:!0,value:!1},receivedFocusFromKeyboard:{type:Boolean,readOnly:!0},ariaActiveAttribute:{type:String,value:"aria-pressed",observer:"_ariaActiveAttributeChanged"}},listeners:{down:"_downHandler",up:"_upHandler",tap:"_tapHandler"},observers:["_focusChanged(focused)","_activeChanged(active, ariaActiveAttribute)"],keyBindings:{"enter:keydown":"_asyncClick","space:keydown":"_spaceKeyDownHandler","space:keyup":"_spaceKeyUpHandler"},_mouseEventRe:/^mouse/,_tapHandler:function(){this.toggles?this._userActivate(!this.active):this.active=!1},_focusChanged:function(e){this._detectKeyboardFocus(e),e||this._setPressed(!1)},_detectKeyboardFocus:function(e){this._setReceivedFocusFromKeyboard(!this.pointerDown&&e)},_userActivate:function(e){this.active!==e&&(this.active=e,this.fire("change"))},_downHandler:function(e){this._setPointerDown(!0),this._setPressed(!0),this._setReceivedFocusFromKeyboard(!1)},_upHandler:function(){this._setPointerDown(!1),this._setPressed(!1)},_spaceKeyDownHandler:function(e){var t=e.detail.keyboardEvent,i=b(t).localTarget;this.isLightDescendant(i)||(t.preventDefault(),t.stopImmediatePropagation(),this._setPressed(!0))},_spaceKeyUpHandler:function(e){var t=e.detail.keyboardEvent,i=b(t).localTarget;this.isLightDescendant(i)||(this.pressed&&this._asyncClick(),this._setPressed(!1))},_asyncClick:function(){this.async((function(){this.click()}),1)},_pressedChanged:function(e){this._changedButtonState()},_ariaActiveAttributeChanged:function(e,t){t&&t!=e&&this.hasAttribute(t)&&this.removeAttribute(t)},_activeChanged:function(e,t){this.toggles?this.setAttribute(this.ariaActiveAttribute,e?"true":"false"):this.removeAttribute(this.ariaActiveAttribute),this._changedButtonState()},_controlStateChanged:function(){this.disabled?this._setPressed(!1):this._changedButtonState()},_changedButtonState:function(){this._buttonStateChanged&&this._buttonStateChanged()}},we=[fe,xe];var Ce={distance:function(e,t,i,n){var s=e-i,a=t-n;return Math.sqrt(s*s+a*a)},now:window.performance&&window.performance.now?window.performance.now.bind(window.performance):Date.now};function Ae(e){this.element=e,this.width=this.boundingRect.width,this.height=this.boundingRect.height,this.size=Math.max(this.width,this.height)}function Ie(e){this.element=e,this.color=window.getComputedStyle(e).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"),b(this.waveContainer).appendChild(this.wave),this.
|
||
|
<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>
|
||
|
`,is:"paper-ripple",behaviors:[fe],properties:{initialOpacity:{type:Number,value:.25},opacityDecayVelocity:{type:Number,value:.8},recenters:{type:Boolean,value:!1},center:{type:Boolean,value:!1},ripples:{type:Array,value:function(){return[]}},animating:{type:Boolean,readOnly:!0,reflectToAttribute:!0,value:!1},holdDown:{type:Boolean,value:!1,observer:"_holdDownChanged"},noink:{type:Boolean,value:!1},_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(){11==b(this).parentNode.nodeType?this.keyEventTarget=b(this).getOwnerRoot().host:this.keyEventTarget=b(this).parentNode;var e=this.keyEventTarget;this.listen(e,"up","uiUpAction"),this.listen(e,"down","uiDownAction")},detached:function(){this.unlisten(this.keyEventTarget,"up","uiUpAction"),this.unlisten(this.keyEventTarget,"down","uiDownAction"),this.keyEventTarget=null},get shouldKeepAnimating(){for(var e=0;e<this.ripples.length;++e)if(!this.ripples[e].isAnimationComplete)return!0;return!1},simulatedRipple:function(){this.downAction(null),this.async((function(){this.upAction()}),1)},uiDownAction:function(e){this.noink||this.downAction(e)},downAction:function(e){this.holdDown&&this.ripples.length>0||(this.addRipple().downAction(e),this._animating||(this._animating=!0,this.animate()))},uiUpAction:function(e){this.noink||this.upAction(e)},upAction:function(e){this.holdDown||(this.ripples.forEach((function(t){t.upAction(e)})),this._animating=!0,this.animate())},onAnimationComplete:function(){this._animating=!1,this.$.background.style.backgroundColor="",this.fire("transitionend")},addRipple:function(){var e=new Ie(this);return b(this.$.waves).appendChild(e.waveContainer),this.$.background.style.backgroundColor=e.color,this.ripples.push(e),this._setAnimating(!0),e},removeRipple:function(e){var t=this.ripples.indexOf(e);t<0||(this.ripples.splice(t,1),e.remove(),this.ripples.length||this._setAnimating(!1))},animate:function(){if(this._animating){var e,t;for(e=0;e<this.ripples.length;++e)(t=this.ripples[e]).draw(),this.$.background.style.opacity=t.outerOpacity,t.isOpacityFullyDecayed&&!t.isRestingAtMaxRadius&&this.removeRipple(t);this.shouldKeepAnimating||0!==this.ripples.length?window.requestAnimationFrame(this._boundAnimate):this.onAnimationComplete()}},animateRipple:function(){return this.animate()},_onEnterKeydown:function(){this.uiDownAction(),this.async(this.uiUpAction,1)},_onSpaceKeydown:function(){this.uiDownAction()},_onSpaceKeyup:function(){this.uiUpAction()},_holdDownChanged:function(e,t){void 0!==t&&(e?this.downAction():this.upAction())}});const Ee={properties:{noink:{type:Boolean,observer:"_noinkChanged"},_rippleContainer:{type:Object}},_buttonStateChanged:function(){this.focused&&this.ensureRipple()},_downHandler:function(e){xe._downHandler.call(this,e),this.pressed&&this.ensureRipple(e)},ensureRipple:function(e){if(!this.hasRipple()){this._ripple=this._createRipple(),this._ripple.noink=this.noink;var t=this._rippleContainer||this.root;if(t&&b(t).appendChild(this._ripple),e){var i=b(this._rippleContainer||this),n=b(e).rootTarget;i.deepContains(n)&&this._ripple.uiDownAction(e)}}},getRipple:function(){return this.ensureRipple(),this._ripple},hasRipple:function(){return Boolean(this._ripple)},_createRipple:function(){return document.createElement("paper-ripple")},_noinkChanged:function(e){this.hasRipple()&&(this._ripple.noink=e)}},Se={observers:["_focusedChanged(receivedFocusFromKeyboard)"],_focusedChanged:function(e){e&&this.ensureRipple(),this.hasRipple()&&(this._ripple.holdDown=e)},_createRipple:function(){var e=Ee._createRipple();return e.id="ink",e.setAttribute("center",""),e.classList.add("circle"),e}},$e=[we,be,Ee,Se],Ve=f`
|
||
|
<style>
|
||
|
:host {
|
||
|
@apply --layout;
|
||
|
@apply --layout-justified;
|
||
|
@apply --layout-center;
|
||
|
width: 200px;
|
||
|
cursor: default;
|
||
|
-webkit-user-select: none;
|
||
|
-moz-user-select: none;
|
||
|
-ms-user-select: none;
|
||
|
user-select: none;
|
||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||
|
--paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
|
||
|
--paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
|
||
|
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
|
||
|
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
|
||
|
--calculated-paper-slider-height: var(--paper-slider-height, 2px);
|
||
|
}
|
||
|
|
||
|
/* focus shows the ripple */
|
||
|
:host(:focus) {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* NOTE(keanulee): Though :host-context is not universally supported, some pages
|
||
|
* still rely on paper-slider being flipped when dir="rtl" is set on body. For full
|
||
|
* compatibility, dir="rtl" must be explicitly set on paper-slider.
|
||
|
*/
|
||
|
:dir(rtl) #sliderContainer {
|
||
|
-webkit-transform: scaleX(-1);
|
||
|
transform: scaleX(-1);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* NOTE(keanulee): This is separate from the rule above because :host-context may
|
||
|
* not be recognized.
|
||
|
*/
|
||
|
:host([dir="rtl"]) #sliderContainer {
|
||
|
-webkit-transform: scaleX(-1);
|
||
|
transform: scaleX(-1);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* NOTE(keanulee): Needed to override the :host-context rule (where supported)
|
||
|
* to support LTR sliders in RTL pages.
|
||
|
*/
|
||
|
:host([dir="ltr"]) #sliderContainer {
|
||
|
-webkit-transform: scaleX(1);
|
||
|
transform: scaleX(1);
|
||
|
}
|
||
|
|
||
|
#sliderContainer {
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
height: calc(30px + var(--calculated-paper-slider-height));
|
||
|
margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
|
||
|
margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
|
||
|
}
|
||
|
|
||
|
#sliderContainer:focus {
|
||
|
outline: 0;
|
||
|
}
|
||
|
|
||
|
#sliderContainer.editable {
|
||
|
margin-top: 12px;
|
||
|
margin-bottom: 12px;
|
||
|
}
|
||
|
|
||
|
.bar-container {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.ring > .bar-container {
|
||
|
left: calc(5px + var(--calculated-paper-slider-height)/2);
|
||
|
transition: left 0.18s ease;
|
||
|
}
|
||
|
|
||
|
.ring.expand.dragging > .bar-container {
|
||
|
transition: none;
|
||
|
}
|
||
|
|
||
|
.ring.expand:not(.pin) > .bar-container {
|
||
|
left: calc(8px + var(--calculated-paper-slider-height)/2);
|
||
|
}
|
||
|
|
||
|
#sliderBar {
|
||
|
padding: 15px 0;
|
||
|
width: 100%;
|
||
|
background-color: var(--paper-slider-bar-color, transparent);
|
||
|
--paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
|
||
|
--paper-progress-height: var(--calculated-paper-slider-height);
|
||
|
}
|
||
|
|
||
|
.slider-markers {
|
||
|
position: absolute;
|
||
|
/* slider-knob is 30px + the slider-height so that the markers should start at a offset of 15px*/
|
||
|
top: 15px;
|
||
|
height: var(--calculated-paper-slider-height);
|
||
|
left: 0;
|
||
|
right: -1px;
|
||
|
box-sizing: border-box;
|
||
|
pointer-events: none;
|
||
|
@apply --layout-horizontal;
|
||
|
}
|
||
|
|
||
|
.slider-marker {
|
||
|
@apply --layout-flex;
|
||
|
}
|
||
|
.slider-markers::after,
|
||
|
.slider-marker::after {
|
||
|
content: "";
|
||
|
display: block;
|
||
|
margin-left: -1px;
|
||
|
width: 2px;
|
||
|
height: var(--calculated-paper-slider-height);
|
||
|
border-radius: 50%;
|
||
|
background-color: var(--paper-slider-markers-color, #000);
|
||
|
}
|
||
|
|
||
|
.slider-knob {
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
|
||
|
width: calc(30px + var(--calculated-paper-slider-height));
|
||
|
height: calc(30px + var(--calculated-paper-slider-height));
|
||
|
}
|
||
|
|
||
|
.transiting > .slider-knob {
|
||
|
transition: left 0.08s ease;
|
||
|
}
|
||
|
|
||
|
.slider-knob:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
.slider-knob.dragging {
|
||
|
transition: none;
|
||
|
}
|
||
|
|
||
|
.snaps > .slider-knob.dragging {
|
||
|
transition: -webkit-transform 0.08s ease;
|
||
|
transition: transform 0.08s ease;
|
||
|
}
|
||
|
|
||
|
.slider-knob-inner {
|
||
|
margin: 10px;
|
||
|
width: calc(100% - 20px);
|
||
|
height: calc(100% - 20px);
|
||
|
background-color: var(--paper-slider-knob-color, var(--google-blue-700));
|
||
|
border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
|
||
|
border-radius: 50%;
|
||
|
|
||
|
-moz-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
|
||
|
transition-property: -webkit-transform, background-color, border;
|
||
|
transition-property: transform, background-color, border;
|
||
|
transition-duration: 0.18s;
|
||
|
transition-timing-function: ease;
|
||
|
}
|
||
|
|
||
|
.expand:not(.pin) > .slider-knob > .slider-knob-inner {
|
||
|
-webkit-transform: scale(1.5);
|
||
|
transform: scale(1.5);
|
||
|
}
|
||
|
|
||
|
.ring > .slider-knob > .slider-knob-inner {
|
||
|
background-color: var(--paper-slider-knob-start-color, transparent);
|
||
|
border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
|
||
|
}
|
||
|
|
||
|
.slider-knob-inner::before {
|
||
|
background-color: var(--paper-slider-pin-color, var(--google-blue-700));
|
||
|
}
|
||
|
|
||
|
.pin > .slider-knob > .slider-knob-inner::before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 50%;
|
||
|
margin-left: -13px;
|
||
|
width: 26px;
|
||
|
height: 26px;
|
||
|
border-radius: 50% 50% 50% 0;
|
||
|
|
||
|
-webkit-transform: rotate(-45deg) scale(0) translate(0);
|
||
|
transform: rotate(-45deg) scale(0) translate(0);
|
||
|
}
|
||
|
|
||
|
.slider-knob-inner::before,
|
||
|
.slider-knob-inner::after {
|
||
|
transition: -webkit-transform .18s ease, background-color .18s ease;
|
||
|
transition: transform .18s ease, background-color .18s ease;
|
||
|
}
|
||
|
|
||
|
.pin.ring > .slider-knob > .slider-knob-inner::before {
|
||
|
background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
|
||
|
}
|
||
|
|
||
|
.pin.expand > .slider-knob > .slider-knob-inner::before {
|
||
|
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
|
||
|
transform: rotate(-45deg) scale(1) translate(17px, -17px);
|
||
|
}
|
||
|
|
||
|
.pin > .slider-knob > .slider-knob-inner::after {
|
||
|
content: attr(value);
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 50%;
|
||
|
margin-left: -16px;
|
||
|
width: 32px;
|
||
|
height: 26px;
|
||
|
text-align: center;
|
||
|
color: var(--paper-slider-font-color, #fff);
|
||
|
font-size: 10px;
|
||
|
|
||
|
-webkit-transform: scale(0) translate(0);
|
||
|
transform: scale(0) translate(0);
|
||
|
}
|
||
|
|
||
|
.pin.expand > .slider-knob > .slider-knob-inner::after {
|
||
|
-webkit-transform: scale(1) translate(0, -17px);
|
||
|
transform: scale(1) translate(0, -17px);
|
||
|
}
|
||
|
|
||
|
/* paper-input */
|
||
|
.slider-input {
|
||
|
width: 50px;
|
||
|
overflow: hidden;
|
||
|
--paper-input-container-input: {
|
||
|
text-align: center;
|
||
|
@apply --paper-slider-input-container-input;
|
||
|
};
|
||
|
@apply --paper-slider-input;
|
||
|
}
|
||
|
|
||
|
/* disabled state */
|
||
|
#sliderContainer.disabled {
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
.disabled > .slider-knob > .slider-knob-inner {
|
||
|
background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
||
|
border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
||
|
-webkit-transform: scale3d(0.75, 0.75, 1);
|
||
|
transform: scale3d(0.75, 0.75, 1);
|
||
|
}
|
||
|
|
||
|
.disabled.ring > .slider-knob > .slider-knob-inner {
|
||
|
background-color: var(--paper-slider-knob-start-color, transparent);
|
||
|
border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
|
||
|
}
|
||
|
|
||
|
paper-ripple {
|
||
|
color: var(--paper-slider-knob-color, var(--google-blue-700));
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<div id="sliderContainer" class\$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
||
|
<div class="bar-container">
|
||
|
<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="_bartrack" on-tap="_barclick">
|
||
|
</paper-progress>
|
||
|
</div>
|
||
|
|
||
|
<template is="dom-if" if="[[snaps]]">
|
||
|
<div class="slider-markers">
|
||
|
<template is="dom-repeat" items="[[markers]]">
|
||
|
<div class="slider-marker"></div>
|
||
|
</template>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
|
||
|
<div class="slider-knob-inner" value\$="[[immediateValue]]"></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<template is="dom-if" if="[[editable]]">
|
||
|
<paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[[max]]" class="slider-input" disabled\$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float>
|
||
|
</paper-input>
|
||
|
</template>
|
||
|
`;Ve.setAttribute("strip-whitespace",""),_({_template:Ve,is:"paper-slider",behaviors:[fe,se,$e,ke],properties:{value:{type:Number,value:0},snaps:{type:Boolean,value:!1,notify:!0},pin:{type:Boolean,value:!1,notify:!0},secondaryProgress:{type:Number,value:0,notify:!0,observer:"_secondaryProgressChanged"},editable:{type:Boolean,value:!1},immediateValue:{type:Number,value:0,readOnly:!0,notify:!0},maxMarkers:{type:Number,value:0,notify:!0},expand:{type:Boolean,value:!1,readOnly:!0},ignoreBarTouch:{type:Boolean,value:!1},dragging:{type:Boolean,value:!1,readOnly:!0,notify:!0},transiting:{type:Boolean,value:!1,readOnly:!0},markers:{type:Array,readOnly:!0,value:function(){return[]}}},observers:["_updateKnob(value, min, max, snaps, step)","_valueChanged(value)","_immediateValueChanged(immediateValue)","_updateMarkers(maxMarkers, min, max, snaps)"],hostAttributes:{role:"slider",tabindex:0},keyBindings:{left:"_leftKey",right:"_rightKey","down pagedown home":"_decrementKey","up pageup end":"_incrementKey"},ready:function(){this.ignoreBarTouch&&k(this.$.sliderBar,"auto")},increment:function(){this.value=this._clampValue(this.value+this.step)},decrement:function(){this.value=this._clampValue(this.value-this.step)},_updateKnob:function(e,t,i,n,s){this.setAttribute("aria-valuemin",t),this.setAttribute("aria-valuemax",i),this.setAttribute("aria-valuenow",e),this._positionKnob(100*this._calcRatio(e))},_valueChanged:function(){this.fire("value-change",{composed:!0})},_immediateValueChanged:function(){this.dragging?this.fire("immediate-value-change",{composed:!0}):this.value=this.immediateValue},_secondaryProgressChanged:function(){this.secondaryProgress=this._clampValue(this.secondaryProgress)},_expandKnob:function(){this._setExpand(!0)},_resetKnob:function(){this.cancelDebouncer("expandKnob"),this._setExpand(!1)},_positionKnob:function(e){this._setImmediateValue(this._calcStep(this._calcKnobPosition(e))),this._setRatio(100*this._calcRatio(this.immediateValue)),this.$.sliderKnob.style.left=this.ratio+"%",this.dragging&&(this._knobstartx=this.ratio*this._w/100,this.translate3d(0,0,0,this.$.sliderKnob))},_calcKnobPosition:function(e){return(this.max-this.min)*e/100+this.min},_onTrack:function(e){switch(e.stopPropagation(),e.detail.state){case"start":this._trackStart(e);break;case"track":this._trackX(e);break;case"end":this._trackEnd()}},_trackStart:function(e){this._setTransiting(!1),this._w=this.$.sliderBar.offsetWidth,this._x=this.ratio*this._w/100,this._startx=this._x,this._knobstartx=this._startx,this._minx=-this._startx,this._maxx=this._w-this._startx,this.$.sliderKnob.classList.add("dragging"),this._setDragging(!0)},_trackX:function(e){this.dragging||this._trackStart(e);var t=this._isRTL?-1:1,i=Math.min(this._maxx,Math.max(this._minx,e.detail.dx*t));this._x=this._startx+i;var n=this._calcStep(this._calcKnobPosition(this._x/this._w*100));this._setImmediateValue(n);var s=this._calcRatio(this.immediateValue)*this._w-this._knobstartx;this.translate3d(s+"px",0,0,this.$.sliderKnob)},_trackEnd:function(){var e=this.$.sliderKnob.style;this.$.sliderKnob.classList.remove("dragging"),this._setDragging(!1),this._resetKnob(),this.value=this.immediateValue,e.transform=e.webkitTransform="",this.fire("change",{composed:!0})},_knobdown:function(e){this._expandKnob(),e.preventDefault(),this.focus()},_bartrack:function(e){this._allowBarEvent(e)&&this._onTrack(e)},_barclick:function(e){this._w=this.$.sliderBar.offsetWidth;var t=this.$.sliderBar.getBoundingClientRect(),i=(e.detail.x-t.left)/this._w*100;this._isRTL&&(i=100-i);var n=this.ratio;this._setTransiting(!0),this._positionKnob(i),n===this.ratio&&this._setTransiting(!1),this.async((function(){this.fire("change",{composed:!0})})),e.preventDefault(),this.focus()},_bardown:function(e){this._allowBarEvent(e)&&(this.debounce("expandKnob",this._expandKnob,60),this._barclick(e))},_knobTransitionEnd:function(e){e.target===this.$.sliderKnob&&this._setTransiting(!1)},_updateMarkers:function(e,t,i,n){n||this._setMarkers([]);var s=Math.round((i-t)/this.step);s>e&&(s=e),(s<0||!isFinite(s))&&(s=0),this._setMarkers
|
||
|
<div>
|
||
|
${this.label}
|
||
|
<div class="flex">
|
||
|
${this.schema.required?"":l`
|
||
|
<ha-checkbox
|
||
|
@change=${this._handleCheckboxChange}
|
||
|
.checked=${void 0!==this.data}
|
||
|
.disabled=${this.disabled}
|
||
|
></ha-checkbox>
|
||
|
`}
|
||
|
<ha-slider
|
||
|
pin
|
||
|
ignore-bar-touch
|
||
|
.value=${this._value}
|
||
|
.min=${this.schema.valueMin}
|
||
|
.max=${this.schema.valueMax}
|
||
|
.disabled=${this.disabled||void 0===this.data&&!this.schema.required}
|
||
|
@change=${this._valueChanged}
|
||
|
></ha-slider>
|
||
|
</div>
|
||
|
</div>
|
||
|
`:l`
|
||
|
<ha-textfield
|
||
|
type="number"
|
||
|
inputMode="numeric"
|
||
|
.label=${this.label}
|
||
|
.helper=${this.helper}
|
||
|
helperPersistent
|
||
|
.value=${void 0!==this.data?this.data:""}
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.schema.required}
|
||
|
.autoValidate=${this.schema.required}
|
||
|
.suffix=${null===(e=this.schema.description)||void 0===e?void 0:e.suffix}
|
||
|
.validationMessage=${this.schema.required?"Required":void 0}
|
||
|
@input=${this._valueChanged}
|
||
|
></ha-textfield>
|
||
|
`}},{kind:"method",key:"updated",value:function(e){e.has("schema")&&this.toggleAttribute("own-margin",!("valueMin"in this.schema&&"valueMax"in this.schema||!this.schema.required))}},{kind:"get",key:"_value",value:function(){var e,t;return void 0!==this.data?this.data:this.schema.required?void 0!==(null===(e=this.schema.description)||void 0===e?void 0:e.suggested_value)&&null!==(null===(t=this.schema.description)||void 0===t?void 0:t.suggested_value)||this.schema.default||this.schema.valueMin||0:this.schema.valueMin||0}},{kind:"method",key:"_handleCheckboxChange",value:function(e){let t;if(e.target.checked)for(const e of[this._lastValue,null===(i=this.schema.description)||void 0===i?void 0:i.suggested_value,this.schema.default,0]){var i;if(void 0!==e){t=e;break}}else this._lastValue=this.data;u(this,"value-changed",{value:t})}},{kind:"method",key:"_valueChanged",value:function(e){const t=e.target,i=t.value;let n;if(""!==i&&(n=parseInt(String(i))),this.data!==n)u(this,"value-changed",{value:n});else{const e=void 0===n?"":String(n);t.value!==e&&(t.value=e)}}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host([own-margin]) {
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
.flex {
|
||
|
display: flex;
|
||
|
}
|
||
|
ha-slider {
|
||
|
flex: 1;
|
||
|
}
|
||
|
ha-textfield {
|
||
|
display: block;
|
||
|
}
|
||
|
`}}]}}),o);a([d("ha-form-multi_select")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r()],key:"schema",value:void 0},{kind:"field",decorators:[r()],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[x()],key:"_opened",value:()=>!1},{kind:"field",decorators:[c("ha-button-menu")],key:"_input",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){const e=Array.isArray(this.schema.options)?this.schema.options:Object.entries(this.schema.options),t=this.data||[];return e.length<6?l`<div>
|
||
|
${this.label}${e.map((e=>{const i=Oe(e);return l`
|
||
|
<ha-formfield .label=${Be(e)}>
|
||
|
<ha-checkbox
|
||
|
.checked=${t.includes(i)}
|
||
|
.value=${i}
|
||
|
.disabled=${this.disabled}
|
||
|
@change=${this._valueChanged}
|
||
|
></ha-checkbox>
|
||
|
</ha-formfield>
|
||
|
`}))}
|
||
|
</div> `:l`
|
||
|
<ha-button-menu
|
||
|
.disabled=${this.disabled}
|
||
|
fixed
|
||
|
corner="BOTTOM_START"
|
||
|
@opened=${this._handleOpen}
|
||
|
@closed=${this._handleClose}
|
||
|
multi
|
||
|
activatable
|
||
|
>
|
||
|
<ha-textfield
|
||
|
slot="trigger"
|
||
|
.label=${this.label}
|
||
|
.value=${t.map((e=>this.schema.options[e]||e)).join(", ")}
|
||
|
.disabled=${this.disabled}
|
||
|
tabindex="-1"
|
||
|
></ha-textfield>
|
||
|
<ha-svg-icon
|
||
|
slot="trigger"
|
||
|
.path=${this._opened?w:C}
|
||
|
></ha-svg-icon>
|
||
|
${e.map((e=>{const i=Oe(e),n=t.includes(i);return l`<ha-check-list-item
|
||
|
left
|
||
|
.selected=${n}
|
||
|
.activated=${n}
|
||
|
@request-selected=${this._selectedChanged}
|
||
|
.value=${i}
|
||
|
.disabled=${this.disabled}
|
||
|
>
|
||
|
${Be(e)}
|
||
|
</ha-check-list-item>`}))}
|
||
|
</ha-button-menu>
|
||
|
`}},{kind:"method",key:"firstUpdated",value:function(){this.updateComplete.then((()=>{var e;const{formElement:t,mdcRoot:i}=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("ha-textfield"))||{};t&&(t.style.textOverflow="ellipsis"),i&&(i.style.cursor="pointer")}))}},{kind:"method",key:"updated",value:function(e){e.has("schema")&&this.toggleAttribute("own-margin",Object.keys(this.schema.options).length>=6&&!!this.schema.required)}},{kind:"method",key:"_selectedChanged",value:function(e){e.stopPropagation(),"property"!==e.detail.source&&this._handleValueChanged(e.target.value,e.detail.selected)}},{kind:"method",key:"_valueChanged",value:function(e){const{value:t,checked:i}=e.target;this._handleValueChanged(t,i)}},{kind:"method",key:"_handleValueChanged",value:function(e,t){let i;if(t)if(this.data){if(this.data.includes(e))return;i=[...this.data,e]}else i=[e];else{if(!this.data.includes(e))return;i=this.data.filter((t=>t!==e))}u(this,"value-changed",{value:i})}},{kind:"method",key:"_handleOpen",value:function(e){e.stopPropagation(),this._opened=!0,this.toggleAttribute("opened",!0)}},{kind:"method",key:"_handleClose",value:function(e){e.stopPropagation(),this._opened=!1,this.toggleAttribute("opened",!1)}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host([own-margin]) {
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
ha-button-menu {
|
||
|
display: block;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
ha-formfield {
|
||
|
display: block;
|
||
|
padding-right: 16px;
|
||
|
padding-inline-end: 16px;
|
||
|
padding-inline-start: initial;
|
||
|
direction: var(--direction);
|
||
|
}
|
||
|
ha-textfield {
|
||
|
display: block;
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
ha-svg-icon {
|
||
|
color: var(--input-dropdown-icon-color);
|
||
|
position: absolute;
|
||
|
right: 1em;
|
||
|
top: 1em;
|
||
|
cursor: pointer;
|
||
|
inset-inline-end: 1em;
|
||
|
inset-inline-start: initial;
|
||
|
direction: var(--direction);
|
||
|
}
|
||
|
:host([opened]) ha-svg-icon {
|
||
|
color: var(--primary-color);
|
||
|
}
|
||
|
:host([opened]) ha-button-menu {
|
||
|
--mdc-text-field-idle-line-color: var(--input-hover-line-color);
|
||
|
--mdc-text-field-label-ink-color: var(--primary-color);
|
||
|
}
|
||
|
`}}]}}),o),a([d("ha-input-helper-text")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"method",key:"render",value:function(){return l`<slot></slot>`}},{kind:"field",static:!0,key:"styles",value:()=>p`
|
||
|
:host {
|
||
|
display: block;
|
||
|
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
|
||
|
font-size: 0.75rem;
|
||
|
padding-left: 16px;
|
||
|
padding-right: 16px;
|
||
|
}
|
||
|
`}]}}),o),a([d("ha-base-time-input")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"autoValidate",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"required",value:()=>!1},{kind:"field",decorators:[r({type:Number})],key:"format",value:()=>12},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r({type:Number})],key:"days",value:()=>0},{kind:"field",decorators:[r({type:Number})],key:"hours",value:()=>0},{kind:"field",decorators:[r({type:Number})],key:"minutes",value:()=>0},{kind:"field",decorators:[r({type:Number})],key:"seconds",value:()=>0},{kind:"field",decorators:[r({type:Number})],key:"milliseconds",value:()=>0},{kind:"field",decorators:[r()],key:"dayLabel",value:()=>""},{kind:"field",decorators:[r()],key:"hourLabel",value:()=>""},{kind:"field",decorators:[r()],key:"minLabel",value:()=>""},{kind:"field",decorators:[r()],key:"secLabel",value:()=>""},{kind:"field",decorators:[r()],key:"millisecLabel",value:()=>""},{kind:"field",decorators:[r({type:Boolean})],key:"enableSecond",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"enableMillisecond",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"enableDay",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"noHoursLimit",value:()=>!1},{kind:"field",decorators:[r()],key:"amPm",value:()=>"AM"},{kind:"method",key:"render",value:function(){return l`
|
||
|
${this.label?l`<label>${this.label}${this.required?" *":""}</label>`:""}
|
||
|
<div class="time-input-wrap">
|
||
|
${this.enableDay?l`
|
||
|
<ha-textfield
|
||
|
id="day"
|
||
|
type="number"
|
||
|
inputmode="numeric"
|
||
|
.value=${this.days.toFixed()}
|
||
|
.label=${this.dayLabel}
|
||
|
name="days"
|
||
|
@change=${this._valueChanged}
|
||
|
@focusin=${this._onFocus}
|
||
|
no-spinner
|
||
|
.required=${this.required}
|
||
|
.autoValidate=${this.autoValidate}
|
||
|
min="0"
|
||
|
.disabled=${this.disabled}
|
||
|
suffix=":"
|
||
|
class="hasSuffix"
|
||
|
>
|
||
|
</ha-textfield>
|
||
|
`:""}
|
||
|
|
||
|
<ha-textfield
|
||
|
id="hour"
|
||
|
type="number"
|
||
|
inputmode="numeric"
|
||
|
.value=${this.hours.toFixed()}
|
||
|
.label=${this.hourLabel}
|
||
|
name="hours"
|
||
|
@change=${this._valueChanged}
|
||
|
@focusin=${this._onFocus}
|
||
|
no-spinner
|
||
|
.required=${this.required}
|
||
|
.autoValidate=${this.autoValidate}
|
||
|
maxlength="2"
|
||
|
max=${A(this._hourMax)}
|
||
|
min="0"
|
||
|
.disabled=${this.disabled}
|
||
|
suffix=":"
|
||
|
class="hasSuffix"
|
||
|
>
|
||
|
</ha-textfield>
|
||
|
<ha-textfield
|
||
|
id="min"
|
||
|
type="number"
|
||
|
inputmode="numeric"
|
||
|
.value=${this._formatValue(this.minutes)}
|
||
|
.label=${this.minLabel}
|
||
|
@change=${this._valueChanged}
|
||
|
@focusin=${this._onFocus}
|
||
|
name="minutes"
|
||
|
no-spinner
|
||
|
.required=${this.required}
|
||
|
.autoValidate=${this.autoValidate}
|
||
|
maxlength="2"
|
||
|
max="59"
|
||
|
min="0"
|
||
|
.disabled=${this.disabled}
|
||
|
.suffix=${this.enableSecond?":":""}
|
||
|
class=${this.enableSecond?"has-suffix":""}
|
||
|
>
|
||
|
</ha-textfield>
|
||
|
${this.enableSecond?l`<ha-textfield
|
||
|
id="sec"
|
||
|
type="number"
|
||
|
inputmode="numeric"
|
||
|
.value=${this._formatValue(this.seconds)}
|
||
|
.label=${this.secLabel}
|
||
|
@change=${this._valueChanged}
|
||
|
@focusin=${this._onFocus}
|
||
|
name="seconds"
|
||
|
no-spinner
|
||
|
.required=${this.required}
|
||
|
.autoValidate=${this.autoValidate}
|
||
|
maxlength="2"
|
||
|
max="59"
|
||
|
min="0"
|
||
|
.disabled=${this.disabled}
|
||
|
.suffix=${this.enableMillisecond?":":""}
|
||
|
class=${this.enableMillisecond?"has-suffix":""}
|
||
|
>
|
||
|
</ha-textfield>`:""}
|
||
|
${this.enableMillisecond?l`<ha-textfield
|
||
|
id="millisec"
|
||
|
type="number"
|
||
|
.value=${this._formatValue(this.milliseconds,3)}
|
||
|
.label=${this.millisecLabel}
|
||
|
@change=${this._valueChanged}
|
||
|
@focusin=${this._onFocus}
|
||
|
name="milliseconds"
|
||
|
no-spinner
|
||
|
.required=${this.required}
|
||
|
.autoValidate=${this.autoValidate}
|
||
|
maxlength="3"
|
||
|
max="999"
|
||
|
min="0"
|
||
|
.disabled=${this.disabled}
|
||
|
>
|
||
|
</ha-textfield>`:""}
|
||
|
${24===this.format?"":l`<ha-select
|
||
|
.required=${this.required}
|
||
|
.value=${this.amPm}
|
||
|
.disabled=${this.disabled}
|
||
|
name="amPm"
|
||
|
naturalMenuWidth
|
||
|
fixedMenuPosition
|
||
|
@selected=${this._valueChanged}
|
||
|
@closed=${D}
|
||
|
>
|
||
|
<mwc-list-item value="AM">AM</mwc-list-item>
|
||
|
<mwc-list-item value="PM">PM</mwc-list-item>
|
||
|
</ha-select>`}
|
||
|
</div>
|
||
|
${this.helper?l`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`:""}
|
||
|
`}},{kind:"method",key:"_valueChanged",value:function(e){const t=e.currentTarget;this[t.name]="amPm"===t.name?t.value:Number(t.value);const i={hours:this.hours,minutes:this.minutes,seconds:this.seconds,milliseconds:this.milliseconds};12===this.format&&(i.amPm=this.amPm),u(this,"value-changed",{value:i})}},{kind:"method",key:"_onFocus",value:function(e){e.currentTarget.select()}},{kind:"method",key:"_formatValue",value:function(e,t=2){return e.toString().padStart(t,"0")}},{kind:"get",key:"_hourMax",value:function(){if(!this.noHoursLimit)return 12===this.format?12:23}},{kind:"field",static:!0,key:"styles",value:()=>p`
|
||
|
:host {
|
||
|
display: block;
|
||
|
}
|
||
|
.time-input-wrap {
|
||
|
display: flex;
|
||
|
border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
direction: ltr;
|
||
|
}
|
||
|
ha-textfield {
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
--mdc-shape-small: 0;
|
||
|
--text-field-appearance: none;
|
||
|
--text-field-padding: 0 4px;
|
||
|
--text-field-suffix-padding-left: 2px;
|
||
|
--text-field-suffix-padding-right: 0;
|
||
|
--text-field-text-align: center;
|
||
|
}
|
||
|
ha-textfield.hasSuffix {
|
||
|
--text-field-padding: 0 0 0 4px;
|
||
|
}
|
||
|
ha-textfield:first-child {
|
||
|
--text-field-border-top-left-radius: var(--mdc-shape-medium);
|
||
|
}
|
||
|
ha-textfield:last-child {
|
||
|
--text-field-border-top-right-radius: var(--mdc-shape-medium);
|
||
|
}
|
||
|
ha-select {
|
||
|
--mdc-shape-small: 0;
|
||
|
width: 85px;
|
||
|
}
|
||
|
label {
|
||
|
-moz-osx-font-smoothing: grayscale;
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
font-family: var(
|
||
|
--mdc-typography-body2-font-family,
|
||
|
var(--mdc-typography-font-family, Roboto, sans-serif)
|
||
|
);
|
||
|
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
|
||
|
line-height: var(--mdc-typography-body2-line-height, 1.25rem);
|
||
|
font-weight: var(--mdc-typography-body2-font-weight, 400);
|
||
|
letter-spacing: var(
|
||
|
--mdc-typography-body2-letter-spacing,
|
||
|
0.0178571429em
|
||
|
);
|
||
|
text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
|
||
|
text-transform: var(--mdc-typography-body2-text-transform, inherit);
|
||
|
color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
||
|
padding-left: 4px;
|
||
|
}
|
||
|
`}]}}),o),a([d("ha-duration-input")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"required",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"enableMillisecond",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"enableDay",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[c("paper-time-input",!0)],key:"_input",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){return l`
|
||
|
<ha-base-time-input
|
||
|
.label=${this.label}
|
||
|
.helper=${this.helper}
|
||
|
.required=${this.required}
|
||
|
.autoValidate=${this.required}
|
||
|
.disabled=${this.disabled}
|
||
|
errorMessage="Required"
|
||
|
enableSecond
|
||
|
.enableMillisecond=${this.enableMillisecond}
|
||
|
.enableDay=${this.enableDay}
|
||
|
format="24"
|
||
|
.days=${this._days}
|
||
|
.hours=${this._hours}
|
||
|
.minutes=${this._minutes}
|
||
|
.seconds=${this._seconds}
|
||
|
.milliseconds=${this._milliseconds}
|
||
|
@value-changed=${this._durationChanged}
|
||
|
noHoursLimit
|
||
|
dayLabel="dd"
|
||
|
hourLabel="hh"
|
||
|
minLabel="mm"
|
||
|
secLabel="ss"
|
||
|
millisecLabel="ms"
|
||
|
></ha-base-time-input>
|
||
|
`}},{kind:"get",key:"_days",value:function(){var e;return null!==(e=this.data)&&void 0!==e&&e.days?Number(this.data.days):0}},{kind:"get",key:"_hours",value:function(){var e;return null!==(e=this.data)&&void 0!==e&&e.hours?Number(this.data.hours):0}},{kind:"get",key:"_minutes",value:function(){var e;return null!==(e=this.data)&&void 0!==e&&e.minutes?Number(this.data.minutes):0}},{kind:"get",key:"_seconds",value:function(){var e;return null!==(e=this.data)&&void 0!==e&&e.seconds?Number(this.data.seconds):0}},{kind:"get",key:"_milliseconds",value:function(){var e;return null!==(e=this.data)&&void 0!==e&&e.milliseconds?Number(this.data.milliseconds):0}},{kind:"method",key:"_durationChanged",value:function(e){e.stopPropagation();const t={...e.detail.value};var i;(this.enableMillisecond||t.milliseconds?t.milliseconds>999&&(t.seconds+=Math.floor(t.milliseconds/1e3),t.milliseconds%=1e3):delete t.milliseconds,t.seconds>59&&(t.minutes+=Math.floor(t.seconds/60),t.seconds%=60),t.minutes>59&&(t.hours+=Math.floor(t.minutes/60),t.minutes%=60),this.enableDay&&t.hours>24)&&(t.days=(null!==(i=t.days)&&void 0!==i?i:0)+Math.floor(t.hours/24),t.hours%=24);u(this,"value-changed",{value:t})}}]}}),o),a([d("ha-form-positive_time_period_dict")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[c("ha-time-input",!0)],key:"_input",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){return l`
|
||
|
<ha-duration-input
|
||
|
.label=${this.label}
|
||
|
?required=${this.schema.required}
|
||
|
.data=${this.data}
|
||
|
.disabled=${this.disabled}
|
||
|
></ha-duration-input>
|
||
|
`}}]}}),o),a([d("ha-chip-set")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"method",key:"render",value:function(){return l`
|
||
|
<div class="mdc-chip-set">
|
||
|
<slot></slot>
|
||
|
</div>
|
||
|
`}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
${I(N)}
|
||
|
|
||
|
slot::slotted(ha-chip) {
|
||
|
margin: 4px 4px 4px 0;
|
||
|
}
|
||
|
`}}]}}),o);const Le=(e,t)=>{var i,n;const s=e._$AN;if(void 0===s)return!1;for(const e of s)null===(n=(i=e)._$AO)||void 0===n||n.call(i,t,!1),Le(e,t);return!0},Me=e=>{let t,i;do{if(void 0===(t=e._$AM))break;i=t._$AN,i.delete(e),e=t}while(0===(null==i?void 0:i.size))},Re=e=>{for(let t;t=e._$AM;e=t){let i=t._$AN;if(void 0===i)t._$AN=i=new Set;else if(i.has(e))break;i.add(e),Fe(t)}};function ze(e){void 0!==this._$AN?(Me(this),this._$AM=e,Re(this)):this._$AM=e}function De(e,t=!1,i=0){const n=this._$AH,s=this._$AN;if(void 0!==s&&0!==s.size)if(t)if(Array.isArray(n))for(let e=i;e<n.length;e++)Le(n[e],!1),Me(n[e]);else null!=n&&(Le(n,!1),Me(n));else Le(this,e)}const Fe=e=>{var t,i,s,a;e.type==n.CHILD&&(null!==(t=(s=e)._$AP)&&void 0!==t||(s._$AP=De),null!==(i=(a=e)._$AQ)&&void 0!==i||(a._$AQ=ze))};class Ne extends t{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,t,i){super._$AT(e,t,i),Re(this),this.isConnected=e._$AU}_$AO(e,t=!0){var i,n;e!==this.isConnected&&(this.isConnected=e,e?null===(i=this.reconnected)||void 0===i||i.call(this):null===(n=this.disconnected)||void 0===n||n.call(this)),t&&(Le(this,e),Me(this))}setValue(e){if(F(this._$Ct))this._$Ct._$AI(e,this);else{const t=[...this._$Ct._$AH];t[this._$Ci]=e,this._$Ct._$AI(t,this,0)}}disconnected(){}reconnected(){}}const He=Symbol("valueNotInitialized");class qe extends Ne{constructor(e){if(super(e),e.type!==n.ELEMENT)throw new Error(`\`${this.constructor.name}\` must be bound to an element.`);this.previousValue=He}render(e,t){return E}update(e,[t,i]){if(!this.hasChanged(i))return E;this.host=e.options&&e.options.host,this.element=e.element,this.renderer=t;return this.previousValue===He?this.addRenderer():this.runRenderer(),this.previousValue=Array.isArray(i)?[...i]:i,E}reconnected(){this.addRenderer()}disconnected(){this.removeRenderer()}addRenderer(){throw new Error("The `addRenderer` method must be implemented.")}runRenderer(){throw new Error("The `runRenderer` method must be implemented.")}removeRenderer(){throw new Error("The `removeRenderer` method must be implemented.")}renderRenderer(e,...t){const i=this.renderer.call(this.host,...t);S(i,e,{host:this.host})}hasChanged(e){return Array.isArray(e)?!Array.isArray(this.previousValue)||(this.previousValue.length!==e.length||e.some(((e,t)=>e!==this.previousValue[t]))):this.previousValue!==e}}const Ke=e(class extends qe{addRenderer(){this.element.renderer=(e,t,i)=>{this.renderRenderer(e,i.item,i,t)}}runRenderer(){this.element.requestContentUpdate()}removeRenderer(){this.element.renderer=null}});class je extends HTMLElement{static get version(){return"23.3.0"}}customElements.define("vaadin-material-styles",je);const Ue=e=>class extends e{static get properties(){return{theme:{type:String,reflectToAttribute:!0,observer:"__deprecatedThemePropertyChanged"},_theme:{type:String,readOnly:!0}}}__deprecatedThemePropertyChanged(e){this._set_theme(e)}},We=[];function Xe(e,t,i={}){var n;e&&(n=e,Ze(customElements.get(n))&&console.warn(`The custom element definition for "${e}"\n was finalized before a style module was registered.\n Make sure to add component specific style modules before\n importing the corresponding custom element.`)),t=function(e=[]){return[e].flat(1/0).filter((e=>e instanceof $||(console.warn("An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`."),!1)))}(t),window.Vaadin&&window.Vaadin.styleModules?window.Vaadin.styleModules.registerStyles(e,t,i):We.push({themeFor:e,styles:t,include:i.include,moduleId:i.moduleId})}function Ye(){return window.Vaadin&&window.Vaadin.styleModules?window.Vaadin.styleModules.getAllThemes():We}function Ge(e=""){let t=0;return e.startsWith("lumo-")||e.startsWith("material-")?t=1:e.startsWith("vaadin-")&&(t=2),t}function Qe(e){const t=[];return e.include&&[].concat(e.include).forEach((e=>{const i=Ye().find((t=>t.moduleId===e));i?t.push(...Qe(i),...i.styles):console.warn(`Included moduleId ${e} not found in style registry`)}),e.styles),t}function Je(e){const t=`${e}-default-theme`,i=Ye().filter((i=>i.moduleId!==t&&function(e,t){return(e||"").split(" ").
|
||
|
:host {
|
||
|
/* Text colors */
|
||
|
--material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
|
||
|
--material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
|
||
|
--material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
|
||
|
|
||
|
/* Primary colors */
|
||
|
--material-primary-color: var(--primary-color, #6200ee);
|
||
|
--material-primary-contrast-color: var(--dark-theme-base-color, #fff);
|
||
|
--material-primary-text-color: var(--material-primary-color);
|
||
|
|
||
|
/* Error colors */
|
||
|
--material-error-color: var(--error-color, #b00020);
|
||
|
--material-error-text-color: var(--material-error-color);
|
||
|
|
||
|
/* Background colors */
|
||
|
--material-background-color: var(--light-theme-background-color, #fff);
|
||
|
--material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
|
||
|
--material-disabled-color: rgba(0, 0, 0, 0.26);
|
||
|
|
||
|
/* Divider colors */
|
||
|
--material-divider-color: rgba(0, 0, 0, 0.12);
|
||
|
|
||
|
/* Undocumented internal properties (prefixed with three dashes) */
|
||
|
|
||
|
/* Text field tweaks */
|
||
|
--_material-text-field-input-line-background-color: initial;
|
||
|
--_material-text-field-input-line-opacity: initial;
|
||
|
--_material-text-field-input-line-hover-opacity: initial;
|
||
|
--_material-text-field-focused-label-opacity: initial;
|
||
|
|
||
|
/* Button tweaks */
|
||
|
--_material-button-raised-background-color: initial;
|
||
|
--_material-button-outline-color: initial;
|
||
|
|
||
|
/* Grid tweaks */
|
||
|
--_material-grid-row-hover-background-color: initial;
|
||
|
|
||
|
/* Split layout tweaks */
|
||
|
--_material-split-layout-splitter-background-color: initial;
|
||
|
|
||
|
background-color: var(--material-background-color);
|
||
|
color: var(--material-body-text-color);
|
||
|
}
|
||
|
|
||
|
[theme~='dark'] {
|
||
|
/* Text colors */
|
||
|
--material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
|
||
|
--material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
|
||
|
--material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
|
||
|
|
||
|
/* Primary colors */
|
||
|
--material-primary-color: var(--light-primary-color, #7e3ff2);
|
||
|
--material-primary-text-color: #b794f6;
|
||
|
|
||
|
/* Error colors */
|
||
|
--material-error-color: var(--error-color, #de2839);
|
||
|
--material-error-text-color: var(--material-error-color);
|
||
|
|
||
|
/* Background colors */
|
||
|
--material-background-color: var(--dark-theme-background-color, #303030);
|
||
|
--material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
|
||
|
--material-disabled-color: rgba(255, 255, 255, 0.3);
|
||
|
|
||
|
/* Divider colors */
|
||
|
--material-divider-color: rgba(255, 255, 255, 0.12);
|
||
|
|
||
|
/* Undocumented internal properties (prefixed with three dashes) */
|
||
|
|
||
|
/* Text field tweaks */
|
||
|
--_material-text-field-input-line-background-color: #fff;
|
||
|
--_material-text-field-input-line-opacity: 0.7;
|
||
|
--_material-text-field-input-line-hover-opacity: 1;
|
||
|
--_material-text-field-focused-label-opacity: 1;
|
||
|
|
||
|
/* Button tweaks */
|
||
|
--_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
|
||
|
--_material-button-outline-color: rgba(255, 255, 255, 0.2);
|
||
|
|
||
|
/* Grid tweaks */
|
||
|
--_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
|
||
|
--_material-grid-row-selected-overlay-opacity: 0.16;
|
||
|
|
||
|
/* Split layout tweaks */
|
||
|
--_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
|
||
|
|
||
|
background-color: var(--material-background-color);
|
||
|
color: var(--material-body-text-color);
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: inherit;
|
||
|
}
|
||
|
`,{moduleId:"material-color-light"});Xe("",p`
|
||
|
:host {
|
||
|
/* Text colors */
|
||
|
--material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
|
||
|
--material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
|
||
|
--material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
|
||
|
|
||
|
/* Primary colors */
|
||
|
--material-primary-color: var(--light-primary-color, #7e3ff2);
|
||
|
--material-primary-text-color: #b794f6;
|
||
|
|
||
|
/* Error colors */
|
||
|
--material-error-color: var(--error-color, #de2839);
|
||
|
--material-error-text-color: var(--material-error-color);
|
||
|
|
||
|
/* Background colors */
|
||
|
--material-background-color: var(--dark-theme-background-color, #303030);
|
||
|
--material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
|
||
|
--material-disabled-color: rgba(255, 255, 255, 0.3);
|
||
|
|
||
|
/* Divider colors */
|
||
|
--material-divider-color: rgba(255, 255, 255, 0.12);
|
||
|
|
||
|
/* Undocumented internal properties (prefixed with three dashes) */
|
||
|
|
||
|
/* Text field tweaks */
|
||
|
--_material-text-field-input-line-background-color: #fff;
|
||
|
--_material-text-field-input-line-opacity: 0.7;
|
||
|
--_material-text-field-input-line-hover-opacity: 1;
|
||
|
--_material-text-field-focused-label-opacity: 1;
|
||
|
|
||
|
/* Button tweaks */
|
||
|
--_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
|
||
|
--_material-button-outline-color: rgba(255, 255, 255, 0.2);
|
||
|
|
||
|
/* Grid tweaks */
|
||
|
--_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
|
||
|
--_material-grid-row-selected-overlay-opacity: 0.16;
|
||
|
|
||
|
/* Split layout tweaks */
|
||
|
--_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
|
||
|
|
||
|
background-color: var(--material-background-color);
|
||
|
color: var(--material-body-text-color);
|
||
|
}
|
||
|
`,{moduleId:"material-color-dark"});const tt=p`
|
||
|
:host {
|
||
|
/* Text colors */
|
||
|
--material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
|
||
|
--material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
|
||
|
--material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
|
||
|
|
||
|
/* Primary colors */
|
||
|
--material-primary-color: var(--primary-color, #6200ee);
|
||
|
--material-primary-contrast-color: var(--dark-theme-base-color, #fff);
|
||
|
--material-primary-text-color: var(--material-primary-color);
|
||
|
|
||
|
/* Error colors */
|
||
|
--material-error-color: var(--error-color, #b00020);
|
||
|
--material-error-text-color: var(--material-error-color);
|
||
|
|
||
|
/* Background colors */
|
||
|
--material-background-color: var(--light-theme-background-color, #fff);
|
||
|
--material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
|
||
|
--material-disabled-color: rgba(0, 0, 0, 0.26);
|
||
|
|
||
|
/* Divider colors */
|
||
|
--material-divider-color: rgba(0, 0, 0, 0.12);
|
||
|
}
|
||
|
`,it=document.createElement("template");it.innerHTML=`<style>${tt.toString().replace(":host","html")}</style>`,document.head.appendChild(it.content);const nt=p`
|
||
|
:host {
|
||
|
/* Font family */
|
||
|
--material-font-family: 'Roboto', sans-serif;
|
||
|
|
||
|
/* Font sizes */
|
||
|
--material-h1-font-size: 6rem;
|
||
|
--material-h2-font-size: 3.75rem;
|
||
|
--material-h3-font-size: 3rem;
|
||
|
--material-h4-font-size: 2.125rem;
|
||
|
--material-h5-font-size: 1.5rem;
|
||
|
--material-h6-font-size: 1.25rem;
|
||
|
--material-body-font-size: 1rem;
|
||
|
--material-small-font-size: 0.875rem;
|
||
|
--material-button-font-size: 0.875rem;
|
||
|
--material-caption-font-size: 0.75rem;
|
||
|
|
||
|
/* Icon size */
|
||
|
--material-icon-font-size: 20px;
|
||
|
}
|
||
|
`;Xe("",p`
|
||
|
body,
|
||
|
:host {
|
||
|
font-family: var(--material-font-family);
|
||
|
font-size: var(--material-body-font-size);
|
||
|
line-height: 1.4;
|
||
|
-webkit-text-size-adjust: 100%;
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
-moz-osx-font-smoothing: grayscale;
|
||
|
}
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
color: inherit;
|
||
|
line-height: 1.1;
|
||
|
margin-top: 1.5em;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
font-size: var(--material-h3-font-size);
|
||
|
font-weight: 300;
|
||
|
letter-spacing: -0.015em;
|
||
|
margin-bottom: 1em;
|
||
|
text-indent: -0.07em;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
font-size: var(--material-h4-font-size);
|
||
|
font-weight: 300;
|
||
|
letter-spacing: -0.01em;
|
||
|
margin-bottom: 0.75em;
|
||
|
text-indent: -0.07em;
|
||
|
}
|
||
|
|
||
|
h3 {
|
||
|
font-size: var(--material-h5-font-size);
|
||
|
font-weight: 400;
|
||
|
margin-bottom: 0.75em;
|
||
|
text-indent: -0.05em;
|
||
|
}
|
||
|
|
||
|
h4 {
|
||
|
font-size: var(--material-h6-font-size);
|
||
|
font-weight: 400;
|
||
|
letter-spacing: 0.01em;
|
||
|
margin-bottom: 0.75em;
|
||
|
text-indent: -0.05em;
|
||
|
}
|
||
|
|
||
|
h5 {
|
||
|
font-size: var(--material-body-font-size);
|
||
|
font-weight: 500;
|
||
|
margin-bottom: 0.5em;
|
||
|
text-indent: -0.025em;
|
||
|
}
|
||
|
|
||
|
h6 {
|
||
|
font-size: var(--material-small-font-size);
|
||
|
font-weight: 500;
|
||
|
letter-spacing: 0.01em;
|
||
|
margin-bottom: 0.25em;
|
||
|
text-indent: -0.025em;
|
||
|
}
|
||
|
|
||
|
a,
|
||
|
b,
|
||
|
strong {
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
`,{moduleId:"material-typography"});const st=document.createElement("template");if(st.innerHTML=`<style>${nt.toString().replace(":host","html")}</style>`,document.head.appendChild(st.content),!window.polymerSkipLoadingFontRoboto){const e="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic",t=document.createElement("link");t.rel="stylesheet",t.type="text/css",t.crossOrigin="anonymous",t.href=e,document.head.appendChild(t)}const at=p`
|
||
|
/* prettier-ignore */
|
||
|
:host {
|
||
|
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
|
||
|
--material-shadow-elevation-2dp: 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);
|
||
|
--material-shadow-elevation-3dp: 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);
|
||
|
--material-shadow-elevation-4dp: 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);
|
||
|
--material-shadow-elevation-6dp: 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);
|
||
|
--material-shadow-elevation-8dp: 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);
|
||
|
--material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
|
||
|
--material-shadow-elevation-16dp: 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);
|
||
|
--material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
|
||
|
}
|
||
|
`,ot=document.createElement("template");ot.innerHTML=`<style>${at.toString().replace(":host","html")}</style>`,document.head.appendChild(ot.content);const rt=p`
|
||
|
:host {
|
||
|
top: 16px;
|
||
|
right: 16px;
|
||
|
/* TODO (@jouni): remove unnecessary multiplication after https://github.com/vaadin/vaadin-overlay/issues/90 is fixed */
|
||
|
bottom: calc(1px * var(--vaadin-overlay-viewport-bottom) + 16px);
|
||
|
left: 16px;
|
||
|
}
|
||
|
|
||
|
[part='overlay'] {
|
||
|
background-color: var(--material-background-color);
|
||
|
border-radius: 4px;
|
||
|
box-shadow: var(--material-shadow-elevation-4dp);
|
||
|
color: var(--material-body-text-color);
|
||
|
font-family: var(--material-font-family);
|
||
|
font-size: var(--material-body-font-size);
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
[part='content'] {
|
||
|
padding: 8px 0;
|
||
|
}
|
||
|
|
||
|
[part='backdrop'] {
|
||
|
opacity: 0.2;
|
||
|
animation: 0.2s vaadin-overlay-backdrop-enter;
|
||
|
will-change: opacity;
|
||
|
}
|
||
|
|
||
|
@keyframes vaadin-overlay-backdrop-enter {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
`;Xe("",rt,{moduleId:"material-overlay"}),Xe("vaadin-overlay",rt,{moduleId:"material-vaadin-overlay"});const lt=e=>e.test(navigator.userAgent),dt=e=>e.test(navigator.platform);lt(/Android/),lt(/Chrome/)&&/Google Inc/.test(navigator.vendor),lt(/Firefox/);const ht=dt(/^iPad/)||dt(/^Mac/)&&navigator.maxTouchPoints>1,ct=dt(/^iPhone/)||ht,ut=lt(/^((?!chrome|android).)*safari/i),pt=(()=>{try{return document.createEvent("TouchEvent"),!0}catch(e){return!1}})(),mt=V((e=>class extends e{constructor(){super(),this.__controllers=new Set}connectedCallback(){super.connectedCallback(),this.__controllers.forEach((e=>{e.hostConnected&&e.hostConnected()}))}disconnectedCallback(){super.disconnectedCallback(),this.__controllers.forEach((e=>{e.hostDisconnected&&e.hostDisconnected()}))}addController(e){this.__controllers.add(e),void 0!==this.$&&this.isConnected&&e.hostConnected&&e.hostConnected()}removeController(e){this.__controllers.delete(e)}}));class vt{static detectScrollType(){const e=document.createElement("div");e.textContent="ABCD",e.dir="rtl",e.style.fontSize="14px",e.style.width="4px",e.style.height="1px",e.style.position="absolute",e.style.top="-1000px",e.style.overflow="scroll",document.body.appendChild(e);let t="reverse";return e.scrollLeft>0?t="default":(e.scrollLeft=2,e.scrollLeft<2&&(t="negative")),document.body.removeChild(e),t}static getNormalizedScrollLeft(e,t,i){const{scrollLeft:n}=i;if("rtl"!==t||!e)return n;switch(e){case"negative":return i.scrollWidth-i.clientWidth+n;case"reverse":return i.scrollWidth-i.clientWidth-n;default:return n}}static setNormalizedScrollLeft(e,t,i,n){if("rtl"===t&&e)switch(e){case"negative":i.scrollLeft=i.clientWidth-i.scrollWidth+n;break;case"reverse":i.scrollLeft=i.scrollWidth-i.clientWidth-n;break;default:i.scrollLeft=n}else i.scrollLeft=n}}const _t=[];let ft;function bt(e,t,i=e.getAttribute("dir")){t?e.setAttribute("dir",t):null!=i&&e.removeAttribute("dir")}function gt(){return document.documentElement.getAttribute("dir")}new MutationObserver((function(){const e=gt();_t.forEach((t=>{bt(t,e)}))})).observe(document.documentElement,{attributes:!0,attributeFilter:["dir"]});const yt=e=>class extends e{static get properties(){return{dir:{type:String,value:"",reflectToAttribute:!0,converter:{fromAttribute:e=>e||"",toAttribute:e=>""===e?null:e}}}}static finalize(){super.finalize(),ft||(ft=vt.detectScrollType())}connectedCallback(){super.connectedCallback(),this.hasAttribute("dir")&&!this.__restoreSubscription||(this.__subscribe(),bt(this,gt(),null))}attributeChangedCallback(e,t,i){if(super.attributeChangedCallback(e,t,i),"dir"!==e)return;const n=gt(),s=i===n&&-1===_t.indexOf(this),a=!i&&t&&-1===_t.indexOf(this),o=i!==n&&t===n;s||a?(this.__subscribe(),bt(this,n,i)):o&&this.__unsubscribe()}disconnectedCallback(){super.disconnectedCallback(),this.__restoreSubscription=_t.includes(this),this.__unsubscribe()}_valueToNodeAttribute(e,t,i){("dir"!==i||""!==t||e.hasAttribute("dir"))&&super._valueToNodeAttribute(e,t,i)}_attributeToProperty(e,t,i){"dir"!==e||t?super._attributeToProperty(e,t,i):this.dir=""}__subscribe(){_t.includes(this)||_t.push(this)}__unsubscribe(){_t.includes(this)&&_t.splice(_t.indexOf(this),1)}__getNormalizedScrollLeft(e){return vt.getNormalizedScrollLeft(ft,this.getAttribute("dir")||"ltr",e)}__setNormalizedScrollLeft(e,t){return vt.setNormalizedScrollLeft(ft,this.getAttribute("dir")||"ltr",e,t)}};function kt(e,t){const i=Math.max(e.tabIndex,0),n=Math.max(t.tabIndex,0);return 0===i||0===n?n>i:i>n}function xt(e){const t=e.length;if(t<2)return e;const i=Math.ceil(t/2);return function(e,t){const i=[];for(;e.length>0&&t.length>0;)kt(e[0],t[0])?i.push(t.shift()):i.push(e.shift());return i.concat(e,t)}(xt(e.slice(0,i)),xt(e.slice(i)))}function wt(e,t){if(e.nodeType!==Node.ELEMENT_NODE||function(e){const t=e.style;if("hidden"===t.visibility||"none"===t.display)return!0;const i=window.getComputedStyle(e);return"hidden"===i.visibility||"none"===i.display}(e))return!1;const i=e,n=function(e){if(!function(e){return!e.matches('[tabindex="-1"]')&&(e.matches("input, select, textarea, button, object")?
|
||
|
<style>
|
||
|
:host {
|
||
|
z-index: 200;
|
||
|
position: fixed;
|
||
|
|
||
|
/* Despite of what the names say, <vaadin-overlay> is just a container
|
||
|
for position/sizing/alignment. The actual overlay is the overlay part. */
|
||
|
|
||
|
/* Default position constraints: the entire viewport. Note: themes can
|
||
|
override this to introduce gaps between the overlay and the viewport. */
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
bottom: var(--vaadin-overlay-viewport-bottom);
|
||
|
left: 0;
|
||
|
|
||
|
/* Use flexbox alignment for the overlay part. */
|
||
|
display: flex;
|
||
|
flex-direction: column; /* makes dropdowns sizing easier */
|
||
|
/* Align to center by default. */
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
|
||
|
/* Allow centering when max-width/max-height applies. */
|
||
|
margin: auto;
|
||
|
|
||
|
/* The host is not clickable, only the overlay part is. */
|
||
|
pointer-events: none;
|
||
|
|
||
|
/* Remove tap highlight on touch devices. */
|
||
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
||
|
/* CSS API for host */
|
||
|
--vaadin-overlay-viewport-bottom: 0;
|
||
|
}
|
||
|
|
||
|
:host([hidden]),
|
||
|
:host(:not([opened]):not([closing])) {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
[part='overlay'] {
|
||
|
-webkit-overflow-scrolling: touch;
|
||
|
overflow: auto;
|
||
|
pointer-events: auto;
|
||
|
|
||
|
/* Prevent overflowing the host in MSIE 11 */
|
||
|
max-width: 100%;
|
||
|
box-sizing: border-box;
|
||
|
|
||
|
-webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
|
||
|
}
|
||
|
|
||
|
[part='backdrop'] {
|
||
|
z-index: -1;
|
||
|
content: '';
|
||
|
background: rgba(0, 0, 0, 0.5);
|
||
|
position: fixed;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
right: 0;
|
||
|
pointer-events: auto;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
|
||
|
<div part="overlay" id="overlay" tabindex="0">
|
||
|
<div part="content" id="content">
|
||
|
<slot></slot>
|
||
|
</div>
|
||
|
</div>
|
||
|
`}static get is(){return"vaadin-overlay"}static get properties(){return{opened:{type:Boolean,notify:!0,observer:"_openedChanged",reflectToAttribute:!0},owner:Element,renderer:Function,template:{type:Object,notify:!0},content:{type:Object,notify:!0},withBackdrop:{type:Boolean,value:!1,reflectToAttribute:!0},model:Object,modeless:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_modelessChanged"},hidden:{type:Boolean,reflectToAttribute:!0,observer:"_hiddenChanged"},focusTrap:{type:Boolean,value:!1},restoreFocusOnClose:{type:Boolean,value:!1},restoreFocusNode:{type:HTMLElement},_mouseDownInside:{type:Boolean},_mouseUpInside:{type:Boolean},_instance:{type:Object},_originalContentPart:Object,_contentNodes:Array,_oldOwner:Element,_oldModel:Object,_oldTemplate:Object,_oldRenderer:Object,_oldOpened:Boolean}}static get observers(){return["_templateOrRendererChanged(template, renderer, owner, model, opened)"]}constructor(){super(),this._boundMouseDownListener=this._mouseDownListener.bind(this),this._boundMouseUpListener=this._mouseUpListener.bind(this),this._boundOutsideClickListener=this._outsideClickListener.bind(this),this._boundKeydownListener=this._keydownListener.bind(this),this._observer=new T(this,(e=>{this._setTemplateFromNodes(e.addedNodes)})),this._boundIronOverlayCanceledListener=this._ironOverlayCanceled.bind(this),ct&&(this._boundIosResizeListener=()=>this._detectIosNavbar()),this.__focusTrapController=new It(this)}ready(){super.ready(),this._observer.flush(),this.addEventListener("click",(()=>{})),this.$.backdrop.addEventListener("click",(()=>{})),this.addController(this.__focusTrapController)}_detectIosNavbar(){if(!this.opened)return;const e=window.innerHeight,t=window.innerWidth>e,i=document.documentElement.clientHeight;t&&i>e?this.style.setProperty("--vaadin-overlay-viewport-bottom",i-e+"px"):this.style.setProperty("--vaadin-overlay-viewport-bottom","0")}_setTemplateFromNodes(e){this.template=e.find((e=>e.localName&&"template"===e.localName))||this.template}close(e){const t=new CustomEvent("vaadin-overlay-close",{bubbles:!0,cancelable:!0,detail:{sourceEvent:e}});this.dispatchEvent(t),t.defaultPrevented||(this.opened=!1)}connectedCallback(){super.connectedCallback(),this._boundIosResizeListener&&(this._detectIosNavbar(),window.addEventListener("resize",this._boundIosResizeListener))}disconnectedCallback(){super.disconnectedCallback(),this._boundIosResizeListener&&window.removeEventListener("resize",this._boundIosResizeListener)}requestContentUpdate(){this.renderer&&this.renderer.call(this.owner,this.content,this.owner,this.model)}_ironOverlayCanceled(e){e.preventDefault()}_mouseDownListener(e){this._mouseDownInside=e.composedPath().indexOf(this.$.overlay)>=0}_mouseUpListener(e){this._mouseUpInside=e.composedPath().indexOf(this.$.overlay)>=0}_outsideClickListener(e){if(e.composedPath().includes(this.$.overlay)||this._mouseDownInside||this._mouseUpInside)return this._mouseDownInside=!1,void(this._mouseUpInside=!1);if(!this._last)return;const t=new CustomEvent("vaadin-overlay-outside-click",{bubbles:!0,cancelable:!0,detail:{sourceEvent:e}});this.dispatchEvent(t),this.opened&&!t.defaultPrevented&&this.close(e)}_keydownListener(e){if(this._last&&(!this.modeless||e.composedPath().includes(this.$.overlay))&&"Escape"===e.key){const t=new CustomEvent("vaadin-overlay-escape-press",{bubbles:!0,cancelable:!0,detail:{sourceEvent:e}});this.dispatchEvent(t),this.opened&&!t.defaultPrevented&&this.close(e)}}_ensureTemplatized(){this._setTemplateFromNodes(Array.from(this.children))}_openedChanged(e,t){this._instance||this._ensureTemplatized(),e?(this.__restoreFocusNode=this._getActiveElement(),this._animatedOpening(),W(this,(()=>{this.focusTrap&&this.__focusTrapController.trapFocus(this.$.overlay);const e=new CustomEvent("vaadin-overlay-open",{bubbles:!0});this.dispatchEvent(e)})),document.addEventListener("keydown",this._boundKeydownListener),this.modeless||this._addGlobalListeners()):t&&(this.focusTrap&&this.__focusTrapController.releaseFocus(),this._animatedClosing(),document.removeEventListener("keydown",this._boundK
|
||
|
[part~='loader'] {
|
||
|
height: 2px;
|
||
|
background: var(--material-background-color)
|
||
|
linear-gradient(
|
||
|
90deg,
|
||
|
transparent 0%,
|
||
|
transparent 20%,
|
||
|
var(--material-primary-color) 20%,
|
||
|
var(--material-primary-color) 40%,
|
||
|
transparent 40%,
|
||
|
transparent 60%,
|
||
|
var(--material-primary-color) 60%,
|
||
|
var(--material-primary-color) 80%,
|
||
|
transparent 80%,
|
||
|
transparent 100%
|
||
|
)
|
||
|
0 0 / 400% 100% repeat-x;
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
:host(:not([loading])) [part~='loader'] {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
:host([loading]) [part='loader'] {
|
||
|
animation: 3s linear infinite material-loader-progress, 0.3s 0.1s both material-loader-fade-in;
|
||
|
}
|
||
|
|
||
|
[part='loader']::before {
|
||
|
content: '';
|
||
|
display: block;
|
||
|
height: 100%;
|
||
|
opacity: 0.16;
|
||
|
background: var(--material-primary-color);
|
||
|
}
|
||
|
|
||
|
@keyframes material-loader-fade-in {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes material-loader-progress {
|
||
|
0% {
|
||
|
background-position: 0 0;
|
||
|
background-size: 300% 100%;
|
||
|
}
|
||
|
|
||
|
33% {
|
||
|
background-position: -100% 0;
|
||
|
background-size: 400% 100%;
|
||
|
}
|
||
|
|
||
|
67% {
|
||
|
background-position: -200% 0;
|
||
|
background-size: 250% 100%;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
background-position: -300% 0;
|
||
|
background-size: 300% 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* RTL specific styles */
|
||
|
|
||
|
@keyframes material-loader-progress-rtl {
|
||
|
0% {
|
||
|
background-position: 100% 0;
|
||
|
background-size: 300% 100%;
|
||
|
}
|
||
|
|
||
|
33% {
|
||
|
background-position: 200% 0;
|
||
|
background-size: 400% 100%;
|
||
|
}
|
||
|
|
||
|
67% {
|
||
|
background-position: 300% 0;
|
||
|
background-size: 250% 100%;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
background-position: 400% 0;
|
||
|
background-size: 300% 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
:host([loading][dir='rtl']) [part='loader'] {
|
||
|
animation: 3s linear infinite material-loader-progress-rtl, 0.3s 0.1s both material-loader-fade-in;
|
||
|
}
|
||
|
`,$t=rt;Xe("",$t,{moduleId:"material-menu-overlay"});Xe("vaadin-combo-box-overlay",[$t,p`
|
||
|
:host {
|
||
|
--_vaadin-combo-box-items-container-border-width: 8px 0;
|
||
|
--_vaadin-combo-box-items-container-border-style: solid;
|
||
|
--_vaadin-combo-box-items-container-border-color: transparent;
|
||
|
}
|
||
|
|
||
|
[part='overlay'] {
|
||
|
position: relative;
|
||
|
overflow: visible;
|
||
|
border-top-left-radius: 0;
|
||
|
border-top-right-radius: 0;
|
||
|
}
|
||
|
|
||
|
[part='content'] {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
[part~='loader'] {
|
||
|
position: absolute;
|
||
|
z-index: 1;
|
||
|
top: -2px;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
}
|
||
|
`,St],{moduleId:"material-combo-box-overlay"});const Vt=document.createElement("template");Vt.innerHTML='\n <style>\n @font-face {\n font-family: \'material-icons\';\n src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAjAAAsAAAAADaAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAFZSk1xEY21hcAAAAYgAAACNAAACNOuCXH5nbHlmAAACGAAABDoAAAX4NWGBxmhlYWQAAAZUAAAAMAAAADZhSa2YaGhlYQAABoQAAAAeAAAAJBGxCLtobXR4AAAGpAAAABMAAABAjXoAAGxvY2EAAAa4AAAAIgAAACIKMAjcbWF4cAAABtwAAAAfAAAAIAEeAFRuYW1lAAAG/AAAATQAAAJe3l764XBvc3QAAAgwAAAAkAAAAMondETCeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYOS4wTiBgZWBga2WbQIDA2MAhGZpYChlymZgYGJgZWbACgLSXFMYHF4xvuJnv/CvgOEG+wXG6UBhRpAcAA0HDXt4nO2R2Q0DIQxEHwt7HzSSGlJQvlJkqqGJjYdJGbH0PPJgELKBEcjBIyiQ3iQUr3BT9zNb9wvP3lPkt3rfkZNy1KXnIXpLvDgxs7DGvZ2Dk4saxxP/OHr+/KqqCZo+08EgzUa7acVoym002lubDNLZIF0M0tUg3Yz22XaD9DD6XTsN0ssgrYb6BZEQJiUAAAB4nH1UXUgcVxS+Z2ZnZpeq7IT9CbTY2Z24o1m72+zPTB/UFSS2MWssTZRs6doqialmy27bPIghPzQttCxjfEhjfGhoUFLBQoVdKixSkofCEkurwQdBgw1NqeCWFrokVt3b3pnRqm3J/Nw598537v3Od869CBC5uFm2EZkRAgl4kQcOuFm1NJcv3R+kBVpQS/dNdzcilH9w80e0F+8EPsiDAjCkUv485SMIgqd8GxHT3dIc8UYUQnjefINLoGfR88RDDIt2F3lFdwXYeVslBF2BBgjzIR/QLt7FzZ7Kb+7Pn5LfkMnDNhrfP++wjexYnlx6Z9fPtTXGZnAyh5hbiEHIApwFJPpD/OYg5TdNqnAJbpFgiGXgWIbp13AgWQhxllFL49RJFcumVWKVxlWY2cI1buHIdE6gV1S4h2WVOsn0qziMw8Ta0iLBLKFnjPk0qDYrlyArluaIJnpD+UmXaSONbu38IO40Qn+9RPQxo/3oEFLIPG6ORRxrdTqQ0yEoMlJkq+RBkod2Sz6QPFalARRZcFaC02HlKoBjaVFLgemrmVwGr0aPHYuCPZOD4VwG7NG2tihezeRmRq8NPaiPROofDF2D5h373etU+VHcwJkJrJDN4b5cFhc0J7Blc3A9lwVbtG1t7T9+OKfbjK00jr89D1r4umZj9IqWcQtFTUMRivQKLoPinhifQ8LTYhTDwbDIB02TM//HxGB5RiuEp1NeP5DPkwQZ+pLa2GQr0D7kRY3ba/+z8C5lQ7qyAV1Zm6EswXKszelwOgKKrMghySN5TJOPlxfwVEcHHFlYhsLyAhzp6MBTC8uPe+KxtEeSPOlY/Lsds+e15qbqmprqpuaxbYOt6IrjicVFPBHv6opD++IitMe7Nir/7WqYtLDHWTeQieyrXssyN4sqUBWqQy8jVMWKgqaivE/RahBYu02PJRhQJFZ0a9zDIcUCcjikxyu6OUkOCloSWIoMBwNaoHYb+8v8I1wsruKRzro7FzGXNi+l12PV3oPD3aeTZ7uzZeWxaEttLZi68Q+yt0YbvZD69acnUPZHAc50Rr4vfYYvCm4d1Nna1wPv/zYClrdhLf3kQJr5ovts8nT3cI23OgMveFuisfLyUh4OpS5oowe9cuH13h6s/v45LsB7cIWt9ba0xlxo114j9QU80IIpyiytf0xNo11nko90SJiCnj3rdvREEFEbEPfm2eEEF8/+nLxqlHNdJFJHSnt0avTmw9rZmvHUucsDycRtn9/vu51IFpN9x/E31DTTnty7B0jh8V+e+zoQ2oJpHi/6TmhYjRalNZa3CLcqVGuw05XX+Gj3do5cAZ1VWC8x4MlRSI6Tq+6+3pGbmcErl+5FPj0/cPgVfY0BxmZUWqS+N1HqxSk8r2+2RxPpT1pfDQam+q0njl/+6IbB3qjBD1LvNB3GD3EKhqCIy9DfIQrMlQAAeJxjYGRgYABiYWGbw/H8Nl8ZuDkTgCIMNaobGhH0v0zO++wXgFwOBiaQKAAHHgoPeJxjYGRgYL/wr4CBgcuKAQg47zMwMqACAQBc2wOEAAB4nGNgYGDgTCAec1mh8gG9VgYDAAAAAAAAGAAwAGIAdgCKAJ4AwAEkATIBcAHcAlQCYgKwAvwAAHicY2BkYGAQYPBgYGEAASYg5gJCBob/YD4DABFeAXMAeJx9kL1uwjAUhU8gUJVIVaWqnRgsVepSEX5G1BkkRgb2EBwIcuLIMUi8QR+kT9CH6NgH6VP0xHiBAVtyvvvdc50oAB7xgwDNCvDgzma1cMfqzG3Ss+eQ/Oq5gwhjz136D889vGPhOcITDrwhCO9p+vj03GL+y3Ob/ttzSP713MEL/jx30Q/guYdV0Pcc4S0wRWKlyRM1yFNd1ku5PajkSl5WK2nqXJdiHI8uG3NZSkOzEeuTqI/bibWZyIwuxEyXViqlRWX0XqY23llbTYfDzPs41QUKJLCQMMhJCgM+U2iUqLGk3/JfKHbMzeSt3sr5mqapBf9/jNHNiTl96XrnzIZTa5x41jjyiya0FhnrjBnNuwRmbrZJK25NU7nenialj7FzUxWmGHJnV/nYvb34BzHZcLZ4nG2M0Q6CMBRDV2CIOhTf/Ak+am5XIdyw5QoS/l4W4ptN2uYkTVWmdt3VfzXIkKOARokDKhxxwhkGNS64osFNXaxIWFoflnGx4s2Oc0xQOcs0eivadeQGs+VHwtgyPaf6B9K/ukk7pjTj4IbKS4jpT9P2JTmtZDa3vn/bB5MvItu1FOJgfTnHVEp9AbKdMX4=) format(\'woff\');\n font-weight: normal;\n font-style: normal;\n }\n\n html {\n --material-icons-arrow-downward: "\\ea01";\n --material-icons-arrow-upward: "\\ea02";\n --material-icons-calendar: "\\ea03";\n --material-icons-check: "\\ea04";\n --material-icons-chevron-left: "\\ea05";\n --material-icons-chevron-right: "\\ea06";\n --material-icons-clear: "\\ea07";\n --material-icons-clock: "\\ea08";\n --material-icons-dropdown: "\\ea09";\n --material-icons-error: "\\ea0a";\n --material-icons-eye: "\\ea0b";\n --material-icons-eye-disabled: "\\ea0c";\n --material-icons-play: "\\ea0d";\n --material-icons-reload: "\\ea0e";\n --material-icons-upload: "\\ea0f";\n }\n </style>\n',document.head.appendChild(Vt.content);const Tt=p`
|
||
|
:host {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
box-sizing: border-box;
|
||
|
min-height: 36px;
|
||
|
padding: 8px 32px 8px 10px;
|
||
|
overflow: hidden;
|
||
|
font-family: var(--material-font-family);
|
||
|
font-size: var(--material-small-font-size);
|
||
|
line-height: 24px;
|
||
|
}
|
||
|
|
||
|
/* It's the list-box's responsibility to add the focus style */
|
||
|
:host([focused]) {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
/* Checkmark */
|
||
|
[part='checkmark']::before {
|
||
|
display: var(--_material-item-selected-icon-display, none);
|
||
|
content: '';
|
||
|
font-family: material-icons;
|
||
|
font-size: 24px;
|
||
|
line-height: 1;
|
||
|
font-weight: 400;
|
||
|
width: 24px;
|
||
|
text-align: center;
|
||
|
margin-right: 10px;
|
||
|
color: var(--material-secondary-text-color);
|
||
|
flex: none;
|
||
|
}
|
||
|
|
||
|
:host([selected]) [part='checkmark']::before {
|
||
|
content: var(--material-icons-check);
|
||
|
}
|
||
|
|
||
|
@media (any-hover: hover) {
|
||
|
:host(:hover:not([disabled])) {
|
||
|
background-color: var(--material-secondary-background-color);
|
||
|
}
|
||
|
|
||
|
:host([focused]:not([disabled])) {
|
||
|
background-color: var(--material-divider-color);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* Disabled */
|
||
|
:host([disabled]) {
|
||
|
color: var(--material-disabled-text-color);
|
||
|
cursor: default;
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
/* RTL specific styles */
|
||
|
:host([dir='rtl']) {
|
||
|
padding: 8px 10px 8px 32px;
|
||
|
}
|
||
|
|
||
|
:host([dir='rtl']) [part='checkmark']::before {
|
||
|
margin-right: 0;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
`;Xe("vaadin-item",Tt,{moduleId:"material-item"});Xe("vaadin-combo-box-item",[Tt,p`
|
||
|
:host {
|
||
|
cursor: pointer;
|
||
|
-webkit-tap-highlight-color: transparent;
|
||
|
padding: 4px 10px;
|
||
|
--_material-item-selected-icon-display: block;
|
||
|
}
|
||
|
`],{moduleId:"material-combo-box-item"});class Pt extends(et(yt(y))){static get template(){return f`
|
||
|
<style>
|
||
|
:host {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
:host([hidden]) {
|
||
|
display: none;
|
||
|
}
|
||
|
</style>
|
||
|
<span part="checkmark" aria-hidden="true"></span>
|
||
|
<div part="content">
|
||
|
<slot></slot>
|
||
|
</div>
|
||
|
`}static get is(){return"vaadin-combo-box-item"}static get properties(){return{index:Number,item:Object,label:String,selected:{type:Boolean,value:!1,reflectToAttribute:!0},focused:{type:Boolean,value:!1,reflectToAttribute:!0},renderer:Function,_oldRenderer:Function}}static get observers(){return["__rendererOrItemChanged(renderer, index, item.*, selected, focused)","__updateLabel(label, renderer)"]}connectedCallback(){super.connectedCallback(),this._comboBox=this.parentNode.comboBox;const e=this._comboBox.getAttribute("dir");e&&this.setAttribute("dir",e)}requestContentUpdate(){if(!this.renderer)return;const e={index:this.index,item:this.item,focused:this.focused,selected:this.selected};this.renderer(this,this._comboBox,e)}__rendererOrItemChanged(e,t,i){void 0!==i&&void 0!==t&&(this._oldRenderer!==e&&(this.innerHTML="",delete this._$litPart$),e&&(this._oldRenderer=e,this.requestContentUpdate()))}__updateLabel(e,t){t||(this.textContent=e)}}customElements.define(Pt.is,Pt);const Ot={start:"top",end:"bottom"},Bt={start:"left",end:"right"},Lt=new ResizeObserver((e=>{setTimeout((()=>{e.forEach((e=>{e.target.__overlay&&e.target.__overlay._updatePosition()}))}))})),Mt=e=>class extends e{static get properties(){return{positionTarget:{type:Object,value:null},horizontalAlign:{type:String,value:"start"},verticalAlign:{type:String,value:"top"},noHorizontalOverlap:{type:Boolean,value:!1},noVerticalOverlap:{type:Boolean,value:!1}}}static get observers(){return["__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap)","__overlayOpenedChanged(opened, positionTarget)"]}constructor(){super(),this.__onScroll=this.__onScroll.bind(this),this._updatePosition=this._updatePosition.bind(this)}connectedCallback(){super.connectedCallback(),this.opened&&this.__addUpdatePositionEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this.__removeUpdatePositionEventListeners()}__addUpdatePositionEventListeners(){window.addEventListener("resize",this._updatePosition),this.__positionTargetAncestorRootNodes=function(e){const t=[];for(;e;){if(e.nodeType===Node.DOCUMENT_NODE){t.push(e);break}e.nodeType!==Node.DOCUMENT_FRAGMENT_NODE?e=e.assignedSlot?e.assignedSlot:e.parentNode:(t.push(e),e=e.host)}return t}(this.positionTarget),this.__positionTargetAncestorRootNodes.forEach((e=>{e.addEventListener("scroll",this.__onScroll,!0)}))}__removeUpdatePositionEventListeners(){window.removeEventListener("resize",this._updatePosition),this.__positionTargetAncestorRootNodes&&(this.__positionTargetAncestorRootNodes.forEach((e=>{e.removeEventListener("scroll",this.__onScroll,!0)})),this.__positionTargetAncestorRootNodes=null)}__overlayOpenedChanged(e,t){if(this.__removeUpdatePositionEventListeners(),t&&(t.__overlay=null,Lt.unobserve(t),e&&(this.__addUpdatePositionEventListeners(),t.__overlay=this,Lt.observe(t))),e){const e=getComputedStyle(this);this.__margins||(this.__margins={},["top","bottom","left","right"].forEach((t=>{this.__margins[t]=parseInt(e[t],10)}))),this.setAttribute("dir",e.direction),this._updatePosition(),requestAnimationFrame((()=>this._updatePosition()))}}get __isRTL(){return"rtl"===this.getAttribute("dir")}__positionSettingsChanged(){this._updatePosition()}__onScroll(e){this.contains(e.target)||this._updatePosition()}_updatePosition(){if(!this.positionTarget||!this.opened)return;const e=this.positionTarget.getBoundingClientRect(),t=this.__shouldAlignStartVertically(e);this.style.justifyContent=t?"flex-start":"flex-end";const i=this.__shouldAlignStartHorizontally(e,this.__isRTL),n=!this.__isRTL&&i||this.__isRTL&&!i;this.style.alignItems=n?"flex-start":"flex-end";const s=this.getBoundingClientRect(),a=this.__calculatePositionInOneDimension(e,s,this.noVerticalOverlap,Ot,this,t),o=this.__calculatePositionInOneDimension(e,s,this.noHorizontalOverlap,Bt,this,i);Object.assign(this.style,a,o),this.toggleAttribute("bottom-aligned",!t),this.toggleAttribute("top-aligned",t),this.toggleAttribute("end-aligned",!n),this.toggleAttribute("start-aligned",n)}__shouldAlignStartHorizontally(e,t){const i=Math.max(th
|
||
|
#overlay {
|
||
|
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
|
||
|
}
|
||
|
|
||
|
[part='content'] {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
height: 100%;
|
||
|
}
|
||
|
`,{moduleId:"vaadin-combo-box-overlay-styles"});class zt extends(Mt(Et)){static get is(){return"vaadin-combo-box-overlay"}static get template(){return Rt||(Rt=super.template.cloneNode(!0),Rt.content.querySelector('[part~="overlay"]').removeAttribute("tabindex")),Rt}static get observers(){return["_setOverlayWidth(positionTarget, opened)"]}connectedCallback(){super.connectedCallback();const e=this._comboBox,t=e&&e.getAttribute("dir");t&&this.setAttribute("dir",t)}ready(){super.ready();const e=document.createElement("div");e.setAttribute("part","loader");const t=this.shadowRoot.querySelector('[part~="content"]');t.parentNode.insertBefore(e,t)}_outsideClickListener(e){const t=e.composedPath();t.includes(this.positionTarget)||t.includes(this)||this.close()}_setOverlayWidth(e,t){if(e&&t){const t=this.localName;this.style.setProperty(`--_${t}-default-width`,`${e.clientWidth}px`);const i=getComputedStyle(this._comboBox).getPropertyValue(`--${t}-width`);""===i?this.style.removeProperty(`--${t}-width`):this.style.setProperty(`--${t}-width`,i),this._updatePosition()}}}customElements.define(zt.is,zt);let Dt=0;let Ft=0,Nt=0;const Ht=[];let qt=0,Kt=!1;const jt=document.createTextNode("");new window.MutationObserver((function(){Kt=!1;const e=Ht.length;for(let t=0;t<e;t++){const e=Ht[t];if(e)try{e()}catch(e){setTimeout((()=>{throw e}))}}Ht.splice(0,e),Nt+=e})).observe(jt,{characterData:!0});const Ut={after:e=>({run:t=>window.setTimeout(t,e),cancel(e){window.clearTimeout(e)}}),run:(e,t)=>window.setTimeout(e,t),cancel(e){window.clearTimeout(e)}},Wt={run:e=>window.requestAnimationFrame(e),cancel(e){window.cancelAnimationFrame(e)}},Xt={run:e=>window.requestIdleCallback?window.requestIdleCallback(e):window.setTimeout(e,16),cancel(e){window.cancelIdleCallback?window.cancelIdleCallback(e):window.clearTimeout(e)}},Yt={run(e){Kt||(Kt=!0,jt.textContent=qt,qt+=1),Ht.push(e);const t=Ft;return Ft+=1,t},cancel(e){const t=e-Nt;if(t>=0){if(!Ht[t])throw new Error(`invalid async handle: ${e}`);Ht[t]=null}}};class Gt{static debounce(e,t,i){return e instanceof Gt?e._cancelAsync():e=new Gt,e.setConfig(t,i),e}constructor(){this._asyncModule=null,this._callback=null,this._timer=null}setConfig(e,t){this._asyncModule=e,this._callback=t,this._timer=this._asyncModule.run((()=>{this._timer=null,Qt.delete(this),this._callback()}))}cancel(){this.isActive()&&(this._cancelAsync(),Qt.delete(this))}_cancelAsync(){this.isActive()&&(this._asyncModule.cancel(this._timer),this._timer=null)}flush(){this.isActive()&&(this.cancel(),this._callback())}isActive(){return null!=this._timer}}let Qt=new Set;function Jt(){const e=Boolean(Qt.size);return Qt.forEach((e=>{try{e.flush()}catch(e){setTimeout((()=>{throw e}))}})),e}const Zt=()=>{let e;do{e=Jt()}while(e)},ei=navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/),ti=ei&&ei[1]>=8,ii={_ratio:.5,_scrollerPaddingTop:0,_scrollPosition:0,_physicalSize:0,_physicalAverage:0,_physicalAverageCount:0,_physicalTop:0,_virtualCount:0,_estScrollHeight:0,_scrollHeight:0,_viewportHeight:0,_viewportWidth:0,_physicalItems:null,_physicalSizes:null,_firstVisibleIndexVal:null,_lastVisibleIndexVal:null,_maxPages:2,_templateCost:0,get _physicalBottom(){return this._physicalTop+this._physicalSize},get _scrollBottom(){return this._scrollPosition+this._viewportHeight},get _virtualEnd(){return this._virtualStart+this._physicalCount-1},get _hiddenContentSize(){return this._physicalSize-this._viewportHeight},get _maxScrollTop(){return this._estScrollHeight-this._viewportHeight+this._scrollOffset},get _maxVirtualStart(){const e=this._virtualCount;return Math.max(0,e-this._physicalCount)},get _virtualStart(){return this._virtualStartVal||0},set _virtualStart(e){e=this._clamp(e,0,this._maxVirtualStart),this._virtualStartVal=e},get _physicalStart(){return this._physicalStartVal||0},set _physicalStart(e){(e%=this._physicalCount)<0&&(e=this._physicalCount+e),this._physicalStartVal=e},get _physicalEnd(){return(this._physicalStart+this._physicalCount-1)%this._physicalCount},get _physicalCount(){return this._physicalCountVal||0},set _physicalCount(e){t
|
||
|
<style>
|
||
|
:host {
|
||
|
display: block;
|
||
|
min-height: 1px;
|
||
|
overflow: auto;
|
||
|
|
||
|
/* Fixes item background from getting on top of scrollbars on Safari */
|
||
|
transform: translate3d(0, 0, 0);
|
||
|
|
||
|
/* Enable momentum scrolling on iOS */
|
||
|
-webkit-overflow-scrolling: touch;
|
||
|
|
||
|
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
|
||
|
box-shadow: 0 0 0 white;
|
||
|
}
|
||
|
|
||
|
#selector {
|
||
|
border-width: var(--_vaadin-combo-box-items-container-border-width);
|
||
|
border-style: var(--_vaadin-combo-box-items-container-border-style);
|
||
|
border-color: var(--_vaadin-combo-box-items-container-border-color);
|
||
|
}
|
||
|
</style>
|
||
|
<div id="selector">
|
||
|
<slot></slot>
|
||
|
</div>
|
||
|
`}static get properties(){return{items:{type:Array,observer:"__itemsChanged"},focusedIndex:{type:Number,observer:"__focusedIndexChanged"},loading:{type:Boolean,observer:"__loadingChanged"},opened:{type:Boolean,observer:"__openedChanged"},selectedItem:{type:Object,observer:"__selectedItemChanged"},itemIdPath:{type:String},comboBox:{type:Object},getItemLabel:{type:Object},renderer:{type:Object,observer:"__rendererChanged"},theme:{type:String}}}constructor(){super(),this.__boundOnItemClick=this.__onItemClick.bind(this)}__openedChanged(e){e&&this.requestContentUpdate()}ready(){super.ready(),this.id=`${this.localName}-${Dt++}`,this.__hostTagName=this.constructor.is.replace("-scroller",""),this.setAttribute("role","listbox"),this.addEventListener("click",(e=>e.stopPropagation())),this.__patchWheelOverScrolling(),this.__virtualizer=new ai({createElements:this.__createElements.bind(this),updateElement:this.__updateElement.bind(this),elementsContainer:this,scrollTarget:this,scrollContainer:this.$.selector})}requestContentUpdate(){this.__virtualizer.update()}scrollIntoView(e){if(!(this.opened&&e>=0))return;const t=this._visibleItemsCount();let i=e;e>this.__virtualizer.lastVisibleIndex-1?(this.__virtualizer.scrollToIndex(e),i=e-t+1):e>this.__virtualizer.firstVisibleIndex&&(i=this.__virtualizer.firstVisibleIndex),this.__virtualizer.scrollToIndex(Math.max(0,i));const n=[...this.children].find((e=>!e.hidden&&e.index===this.__virtualizer.lastVisibleIndex));if(!n||e!==n.index)return;const s=n.getBoundingClientRect(),a=this.getBoundingClientRect(),o=s.bottom-a.bottom+this._viewportTotalPaddingBottom;o>0&&(this.scrollTop+=o)}__getAriaRole(e){return void 0!==e&&"option"}__getAriaSelected(e,t){return this.__isItemFocused(e,t).toString()}__isItemFocused(e,t){return!this.loading&&e===t}__isItemSelected(e,t,i){return!(e instanceof oi)&&(i&&void 0!==e&&void 0!==t?this.get(i,e)===this.get(i,t):e===t)}__itemsChanged(e){this.__virtualizer&&e&&(this.__virtualizer.size=e.length,this.__virtualizer.flush(),this.setAttribute("aria-setsize",e.length),this.requestContentUpdate())}__loadingChanged(){this.requestContentUpdate()}__selectedItemChanged(){this.requestContentUpdate()}__focusedIndexChanged(e,t){e!==t&&this.requestContentUpdate(),e>=0&&!this.loading&&this.scrollIntoView(e)}__rendererChanged(e,t){(e||t)&&this.requestContentUpdate()}__createElements(e){return[...Array(e)].map((()=>{const e=document.createElement(`${this.__hostTagName}-item`);return e.addEventListener("click",this.__boundOnItemClick),e.tabIndex="-1",e.style.width="100%",e}))}__updateElement(e,t){const i=this.items[t],n=this.focusedIndex;e.setProperties({item:i,index:t,label:this.getItemLabel(i),selected:this.__isItemSelected(i,this.selectedItem,this.itemIdPath),renderer:this.renderer,focused:this.__isItemFocused(n,t)}),e.id=`${this.__hostTagName}-item-${t}`,e.setAttribute("role",this.__getAriaRole(t)),e.setAttribute("aria-selected",this.__getAriaSelected(n,t)),e.setAttribute("aria-posinset",t+1),this.theme?e.setAttribute("theme",this.theme):e.removeAttribute("theme"),i instanceof oi&&this.__requestItemByIndex(t)}__onItemClick(e){this.dispatchEvent(new CustomEvent("selection-changed",{detail:{item:e.currentTarget.item}}))}__patchWheelOverScrolling(){this.$.selector.addEventListener("wheel",(e=>{const t=0===this.scrollTop,i=this.scrollHeight-this.scrollTop-this.clientHeight<=1;(t&&e.deltaY<0||i&&e.deltaY>0)&&e.preventDefault()}))}get _viewportTotalPaddingBottom(){if(void 0===this._cachedViewportTotalPaddingBottom){const e=window.getComputedStyle(this.$.selector);this._cachedViewportTotalPaddingBottom=[e.paddingBottom,e.borderBottomWidth].map((e=>parseInt(e,10))).reduce(((e,t)=>e+t))}return this._cachedViewportTotalPaddingBottom}__requestItemByIndex(e){requestAnimationFrame((()=>{this.dispatchEvent(new CustomEvent("index-requested",{detail:{index:e,currentScrollerPos:this._oldScrollerPosition}}))}))}_visibleItemsCount(){this.__virtualizer.scrollToIndex(this.__virtualizer.firstVisibleIndex);return this.__virtualizer.size>0?this.__virtualizer.lastVisibleIndex-this.__virtualizer.firs
|
||
|
<style>
|
||
|
:host([opened]) {
|
||
|
pointer-events: auto;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<slot></slot>
|
||
|
|
||
|
<vaadin-combo-box-overlay
|
||
|
id="overlay"
|
||
|
opened="[[_overlayOpened]]"
|
||
|
loading$="[[loading]]"
|
||
|
theme$="[[_theme]]"
|
||
|
position-target="[[inputElement]]"
|
||
|
no-vertical-overlap
|
||
|
restore-focus-node="[[inputElement]]"
|
||
|
></vaadin-combo-box-overlay>
|
||
|
`}static get properties(){return{attrForValue:{type:String,value:"value"}}}get clearElement(){return this.querySelector(".clear-button")}ready(){super.ready(),this._toggleElement=this.querySelector(".toggle-button"),W(this,(()=>{this._setInputElement(this.querySelector("vaadin-text-field,.input")),this._revertInputValue()}))}checkValidity(){return this.inputElement.validate?this.inputElement.validate():super.checkValidity()}get _propertyForValue(){return g(this.attrForValue)}get _nativeInput(){const e=this.inputElement;if(e){if(e instanceof HTMLInputElement)return e;const t=e.querySelector("input");if(t)return t;if(e.shadowRoot){const t=e.shadowRoot.querySelector("input");if(t)return t}}}_isClearButton(e){return super._isClearButton(e)||"input"===e.type&&!e.isTrusted||"clear-button"===e.composedPath()[0].getAttribute("part")}_onChange(e){super._onChange(e),this._isClearButton(e)&&this._clear()}}customElements.define(fi.is,fi),Xe("vaadin-combo-box-item",p`
|
||
|
:host {
|
||
|
padding: 0;
|
||
|
}
|
||
|
:host([focused]:not([disabled])) {
|
||
|
background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
|
||
|
}
|
||
|
:host([selected]:not([disabled])) {
|
||
|
background-color: transparent;
|
||
|
color: var(--mdc-theme-primary);
|
||
|
--mdc-ripple-color: var(--mdc-theme-primary);
|
||
|
--mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
|
||
|
}
|
||
|
:host([selected]:not([disabled])):before {
|
||
|
background-color: var(--mdc-theme-primary);
|
||
|
opacity: 0.12;
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
:host([selected][focused]:not([disabled])):before {
|
||
|
opacity: 0.24;
|
||
|
}
|
||
|
:host(:hover:not([disabled])) {
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
[part="content"] {
|
||
|
width: 100%;
|
||
|
}
|
||
|
[part="checkmark"] {
|
||
|
display: none;
|
||
|
}
|
||
|
`),a([d("ha-combo-box")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[r({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"value",value:void 0},{kind:"field",decorators:[r()],key:"placeholder",value:void 0},{kind:"field",decorators:[r()],key:"validationMessage",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({attribute:"error-message"})],key:"errorMessage",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"invalid",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"icon",value:()=>!1},{kind:"field",decorators:[r({attribute:!1})],key:"items",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"filteredItems",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"dataProvider",value:void 0},{kind:"field",decorators:[r({attribute:"allow-custom-value",type:Boolean})],key:"allowCustomValue",value:()=>!1},{kind:"field",decorators:[r({attribute:"item-value-path"})],key:"itemValuePath",value:()=>"value"},{kind:"field",decorators:[r({attribute:"item-label-path"})],key:"itemLabelPath",value:()=>"label"},{kind:"field",decorators:[r({attribute:"item-id-path"})],key:"itemIdPath",value:void 0},{kind:"field",decorators:[r()],key:"renderer",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"required",value:()=>!1},{kind:"field",decorators:[r({type:Boolean,reflect:!0,attribute:"opened"})],key:"opened",value:void 0},{kind:"field",decorators:[c("vaadin-combo-box-light",!0)],key:"_comboBox",value:void 0},{kind:"field",decorators:[c("ha-textfield",!0)],key:"_inputElement",value:void 0},{kind:"field",key:"_overlayMutationObserver",value:void 0},{kind:"field",key:"_bodyMutationObserver",value:void 0},{kind:"method",key:"open",value:async function(){var e;await this.updateComplete,null===(e=this._comboBox)||void 0===e||e.open()}},{kind:"method",key:"focus",value:async function(){var e,t;await this.updateComplete,await(null===(e=this._inputElement)||void 0===e?void 0:e.updateComplete),null===(t=this._inputElement)||void 0===t||t.focus()}},{kind:"method",key:"disconnectedCallback",value:function(){m(v(i.prototype),"disconnectedCallback",this).call(this),this._overlayMutationObserver&&(this._overlayMutationObserver.disconnect(),this._overlayMutationObserver=void 0),this._bodyMutationObserver&&(this._bodyMutationObserver.disconnect(),this._bodyMutationObserver=void 0)}},{kind:"get",key:"selectedItem",value:function(){return this._comboBox.selectedItem}},{kind:"method",key:"setInputValue",value:function(e){this._comboBox.value=e}},{kind:"method",key:"render",value:function(){var e;return l`
|
||
|
<vaadin-combo-box-light
|
||
|
.itemValuePath=${this.itemValuePath}
|
||
|
.itemIdPath=${this.itemIdPath}
|
||
|
.itemLabelPath=${this.itemLabelPath}
|
||
|
.items=${this.items}
|
||
|
.value=${this.value||""}
|
||
|
.filteredItems=${this.filteredItems}
|
||
|
.dataProvider=${this.dataProvider}
|
||
|
.allowCustomValue=${this.allowCustomValue}
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.required}
|
||
|
${Ke(this.renderer||this._defaultRowRenderer)}
|
||
|
@opened-changed=${this._openedChanged}
|
||
|
@filter-changed=${this._filterChanged}
|
||
|
@value-changed=${this._valueChanged}
|
||
|
attr-for-value="value"
|
||
|
>
|
||
|
<ha-textfield
|
||
|
label=${A(this.label)}
|
||
|
placeholder=${A(this.placeholder)}
|
||
|
?disabled=${this.disabled}
|
||
|
?required=${this.required}
|
||
|
validationMessage=${A(this.validationMessage)}
|
||
|
.errorMessage=${this.errorMessage}
|
||
|
class="input"
|
||
|
autocapitalize="none"
|
||
|
autocomplete="off"
|
||
|
autocorrect="off"
|
||
|
spellcheck="false"
|
||
|
.suffix=${l`<div
|
||
|
style="width: 28px;"
|
||
|
role="none presentation"
|
||
|
></div>`}
|
||
|
.icon=${this.icon}
|
||
|
.invalid=${this.invalid}
|
||
|
helper=${A(this.helper)}
|
||
|
helperPersistent
|
||
|
>
|
||
|
<slot name="icon" slot="leadingIcon"></slot>
|
||
|
</ha-textfield>
|
||
|
${this.value?l`<ha-svg-icon
|
||
|
role="button"
|
||
|
tabindex="-1"
|
||
|
aria-label=${A(null===(e=this.hass)||void 0===e?void 0:e.localize("ui.common.clear"))}
|
||
|
class="clear-button"
|
||
|
.path=${O}
|
||
|
@click=${this._clearValue}
|
||
|
></ha-svg-icon>`:""}
|
||
|
<ha-svg-icon
|
||
|
role="button"
|
||
|
tabindex="-1"
|
||
|
aria-label=${A(this.label)}
|
||
|
aria-expanded=${this.opened?"true":"false"}
|
||
|
class="toggle-button"
|
||
|
.path=${this.opened?w:C}
|
||
|
@click=${this._toggleOpen}
|
||
|
></ha-svg-icon>
|
||
|
</vaadin-combo-box-light>
|
||
|
`}},{kind:"field",key:"_defaultRowRenderer",value(){return e=>l`<mwc-list-item>
|
||
|
${this.itemLabelPath?e[this.itemLabelPath]:e}
|
||
|
</mwc-list-item>`}},{kind:"method",key:"_clearValue",value:function(e){e.stopPropagation(),u(this,"value-changed",{value:void 0})}},{kind:"method",key:"_toggleOpen",value:function(e){var t,i;this.opened?(null===(t=this._comboBox)||void 0===t||t.close(),e.stopPropagation()):null===(i=this._comboBox)||void 0===i||i.inputElement.focus()}},{kind:"method",key:"_openedChanged",value:function(e){e.stopPropagation();const t=e.detail.value;if(setTimeout((()=>{this.opened=t}),0),u(this,"opened-changed",{value:e.detail.value}),t){const e=document.querySelector("vaadin-combo-box-overlay");e&&this._removeInert(e),this._observeBody()}else{var i;null===(i=this._bodyMutationObserver)||void 0===i||i.disconnect(),this._bodyMutationObserver=void 0}}},{kind:"method",key:"_observeBody",value:function(){"MutationObserver"in window&&!this._bodyMutationObserver&&(this._bodyMutationObserver=new MutationObserver((e=>{e.forEach((e=>{e.addedNodes.forEach((e=>{"VAADIN-COMBO-BOX-OVERLAY"===e.nodeName&&this._removeInert(e)})),e.removedNodes.forEach((e=>{var t;"VAADIN-COMBO-BOX-OVERLAY"===e.nodeName&&(null===(t=this._overlayMutationObserver)||void 0===t||t.disconnect(),this._overlayMutationObserver=void 0)}))}))})),this._bodyMutationObserver.observe(document.body,{childList:!0}))}},{kind:"method",key:"_removeInert",value:function(e){var t;if(e.inert)return e.inert=!1,null===(t=this._overlayMutationObserver)||void 0===t||t.disconnect(),void(this._overlayMutationObserver=void 0);"MutationObserver"in window&&!this._overlayMutationObserver&&(this._overlayMutationObserver=new MutationObserver((e=>{e.forEach((e=>{if("inert"===e.attributeName){const i=e.target;var t;if(i.inert)null===(t=this._overlayMutationObserver)||void 0===t||t.disconnect(),this._overlayMutationObserver=void 0,i.inert=!1}}))})),this._overlayMutationObserver.observe(e,{attributes:!0}))}},{kind:"method",key:"_filterChanged",value:function(e){e.stopPropagation(),u(this,"filter-changed",{value:e.detail.value})}},{kind:"method",key:"_valueChanged",value:function(e){e.stopPropagation();const t=e.detail.value;t!==this.value&&u(this,"value-changed",{value:t||void 0})}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host {
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
vaadin-combo-box-light {
|
||
|
position: relative;
|
||
|
--vaadin-combo-box-overlay-max-height: calc(45vh);
|
||
|
}
|
||
|
ha-textfield {
|
||
|
width: 100%;
|
||
|
}
|
||
|
ha-textfield > ha-icon-button {
|
||
|
--mdc-icon-button-size: 24px;
|
||
|
padding: 2px;
|
||
|
color: var(--secondary-text-color);
|
||
|
}
|
||
|
ha-svg-icon {
|
||
|
color: var(--input-dropdown-icon-color);
|
||
|
position: absolute;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.toggle-button {
|
||
|
right: 12px;
|
||
|
top: -10px;
|
||
|
inset-inline-start: initial;
|
||
|
inset-inline-end: 12px;
|
||
|
direction: var(--direction);
|
||
|
}
|
||
|
:host([opened]) .toggle-button {
|
||
|
color: var(--primary-color);
|
||
|
}
|
||
|
.clear-button {
|
||
|
--mdc-icon-size: 20px;
|
||
|
top: -7px;
|
||
|
right: 36px;
|
||
|
inset-inline-start: initial;
|
||
|
inset-inline-end: 36px;
|
||
|
direction: var(--direction);
|
||
|
}
|
||
|
`}}]}}),o);let bi=a([d("ha-selector-select")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"selector",value:void 0},{kind:"field",decorators:[r()],key:"value",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r({type:Boolean})],key:"required",value:()=>!0},{kind:"field",decorators:[c("ha-combo-box",!0)],key:"comboBox",value:void 0},{kind:"field",key:"_filter",value:()=>""},{kind:"method",key:"render",value:function(){var e,t,i,n;const s=(null===(e=this.selector.select)||void 0===e?void 0:e.options.map((e=>"object"==typeof e?e:{value:e,label:e})))||[];var a;if((null===(t=this.selector.select)||void 0===t||!t.custom_value)&&"list"===this._mode)return null!==(a=this.selector.select)&&void 0!==a&&a.multiple?l`
|
||
|
<div>
|
||
|
${this.label}
|
||
|
${s.map((e=>{var t;return l`
|
||
|
<ha-formfield .label=${e.label}>
|
||
|
<ha-checkbox
|
||
|
.checked=${null===(t=this.value)||void 0===t?void 0:t.includes(e.value)}
|
||
|
.value=${e.value}
|
||
|
.disabled=${e.disabled||this.disabled}
|
||
|
@change=${this._checkboxChanged}
|
||
|
></ha-checkbox>
|
||
|
</ha-formfield>
|
||
|
`}))}
|
||
|
</div>
|
||
|
${this._renderHelper()}
|
||
|
`:l`
|
||
|
<div>
|
||
|
${this.label}
|
||
|
${s.map((e=>l`
|
||
|
<ha-formfield .label=${e.label}>
|
||
|
<ha-radio
|
||
|
.checked=${e.value===this.value}
|
||
|
.value=${e.value}
|
||
|
.disabled=${e.disabled||this.disabled}
|
||
|
@change=${this._valueChanged}
|
||
|
></ha-radio>
|
||
|
</ha-formfield>
|
||
|
`))}
|
||
|
</div>
|
||
|
${this._renderHelper()}
|
||
|
`;if(null!==(i=this.selector.select)&&void 0!==i&&i.multiple){const e=this.value&&""!==this.value?this.value:[];return l`
|
||
|
${null!=e&&e.length?l`<ha-chip-set>
|
||
|
${e.map(((e,t)=>{var i;return l`
|
||
|
<ha-chip hasTrailingIcon>
|
||
|
${(null===(i=s.find((t=>t.value===e)))||void 0===i?void 0:i.label)||e}
|
||
|
<ha-svg-icon
|
||
|
slot="trailing-icon"
|
||
|
.path=${O}
|
||
|
.idx=${t}
|
||
|
@click=${this._removeItem}
|
||
|
></ha-svg-icon>
|
||
|
</ha-chip>
|
||
|
`}))}
|
||
|
</ha-chip-set>`:""}
|
||
|
|
||
|
<ha-combo-box
|
||
|
item-value-path="value"
|
||
|
item-label-path="label"
|
||
|
.hass=${this.hass}
|
||
|
.label=${this.label}
|
||
|
.helper=${this.helper}
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.required&&!e.length}
|
||
|
.value=${this._filter}
|
||
|
.filteredItems=${s.filter((t=>!(t.disabled||null!=e&&e.includes(t.value))))}
|
||
|
@filter-changed=${this._filterChanged}
|
||
|
@value-changed=${this._comboBoxValueChanged}
|
||
|
></ha-combo-box>
|
||
|
`}return null!==(n=this.selector.select)&&void 0!==n&&n.custom_value?(void 0===this.value||s.find((e=>e.value===this.value))||s.unshift({value:this.value,label:this.value}),l`
|
||
|
<ha-combo-box
|
||
|
item-value-path="value"
|
||
|
item-label-path="label"
|
||
|
.hass=${this.hass}
|
||
|
.label=${this.label}
|
||
|
.helper=${this.helper}
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.required}
|
||
|
.items=${s.filter((e=>!e.disabled))}
|
||
|
.value=${this.value}
|
||
|
@filter-changed=${this._filterChanged}
|
||
|
@value-changed=${this._comboBoxValueChanged}
|
||
|
></ha-combo-box>
|
||
|
`):l`
|
||
|
<ha-select
|
||
|
fixedMenuPosition
|
||
|
naturalMenuWidth
|
||
|
.label=${this.label}
|
||
|
.value=${this.value}
|
||
|
.helper=${this.helper}
|
||
|
.disabled=${this.disabled}
|
||
|
@closed=${D}
|
||
|
@selected=${this._valueChanged}
|
||
|
>
|
||
|
${s.map((e=>l`
|
||
|
<mwc-list-item .value=${e.value} .disabled=${e.disabled}
|
||
|
>${e.label}</mwc-list-item
|
||
|
>
|
||
|
`))}
|
||
|
</ha-select>
|
||
|
`}},{kind:"method",key:"_renderHelper",value:function(){return this.helper?l`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`:""}},{kind:"get",key:"_mode",value:function(){var e,t,i;return(null===(e=this.selector.select)||void 0===e?void 0:e.mode)||(((null===(t=this.selector.select)||void 0===t||null===(i=t.options)||void 0===i?void 0:i.length)||0)<6?"list":"dropdown")}},{kind:"method",key:"_valueChanged",value:function(e){var t;e.stopPropagation();const i=(null===(t=e.detail)||void 0===t?void 0:t.value)||e.target.value;!this.disabled&&i&&u(this,"value-changed",{value:i})}},{kind:"method",key:"_checkboxChanged",value:function(e){if(e.stopPropagation(),this.disabled)return;let t;const i=e.target.value;if(e.target.checked)if(this.value){if(this.value.includes(i))return;t=[...this.value,i]}else t=[i];else{var n;if(null===(n=this.value)||void 0===n||!n.includes(i))return;t=this.value.filter((e=>e!==i))}u(this,"value-changed",{value:t})}},{kind:"method",key:"_removeItem",value:async function(e){const t=[...this.value];t.splice(e.target.idx,1),u(this,"value-changed",{value:t}),await this.updateComplete,this._filterChanged()}},{kind:"method",key:"_comboBoxValueChanged",value:function(e){var t,i;e.stopPropagation();const n=e.detail.value;if(this.disabled||""===n)return;if(null===(t=this.selector.select)||void 0===t||!t.multiple)return void u(this,"value-changed",{value:n});if(void 0!==n&&null!==(i=this.value)&&void 0!==i&&i.includes(n))return;setTimeout((()=>{this._filterChanged(),this.comboBox.setInputValue("")}),0);const s=this.value&&""!==this.value?this.value:[];u(this,"value-changed",{value:[...s,n]})}},{kind:"method",key:"_filterChanged",value:function(e){var t,i;this._filter=(null==e?void 0:e.detail.value)||"";const n=null===(t=this.comboBox.items)||void 0===t?void 0:t.filter((e=>{var t,i,n;if(null!==(t=this.selector.select)&&void 0!==t&&t.multiple&&null!==(i=this.value)&&void 0!==i&&i.includes(e.value))return!1;return(e.label||e.value).toLowerCase().includes(null===(n=this._filter)||void 0===n?void 0:n.toLowerCase())}));this._filter&&null!==(i=this.selector.select)&&void 0!==i&&i.custom_value&&(null==n||n.unshift({label:this._filter,value:this._filter})),this.comboBox.filteredItems=n}},{kind:"field",static:!0,key:"styles",value:()=>p`
|
||
|
ha-select,
|
||
|
mwc-formfield,
|
||
|
ha-formfield {
|
||
|
display: block;
|
||
|
}
|
||
|
mwc-list-item[disabled] {
|
||
|
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
|
||
|
}
|
||
|
`}]}}),o);var gi=Object.freeze({__proto__:null,HaSelectSelector:bi});a([d("ha-form-select")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r()],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",key:"_selectSchema",value:()=>B((e=>({select:{options:e.map((e=>({value:e[0],label:e[1]})))}})))},{kind:"method",key:"render",value:function(){return l`
|
||
|
<ha-selector-select
|
||
|
.hass=${this.hass}
|
||
|
.schema=${this.schema}
|
||
|
.value=${this.data}
|
||
|
.label=${this.label}
|
||
|
.helper=${this.helper}
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.schema.required}
|
||
|
.selector=${this._selectSchema(this.schema.options)}
|
||
|
@value-changed=${this._valueChanged}
|
||
|
></ha-selector-select>
|
||
|
`}},{kind:"method",key:"_valueChanged",value:function(e){e.stopPropagation();let t=e.detail.value;t!==this.data&&(""===t&&(t=void 0),u(this,"value-changed",{value:t}))}}]}}),o);const yi=["password","secret","token"];a([d("ha-form-string")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[r()],key:"schema",value:void 0},{kind:"field",decorators:[r()],key:"data",value:void 0},{kind:"field",decorators:[r()],key:"label",value:void 0},{kind:"field",decorators:[r()],key:"helper",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[x()],key:"_unmaskedPassword",value:()=>!1},{kind:"field",decorators:[c("ha-textfield")],key:"_input",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){var e;const t=yi.some((e=>this.schema.name.includes(e)));return l`
|
||
|
<ha-textfield
|
||
|
.type=${t?this._unmaskedPassword?"text":"password":this._stringType}
|
||
|
.label=${this.label}
|
||
|
.value=${this.data||""}
|
||
|
.helper=${this.helper}
|
||
|
helperPersistent
|
||
|
.disabled=${this.disabled}
|
||
|
.required=${this.schema.required}
|
||
|
.autoValidate=${this.schema.required}
|
||
|
.name=${this.schema.name}
|
||
|
.autocomplete=${this.schema.autocomplete}
|
||
|
.suffix=${t?l`<div style="width: 24px"></div>`:null===(e=this.schema.description)||void 0===e?void 0:e.suffix}
|
||
|
.validationMessage=${this.schema.required?"Required":void 0}
|
||
|
@input=${this._valueChanged}
|
||
|
></ha-textfield>
|
||
|
${t?l`<ha-icon-button
|
||
|
toggles
|
||
|
.label=${(this._unmaskedPassword?"Hide":"Show")+" password"}
|
||
|
@click=${this._toggleUnmaskedPassword}
|
||
|
.path=${this._unmaskedPassword?L:M}
|
||
|
></ha-icon-button>`:""}
|
||
|
`}},{kind:"method",key:"updated",value:function(e){e.has("schema")&&this.toggleAttribute("own-margin",!!this.schema.required)}},{kind:"method",key:"_toggleUnmaskedPassword",value:function(){this._unmaskedPassword=!this._unmaskedPassword}},{kind:"method",key:"_valueChanged",value:function(e){let t=e.target.value;this.data!==t&&(""!==t||this.schema.required||(t=void 0),u(this,"value-changed",{value:t}))}},{kind:"get",key:"_stringType",value:function(){if(this.schema.format){if(["email","url"].includes(this.schema.format))return this.schema.format;if("fqdnurl"===this.schema.format)return"url"}return"text"}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
:host {
|
||
|
display: block;
|
||
|
position: relative;
|
||
|
}
|
||
|
:host([own-margin]) {
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
ha-textfield {
|
||
|
display: block;
|
||
|
}
|
||
|
ha-icon-button {
|
||
|
position: absolute;
|
||
|
top: 1em;
|
||
|
right: 12px;
|
||
|
--mdc-icon-button-size: 24px;
|
||
|
color: var(--secondary-text-color);
|
||
|
}
|
||
|
|
||
|
ha-icon-button {
|
||
|
inset-inline-start: initial;
|
||
|
inset-inline-end: 12px;
|
||
|
direction: var(--direction);
|
||
|
}
|
||
|
`}}]}}),o);const ki=(e,t)=>e?t.name?e[t.name]:e:null;a([d("ha-form")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[r({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[r({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[r()],key:"error",value:void 0},{kind:"field",decorators:[r({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[r()],key:"computeError",value:void 0},{kind:"field",decorators:[r()],key:"computeLabel",value:void 0},{kind:"field",decorators:[r()],key:"computeHelper",value:void 0},{kind:"method",key:"focus",value:function(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".root");if(t)for(const e of t.children)if("HA-ALERT"!==e.tagName){e.focus();break}}},{kind:"method",key:"render",value:function(){return l`
|
||
|
<div class="root" part="root">
|
||
|
${this.error&&this.error.base?l`
|
||
|
<ha-alert alert-type="error">
|
||
|
${this._computeError(this.error.base,this.schema)}
|
||
|
</ha-alert>
|
||
|
`:""}
|
||
|
${this.schema.map((e=>{const t=((e,t)=>e&&t.name?e[t.name]:null)(this.error,e);return l`
|
||
|
${t?l`
|
||
|
<ha-alert own-margin alert-type="error">
|
||
|
${this._computeError(t,e)}
|
||
|
</ha-alert>
|
||
|
`:""}
|
||
|
${"selector"in e?l`<ha-selector
|
||
|
.schema=${e}
|
||
|
.hass=${this.hass}
|
||
|
.name=${e.name}
|
||
|
.selector=${e.selector}
|
||
|
.value=${ki(this.data,e)}
|
||
|
.label=${this._computeLabel(e,this.data)}
|
||
|
.disabled=${e.disabled||this.disabled}
|
||
|
.helper=${this._computeHelper(e)}
|
||
|
.required=${e.required||!1}
|
||
|
.context=${this._generateContext(e)}
|
||
|
></ha-selector>`:X(`ha-form-${e.type}`,{schema:e,data:ki(this.data,e),label:this._computeLabel(e,this.data),helper:this._computeHelper(e),disabled:this.disabled||e.disabled,hass:this.hass,computeLabel:this.computeLabel,computeHelper:this.computeHelper,context:this._generateContext(e)})}
|
||
|
`}))}
|
||
|
</div>
|
||
|
`}},{kind:"method",key:"_generateContext",value:function(e){if(!e.context)return;const t={};for(const[i,n]of Object.entries(e.context))t[i]=this.data[n];return t}},{kind:"method",key:"createRenderRoot",value:function(){const e=m(v(i.prototype),"createRenderRoot",this).call(this);return e.addEventListener("value-changed",(e=>{e.stopPropagation();const t=e.target.schema,i=t.name?{[t.name]:e.detail.value}:e.detail.value;u(this,"value-changed",{value:{...this.data,...i}})})),e}},{kind:"method",key:"_computeLabel",value:function(e,t){return this.computeLabel?this.computeLabel(e,t):e?e.name:""}},{kind:"method",key:"_computeHelper",value:function(e){return this.computeHelper?this.computeHelper(e):""}},{kind:"method",key:"_computeError",value:function(e,t){return this.computeError?this.computeError(e,t):e}},{kind:"get",static:!0,key:"styles",value:function(){return p`
|
||
|
.root > * {
|
||
|
display: block;
|
||
|
}
|
||
|
.root > *:not([own-margin]):not(:last-child) {
|
||
|
margin-bottom: 24px;
|
||
|
}
|
||
|
ha-alert[own-margin] {
|
||
|
margin-bottom: 4px;
|
||
|
}
|
||
|
`}}]}}),o);export{Ne as c,X as d};
|