var _=(t,r,n)=>{if(!r.has(t))throw TypeError("Cannot "+n)};var y=(t,r,n)=>(_(t,r,"read from private field"),n?n.call(t):r.get(t)),f=(t,r,n)=>{if(r.has(t))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(t):r.set(t,n)},L=(t,r,n,d)=>(_(t,r,"write to private field"),d?d.call(t,n):r.set(t,n),n);var l=(t,r,n)=>(_(t,r,"access private method"),n);(function(t,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(t=typeof globalThis<"u"?globalThis:t||self,r(t["wc-clock"]={}))})(this,function(t){var k,m,p,u,v,g,E,b,x;"use strict";const r=`<style>\r
  :host {\r
    display: block;\r
    --hours-hand-color: #b9b9b9;\r
    --minutes-hand-color: #b9b9b9;\r
    --seconds-hand-color: #ff3434;\r
    --clock-background-color: #1a1a1aff;\r
    --clock-color: #fff;\r
    --clock-width: 10rem;\r
    --seconds-hand-width: 1;\r
    --seconds-hand-height: 4;\r
    --minutes-hand-width: 6;\r
    --minutes-hand-height: 4;\r
    --hours-hand-width: 6;\r
    --hours-hand-height: 3;\r
    --clock-font-size: 1rem;\r
    --clock-font: Arial, Helvetica, sans-serif;\r
    --clock-hours-ticks-color: #fff;\r
    --clock-minutes-ticks-color: #ffffff90;\r
    --clock-hours-ticks-height: 0.45rem;\r
    --clock-hours-ticks-width: 0.15rem;\r
    --clock-minutes-ticks-height: 0.23rem;\r
    --clock-minutes-ticks-width: 0.05rem;\r
  }\r
  .wc-clock__container {\r
    position: relative;\r
    display: flex;\r
    justify-content: center;\r
    align-items: center;\r
    font-family: var(--clock-font-family);\r
    font-size: var(--clock-font-size);\r
  }\r
  .wc-clock__clock {\r
    width: var(--clock-width);\r
    height: var(--clock-width);\r
    background: var(--clock-background-color);\r
    border-radius: 50%;\r
    box-shadow: 0 0 0.25rem var(--clock-background-color),\r
      0 0 0.1em 0.2em #a9a9a9;\r
    border: 0.1em solid var(--clock-background-color);\r
    display: flex;\r
    justify-content: center;\r
    align-items: center;\r
    .wc-clock__clock-labels {\r
      > span {\r
        position: absolute;\r
        color: var(--clock-color);\r
        transform: rotate(calc(30deg * var(--a)));\r
        inset: 0.5em;\r
        text-align: center;\r
        > b {\r
          display: flex;\r
          justify-content: center;\r
          transform: rotate(calc(-30deg * var(--a)));\r
        }\r
      }\r
    }\r
    .wc-clock__clock-ticks {\r
      > span {\r
        position: absolute;\r
        transform: rotate(calc(6deg * var(--ta)));\r
        text-align: center;\r
        inset: 0;\r
        display: flex;\r
        justify-content: center;\r
      }\r
      > span::before {\r
        content: "";\r
        width: var(--clock-tick-width);\r
        height: var(--clock-tick-height);\r
        border-radius: 0.1em;\r
        background-color: var(--clock-tick-color, var(--clock-color));\r
        align-self: flex-start;\r
      }\r
    }\r
  }\r
  .wc-clock__clock::before {\r
    position: absolute;\r
    content: "";\r
    background-color: #fff;\r
    width: 1.25rem;\r
    height: 1.25rem;\r
    border-radius: 50%;\r
  }\r
  .wc-clock__clock::after {\r
    position: absolute;\r
    content: "";\r
    background-color: #fff;\r
    box-shadow: 0 0 0 0.2rem var(--clock-background-color);\r
    width: 0.2rem;\r
    height: 0.2rem;\r
    border-radius: 50%;\r
    z-index: 2;\r
  }\r
\r
  .wc-clock__clock-hand {\r
    position: absolute;\r
    display: flex;\r
    justify-content: center;\r
    align-items: flex-end;\r
    width: 1rem;\r
    height: 1rem;\r
    transform: rotate(360deg);\r
    z-index: 1;\r
    > i {\r
      position: absolute;\r
      width: calc(0.05em * var(--width));\r
      height: calc(1em * var(--height));\r
      background: var(--color);\r
      border-radius: 100% 100% 50% 50%;\r
      display: flex;\r
      justify-content: center;\r
    }\r
    > i::before {\r
      content: "";\r
      position: absolute;\r
      width: calc(0.05em * var(--width) + 0.1em);\r
      height: calc(0.05em * var(--height) + 0.5em);\r
      background: var(--color);\r
      border-radius: 100% 100% 50% 50%;\r
      transform: translate(0, 0.25em);\r
    }\r
    > i::after {\r
      content: "";\r
      position: absolute;\r
      width: calc(0.05em * var(--width));\r
      height: calc(0.1em * var(--height));\r
      background: var(--color);\r
      border-radius: 1rem 1rem 0.5rem 0.5rem;\r
      top: 100%;\r
    }\r
  }\r
</style>\r
<div id="wc-clock__container" class="wc-clock__container">\r
  <div id="wc-clock__clock" class="wc-clock__clock">\r
    <div id="wc-clock__clock-minutes-hand" class="wc-clock__clock-hand">\r
      <i\r
        style="\r
          --color: var(--minutes-hand-color);\r
          --width: var(--minutes-hand-width);\r
          --height: var(--minutes-hand-height);\r
        "\r
      ></i>\r
    </div>\r
    <div id="wc-clock__clock-hours-hand" class="wc-clock__clock-hand">\r
      <i\r
        style="\r
          --color: var(--hours-hand-color);\r
          --width: var(--hours-hand-width);\r
          --height: var(--hours-hand-height);\r
        "\r
      ></i>\r
    </div>\r
    <div id="wc-clock__clock-seconds-hand" class="wc-clock__clock-hand">\r
      <i\r
        style="\r
          --color: var(--seconds-hand-color);\r
          --width: var(--seconds-hand-width);\r
          --height: var(--seconds-hand-height);\r
        "\r
      ></i>\r
    </div>\r
\r
    <div class="wc-clock__clock-labels" id="wc-clock__clock-labels"></div>\r
    <div class="wc-clock__clock-ticks" id="wc-clock__clock-ticks"></div>\r
  </div>\r
</div>\r
`,n={get componentName(){return"wc-clock"},get componentAttributes(){return{"minutes-ticks":"minutes-ticks","hours-ticks":"hours-ticks","time-zone":"time-zone","fixed-time":"fixed-time","hours-labels":"hours-labels"}},get componentTemplate(){const w=document.createElement("template");return w.innerHTML=r,w},get hoursLabels(){return Array.from({length:12},(w,T)=>T+1)},get fixedTime(){return[10,10,30]},get timeZone(){return"Europe/Paris"}},h=class h extends HTMLElement{constructor(){super();f(this,m);f(this,u);f(this,g);f(this,b);f(this,k,void 0);this.attachShadow({mode:"open"});const c=n.componentTemplate.content.cloneNode(!0);this.shadowRoot.append(c),this.hoursLabels=n.hoursLabels}static get tagName(){return n.componentName}static get attributes(){return n.componentAttributes}static get observedAttributes(){return Object.values(h.attributes)}connectedCallback(){l(this,m,p).call(this)}disconnectedCallback(){clearInterval(y(this,k))}attributeChangedCallback(c,o,e){switch(c){case h.attributes["hours-labels"]:this.hoursLabels=e===""?n.hoursLabels:e?e.split(","):[],l(this,g,E).call(this);break;case h.attributes["minutes-ticks"]:l(this,b,x).call(this,e===""?Array.from({length:60},(s,i)=>{if(i%5!=0)return i}).filter(Number):[],!1);break;case h.attributes["hours-ticks"]:l(this,b,x).call(this,e===""?Array.from({length:12},(s,i)=>i*5):[]);break;case h.attributes["time-zone"]:this.timeZone=Intl.supportedValuesOf("timeZone").includes(e)?e:n.timeZone,l(this,m,p).call(this);break;case h.attributes["fixed-time"]:this.fixedTime=e===""?n.fixedTime:e&&e.split(":").map(Number)||null,l(this,m,p).call(this);break}}};k=new WeakMap,m=new WeakSet,p=function(){clearInterval(y(this,k));const c=this.shadowRoot.getElementById("wc-clock__clock-hours-hand"),o=this.shadowRoot.getElementById("wc-clock__clock-minutes-hand"),e=this.shadowRoot.getElementById("wc-clock__clock-seconds-hand");if(this.fixedTime){let s=new Date;s.setHours(...this.fixedTime),l(this,u,v).call(this,{date:s,hourHand:c,minuteHand:o,secondHand:e})}else{let s=new Date(new Date().toLocaleString("en",{timeZone:this.timeZone}));l(this,u,v).call(this,{date:s,hourHand:c,minuteHand:o,secondHand:e}),L(this,k,setInterval(()=>{s=new Date(new Date().toLocaleString("en",{timeZone:this.timeZone})),l(this,u,v).call(this,{date:s,hourHand:c,minuteHand:o,secondHand:e})},1e3))}},u=new WeakSet,v=function({date:c,hourHand:o,minuteHand:e,secondHand:s}){let i=c.getHours(),a=c.getMinutes(),I=c.getSeconds(),$=6*a,j=6*I,R=30*i+a/2;o.style.transform=`rotate(${R}deg)`,e.style.transform=`rotate(${$}deg)`,s.style.transform=`rotate(${j}deg)`},g=new WeakSet,E=function(){const c=this.shadowRoot.getElementById("wc-clock__clock-labels");let o=12/this.hoursLabels.length^0;c.replaceChildren(...this.hoursLabels.map((e,s)=>{let i=document.createElement("span");return i.innerHTML=`<b>${e}</b>`,i.style.setProperty("--a",(s+1)*o),i}))},b=new WeakSet,x=function(c,o=!0){const e=this.shadowRoot.getElementById("wc-clock__clock-ticks");let s=e.querySelectorAll(`[id^=${o?"minutes":"hours"}-ticks]`);e.replaceChildren(...c.map(i=>{let a=document.createElement("span");return a.id=`${o?"hours":"minutes"}-ticks-${i}`,a.style.setProperty("--ta",i),a.style.setProperty("--clock-tick-color",`var( --clock-${o?"hours":"minutes"}-ticks-color)`),a.style.setProperty("--clock-tick-width",`var(--clock-${o?"hours":"minutes"}-ticks-width)`),a.style.setProperty("--clock-tick-height",`var(--clock-${o?"hours":"minutes"}-ticks-height)`),a}),...s)};let d=h;customElements.define(d.tagName,d),t.ClockComponent=d,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});