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

13 lines • 14.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
export const __rspack_esm_id=59704;export const __rspack_esm_ids=[59704];export const __webpack_modules__={63004(t,e,i){i.d(e,{O:()=>o,q:()=>r});const r=(t,e,i)=>Math.min(Math.max(t,e),i),o=(t,e,i)=>{let r;return r=null!=e?Math.max(t,e):t,r=null!=i?Math.min(r,i):r,r}},10223(t,e,i){i.a(t,async function(t,e){try{i(17642),i(58004),i(33853),i(45876),i(32475),i(15024),i(31698);var r=i(62826),o=i(26183),s=i(5124),a=i(22441),l=i(6412),n=i(63672),d=i(89784),h=i(1087),c=i(63091),p=i(20058),u=i(8549),v=t([p]);p=(v.then?(await v)():v)[0];const m=new Set(["ArrowRight","ArrowUp","ArrowLeft","ArrowDown","PageUp","PageDown","Home","End"]);class b extends s.WF{valueToPercentage(t){const e=(this.boundedValue(t)-this.min)/(this.max-this.min);return this._isVisuallyInverted()?1-e:e}percentageToValue(t){return(this.max-this.min)*(this._isVisuallyInverted()?1-t:t)+this.min}steppedValue(t){return Math.round(t/this.step)*this.step}boundedValue(t){return Math.min(Math.max(t,this.min),this.max)}firstUpdated(t){super.firstUpdated(t),this.setupListeners()}updated(t){if(super.updated(t),t.has("value")){const t=this.steppedValue(this.value??0);this.setAttribute("aria-valuenow",t.toString()),this.setAttribute("aria-valuetext",this._formatValue(t))}if(t.has("min")&&this.setAttribute("aria-valuemin",this.min.toString()),t.has("max")&&this.setAttribute("aria-valuemax",this.max.toString()),t.has("vertical")){const t=this.vertical?"vertical":"horizontal";this.setAttribute("aria-orientation",t)}}connectedCallback(){super.connectedCallback(),this.setupListeners()}disconnectedCallback(){super.disconnectedCallback(),this.destroyListeners()}setupListeners(){if(this.slider&&!this._mc){let t;this._mc=new o.mS(this.slider,{touchAction:this.touchAction??(this.vertical?"pan-x":"pan-y")}),this._mc.add(new o.uq({threshold:10,direction:o.ge,enable:!0})),this._mc.add(new o.Cx({event:"singletap"})),this._mc.add(new o.ac),this._mc.on("panstart",()=>{this.disabled||(this.pressed=!0,this._showTooltip(),t=this.value)}),this._mc.on("pancancel",()=>{this.disabled||(this.pressed=!1,this._hideTooltip(),this.value=t)}),this._mc.on("panmove",t=>{if(this.disabled)return;const e=this._getPercentageFromEvent(t);this.value=this.percentageToValue(e);const i=this.steppedValue(this.value);(0,h.r)(this,"slider-moved",{value:i})}),this._mc.on("panend",t=>{if(this.disabled)return;this.pressed=!1,this._hideTooltip();const e=this._getPercentageFromEvent(t);this.value=this.steppedValue(this.percentageToValue(e)),(0,h.r)(this,"slider-moved",{value:void 0}),(0,h.r)(this,"value-changed",{value:this.value})}),this._mc.on("singletap pressup",t=>{if(this.disabled)return;const e=this._getPercentageFromEvent(t);this.value=this.steppedValue(this.percentageToValue(e)),(0,h.r)(this,"value-changed",{value:this.value})})}}destroyListeners(){this._mc&&(this._mc.destroy(),this._mc=void 0)}get _tenPercentStep(){return Math.max(this.step,(this.max-this.min)/10)}_showTooltip(){null!=this._tooltipTimeout&&window.clearTimeout(this._tooltipTimeout),this.tooltipVisible=!0}_hideTooltip(t){t?this._tooltipTimeout=window.setTimeout(()=>{this.tooltipVisible=!1},t):this.tooltipVisible=!1}_handleKeyDown(t){if(m.has(t.code)){if(t.preventDefault(),"Home"===t.code)this.value=this.min;else if("End"===t.code)this.value=this.max;else if("PageUp"===t.code)this.value=this.steppedValue(this.boundedValue((this.value??0)+this._tenPercentStep));else if("PageDown"===t.code)this.value=this.steppedValue(this.boundedValue((this.value??0)-this._tenPercentStep));else{const e="rtl"===c.G.document.dir;let i=1;switch(t.code){case"ArrowRight":i=e?-1:1;break;case"ArrowUp":i=1;break;case"ArrowLeft":i=e?1:-1;break;case"ArrowDown":i=-1}this.value=this.boundedValue((this.value??0)+this.step*i)}this._showTooltip(),(0,h.r)(this,"slider-moved",{value:this.value})}}_handleKeyUp(t){m.has(t.code)&&(t.preventDefault(),this._hideTooltip(500),(0,h.r)(this,"value-changed",{value:this.value}))}_formatValue(t){return`${(0,p.ZV)(t,this.locale)}${this.unit?`${(0,u.A)(this.unit,this.locale)}${this.unit}`:""}`}_renderTooltip(){if("never"===this.tooltipMode)return s.s6;const t=this.tooltipPosition??(this.vertical?"left":"top"),e="always"===this.tooltipMode||this.tooltipVisible&&"interaction"===this.tooltipMode,i=this.steppedValue(this.value??0);return s.qy` <span aria-hidden="true" class="tooltip ${(0,l.H)({visible:e,[t]:!0,[this.mode??"start"]:!0,"show-handle":this.showHandle})}"> ${this._formatValue(i)} </span> `}render(){const t=this.steppedValue(this.value??0);return s.qy` <div class="container${(0,l.H)({pressed:this.pressed})}" style="${(0,d.W)({"--value":`${this.valueToPercentage(this.value??0)}`})}"> <div id="slider" class="slider" role="slider" tabindex="0" aria-label="${(0,n.J)(this.label)}" aria-valuenow="${t.toString()}" aria-valuetext="${this._formatValue(t)}" aria-valuemin="${(0,n.J)(null!=this.min?this.min.toString():void 0)}" aria-valuemax="${(0,n.J)(null!=this.max?this.max.toString():void 0)}" aria-orientation="${this.vertical?"vertical":"horizontal"}" @keydown="${this._handleKeyDown}" @keyup="${this._handleKeyUp}"> <div class="slider-track-background"></div> <slot name="background"></slot> ${"cursor"===this.mode?null!=this.value?s.qy` <div class="${(0,l.H)({"slider-track-cursor":!0})}"></div> `:null:s.qy` <div class="${(0,l.H)({"slider-track-bar":!0,[this.mode??"start"]:!0,"show-handle":this.showHandle})}"></div> `} </div> ${this._renderTooltip()} </div> `}_isVisuallyInverted(){let t=this.inverted;return"rtl"===c.G.document.dir&&(t=!t),t}constructor(...t){super(...t),this.disabled=!1,this.mode="start",this.vertical=!1,this.showHandle=!1,this.inverted=!1,this.tooltipMode="interaction",this.step=1,this.min=0,this.max=100,this.pressed=!1,this.tooltipVisible=!1,this._getPercentageFromEvent=t=>{if(this.vertical){const e=t.center.y,i=t.target.getBoundingClientRect().top,r=t.target.clientHeight;return Math.max(Math.min(1,1-(e-i)/r),0)}const e=t.center.x,i=t.target.getBoundingClientRect().left,r=t.target.clientWidth;return Math.max(Math.min(1,(e-i)/r),0)}}}b.styles=s.AH`:host{display:block;--control-slider-color:var(--primary-color);--control-slider-background:var(--disabled-color);--control-slider-background-opacity:0.2;--control-slider-thickness:40px;--control-slider-border-radius:var(--ha-border-radius-md);--control-slider-tooltip-font-size:var(--ha-font-size-m);height:var(--control-slider-thickness);width:100%}:host([vertical]){width:var(--control-slider-thickness);height:100%}.container{position:relative;height:100%;width:100%;--handle-size:4px;--handle-margin:calc(var(--control-slider-thickness) / 8)}.tooltip{pointer-events:none;user-select:none;position:absolute;background-color:var(--clear-background-color);color:var(--primary-text-color);font-size:var(--control-slider-tooltip-font-size);border-radius:var(--ha-border-radius-lg);padding:.2em .4em;opacity:0;white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:opacity 180ms ease-in-out,left 180ms ease-in-out,bottom 180ms ease-in-out;--handle-spacing:calc(2 * var(--handle-margin) + var(--handle-size));--slider-tooltip-margin:-4px;--slider-tooltip-range:100%;--slider-tooltip-offset:0px;--slider-tooltip-position:calc( min( max( var(--value) * var(--slider-tooltip-range) + var(--slider-tooltip-offset), 0% ), 100% ) )}.tooltip:dir(ltr).start,.tooltip:dir(rtl).end{--slider-tooltip-offset:calc(-0.5 * (var(--handle-spacing)))}.tooltip:dir(ltr).end,.tooltip:dir(rtl).start{--slider-tooltip-offset:calc(0.5 * (var(--handle-spacing)))}.tooltip.cursor{--slider-tooltip-range:calc(100% - var(--handle-spacing));--slider-tooltip-offset:calc(0.5 * (var(--handle-spacing)))}.tooltip.show-handle{--slider-tooltip-range:calc(100% - var(--handle-spacing));--slider-tooltip-offset:calc(0.5 * (var(--handle-spacing)))}.tooltip.visible{opacity:1}.tooltip.top{transform:translate3d(-50%,-100%,0);top:var(--slider-tooltip-margin);left:50%}.tooltip.bottom{transform:translate3d(-50%,100%,0);bottom:var(--slider-tooltip-margin);left:50%}.tooltip.left{transform:translate3d(-100%,50%,0);bottom:50%;left:var(--slider-tooltip-margin)}.tooltip.right{transform:translate3d(100%,50%,0);bottom:50%;right:var(--slider-tooltip-margin)}:host(:not([vertical])) .tooltip.bottom,:host(:not([vertical])) .tooltip.top{left:var(--slider-tooltip-position)}:host([vertical]) .tooltip.left,:host([vertical]) .tooltip.right{bottom:var(--slider-tooltip-position)}.slider{position:relative;height:100%;width:100%;border-radius:var(--control-slider-border-radius);transform:translateZ(0);transition:box-shadow 180ms ease-in-out;outline:0;overflow:hidden;cursor:pointer}.slider:focus-visible{box-shadow:0 0 0 2px var(--control-slider-color)}.slider *{pointer-events:none}.slider .slider-track-background{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--control-slider-background);opacity:var(--control-slider-background-opacity)}::slotted([slot=background]){position:absolute;top:0;left:0;height:100%;width:100%}.slider .slider-track-bar{--ha-border-radius:var(--control-slider-border-radius);--slider-size:100%;position:absolute;height:100%;width:100%;background-color:var(--control-slider-color);transition:transform 180ms ease-in-out,background-color 180ms ease-in-out}.slider .slider-track-bar.show-handle{--slider-size:calc(100% - 2 * var(--handle-margin) - var(--handle-size))}.slider .slider-track-bar::after{display:block;content:"";position:absolute;margin:auto;border-radius:var(--handle-size);background-color:#fff}.slider .slider-track-bar{--slider-track-bar-border-radius:min( var(--control-slider-border-radius), var(--ha-border-radius-md) );top:0;left:0;transform:translate3d(calc((var(--value,0) - 1) * var(--slider-size)),0,0);border-radius:var(--slider-track-bar-border-radius)}.slider .slider-track-bar:after{top:0;bottom:0;right:var(--handle-margin);height:50%;width:var(--handle-size)}.slider:dir(ltr) .slider-track-bar.end,.slider:dir(rtl) .slider-track-bar{right:0;left:initial;transform:translate3d(calc(var(--value,0) * var(--slider-size)),0,0)}.slider:dir(ltr) .slider-track-bar.end::after,.slider:dir(rtl) .slider-track-bar::after{right:initial;left:var(--handle-margin)}:host([vertical]) .slider .slider-track-bar{bottom:0;left:0;transform:translate3d(0,calc((1 - var(--value,0)) * var(--slider-size)),0)}:host([vertical]) .slider .slider-track-bar:after{top:var(--handle-margin);right:0;left:0;bottom:initial;width:50%;height:var(--handle-size)}:host([vertical]) .slider .slider-track-bar.end{top:0;bottom:initial;transform:translate3d(0,calc((0 - var(--value,0)) * var(--slider-size)),0)}:host([vertical]) .slider .slider-track-bar.end::after{top:initial;bottom:var(--handle-margin)}.slider .slider-track-cursor:after{display:block;content:"";background-color:var(--secondary-text-color);position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;border-radius:var(--handle-size)}.slider .slider-track-cursor{--cursor-size:calc(var(--control-slider-thickness) / 4);position:absolute;background-color:#fff;border-radius:min(var(--handle-size),var(--control-slider-border-radius));transition:left 180ms ease-in-out,bottom 180ms ease-in-out;top:0;bottom:0;left:calc(var(--value,0) * (100% - var(--cursor-size)));width:var(--cursor-size);box-shadow:0 2px 5px rgba(0,0,0,.2)}.slider .slider-track-cursor:after{height:50%;width:var(--handle-size)}:host([vertical]) .slider .slider-track-cursor{top:initial;right:0;left:0;bottom:calc(var(--value,0) * (100% - var(--cursor-size)));height:var(--cursor-size);width:100%}:host([vertical]) .slider .slider-track-cursor:after{height:var(--handle-size);width:50%}.pressed .tooltip{transition:opacity 180ms ease-in-out}.pressed .slider-track-bar,.pressed .slider-track-cursor{transition:none}:host(:disabled) .slider{cursor:not-allowed}`,(0,r.Cg)([(0,a.MZ)({attribute:!1})],b.prototype,"locale",void 0),(0,r.Cg)([(0,a.MZ)({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),(0,r.Cg)([(0,a.MZ)()],b.prototype,"mode",void 0),(0,r.Cg)([(0,a.MZ)({type:Boolean,reflect:!0})],b.prototype,"vertical",void 0),(0,r.Cg)([(0,a.MZ)({type:Boolean,attribute:"show-handle"})],b.prototype,"showHandle",void 0),(0,r.Cg)([(0,a.MZ)({type:Boolean,attribute:"inverted"})],b.prototype,"inverted",void 0),(0,r.Cg)([(0,a.MZ)({attribute:"tooltip-position"})],b.prototype,"tooltipPosition",void 0),(0,r.Cg)([(0,a.MZ)()],b.prototype,"unit",void 0),(0,r.Cg)([(0,a.MZ)({attribute:"tooltip-mode"})],b.prototype,"tooltipMode",void 0),(0,r.Cg)([(0,a.MZ)({attribute:"touch-action"})],b.prototype,"touchAction",void 0),(0,r.Cg)([(0,a.MZ)({type:Number})],b.prototype,"value",void 0),(0,r.Cg)([(0,a.MZ)({type:Number})],b.prototype,"step",void 0),(0,r.Cg)([(0,a.MZ)({type:Number})],b.prototype,"min",void 0),(0,r.Cg)([(0,a.MZ)({type:Number})],b.prototype,"max",void 0),(0,r.Cg)([(0,a.MZ)({type:String})],b.prototype,"label",void 0),(0,r.Cg)([(0,a.wk)()],b.prototype,"pressed",void 0),(0,r.Cg)([(0,a.wk)()],b.prototype,"tooltipVisible",void 0),(0,r.Cg)([(0,a.P)("#slider")],b.prototype,"slider",void 0),b=(0,r.Cg)([(0,a.EM)("ha-control-slider")],b),e()}catch(t){e(t)}})},57264(t,e,i){i.d(e,{Aw:()=>d,BD:()=>p,F9:()=>v,NC:()=>s,c9:()=>h,n6:()=>c,sq:()=>o,ti:()=>n});i(74423),i(44114),i(18111),i(13579);var r=i(16629),o=function(t){return t[t.EFFECT=4]="EFFECT",t[t.FLASH=8]="FLASH",t[t.TRANSITION=32]="TRANSITION",t}({}),s=function(t){return t.UNKNOWN="unknown",t.ONOFF="onoff",t.BRIGHTNESS="brightness",t.COLOR_TEMP="color_temp",t.HS="hs",t.XY="xy",t.RGB="rgb",t.RGBW="rgbw",t.RGBWW="rgbww",t.WHITE="white",t}({});const a=["hs","xy","rgb","rgbw","rgbww"],l=[...a,"color_temp","brightness","white"],n=(t,e)=>t.attributes.supported_color_modes?.includes(e)||!1,d=t=>t.attributes.supported_color_modes?.some(t=>a.includes(t))||!1,h=t=>t.attributes.supported_color_modes?.some(t=>l.includes(t))||!1,c=t=>d(t)||n(t,"color_temp"),p=t=>"rgbww"===t.attributes.color_mode?t.attributes.rgbww_color:"rgbw"===t.attributes.color_mode?t.attributes.rgbw_color:t.attributes.rgb_color,u=[{rgb_color:[127,172,255]},{rgb_color:[215,150,255]},{rgb_color:[255,158,243]},{rgb_color:[255,110,84]}],v=t=>{const e=[],i=n(t,"color_temp"),o=d(t);if(i){const i=t.attributes.min_color_temp_kelvin,r=(t.attributes.max_color_temp_kelvin-i)/3;for(let t=0;t<4;t++)e.push({color_temp_kelvin:Math.round(i+r*t)})}else if(o){const t=2e3,i=(6500-t)/3;for(let o=0;o<4;o++)e.push({rgb_color:(0,r.Mn)(Math.round(t+i*o))})}return o&&e.push(...u),e}}};