53 lines
3.2 KiB
JavaScript
53 lines
3.2 KiB
JavaScript
import{_ as e,j as l,e as i,O as a,y as r,C as o,d as t,n as s}from"./main-85e087f9.js";import"./c.eab7754a.js";import{a as d}from"./c.388f6c87.js";import"./c.8e28b461.js";const c=new Set(["primary","accent","disabled","red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","grey","blue-grey","black","white"]);function n(e){return c.has(e)?`rgb(var(--rgb-${e}-color))`:e}e([s("hui-color-picker")],(function(e,l){return{F:class extends l{constructor(...l){super(...l),e(this)}},d:[{kind:"field",decorators:[i()],key:"label",value:void 0},{kind:"field",decorators:[i()],key:"helper",value:void 0},{kind:"field",decorators:[i()],key:"hass",value:void 0},{kind:"field",decorators:[i()],key:"value",value:void 0},{kind:"field",decorators:[i({type:Boolean})],key:"disabled",value:()=>!1},{kind:"method",key:"_valueSelected",value:function(e){const l=e.target.value;l&&a(this,"value-changed",{value:"default"!==l?l:void 0})}},{kind:"method",key:"render",value:function(){return r`
|
|
<ha-select
|
|
.icon=${Boolean(this.value)}
|
|
.label=${this.label}
|
|
.value=${this.value||"default"}
|
|
.helper=${this.helper}
|
|
.disabled=${this.disabled}
|
|
@closed=${d}
|
|
@selected=${this._valueSelected}
|
|
fixedMenuPosition
|
|
naturalMenuWidth
|
|
>
|
|
${this.value?r`
|
|
<span slot="icon">
|
|
${this.renderColorCircle(this.value||"grey")}
|
|
</span>
|
|
`:null}
|
|
<mwc-list-item value="default">
|
|
${this.hass.localize("ui.panel.lovelace.editor.color-picker.default_color")}
|
|
</mwc-list-item>
|
|
${Array.from(c).map((e=>r`
|
|
<mwc-list-item .value=${e} graphic="icon">
|
|
${this.hass.localize(`ui.panel.lovelace.editor.color-picker.colors.${e}`)||e}
|
|
<span slot="graphic">${this.renderColorCircle(e)}</span>
|
|
</mwc-list-item>
|
|
`))}
|
|
</ha-select>
|
|
`}},{kind:"method",key:"renderColorCircle",value:function(e){return r`
|
|
<span
|
|
class="circle-color"
|
|
style=${o({"--circle-color":n(e)})}
|
|
></span>
|
|
`}},{kind:"get",static:!0,key:"styles",value:function(){return t`
|
|
.circle-color {
|
|
display: block;
|
|
background-color: var(--circle-color);
|
|
border-radius: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
ha-select {
|
|
width: 100%;
|
|
}
|
|
`}}]}}),l);let u=e([s("ha-selector-ui-color")],(function(e,l){return{F:class extends l{constructor(...l){super(...l),e(this)}},d:[{kind:"field",decorators:[i()],key:"hass",value:void 0},{kind:"field",decorators:[i()],key:"selector",value:void 0},{kind:"field",decorators:[i()],key:"value",value:void 0},{kind:"field",decorators:[i()],key:"label",value:void 0},{kind:"field",decorators:[i()],key:"helper",value:void 0},{kind:"method",key:"render",value:function(){return r`
|
|
<hui-color-picker
|
|
.label=${this.label}
|
|
.hass=${this.hass}
|
|
.value=${this.value}
|
|
.helper=${this.helper}
|
|
@value-changed=${this._valueChanged}
|
|
></hui-color-picker>
|
|
`}},{kind:"method",key:"_valueChanged",value:function(e){a(this,"value-changed",{value:e.detail.value})}}]}}),l);export{u as HaSelectorUiColor};
|