"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("lit"),e=require("lit/decorators.js"),n=require("lit/directives/style-map.js"),d=a.css`
  .clock-wrap {
    aspect-ratio: 1 / 1;
    height: fit-content;
    position: relative;
  }
  .clock {
    width: 100%;
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid var(--rim-color);
    border-radius: 50%;
    transition: all ease 0.2s;
    z-index: 2;
  }
  .clock-dial {
    z-index: 1;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(98% - 6px);
    height: calc(98% - 6px);
  }
  .dot {
    background-color: var(--dot-color);
    border: 6px solid var(--rim-color);
    border-radius: 50%;
    width: calc(7% - 6px);
    aspect-ratio: 1 / 1;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }
  .hour,
  .min,
  .sec {
    position: absolute;
    transform-origin: 50% 100%;
    transition: all ease 0.2s;
  }
  .hour {
    background-color: var(--clock-color);
    height: 25%;
    width: 5%;
    border-radius: 18px;
    top: 25%;
    left: 47.5%;
    z-index: 2;
  }
  .min {
    background-color: var(--clock-color);
    height: 35%;
    width: 3%;
    border-radius: 12px;
    top:15%;
    left:48.5%;
    z-index: 2;
  }
  .sec {
    background-color: var(--seconds-color);
    height: 45%;
    width: 1%;
    border-radius: 6px;
    top: 5%;
    left:49.5%;
    z-index: 3;
  }
