c.d262aab0.js 124 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649
  1. import{Q as e,S as t,a5 as i,T as a,V as n,_ as r,n as s,a as o,h as l,e as d,i as c,$ as u,A as h,r as p,L as m,N as v,a6 as b,a7 as f,a8 as y,a9 as g,aa as _,ab as k,o as x,t as w,ac as $,ad as C,x as E,ae as S,j as A,J as B,u as V,v as R,M,g as L,K as T,w as K,R as P,y as D,z as I,m as F,af as O,ag as q}from"./main-ad130be7.js";import"./c.f1291e50.js";import{s as N,a as H,b as z,c as U,d as X,F as j}from"./c.9b92f489.js";import"./c.3f859915.js";import"./c.0ca5587f.js";import{L as W,s as G}from"./c.82eccc94.js";import{S as Y,s as J,a as Q}from"./c.42d6aebd.js";import{o as Z}from"./c.8e28b461.js";const ee=e(class extends t{constructor(e){if(super(e),i(this,"_element",void 0),e.type!==a.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})),n):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}});let te=class extends H{};te.styles=[N],te=r([s("mwc-formfield")],te),o([s("ha-form-boolean")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d()],key:"schema",value:void 0},{kind:"field",decorators:[d()],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d({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 u`
  2. <mwc-formfield .label=${this.label}>
  3. <ha-checkbox
  4. .checked=${this.data}
  5. .disabled=${this.disabled}
  6. @change=${this._valueChanged}
  7. ></ha-checkbox>
  8. </mwc-formfield>
  9. `}},{kind:"method",key:"_valueChanged",value:function(e){h(this,"value-changed",{value:e.target.checked})}}]}}),l),o([s("ha-form-constant")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"method",key:"render",value:function(){return u`<span class="label">${this.label}</span>${this.schema.value?`: ${this.schema.value}`:""}`}},{kind:"get",static:!0,key:"styles",value:function(){return p`
  10. :host {
  11. display: block;
  12. }
  13. .label {
  14. font-weight: 500;
  15. }
  16. `}}]}}),l),o([s("ha-form-grid")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[d()],key:"computeLabel",value:void 0},{kind:"field",decorators:[d()],key:"computeHelper",value:void 0},{kind:"method",key:"firstUpdated",value:function(e){m(v(i.prototype),"firstUpdated",this).call(this,e),this.setAttribute("own-margin","")}},{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 u`
  17. ${this.schema.schema.map((e=>u`
  18. <ha-form
  19. .hass=${this.hass}
  20. .data=${this.data}
  21. .schema=${[e]}
  22. .disabled=${this.disabled}
  23. .computeLabel=${this.computeLabel}
  24. .computeHelper=${this.computeHelper}
  25. ></ha-form>
  26. `))}
  27. `}},{kind:"get",static:!0,key:"styles",value:function(){return p`
  28. :host {
  29. display: grid !important;
  30. grid-template-columns: repeat(
  31. var(--form-grid-column-count, auto-fit),
  32. minmax(var(--form-grid-min-width, 200px), 1fr)
  33. );
  34. grid-gap: 8px;
  35. }
  36. :host > ha-form {
  37. display: block;
  38. margin-bottom: 24px;
  39. }
  40. `}}]}}),l),o([s("ha-form-float")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d({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 u`
  41. <ha-textfield
  42. inputMode="decimal"
  43. .label=${this.label}
  44. .value=${void 0!==this.data?this.data:""}
  45. .disabled=${this.disabled}
  46. .required=${this.schema.required}
  47. .autoValidate=${this.schema.required}
  48. .suffix=${null===(e=this.schema.description)||void 0===e?void 0:e.suffix}
  49. .validationMessage=${this.schema.required?"Required":void 0}
  50. @input=${this._valueChanged}
  51. ></ha-textfield>
  52. `}},{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 a;if(!i.endsWith("."))if(""!==i&&(a=parseFloat(i),isNaN(a)&&(a=void 0)),this.data!==a)h(this,"value-changed",{value:a});else{const e=void 0===a?"":String(a);t.value!==e&&(t.value=e)}}},{kind:"field",static:!0,key:"styles",value:()=>p`
  53. :host([own-margin]) {
  54. margin-bottom: 5px;
  55. }
  56. ha-textfield {
  57. display: block;
  58. }
  59. `}]}}),l);const ie=b({_template:f`
  60. <style>
  61. :host {
  62. display: inline-block;
  63. position: fixed;
  64. clip: rect(0px,0px,0px,0px);
  65. }
  66. </style>
  67. <div aria-live$="[[mode]]">[[_text]]</div>
  68. `,is:"iron-a11y-announcer",properties:{mode:{type:String,value:"polite"},timeout:{type:Number,value:150},_text:{type:String,value:""}},created:function(){ie.instance||(ie.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)}});ie.instance=null,ie.requestAvailability=function(){ie.instance||(ie.instance=document.createElement("iron-a11y-announcer")),document.body?document.body.appendChild(ie.instance):document.addEventListener("load",(function(){document.body.appendChild(ie.instance)}))};class ae{constructor(e){ae[" "](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 ae.types[e]&&ae.types[e][t]}set value(e){var t=this.type,i=this.key;t&&i&&(t=ae.types[t]=ae.types[t]||{},null==e?delete t[i]:t[i]=e)}get list(){if(this.type){var e=ae.types[this.type];return e?Object.keys(e).map((function(e){return ne[this.type][e]}),this):[]}}byKey(e){return this.key=e,this.value}}ae[" "]=function(){},ae.types={};var ne=ae.types;b({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 a=new ae({type:e,key:t});return void 0!==i&&i!==a.value?a.value=i:this.value!==a.value&&(this.value=a.value),a},get list(){return this.__meta&&this.__meta.list},_selfChanged:function(e){e&&(this.value=this)},byKey:function(e){return new ae({type:this.type,key:e}).value}});let re=null;const se={properties:{validator:{type:String},invalid:{notify:!0,reflectToAttribute:!0,type:Boolean,value:!1,observer:"_invalidChanged"}},registered:function(){re=new ae({type:"validator"})},_invalidChanged:function(){this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")},get _validator(){return re&&re.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)}};b({_template:f`
  69. <style>
  70. :host {
  71. display: inline-block;
  72. }
  73. </style>
  74. <slot id="content"></slot>
  75. `,is:"iron-input",behaviors:[se],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(){ie.requestAvailability(),this._previousValidInput="",this._patternAlreadyChecked=!1},attached:function(){this._observer=y(this).observeNodes(function(e){this._initSlottedInput()}.bind(this))},detached:function(){this._observer&&(y(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=se.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 oe={attached:function(){this.fire("addon-attached")},update:function(e){}};b({_template:f`
  76. <style>
  77. :host {
  78. display: inline-block;
  79. float: right;
  80. @apply --paper-font-caption;
  81. @apply --paper-input-char-counter;
  82. }
  83. :host([hidden]) {
  84. display: none !important;
  85. }
  86. :host(:dir(rtl)) {
  87. float: left;
  88. }
  89. </style>
  90. <span>[[_charCounterStr]]</span>
  91. `,is:"paper-input-char-counter",behaviors:[oe],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 le=f`
  92. <custom-style>
  93. <style is="custom-style">
  94. html {
  95. --paper-input-container-shared-input-style: {
  96. position: relative; /* to make a stacking context */
  97. outline: none;
  98. box-shadow: none;
  99. padding: 0;
  100. margin: 0;
  101. width: 100%;
  102. max-width: 100%;
  103. background: transparent;
  104. border: none;
  105. color: var(--paper-input-container-input-color, var(--primary-text-color));
  106. -webkit-appearance: none;
  107. text-align: inherit;
  108. vertical-align: var(--paper-input-container-input-align, bottom);
  109. @apply --paper-font-subhead;
  110. };
  111. }
  112. </style>
  113. </custom-style>
  114. `;le.setAttribute("style","display: none;"),document.head.appendChild(le.content),b({_template:f`
  115. <style>
  116. :host {
  117. display: block;
  118. padding: 8px 0;
  119. @apply --paper-input-container;
  120. }
  121. :host([inline]) {
  122. display: inline-block;
  123. }
  124. :host([disabled]) {
  125. pointer-events: none;
  126. opacity: 0.33;
  127. @apply --paper-input-container-disabled;
  128. }
  129. :host([hidden]) {
  130. display: none !important;
  131. }
  132. [hidden] {
  133. display: none !important;
  134. }
  135. .floated-label-placeholder {
  136. @apply --paper-font-caption;
  137. }
  138. .underline {
  139. height: 2px;
  140. position: relative;
  141. }
  142. .focused-line {
  143. @apply --layout-fit;
  144. border-bottom: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
  145. -webkit-transform-origin: center center;
  146. transform-origin: center center;
  147. -webkit-transform: scale3d(0,1,1);
  148. transform: scale3d(0,1,1);
  149. @apply --paper-input-container-underline-focus;
  150. }
  151. .underline.is-highlighted .focused-line {
  152. -webkit-transform: none;
  153. transform: none;
  154. -webkit-transition: -webkit-transform 0.25s;
  155. transition: transform 0.25s;
  156. @apply --paper-transition-easing;
  157. }
  158. .underline.is-invalid .focused-line {
  159. border-color: var(--paper-input-container-invalid-color, var(--error-color));
  160. -webkit-transform: none;
  161. transform: none;
  162. -webkit-transition: -webkit-transform 0.25s;
  163. transition: transform 0.25s;
  164. @apply --paper-transition-easing;
  165. }
  166. .unfocused-line {
  167. @apply --layout-fit;
  168. border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
  169. @apply --paper-input-container-underline;
  170. }
  171. :host([disabled]) .unfocused-line {
  172. border-bottom: 1px dashed;
  173. border-color: var(--paper-input-container-color, var(--secondary-text-color));
  174. @apply --paper-input-container-underline-disabled;
  175. }
  176. .input-wrapper {
  177. @apply --layout-horizontal;
  178. @apply --layout-center;
  179. position: relative;
  180. }
  181. .input-content {
  182. @apply --layout-flex-auto;
  183. @apply --layout-relative;
  184. max-width: 100%;
  185. }
  186. .input-content ::slotted(label),
  187. .input-content ::slotted(.paper-input-label) {
  188. position: absolute;
  189. top: 0;
  190. left: 0;
  191. width: 100%;
  192. font: inherit;
  193. color: var(--paper-input-container-color, var(--secondary-text-color));
  194. -webkit-transition: -webkit-transform 0.25s, width 0.25s;
  195. transition: transform 0.25s, width 0.25s;
  196. -webkit-transform-origin: left top;
  197. transform-origin: left top;
  198. /* Fix for safari not focusing 0-height date/time inputs with -webkit-apperance: none; */
  199. min-height: 1px;
  200. @apply --paper-font-common-nowrap;
  201. @apply --paper-font-subhead;
  202. @apply --paper-input-container-label;
  203. @apply --paper-transition-easing;
  204. }
  205. .input-content ::slotted(label):before,
  206. .input-content ::slotted(.paper-input-label):before {
  207. @apply --paper-input-container-label-before;
  208. }
  209. .input-content ::slotted(label):after,
  210. .input-content ::slotted(.paper-input-label):after {
  211. @apply --paper-input-container-label-after;
  212. }
  213. .input-content.label-is-floating ::slotted(label),
  214. .input-content.label-is-floating ::slotted(.paper-input-label) {
  215. -webkit-transform: translateY(-75%) scale(0.75);
  216. transform: translateY(-75%) scale(0.75);
  217. /* Since we scale to 75/100 of the size, we actually have 100/75 of the
  218. original space now available */
  219. width: 133%;
  220. @apply --paper-input-container-label-floating;
  221. }
  222. :host(:dir(rtl)) .input-content.label-is-floating ::slotted(label),
  223. :host(:dir(rtl)) .input-content.label-is-floating ::slotted(.paper-input-label) {
  224. right: 0;
  225. left: auto;
  226. -webkit-transform-origin: right top;
  227. transform-origin: right top;
  228. }
  229. .input-content.label-is-highlighted ::slotted(label),
  230. .input-content.label-is-highlighted ::slotted(.paper-input-label) {
  231. color: var(--paper-input-container-focus-color, var(--primary-color));
  232. @apply --paper-input-container-label-focus;
  233. }
  234. .input-content.is-invalid ::slotted(label),
  235. .input-content.is-invalid ::slotted(.paper-input-label) {
  236. color: var(--paper-input-container-invalid-color, var(--error-color));
  237. }
  238. .input-content.label-is-hidden ::slotted(label),
  239. .input-content.label-is-hidden ::slotted(.paper-input-label) {
  240. visibility: hidden;
  241. }
  242. .input-content ::slotted(input),
  243. .input-content ::slotted(iron-input),
  244. .input-content ::slotted(textarea),
  245. .input-content ::slotted(iron-autogrow-textarea),
  246. .input-content ::slotted(.paper-input-input) {
  247. @apply --paper-input-container-shared-input-style;
  248. /* The apply shim doesn't apply the nested color custom property,
  249. so we have to re-apply it here. */
  250. color: var(--paper-input-container-input-color, var(--primary-text-color));
  251. @apply --paper-input-container-input;
  252. }
  253. .input-content ::slotted(input)::-webkit-outer-spin-button,
  254. .input-content ::slotted(input)::-webkit-inner-spin-button {
  255. @apply --paper-input-container-input-webkit-spinner;
  256. }
  257. .input-content.focused ::slotted(input),
  258. .input-content.focused ::slotted(iron-input),
  259. .input-content.focused ::slotted(textarea),
  260. .input-content.focused ::slotted(iron-autogrow-textarea),
  261. .input-content.focused ::slotted(.paper-input-input) {
  262. @apply --paper-input-container-input-focus;
  263. }
  264. .input-content.is-invalid ::slotted(input),
  265. .input-content.is-invalid ::slotted(iron-input),
  266. .input-content.is-invalid ::slotted(textarea),
  267. .input-content.is-invalid ::slotted(iron-autogrow-textarea),
  268. .input-content.is-invalid ::slotted(.paper-input-input) {
  269. @apply --paper-input-container-input-invalid;
  270. }
  271. .prefix ::slotted(*) {
  272. display: inline-block;
  273. @apply --paper-font-subhead;
  274. @apply --layout-flex-none;
  275. @apply --paper-input-prefix;
  276. }
  277. .suffix ::slotted(*) {
  278. display: inline-block;
  279. @apply --paper-font-subhead;
  280. @apply --layout-flex-none;
  281. @apply --paper-input-suffix;
  282. }
  283. /* Firefox sets a min-width on the input, which can cause layout issues */
  284. .input-content ::slotted(input) {
  285. min-width: 0;
  286. }
  287. .input-content ::slotted(textarea) {
  288. resize: none;
  289. }
  290. .add-on-content {
  291. position: relative;
  292. }
  293. .add-on-content.is-invalid ::slotted(*) {
  294. color: var(--paper-input-container-invalid-color, var(--error-color));
  295. }
  296. .add-on-content.is-highlighted ::slotted(*) {
  297. color: var(--paper-input-container-focus-color, var(--primary-color));
  298. }
  299. </style>
  300. <div class="floated-label-placeholder" aria-hidden="true" hidden="[[noLabelFloat]]">&nbsp;</div>
  301. <div class="input-wrapper">
  302. <span class="prefix"><slot name="prefix"></slot></span>
  303. <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]" id="labelAndInputContainer">
  304. <slot name="label"></slot>
  305. <slot name="input"></slot>
  306. </div>
  307. <span class="suffix"><slot name="suffix"></slot></span>
  308. </div>
  309. <div class$="[[_computeUnderlineClass(focused,invalid)]]">
  310. <div class="unfocused-line"></div>
  311. <div class="focused-line"></div>
  312. </div>
  313. <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
  314. <slot name="add-on"></slot>
  315. </div>
  316. `,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 y(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,a,n){var r="input-content";if(e)n&&(r+=" label-is-hidden"),a&&(r+=" is-invalid");else{var s=this.querySelector("label");t||n?(r+=" label-is-floating",this.$.labelAndInputContainer.style.position="static",a?r+=" is-invalid":i&&(r+=" label-is-highlighted")):(s&&(this.$.labelAndInputContainer.style.position="relative"),a&&(r+=" is-invalid"))}return i&&(r+=" focused"),r},_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}}),b({_template:f`
  317. <style>
  318. :host {
  319. display: inline-block;
  320. visibility: hidden;
  321. color: var(--paper-input-container-invalid-color, var(--error-color));
  322. @apply --paper-font-caption;
  323. @apply --paper-input-error;
  324. position: absolute;
  325. left:0;
  326. right:0;
  327. }
  328. :host([invalid]) {
  329. visibility: visible;
  330. }
  331. #a11yWrapper {
  332. visibility: hidden;
  333. }
  334. :host([invalid]) #a11yWrapper {
  335. visibility: visible;
  336. }
  337. </style>
  338. <!--
  339. If the paper-input-error element is directly referenced by an
  340. \`aria-describedby\` attribute, such as when used as a paper-input add-on,
  341. then applying \`visibility: hidden;\` to the paper-input-error element itself
  342. does not hide the error.
  343. For more information, see:
  344. https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description
  345. -->
  346. <div id="a11yWrapper">
  347. <slot></slot>
  348. </div>
  349. `,is:"paper-input-error",behaviors:[oe],properties:{invalid:{readOnly:!0,reflectToAttribute:!0,type:Boolean}},update:function(e){this._setInvalid(e.invalid)}});const de={properties:{name:{type:String},value:{notify:!0,type:String},required:{type:Boolean,value:!1}},attached:function(){},detached:function(){}};var ce={"U+0008":"backspace","U+0009":"tab","U+001B":"esc","U+0020":"space","U+007F":"del"},ue={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:"*"},he={shift:"shiftKey",ctrl:"ctrlKey",alt:"altKey",meta:"metaKey"},pe=/[a-z0-9*]/,me=/U\+/,ve=/^arrow/,be=/^space(bar)?/,fe=/^escape$/;function ye(e,t){var i="";if(e){var a=e.toLowerCase();" "===a||be.test(a)?i="space":fe.test(a)?i="esc":1==a.length?t&&!pe.test(a)||(i=a):i=ve.test(a)?a.replace("arrow",""):"multiply"==a?"*":a}return i}function ge(e,t){return e.key?ye(e.key,t):e.detail&&e.detail.key?ye(e.detail.key,t):(i=e.keyIdentifier,a="",i&&(i in ce?a=ce[i]:me.test(i)?(i=parseInt(i.replace("U+","0x"),16),a=String.fromCharCode(i).toLowerCase()):a=i.toLowerCase()),a||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):ue[e]),t}(e.keyCode)||"");var i,a}function _e(e,t){return ge(t,e.hasModifiers)===e.key&&(!e.hasModifiers||!!t.shiftKey==!!e.shiftKey&&!!t.ctrlKey==!!e.ctrlKey&&!!t.altKey==!!e.altKey&&!!t.metaKey==!!e.metaKey)}function ke(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(":"),a=i[0],n=i[1];return a in he?(e[he[a]]=!0,e.hasModifiers=!0):(e.key=a,e.event=n||"keydown"),e}),{combo:e.split(":").shift()})}(e)}))}const xe={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=ke(t),a=0;a<i.length;++a)if(_e(i[a],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){ke(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,a;this._boundKeyHandlers.length;)t=(e=this._boundKeyHandlers.pop())[0],i=e[1],a=e[2],t.removeEventListener(i,a)},_onKeyBindingEvent:function(e,t){if(this.stopKeyboardEventPropagation&&t.stopPropagation(),!t.defaultPrevented)for(var i=0;i<e.length;i++){var a=e[i][0],n=e[i][1];if(_e(a,t)&&(this._triggerKeyHandler(a,n,t),t.defaultPrevented))return}},_triggerKeyHandler:function(e,t,i){var a=Object.create(e);a.keyboardEvent=i;var n=new CustomEvent(e.event,{detail:a,cancelable:!0});this[t].call(this,n),n.defaultPrevented&&i.preventDefault()}},we={properties:{focused:{type:Boolean,value:!1,notify:!0,readOnly:!0,reflectToAttribute:!0},disabled:{type:Boolean,value:!1,notify:!0,observer:"_disabledChanged",reflectToAttribute:!0},_oldTabIndex:{type:String},_boundFocusBlurHandler:{type:Function,value:function(){return this._focusBlurHandler.bind(this)}}},observers:["_changedControlState(focused, disabled)"],ready:function(){this.addEventListener("focus",this._boundFocusBlurHandler,!0),this.addEventListener("blur",this._boundFocusBlurHandler,!0)},_focusBlurHandler:function(e){this._setFocused("focus"===e.type)},_disabledChanged:function(e,t){this.setAttribute("aria-disabled",e?"true":"false"),this.style.pointerEvents=e?"none":"",e?(this._oldTabIndex=this.getAttribute("tabindex"),this._setFocused(!1),this.tabIndex=-1,this.blur()):void 0!==this._oldTabIndex&&(null===this._oldTabIndex?this.removeAttribute("tabindex"):this.setAttribute("tabindex",this._oldTabIndex))},_changedControlState:function(){this._controlStateChanged&&this._controlStateChanged()}},$e={NextLabelID:1,NextAddonID:1,NextInputID:1},Ce={properties:{label:{type:String},value:{notify:!0,type:String},disabled:{type:Boolean,value:!1},invalid:{type:Boolean,value:!1,notify:!0},allowedPattern:{type:String},type:{type:String},list:{type:String},pattern:{type:String},required:{type:Boolean,value:!1},errorMessage:{type:String},charCounter:{type:Boolean,value:!1},noLabelFloat:{type:Boolean,value:!1},alwaysFloatLabel:{type:Boolean,value:!1},autoValidate:{type:Boolean,value:!1},validator:{type:String},autocomplete:{type:String,value:"off"},autofocus:{type:Boolean,observer:"_autofocusChanged"},inputmode:{type:String},minlength:{type:Number},maxlength:{type:Number},min:{type:String},max:{type:String},step:{type:String},name:{type:String},placeholder:{type:String,value:""},readonly:{type:Boolean,value:!1},size:{type:Number},autocapitalize:{type:String,value:"none"},autocorrect:{type:String,value:"off"},autosave:{type:String},results:{type:Number},accept:{type:String},multiple:{type:Boolean},_ariaDescribedBy:{type:String,value:""},_ariaLabelledBy:{type:String,value:""},_inputId:{type:String,value:""}},listeners:{"addon-attached":"_onAddonAttached"},keyBindings:{"shift+tab:keydown":"_onShiftTabDown"},hostAttributes:{tabindex:0},get inputElement(){return this.$||(this.$={}),this.$.input||(this._generateInputId(),this.$.input=this.$$("#"+this._inputId)),this.$.input},get _focusableElement(){return this.inputElement},created:function(){this._typesThatHaveText=["date","datetime","datetime-local","month","time","week","file"]},attached:function(){this._updateAriaLabelledBy(),!_&&this.inputElement&&-1!==this._typesThatHaveText.indexOf(this.inputElement.type)&&(this.alwaysFloatLabel=!0)},_appendStringWithSpace:function(e,t){return e=e?e+" "+t:t},_onAddonAttached:function(e){var t=y(e).rootTarget;if(t.id)this._ariaDescribedBy=this._appendStringWithSpace(this._ariaDescribedBy,t.id);else{var i="paper-input-add-on-"+$e.NextAddonID++;t.id=i,this._ariaDescribedBy=this._appendStringWithSpace(this._ariaDescribedBy,i)}},validate:function(){return this.inputElement.validate()},_focusBlurHandler:function(e){we._focusBlurHandler.call(this,e),this.focused&&!this._shiftTabPressed&&this._focusableElement&&this._focusableElement.focus()},_onShiftTabDown:function(e){var t=this.getAttribute("tabindex");this._shiftTabPressed=!0,this.setAttribute("tabindex","-1"),this.async((function(){this.setAttribute("tabindex",t),this._shiftTabPressed=!1}),1)},_handleAutoValidate:function(){this.autoValidate&&this.validate()},updateValueAndPreserveCaret:function(e){try{var t=this.inputElement.selectionStart;this.value=e,this.inputElement.selectionStart=t,this.inputElement.selectionEnd=t}catch(t){this.value=e}},_computeAlwaysFloatLabel:function(e,t){return t||e},_updateAriaLabelledBy:function(){var e,t=y(this.root).querySelector("label");t?(t.id?e=t.id:(e="paper-input-label-"+$e.NextLabelID++,t.id=e),this._ariaLabelledBy=e):this._ariaLabelledBy=""},_generateInputId:function(){this._inputId&&""!==this._inputId||(this._inputId="input-"+$e.NextInputID++)},_onChange:function(e){this.shadowRoot&&this.fire(e.type,{sourceEvent:e},{node:this,bubbles:e.bubbles,cancelable:e.cancelable})},_autofocusChanged:function(){if(this.autofocus&&this._focusableElement){var e=document.activeElement;e instanceof HTMLElement&&e!==document.body&&e!==document.documentElement||this._focusableElement.focus()}}};b({is:"paper-input",_template:f`
  350. <style>
  351. :host {
  352. display: block;
  353. }
  354. :host([focused]) {
  355. outline: none;
  356. }
  357. :host([hidden]) {
  358. display: none !important;
  359. }
  360. input {
  361. /* Firefox sets a min-width on the input, which can cause layout issues */
  362. min-width: 0;
  363. }
  364. /* In 1.x, the <input> is distributed to paper-input-container, which styles it.
  365. In 2.x the <iron-input> is distributed to paper-input-container, which styles
  366. it, but in order for this to work correctly, we need to reset some
  367. of the native input's properties to inherit (from the iron-input) */
  368. iron-input > input {
  369. @apply --paper-input-container-shared-input-style;
  370. font-family: inherit;
  371. font-weight: inherit;
  372. font-size: inherit;
  373. letter-spacing: inherit;
  374. word-spacing: inherit;
  375. line-height: inherit;
  376. text-shadow: inherit;
  377. color: inherit;
  378. cursor: inherit;
  379. }
  380. input:disabled {
  381. @apply --paper-input-container-input-disabled;
  382. }
  383. input::-webkit-outer-spin-button,
  384. input::-webkit-inner-spin-button {
  385. @apply --paper-input-container-input-webkit-spinner;
  386. }
  387. input::-webkit-clear-button {
  388. @apply --paper-input-container-input-webkit-clear;
  389. }
  390. input::-webkit-calendar-picker-indicator {
  391. @apply --paper-input-container-input-webkit-calendar-picker-indicator;
  392. }
  393. input::-webkit-input-placeholder {
  394. color: var(--paper-input-container-color, var(--secondary-text-color));
  395. }
  396. input:-moz-placeholder {
  397. color: var(--paper-input-container-color, var(--secondary-text-color));
  398. }
  399. input::-moz-placeholder {
  400. color: var(--paper-input-container-color, var(--secondary-text-color));
  401. }
  402. input::-ms-clear {
  403. @apply --paper-input-container-ms-clear;
  404. }
  405. input::-ms-reveal {
  406. @apply --paper-input-container-ms-reveal;
  407. }
  408. input:-ms-input-placeholder {
  409. color: var(--paper-input-container-color, var(--secondary-text-color));
  410. }
  411. label {
  412. pointer-events: none;
  413. }
  414. </style>
  415. <paper-input-container id="container" no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
  416. <slot name="prefix" slot="prefix"></slot>
  417. <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>
  418. <!-- Need to bind maxlength so that the paper-input-char-counter works correctly -->
  419. <iron-input bind-value="{{value}}" slot="input" class="input-element" id$="[[_inputId]]" maxlength$="[[maxlength]]" allowed-pattern="[[allowedPattern]]" invalid="{{invalid}}" validator="[[validator]]">
  420. <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]]">
  421. </iron-input>
  422. <slot name="suffix" slot="suffix"></slot>
  423. <template is="dom-if" if="[[errorMessage]]">
  424. <paper-input-error aria-live="assertive" slot="add-on">[[errorMessage]]</paper-input-error>
  425. </template>
  426. <template is="dom-if" if="[[charCounter]]">
  427. <paper-input-char-counter slot="add-on"></paper-input-char-counter>
  428. </template>
  429. </paper-input-container>
  430. `,behaviors:[[we,xe,Ce],de],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 Ee={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))}};b({_template:f`
  431. <style>
  432. :host {
  433. display: block;
  434. width: 200px;
  435. position: relative;
  436. overflow: hidden;
  437. }
  438. :host([hidden]), [hidden] {
  439. display: none !important;
  440. }
  441. #progressContainer {
  442. @apply --paper-progress-container;
  443. position: relative;
  444. }
  445. #progressContainer,
  446. /* the stripe for the indeterminate animation*/
  447. .indeterminate::after {
  448. height: var(--paper-progress-height, 4px);
  449. }
  450. #primaryProgress,
  451. #secondaryProgress,
  452. .indeterminate::after {
  453. @apply --layout-fit;
  454. }
  455. #progressContainer,
  456. .indeterminate::after {
  457. background: var(--paper-progress-container-color, var(--google-grey-300));
  458. }
  459. :host(.transiting) #primaryProgress,
  460. :host(.transiting) #secondaryProgress {
  461. -webkit-transition-property: -webkit-transform;
  462. transition-property: transform;
  463. /* Duration */
  464. -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
  465. transition-duration: var(--paper-progress-transition-duration, 0.08s);
  466. /* Timing function */
  467. -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
  468. transition-timing-function: var(--paper-progress-transition-timing-function, ease);
  469. /* Delay */
  470. -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
  471. transition-delay: var(--paper-progress-transition-delay, 0s);
  472. }
  473. #primaryProgress,
  474. #secondaryProgress {
  475. @apply --layout-fit;
  476. -webkit-transform-origin: left center;
  477. transform-origin: left center;
  478. -webkit-transform: scaleX(0);
  479. transform: scaleX(0);
  480. will-change: transform;
  481. }
  482. #primaryProgress {
  483. background: var(--paper-progress-active-color, var(--google-green-500));
  484. }
  485. #secondaryProgress {
  486. background: var(--paper-progress-secondary-color, var(--google-green-100));
  487. }
  488. :host([disabled]) #primaryProgress {
  489. background: var(--paper-progress-disabled-active-color, var(--google-grey-500));
  490. }
  491. :host([disabled]) #secondaryProgress {
  492. background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300));
  493. }
  494. :host(:not([disabled])) #primaryProgress.indeterminate {
  495. -webkit-transform-origin: right center;
  496. transform-origin: right center;
  497. -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
  498. animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
  499. }
  500. :host(:not([disabled])) #primaryProgress.indeterminate::after {
  501. content: "";
  502. -webkit-transform-origin: center center;
  503. transform-origin: center center;
  504. -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
  505. animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
  506. }
  507. @-webkit-keyframes indeterminate-bar {
  508. 0% {
  509. -webkit-transform: scaleX(1) translateX(-100%);
  510. }
  511. 50% {
  512. -webkit-transform: scaleX(1) translateX(0%);
  513. }
  514. 75% {
  515. -webkit-transform: scaleX(1) translateX(0%);
  516. -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
  517. }
  518. 100% {
  519. -webkit-transform: scaleX(0) translateX(0%);
  520. }
  521. }
  522. @-webkit-keyframes indeterminate-splitter {
  523. 0% {
  524. -webkit-transform: scaleX(.75) translateX(-125%);
  525. }
  526. 30% {
  527. -webkit-transform: scaleX(.75) translateX(-125%);
  528. -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
  529. }
  530. 90% {
  531. -webkit-transform: scaleX(.75) translateX(125%);
  532. }
  533. 100% {
  534. -webkit-transform: scaleX(.75) translateX(125%);
  535. }
  536. }
  537. @keyframes indeterminate-bar {
  538. 0% {
  539. transform: scaleX(1) translateX(-100%);
  540. }
  541. 50% {
  542. transform: scaleX(1) translateX(0%);
  543. }
  544. 75% {
  545. transform: scaleX(1) translateX(0%);
  546. animation-timing-function: cubic-bezier(.28,.62,.37,.91);
  547. }
  548. 100% {
  549. transform: scaleX(0) translateX(0%);
  550. }
  551. }
  552. @keyframes indeterminate-splitter {
  553. 0% {
  554. transform: scaleX(.75) translateX(-125%);
  555. }
  556. 30% {
  557. transform: scaleX(.75) translateX(-125%);
  558. animation-timing-function: cubic-bezier(.42,0,.6,.8);
  559. }
  560. 90% {
  561. transform: scaleX(.75) translateX(125%);
  562. }
  563. 100% {
  564. transform: scaleX(.75) translateX(125%);
  565. }
  566. }
  567. </style>
  568. <div id="progressContainer">
  569. <div id="secondaryProgress" hidden\$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
  570. <div id="primaryProgress"></div>
  571. </div>
  572. `,is:"paper-progress",behaviors:[Ee],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,a,n){e=this._clampValue(e),t=this._clampValue(t);var r=100*this._calcRatio(e),s=100*this._calcRatio(t);this._setSecondaryRatio(r),this._transformProgress(this.$.secondaryProgress,r),this._transformProgress(this.$.primaryProgress,s),this.secondaryProgress=e,n?this.removeAttribute("aria-valuenow"):this.setAttribute("aria-valuenow",t),this.setAttribute("aria-valuemin",i),this.setAttribute("aria-valuemax",a)},_disabledChanged:function(e){this.setAttribute("aria-disabled",e?"true":"false")},_hideSecondaryProgress:function(e){return 0===e}});const Se={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=y(t).localTarget;this.isLightDescendant(i)||(t.preventDefault(),t.stopImmediatePropagation(),this._setPressed(!0))},_spaceKeyUpHandler:function(e){var t=e.detail.keyboardEvent,i=y(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()}},Ae=[xe,Se];var Be={distance:function(e,t,i,a){var n=e-i,r=t-a;return Math.sqrt(n*n+r*r)},now:window.performance&&window.performance.now?window.performance.now.bind(window.performance):Date.now};function Ve(e){this.element=e,this.width=this.boundingRect.width,this.height=this.boundingRect.height,this.size=Math.max(this.width,this.height)}function Re(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"),y(this.waveContainer).appendChild(this.wave),this.resetInteractionState()}Ve.prototype={get boundingRect(){return this.element.getBoundingClientRect()},furthestCornerDistanceFrom:function(e,t){var i=Be.distance(e,t,0,0),a=Be.distance(e,t,this.width,0),n=Be.distance(e,t,0,this.height),r=Be.distance(e,t,this.width,this.height);return Math.max(i,a,n,r)}},Re.MAX_RADIUS=300,Re.prototype={get recenters(){return this.element.recenters},get center(){return this.element.center},get mouseDownElapsed(){var e;return this.mouseDownStart?(e=Be.now()-this.mouseDownStart,this.mouseUpStart&&(e-=this.mouseUpElapsed),e):0},get mouseUpElapsed(){return this.mouseUpStart?Be.now()-this.mouseUpStart:0},get mouseDownElapsedSeconds(){return this.mouseDownElapsed/1e3},get mouseUpElapsedSeconds(){return this.mouseUpElapsed/1e3},get mouseInteractionSeconds(){return this.mouseDownElapsedSeconds+this.mouseUpElapsedSeconds},get initialOpacity(){return this.element.initialOpacity},get opacityDecayVelocity(){return this.element.opacityDecayVelocity},get radius(){var e=this.containerMetrics.width*this.containerMetrics.width,t=this.containerMetrics.height*this.containerMetrics.height,i=1.1*Math.min(Math.sqrt(e+t),Re.MAX_RADIUS)+5,a=1.1-i/Re.MAX_RADIUS*.2,n=this.mouseInteractionSeconds/a,r=i*(1-Math.pow(80,-n));return Math.abs(r)},get opacity(){return this.mouseUpStart?Math.max(0,this.initialOpacity-this.mouseUpElapsedSeconds*this.opacityDecayVelocity):this.initialOpacity},get outerOpacity(){var e=.3*this.mouseUpElapsedSeconds,t=this.opacity;return Math.max(0,Math.min(e,t))},get isOpacityFullyDecayed(){return this.opacity<.01&&this.radius>=Math.min(this.maxRadius,Re.MAX_RADIUS)},get isRestingAtMaxRadius(){return this.opacity>=this.initialOpacity&&this.radius>=Math.min(this.maxRadius,Re.MAX_RADIUS)},get isAnimationComplete(){return this.mouseUpStart?this.isOpacityFullyDecayed:this.isRestingAtMaxRadius},get translationFraction(){return Math.min(1,this.radius/this.containerMetrics.size*2/Math.sqrt(2))},get xNow(){return this.xEnd?this.xStart+this.translationFraction*(this.xEnd-this.xStart):this.xStart},get yNow(){return this.yEnd?this.yStart+this.translationFraction*(this.yEnd-this.yStart):this.yStart},get isMouseDown(){return this.mouseDownStart&&!this.mouseUpStart},resetInteractionState:function(){this.maxRadius=0,this.mouseDownStart=0,this.mouseUpStart=0,this.xStart=0,this.yStart=0,this.xEnd=0,this.yEnd=0,this.slideDistance=0,this.containerMetrics=new Ve(this.element)},draw:function(){var e,t,i;this.wave.style.opacity=this.opacity,e=this.radius/(this.containerMetrics.size/2),t=this.xNow-this.containerMetrics.width/2,i=this.yNow-this.containerMetrics.height/2,this.waveContainer.style.webkitTransform="translate("+t+"px, "+i+"px)",this.waveContainer.style.transform="translate3d("+t+"px, "+i+"px, 0)",this.wave.style.webkitTransform="scale("+e+","+e+")",this.wave.style.transform="scale3d("+e+","+e+",1)"},downAction:function(e){var t=this.containerMetrics.width/2,i=this.containerMetrics.height/2;this.resetInteractionState(),this.mouseDownStart=Be.now(),this.center?(this.xStart=t,this.yStart=i,this.slideDistance=Be.distance(this.xStart,this.yStart,this.xEnd,this.yEnd)):(this.xStart=e?e.detail.x-this.containerMetrics.boundingRect.left:this.containerMetrics.width/2,this.yStart=e?e.detail.y-this.containerMetrics.boundingRect.top:this.containerMetrics.height/2),this.recenters&&(this.xEnd=t,this.yEnd=i,this.slideDistance=Be.distance(this.xStart,this.yStart,this.xEnd,this.yEnd)),this.maxRadius=this.containerMetrics.furthestCornerDistanceFrom(this.xStart,this.yStart),this.waveContainer.style.top=(this.containerMetrics.height-this.containerMetrics.size)/2+"px",this.waveContainer.style.left=(this.containerMetrics.width-this.containerMetrics.size)/2+"px",this.waveContainer.style.width=this.containerMetrics.size+"px",this.waveContainer.style.height=this.containerMetrics.size+"px"},upAction:function(e){this.isMouseDown&&(this.mouseUpStart=Be.now())},remove:function(){y(y(this.waveContainer).parentNode).removeChild(this.waveContainer)}},b({_template:f`
  573. <style>
  574. :host {
  575. display: block;
  576. position: absolute;
  577. border-radius: inherit;
  578. overflow: hidden;
  579. top: 0;
  580. left: 0;
  581. right: 0;
  582. bottom: 0;
  583. /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
  584. * creating a node (with a position:absolute) in the middle of an event
  585. * handler "interrupts" that event handler (which happens when the
  586. * ripple is created on demand) */
  587. pointer-events: none;
  588. }
  589. :host([animating]) {
  590. /* This resolves a rendering issue in Chrome (as of 40) where the
  591. ripple is not properly clipped by its parent (which may have
  592. rounded corners). See: http://jsbin.com/temexa/4
  593. Note: We only apply this style conditionally. Otherwise, the browser
  594. will create a new compositing layer for every ripple element on the
  595. page, and that would be bad. */
  596. -webkit-transform: translate(0, 0);
  597. transform: translate3d(0, 0, 0);
  598. }
  599. #background,
  600. #waves,
  601. .wave-container,
  602. .wave {
  603. pointer-events: none;
  604. position: absolute;
  605. top: 0;
  606. left: 0;
  607. width: 100%;
  608. height: 100%;
  609. }
  610. #background,
  611. .wave {
  612. opacity: 0;
  613. }
  614. #waves,
  615. .wave {
  616. overflow: hidden;
  617. }
  618. .wave-container,
  619. .wave {
  620. border-radius: 50%;
  621. }
  622. :host(.circle) #background,
  623. :host(.circle) #waves {
  624. border-radius: 50%;
  625. }
  626. :host(.circle) .wave-container {
  627. overflow: hidden;
  628. }
  629. </style>
  630. <div id="background"></div>
  631. <div id="waves"></div>
  632. `,is:"paper-ripple",behaviors:[xe],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==y(this).parentNode.nodeType?this.keyEventTarget=y(this).getOwnerRoot().host:this.keyEventTarget=y(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 Re(this);return y(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 Me={properties:{noink:{type:Boolean,observer:"_noinkChanged"},_rippleContainer:{type:Object}},_buttonStateChanged:function(){this.focused&&this.ensureRipple()},_downHandler:function(e){Se._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&&y(t).appendChild(this._ripple),e){var i=y(this._rippleContainer||this),a=y(e).rootTarget;i.deepContains(a)&&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)}},Le={observers:["_focusedChanged(receivedFocusFromKeyboard)"],_focusedChanged:function(e){e&&this.ensureRipple(),this.hasRipple()&&(this._ripple.holdDown=e)},_createRipple:function(){var e=Me._createRipple();return e.id="ink",e.setAttribute("center",""),e.classList.add("circle"),e}},Te=[Ae,we,Me,Le],Ke=f`
  633. <style>
  634. :host {
  635. @apply --layout;
  636. @apply --layout-justified;
  637. @apply --layout-center;
  638. width: 200px;
  639. cursor: default;
  640. -webkit-user-select: none;
  641. -moz-user-select: none;
  642. -ms-user-select: none;
  643. user-select: none;
  644. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  645. --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
  646. --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
  647. --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
  648. --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
  649. --calculated-paper-slider-height: var(--paper-slider-height, 2px);
  650. }
  651. /* focus shows the ripple */
  652. :host(:focus) {
  653. outline: none;
  654. }
  655. /**
  656. * NOTE(keanulee): Though :host-context is not universally supported, some pages
  657. * still rely on paper-slider being flipped when dir="rtl" is set on body. For full
  658. * compatibility, dir="rtl" must be explicitly set on paper-slider.
  659. */
  660. :dir(rtl) #sliderContainer {
  661. -webkit-transform: scaleX(-1);
  662. transform: scaleX(-1);
  663. }
  664. /**
  665. * NOTE(keanulee): This is separate from the rule above because :host-context may
  666. * not be recognized.
  667. */
  668. :host([dir="rtl"]) #sliderContainer {
  669. -webkit-transform: scaleX(-1);
  670. transform: scaleX(-1);
  671. }
  672. /**
  673. * NOTE(keanulee): Needed to override the :host-context rule (where supported)
  674. * to support LTR sliders in RTL pages.
  675. */
  676. :host([dir="ltr"]) #sliderContainer {
  677. -webkit-transform: scaleX(1);
  678. transform: scaleX(1);
  679. }
  680. #sliderContainer {
  681. position: relative;
  682. width: 100%;
  683. height: calc(30px + var(--calculated-paper-slider-height));
  684. margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
  685. margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
  686. }
  687. #sliderContainer:focus {
  688. outline: 0;
  689. }
  690. #sliderContainer.editable {
  691. margin-top: 12px;
  692. margin-bottom: 12px;
  693. }
  694. .bar-container {
  695. position: absolute;
  696. top: 0;
  697. bottom: 0;
  698. left: 0;
  699. right: 0;
  700. overflow: hidden;
  701. }
  702. .ring > .bar-container {
  703. left: calc(5px + var(--calculated-paper-slider-height)/2);
  704. transition: left 0.18s ease;
  705. }
  706. .ring.expand.dragging > .bar-container {
  707. transition: none;
  708. }
  709. .ring.expand:not(.pin) > .bar-container {
  710. left: calc(8px + var(--calculated-paper-slider-height)/2);
  711. }
  712. #sliderBar {
  713. padding: 15px 0;
  714. width: 100%;
  715. background-color: var(--paper-slider-bar-color, transparent);
  716. --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
  717. --paper-progress-height: var(--calculated-paper-slider-height);
  718. }
  719. .slider-markers {
  720. position: absolute;
  721. /* slider-knob is 30px + the slider-height so that the markers should start at a offset of 15px*/
  722. top: 15px;
  723. height: var(--calculated-paper-slider-height);
  724. left: 0;
  725. right: -1px;
  726. box-sizing: border-box;
  727. pointer-events: none;
  728. @apply --layout-horizontal;
  729. }
  730. .slider-marker {
  731. @apply --layout-flex;
  732. }
  733. .slider-markers::after,
  734. .slider-marker::after {
  735. content: "";
  736. display: block;
  737. margin-left: -1px;
  738. width: 2px;
  739. height: var(--calculated-paper-slider-height);
  740. border-radius: 50%;
  741. background-color: var(--paper-slider-markers-color, #000);
  742. }
  743. .slider-knob {
  744. position: absolute;
  745. left: 0;
  746. top: 0;
  747. margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
  748. width: calc(30px + var(--calculated-paper-slider-height));
  749. height: calc(30px + var(--calculated-paper-slider-height));
  750. }
  751. .transiting > .slider-knob {
  752. transition: left 0.08s ease;
  753. }
  754. .slider-knob:focus {
  755. outline: none;
  756. }
  757. .slider-knob.dragging {
  758. transition: none;
  759. }
  760. .snaps > .slider-knob.dragging {
  761. transition: -webkit-transform 0.08s ease;
  762. transition: transform 0.08s ease;
  763. }
  764. .slider-knob-inner {
  765. margin: 10px;
  766. width: calc(100% - 20px);
  767. height: calc(100% - 20px);
  768. background-color: var(--paper-slider-knob-color, var(--google-blue-700));
  769. border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
  770. border-radius: 50%;
  771. -moz-box-sizing: border-box;
  772. box-sizing: border-box;
  773. transition-property: -webkit-transform, background-color, border;
  774. transition-property: transform, background-color, border;
  775. transition-duration: 0.18s;
  776. transition-timing-function: ease;
  777. }
  778. .expand:not(.pin) > .slider-knob > .slider-knob-inner {
  779. -webkit-transform: scale(1.5);
  780. transform: scale(1.5);
  781. }
  782. .ring > .slider-knob > .slider-knob-inner {
  783. background-color: var(--paper-slider-knob-start-color, transparent);
  784. border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
  785. }
  786. .slider-knob-inner::before {
  787. background-color: var(--paper-slider-pin-color, var(--google-blue-700));
  788. }
  789. .pin > .slider-knob > .slider-knob-inner::before {
  790. content: "";
  791. position: absolute;
  792. top: 0;
  793. left: 50%;
  794. margin-left: -13px;
  795. width: 26px;
  796. height: 26px;
  797. border-radius: 50% 50% 50% 0;
  798. -webkit-transform: rotate(-45deg) scale(0) translate(0);
  799. transform: rotate(-45deg) scale(0) translate(0);
  800. }
  801. .slider-knob-inner::before,
  802. .slider-knob-inner::after {
  803. transition: -webkit-transform .18s ease, background-color .18s ease;
  804. transition: transform .18s ease, background-color .18s ease;
  805. }
  806. .pin.ring > .slider-knob > .slider-knob-inner::before {
  807. background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
  808. }
  809. .pin.expand > .slider-knob > .slider-knob-inner::before {
  810. -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
  811. transform: rotate(-45deg) scale(1) translate(17px, -17px);
  812. }
  813. .pin > .slider-knob > .slider-knob-inner::after {
  814. content: attr(value);
  815. position: absolute;
  816. top: 0;
  817. left: 50%;
  818. margin-left: -16px;
  819. width: 32px;
  820. height: 26px;
  821. text-align: center;
  822. color: var(--paper-slider-font-color, #fff);
  823. font-size: 10px;
  824. -webkit-transform: scale(0) translate(0);
  825. transform: scale(0) translate(0);
  826. }
  827. .pin.expand > .slider-knob > .slider-knob-inner::after {
  828. -webkit-transform: scale(1) translate(0, -17px);
  829. transform: scale(1) translate(0, -17px);
  830. }
  831. /* paper-input */
  832. .slider-input {
  833. width: 50px;
  834. overflow: hidden;
  835. --paper-input-container-input: {
  836. text-align: center;
  837. @apply --paper-slider-input-container-input;
  838. };
  839. @apply --paper-slider-input;
  840. }
  841. /* disabled state */
  842. #sliderContainer.disabled {
  843. pointer-events: none;
  844. }
  845. .disabled > .slider-knob > .slider-knob-inner {
  846. background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
  847. border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
  848. -webkit-transform: scale3d(0.75, 0.75, 1);
  849. transform: scale3d(0.75, 0.75, 1);
  850. }
  851. .disabled.ring > .slider-knob > .slider-knob-inner {
  852. background-color: var(--paper-slider-knob-start-color, transparent);
  853. border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
  854. }
  855. paper-ripple {
  856. color: var(--paper-slider-knob-color, var(--google-blue-700));
  857. }
  858. </style>
  859. <div id="sliderContainer" class\$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
  860. <div class="bar-container">
  861. <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">
  862. </paper-progress>
  863. </div>
  864. <template is="dom-if" if="[[snaps]]">
  865. <div class="slider-markers">
  866. <template is="dom-repeat" items="[[markers]]">
  867. <div class="slider-marker"></div>
  868. </template>
  869. </div>
  870. </template>
  871. <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
  872. <div class="slider-knob-inner" value\$="[[immediateValue]]"></div>
  873. </div>
  874. </div>
  875. <template is="dom-if" if="[[editable]]">
  876. <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>
  877. </paper-input>
  878. </template>
  879. `;Ke.setAttribute("strip-whitespace",""),b({_template:Ke,is:"paper-slider",behaviors:[xe,de,Te,Ee],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,a,n){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 a=this._calcStep(this._calcKnobPosition(this._x/this._w*100));this._setImmediateValue(a);var n=this._calcRatio(this.immediateValue)*this._w-this._knobstartx;this.translate3d(n+"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 a=this.ratio;this._setTransiting(!0),this._positionKnob(i),a===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,a){a||this._setMarkers([]);var n=Math.round((i-t)/this.step);n>e&&(n=e),(n<0||!isFinite(n))&&(n=0),this._setMarkers(new Array(n))},_mergeClasses:function(e){return Object.keys(e).filter((function(t){return e[t]})).join(" ")},_getClassNames:function(){return this._mergeClasses({disabled:this.disabled,pin:this.pin,snaps:this.snaps,ring:this.immediateValue<=this.min,expand:this.expand,dragging:this.dragging,transiting:this.transiting,editable:this.editable})},_allowBarEvent:function(e){return!this.ignoreBarTouch||e.detail.sourceEvent instanceof MouseEvent},get _isRTL(){return void 0===this.__isRTL&&(this.__isRTL="rtl"===window.getComputedStyle(this).direction),this.__isRTL},_leftKey:function(e){this._isRTL?this._incrementKey(e):this._decrementKey(e)},_rightKey:function(e){this._isRTL?this._decrementKey(e):this._incrementKey(e)},_incrementKey:function(e){this.disabled||("end"===e.detail.key?this.value=this.max:this.increment(),this.fire("change"),e.preventDefault())},_decrementKey:function(e){this.disabled||("home"===e.detail.key?this.value=this.min:this.decrement(),this.fire("change"),e.preventDefault())},_changeValue:function(e){this.value=e.target.value,this.fire("change",{composed:!0})},_inputKeyDown:function(e){e.stopPropagation()},_createRipple:function(){return this._rippleContainer=this.$.sliderKnob,Le._createRipple.call(this)},_focusedChanged:function(e){e&&this.ensureRipple(),this.hasRipple()&&(this._ripple.style.display=e?"":"none",this._ripple.holdDown=e)}});const Pe=customElements.get("paper-slider");let De;customElements.define("ha-slider",class extends Pe{static get template(){if(!De){De=Pe.template.cloneNode(!0);De.content.querySelector("style").appendChild(document.createTextNode('\n :host([dir="rtl"]) #sliderContainer.pin.expand > .slider-knob > .slider-knob-inner::after {\n -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;\n transform: scale(1) translate(0, -17px) scaleX(-1) !important;\n }\n\n .pin > .slider-knob > .slider-knob-inner {\n font-size: var(--ha-slider-pin-font-size, 15px);\n line-height: normal;\n cursor: pointer;\n }\n\n .disabled.ring > .slider-knob > .slider-knob-inner {\n background-color: var(--paper-slider-disabled-knob-color, var(--disabled-text-color));\n border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));\n }\n\n .pin > .slider-knob > .slider-knob-inner::before {\n top: unset;\n margin-left: unset;\n\n bottom: calc(15px + var(--calculated-paper-slider-height)/2);\n left: 50%;\n width: 2.2em;\n height: 2.2em;\n\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(-45deg) scale(0) translate(0);\n transform: rotate(-45deg) scale(0) translate(0);\n }\n\n .pin.expand > .slider-knob > .slider-knob-inner::before {\n -webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);\n transform: rotate(-45deg) scale(1) translate(7px, -7px);\n }\n\n .pin > .slider-knob > .slider-knob-inner::after {\n top: unset;\n font-size: unset;\n\n bottom: calc(15px + var(--calculated-paper-slider-height)/2);\n left: 50%;\n margin-left: -1.1em;\n width: 2.2em;\n height: 2.1em;\n\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-transform: scale(0) translate(0);\n transform: scale(0) translate(0);\n }\n\n .pin.expand > .slider-knob > .slider-knob-inner::after {\n -webkit-transform: scale(1) translate(0, -10px);\n transform: scale(1) translate(0, -10px);\n }\n\n .slider-input {\n width: 54px;\n }\n '))}return De}_setImmediateValue(e){super._setImmediateValue(this.step>=1?Math.round(e):Math.round(100*e)/100)}_calcStep(e){if(!this.step)return parseFloat(e);const t=Math.round((e-this.min)/this.step),i=this.step.toString(),a=i.indexOf(".");if(-1!==a){const e=10**(i.length-a-1);return Math.round((t*this.step+this.min)*e)/e}return t*this.step+this.min}}),o([s("ha-form-integer")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[c("ha-textfield ha-slider")],key:"_input",value:void 0},{kind:"field",key:"_lastValue",value:void 0},{kind:"method",key:"focus",value:function(){this._input&&this._input.focus()}},{kind:"method",key:"render",value:function(){var e;return void 0!==this.schema.valueMin&&void 0!==this.schema.valueMax&&this.schema.valueMax-this.schema.valueMin<256?u`
  880. <div>
  881. ${this.label}
  882. <div class="flex">
  883. ${this.schema.required?"":u`
  884. <ha-checkbox
  885. @change=${this._handleCheckboxChange}
  886. .checked=${void 0!==this.data}
  887. .disabled=${this.disabled}
  888. ></ha-checkbox>
  889. `}
  890. <ha-slider
  891. pin
  892. ignore-bar-touch
  893. .value=${this._value}
  894. .min=${this.schema.valueMin}
  895. .max=${this.schema.valueMax}
  896. .disabled=${this.disabled||void 0===this.data&&!this.schema.required}
  897. @change=${this._valueChanged}
  898. ></ha-slider>
  899. </div>
  900. </div>
  901. `:u`
  902. <ha-textfield
  903. type="number"
  904. inputMode="numeric"
  905. .label=${this.label}
  906. .value=${void 0!==this.data?this.data:""}
  907. .disabled=${this.disabled}
  908. .required=${this.schema.required}
  909. .autoValidate=${this.schema.required}
  910. .suffix=${null===(e=this.schema.description)||void 0===e?void 0:e.suffix}
  911. .validationMessage=${this.schema.required?"Required":void 0}
  912. @input=${this._valueChanged}
  913. ></ha-textfield>
  914. `}},{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;h(this,"value-changed",{value:t})}},{kind:"method",key:"_valueChanged",value:function(e){const t=e.target,i=t.value;let a;if(""!==i&&(a=parseInt(String(i))),this.data!==a)h(this,"value-changed",{value:a});else{const e=void 0===a?"":String(a);t.value!==e&&(t.value=e)}}},{kind:"get",static:!0,key:"styles",value:function(){return p`
  915. :host([own-margin]) {
  916. margin-bottom: 5px;
  917. }
  918. .flex {
  919. display: flex;
  920. }
  921. ha-slider {
  922. flex: 1;
  923. }
  924. ha-textfield {
  925. display: block;
  926. }
  927. `}}]}}),l);let Ie=class extends U{};Ie.styles=[z],Ie=r([s("mwc-checkbox")],Ie);class Fe extends W{constructor(){super(...arguments),this.left=!1,this.graphic="control"}render(){const e={"mdc-deprecated-list-item__graphic":this.left,"mdc-deprecated-list-item__meta":!this.left},t=this.renderText(),i=this.graphic&&"control"!==this.graphic&&!this.left?this.renderGraphic():u``,a=this.hasMeta&&this.left?this.renderMeta():u``,n=this.renderRipple();return u`
  928. ${n}
  929. ${i}
  930. ${this.left?"":t}
  931. <span class=${x(e)}>
  932. <mwc-checkbox
  933. reducedTouchTarget
  934. tabindex=${this.tabindex}
  935. .checked=${this.selected}
  936. ?disabled=${this.disabled}
  937. @change=${this.onChange}>
  938. </mwc-checkbox>
  939. </span>
  940. ${this.left?t:""}
  941. ${a}`}async onChange(e){const t=e.target;this.selected===t.checked||(this._skipPropRequest=!0,this.selected=t.checked,await this.updateComplete,this._skipPropRequest=!1)}}r([c("slot")],Fe.prototype,"slotElement",void 0),r([c("mwc-checkbox")],Fe.prototype,"checkboxElement",void 0),r([d({type:Boolean})],Fe.prototype,"left",void 0),r([d({type:String,reflect:!0})],Fe.prototype,"graphic",void 0);const Oe=p`:host(:not([twoline])){height:56px}:host(:not([left])) .mdc-deprecated-list-item__meta{height:40px;width:40px}`;function qe(e){return Array.isArray(e)?e[0]:e}function Ne(e){return Array.isArray(e)?e[1]||e[0]:e}o([s("ha-check-list-item")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",static:!0,key:"styles",value:()=>[G,Oe,p`
  942. :host {
  943. --mdc-theme-secondary: var(--primary-color);
  944. }
  945. `]}]}}),Fe);o([s("ha-form-multi_select")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d()],key:"schema",value:void 0},{kind:"field",decorators:[d()],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[w()],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?u`<div>
  946. ${this.label}${e.map((e=>{const i=qe(e);return u`
  947. <ha-formfield .label=${Ne(e)}>
  948. <ha-checkbox
  949. .checked=${t.includes(i)}
  950. .value=${i}
  951. .disabled=${this.disabled}
  952. @change=${this._valueChanged}
  953. ></ha-checkbox>
  954. </ha-formfield>
  955. `}))}
  956. </div> `:u`
  957. <ha-button-menu
  958. .disabled=${this.disabled}
  959. fixed
  960. corner="BOTTOM_START"
  961. @opened=${this._handleOpen}
  962. @closed=${this._handleClose}
  963. multi
  964. activatable
  965. >
  966. <ha-textfield
  967. slot="trigger"
  968. .label=${this.label}
  969. .value=${t.map((e=>this.schema.options[e]||e)).join(", ")}
  970. .disabled=${this.disabled}
  971. tabindex="-1"
  972. ></ha-textfield>
  973. <ha-svg-icon
  974. slot="trigger"
  975. .path=${this._opened?$:C}
  976. ></ha-svg-icon>
  977. ${e.map((e=>{const i=qe(e),a=t.includes(i);return u`<ha-check-list-item
  978. left
  979. .selected=${a}
  980. .activated=${a}
  981. @request-selected=${this._selectedChanged}
  982. .value=${i}
  983. .disabled=${this.disabled}
  984. >
  985. ${Ne(e)}
  986. </ha-check-list-item>`}))}
  987. </ha-button-menu>
  988. `}},{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))}h(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`
  989. :host([own-margin]) {
  990. margin-bottom: 5px;
  991. }
  992. ha-button-menu {
  993. display: block;
  994. cursor: pointer;
  995. }
  996. ha-formfield {
  997. display: block;
  998. padding-right: 16px;
  999. padding-inline-end: 16px;
  1000. padding-inline-start: initial;
  1001. direction: var(--direction);
  1002. }
  1003. ha-textfield {
  1004. display: block;
  1005. pointer-events: none;
  1006. }
  1007. ha-svg-icon {
  1008. color: var(--input-dropdown-icon-color);
  1009. position: absolute;
  1010. right: 1em;
  1011. top: 1em;
  1012. cursor: pointer;
  1013. inset-inline-end: 1em;
  1014. inset-inline-start: initial;
  1015. direction: var(--direction);
  1016. }
  1017. :host([opened]) ha-svg-icon {
  1018. color: var(--primary-color);
  1019. }
  1020. :host([opened]) ha-button-menu {
  1021. --mdc-text-field-idle-line-color: var(--input-hover-line-color);
  1022. --mdc-text-field-label-ink-color: var(--primary-color);
  1023. }
  1024. `}}]}}),l);const He=(e,t,i=!1)=>{let a;const n=(...n)=>{const r=i&&!a;clearTimeout(a),a=window.setTimeout((()=>{a=void 0,i||e(...n)}),t),r&&e(...n)};return n.cancel=()=>{clearTimeout(a)},n};o([s("ha-select")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[d({type:Boolean})],key:"icon",value:void 0},{kind:"method",key:"renderLeadingIcon",value:function(){return this.icon?u`<span class="mdc-select__icon"
  1025. ><slot name="icon"></slot
  1026. ></span>`:E}},{kind:"method",key:"connectedCallback",value:function(){m(v(i.prototype),"connectedCallback",this).call(this),window.addEventListener("translations-updated",this._translationsUpdated)}},{kind:"method",key:"disconnectedCallback",value:function(){m(v(i.prototype),"disconnectedCallback",this).call(this),window.removeEventListener("translations-updated",this._translationsUpdated)}},{kind:"field",key:"_translationsUpdated",value(){return He((async()=>{await S(),this.layoutOptions()}),500)}},{kind:"field",static:!0,key:"styles",value:()=>[J,p`
  1027. .mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
  1028. color: var(--secondary-text-color);
  1029. }
  1030. .mdc-select__anchor {
  1031. width: var(--ha-select-min-width, 200px);
  1032. }
  1033. .mdc-select--filled .mdc-floating-label {
  1034. inset-inline-start: 12px;
  1035. inset-inline-end: initial;
  1036. direction: var(--direction);
  1037. }
  1038. .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label {
  1039. inset-inline-start: 48px;
  1040. inset-inline-end: initial;
  1041. direction: var(--direction);
  1042. }
  1043. .mdc-select .mdc-select__anchor {
  1044. padding-inline-start: 12px;
  1045. padding-inline-end: 0px;
  1046. direction: var(--direction);
  1047. }
  1048. .mdc-select__anchor .mdc-floating-label--float-above {
  1049. transform-origin: var(--float-start);
  1050. }
  1051. `]}]}}),Y),o([s("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 u`<slot></slot>`}},{kind:"field",static:!0,key:"styles",value:()=>p`
  1052. :host {
  1053. display: block;
  1054. color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
  1055. font-size: 0.75rem;
  1056. padding-left: 16px;
  1057. padding-right: 16px;
  1058. }
  1059. `}]}}),l),o([s("ha-base-time-input")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d()],key:"helper",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"autoValidate",value:()=>!1},{kind:"field",decorators:[d({type:Boolean})],key:"required",value:()=>!1},{kind:"field",decorators:[d({type:Number})],key:"format",value:()=>12},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[d({type:Number})],key:"days",value:()=>0},{kind:"field",decorators:[d({type:Number})],key:"hours",value:()=>0},{kind:"field",decorators:[d({type:Number})],key:"minutes",value:()=>0},{kind:"field",decorators:[d({type:Number})],key:"seconds",value:()=>0},{kind:"field",decorators:[d({type:Number})],key:"milliseconds",value:()=>0},{kind:"field",decorators:[d()],key:"dayLabel",value:()=>""},{kind:"field",decorators:[d()],key:"hourLabel",value:()=>""},{kind:"field",decorators:[d()],key:"minLabel",value:()=>""},{kind:"field",decorators:[d()],key:"secLabel",value:()=>""},{kind:"field",decorators:[d()],key:"millisecLabel",value:()=>""},{kind:"field",decorators:[d({type:Boolean})],key:"enableSecond",value:()=>!1},{kind:"field",decorators:[d({type:Boolean})],key:"enableMillisecond",value:()=>!1},{kind:"field",decorators:[d({type:Boolean})],key:"enableDay",value:()=>!1},{kind:"field",decorators:[d({type:Boolean})],key:"noHoursLimit",value:()=>!1},{kind:"field",decorators:[d()],key:"amPm",value:()=>"AM"},{kind:"method",key:"render",value:function(){return u`
  1060. ${this.label?u`<label>${this.label}${this.required?" *":""}</label>`:""}
  1061. <div class="time-input-wrap">
  1062. ${this.enableDay?u`
  1063. <ha-textfield
  1064. id="day"
  1065. type="number"
  1066. inputmode="numeric"
  1067. .value=${this.days.toFixed()}
  1068. .label=${this.dayLabel}
  1069. name="days"
  1070. @input=${this._valueChanged}
  1071. @focusin=${this._onFocus}
  1072. no-spinner
  1073. .required=${this.required}
  1074. .autoValidate=${this.autoValidate}
  1075. min="0"
  1076. .disabled=${this.disabled}
  1077. suffix=":"
  1078. class="hasSuffix"
  1079. >
  1080. </ha-textfield>
  1081. `:""}
  1082. <ha-textfield
  1083. id="hour"
  1084. type="number"
  1085. inputmode="numeric"
  1086. .value=${this.hours.toFixed()}
  1087. .label=${this.hourLabel}
  1088. name="hours"
  1089. @input=${this._valueChanged}
  1090. @focusin=${this._onFocus}
  1091. no-spinner
  1092. .required=${this.required}
  1093. .autoValidate=${this.autoValidate}
  1094. maxlength="2"
  1095. max=${A(this._hourMax)}
  1096. min="0"
  1097. .disabled=${this.disabled}
  1098. suffix=":"
  1099. class="hasSuffix"
  1100. >
  1101. </ha-textfield>
  1102. <ha-textfield
  1103. id="min"
  1104. type="number"
  1105. inputmode="numeric"
  1106. .value=${this._formatValue(this.minutes)}
  1107. .label=${this.minLabel}
  1108. @input=${this._valueChanged}
  1109. @focusin=${this._onFocus}
  1110. name="minutes"
  1111. no-spinner
  1112. .required=${this.required}
  1113. .autoValidate=${this.autoValidate}
  1114. maxlength="2"
  1115. max="59"
  1116. min="0"
  1117. .disabled=${this.disabled}
  1118. .suffix=${this.enableSecond?":":""}
  1119. class=${this.enableSecond?"has-suffix":""}
  1120. >
  1121. </ha-textfield>
  1122. ${this.enableSecond?u`<ha-textfield
  1123. id="sec"
  1124. type="number"
  1125. inputmode="numeric"
  1126. .value=${this._formatValue(this.seconds)}
  1127. .label=${this.secLabel}
  1128. @input=${this._valueChanged}
  1129. @focusin=${this._onFocus}
  1130. name="seconds"
  1131. no-spinner
  1132. .required=${this.required}
  1133. .autoValidate=${this.autoValidate}
  1134. maxlength="2"
  1135. max="59"
  1136. min="0"
  1137. .disabled=${this.disabled}
  1138. .suffix=${this.enableMillisecond?":":""}
  1139. class=${this.enableMillisecond?"has-suffix":""}
  1140. >
  1141. </ha-textfield>`:""}
  1142. ${this.enableMillisecond?u`<ha-textfield
  1143. id="millisec"
  1144. type="number"
  1145. .value=${this._formatValue(this.milliseconds,3)}
  1146. .label=${this.millisecLabel}
  1147. @input=${this._valueChanged}
  1148. @focusin=${this._onFocus}
  1149. name="milliseconds"
  1150. no-spinner
  1151. .required=${this.required}
  1152. .autoValidate=${this.autoValidate}
  1153. maxlength="3"
  1154. max="999"
  1155. min="0"
  1156. .disabled=${this.disabled}
  1157. >
  1158. </ha-textfield>`:""}
  1159. ${24===this.format?"":u`<ha-select
  1160. .required=${this.required}
  1161. .value=${this.amPm}
  1162. .disabled=${this.disabled}
  1163. name="amPm"
  1164. naturalMenuWidth
  1165. fixedMenuPosition
  1166. @selected=${this._valueChanged}
  1167. @closed=${Q}
  1168. >
  1169. <mwc-list-item value="AM">AM</mwc-list-item>
  1170. <mwc-list-item value="PM">PM</mwc-list-item>
  1171. </ha-select>`}
  1172. </div>
  1173. ${this.helper?u`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`:""}
  1174. `}},{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),h(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`
  1175. :host {
  1176. display: block;
  1177. }
  1178. .time-input-wrap {
  1179. display: flex;
  1180. border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
  1181. overflow: hidden;
  1182. position: relative;
  1183. direction: ltr;
  1184. }
  1185. ha-textfield {
  1186. width: 40px;
  1187. text-align: center;
  1188. --mdc-shape-small: 0;
  1189. --text-field-appearance: none;
  1190. --text-field-padding: 0 4px;
  1191. --text-field-suffix-padding-left: 2px;
  1192. --text-field-suffix-padding-right: 0;
  1193. --text-field-text-align: center;
  1194. }
  1195. ha-textfield.hasSuffix {
  1196. --text-field-padding: 0 0 0 4px;
  1197. }
  1198. ha-textfield:first-child {
  1199. --text-field-border-top-left-radius: var(--mdc-shape-medium);
  1200. }
  1201. ha-textfield:last-child {
  1202. --text-field-border-top-right-radius: var(--mdc-shape-medium);
  1203. }
  1204. ha-select {
  1205. --mdc-shape-small: 0;
  1206. width: 85px;
  1207. }
  1208. label {
  1209. -moz-osx-font-smoothing: grayscale;
  1210. -webkit-font-smoothing: antialiased;
  1211. font-family: var(
  1212. --mdc-typography-body2-font-family,
  1213. var(--mdc-typography-font-family, Roboto, sans-serif)
  1214. );
  1215. font-size: var(--mdc-typography-body2-font-size, 0.875rem);
  1216. line-height: var(--mdc-typography-body2-line-height, 1.25rem);
  1217. font-weight: var(--mdc-typography-body2-font-weight, 400);
  1218. letter-spacing: var(
  1219. --mdc-typography-body2-letter-spacing,
  1220. 0.0178571429em
  1221. );
  1222. text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
  1223. text-transform: var(--mdc-typography-body2-text-transform, inherit);
  1224. color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
  1225. padding-left: 4px;
  1226. }
  1227. `}]}}),l),o([s("ha-duration-input")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d()],key:"helper",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"required",value:()=>!1},{kind:"field",decorators:[d({type:Boolean})],key:"enableMillisecond",value:()=>!1},{kind:"field",decorators:[d({type:Boolean})],key:"enableDay",value:()=>!1},{kind:"field",decorators:[d({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 u`
  1228. <ha-base-time-input
  1229. .label=${this.label}
  1230. .helper=${this.helper}
  1231. .required=${this.required}
  1232. .autoValidate=${this.required}
  1233. .disabled=${this.disabled}
  1234. errorMessage="Required"
  1235. enableSecond
  1236. .enableMillisecond=${this.enableMillisecond}
  1237. .enableDay=${this.enableDay}
  1238. format="24"
  1239. .days=${this._days}
  1240. .hours=${this._hours}
  1241. .minutes=${this._minutes}
  1242. .seconds=${this._seconds}
  1243. .milliseconds=${this._milliseconds}
  1244. @value-changed=${this._durationChanged}
  1245. noHoursLimit
  1246. dayLabel="dd"
  1247. hourLabel="hh"
  1248. minLabel="mm"
  1249. secLabel="ss"
  1250. millisecLabel="ms"
  1251. ></ha-base-time-input>
  1252. `}},{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);h(this,"value-changed",{value:t})}}]}}),l),o([s("ha-form-positive_time_period_dict")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d({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 u`
  1253. <ha-duration-input
  1254. .label=${this.label}
  1255. ?required=${this.schema.required}
  1256. .data=${this.data}
  1257. .disabled=${this.disabled}
  1258. ></ha-duration-input>
  1259. `}}]}}),l),o([s("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 u`
  1260. <div class="mdc-chip-set">
  1261. <slot></slot>
  1262. </div>
  1263. `}},{kind:"get",static:!0,key:"styles",value:function(){return p`
  1264. ${B(X)}
  1265. slot::slotted(ha-chip) {
  1266. margin: 4px 4px 4px 0;
  1267. }
  1268. `}}]}}),l);const ze=Symbol("selection controller");class Ue{constructor(){this.selected=null,this.ordered=null,this.set=new Set}}class Xe{constructor(e){this.sets={},this.focusedSet=null,this.mouseIsDown=!1,this.updating=!1,e.addEventListener("keydown",(e=>{this.keyDownHandler(e)})),e.addEventListener("mousedown",(()=>{this.mousedownHandler()})),e.addEventListener("mouseup",(()=>{this.mouseupHandler()}))}static getController(e){const t=!("global"in e)||"global"in e&&e.global?document:e.getRootNode();let i=t[ze];return void 0===i&&(i=new Xe(t),t[ze]=i),i}keyDownHandler(e){const t=e.target;"checked"in t&&this.has(t)&&("ArrowRight"==e.key||"ArrowDown"==e.key?this.selectNext(t):"ArrowLeft"!=e.key&&"ArrowUp"!=e.key||this.selectPrevious(t))}mousedownHandler(){this.mouseIsDown=!0}mouseupHandler(){this.mouseIsDown=!1}has(e){return this.getSet(e.name).set.has(e)}selectPrevious(e){const t=this.getOrdered(e),i=t.indexOf(e),a=t[i-1]||t[t.length-1];return this.select(a),a}selectNext(e){const t=this.getOrdered(e),i=t.indexOf(e),a=t[i+1]||t[0];return this.select(a),a}select(e){e.click()}focus(e){if(this.mouseIsDown)return;const t=this.getSet(e.name),i=this.focusedSet;this.focusedSet=t,i!=t&&t.selected&&t.selected!=e&&t.selected.focus()}isAnySelected(e){const t=this.getSet(e.name);for(const e of t.set)if(e.checked)return!0;return!1}getOrdered(e){const t=this.getSet(e.name);return t.ordered||(t.ordered=Array.from(t.set),t.ordered.sort(((e,t)=>e.compareDocumentPosition(t)==Node.DOCUMENT_POSITION_PRECEDING?1:0))),t.ordered}getSet(e){return this.sets[e]||(this.sets[e]=new Ue),this.sets[e]}register(e){const t=e.name||e.getAttribute("name")||"",i=this.getSet(t);i.set.add(e),i.ordered=null}unregister(e){const t=this.getSet(e.name);t.set.delete(e),t.ordered=null,t.selected==e&&(t.selected=null)}update(e){if(this.updating)return;this.updating=!0;const t=this.getSet(e.name);if(e.checked){for(const i of t.set)i!=e&&(i.checked=!1);t.selected=e}if(this.isAnySelected(e))for(const e of t.set){if(void 0===e.formElementTabIndex)break;e.formElementTabIndex=e.checked?0:-1}this.updating=!1}}var je={NATIVE_CONTROL_SELECTOR:".mdc-radio__native-control"},We={DISABLED:"mdc-radio--disabled",ROOT:"mdc-radio"},Ge=function(e){function t(i){return e.call(this,R(R({},t.defaultAdapter),i))||this}return V(t,e),Object.defineProperty(t,"cssClasses",{get:function(){return We},enumerable:!1,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return je},enumerable:!1,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{addClass:function(){},removeClass:function(){},setNativeControlDisabled:function(){}}},enumerable:!1,configurable:!0}),t.prototype.setDisabled=function(e){var i=t.cssClasses.DISABLED;this.adapter.setNativeControlDisabled(e),e?this.adapter.addClass(i):this.adapter.removeClass(i)},t}(M);class Ye extends j{constructor(){super(...arguments),this._checked=!1,this.useStateLayerCustomProperties=!1,this.global=!1,this.disabled=!1,this.value="on",this.name="",this.reducedTouchTarget=!1,this.mdcFoundationClass=Ge,this.formElementTabIndex=0,this.focused=!1,this.shouldRenderRipple=!1,this.rippleElement=null,this.rippleHandlers=new P((()=>(this.shouldRenderRipple=!0,this.ripple.then((e=>{this.rippleElement=e})),this.ripple)))}get checked(){return this._checked}set checked(e){var t,i;const a=this._checked;e!==a&&(this._checked=e,this.formElement&&(this.formElement.checked=e),null===(t=this._selectionController)||void 0===t||t.update(this),!1===e&&(null===(i=this.formElement)||void 0===i||i.blur()),this.requestUpdate("checked",a),this.dispatchEvent(new Event("checked",{bubbles:!0,composed:!0})))}_handleUpdatedValue(e){this.formElement.value=e}renderRipple(){return this.shouldRenderRipple?u`<mwc-ripple unbounded accent
  1269. .internalUseStateLayerCustomProperties="${this.useStateLayerCustomProperties}"
  1270. .disabled="${this.disabled}"></mwc-ripple>`:""}get isRippleActive(){var e;return(null===(e=this.rippleElement)||void 0===e?void 0:e.isActive)||!1}connectedCallback(){super.connectedCallback(),this._selectionController=Xe.getController(this),this._selectionController.register(this),this._selectionController.update(this)}disconnectedCallback(){this._selectionController.unregister(this),this._selectionController=void 0}focus(){this.formElement.focus()}createAdapter(){return Object.assign(Object.assign({},D(this.mdcRoot)),{setNativeControlDisabled:e=>{this.formElement.disabled=e}})}handleFocus(){this.focused=!0,this.handleRippleFocus()}handleClick(){this.formElement.focus()}handleBlur(){this.focused=!1,this.formElement.blur(),this.rippleHandlers.endFocus()}setFormData(e){this.name&&this.checked&&e.append(this.name,this.value)}render(){const e={"mdc-radio--touch":!this.reducedTouchTarget,"mdc-ripple-upgraded--background-focused":this.focused,"mdc-radio--disabled":this.disabled};return u`
  1271. <div class="mdc-radio ${x(e)}">
  1272. <input
  1273. tabindex="${this.formElementTabIndex}"
  1274. class="mdc-radio__native-control"
  1275. type="radio"
  1276. name="${this.name}"
  1277. aria-label="${A(this.ariaLabel)}"
  1278. aria-labelledby="${A(this.ariaLabelledBy)}"
  1279. .checked="${this.checked}"
  1280. .value="${this.value}"
  1281. ?disabled="${this.disabled}"
  1282. @change="${this.changeHandler}"
  1283. @focus="${this.handleFocus}"
  1284. @click="${this.handleClick}"
  1285. @blur="${this.handleBlur}"
  1286. @mousedown="${this.handleRippleMouseDown}"
  1287. @mouseenter="${this.handleRippleMouseEnter}"
  1288. @mouseleave="${this.handleRippleMouseLeave}"
  1289. @touchstart="${this.handleRippleTouchStart}"
  1290. @touchend="${this.handleRippleDeactivate}"
  1291. @touchcancel="${this.handleRippleDeactivate}">
  1292. <div class="mdc-radio__background">
  1293. <div class="mdc-radio__outer-circle"></div>
  1294. <div class="mdc-radio__inner-circle"></div>
  1295. </div>
  1296. ${this.renderRipple()}
  1297. </div>`}handleRippleMouseDown(e){const t=()=>{window.removeEventListener("mouseup",t),this.handleRippleDeactivate()};window.addEventListener("mouseup",t),this.rippleHandlers.startPress(e)}handleRippleTouchStart(e){this.rippleHandlers.startPress(e)}handleRippleDeactivate(){this.rippleHandlers.endPress()}handleRippleMouseEnter(){this.rippleHandlers.startHover()}handleRippleMouseLeave(){this.rippleHandlers.endHover()}handleRippleFocus(){this.rippleHandlers.startFocus()}changeHandler(){this.checked=this.formElement.checked}}r([c(".mdc-radio")],Ye.prototype,"mdcRoot",void 0),r([c("input")],Ye.prototype,"formElement",void 0),r([w()],Ye.prototype,"useStateLayerCustomProperties",void 0),r([d({type:Boolean})],Ye.prototype,"global",void 0),r([d({type:Boolean,reflect:!0})],Ye.prototype,"checked",null),r([d({type:Boolean}),Z((function(e){this.mdcFoundation.setDisabled(e)}))],Ye.prototype,"disabled",void 0),r([d({type:String}),Z((function(e){this._handleUpdatedValue(e)}))],Ye.prototype,"value",void 0),r([d({type:String})],Ye.prototype,"name",void 0),r([d({type:Boolean})],Ye.prototype,"reducedTouchTarget",void 0),r([d({type:Number})],Ye.prototype,"formElementTabIndex",void 0),r([w()],Ye.prototype,"focused",void 0),r([w()],Ye.prototype,"shouldRenderRipple",void 0),r([L("mwc-ripple")],Ye.prototype,"ripple",void 0),r([T,d({attribute:"aria-label"})],Ye.prototype,"ariaLabel",void 0),r([T,d({attribute:"aria-labelledby"})],Ye.prototype,"ariaLabelledBy",void 0),r([K({passive:!0})],Ye.prototype,"handleRippleTouchStart",null);const Je=p`.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:calc((40px - 20px) / 2)}.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0, 0, 0, 0.54)}.mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:#018786;border-color:var(--mdc-theme-secondary, #018786)}.mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle{border-color:#018786;border-color:var(--mdc-theme-secondary, #018786)}.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0, 0, 0, 0.38)}.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0, 0, 0, 0.38)}.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{border-color:rgba(0, 0, 0, 0.38)}.mdc-radio .mdc-radio__background::before{background-color:#018786;background-color:var(--mdc-theme-secondary, #018786)}.mdc-radio .mdc-radio__background::before{top:calc(-1 * (40px - 20px) / 2);left:calc(-1 * (40px - 20px) / 2);width:40px;height:40px}.mdc-radio .mdc-radio__native-control{top:calc((40px - 40px) / 2);right:calc((40px - 40px) / 2);left:calc((40px - 40px) / 2);width:40px;height:40px}@media screen and (forced-colors: active),(-ms-high-contrast: active){.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:GrayText}.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:GrayText}.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{border-color:GrayText}}.mdc-radio{display:inline-block;position:relative;flex:0 0 auto;box-sizing:content-box;width:20px;height:20px;cursor:pointer;will-change:opacity,transform,border-color,color}.mdc-radio__background{display:inline-block;position:relative;box-sizing:border-box;width:20px;height:20px}.mdc-radio__background::before{position:absolute;transform:scale(0, 0);border-radius:50%;opacity:0;pointer-events:none;content:"";transition:opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1),transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1)}.mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1)}.mdc-radio__inner-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;transform:scale(0, 0);border-width:10px;border-style:solid;border-radius:50%;transition:transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1),border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1)}.mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.mdc-radio--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-radio--touch .mdc-radio__native-control{top:calc((40px - 48px) / 2);right:calc((40px - 48px) / 2);left:calc((40px - 48px) / 2);width:48px;height:48px}.mdc-radio__native-control:checked+.mdc-radio__background,.mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{transition:border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{transition:transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-radio--disabled{cursor:default;pointer-events:none}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(0.5);transition:transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-radio__native-control:disabled+.mdc-radio__background,[aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background{cursor:default}.mdc-radio__native-control:focus+.mdc-radio__background::before{transform:scale(1);opacity:.12;transition:opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1)}:host{display:inline-block;outline:none}.mdc-radio{vertical-align:bottom}.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-unchecked-color, rgba(0, 0, 0, 0.54))}.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-disabled-color, rgba(0, 0, 0, 0.38))}.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-disabled-color, rgba(0, 0, 0, 0.38))}.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--mdc-radio-disabled-color, rgba(0, 0, 0, 0.38))}`;o([s("ha-radio")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",static:!0,key:"styles",value:()=>[Je,p`
  1298. :host {
  1299. --mdc-theme-secondary: var(--primary-color);
  1300. }
  1301. `]}]}}),Ye),o([s("ha-selector-select")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"selector",value:void 0},{kind:"field",decorators:[d()],key:"value",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d()],key:"helper",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[d({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(){const e=this.selector.select.options.map((e=>"object"==typeof e?e:{value:e,label:e}));if(!this.selector.select.custom_value&&"list"===this._mode)return!this.selector.select.multiple||this.required?u`
  1302. <div>
  1303. ${this.label}
  1304. ${e.map((e=>u`
  1305. <ha-formfield .label=${e.label}>
  1306. <ha-radio
  1307. .checked=${e.value===this.value}
  1308. .value=${e.value}
  1309. .disabled=${this.disabled}
  1310. @change=${this._valueChanged}
  1311. ></ha-radio>
  1312. </ha-formfield>
  1313. `))}
  1314. </div>
  1315. ${this._renderHelper()}
  1316. `:u`
  1317. <div>
  1318. ${this.label}${e.map((e=>{var t;return u`
  1319. <ha-formfield .label=${e.label}>
  1320. <ha-checkbox
  1321. .checked=${null===(t=this.value)||void 0===t?void 0:t.includes(e.value)}
  1322. .value=${e.value}
  1323. .disabled=${this.disabled}
  1324. @change=${this._checkboxChanged}
  1325. ></ha-checkbox>
  1326. </ha-formfield>
  1327. `}))}
  1328. </div>
  1329. ${this._renderHelper()}
  1330. `;if(this.selector.select.multiple){const t=this.value&&""!==this.value?this.value:[];return u`
  1331. <ha-chip-set>
  1332. ${null==t?void 0:t.map(((t,i)=>{var a;return u`
  1333. <ha-chip hasTrailingIcon>
  1334. ${(null===(a=e.find((e=>e.value===t)))||void 0===a?void 0:a.label)||t}
  1335. <ha-svg-icon
  1336. slot="trailing-icon"
  1337. .path=${I}
  1338. .idx=${i}
  1339. @click=${this._removeItem}
  1340. ></ha-svg-icon>
  1341. </ha-chip>
  1342. `}))}
  1343. </ha-chip-set>
  1344. <ha-combo-box
  1345. item-value-path="value"
  1346. item-label-path="label"
  1347. .hass=${this.hass}
  1348. .label=${this.label}
  1349. .helper=${this.helper}
  1350. .disabled=${this.disabled}
  1351. .required=${this.required&&!t.length}
  1352. .value=${this._filter}
  1353. .items=${e.filter((e=>{var t;return!(null!==(t=this.value)&&void 0!==t&&t.includes(e.value))}))}
  1354. @filter-changed=${this._filterChanged}
  1355. @value-changed=${this._comboBoxValueChanged}
  1356. ></ha-combo-box>
  1357. `}return this.selector.select.custom_value?(void 0===this.value||e.find((e=>e.value===this.value))||e.unshift({value:this.value,label:this.value}),u`
  1358. <ha-combo-box
  1359. item-value-path="value"
  1360. item-label-path="label"
  1361. .hass=${this.hass}
  1362. .label=${this.label}
  1363. .helper=${this.helper}
  1364. .disabled=${this.disabled}
  1365. .required=${this.required}
  1366. .items=${e}
  1367. .value=${this.value}
  1368. @filter-changed=${this._filterChanged}
  1369. @value-changed=${this._comboBoxValueChanged}
  1370. ></ha-combo-box>
  1371. `):u`
  1372. <ha-select
  1373. fixedMenuPosition
  1374. naturalMenuWidth
  1375. .label=${this.label}
  1376. .value=${this.value}
  1377. .helper=${this.helper}
  1378. .disabled=${this.disabled}
  1379. @closed=${Q}
  1380. @selected=${this._valueChanged}
  1381. >
  1382. ${e.map((e=>u`
  1383. <mwc-list-item .value=${e.value}>${e.label}</mwc-list-item>
  1384. `))}
  1385. </ha-select>
  1386. `}},{kind:"method",key:"_renderHelper",value:function(){return this.helper?u`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`:""}},{kind:"get",key:"_mode",value:function(){return this.selector.select.mode||(this.selector.select.options.length<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&&h(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 a;if(null===(a=this.value)||void 0===a||!a.includes(i))return;t=this.value.filter((e=>e!==i))}h(this,"value-changed",{value:t})}},{kind:"method",key:"_removeItem",value:async function(e){const t=[...this.value];t.splice(e.target.idx,1),h(this,"value-changed",{value:t}),await this.updateComplete,this._filterChanged()}},{kind:"method",key:"_comboBoxValueChanged",value:function(e){var t;e.stopPropagation();const i=e.detail.value;if(this.disabled||""===i)return;if(!this.selector.select.multiple)return void h(this,"value-changed",{value:i});if(void 0!==i&&null!==(t=this.value)&&void 0!==t&&t.includes(i))return;setTimeout((()=>{this._filterChanged(),this.comboBox.setInputValue("")}),0);const a=this.value&&""!==this.value?this.value:[];h(this,"value-changed",{value:[...a,i]})}},{kind:"method",key:"_filterChanged",value:function(e){var t;this._filter=(null==e?void 0:e.detail.value)||"";const i=null===(t=this.comboBox.items)||void 0===t?void 0:t.filter((e=>{var t,i;if(this.selector.select.multiple&&null!==(t=this.value)&&void 0!==t&&t.includes(e.value))return!1;return(e.label||e.value).toLowerCase().includes(null===(i=this._filter)||void 0===i?void 0:i.toLowerCase())}));this._filter&&this.selector.select.custom_value&&(null==i||i.unshift({label:this._filter,value:this._filter})),this.comboBox.filteredItems=i}},{kind:"field",static:!0,key:"styles",value:()=>p`
  1387. ha-select,
  1388. mwc-formfield,
  1389. ha-formfield {
  1390. display: block;
  1391. }
  1392. `}]}}),l),o([s("ha-form-select")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d()],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",key:"_selectSchema",value:()=>F((e=>({select:{options:e.map((e=>({value:e[0],label:e[1]})))}})))},{kind:"method",key:"render",value:function(){return u`
  1393. <ha-selector-select
  1394. .hass=${this.hass}
  1395. .schema=${this.schema}
  1396. .value=${this.data}
  1397. .label=${this.label}
  1398. .disabled=${this.disabled}
  1399. .required=${this.schema.required}
  1400. .selector=${this._selectSchema(this.schema.options)}
  1401. @value-changed=${this._valueChanged}
  1402. ></ha-selector-select>
  1403. `}},{kind:"method",key:"_valueChanged",value:function(e){e.stopPropagation();let t=e.detail.value;t!==this.data&&(""===t&&(t=void 0),h(this,"value-changed",{value:t}))}}]}}),l);const Qe=["password","secret","token"];o([s("ha-form-string")],(function(e,t){return{F:class extends t{constructor(...t){super(...t),e(this)}},d:[{kind:"field",decorators:[d()],key:"schema",value:void 0},{kind:"field",decorators:[d()],key:"data",value:void 0},{kind:"field",decorators:[d()],key:"label",value:void 0},{kind:"field",decorators:[d()],key:"helper",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[w()],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=Qe.some((e=>this.schema.name.includes(e)));return u`
  1404. <ha-textfield
  1405. .type=${t?this._unmaskedPassword?"text":"password":this._stringType}
  1406. .label=${this.label}
  1407. .value=${this.data||""}
  1408. .helper=${this.helper}
  1409. helperPersistent
  1410. .disabled=${this.disabled}
  1411. .required=${this.schema.required}
  1412. .autoValidate=${this.schema.required}
  1413. .suffix=${t?u`<div style="width: 24px"></div>`:null===(e=this.schema.description)||void 0===e?void 0:e.suffix}
  1414. .validationMessage=${this.schema.required?"Required":void 0}
  1415. @input=${this._valueChanged}
  1416. ></ha-textfield>
  1417. ${t?u`<ha-icon-button
  1418. toggles
  1419. .label=${(this._unmaskedPassword?"Hide":"Show")+" password"}
  1420. @click=${this._toggleUnmaskedPassword}
  1421. .path=${this._unmaskedPassword?O:q}
  1422. ></ha-icon-button>`:""}
  1423. `}},{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),h(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`
  1424. :host {
  1425. display: block;
  1426. position: relative;
  1427. }
  1428. :host([own-margin]) {
  1429. margin-bottom: 5px;
  1430. }
  1431. ha-textfield {
  1432. display: block;
  1433. }
  1434. ha-icon-button {
  1435. position: absolute;
  1436. top: 1em;
  1437. right: 12px;
  1438. --mdc-icon-button-size: 24px;
  1439. color: var(--secondary-text-color);
  1440. }
  1441. ha-icon-button {
  1442. inset-inline-start: initial;
  1443. inset-inline-end: 12px;
  1444. direction: var(--direction);
  1445. }
  1446. `}}]}}),l);const Ze=(e,t)=>e?t.name?e[t.name]:e:null;let et=!1;o([s("ha-form")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"data",value:void 0},{kind:"field",decorators:[d({attribute:!1})],key:"schema",value:void 0},{kind:"field",decorators:[d()],key:"error",value:void 0},{kind:"field",decorators:[d({type:Boolean})],key:"disabled",value:()=>!1},{kind:"field",decorators:[d()],key:"computeError",value:void 0},{kind:"field",decorators:[d()],key:"computeLabel",value:void 0},{kind:"field",decorators:[d()],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:"willUpdate",value:function(e){var t;m(v(i.prototype),"willUpdate",this).call(this,e),!et&&e.has("schema")&&null!==(t=this.schema)&&void 0!==t&&t.some((e=>"selector"in e))&&(et=!0,import("./c.d2e52e5a.js").then((function(e){return e.j})))}},{kind:"method",key:"render",value:function(){return u`
  1447. <div class="root" part="root">
  1448. ${this.error&&this.error.base?u`
  1449. <ha-alert alert-type="error">
  1450. ${this._computeError(this.error.base,this.schema)}
  1451. </ha-alert>
  1452. `:""}
  1453. ${this.schema.map((e=>{const t=((e,t)=>e&&t.name?e[t.name]:null)(this.error,e);return u`
  1454. ${t?u`
  1455. <ha-alert own-margin alert-type="error">
  1456. ${this._computeError(t,e)}
  1457. </ha-alert>
  1458. `:""}
  1459. ${"selector"in e?u`<ha-selector
  1460. .schema=${e}
  1461. .hass=${this.hass}
  1462. .selector=${e.selector}
  1463. .value=${Ze(this.data,e)}
  1464. .label=${this._computeLabel(e,this.data)}
  1465. .disabled=${this.disabled}
  1466. .helper=${this._computeHelper(e)}
  1467. .required=${e.required||!1}
  1468. .context=${this._generateContext(e)}
  1469. ></ha-selector>`:ee(`ha-form-${e.type}`,{schema:e,data:Ze(this.data,e),label:this._computeLabel(e,this.data),disabled:this.disabled,hass:this.hass,computeLabel:this.computeLabel,computeHelper:this.computeHelper,context:this._generateContext(e)})}
  1470. `}))}
  1471. </div>
  1472. `}},{kind:"method",key:"_generateContext",value:function(e){if(!e.context)return;const t={};for(const[i,a]of Object.entries(e.context))t[i]=this.data[a];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;h(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`
  1473. .root {
  1474. margin-bottom: -24px;
  1475. overflow: clip visible;
  1476. }
  1477. .root > * {
  1478. display: block;
  1479. }
  1480. .root > *:not([own-margin]) {
  1481. margin-bottom: 24px;
  1482. }
  1483. ha-alert[own-margin] {
  1484. margin-bottom: 4px;
  1485. }
  1486. `}}]}}),l);export{ee as a,He as d};