iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 7.73 kB
JavaScript
export const __rspack_esm_id=86658;export const __rspack_esm_ids=[86658];export const __webpack_modules__={2226(e,o,t){t(18111),t(61701);var a=t(62826),i=t(35211),s=t(5124),n=t(22441),r=t(6412),l=t(63672),d=t(89784),c=t(1087),p=t(15638),h=t(22792);t(64013),t(92677);class m extends s.WF{render(){const e=this.maxColumns??3,o=Math.min(e,this.options.length);return s.qy` <ha-radio-group class="list" style="${(0,d.W)({"--columns":o})}" .value="${this.value}" ="${this._radioChanged}"> ${this.options.map(e=>this._renderOption(e))} </ha-radio-group> `}_renderOption(e){const o=1===this.maxColumns&&!this.stackedImage,t=1===this.maxColumns&&this.stackedImage,a=e.disabled||this.disabled||!1,i=e.value===this.value,n=this._ui?.themes.darkMode||!1,d=!!this._i18n&&(0,p.qC)(this._i18n.language,this._i18n.translationMetadata.translations),c="object"==typeof e.image?n&&e.image.src_dark||e.image.src:e.image,h="object"==typeof e.image&&(d&&e.image.flip_rtl);return s.qy` <label class="option ${(0,r.H)({horizontal:o,stacked:t,selected:i})}" ?disabled="${a}"> <div class="content"> <ha-radio-option aria-describedby="${(0,l.J)(e.description?`desc-${e.value}`:void 0)}" aria-labelledby="${`label-${e.value}`}" .value="${e.value}" .disabled="${a}"></ha-radio-option> <div class="text"> <span id="${`label-${e.value}`}" class="label">${e.label}</span> ${e.description?s.qy`<span class="description" id="desc-${e.value}">${e.description}</span>`:s.s6} </div> </div> ${c?s.qy` <img class="${h?"flipped":""}" alt="" src="${c}"> `:s.s6} </label> `}_radioChanged(e){e.stopPropagation();const o=e.currentTarget.value;this.disabled||void 0===o||o===(this.value??"")||(0,c.r)(this,"value-changed",{value:o})}constructor(...e){super(...e),this.options=[],this.stackedImage=!1}}m.styles=s.AH`.list::part(form-control-input){display:grid;grid-template-columns:repeat(var(--columns,1),minmax(0,1fr));gap:var(--ha-space-3)}.option{position:relative;display:block;border:1px solid var(--divider-color);border-radius:var(--ha-card-border-radius,var(--ha-border-radius-lg));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px;gap:var(--ha-space-2);overflow:hidden;cursor:pointer}.option .content{position:relative;display:flex;flex-direction:row;gap:var(--ha-space-2);min-width:0;width:100%}.option .content ha-radio-option{--ha-radio-option-control-margin:0;margin:0;flex:none}.option .content .text{display:flex;flex-direction:column;gap:var(--ha-space-1);min-width:0;flex:1;justify-content:center}.option .content .text .label{color:var(--primary-text-color);font-size:var(--ha-font-size-m);font-weight:var(--ha-font-weight-normal);line-height:var(--ha-line-height-condensed);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.option .content .text .description{color:var(--secondary-text-color);font-size:var(--ha-font-size-s);font-weight:var(--ha-font-weight-normal);line-height:var(--ha-line-height-condensed)}img{position:relative;max-width:var(--ha-select-box-image-size,96px);max-height:var(--ha-select-box-image-size,96px);margin:auto}.flipped{transform:scaleX(-1)}.option.horizontal{flex-direction:row;align-items:flex-start}.option.horizontal img{margin:0}.option.stacked{align-items:stretch}.option.stacked img{max-width:100%;max-height:var(--ha-select-box-image-size,96px);margin:0}.option:before{content:"";display:block;inset:0;position:absolute;background-color:transparent;pointer-events:none;opacity:.2;transition:background-color 180ms ease-in-out,opacity 180ms ease-in-out}.option:hover:before{background-color:var(--divider-color)}.option.selected:before{background-color:var(--primary-color)}.option[disabled]{cursor:not-allowed}.option[disabled] .content,.option[disabled] img{opacity:.5}.option[disabled]:before{background-color:var(--disabled-color);opacity:.05}`,(0,a.Cg)([(0,n.MZ)({attribute:!1})],m.prototype,"options",void 0),(0,a.Cg)([(0,n.MZ)({attribute:!1})],m.prototype,"value",void 0),(0,a.Cg)([(0,n.MZ)({type:Boolean})],m.prototype,"disabled",void 0),(0,a.Cg)([(0,n.MZ)({type:Number,attribute:"max_columns"})],m.prototype,"maxColumns",void 0),(0,a.Cg)([(0,n.MZ)({type:Boolean,attribute:"stacked_image"})],m.prototype,"stackedImage",void 0),(0,a.Cg)([(0,n.wk)(),(0,i.Fg)({context:h.D5,subscribe:!0})],m.prototype,"_i18n",void 0),(0,a.Cg)([(0,n.wk)(),(0,i.Fg)({context:h.EK,subscribe:!0})],m.prototype,"_ui",void 0),m=(0,a.Cg)([(0,n.EM)("ha-select-box")],m)},30809(e,o,t){t.a(e,async function(e,a){try{t.r(o);t(18111),t(61701);var i=t(62826),s=(t(68825),t(5124)),n=t(22441),r=t(1087),l=t(18350),d=t(72554),c=(t(93444),t(26300)),p=(t(2226),t(91485)),h=(t(88249),t(84025)),m=t(14503),g=t(36918),u=e([l,d,c,p]);[l,d,c,p]=u.then?(await u)():u;const v="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z";class b extends s.WF{showDialog(e){this._open=!0,this._params=e,this._newMode=e.config.mode||"single",this._newMax=(0,h.Iq)(this._newMode)?e.config.max||10:void 0}closeDialog(){return this._open=!1,!0}_dialogClosed(){this._params?.onClose&&this._params.onClose(),this._params=void 0,(0,r.r)(this,"dialog-closed",{dialog:this.localName})}render(){if(!this._params)return s.s6;const e=this.hass.localize("ui.panel.config.automation.editor.change_mode");return s.qy` <ha-dialog .open="${this._open}" header-title="${e}" ="${this._dialogClosed}"> <ha-icon-button .label="${this.hass.localize("ui.panel.config.automation.editor.modes.learn_more")}" .path="${v}" href="${(0,g.o)(this.hass,"/docs/automation/modes/")}" slot="headerActionItems" target="_blank" rel="noopener noreferrer"></ha-icon-button> <ha-select-box .options="${h.FN.map(e=>({label:this.hass.localize(`ui.panel.config.automation.editor.modes.${e}`),description:this.hass.localize(`ui.panel.config.automation.editor.modes.${e}_description`),value:e}))}" .value="${this._newMode}" -changed="${this._modeChanged}" .maxColumns="${1}"></ha-select-box> ${(0,h.Iq)(this._newMode)?s.qy` <div class="max-value"> <wa-divider></wa-divider> <ha-input .label="${this.hass.localize(`ui.panel.config.automation.editor.max.${this._newMode}`)}" type="number" name="max" .value="${this._newMax?.toString()??""}" ="${this._valueChanged}"> </ha-input> </div> `:s.s6} <ha-dialog-footer slot="footer"> <ha-button slot="secondaryAction" appearance="plain" ="${this.closeDialog}"> ${this.hass.localize("ui.common.cancel")} </ha-button> <ha-button slot="primaryAction" ="${this._save}"> ${this.hass.localize("ui.panel.config.automation.editor.change_mode")} </ha-button> </ha-dialog-footer> </ha-dialog> `}_modeChanged(e){const o=e.detail.value;this._newMode=o,(0,h.Iq)(o)?this._newMax||(this._newMax=10):this._newMax=void 0}_valueChanged(e){e.stopPropagation();const o=e.target;"max"===o.name&&(this._newMax=Number(o.value))}_save(){this._params&&(this._params.updateConfig({...this._params.config,mode:this._newMode,max:this._newMax}),this.closeDialog())}static get styles(){return[m.RF,m.nA,s.AH`.max-value{margin-top:var(--ha-space-3)}ha-wa-dialog ha-icon-button[slot=headerActionItems]{color:var(--secondary-text-color)}`]}constructor(...e){super(...e),this._open=!1,this._newMode="single"}}(0,i.Cg)([(0,n.MZ)({attribute:!1})],b.prototype,"hass",void 0),(0,i.Cg)([(0,n.wk)()],b.prototype,"_open",void 0),(0,i.Cg)([(0,n.wk)()],b.prototype,"_params",void 0),(0,i.Cg)([(0,n.wk)()],b.prototype,"_newMode",void 0),(0,i.Cg)([(0,n.wk)()],b.prototype,"_newMax",void 0),b=(0,i.Cg)([(0,n.EM)("ha-dialog-automation-mode")],b),a()}catch(e){a(e)}})}};