UNPKG

iobroker.lovelace

Version:

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

1 lines 36.7 kB
export const __rspack_esm_id=63373;export const __rspack_esm_ids=[63373];export const __webpack_modules__={80140(t,e,i){var o=i(62826),s=i(26183),a=i(5124),r=i(22441),l=i(6412),n=i(89784),h=i(79468),d=i(16629),c=i(1087);function u(t,e){return[Math.sqrt(t*t+e*e),Math.atan2(e,t)]}function p(t,e){return[Math.cos(e)*t,Math.sin(e)*t]}function g(t){return t/360*2*Math.PI}function _(t,e,i,o,s,a){return null!=e?(0,d.E7)([...t,e]):null!=i&&null!==o?(0,d.lf)([...t,i,o],s,a):t}class v extends a.WF{firstUpdated(t){super.firstUpdated(t),this._setupListeners(),this._generateColorWheel()}_generateColorWheel(){!function(t,e,i,o,s,a,r=255){const l=t.canvas.width/2;t.clearRect(0,0,t.canvas.width,t.canvas.height),t.beginPath();const n=t.canvas.width/2,d=t.canvas.width/2;for(let c=0;c<360;c+=1){const u=g(c-.5),p=g(c+1.5);t.beginPath(),t.moveTo(n,d),t.arc(n,d,l,u,p),t.closePath();const v=t.createRadialGradient(n,d,0,n,d,l),b=(0,h.v2)(_((0,h.hT)([c,0,r]),e,i,o,s,a)),m=(0,h.v2)(_((0,h.hT)([c,1,r]),e,i,o,s,a));v.addColorStop(0,b),v.addColorStop(1,m),t.fillStyle=v,t.fill()}}(this._canvas.getContext("2d"),this.wv,this.cw,this.ww,this.minKelvin,this.maxKelvin,this.colorBrightness)}connectedCallback(){super.connectedCallback(),this._setupListeners()}disconnectedCallback(){super.disconnectedCallback(),this._destroyListeners()}updated(t){super.updated(t),(t.has("colorBrightness")||t.has("wv")||t.has("ww")||t.has("cw")||t.has("minKelvin")||t.has("maxKelvin"))&&this._generateColorWheel(),t.has("value")&&(this._localValue?.[0]===this.value?.[0]&&this._localValue?.[1]===this.value?.[1]||this._resetPosition())}_setupListeners(){if(this._canvas&&!this._mc){let t;this._mc=new s.mS(this._canvas),this._mc.add(new s.uq({direction:s.ge,enable:!0})),this._mc.add(new s.Cx({event:"singletap"})),this._mc.on("panstart",e=>{this.disabled||(this._pressed=e.pointerType,t=this._cursorPosition)}),this._mc.on("pancancel",()=>{this.disabled||(this._pressed=void 0,this._cursorPosition=t)}),this._mc.on("panmove",t=>{this.disabled||(this._cursorPosition=this._getPositionFromEvent(t),this._localValue=this._getValueFromCoord(...this._cursorPosition),(0,c.r)(this,"cursor-moved",{value:this._localValue}))}),this._mc.on("panend",t=>{this.disabled||(this._pressed=void 0,this._cursorPosition=this._getPositionFromEvent(t),this._localValue=this._getValueFromCoord(...this._cursorPosition),(0,c.r)(this,"cursor-moved",{value:void 0}),(0,c.r)(this,"value-changed",{value:this._localValue}))}),this._mc.on("singletap",t=>{this.disabled||(this._cursorPosition=this._getPositionFromEvent(t),this._localValue=this._getValueFromCoord(...this._cursorPosition),(0,c.r)(this,"value-changed",{value:this._localValue}))})}}_resetPosition(){if(void 0===this.value)return this._cursorPosition=void 0,void(this._localValue=void 0);this._cursorPosition=this._getCoordsFromValue(this.value),this._localValue=this.value}_destroyListeners(){this._mc&&(this._mc.destroy(),this._mc=void 0)}render(){const t=this.renderSize||400,e=t*window.devicePixelRatio,i=void 0!==this._localValue?_((0,h.hT)([this._localValue[0],this._localValue[1],this.colorBrightness??255]),this.wv,this.cw,this.ww):[255,255,255],[o,s]=this._cursorPosition??[0,0],r=`${(o+1)*t/2}px, ${(s+1)*t/2}px`,d=this._pressed?"touch"===this._pressed?"2.5":"1.5":"1",c="touch"===this._pressed?`0px, -${t/16}px`:"0px, 0px";return a.qy` <div class="container ${(0,l.H)({pressed:Boolean(this._pressed)})}"> <canvas id="canvas" .width="${e}" .height="${e}"></canvas> <svg id="interaction" viewBox="0 0 ${t} ${t}" overflow="visible"> <defs>${this.renderSVGFilter()}</defs> <g style="${(0,n.W)({fill:(0,h.v2)(i),transform:`translate(${r})`})}" class="cursor"> <circle cx="0" cy="0" r="16" style="${(0,n.W)({fill:(0,h.v2)(i),transform:`translate(${c}) scale(${d})`,visibility:this._cursorPosition?void 0:"hidden"})}"></circle> </g> </svg> </div> `}renderSVGFilter(){return a.JW` <filter id="marker-shadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox"> <feDropShadow dx="0" dy="1" stdDeviation="2" flood-opacity="0.3" flood-color="rgba(0, 0, 0, 1)"/> <feDropShadow dx="0" dy="1" stdDeviation="3" flood-opacity="0.15" flood-color="rgba(0, 0, 0, 1)"/> </filter> `}constructor(...t){super(...t),this.disabled=!1,this._getCoordsFromValue=t=>{const e=g(t[0]),i=Math.min(t[1],1),[o,s]=p(i,e);return[o,s]},this._getValueFromCoord=(t,e)=>{const[i,o]=u(t,e);return[(Math.round(o/(2*Math.PI)*360)%360+360)%360,Math.round(100*Math.min(i,1))/100]},this._getPositionFromEvent=t=>{const e=t.center.x,i=t.center.y,o=t.target.getBoundingClientRect(),s=o.left,a=o.top,r=2*(e-s)/t.target.clientWidth-1,l=2*(i-a)/t.target.clientHeight-1,[n,h]=u(r,l),[d,c]=p(Math.min(1,n),h);return[d,c]}}}v.styles=a.AH`:host{display:block;outline:0}.container{position:relative;width:100%;height:100%;display:flex}canvas{width:100%;height:100%;object-fit:contain;border-radius:var(--ha-border-radius-circle);cursor:pointer}svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}circle{fill:black;stroke:white;stroke-width:2;filter:url(#marker-shadow)}.container:not(.pressed) circle{transition:transform .1s ease-in-out,fill .1s ease-in-out}.container:not(.pressed) .cursor{transition:transform .2s ease-in-out}`,(0,o.Cg)([(0,r.MZ)({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),(0,o.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"renderSize",void 0),(0,o.Cg)([(0,r.MZ)({type:Array})],v.prototype,"value",void 0),(0,o.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"colorBrightness",void 0),(0,o.Cg)([(0,r.MZ)({type:Number})],v.prototype,"wv",void 0),(0,o.Cg)([(0,r.MZ)({type:Number})],v.prototype,"cw",void 0),(0,o.Cg)([(0,r.MZ)({type:Number})],v.prototype,"ww",void 0),(0,o.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"minKelvin",void 0),(0,o.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"maxKelvin",void 0),(0,o.Cg)([(0,r.P)("#canvas")],v.prototype,"_canvas",void 0),(0,o.Cg)([(0,r.wk)()],v.prototype,"_pressed",void 0),(0,o.Cg)([(0,r.wk)()],v.prototype,"_cursorPosition",void 0),(0,o.Cg)([(0,r.wk)()],v.prototype,"_localValue",void 0),v=(0,o.Cg)([(0,r.EM)("ha-hs-color-picker")],v)},45100(t,e,i){i.a(t,async function(t,o){try{i.r(e),i.d(e,{HaIconButtonPrev:()=>u});var s=i(62826),a=i(5124),r=i(22441),l=i(63091),n=i(26300),h=t([n]);n=(h.then?(await h)():h)[0];const d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z",c="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";class u extends a.WF{render(){return a.qy` <ha-icon-button .disabled="${this.disabled}" .label="${this.label||this.hass?.localize("ui.common.back")||"Back"}" .path="${this._icon}" .href="${this.href}" .target="${this.target}" .rel="${this.rel}" .download="${this.download}"></ha-icon-button> `}constructor(...t){super(...t),this.disabled=!1,this._icon="rtl"===l.G.document.dir?c:d}}(0,s.Cg)([(0,r.MZ)({attribute:!1})],u.prototype,"hass",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean})],u.prototype,"disabled",void 0),(0,s.Cg)([(0,r.MZ)()],u.prototype,"label",void 0),(0,s.Cg)([(0,r.MZ)()],u.prototype,"href",void 0),(0,s.Cg)([(0,r.MZ)()],u.prototype,"target",void 0),(0,s.Cg)([(0,r.MZ)()],u.prototype,"rel",void 0),(0,s.Cg)([(0,r.MZ)()],u.prototype,"download",void 0),(0,s.Cg)([(0,r.wk)()],u.prototype,"_icon",void 0),u=(0,s.Cg)([(0,r.EM)("ha-icon-button-prev")],u),o()}catch(t){o(t)}})},89321(t,e,i){i.a(t,async function(t,e){try{var o=i(62826),s=i(5124),a=i(22441),r=i(1087),l=(i(47680),i(3449),i(70759)),n=t([l]);l=(n.then?(await n)():n)[0];class h extends s.WF{render(){const t=this._getTitle();return s.qy` ${t?s.qy`<div class="title">${t}</div>`:s.s6} <div class="extra-container"><slot name="extra"></slot></div> <div class="slider-container"> ${this.icon?s.qy`<ha-icon icon="${this.icon}"></ha-icon>`:s.s6} <div class="slider-wrapper"> <ha-slider .min="${this.min}" .max="${this.max}" .step="${this.step}" .labeled="${this.labeled}" .disabled="${this.disabled}" .value="${this.value}" @change="${this._inputChanged}"></ha-slider> </div> </div> ${this.helper?s.qy`<ha-input-helper-text .disabled="${this.disabled}"> ${this.helper} </ha-input-helper-text>`:s.s6} `}_getTitle(){return`${this.caption}${this.caption&&this.required?" *":""}`}_inputChanged(t){(0,r.r)(this,"value-changed",{value:Number(t.target.value)})}constructor(...t){super(...t),this.labeled=!1,this.disabled=!1,this.required=!0,this.min=0,this.max=100,this.step=1,this.extra=!1}}h.styles=s.AH`:host{display:block}.title{margin:5px 0 8px;color:var(--primary-text-color)}.slider-container{display:flex;align-items:center}ha-icon{color:var(--secondary-text-color)}.slider-wrapper{padding:0 8px;display:flex;flex-grow:1;align-items:center;background-image:var(--ha-slider-background);border-radius:var(--ha-border-radius-sm);height:32px}ha-slider{width:100%}`,(0,o.Cg)([(0,a.MZ)({type:Boolean})],h.prototype,"labeled",void 0),(0,o.Cg)([(0,a.MZ)()],h.prototype,"caption",void 0),(0,o.Cg)([(0,a.MZ)({type:Boolean})],h.prototype,"disabled",void 0),(0,o.Cg)([(0,a.MZ)({type:Boolean})],h.prototype,"required",void 0),(0,o.Cg)([(0,a.MZ)({type:Number})],h.prototype,"min",void 0),(0,o.Cg)([(0,a.MZ)({type:Number})],h.prototype,"max",void 0),(0,o.Cg)([(0,a.MZ)({type:Number})],h.prototype,"step",void 0),(0,o.Cg)([(0,a.MZ)()],h.prototype,"helper",void 0),(0,o.Cg)([(0,a.MZ)({type:Boolean})],h.prototype,"extra",void 0),(0,o.Cg)([(0,a.MZ)()],h.prototype,"icon",void 0),(0,o.Cg)([(0,a.MZ)({type:Number})],h.prototype,"value",void 0),h=(0,o.Cg)([(0,a.EM)("ha-labeled-slider")],h),e()}catch(t){e(t)}})},28732(t,e,i){var o=i(62826),s=i(27686),a=i(7731),r=i(5124),l=i(22441);class n extends s.J{renderRipple(){return this.noninteractive?"":super.renderRipple()}static get styles(){return[a.R,r.AH`:host{padding-left:var(--mdc-list-side-padding-left,var(--mdc-list-side-padding,20px));padding-inline-start:var(--mdc-list-side-padding-left,var(--mdc-list-side-padding,20px));padding-right:var(--mdc-list-side-padding-right,var(--mdc-list-side-padding,20px));padding-inline-end:var(--mdc-list-side-padding-right,var(--mdc-list-side-padding,20px))}:host([graphic=avatar]:not([twoLine])),:host([graphic=icon]:not([twoLine])){height:48px}span.material-icons:first-of-type{margin-inline-start:0px!important;margin-inline-end:var(--mdc-list-item-graphic-margin,16px)!important;direction:var(--direction)!important}span.material-icons:last-of-type{margin-inline-start:auto!important;margin-inline-end:0px!important;direction:var(--direction)!important}.mdc-deprecated-list-item__meta{display:var(--mdc-list-item-meta-display);align-items:center;flex-shrink:0}:host([graphic=icon]:not([twoline])) .mdc-deprecated-list-item__graphic{margin-inline-end:var(--mdc-list-item-graphic-margin,20px)!important}:host([multiline-secondary]){height:auto}:host([multiline-secondary]) .mdc-deprecated-list-item__text{padding:8px 0}:host([multiline-secondary]) .mdc-deprecated-list-item__secondary-text{text-overflow:initial;white-space:normal;overflow:auto;display:inline-block;margin-top:10px}:host([multiline-secondary]) .mdc-deprecated-list-item__primary-text{margin-top:10px}:host([multiline-secondary]) .mdc-deprecated-list-item__secondary-text::before{display:none}:host([multiline-secondary]) .mdc-deprecated-list-item__primary-text::before{display:none}:host([disabled]){color:var(--disabled-text-color)}:host([noninteractive]){pointer-events:unset}`,"rtl"===document.dir?r.AH`span.material-icons:first-of-type,span.material-icons:last-of-type{direction:rtl!important;--direction:rtl}`:r.AH``]}}n=(0,o.Cg)([(0,l.EM)("ha-list-item")],n)},3688(t,e,i){var o=i(62826),s=i(5124),a=i(22441),r=i(6412);class l extends s.WF{render(){const t=`items-${this.childElementCount}`;return s.qy` <div class="controls"> <div class="controls-scroll ${(0,r.H)({[t]:!0,multiline:this.childElementCount>=4})}"> <slot></slot> </div> </div> `}}l.styles=s.AH`.controls{display:flex;flex-direction:row;justify-content:center}.controls-scroll{display:flex;flex-direction:row;justify-content:flex-start;gap:var(--ha-space-3);margin:auto;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;margin:-2px calc(var(--ha-space-6) * -1);padding:2px var(--ha-space-6)}.controls-scroll::-webkit-scrollbar{display:none}::slotted(*){min-width:120px;max-width:160px;flex:none}@media all and (hover:hover),all and (min-width:600px) and (min-height:501px){.controls-scroll{justify-content:center;flex-wrap:wrap;width:100%;max-width:450px}.controls-scroll.items-4{max-width:300px}.controls-scroll.items-3 ::slotted(*){max-width:140px}.multiline ::slotted(*){width:140px}}`,l=(0,o.Cg)([(0,a.EM)("ha-more-info-control-select-container")],l)},68877(t,e,i){i(18111),i(22489);var o=i(62826),s=i(5124),a=i(22441),r=i(1087),l=i(22675),n=i(59241),h=i(57264),d=i(65063);i(64841),i(1966);const c=()=>i.e(18344).then(i.bind(i,38043)),u=(t,e)=>new Promise(i=>{const o=e.submit;(0,r.r)(t,"show-dialog",{dialogTag:"dialog-light-color-favorite",dialogImport:c,dialogParams:{...e,submit:t=>{i(t),o&&o(t)}}})});class p extends s.WF{updated(t){t.has("entry")&&this.entry&&(this.entry.options?.light?.favorite_colors?this._favoriteColors=this.entry.options.light.favorite_colors:this.stateObj&&(this._favoriteColors=(0,h.F9)(this.stateObj)))}_move(t,e){const i=this._favoriteColors.concat(),o=i.splice(t,1)[0];i.splice(e,0,o),this._favoriteColors=i,this._save(i)}_apply(t){const e=this._favoriteColors[t];this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,...e})}async _save(t){const e=await(0,n.G_)(this.hass,this.entry.entity_id,{options_domain:"light",options:{favorite_colors:t}});(0,r.r)(this,"entity-entry-updated",e.entity_entry)}render(){return s.qy` <ha-more-info-favorites .items="${this._favoriteColors}" .renderItem="${this._renderFavorite}" .deleteLabel="${this._deleteLabel}" .editMode="${this.editMode}" .disabled="${this.stateObj.state===l.Hh}" .isAdmin="${Boolean(this.hass.user?.is_admin)}" .addLabel="${this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.add")}" .doneLabel="${this.hass.localize("ui.dialogs.more_info_control.exit_edit_mode")}" @favorite-item-action="${this._handleFavoriteAction}" @favorite-item-moved="${this._handleFavoriteMoved}" @favorite-item-delete="${this._handleFavoriteDelete}" @favorite-item-add="${this._handleFavoriteAdd}" @favorite-item-done="${this._handleFavoriteDone}"></ha-more-info-favorites> `}constructor(...t){super(...t),this._favoriteColors=[],this._add=async()=>{const t=await u(this,{entry:this.entry,title:this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.add_title")});if(!t)return;const e=[...this._favoriteColors,t];this._save(e)},this._edit=async t=>{(0,r.r)(this,"favorite-color-edit-started"),this._apply(t);const e=await u(this,{entry:this.entry,initialColor:this._favoriteColors[t],title:this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.edit_title")});if(!e)return void this._apply(t);const i=[...this._favoriteColors];i[t]=e,this._save(i)},this._delete=async t=>{if(!await(0,d.dk)(this,{destructive:!0,title:this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.delete_confirm_title"),text:this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.delete_confirm_text"),confirmText:this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.delete_confirm_action")}))return;const e=this._favoriteColors.filter((e,i)=>t!==i);this._save(e)},this._renderFavorite=(t,e,i)=>s.qy`<ha-favorite-color-button .label="${this.hass.localize("ui.dialogs.more_info_control.light.favorite_color."+(i?"edit":"set"),{number:e+1})}" .disabled="${this.stateObj.state===l.Hh}" .color="${t}"></ha-favorite-color-button>`,this._deleteLabel=t=>this.hass.localize("ui.dialogs.more_info_control.light.favorite_color.delete",{number:t+1}),this._handleFavoriteAction=t=>{t.stopPropagation();const{action:e,index:i}=t.detail;"hold"===e&&this.hass.user?.is_admin?(0,r.r)(this,"toggle-edit-mode",!0):this.editMode?this._edit(i):this._apply(i)},this._handleFavoriteMoved=t=>{t.stopPropagation(),this._move(t.detail.oldIndex,t.detail.newIndex)},this._handleFavoriteDelete=t=>{t.stopPropagation(),this._delete(t.detail.index)},this._handleFavoriteAdd=t=>{t.stopPropagation(),this._add()},this._handleFavoriteDone=t=>{t.stopPropagation(),(0,r.r)(this,"toggle-edit-mode",!1)}}}(0,o.Cg)([(0,a.MZ)({attribute:!1})],p.prototype,"hass",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],p.prototype,"stateObj",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],p.prototype,"entry",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],p.prototype,"editMode",void 0),(0,o.Cg)([(0,a.wk)()],p.prototype,"_favoriteColors",void 0),p=(0,o.Cg)([(0,a.EM)("ha-more-info-light-favorite-colors")],p)},43612(t,e,i){i.a(t,async function(t,e){try{i(44114),i(18111),i(81148);var o=i(62826),s=i(5124),a=i(22441),r=i(79468),l=i(1087),n=i(77796),h=(i(80140),i(47680),i(45100)),d=i(89321),c=i(57264),u=t([h,d]);[h,d]=u.then?(await u)():u;const p="M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";class g extends s.WF{render(){if(!this.stateObj)return s.s6;const t=(0,c.ti)(this.stateObj,c.NC.RGBWW),e=!t&&(0,c.ti)(this.stateObj,c.NC.RGBW),i=this._hsPickerValue?(0,r.v2)((0,r.hT)([this._hsPickerValue[0],this._hsPickerValue[1],(this._colorBrightnessSliderValue??100)/100*255])):"";return s.qy` <div class="color-container"> <label class="native-color-picker"> <input type="color" .value="${i??""}" @input="${this._nativeColorChanged}"> <ha-svg-icon .path="${p}"></ha-svg-icon> </label> <ha-hs-color-picker @value-changed="${this._hsColorChanged}" @cursor-moved="${this._hsColorCursorMoved}" .value="${this._hsPickerValue}" .colorBrightness="${null!=this._colorBrightnessSliderValue?255*this._colorBrightnessSliderValue/100:void 0}" .wv="${null!=this._wvSliderValue?255*this._wvSliderValue/100:void 0}" .ww="${null!=this._wwSliderValue?255*this._wwSliderValue/100:void 0}" .cw="${null!=this._cwSliderValue?255*this._cwSliderValue/100:void 0}" .minKelvin="${this.stateObj.attributes.min_color_temp_kelvin}" .maxKelvin="${this.stateObj.attributes.max_color_temp_kelvin}"> </ha-hs-color-picker> </div> ${e||t?s.qy`<ha-labeled-slider labeled .caption="${this.hass.localize("ui.card.light.color_brightness")}" icon="mdi:brightness-7" min="0" max="100" .value="${this._colorBrightnessSliderValue}" @value-changed="${this._colorBrightnessSliderChanged}"></ha-labeled-slider>`:s.s6} ${e?s.qy` <ha-labeled-slider labeled .caption="${this.hass.localize("ui.card.light.white_value")}" icon="mdi:file-word-box" min="0" max="100" .name="${"wv"}" .value="${this._wvSliderValue}" @value-changed="${this._wvSliderChanged}"></ha-labeled-slider> `:s.s6} ${t?s.qy` <ha-labeled-slider labeled .caption="${this.hass.localize("ui.card.light.cold_white_value")}" icon="mdi:file-word-box-outline" min="0" max="100" .name="${"cw"}" .value="${this._cwSliderValue}" @value-changed="${this._wvSliderChanged}"></ha-labeled-slider> <ha-labeled-slider labeled .caption="${this.hass.localize("ui.card.light.warm_white_value")}" icon="mdi:file-word-box" min="0" max="100" .name="${"ww"}" .value="${this._wwSliderValue}" @value-changed="${this._wvSliderChanged}"></ha-labeled-slider> `:s.s6} `}_updateSliderValues(){const t=this.stateObj;if("on"===t.state){if(this._brightnessAdjusted=void 0,t.attributes.color_mode===c.NC.RGB&&t.attributes.rgb_color&&!(0,c.ti)(t,c.NC.RGBWW)&&!(0,c.ti)(t,c.NC.RGBW)){const e=Math.max(...t.attributes.rgb_color);e<255&&(this._brightnessAdjusted=e)}this._wvSliderValue=t.attributes.color_mode===c.NC.RGBW&&t.attributes.rgbw_color?Math.round(100*t.attributes.rgbw_color[3]/255):void 0,this._cwSliderValue=t.attributes.color_mode===c.NC.RGBWW&&t.attributes.rgbww_color?Math.round(100*t.attributes.rgbww_color[3]/255):void 0,this._wwSliderValue=t.attributes.color_mode===c.NC.RGBWW&&t.attributes.rgbww_color?Math.round(100*t.attributes.rgbww_color[4]/255):void 0;const e=(0,c.BD)(t);this._colorBrightnessSliderValue=e?Math.round(100*Math.max(...e.slice(0,3))/255):void 0,this._hsPickerValue=e?(0,r.VD)(e.slice(0,3)):void 0}else this._hsPickerValue=void 0,this._wvSliderValue=void 0,this._cwSliderValue=void 0,this._wwSliderValue=void 0}willUpdate(t){super.willUpdate(t),this._isInteracting||!t.has("entityId")&&!t.has("hass")||this._updateSliderValues()}_hsColorCursorMoved(t){const e=t.detail.value;this._isInteracting=void 0!==e,void 0!==e&&(this._hsPickerValue=e,this._throttleUpdateColor())}_updateColor(){const t=[this._hsPickerValue[0],100*this._hsPickerValue[1]],e=(0,r.BA)(this._hsPickerValue);if((0,c.ti)(this.stateObj,c.NC.RGBWW)||(0,c.ti)(this.stateObj,c.NC.RGBW))this._setRgbWColor(this._colorBrightnessSliderValue?this._adjustColorBrightness(e,255*this._colorBrightnessSliderValue/100):e);else if((0,c.ti)(this.stateObj,c.NC.RGB))if(this._brightnessAdjusted){const t=this._brightnessAdjusted/255*100,i=Math.round((this.stateObj.attributes.brightness||0)*t/255),o=this._adjustColorBrightness(e,this._brightnessAdjusted,!0);this._applyColor({rgb_color:o},{brightness_pct:i})}else this._applyColor({rgb_color:e});else this._applyColor({hs_color:t})}_nativeColorChanged(t){const e=(0,r.xp)(t.currentTarget.value),i=(0,r.bi)(e);this._hsPickerValue=[i[0],i[1]],((0,c.ti)(this.stateObj,c.NC.RGBW)||(0,c.ti)(this.stateObj,c.NC.RGBWW))&&(this._colorBrightnessSliderValue=i[2]/2.55),this._throttleUpdateColor()}_hsColorChanged(t){t.detail.value&&(this._hsPickerValue=t.detail.value,this._updateColor())}_wvSliderChanged(t){const e=t.detail;let i=Number(e.value);const o=t.target.name;if(isNaN(i))return;"wv"===o?this._wvSliderValue=i:"cw"===o?this._cwSliderValue=i:"ww"===o&&(this._wwSliderValue=i),i=Math.min(255,Math.round(255*i/100));const s=(0,c.BD)(this.stateObj);if("wv"===o){const t=s||[0,0,0,0];return t[3]=i,void this._applyColor({rgbw_color:t})}const a=s||[0,0,0,0,0];for(;a.length<5;)a.push(0);a["cw"===o?3:4]=i,this._applyColor({rgbww_color:a})}_applyColor(t,e){(0,l.r)(this,"color-changed",t),this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,...t,...e})}_colorBrightnessSliderChanged(t){const e=t.detail;let i=Number(e.value);if(isNaN(i))return;const o=this._colorBrightnessSliderValue;this._colorBrightnessSliderValue=i,i=255*i/100;const s=(0,c.BD)(this.stateObj)?.slice(0,3)||[255,255,255];this._setRgbWColor(this._adjustColorBrightness(o?this._adjustColorBrightness(s,255*o/100,!0):s,i))}_adjustColorBrightness(t,e,i=!1){if(t.every(t=>0===t)&&(t[0]=255,t[1]=255,t[2]=255),void 0!==e&&255!==e){let o=e/255;i&&(o=1/o),t[0]=Math.min(255,Math.round(t[0]*o)),t[1]=Math.min(255,Math.round(t[1]*o)),t[2]=Math.min(255,Math.round(t[2]*o))}return t}_setRgbWColor(t){if((0,c.ti)(this.stateObj,c.NC.RGBWW)){const e=this.stateObj.attributes.rgbww_color?[...this.stateObj.attributes.rgbww_color]:[0,0,0,0,0],i=t.concat(e.slice(3));this._applyColor({rgbww_color:i})}else if((0,c.ti)(this.stateObj,c.NC.RGBW)){const e=this.stateObj.attributes.rgbw_color?[...this.stateObj.attributes.rgbw_color]:[0,0,0,0],i=t.concat(e.slice(3));this._applyColor({rgbw_color:i})}}static get styles(){return[s.AH`:host{display:flex;flex-direction:column}.native-color-picker{position:absolute;top:0;right:0;inset-inline-end:0;inset-inline-start:initial;z-index:1}.native-color-picker ha-svg-icon{pointer-events:none;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;padding:0}input[type=color]{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:0;display:block;width:var(--ha-icon-button-size,48px);height:var(--ha-icon-button-size,48px);padding:calc((var(--ha-icon-button-size,48px) - var(--mdc-icon-size,24px))/ 2);background-color:transparent;border-radius:calc(var(--ha-icon-button-size,48px)/ 2);overflow:hidden;cursor:pointer;transition:background-color 180ms ease-in-out}input[type=color]:focus-visible,input[type=color]:hover{background-color:rgb(127,127,127,.15)}input[type=color]::-webkit-color-swatch-wrapper{display:none;background:0 0}input[type=color]::-moz-color-swatch{display:none}input[type=color]::-webkit-color-swatch{border:none}.color-container{position:relative}ha-hs-color-picker{height:45vh;max-height:320px;min-height:200px}ha-labeled-slider{width:100%}hr{border-color:var(--divider-color);border-bottom:none;margin:var(--ha-space-4) 0}`]}constructor(...t){super(...t),this._throttleUpdateColor=(0,n.n)(()=>this._updateColor(),500)}}(0,o.Cg)([(0,a.MZ)({attribute:!1})],g.prototype,"hass",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],g.prototype,"stateObj",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_cwSliderValue",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_wwSliderValue",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_wvSliderValue",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_colorBrightnessSliderValue",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_brightnessAdjusted",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_hsPickerValue",void 0),(0,o.Cg)([(0,a.wk)()],g.prototype,"_isInteracting",void 0),g=(0,o.Cg)([(0,a.EM)("light-color-rgb-picker")],g),e()}catch(t){e(t)}})},9884(t,e,i){i.a(t,async function(t,o){try{i.r(e);i(18111),i(61701);var s=i(62826),a=i(5124),r=i(22441),l=i(82286),n=i(36248),h=i(56048),d=(i(39826),i(62501)),c=(i(28732),i(22675)),u=i(59241),p=i(88360),g=i(57264),_=(i(78791),i(43524)),v=(i(3688),i(6531)),b=(i(1966),i(68877),i(43612)),m=i(68737),f=i(37863),y=t([n,h,d,_,v,b,m]);[n,h,d,_,v,b,m]=y.then?(await y)():y;const w="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z",C="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74",$="M15.5,17H14L12,9.5L10,17H8.5L6.1,7H7.8L9.34,14.5L11.3,7H12.7L14.67,14.5L16.2,7H17.9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z",x="M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z",M="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z",O="M16.56,5.44L15.11,6.89C16.84,7.94 18,9.83 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12C6,9.83 7.16,7.94 8.88,6.88L7.44,5.44C5.36,6.88 4,9.28 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12C20,9.28 18.64,6.88 16.56,5.44M13,3H11V13H13";class j extends a.WF{updated(t){t.has("stateObj")&&(this._effect=this.stateObj?.attributes.effect)}_setMainControl(t){t.stopPropagation(),this._mainControl=t.currentTarget.control}_resetMainControl(t){t.stopPropagation(),this._mainControl="brightness"}get _stateOverride(){if(this.stateObj?.attributes.brightness)return this.hass.formatEntityAttributeValue(this.stateObj,"brightness")}render(){if(!this.hass||!this.stateObj)return a.s6;const t=(0,g.ti)(this.stateObj,g.NC.COLOR_TEMP),e=(0,g.Aw)(this.stateObj),i=(0,g.c9)(this.stateObj),o=(0,g.ti)(this.stateObj,g.NC.WHITE),s=(0,l.$)(this.stateObj,g.sq.EFFECT),r=Boolean(this.entry&&(this.editMode||(0,g.n6)(this.stateObj)&&(0,u.fs)(this.entry.options?.light?.favorite_colors)));return a.qy` <ha-more-info-state-header .hass="${this.hass}" .stateObj="${this.stateObj}" .stateOverride="${this._stateOverride}"></ha-more-info-state-header> <div class="controls"> ${i?a.s6:a.qy` <ha-state-control-toggle .stateObj="${this.stateObj}" .hass="${this.hass}" .iconPathOn="${M}" .iconPathOff="${x}"></ha-state-control-toggle> `} ${t||e||i?a.qy` ${i&&"brightness"===this._mainControl?a.qy` <ha-state-control-light-brightness .stateObj="${this.stateObj}" .hass="${this.hass}"> </ha-state-control-light-brightness> `:a.s6} ${e&&"color"===this._mainControl?a.qy` <light-color-rgb-picker .hass="${this.hass}" .stateObj="${this.stateObj}"> </light-color-rgb-picker> `:a.s6} ${t&&"color_temp"===this._mainControl?a.qy` <light-color-temp-picker .hass="${this.hass}" .stateObj="${this.stateObj}"> </light-color-temp-picker> `:a.s6} <ha-icon-button-group> ${i?a.qy` <ha-icon-button .disabled="${this.stateObj.state===c.Hh}" .label="${this.hass.localize("ui.dialogs.more_info_control.light.toggle")}" @click="${this._toggle}"> <ha-svg-icon .path="${O}"></ha-svg-icon> </ha-icon-button> `:a.s6} ${e||t?a.qy` <div class="separator"></div> <ha-icon-button-toggle .selected="${"brightness"===this._mainControl}" .disabled="${this.stateObj.state===c.Hh}" .label="${this.hass.formatEntityAttributeName(this.stateObj,"brightness")}" .control="${"brightness"}" @click="${this._setMainControl}"> <ha-svg-icon .path="${w}"></ha-svg-icon> </ha-icon-button-toggle> `:a.s6} ${e?a.qy` <ha-icon-button-toggle border-only .selected="${"color"===this._mainControl}" .disabled="${this.stateObj.state===c.Hh}" .label="${this.hass.localize("ui.dialogs.more_info_control.light.color")}" .control="${"color"}" @click="${this._setMainControl}"> <span class="wheel color"></span> </ha-icon-button-toggle> `:a.s6} ${t?a.qy` <ha-icon-button-toggle border-only .selected="${"color_temp"===this._mainControl}" .disabled="${this.stateObj.state===c.Hh}" .label="${this.hass.localize("ui.dialogs.more_info_control.light.color_temp")}" .control="${"color_temp"}" @click="${this._setMainControl}"> <span class="wheel color-temp"></span> </ha-icon-button-toggle> `:a.s6} ${o?a.qy` <div class="separator"></div> <ha-icon-button .disabled="${this.stateObj.state===c.Hh}" .label="${this.hass.localize("ui.dialogs.more_info_control.light.set_white")}" @click="${this._setWhite}"> <ha-svg-icon .path="${$}"></ha-svg-icon> </ha-icon-button> `:a.s6} </ha-icon-button-group> ${r?a.qy` <ha-more-info-light-favorite-colors .hass="${this.hass}" .stateObj="${this.stateObj}" .entry="${this.entry}" .editMode="${this.editMode}" @favorite-color-edit-started="${this._resetMainControl}"> </ha-more-info-light-favorite-colors> `:a.s6} `:a.s6} </div> <div> <ha-more-info-control-select-container> ${s&&this.stateObj.attributes.effect_list?a.qy` <ha-control-select-menu .hass="${this.hass}" .label="${this.hass.formatEntityAttributeName(this.stateObj,"effect")}" .value="${this.stateObj.attributes.effect}" .disabled="${this.stateObj.state===c.Hh}" @wa-select="${this._handleEffect}" .options="${this.stateObj.attributes.effect_list.map(t=>({value:t,label:this.stateObj?this.hass.formatEntityAttributeValue(this.stateObj,"effect",t):t}))}" .renderIcon="${this._renderEffectIcon}"> <ha-svg-icon slot="icon" .path="${C}"></ha-svg-icon> </ha-control-select-menu> `:a.s6} </ha-more-info-control-select-container> </div> `}_handleEffect(t){const e=t.detail.item.value,i=this._effect;e&&i!==e&&this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,effect:e})}static get styles(){return[f.K,a.AH`.button-bar{display:flex;flex-direction:row;align-items:center;height:48px;border-radius:var(--ha-border-radius-3xl);background-color:rgba(139,145,151,.1);box-sizing:border-box;width:auto}.wheel{width:30px;height:30px;flex:none;border-radius:var(--ha-border-radius-xl)}.wheel.color{background-image:url("/static/images/color_wheel.png");background-size:cover}.wheel.color-temp{background:linear-gradient(0,#a6d1ff 0%,#fff 50%,#ffa000 100%)}[disabled] .wheel{filter:grayscale(1) opacity(.5)}.buttons{flex-wrap:wrap;max-width:250px}`]}constructor(...t){super(...t),this._mainControl="brightness",this._renderEffectIcon=t=>a.qy`<ha-attribute-icon .hass="${this.hass}" .stateObj="${this.stateObj}" attribute="effect" .attributeValue="${t}"></ha-attribute-icon>`,this._toggle=()=>{const t="on"===this.stateObj?.state?"turn_off":"turn_on";(0,p.j)(this,"light"),this.hass.callService("light",t,{entity_id:this.stateObj.entity_id})},this._setWhite=()=>{this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,white:!0})}}}(0,s.Cg)([(0,r.MZ)({attribute:!1})],j.prototype,"hass",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],j.prototype,"stateObj",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],j.prototype,"entry",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],j.prototype,"editMode",void 0),(0,s.Cg)([(0,r.wk)()],j.prototype,"_effect",void 0),(0,s.Cg)([(0,r.wk)()],j.prototype,"_mainControl",void 0),j=(0,s.Cg)([(0,r.EM)("more-info-light")],j),o()}catch(t){o(t)}})},78791(t,e,i){var o=i(62826),s=i(5124),a=i(22441),r=i(6412),l=i(89784),n=i(71727),h=i(47129),d=i(52658),c=(i(48374),i(25094),i(22675)),u=i(88360),p=i(59815);const g="M7,2V13H10V22L17,10H13L17,2H7Z",_="M17,10H13L17,2H7V4.18L15.46,12.64M3.27,3L2,4.27L7,9.27V13H10V22L13.58,15.86L17.73,20L19,18.73L3.27,3Z";class v extends s.WF{_valueChanged(t){t.target.checked?this._turnOn():this._turnOff()}_turnOn(){this._callService(!0)}_turnOff(){this._callService(!1)}async _callService(t){if(!this.hass||!this.stateObj)return;(0,u.j)(this,"light");const e=(0,n.m)(this.stateObj.entity_id);let i,o;"group"===e?(i="homeassistant",o=t?"turn_on":"turn_off"):(i=e,o=t?"turn_on":"turn_off"),await this.hass.callService(i,o,{entity_id:this.stateObj.entity_id})}render(){const t=(0,d.Se)(this.stateObj,"on"),e=(0,d.Se)(this.stateObj,"off"),i="on"===this.stateObj.state,o="off"===this.stateObj.state;return this.stateObj.attributes.assumed_state||this.stateObj.state===c.HV?s.qy` <div class="buttons"> <ha-control-button .label="${this.hass.localize("ui.card.common.turn_on")}" @click="${this._turnOn}" .disabled="${this.stateObj.state===c.Hh}" class="${(0,r.H)({active:i})}" style="${(0,l.W)({"--color":t})}"> <ha-svg-icon .path="${this.iconPathOn||g}"></ha-svg-icon> </ha-control-button> <ha-control-button .label="${this.hass.localize("ui.card.common.turn_off")}" @click="${this._turnOff}" .disabled="${this.stateObj.state===c.Hh}" class="${(0,r.H)({active:o})}" style="${(0,l.W)({"--color":e})}"> <ha-svg-icon .path="${this.iconPathOff||_}"></ha-svg-icon> </ha-control-button> </div> `:s.qy` <ha-control-switch touch-action="none" .pathOn="${this.iconPathOn||g}" .pathOff="${this.iconPathOff||_}" vertical reversed .checked="${i}" .showHandle="${(0,h.a)(this.stateObj)}" @change="${this._valueChanged}" .label="${this.hass.localize("ui.card.common.toggle")}" style="${(0,l.W)({"--control-switch-on-color":t,"--control-switch-off-color":e})}" .disabled="${this.stateObj.state===c.Hh}"> </ha-control-switch> `}}v.styles=[p.e],(0,o.Cg)([(0,a.MZ)({attribute:!1})],v.prototype,"hass",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],v.prototype,"stateObj",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],v.prototype,"iconPathOn",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],v.prototype,"iconPathOff",void 0),v=(0,o.Cg)([(0,a.EM)("ha-state-control-toggle")],v)},43524(t,e,i){i.a(t,async function(t,e){try{var o=i(62826),s=i(5124),a=i(22441),r=i(89784),l=i(79468),n=i(47129),h=i(52658),d=i(10223),c=i(22675),u=t([d]);d=(u.then?(await u)():u)[0];class p extends s.WF{updated(t){t.has("stateObj")&&(this.value=null!=this.stateObj.attributes.brightness?Math.max(Math.round(100*this.stateObj.attributes.brightness/255),1):void 0)}_valueChanged(t){const{value:e}=t.detail;"number"!=typeof e||isNaN(e)||this.hass.callService("light","turn_on",{entity_id:this.stateObj.entity_id,brightness_pct:e})}render(){let t=(0,h.Se)(this.stateObj);if(this.stateObj.attributes.rgb_color){const e=(0,l.bi)(this.stateObj.attributes.rgb_color);e[1]<.4&&(e[1]<.1?e[2]=225:e[1]=.4),t=(0,l.v2)((0,l.hT)(e))}return s.qy` <ha-control-slider touch-action="none" vertical .value="${this.value}" min="1" max="100" .showHandle="${(0,n.a)(this.stateObj)}" @value-changed="${this._valueChanged}" .label="${this.hass.formatEntityAttributeName(this.stateObj,"brightness")}" style="${(0,r.W)({"--control-slider-color":t,"--control-slider-background":t})}" .disabled="${this.stateObj.state===c.Hh}" unit="%" .locale="${this.hass.locale}"> </ha-control-slider> `}}p.styles=s.AH`ha-control-slider{position:relative;height:45vh;max-height:320px;min-height:200px;--control-slider-thickness:130px;--control-slider-border-radius:var(--ha-border-radius-6xl);--control-slider-color:var(--primary-color);--control-slider-background:var(--disabled-color);--control-slider-background-opacity:0.2;--control-slider-tooltip-font-size:var(--ha-font-size-xl)}`,(0,o.Cg)([(0,a.MZ)({attribute:!1})],p.prototype,"hass",void 0),(0,o.Cg)([(0,a.MZ)({attribute:!1})],p.prototype,"stateObj",void 0),(0,o.Cg)([(0,a.wk)()],p.prototype,"value",void 0),p=(0,o.Cg)([(0,a.EM)("ha-state-control-light-brightness")],p),e()}catch(t){e(t)}})}};