UNPKG

iobroker.lovelace

Version:

With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI

github.com/ioBroker/ioBroker.lovelace

ioBroker/ioBroker.lovelace

23 lines • 24.1 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*! For license information please see 82134.50f2c74ff0eb53d7.js.LICENSE.txt */ export const __rspack_esm_id=82134;export const __rspack_esm_ids=[82134];export const __webpack_modules__={60201(e,t,o){var i=o(5124),r=o(22441),s=o(717),a=i.AH`:host{--color:var(--wa-color-neutral-fill-normal);--sheen-color:color-mix(in oklab, var(--color), var(--wa-color-surface-raised));display:flex;position:relative;width:100%;height:100%;min-height:1rem}.indicator{flex:1 1 auto;background:var(--color);border-radius:var(--wa-border-radius-pill)}:host([effect=sheen]) .indicator{background:linear-gradient(270deg,var(--sheen-color),var(--color),var(--color),var(--sheen-color));background-size:400% 100%;animation:sheen 8s ease-in-out infinite}:host([effect=pulse]) .indicator{animation:pulse 2s ease-in-out .5s infinite}@media (forced-colors:active){:host{--color:GrayText}}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}`,n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,l=(e,t,o,i)=>{for(var r,s=i>1?void 0:i?d(t,o):t,a=e.length-1;a>=0;a--)(r=e[a])&&(s=(i?r(t,o,s):r(s))||s);return i&&s&&n(t,o,s),s};let c=class extends s.A{render(){return i.qy` <div part="indicator" class="indicator"></div> `}constructor(){super(...arguments),this.effect="none"}};c.css=a,l([(0,r.MZ)({reflect:!0})],c.prototype,"effect",2),c=l([(0,r.EM)("wa-skeleton")],c)},76013(e,t,o){o.d(t,{K:()=>b});var i=o(62826),r=(o(75275),o(71970),o(5124)),s=o(22441),a=o(6412),n=o(7872),d=o(1024);const l=Symbol("internals"),c=Symbol("privateInternals");function h(e,t=!0){return t&&"rtl"===getComputedStyle(e).getPropertyValue("direction").trim()}const u=(0,d.n)((p=r.WF,class extends p{get[l](){return this[c]||(this[c]=this.attachInternals()),this[c]}}));var p,v;class b extends u{get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get form(){return this[l].form}get labels(){return this[l].labels}willUpdate(){this.href&&(this.disabled=!1,this.softDisabled=!1)}render(){const e=this.href?n.eu`div`:n.eu`button`,{ariaLabel:t,ariaHasPopup:o,ariaExpanded:i}=this,s=t&&this.ariaLabelSelected,d=this.toggle?this.selected:r.s6;let l=r.s6;return this.href||(l=s&&this.selected?this.ariaLabelSelected:t),n.qy`<${e} class="icon-button ${(0,a.H)(this.getRenderClasses())}" id="button" aria-label="${l||r.s6}" aria-haspopup="${!this.href&&o||r.s6}" aria-expanded="${!this.href&&i||r.s6}" aria-pressed="${d}" aria-disabled=${!this.href&&this.softDisabled||r.s6} ?disabled="${!this.href&&this.disabled}" @click="${this.handleClickOnChild}"> ${this.renderFocusRing()} ${this.renderRipple()} ${this.selected?r.s6:this.renderIcon()} ${this.selected?this.renderSelectedIcon():r.s6} ${this.href?this.renderLink():this.renderTouchTarget()} </${e}>`}renderLink(){const{ariaLabel:e}=this;return r.qy` <a class="link" id="link" href="${this.href}" download="${this.download||r.s6}" target="${this.target||r.s6}" aria-label="${e||r.s6}"> ${this.renderTouchTarget()} </a> `}getRenderClasses(){return{"flip-icon":this.flipIcon,selected:this.toggle&&this.selected}}renderIcon(){return r.qy`<span class="icon"><slot></slot></span>`}renderSelectedIcon(){return r.qy`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`}renderTouchTarget(){return r.qy`<span class="touch"></span>`}renderFocusRing(){return r.qy`<md-focus-ring part="focus-ring" for="${this.href?"link":"button"}"></md-focus-ring>`}renderRipple(){const e=!this.href&&(this.disabled||this.softDisabled);return r.qy`<md-ripple for="${this.href?"link":r.s6}" ?disabled="${e}"></md-ripple>`}connectedCallback(){this.flipIcon=h(this,this.flipIconInRtl),super.connectedCallback()}handleClick(e){if(!this.href&&this.softDisabled)return e.stopImmediatePropagation(),void e.preventDefault()}async handleClickOnChild(e){await 0,!this.toggle||this.disabled||this.softDisabled||e.defaultPrevented||(this.selected=!this.selected,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))}constructor(){super(),this.disabled=!1,this.softDisabled=!1,this.flipIconInRtl=!1,this.href="",this.download="",this.target="",this.ariaLabelSelected="",this.toggle=!1,this.selected=!1,this.type="submit",this.value="",this.flipIcon=h(this,this.flipIconInRtl),r.S$||this.addEventListener("click",this.handleClick.bind(this))}}v=b,r.S$||v.addInitializer(e=>{const t=e;t.addEventListener("click",async e=>{const{type:o,[l]:i}=t,{form:r}=i;r&&"button"!==o&&(await new Promise(e=>{setTimeout(e)}),e.defaultPrevented||("reset"!==o?(r.addEventListener("submit",e=>{Object.defineProperty(e,"submitter",{configurable:!0,enumerable:!0,get:()=>t})},{capture:!0,once:!0}),i.setFormValue(t.value),r.requestSubmit()):r.reset()))})}),b.formAssociated=!0,b.shadowRootOptions={mode:"open",delegatesFocus:!0},(0,i.Cg)([(0,s.MZ)({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean,attribute:"soft-disabled",reflect:!0})],b.prototype,"softDisabled",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean,attribute:"flip-icon-in-rtl"})],b.prototype,"flipIconInRtl",void 0),(0,i.Cg)([(0,s.MZ)()],b.prototype,"href",void 0),(0,i.Cg)([(0,s.MZ)()],b.prototype,"download",void 0),(0,i.Cg)([(0,s.MZ)()],b.prototype,"target",void 0),(0,i.Cg)([(0,s.MZ)({attribute:"aria-label-selected"})],b.prototype,"ariaLabelSelected",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean})],b.prototype,"toggle",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean,reflect:!0})],b.prototype,"selected",void 0),(0,i.Cg)([(0,s.MZ)()],b.prototype,"type",void 0),(0,i.Cg)([(0,s.MZ)({reflect:!0})],b.prototype,"value",void 0),(0,i.Cg)([(0,s.wk)()],b.prototype,"flipIcon",void 0)},17008(e,t,o){o.d(t,{R:()=>i});const i=o(5124).AH`:host{--_container-height:var(--md-outlined-icon-button-container-height, 40px);--_container-width:var(--md-outlined-icon-button-container-width, 40px);--_disabled-icon-color:var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity:var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color:var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity:var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_hover-state-layer-opacity:var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size:var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity:var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color:var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color:var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color:var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color:var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color:var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color:var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color:var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_disabled-outline-color:var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity:var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color:var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color:var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color:var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color:var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color:var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width:var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color:var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color:var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start:var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end:var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end:var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start:var(--md-outlined-icon-button-container-shape-end-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.outlined:is(:disabled,[aria-disabled=true])::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute;z-index:-1}.outlined.selected::before{border-width:0}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}.selected{--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}.selected:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors:active){:host(:is([disabled],[soft-disabled])){--_disabled-outline-opacity:1}.selected::before{border-color:CanvasText;border-width:var(--_outline-width)}.selected:is(:disabled,[aria-disabled=true])::before{border-color:GrayText;opacity:1}}`},14613(e,t,o){o.d(t,{R:()=>i});const i=o(5124).AH`:host{display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start:var(--_container-shape-start-start);--md-focus-ring-shape-start-end:var(--_container-shape-start-end);--md-focus-ring-shape-end-end:var(--_container-shape-end-end);--md-focus-ring-shape-end-start:var(--_container-shape-end-start)}:host(:is([disabled],[soft-disabled])){pointer-events:none}.icon-button{place-items:center;background:0 0;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:0;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{display:grid;height:100%;outline:0;place-items:center;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors:active){:host(:is([disabled],[soft-disabled])){--_disabled-icon-color:GrayText;--_disabled-icon-opacity:1}}`},76074(e,t,o){o(18111),o(7588);var i=o(62826),r=o(5124),s=o(22441);class a extends r.WF{connectedCallback(){super.connectedCallback(),document.addEventListener("mouseup",this.dragEnd),document.addEventListener("touchend",this.dragEnd,{passive:!1}),document.addEventListener("mousemove",this.drag),document.addEventListener("touchmove",this.drag,{passive:!1}),document.addEventListener("keydown",this._keyStep)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("mouseup",this.dragEnd),document.removeEventListener("touchend",this.dragEnd),document.removeEventListener("mousemove",this.drag),document.removeEventListener("touchmove",this.drag),document.removeEventListener("keydown",this._keyStep)}get _start(){return this.startAngle*Math.PI/180}get _len(){return Math.min(this.arcLength*Math.PI/180,2*Math.PI-.01)}get _end(){return this._start+this._len}get _showHandle(){return!this.readonly&&(null!=this.value||null!=this.high&&null!=this.low)}_angleInside(e){let t=(this.startAngle+this.arcLength/2-e+180+360)%360-180;return t<this.arcLength/2&&t>-this.arcLength/2}_angle2xy(e){return this.rtl?{x:-Math.cos(e),y:Math.sin(e)}:{x:Math.cos(e),y:Math.sin(e)}}_xy2angle(e,t){return this.rtl&&(e=-e),(Math.atan2(t,e)-this._start+8*Math.PI)%(2*Math.PI)}_value2angle(e){const t=((e=Math.min(this.max,Math.max(this.min,e)))-this.min)/(this.max-this.min);return this._start+t*this._len}_angle2value(e){return Math.round((e/this._len*(this.max-this.min)+this.min)/this.step)*this.step}get _boundaries(){const e=this._angle2xy(this._start),t=this._angle2xy(this._end);let o=1;this._angleInside(270)||(o=Math.max(-e.y,-t.y));let i=1;this._angleInside(90)||(i=Math.max(e.y,t.y));let r=1;this._angleInside(180)||(r=Math.max(-e.x,-t.x));let s=1;return this._angleInside(0)||(s=Math.max(e.x,t.x)),{up:o,down:i,left:r,right:s,height:o+i,width:r+s}}_mouse2value(e){const t=e.type.startsWith("touch")?e.touches[0].clientX:e.clientX,o=e.type.startsWith("touch")?e.touches[0].clientY:e.clientY,i=this.shadowRoot.querySelector("svg").getBoundingClientRect(),r=this._boundaries,s=t-(i.left+r.left*i.width/r.width),a=o-(i.top+r.up*i.height/r.height),n=this._xy2angle(s,a);return this._angle2value(n)}dragStart(e){if(!this._showHandle||this.disabled)return;let t,o=e.target;if(this._rotation&&"focus"!==this._rotation.type)return;if(o.classList.contains("shadowpath"))if("touchstart"===e.type&&(t=window.setTimeout(()=>{this._rotation&&(this._rotation.cooldown=void 0)},200)),null==this.low)o=this.shadowRoot.querySelector("#value");else{const t=this._mouse2value(e);o=Math.abs(t-this.low)<Math.abs(t-this.high)?this.shadowRoot.querySelector("#low"):this.shadowRoot.querySelector("#high")}if(o.classList.contains("overflow")&&(o=o.nextElementSibling),!o.classList.contains("handle"))return;o.setAttribute("stroke-width",String(2*this.handleSize*this.handleZoom*this._scale));const i="high"===o.id?this.low:this.min,r="low"===o.id?this.high:this.max;this._rotation={handle:o,min:i,max:r,start:this[o.id],type:e.type,cooldown:t},this.dragging=!0}_cleanupRotation(){const e=this._rotation.handle;e.setAttribute("stroke-width",String(2*this.handleSize*this._scale)),this._rotation=void 0,this.dragging=!1,e.blur()}dragEnd(e){if(!this._showHandle||this.disabled)return;if(!this._rotation)return;const t=this._rotation.handle;this._cleanupRotation();let o=new CustomEvent("value-changed",{detail:{[t.id]:this[t.id]},bubbles:!0,composed:!0});this.dispatchEvent(o),this.low&&this.low>=.99*this.max?this._reverseOrder=!0:this._reverseOrder=!1}drag(e){if(!this._showHandle||this.disabled)return;if(!this._rotation)return;if(this._rotation.cooldown)return window.clearTimeout(this._rotation.cooldown),void this._cleanupRotation();if("focus"===this._rotation.type)return;e.preventDefault();const t=this._mouse2value(e);this._dragpos(t)}_dragpos(e){if(e<this._rotation.min||e>this._rotation.max)return;const t=this._rotation.handle;this[t.id]=e;let o=new CustomEvent("value-changing",{detail:{[t.id]:e},bubbles:!0,composed:!0});this.dispatchEvent(o)}_keyStep(e){if(!this._showHandle||this.disabled)return;if(!this._rotation)return;const t=this._rotation.handle;"ArrowLeft"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),this.rtl?this._dragpos(this[t.id]+this.step):this._dragpos(this[t.id]-this.step)),"ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),this.rtl?this._dragpos(this[t.id]-this.step):this._dragpos(this[t.id]+this.step)),"Home"===e.key&&(e.preventDefault(),this._dragpos(this.min)),"End"===e.key&&(e.preventDefault(),this._dragpos(this.max))}updated(e){if(this.shadowRoot.querySelector(".slider")){const e=window.getComputedStyle(this.shadowRoot.querySelector(".slider"));if(e&&e.strokeWidth){const t=parseFloat(e.strokeWidth);if(t>this.handleSize*this.handleZoom){const e=this._boundaries,o=`\n ${t/2*Math.abs(e.up)}px\n ${t/2*Math.abs(e.right)}px\n ${t/2*Math.abs(e.down)}px\n ${t/2*Math.abs(e.left)}px`;this.shadowRoot.querySelector("svg").style.margin=o}}}if(this.shadowRoot.querySelector("svg")&&void 0===this.shadowRoot.querySelector("svg").style.vectorEffect){e.has("_scale")&&1!=this._scale&&this.shadowRoot.querySelector("svg").querySelectorAll("path").forEach(e=>{if(e.getAttribute("stroke-width"))return;const t=parseFloat(getComputedStyle(e).getPropertyValue("stroke-width"));e.style.strokeWidth=t*this._scale+"px"});const t=this.shadowRoot.querySelector("svg").getBoundingClientRect(),o=Math.max(t.width,t.height);this._scale=2/o}}_renderArc(e,t){const o=t-e,i=this._angle2xy(e),r=this._angle2xy(t+.001);return`\n M ${i.x} ${i.y}\n A 1 1,\n 0,\n ${o>Math.PI?"1":"0"} ${this.rtl?"0":"1"},\n ${r.x} ${r.y}\n `}_renderHandle(e){const t=this._value2angle(this[e]),o=this._angle2xy(t),i={value:this.valueLabel,low:this.lowLabel,high:this.highLabel}[e]||"";return r.JW` <g class="${e} handle"> <path id="${e}" class="overflow" d=" M ${o.x} ${o.y} L ${o.x+.001} ${o.y+.001} " vector-effect="non-scaling-stroke" stroke="rgba(0,0,0,0)" stroke-width="${4*this.handleSize*this._scale}"/> <path id="${e}" class="handle" d=" M ${o.x} ${o.y} L ${o.x+.001} ${o.y+.001} " vector-effect="non-scaling-stroke" stroke-width="${2*this.handleSize*this._scale}" tabindex="0" @focus="${this.dragStart}" @blur="${this.dragEnd}" role="slider" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this[e]}" aria-disabled="${this.disabled}" aria-label="${i||""}"/> </g> `}render(){const e=this._boundaries;return r.qy` <svg @mousedown="${this.dragStart}" @touchstart="${this.dragStart}" xmln="http://www.w3.org/2000/svg" viewBox="${-e.left} ${-e.up} ${e.width} ${e.height}" style="margin:${this.handleSize*this.handleZoom}px" ?disabled="${this.disabled}" focusable="false"> <g class="slider"> <path class="path" d="${this._renderArc(this._start,this._end)}" vector-effect="non-scaling-stroke"/> <g class="bar"> ${null!=this.low&&null!=this.high&&this.outside?r.JW` <path class="bar low" vector-effect="non-scaling-stroke" d="${this._renderArc(this._value2angle(this.min),this._value2angle(this.low))}"/> <path class="bar high" vector-effect="non-scaling-stroke" d="${this._renderArc(this._value2angle(this.high),this._value2angle(this.max))}"/> `:r.JW` <path class="bar" vector-effect="non-scaling-stroke" d="${this._renderArc(this._value2angle(null!=this.low?this.low:this.min),this._value2angle(null!=this.high?this.high:this.value))}"/> `} </g> <path class="shadowpath" d="${this._renderArc(this._start,this._end)}" vector-effect="non-scaling-stroke" stroke="rgba(0,0,0,0)" stroke-width="${3*this.handleSize*this._scale}" stroke-linecap="butt"/> </g> <g class="handles"> ${this._showHandle?null!=this.low?this._reverseOrder?r.JW`${this._renderHandle("high")} ${this._renderHandle("low")}`:r.JW`${this._renderHandle("low")} ${this._renderHandle("high")}`:r.JW`${this._renderHandle("value")}`:""} </g> </svg> `}static get styles(){return r.AH`:host{display:inline-block;width:100%}svg{overflow:visible;display:block}path{transition:stroke 1s ease-out,stroke-width .2s ease-out}.slider{fill:none;stroke-width:var(--round-slider-path-width,3);stroke-linecap:var(--round-slider-linecap,round)}.path{stroke:var(--round-slider-path-color,lightgray)}g.bar{stroke:var(--round-slider-bar-color,deepskyblue)}.bar.low{stroke:var(--round-slider-low-bar-color)}.bar.high{stroke:var(--round-slider-high-bar-color)}svg[disabled] .bar{stroke:var(--round-slider-disabled-bar-color,darkgray)}g.handles{stroke:var(--round-slider-handle-color,var(--round-slider-bar-color,deepskyblue));stroke-linecap:round;cursor:var(--round-slider-handle-cursor,pointer)}g.low.handle{stroke:var(--round-slider-low-handle-color)}g.high.handle{stroke:var(--round-slider-high-handle-color)}svg[disabled] g.handles{stroke:var(--round-slider-disabled-bar-color,darkgray)}.handle:focus{outline:unset}`}constructor(){super(),this.min=0,this.max=100,this.step=1,this.startAngle=135,this.arcLength=270,this.handleSize=6,this.handleZoom=1.5,this.readonly=!1,this.disabled=!1,this.dragging=!1,this.rtl=!1,this.outside=!1,this._scale=1,this.dragEnd=this.dragEnd.bind(this),this.drag=this.drag.bind(this),this._keyStep=this._keyStep.bind(this)}}(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"value",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"high",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"low",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"min",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"max",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"step",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"startAngle",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"arcLength",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"handleSize",void 0),(0,i.Cg)([(0,s.MZ)({type:Number})],a.prototype,"handleZoom",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean})],a.prototype,"readonly",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean})],a.prototype,"disabled",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean,reflect:!0})],a.prototype,"dragging",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean})],a.prototype,"rtl",void 0),(0,i.Cg)([(0,s.MZ)()],a.prototype,"valueLabel",void 0),(0,i.Cg)([(0,s.MZ)()],a.prototype,"lowLabel",void 0),(0,i.Cg)([(0,s.MZ)()],a.prototype,"highLabel",void 0),(0,i.Cg)([(0,s.MZ)({type:Boolean})],a.prototype,"outside",void 0),(0,i.Cg)([(0,s.wk)()],a.prototype,"_scale",void 0),customElements.define("round-slider",a)}};