iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
305 lines (287 loc) • 33.1 kB
JavaScript
(self.webpackChunkhome_assistant_frontend=self.webpackChunkhome_assistant_frontend||[]).push([[6016],{73139:(e,t,r)=>{"use strict";var i=r(50856),o=r(28426);r(16509),r(46998);class s extends o.H3{static get template(){return i.d`
<style>
:host {
display: block;
}
.title {
margin: 5px 0 8px;
color: var(--primary-text-color);
}
.slider-container {
display: flex;
}
ha-icon {
margin-top: 4px;
color: var(--secondary-text-color);
}
ha-slider {
flex-grow: 1;
background-image: var(--ha-slider-background);
border-radius: 4px;
}
</style>
<div class="title">[[caption]]</div>
<div class="extra-container"><slot name="extra"></slot></div>
<div class="slider-container">
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
<ha-slider
min="[[min]]"
max="[[max]]"
step="[[step]]"
pin="[[pin]]"
disabled="[[disabled]]"
value="{{value}}"
></ha-slider>
</div>
`}static get properties(){return{caption:String,disabled:Boolean,min:Number,max:Number,pin:Boolean,step:Number,extra:{type:Boolean,value:!1},ignoreBarTouch:{type:Boolean,value:!0},icon:{type:String,value:""},value:{type:Number,notify:!0}}}}customElements.define("ha-labeled-slider",s)},81303:(e,t,r)=>{"use strict";r(8878);const i=customElements.get("paper-dropdown-menu");customElements.define("ha-paper-dropdown-menu",class extends i{ready(){super.ready(),setTimeout((()=>{"rtl"===window.getComputedStyle(this).direction&&(this.style.textAlign="right")}),100)}})},36016:(e,t,r)=>{"use strict";r.r(t);r(53973),r(51095);var i=r(50424),o=r(55358),s=r(40095),a=(r(31811),r(42657),r(50856)),n=r(28426),l=r(15838),h=r(11052);class c extends((0,h.I)(n.H3)){static get template(){return a.d`
<style>
:host {
user-select: none;
-webkit-user-select: none;
}
#canvas {
position: relative;
width: 100%;
max-width: 330px;
}
#canvas > * {
display: block;
}
#interactionLayer {
color: white;
position: absolute;
cursor: crosshair;
width: 100%;
height: 100%;
overflow: visible;
}
#backgroundLayer {
width: 100%;
overflow: visible;
--wheel-bordercolor: var(--ha-color-picker-wheel-bordercolor, white);
--wheel-borderwidth: var(--ha-color-picker-wheel-borderwidth, 3);
--wheel-shadow: var(
--ha-color-picker-wheel-shadow,
rgb(15, 15, 15) 10px 5px 5px 0px
);
}
#marker {
fill: currentColor;
stroke: var(--ha-color-picker-marker-bordercolor, white);
stroke-width: var(--ha-color-picker-marker-borderwidth, 3);
filter: url(#marker-shadow);
}
.dragging #marker {
}
#colorTooltip {
display: none;
fill: currentColor;
stroke: var(--ha-color-picker-tooltip-bordercolor, white);
stroke-width: var(--ha-color-picker-tooltip-borderwidth, 3);
}
.touch.dragging #colorTooltip {
display: inherit;
}
</style>
<div id="canvas">
<svg id="interactionLayer">
<defs>
<filter
id="marker-shadow"
x="-50%"
y="-50%"
width="200%"
height="200%"
filterUnits="objectBoundingBox"
>
<feOffset
result="offOut"
in="SourceAlpha"
dx="2"
dy="2"
></feOffset>
<feGaussianBlur
result="blurOut"
in="offOut"
stdDeviation="2"
></feGaussianBlur>
<feComponentTransfer in="blurOut" result="alphaOut">
<feFuncA type="linear" slope="0.3"></feFuncA>
</feComponentTransfer>
<feBlend
in="SourceGraphic"
in2="alphaOut"
mode="normal"
></feBlend>
</filter>
</defs>
</svg>
<canvas id="backgroundLayer"></canvas>
</div>
`}static get properties(){return{hsColor:{type:Object},desiredHsColor:{type:Object,observer:"applyHsColor"},desiredRgbColor:{type:Object,observer:"applyRgbColor"},width:{type:Number,value:500},height:{type:Number,value:500},radius:{type:Number,value:225},hueSegments:{type:Number,value:0,observer:"segmentationChange"},saturationSegments:{type:Number,value:0,observer:"segmentationChange"},ignoreSegments:{type:Boolean,value:!1},throttle:{type:Number,value:500}}}ready(){super.ready(),this.setupLayers(),this.drawColorWheel(),this.drawMarker(),this.desiredHsColor&&this.applyHsColor(this.desiredHsColor),this.desiredRgbColor&&this.applyRgbColor(this.desiredRgbColor),this.interactionLayer.addEventListener("mousedown",(e=>this.onMouseDown(e))),this.interactionLayer.addEventListener("touchstart",(e=>this.onTouchStart(e)))}convertToCanvasCoordinates(e,t){const r=this.interactionLayer.createSVGPoint();r.x=e,r.y=t;const i=r.matrixTransform(this.interactionLayer.getScreenCTM().inverse());return{x:i.x,y:i.y}}onMouseDown(e){const t=this.convertToCanvasCoordinates(e.clientX,e.clientY);this.isInWheel(t.x,t.y)&&(this.onMouseSelect(e),this.canvas.classList.add("mouse","dragging"),this.addEventListener("mousemove",this.onMouseSelect),this.addEventListener("mouseup",this.onMouseUp))}onMouseUp(){this.canvas.classList.remove("mouse","dragging"),this.removeEventListener("mousemove",this.onMouseSelect)}onMouseSelect(e){requestAnimationFrame((()=>this.processUserSelect(e)))}onTouchStart(e){const t=e.changedTouches[0],r=this.convertToCanvasCoordinates(t.clientX,t.clientY);if(this.isInWheel(r.x,r.y)){if(e.target===this.marker)return e.preventDefault(),this.canvas.classList.add("touch","dragging"),this.addEventListener("touchmove",this.onTouchSelect),void this.addEventListener("touchend",this.onTouchEnd);this.tapBecameScroll=!1,this.addEventListener("touchend",this.onTap),this.addEventListener("touchmove",(()=>{this.tapBecameScroll=!0}),{passive:!0})}}onTap(e){this.tapBecameScroll||(e.preventDefault(),this.onTouchSelect(e))}onTouchEnd(){this.canvas.classList.remove("touch","dragging"),this.removeEventListener("touchmove",this.onTouchSelect)}onTouchSelect(e){requestAnimationFrame((()=>this.processUserSelect(e.changedTouches[0])))}processUserSelect(e){const t=this.convertToCanvasCoordinates(e.clientX,e.clientY),r=this.getColor(t.x,t.y);let i;if(this.isInWheel(t.x,t.y))i=this.getRgbColor(t.x,t.y);else{const[e,t,o]=(0,l.Mc)([r.h,r.s]);i={r:e,g:t,b:o}}this.onColorSelect(r,i)}onColorSelect(e,t){if(this.setMarkerOnColor(e),this.ignoreSegments||(e=this.applySegmentFilter(e)),this.applyColorToCanvas(e),this.colorSelectIsThrottled)return clearTimeout(this.ensureFinalSelect),void(this.ensureFinalSelect=setTimeout((()=>{this.fireColorSelected(e,t)}),this.throttle));this.fireColorSelected(e,t),this.colorSelectIsThrottled=!0,setTimeout((()=>{this.colorSelectIsThrottled=!1}),this.throttle)}fireColorSelected(e,t){this.hsColor=e,this.fire("colorselected",{hs:e,rgb:t})}setMarkerOnColor(e){if(!this.marker||!this.tooltip)return;const t=e.s*this.radius,r=(e.h-180)/180*Math.PI,i=`translate(${-t*Math.cos(r)},${-t*Math.sin(r)})`;this.marker.setAttribute("transform",i),this.tooltip.setAttribute("transform",i)}applyColorToCanvas(e){this.interactionLayer&&(this.interactionLayer.style.color=`hsl(${e.h}, 100%, ${100-50*e.s}%)`)}applyHsColor(e){this.hsColor&&this.hsColor.h===e.h&&this.hsColor.s===e.s||(this.setMarkerOnColor(e),this.ignoreSegments||(e=this.applySegmentFilter(e)),this.hsColor=e,this.applyColorToCanvas(e))}applyRgbColor(e){const[t,r]=(0,l.xV)(e);this.applyHsColor({h:t,s:r})}getAngle(e,t){return Math.atan2(-t,-e)/Math.PI*180+180}isInWheel(e,t){return this.getDistance(e,t)<=1}getDistance(e,t){return Math.sqrt(e*e+t*t)/this.radius}getColor(e,t){const r=this.getAngle(e,t),i=this.getDistance(e,t);return{h:r,s:Math.min(i,1)}}getRgbColor(e,t){const r=this.backgroundLayer.getContext("2d").getImageData(e+250,t+250,1,1).data;return{r:r[0],g:r[1],b:r[2]}}applySegmentFilter(e){if(this.hueSegments){const t=360/this.hueSegments,r=t/2;e.h-=r,e.h<0&&(e.h+=360);const i=e.h%t;e.h-=i-t}if(this.saturationSegments)if(1===this.saturationSegments)e.s=1;else{const t=1/this.saturationSegments,r=1/(this.saturationSegments-1),i=Math.floor(e.s/t)*r;e.s=Math.min(i,1)}return e}setupLayers(){this.canvas=this.$.canvas,this.backgroundLayer=this.$.backgroundLayer,this.interactionLayer=this.$.interactionLayer,this.originX=this.width/2,this.originY=this.originX,this.backgroundLayer.width=this.width,this.backgroundLayer.height=this.height,this.interactionLayer.setAttribute("viewBox",`${-this.originX} ${-this.originY} ${this.width} ${this.height}`)}drawColorWheel(){let e,t,r,i;const o=this.backgroundLayer.getContext("2d"),s=this.originX,a=this.originY,n=this.radius,l=window.getComputedStyle(this.backgroundLayer,null),h=parseInt(l.getPropertyValue("--wheel-borderwidth"),10),c=l.getPropertyValue("--wheel-bordercolor").trim(),d=l.getPropertyValue("--wheel-shadow").trim();if("none"!==d){const o=d.split("px ");e=o.pop(),t=parseInt(o[0],10),r=parseInt(o[1],10),i=parseInt(o[2],10)||0}const u=n+h/2,p=n,m=n+h;"none"!==l.shadow&&(o.save(),o.beginPath(),o.arc(s,a,m,0,2*Math.PI,!1),o.shadowColor=e,o.shadowOffsetX=t,o.shadowOffsetY=r,o.shadowBlur=i,o.fillStyle="white",o.fill(),o.restore()),function(e,t){const r=360/(e=e||360),i=r/2;for(let e=0;e<=360;e+=r){const r=(e-i)*(Math.PI/180),n=(e+i+1)*(Math.PI/180);o.beginPath(),o.moveTo(s,a),o.arc(s,a,p,r,n,false),o.closePath();const l=o.createRadialGradient(s,a,0,s,a,p);let h=100;if(l.addColorStop(0,`hsl(${e}, 100%, ${h}%)`),t>0){const r=1/t;let i=0;for(let o=1;o<t;o+=1){const t=h;i=o*r,h=100-50*i,l.addColorStop(i,`hsl(${e}, 100%, ${t}%)`),l.addColorStop(i,`hsl(${e}, 100%, ${h}%)`)}l.addColorStop(i,`hsl(${e}, 100%, 50%)`)}l.addColorStop(1,`hsl(${e}, 100%, 50%)`),o.fillStyle=l,o.fill()}}(this.hueSegments,this.saturationSegments),h>0&&(o.beginPath(),o.arc(s,a,u,0,2*Math.PI,!1),o.lineWidth=h,o.strokeStyle=c,o.stroke())}drawMarker(){const e=this.interactionLayer,t=.08*this.radius,r=.15*this.radius,i=-3*r;e.marker=document.createElementNS("http://www.w3.org/2000/svg","circle"),e.marker.setAttribute("id","marker"),e.marker.setAttribute("r",t),this.marker=e.marker,e.appendChild(e.marker),e.tooltip=document.createElementNS("http://www.w3.org/2000/svg","circle"),e.tooltip.setAttribute("id","colorTooltip"),e.tooltip.setAttribute("r",r),e.tooltip.setAttribute("cx",0),e.tooltip.setAttribute("cy",i),this.tooltip=e.tooltip,e.appendChild(e.tooltip)}segmentationChange(){this.backgroundLayer&&this.drawColorWheel()}}customElements.define("ha-color-picker",c);r(10983),r(73139),r(81303);var d=r(21668);function u(){u=function(){return e};var e={elementsDefinitionOrder:[["method"],["field"]],initializeInstanceElements:function(e,t){["method","field"].forEach((function(r){t.forEach((function(t){t.kind===r&&"own"===t.placement&&this.defineClassElement(e,t)}),this)}),this)},initializeClassElements:function(e,t){var r=e.prototype;["method","field"].forEach((function(i){t.forEach((function(t){var o=t.placement;if(t.kind===i&&("static"===o||"prototype"===o)){var s="static"===o?e:r;this.defineClassElement(s,t)}}),this)}),this)},defineClassElement:function(e,t){var r=t.descriptor;if("field"===t.kind){var i=t.initializer;r={enumerable:r.enumerable,writable:r.writable,configurable:r.configurable,value:void 0===i?void 0:i.call(e)}}Object.defineProperty(e,t.key,r)},decorateClass:function(e,t){var r=[],i=[],o={static:[],prototype:[],own:[]};if(e.forEach((function(e){this.addElementPlacement(e,o)}),this),e.forEach((function(e){if(!g(e))return r.push(e);var t=this.decorateElement(e,o);r.push(t.element),r.push.apply(r,t.extras),i.push.apply(i,t.finishers)}),this),!t)return{elements:r,finishers:i};var s=this.decorateConstructor(r,t);return i.push.apply(i,s.finishers),s.finishers=i,s},addElementPlacement:function(e,t,r){var i=t[e.placement];if(!r&&-1!==i.indexOf(e.key))throw new TypeError("Duplicated element ("+e.key+")");i.push(e.key)},decorateElement:function(e,t){for(var r=[],i=[],o=e.decorators,s=o.length-1;s>=0;s--){var a=t[e.placement];a.splice(a.indexOf(e.key),1);var n=this.fromElementDescriptor(e),l=this.toElementFinisherExtras((0,o[s])(n)||n);e=l.element,this.addElementPlacement(e,t),l.finisher&&i.push(l.finisher);var h=l.extras;if(h){for(var c=0;c<h.length;c++)this.addElementPlacement(h[c],t);r.push.apply(r,h)}}return{element:e,finishers:i,extras:r}},decorateConstructor:function(e,t){for(var r=[],i=t.length-1;i>=0;i--){var o=this.fromClassDescriptor(e),s=this.toClassDescriptor((0,t[i])(o)||o);if(void 0!==s.finisher&&r.push(s.finisher),void 0!==s.elements){e=s.elements;for(var a=0;a<e.length-1;a++)for(var n=a+1;n<e.length;n++)if(e[a].key===e[n].key&&e[a].placement===e[n].placement)throw new TypeError("Duplicated element ("+e[a].key+")")}}return{elements:e,finishers:r}},fromElementDescriptor:function(e){var t={kind:e.kind,key:e.key,placement:e.placement,descriptor:e.descriptor};return Object.defineProperty(t,Symbol.toStringTag,{value:"Descriptor",configurable:!0}),"field"===e.kind&&(t.initializer=e.initializer),t},toElementDescriptors:function(e){var t;if(void 0!==e)return(t=e,function(e){if(Array.isArray(e))return e}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(e,t){if(e){if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?y(e,t):void 0}}(t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map((function(e){var t=this.toElementDescriptor(e);return this.disallowProperty(e,"finisher","An element descriptor"),this.disallowProperty(e,"extras","An element descriptor"),t}),this)},toElementDescriptor:function(e){var t=String(e.kind);if("method"!==t&&"field"!==t)throw new TypeError('An element descriptor\'s .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "'+t+'"');var r=v(e.key),i=String(e.placement);if("static"!==i&&"prototype"!==i&&"own"!==i)throw new TypeError('An element descriptor\'s .placement property must be one of "static", "prototype" or "own", but a decorator created an element descriptor with .placement "'+i+'"');var o=e.descriptor;this.disallowProperty(e,"elements","An element descriptor");var s={kind:t,key:r,placement:i,descriptor:Object.assign({},o)};return"field"!==t?this.disallowProperty(e,"initializer","A method descriptor"):(this.disallowProperty(o,"get","The property descriptor of a field descriptor"),this.disallowProperty(o,"set","The property descriptor of a field descriptor"),this.disallowProperty(o,"value","The property descriptor of a field descriptor"),s.initializer=e.initializer),s},toElementFinisherExtras:function(e){return{element:this.toElementDescriptor(e),finisher:b(e,"finisher"),extras:this.toElementDescriptors(e.extras)}},fromClassDescriptor:function(e){var t={kind:"class",elements:e.map(this.fromElementDescriptor,this)};return Object.defineProperty(t,Symbol.toStringTag,{value:"Descriptor",configurable:!0}),t},toClassDescriptor:function(e){var t=String(e.kind);if("class"!==t)throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator created a class descriptor with .kind "'+t+'"');this.disallowProperty(e,"key","A class descriptor"),this.disallowProperty(e,"placement","A class descriptor"),this.disallowProperty(e,"descriptor","A class descriptor"),this.disallowProperty(e,"initializer","A class descriptor"),this.disallowProperty(e,"extras","A class descriptor");var r=b(e,"finisher");return{elements:this.toElementDescriptors(e.elements),finisher:r}},runClassFinishers:function(e,t){for(var r=0;r<t.length;r++){var i=(0,t[r])(e);if(void 0!==i){if("function"!=typeof i)throw new TypeError("Finishers must return a constructor.");e=i}}return e},disallowProperty:function(e,t,r){if(void 0!==e[t])throw new TypeError(r+" can't have a ."+t+" property.")}};return e}function p(e){var t,r=v(e.key);"method"===e.kind?t={value:e.value,writable:!0,configurable:!0,enumerable:!1}:"get"===e.kind?t={get:e.value,configurable:!0,enumerable:!1}:"set"===e.kind?t={set:e.value,configurable:!0,enumerable:!1}:"field"===e.kind&&(t={configurable:!0,writable:!0,enumerable:!0});var i={kind:"field"===e.kind?"field":"method",key:r,placement:e.static?"static":"field"===e.kind?"own":"prototype",descriptor:t};return e.decorators&&(i.decorators=e.decorators),"field"===e.kind&&(i.initializer=e.value),i}function m(e,t){void 0!==e.descriptor.get?t.descriptor.get=e.descriptor.get:t.descriptor.set=e.descriptor.set}function g(e){return e.decorators&&e.decorators.length}function f(e){return void 0!==e&&!(void 0===e.value&&void 0===e.writable)}function b(e,t){var r=e[t];if(void 0!==r&&"function"!=typeof r)throw new TypeError("Expected '"+t+"' to be a function");return r}function v(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=new Array(t);r<t;r++)i[r]=e[r];return i}function w(e,t,r){return(w="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,r){var i=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=_(e)););return e}(e,t);if(i){var o=Object.getOwnPropertyDescriptor(i,t);return o.get?o.get.call(r):o.value}})(e,t,r||e)}function _(e){return(_=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}const k=[{label:"Color",value:"color"},{label:"Temperature",value:d.JM.COLOR_TEMP}];!function(e,t,r,i){var o=u();if(i)for(var s=0;s<i.length;s++)o=i[s](o);var a=t((function(e){o.initializeInstanceElements(e,n.elements)}),r),n=o.decorateClass(function(e){for(var t=[],r=function(e){return"method"===e.kind&&e.key===s.key&&e.placement===s.placement},i=0;i<e.length;i++){var o,s=e[i];if("method"===s.kind&&(o=t.find(r)))if(f(s.descriptor)||f(o.descriptor)){if(g(s)||g(o))throw new ReferenceError("Duplicated methods ("+s.key+") can't be decorated.");o.descriptor=s.descriptor}else{if(g(s)){if(g(o))throw new ReferenceError("Decorators can't be placed on different accessors with for the same property ("+s.key+").");o.decorators=s.decorators}m(s,o)}else t.push(s)}return t}(a.d.map(p)),e);o.initializeClassElements(a.F,n.elements),o.runClassFinishers(a.F,n.finishers)}([(0,o.Mo)("more-info-light")],(function(e,t){class r extends t{constructor(...t){super(...t),e(this)}}return{F:r,d:[{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"stateObj",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_brightnessSliderValue",value:()=>0},{kind:"field",decorators:[(0,o.SB)()],key:"_ctSliderValue",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_cwSliderValue",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_wwSliderValue",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_wvSliderValue",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_colorBrightnessSliderValue",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_brightnessAdjusted",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_hueSegments",value:()=>24},{kind:"field",decorators:[(0,o.SB)()],key:"_saturationSegments",value:()=>8},{kind:"field",decorators:[(0,o.SB)()],key:"_colorPickerColor",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_mode",value:void 0},{kind:"method",key:"render",value:function(){var e;if(!this.hass||!this.stateObj)return i.dy``;const t=(0,d.Fe)(this.stateObj,d.JM.COLOR_TEMP),r=(0,d.Fe)(this.stateObj,d.JM.RGBWW),o=!r&&(0,d.Fe)(this.stateObj,d.JM.RGBW),a=r||o||(0,d.Yk)(this.stateObj);return i.dy`
<div class="content">
${(0,d.sj)(this.stateObj)?i.dy`
<ha-labeled-slider
caption=${this.hass.localize("ui.card.light.brightness")}
icon="hass:brightness-5"
min="1"
max="100"
value=${this._brightnessSliderValue}
=${this._brightnessSliderChanged}
pin
></ha-labeled-slider>
`:""}
${"on"===this.stateObj.state?i.dy`
${t||a?i.dy`<hr />`:""}
${t&&a?i.dy`<ha-button-toggle-group
fullWidth
.buttons=${k}
.active=${this._mode}
-changed=${this._modeChanged}
></ha-button-toggle-group>`:""}
${!t||a&&this._mode!==d.JM.COLOR_TEMP?"":i.dy`
<ha-labeled-slider
class="color_temp"
caption=${this.hass.localize("ui.card.light.color_temperature")}
icon="hass:thermometer"
.min=${this.stateObj.attributes.min_mireds}
.max=${this.stateObj.attributes.max_mireds}
.value=${this._ctSliderValue}
=${this._ctSliderChanged}
pin
></ha-labeled-slider>
`}
${!a||t&&"color"!==this._mode?"":i.dy`
<div class="segmentationContainer">
<ha-color-picker
class="color"
=${this._colorPicked}
.desiredRgbColor=${this._colorPickerColor}
throttle="500"
.hueSegments=${this._hueSegments}
.saturationSegments=${this._saturationSegments}
>
</ha-color-picker>
<ha-icon-button
icon="hass:palette"
=${this._segmentClick}
class="segmentationButton"
></ha-icon-button>
</div>
${o||r?i.dy`<ha-labeled-slider
.caption=${this.hass.localize("ui.card.light.color_brightness")}
icon="hass:brightness-7"
max="100"
.value=${this._colorBrightnessSliderValue}
=${this._colorBrightnessSliderChanged}
pin
></ha-labeled-slider>`:""}
${o?i.dy`
<ha-labeled-slider
.caption=${this.hass.localize("ui.card.light.white_value")}
icon="hass:file-word-box"
max="100"
.name=${"wv"}
.value=${this._wvSliderValue}
=${this._wvSliderChanged}
pin
></ha-labeled-slider>
`:""}
${r?i.dy`
<ha-labeled-slider
.caption=${this.hass.localize("ui.card.light.cold_white_value")}
icon="hass:file-word-box-outline"
max="100"
.name=${"cw"}
.value=${this._cwSliderValue}
=${this._wvSliderChanged}
pin
></ha-labeled-slider>
<ha-labeled-slider
.caption=${this.hass.localize("ui.card.light.warm_white_value")}
icon="hass:file-word-box"
max="100"
.name=${"ww"}
.value=${this._wwSliderValue}
=${this._wvSliderChanged}
pin
></ha-labeled-slider>
`:""}
`}
${(0,s.e)(this.stateObj,d.rs)&&null!==(e=this.stateObj.attributes.effect_list)&&void 0!==e&&e.length?i.dy`
<hr />
<ha-paper-dropdown-menu
.label=${this.hass.localize("ui.card.light.effect")}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.stateObj.attributes.effect||""}
-select=${this._effectChanged}
attr-for-selected="item-name"
>${this.stateObj.attributes.effect_list.map((e=>i.dy`
<paper-item .itemName=${e}
>${e}</paper-item
>
`))}
</paper-listbox>
</ha-paper-dropdown-menu>
`:""}
`:""}
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,entity_id,supported_color_modes,color_mode"
></ha-attributes>
</div>
`}},{kind:"method",key:"willUpdate",value:function(e){if(w(_(r.prototype),"willUpdate",this).call(this,e),!e.has("stateObj"))return;const t=this.stateObj,i=e.get("stateObj");if("on"===t.state){(null==i?void 0:i.entity_id)===t.entity_id&&(null==i?void 0:i.state)===t.state||(this._mode=(0,d.Pj)(this.stateObj)?"color":d.JM.COLOR_TEMP);let e=100;if(this._brightnessAdjusted=void 0,t.attributes.color_mode===d.JM.RGB&&!(0,d.Fe)(t,d.JM.RGBWW)&&!(0,d.Fe)(t,d.JM.RGBW)){const r=Math.max(...t.attributes.rgb_color);r<255&&(this._brightnessAdjusted=r,e=this._brightnessAdjusted/255*100)}this._brightnessSliderValue=Math.round(t.attributes.brightness*e/255),this._ctSliderValue=t.attributes.color_temp,this._wvSliderValue=t.attributes.color_mode===d.JM.RGBW?Math.round(100*t.attributes.rgbw_color[3]/255):void 0,this._cwSliderValue=t.attributes.color_mode===d.JM.RGBWW?Math.round(100*t.attributes.rgbww_color[3]/255):void 0,this._wwSliderValue=t.attributes.color_mode===d.JM.RGBWW?Math.round(100*t.attributes.rgbww_color[4]/255):void 0;const r=(0,d.cE)(t);this._colorBrightnessSliderValue=r?Math.round(100*Math.max(...r.slice(0,3))/255):void 0,this._colorPickerColor=null==r?void 0:r.slice(0,3)}else this._brightnessSliderValue=0}},{kind:"method",key:"_modeChanged",value:function(e){this._mode=e.detail.value}},{kind:"method",key:"_effectChanged",value:function(e){const t=e.detail.item.itemName;t&&this.stateObj.attributes.effect!==t&&this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,effect:t})}},{kind:"method",key:"_brightnessSliderChanged",value:function(e){const t=Number(e.target.value);if(!isNaN(t))if(this._brightnessSliderValue=t,this._brightnessAdjusted){const e=this.stateObj.attributes.rgb_color||[0,0,0];this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,brightness_pct:t,rgb_color:this._adjustColorBrightness(e,this._brightnessAdjusted,!0)})}else this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,brightness_pct:t})}},{kind:"method",key:"_ctSliderChanged",value:function(e){const t=Number(e.target.value);isNaN(t)||(this._ctSliderValue=t,this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,color_temp:t}))}},{kind:"method",key:"_wvSliderChanged",value:function(e){const t=e.target;let r=Number(t.value);const i=t.name;if(isNaN(r))return;"wv"===i?this._wvSliderValue=r:"cw"===i?this._cwSliderValue=r:"ww"===i&&(this._wwSliderValue=r),r=Math.min(255,Math.round(255*r/100));const o=(0,d.cE)(this.stateObj);if("wv"===i){const e=o||[0,0,0,0];return e[3]=r,void this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,rgbw_color:e})}const s=o||[0,0,0,0,0];for(;s.length<5;)s.push(0);s["cw"===i?3:4]=r,this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,rgbww_color:s})}},{kind:"method",key:"_colorBrightnessSliderChanged",value:function(e){var t;const r=e.target;let i=Number(r.value);if(isNaN(i))return;const o=this._colorBrightnessSliderValue;this._colorBrightnessSliderValue=i,i=255*i/100;const s=(null===(t=(0,d.cE)(this.stateObj))||void 0===t?void 0:t.slice(0,3))||[255,255,255];this._setRgbWColor(this._adjustColorBrightness(o?this._adjustColorBrightness(s,255*o/100,!0):s,i))}},{kind:"method",key:"_segmentClick",value:function(){24===this._hueSegments&&8===this._saturationSegments?(this._hueSegments=0,this._saturationSegments=0):(this._hueSegments=24,this._saturationSegments=8)}},{kind:"method",key:"_adjustColorBrightness",value:function(e,t,r=!1){if(void 0!==t&&255!==t){let i=t/255;r&&(i=1/i),e[0]=Math.min(255,Math.round(e[0]*i)),e[1]=Math.min(255,Math.round(e[1]*i)),e[2]=Math.min(255,Math.round(e[2]*i))}return e}},{kind:"method",key:"_setRgbWColor",value:function(e){if((0,d.Fe)(this.stateObj,d.JM.RGBWW)){const t=this.stateObj.attributes.rgbww_color?[...this.stateObj.attributes.rgbww_color]:[0,0,0,0,0];this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,rgbww_color:e.concat(t.slice(3))})}else if((0,d.Fe)(this.stateObj,d.JM.RGBW)){const t=this.stateObj.attributes.rgbw_color?[...this.stateObj.attributes.rgbw_color]:[0,0,0,0];this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,rgbw_color:e.concat(t.slice(3))})}}},{kind:"method",key:"_colorPicked",value:function(e){if(this._colorPickerColor=[e.detail.rgb.r,e.detail.rgb.g,e.detail.rgb.b],(0,d.Fe)(this.stateObj,d.JM.RGBWW)||(0,d.Fe)(this.stateObj,d.JM.RGBW))this._setRgbWColor(this._colorBrightnessSliderValue?this._adjustColorBrightness([e.detail.rgb.r,e.detail.rgb.g,e.detail.rgb.b],255*this._colorBrightnessSliderValue/100):[e.detail.rgb.r,e.detail.rgb.g,e.detail.rgb.b]);else if((0,d.Fe)(this.stateObj,d.JM.RGB)){const t=[e.detail.rgb.r,e.detail.rgb.g,e.detail.rgb.b];this._brightnessAdjusted?this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,brightness_pct:this._brightnessSliderValue,rgb_color:this._adjustColorBrightness(t,this._brightnessAdjusted,!0)}):this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,rgb_color:t})}else this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,hs_color:[e.detail.hs.h,100*e.detail.hs.s]})}},{kind:"get",static:!0,key:"styles",value:function(){return i.iv`
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.content > * {
width: 100%;
}
.color_temp {
--ha-slider-background: -webkit-linear-gradient(
right,
rgb(255, 160, 0) 0%,
white 50%,
rgb(166, 209, 255) 100%
);
/* The color temp minimum value shouldn't be rendered differently. It's not "off". */
--paper-slider-knob-start-border-color: var(--primary-color);
margin-bottom: 4px;
}
.segmentationContainer {
position: relative;
max-height: 500px;
display: flex;
justify-content: center;
}
ha-button-toggle-group {
margin-bottom: 8px;
}
ha-color-picker {
--ha-color-picker-wheel-borderwidth: 5;
--ha-color-picker-wheel-bordercolor: white;
--ha-color-picker-wheel-shadow: none;
--ha-color-picker-marker-borderwidth: 2;
--ha-color-picker-marker-bordercolor: white;
}
.segmentationButton {
position: absolute;
top: 5%;
left: 0;
color: var(--secondary-text-color);
}
paper-item {
cursor: pointer;
}
hr {
border-color: var(--divider-color);
border-bottom: none;
margin: 16px 0;
}
`}}]}}),i.oi)}}]);
//# sourceMappingURL=chunk.51885643ce8d2ed084fd.js.map