`;var h=Object.defineProperty,C=Object.getOwnPropertyDescriptor,l=(p,o,s,t)=>{for(var c=t>1?void 0:t?C(o,s):o,r=p.length-1,i;r>=0;r--)(i=p[r])&&(c=(t?i(o,s,c):i(c))||c);return t&&c&&h(o,s,c),c};exports.ClockComponent=class extends a.LitElement{constructor(){super(...arguments),this.timeZonedDate=new Date,this.clockColor="black",this.rimColor="#e3e1e1",this.dotColor="#888888",this.secondsColor="#f00",this.hourStyles={},this.minuteStyles={},this.secondStyles={},this.timeInterval=0}render(){const o={"--clock-color":this.clockColor,"--rim-color":this.rimColor,"--dot-color":this.dotColor,"--seconds-color":this.secondsColor};return a.html`
    <div class="clock-wrap" style=${n.styleMap(o)}>
        <div class="clock">
            <div class="dot"></div>
            <div class="hour" style=${n.styleMap(this.hourStyles)}></div>
            <div class="min" style=${n.styleMap(this.minuteStyles)}></div>
            <div class="sec" style=${n.styleMap(this.secondStyles)}></div>
        </div>
        ${this.renderClockFace()}
    </div>
    `}async connectedCallback(){super.connectedCallback();const o=6,s=this.timeZonedDate.getUTCDate();this.timeInterval=setInterval(()=>{const t=new Date;t.setUTCDate(s);const c=t.getHours()*30,r=t.getMinutes()*o,i=t.getSeconds()*o;this.hourStyles={transform:`rotateZ(${c+r/12}deg)`},this.minuteStyles={transform:`rotateZ(${r}deg)`},this.secondStyles={transform:`rotateZ(${i}deg)`}},1e3)}disconnectedCallback(){clearInterval(this.timeInterval),super.disconnectedCallback()}renderClockFace(){return a.svg`<svg version="1.1" class="clock-dial" 
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 288.001 295.276">
      <g>
        <circle cx="144" cy="147.638" r="5.32"/>
        <path fill="var(--clock-color)" d="M80.107,43.681l5.823-3.351L73.985,19.561l-5.823,3.35l1.326,2.307L80.107,43.681z M220.673,23.177l-5.812-3.368
          l-1.334,2.299L202.84,40.534l5.812,3.371L220.673,23.177z M273.058,78.113l-3.366-5.814l-2.301,1.33l-18.441,10.657l3.359,5.818
          L273.058,78.113z M270.791,217.67l-18.447-10.648l-3.359,5.818l20.752,11.979l3.358-5.82L270.791,217.67z M208.681,253.217
          l-5.808,3.374l12.029,20.723l5.811-3.375l-1.336-2.3L208.681,253.217z M68.205,274.292l5.826,3.347l1.325-2.307l10.611-18.47
          l-5.826-3.346L68.205,274.292z M15.597,219.564l3.386,5.805l2.298-1.34l18.398-10.734l-3.385-5.803L15.597,219.564z M35.784,90.578
          l3.335-5.833L18.321,72.852l-3.337,5.832l2.309,1.321L35.784,90.578z"/>
        <path fill="var(--clock-color)" d="M272.767,143.362h-2.91c0.524-2.353,1.538-4.165,3.037-5.428c1.502-1.272,3.277-1.908,5.324-1.908
          c1.486,0,2.87,0.341,4.166,1.022c1.283,0.679,2.279,1.588,2.986,2.748c0.71,1.146,1.058,2.352,1.058,3.608
          c0,2.459-1.228,4.407-3.667,5.844c1.375,0.554,2.502,1.369,3.372,2.445c1.251,1.511,1.868,3.204,1.868,5.088
          c0,1.611-0.422,3.158-1.279,4.629c-0.857,1.464-2.02,2.6-3.498,3.401c-1.474,0.804-3.122,1.205-4.947,1.205
          c-2.461,0-4.504-0.711-6.149-2.128c-1.645-1.413-2.724-3.498-3.222-6.236h2.786c0.49,1.846,1.199,3.188,2.119,4.013
          c1.175,1.052,2.676,1.573,4.5,1.573c2.081,0,3.737-0.617,4.988-1.865c1.258-1.239,1.891-2.693,1.891-4.361
          c0-1.112-0.319-2.158-0.945-3.127c-0.626-0.975-1.462-1.7-2.523-2.191c-1.054-0.493-2.687-0.803-4.899-0.913v-2.621
          c1.307,0,2.495-0.229,3.574-0.687c1.064-0.468,1.849-1.046,2.335-1.757c0.488-0.715,0.728-1.486,0.728-2.332
          c0-1.244-0.499-2.316-1.484-3.225c-0.985-0.899-2.241-1.355-3.756-1.355c-1.224,0-2.295,0.345-3.188,1.041
          C274.146,140.538,273.382,141.708,272.767,143.362z"/>
        <path fill="var(--clock-color)" d="M147.404,265.283l2.344,1.531l-7.713,11.687c1.033-0.35,2.001-0.521,2.908-0.521c2.266,0,4.2,0.815,5.777,2.454
          c1.578,1.636,2.37,3.652,2.37,6.045c0,1.645-0.38,3.134-1.141,4.457c-0.766,1.323-1.859,2.379-3.265,3.163
          c-1.404,0.784-2.91,1.177-4.532,1.177c-1.57,0-3.025-0.383-4.36-1.134c-1.345-0.761-2.402-1.822-3.163-3.197
          c-0.764-1.372-1.141-2.845-1.141-4.405c0-1.163,0.23-2.389,0.711-3.681c0.47-1.284,1.313-2.837,2.534-4.648L147.404,265.283z
          M144.271,280.485c-1.665,0-3.074,0.579-4.25,1.754c-1.176,1.176-1.755,2.592-1.755,4.259c0,1.654,0.579,3.072,1.755,4.248
          c1.177,1.165,2.586,1.755,4.25,1.755c1.657,0,3.078-0.59,4.243-1.755c1.177-1.176,1.764-2.594,1.764-4.248
          c0-1.667-0.587-3.083-1.764-4.259C147.349,281.064,145.927,280.485,144.271,280.485z"/>
        <path fill="var(--clock-color)" d="M5.687,166.017L3.339,164.5l7.726-11.689c-1.034,0.342-2.009,0.513-2.919,0.513c-2.267,0-4.19-0.815-5.779-2.457
          C0.789,149.226,0,147.214,0,144.817c0-1.643,0.384-3.125,1.141-4.442c0.771-1.321,1.854-2.376,3.258-3.164
          c1.403-0.789,2.905-1.186,4.509-1.186c1.576,0,3.044,0.388,4.378,1.143c1.338,0.77,2.391,1.836,3.154,3.207
          c0.764,1.368,1.147,2.833,1.147,4.389c0,1.175-0.24,2.408-0.71,3.695c-0.47,1.292-1.318,2.834-2.532,4.649L5.687,166.017z
          M8.808,150.818c1.671,0,3.093-0.586,4.255-1.752c1.162-1.177,1.75-2.588,1.75-4.249c0-1.654-0.59-3.073-1.765-4.238
          c-1.165-1.165-2.587-1.753-4.257-1.753c-1.655,0-3.072,0.589-4.24,1.753c-1.175,1.166-1.754,2.584-1.754,4.238
          c0,1.661,0.58,3.072,1.756,4.249C5.73,150.232,7.144,150.818,8.808,150.818z"/>
        <g>
          <path fill="var(--clock-color)" d="M127.438,0.725h5.61v28.551h-2.831V3.517h-4.483L127.438,0.725z"/>
          <path fill="var(--clock-color)" d="M146.873,9.647h-2.742c0.083-2.81,1.022-5.124,2.827-6.936C148.765,0.908,150.989,0,153.645,0
            c2.63,0,4.751,0.854,6.376,2.548c1.624,1.695,2.435,3.696,2.435,6.003c0,1.62-0.387,3.132-1.159,4.544
            c-0.776,1.42-2.281,3.34-4.508,5.759l-7.111,7.665h13.169v2.756h-19.389l10.906-11.791c2.213-2.373,3.648-4.129,4.323-5.278
            c0.663-1.14,0.993-2.35,0.993-3.618c0-1.606-0.597-2.986-1.796-4.147c-1.192-1.156-2.66-1.742-4.392-1.742
            c-1.831,0-3.344,0.61-4.551,1.825C147.725,5.746,147.035,7.449,146.873,9.647z"/>
        </g>
      </g>
      </svg>`}};exports.ClockComponent.styles=[d];l([e.property({type:Date})],exports.ClockComponent.prototype,"timeZonedDate",2);l([e.property({type:String})],exports.ClockComponent.prototype,"clockColor",2);l([e.property({type:String})],exports.ClockComponent.prototype,"rimColor",2);l([e.property({type:String})],exports.ClockComponent.prototype,"dotColor",2);l([e.property({type:String})],exports.ClockComponent.prototype,"secondsColor",2);l([e.state()],exports.ClockComponent.prototype,"hourStyles",2);l([e.state()],exports.ClockComponent.prototype,"minuteStyles",2);l([e.state()],exports.ClockComponent.prototype,"secondStyles",2);exports.ClockComponent=l([e.customElement("app-clock")],exports.ClockComponent);