iobroker.lovelace/hass_frontend/frontend_es5/79192.30550bdaaf752c69.js

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

"use strict";(self.rspackChunkhome_assistant_frontend=self.rspackChunkhome_assistant_frontend||[]).push([[79192],{54603:function(i,t,e){e.a(i,async function(i,o){try{e.r(t),e.d(t,{HuiClockCardAnalog:function(){return y}});e(18111),e(20116),e(61701),e(62953);var a=e(74487),n=e(40445),r=e(5124),s=e(67576),c=e(6412),l=e(8480),d=i([a,l]);[a,l]=d.then?(await d)():d;let h,u,f,m,g,v,p,k,b=i=>i;class y extends r.WF{_initDate(){var i;if(!this.config||!this.hass)return;let t=this.hass.locale;this.config.time_format&&(t=Object.assign(Object.assign({},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,l.wj)(t.time_zone,null===(i=this.hass.config)||void 0===i?void 0:i.time_zone)}),this._computeOffsets()}updated(i){if(i.has("hass")){var t;const e=i.get("hass");e&&e.locale===(null===(t=this.hass)||void 0===t?void 0:t.locale)||this._initDate()}}connectedCallback(){super.connectedCallback(),document.addEventListener("visibilitychange",this._handleVisibilityChange),this._computeOffsets()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("visibilitychange",this._handleVisibilityChange)}_computeOffsets(){var i,t,e;if(!this._dateTimeFormat)return;const o=this._dateTimeFormat.formatToParts(),a=null===(i=o.find(i=>"hour"===i.type))||void 0===i?void 0:i.value,n=null===(t=o.find(i=>"minute"===i.type))||void 0===t?void 0:t.value,r=null===(e=o.find(i=>"second"===i.type))||void 0===e?void 0:e.value,s=a?parseInt(a,10):0,c=n?parseInt(n,10):0,l=(r?parseInt(r,10):0)+(new Date).getMilliseconds()/1e3,d=s%12;this._secondOffsetSec=l,this._minuteOffsetSec=60*c+l,this._hourOffsetSec=3600*d+60*c+l}render(){var i,t,e,o,a,n,s,l;if(!this.config)return r.s6;const d=this.config.clock_size?`size-${this.config.clock_size}`:"",k=null===(i=this.config)||void 0===i||null===(i=i.face_style)||void 0===i?void 0:i.startsWith("numbers"),y=null===(t=this.config)||void 0===t||null===(t=t.face_style)||void 0===t?void 0:t.startsWith("roman"),_=null===(e=this.config)||void 0===e||null===(e=e.face_style)||void 0===e?void 0:e.endsWith("upright"),x=i=>{var t,e,o,a;return(0,r.qy)(h||(h=b` <div class="${0}"> ${0} </div> `),(0,c.H)({line:!0,numbers:k,roman:y}),i&&"markers"!==(null===(t=this.config)||void 0===t?void 0:t.face_style)?(0,r.qy)(u||(u=b`<div class="${0}"> ${0} </div>`),(0,c.H)({number:!0,[null!==(e=null===(o=this.config)||void 0===o?void 0:o.clock_size)&&void 0!==e?e:""]:!0,upright:_}),y?(a=i)<1||a>12?"":["","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"][a]:k?i:r.s6):r.s6)};return(0,r.qy)(f||(f=b` <div class="analog-clock ${0}" role="img" aria-label="Analog clock"> <div class="${0}"> ${0} <div class="center-dot"></div> <div class="hand hour" style="${0}"></div> <div class="hand minute" style="${0}"></div> ${0} </div> </div> `),d,(0,c.H)({dial:!0,"dial-border":null!==(o=this.config.border)&&void 0!==o&&o}),"quarter"===this.config.ticks?Array.from({length:4},(i,t)=>t).map(i=>(0,r.qy)(m||(m=b` <div aria-hidden="true" class="tick hour" style="${0}"> ${0} </div> `),`--tick-rotation: ${90*i}deg;`,x([12,3,6,9][i]))):this.config.ticks&&"hour"!==this.config.ticks?"minute"===this.config.ticks?Array.from({length:60},(i,t)=>t).map(i=>(0,r.qy)(v||(v=b` <div aria-hidden="true" class="tick ${0}" style="${0}"> ${0} </div> `),i%5==0?"hour":"minute",`--tick-rotation: ${6*i}deg;`,i%5==0?x((i/5+11)%12+1):x())):r.s6:Array.from({length:12},(i,t)=>t).map(i=>(0,r.qy)(g||(g=b` <div aria-hidden="true" class="tick hour" style="${0}"> ${0} </div> `),`--tick-rotation: ${30*i}deg;`,x((i+11)%12+1))),`animation-delay: -${null!==(a=this._hourOffsetSec)&&void 0!==a?a:0}s;`,`animation-delay: -${null!==(n=this._minuteOffsetSec)&&void 0!==n?n:0}s;`,this.config.show_seconds?(0,r.qy)(p||(p=b`<div class="${0}" style="${0}"></div>`),(0,c.H)({hand:!0,second:!0,step:"tick"===this.config.seconds_motion}),`animation-delay: -${"tick"===this.config.seconds_motion?Math.floor(null!==(s=this._secondOffsetSec)&&void 0!==s?s:0):null!==(l=this._secondOffsetSec)&&void 0!==l?l:0}s;`):r.s6)}constructor(...i){super(...i),this._handleVisibilityChange=()=>{document.hidden||this._computeOffsets()}}}y.styles=(0,r.AH)(k||(k=b`: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)}@keyframes 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})],y.prototype,"hass",void 0),(0,n.Cg)([(0,s.MZ)({attribute:!1})],y.prototype,"config",void 0),(0,n.Cg)([(0,s.wk)()],y.prototype,"_dateTimeFormat",void 0),(0,n.Cg)([(0,s.wk)()],y.prototype,"_hourOffsetSec",void 0),(0,n.Cg)([(0,s.wk)()],y.prototype,"_minuteOffsetSec",void 0),(0,n.Cg)([(0,s.wk)()],y.prototype,"_secondOffsetSec",void 0),y=(0,n.Cg)([(0,s.EM)("hui-clock-card-analog")],y),o()}catch(h){o(h)}})}}]);