iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 6.76 kB
JavaScript
export const __rspack_esm_id=79192;export const __rspack_esm_ids=[79192];export const __webpack_modules__={54603(t,i,e){e.a(t,async function(t,a){try{e.r(i),e.d(i,{HuiClockCardAnalog:()=>h});e(18111),e(20116),e(61701);var o=e(74487),n=e(62826),r=e(5124),s=e(22441),c=e(6412),d=e(8480),l=t([o,d]);[o,d]=l.then?(await l)():l;class h extends r.WF{_initDate(){if(!this.config||!this.hass)return;let t=this.hass.locale;this.config.time_format&&(t={...t,time_format:this.config.time_format}),this._dateTimeFormat=new Intl.DateTimeFormat(this.hass.locale.language,{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h12",timeZone:this.config.time_zone||(0,d.wj)(t.time_zone,this.hass.config?.time_zone)}),this._computeOffsets()}updated(t){if(t.has("hass")){const i=t.get("hass");i&&i.locale===this.hass?.locale||this._initDate()}}connectedCallback(){super.connectedCallback(),document.addEventListener("visibilitychange",this._handleVisibilityChange),this._computeOffsets()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("visibilitychange",this._handleVisibilityChange)}_computeOffsets(){if(!this._dateTimeFormat)return;const t=this._dateTimeFormat.formatToParts(),i=t.find(t=>"hour"===t.type)?.value,e=t.find(t=>"minute"===t.type)?.value,a=t.find(t=>"second"===t.type)?.value,o=i?parseInt(i,10):0,n=e?parseInt(e,10):0,r=(a?parseInt(a,10):0)+(new Date).getMilliseconds()/1e3,s=o%12;this._secondOffsetSec=r,this._minuteOffsetSec=60*n+r,this._hourOffsetSec=3600*s+60*n+r}render(){if(!this.config)return r.s6;const t=this.config.clock_size?`size-${this.config.clock_size}`:"",i=this.config?.face_style?.startsWith("numbers"),e=this.config?.face_style?.startsWith("roman"),a=this.config?.face_style?.endsWith("upright"),o=t=>{return r.qy` <div class="${(0,c.H)({line:!0,numbers:i,roman:e})}"> ${t&&"markers"!==this.config?.face_style?r.qy`<div class="${(0,c.H)({number:!0,[this.config?.clock_size??""]:!0,upright:a})}"> ${e?(o=t,o<1||o>12?"":["","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"][o]):i?t:r.s6} </div>`:r.s6} </div> `;var o};return r.qy` <div class="analog-clock ${t}" role="img" aria-label="Analog clock"> <div class="${(0,c.H)({dial:!0,"dial-border":this.config.border??!1})}"> ${"quarter"===this.config.ticks?Array.from({length:4},(t,i)=>i).map(t=>r.qy` <div aria-hidden="true" class="tick hour" style="${`--tick-rotation: ${90*t}deg;`}"> ${o([12,3,6,9][t])} </div> `):this.config.ticks&&"hour"!==this.config.ticks?"minute"===this.config.ticks?Array.from({length:60},(t,i)=>i).map(t=>r.qy` <div aria-hidden="true" class="tick ${t%5==0?"hour":"minute"}" style="${`--tick-rotation: ${6*t}deg;`}"> ${t%5==0?o((t/5+11)%12+1):o()} </div> `):r.s6:Array.from({length:12},(t,i)=>i).map(t=>r.qy` <div aria-hidden="true" class="tick hour" style="${`--tick-rotation: ${30*t}deg;`}"> ${o((t+11)%12+1)} </div> `)} <div class="center-dot"></div> <div class="hand hour" style="${`animation-delay: -${this._hourOffsetSec??0}s;`}"></div> <div class="hand minute" style="${`animation-delay: -${this._minuteOffsetSec??0}s;`}"></div> ${this.config.show_seconds?r.qy`<div class="${(0,c.H)({hand:!0,second:!0,step:"tick"===this.config.seconds_motion})}" style="${`animation-delay: -${"tick"===this.config.seconds_motion?Math.floor(this._secondOffsetSec??0):this._secondOffsetSec??0}s;`}"></div>`:r.s6} </div> </div> `}constructor(...t){super(...t),this._handleVisibilityChange=()=>{document.hidden||this._computeOffsets()}}}h.styles=r.AH`:host{display:flex;align-items:center;justify-content:center}.analog-clock{--clock-size:100px;display:inline-flex;align-items:center;justify-content:center;width:var(--clock-size);height:var(--clock-size);background:var(--ha-clock-card-analog-face-background,none);border-radius:var(--ha-clock-card-analog-face-border-radius,none);padding:var(--ha-clock-card-analog-face-padding,none)}.analog-clock.size-medium{--clock-size:160px}.analog-clock.size-large{--clock-size:220px}.dial{position:relative;width:100%;height:100%;box-sizing:border-box}.dial-border{border:2px solid var(--divider-color);border-radius:var(--ha-border-radius-circle)}.tick{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(var(--tick-rotation));pointer-events:none;z-index:0}.tick .line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:calc(var(--clock-size) * .04);background:var(--primary-text-color);opacity:.5;border-radius:1px}.tick.hour .line{width:2px;height:calc(var(--clock-size) * .07);opacity:.8}.tick.hour .line.numbers,.tick.hour .line.roman{height:calc(var(--clock-size) * .03)}.tick.minute .line.numbers,.tick.minute .line.roman{height:calc(var(--clock-size) * .015)}.tick .number{position:absolute;top:0%;left:50%;transform:translate(-50%,35%);color:var(--primary-text-color);font-weight:var(--ha-font-weight-medium);line-height:var(--ha-line-height-condensed)}.tick .number.upright{transform:translate(-50%,35%) rotate(calc(var(--tick-rotation) * -1))}.tick .number.small{font-size:var(--ha-font-size-s)}.tick .number.medium{font-size:var(--ha-font-size-m)}.tick .number.large{font-size:var(--ha-font-size-l)}.center-dot{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:var(--ha-border-radius-circle);background:var(--primary-text-color);transform:translate(-50%,-50%);z-index:3}.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;transform:translate(-50%,0) rotate(0deg);background:var(--primary-text-color);border-radius:2px;will-change:transform;animation-name:ha-clock-rotate;animation-timing-function:linear;animation-iteration-count:infinite}.hand.hour{width:4px;height:calc(var(--clock-size) * .25);background:var(--primary-text-color);box-shadow:0 0 8px 0 rgba(0,0,0,.2);z-index:1;animation-duration:43200s}.hand.minute{width:3px;height:calc(var(--clock-size) * .35);background:var(--primary-text-color);box-shadow:0 0 6px 0 rgba(0,0,0,.2);opacity:.9;z-index:3;animation-duration:3600s}.hand.second{width:2px;height:calc(var(--clock-size) * .42);background:var(--ha-color-border-danger-normal);box-shadow:0 0 4px 0 rgba(0,0,0,.2);opacity:.8;z-index:2;animation-duration:60s}.hand.second.step{animation-timing-function:steps(60,end)} ha-clock-rotate{from{transform:translate(-50%,0) rotate(0deg)}to{transform:translate(-50%,0) rotate(360deg)}}`,(0,n.Cg)([(0,s.MZ)({attribute:!1})],h.prototype,"hass",void 0),(0,n.Cg)([(0,s.MZ)({attribute:!1})],h.prototype,"config",void 0),(0,n.Cg)([(0,s.wk)()],h.prototype,"_dateTimeFormat",void 0),(0,n.Cg)([(0,s.wk)()],h.prototype,"_hourOffsetSec",void 0),(0,n.Cg)([(0,s.wk)()],h.prototype,"_minuteOffsetSec",void 0),(0,n.Cg)([(0,s.wk)()],h.prototype,"_secondOffsetSec",void 0),h=(0,n.Cg)([(0,s.EM)("hui-clock-card-analog")],h),a()}catch(t){a(t)}})}};