https://timex.com/cdn/shop/t/1772/assets/component-clock.js?v=27038552759167322261789367552

1import{LitElement,html,css}from"@hh/global.js";export class HHClock extends LitElement{static properties={label:{},timezone:{},time:{state:!0},min:{state:!0},sec:{state:!0},hour:{state:!0},valhour:{state:!0},valminute:{state:!0}};static styles=css`
2    .clock-wrapper {
3      display: inline-flex;
4      flex-wrap: wrap;
5      column-gap: 1rem;
6      row-gap: 1rem;
7      align-items: center;
8    }
9
10    .clock-body {
11      height: 2.1rem;
12      width: 2.1rem;
13      border-radius: 50%;
14      position: relative;
15      border: 1.095px solid var(--watch-body);
16    }
17
18    .hand {
19      background: var(--watch-hand);
20      position: absolute;
21      bottom: 50%;
22      left: 50%;
23      transform-origin: bottom;
24      transition: all 0.05s;
25      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
26    }
27
28    .second {
29      background: var(--watch-second);
30      width: 1.095px;
31      height: 0.93rem;
32      transform: translateX(-50%) rotate(0deg);
33      z-index: 3;
34    }
35
36    .minute {
37      height: 0.971rem;
38      width: 1.095px;
39      transform: translateX(-50%) rotate(0deg);
40      background: var(--watch-hand);
41      z-index: 2;
42    }
43
44    .hour {
45      height: 0.528rem;
46      width: 1.095px;
47      background: var(--watch-hand);
48      transform: translateX(-50%) rotate(0deg);
49      z-index: 1;
50    }
51
52    .label {
53      font-size: 1.2rem;
54      line-height: 1.6rem;
55      letter-spacing: 0.01em;
56      font-weight: 300;
57      min-width: 10rem;
58    }
59
60    :host([theme='footer']) .label {
61      min-width: 0;
62    }
63
64    :host([theme='section']) .clock-wrapper {
65      flex-direction: column;
66      row-gap: 0.7rem;
67    }
68
69    :host([theme='section']) .label {
70      font: var(--label-font);
71      color: var(--watch-body);
72    }
73
74    :host([theme='section']) .clock-body {
75      width: 3.034rem;
76      height: 3.034rem;
77      border-width: var(--border-width-mobile);
78      box-sizing: border-box;
79    }
80
81    :host([theme='section']) .second,
82    :host([theme='section']) .minute,
83    :host([theme='section']) .hour {
84      width: var(--border-width-mobile);
85    }
86
87    :host([theme='section']) .second {
88      height: 1.224rem;
89    }
90
91    :host([theme='section']) .minute {
92      height: 1.278rem;
93    }
94
95    :host([theme='section']) .hour {
96      height: 0.695rem;
97    }
98
99    @media screen and (min-width: 1000px) {
100      :host([theme='section']) .clock-wrapper {
101        row-gap: 0.678rem;
102      }
103
104      :host([theme='section']) .clock-body {
105        width: 3.679rem;
106        height: 3.679rem;
107        border-width: 2.1px;
108      }
109
110      :host([theme='section']) .second,
111      :host([theme='section']) .minute,
112      :host([theme='section']) .hour {
113        width: var(--border-width);
114      }
115
116      :host([theme='section']) .second {
117        height: 1.485rem;
118      }
119
120      :host([theme='section']) .minute {
121        height: 1.55rem;
122      }
123
124      :host([theme='section']) .hour {
125        height: 0.843rem;
126      }
127    }
128
129    @media screen and (min-width: 1440px) {
130      :host([theme='footer']) .label {
131        min-width: 10rem;
132      }
133    }
134  `;connectedCallback(){super.connectedCallback(),setInterval(this.startClock.bind(this),1e3)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this.startClock)}firstUpdated(){this.time=this.renderRoot.querySelector(".hours"),this.sec=this.renderRoot.querySelector(".second"),this.min=this.renderRoot.querySelector(".minute"),this.hour=this.renderRoot.querySelector(".hour")}render(){return html`
135      <div class="clock-wrapper">
136        <div
137          class="clock-body"
138          role="img"
139          aria-label="${this.label+" "+this.valhour+":"+this.valminute}"
140        >
141          <div class="hand second"></div>
142          <div class="hand minute"></div>
143          <div class="hand hour"></div>
144        </div>
145
146        <div class="label">
147          <p>
148            <span aria-hidden="true">${this.label}</span>
149          </p>
150        </div>
151      </div>
152    `}startClock(){const local=new Date().toLocaleString("en-US",{timeZone:this.timezone}),now=new Date(local),seconds=now.getSeconds(),minutes=now.getMinutes(),hours=now.getHours();

152let secDeg=seconds*(360/60)+minutes*360,minDeg=minutes*(360/60)+seconds/12,hourDeg=hours*(360/12)+minutes/12*(360/60);this.valhour=("0"+hours).slice(-2),this.valminute=("0"+minutes).slice(-2),this.sec.style.transform=`translateX(-50%) rotate(${secDeg}deg)`,this.min.style.transform=`translateX(-50%) rotate(${minDeg}deg)`,this.hour.style.transform=`translateX(-50%) rotate(${hourDeg}deg)`}}customElements.define("hh-clock",HHClock);
153//# sourceMappingURL=/cdn/shop/t/1772/assets/component-clock.js.map?v=27038552759167322261789367552