@nectary/components 0.31.0 → 0.33.0

package/time-picker/index.js

@@ -0,0 +1,525 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$pickerHours, _$pickerMinutes, _$pickerTouch, _$needleHour, _$needleMinute, _$headerHours, _$headerHoursText, _$headerMinutes, _$headerMinutesText, _$ampm, _$submitButton, _hour, _minute, _getClickDegree, _onPickerClick, _render, _selectHour, _selectMinute, _onAmPmChange, _onSubmitButtonClick, _onHoursKeydown, _onMinutesKeydown;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../icon-button';
+import '../icons/done';
+import '../icons/arrow-drop-up';
+import '../icons/arrow-drop-down';
+import '../segmented-control';
+import '../segmented-control-option';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#digit-minutes,#picker-hours{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-icon-size:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-aqua-400)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" small aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const PICKER_RADIUS = 216 / 2;
+const MINUTE_DIGIT_SIZE = 30;
+const HOUR_12_DIGIT_SIZE = 26;
+const HOUR_24_DIGIT_SIZE = 26;
+const MINUTE_RADIUS = PICKER_RADIUS - MINUTE_DIGIT_SIZE;
+const HOUR_12_RADIUS = MINUTE_RADIUS - HOUR_12_DIGIT_SIZE;
+const HOUR_24_RADIUS = HOUR_12_RADIUS - HOUR_24_DIGIT_SIZE;
+const NEEDLE_HOUR_12_LENGTH = HOUR_12_RADIUS;
+const NEEDLE_HOUR_24_LENGTH = HOUR_24_RADIUS;
+const NEEDLE_MINUTE_LENGTH = MINUTE_RADIUS;
+defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$pickerMinutes = new WeakMap(), _$pickerTouch = new WeakMap(), _$needleHour = new WeakMap(), _$needleMinute = new WeakMap(), _$headerHours = new WeakMap(), _$headerHoursText = new WeakMap(), _$headerMinutes = new WeakMap(), _$headerMinutesText = new WeakMap(), _$ampm = new WeakMap(), _$submitButton = new WeakMap(), _hour = new WeakMap(), _minute = new WeakMap(), _getClickDegree = new WeakSet(), _onPickerClick = new WeakMap(), _render = new WeakSet(), _selectHour = new WeakSet(), _selectMinute = new WeakSet(), _onAmPmChange = new WeakMap(), _onSubmitButtonClick = new WeakMap(), _onHoursKeydown = new WeakMap(), _onMinutesKeydown = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _selectMinute);
+
+    _classPrivateMethodInitSpec(this, _selectHour);
+
+    _classPrivateMethodInitSpec(this, _render);
+
+    _classPrivateMethodInitSpec(this, _getClickDegree);
+
+    _classPrivateFieldInitSpec(this, _$pickerHours, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$pickerMinutes, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$pickerTouch, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$needleHour, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$needleMinute, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerHours, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerHoursText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerMinutes, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerMinutesText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$ampm, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$submitButton, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _hour, {
+      writable: true,
+      value: 0
+    });
+
+    _classPrivateFieldInitSpec(this, _minute, {
+      writable: true,
+      value: 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onPickerClick, {
+      writable: true,
+      value: e => {
+        const [cssDeg, rowIndex] = _classPrivateMethodGet(this, _getClickDegree, _getClickDegree2).call(this, e.x, e.y);
+
+        const isHourRowClick = rowIndex > 0;
+        const isHour24RowClick = rowIndex > 1;
+
+        if (isHourRowClick) {
+          const digitIndex = Math.round(cssDeg / 30) % 12;
+          const is24 = getBooleanAttribute(this, 'ampm') === false;
+
+          if (is24) {
+            if (isHour24RowClick) {
+              _classPrivateFieldSet(this, _hour, digitIndex === 0 ? 0 : digitIndex + 12);
+            } else {
+              _classPrivateFieldSet(this, _hour, digitIndex === 0 ? 12 : digitIndex);
+            }
+          } else {
+            _classPrivateFieldSet(this, _hour, digitIndex + (_classPrivateFieldGet(this, _$ampm).value === 'pm' ? 12 : 0));
+          }
+
+          _classPrivateFieldGet(this, _$headerHours).focus();
+        } else {
+          _classPrivateFieldSet(this, _minute, Math.round(cssDeg / 6) % 60);
+
+          _classPrivateFieldGet(this, _$headerMinutes).focus();
+        }
+
+        _classPrivateMethodGet(this, _render, _render2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onAmPmChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const value = e.detail;
+
+        switch (value) {
+          case 'am':
+            {
+              if (_classPrivateFieldGet(this, _hour) >= 12) {
+                _classPrivateFieldSet(this, _hour, _classPrivateFieldGet(this, _hour) - 12);
+
+                _classPrivateMethodGet(this, _render, _render2).call(this);
+              }
+
+              break;
+            }
+
+          case 'pm':
+            {
+              if (_classPrivateFieldGet(this, _hour) < 12) {
+                _classPrivateFieldSet(this, _hour, _classPrivateFieldGet(this, _hour) + 12);
+
+                _classPrivateMethodGet(this, _render, _render2).call(this);
+              }
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onSubmitButtonClick, {
+      writable: true,
+      value: () => {
+        const value = stringifyTime(_classPrivateFieldGet(this, _hour), _classPrivateFieldGet(this, _minute));
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: value
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onHoursKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'ArrowUp':
+            {
+              _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 1) % 24);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+
+          case 'ArrowDown':
+            {
+              _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 23) % 24);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onMinutesKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'ArrowUp':
+            {
+              _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 1) % 60);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+
+          case 'ArrowDown':
+            {
+              _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 59) % 60);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$pickerHours, shadowRoot.querySelector('#picker-hours'));
+
+    _classPrivateFieldSet(this, _$pickerMinutes, shadowRoot.querySelector('#picker-minutes'));
+
+    _classPrivateFieldSet(this, _$pickerTouch, shadowRoot.querySelector('#picker'));
+
+    _classPrivateFieldSet(this, _$needleHour, shadowRoot.querySelector('#needle-hour'));
+
+    _classPrivateFieldSet(this, _$needleMinute, shadowRoot.querySelector('#needle-minute'));
+
+    _classPrivateFieldSet(this, _$headerHours, shadowRoot.querySelector('#header-hours'));
+
+    _classPrivateFieldSet(this, _$headerMinutes, shadowRoot.querySelector('#header-minutes'));
+
+    _classPrivateFieldSet(this, _$headerHoursText, shadowRoot.querySelector('#header-hours > span'));
+
+    _classPrivateFieldSet(this, _$headerMinutesText, shadowRoot.querySelector('#header-minutes > span'));
+
+    _classPrivateFieldSet(this, _$ampm, shadowRoot.querySelector('#ampm'));
+
+    _classPrivateFieldSet(this, _$submitButton, shadowRoot.querySelector('#submit'));
+
+    _classPrivateFieldGet(this, _$needleMinute).style.height = `${NEEDLE_MINUTE_LENGTH}px`;
+    _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    const MINUTE_DIGIT_RADIUS = MINUTE_RADIUS + MINUTE_DIGIT_SIZE / 2;
+    const HOUR_12_DIGIT_RADIUS = HOUR_12_RADIUS + HOUR_12_DIGIT_SIZE / 2;
+    const HOUR_24_DIGIT_RADIUS = HOUR_24_RADIUS + HOUR_24_DIGIT_SIZE / 2;
+    const hours12Frag = document.createDocumentFragment();
+
+    for (let i = 0; i < 12; i++) {
+      const rad = Math.PI / 6 * (i - 3);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * HOUR_12_DIGIT_RADIUS;
+      const y = Math.sin(rad) * HOUR_12_DIGIT_RADIUS;
+      const hourDisplayValue = stringifyHourFace(i);
+      el.className = 'digit-hour-12';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = hourDisplayValue;
+      hours12Frag.appendChild(el);
+    }
+
+    _classPrivateFieldGet(this, _$pickerHours).appendChild(hours12Frag);
+
+    const hours24Frag = document.createDocumentFragment();
+
+    for (let i = 12; i < 24; i++) {
+      const rad = Math.PI / 6 * (i - 3);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * HOUR_24_DIGIT_RADIUS;
+      const y = Math.sin(rad) * HOUR_24_DIGIT_RADIUS;
+      const hourDisplayValue = stringifyHourFace(i);
+      el.className = 'digit-hour-24';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = hourDisplayValue;
+      hours24Frag.appendChild(el);
+    }
+
+    _classPrivateFieldGet(this, _$pickerHours).appendChild(hours24Frag);
+
+    const minutesFrag = document.createDocumentFragment();
+
+    for (let i = 0; i < 60; i += 5) {
+      const rad = Math.PI / 30 * (i - 15);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * MINUTE_DIGIT_RADIUS;
+      const y = Math.sin(rad) * MINUTE_DIGIT_RADIUS;
+      el.className = 'digit-minute';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = stringifyMinute(i);
+      minutesFrag.appendChild(el);
+    }
+
+    _classPrivateFieldGet(this, _$pickerMinutes).appendChild(minutesFrag);
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$pickerTouch).addEventListener('click', _classPrivateFieldGet(this, _onPickerClick));
+
+    _classPrivateFieldGet(this, _$ampm).addEventListener('change', _classPrivateFieldGet(this, _onAmPmChange));
+
+    _classPrivateFieldGet(this, _$submitButton).addEventListener('click', _classPrivateFieldGet(this, _onSubmitButtonClick));
+
+    _classPrivateFieldGet(this, _$headerHours).addEventListener('keydown', _classPrivateFieldGet(this, _onHoursKeydown));
+
+    _classPrivateFieldGet(this, _$headerMinutes).addEventListener('keydown', _classPrivateFieldGet(this, _onMinutesKeydown));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$pickerTouch).removeEventListener('click', _classPrivateFieldGet(this, _onPickerClick));
+
+    _classPrivateFieldGet(this, _$ampm).removeEventListener('change', _classPrivateFieldGet(this, _onAmPmChange));
+
+    _classPrivateFieldGet(this, _$submitButton).removeEventListener('click', _classPrivateFieldGet(this, _onSubmitButtonClick));
+
+    _classPrivateFieldGet(this, _$headerHours).removeEventListener('keydown', _classPrivateFieldGet(this, _onHoursKeydown));
+
+    _classPrivateFieldGet(this, _$headerMinutes).removeEventListener('keydown', _classPrivateFieldGet(this, _onMinutesKeydown));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'ampm', 'submit-aria-label'];
+  }
+
+  attributeChangedCallback(name, prevValue, newVal) {
+    if (newVal === prevValue) {
+      return;
+    }
+
+    switch (name) {
+      case 'value':
+        {
+          if (newVal === null) {
+            throw new Error('Missing "value" attribute');
+          }
+
+          const {
+            hours,
+            minutes
+          } = parseTime(newVal);
+
+          _classPrivateFieldSet(this, _hour, hours);
+
+          _classPrivateFieldSet(this, _minute, minutes);
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'ampm':
+        {
+          const isAmpm = isAttrTrue(newVal);
+          updateBooleanAttribute(this, 'ampm', isAmpm);
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'submit-aria-label':
+        {
+          _classPrivateFieldGet(this, _$submitButton).ariaLabel = newVal;
+          break;
+        }
+    }
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set ampm(value) {
+    updateBooleanAttribute(this, 'ampm', value);
+  }
+
+  get ampm() {
+    return getBooleanAttribute(this, 'ampm');
+  }
+
+  get submitButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$submitButton));
+  }
+
+  get amButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+
+    const $am = _classPrivateFieldGet(this, _$ampm).querySelector('[value="am"]');
+
+    return $am != null ? getRect($am) : null;
+  }
+
+  get pmButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+
+    const $pm = _classPrivateFieldGet(this, _$ampm).querySelector('[value="pm"]');
+
+    return $pm != null ? getRect($pm) : null;
+  }
+
+  hourDigitRect(hour) {
+    const $digit = _classPrivateFieldGet(this, _$pickerHours).children[hourToIndex(hour, !this.ampm)];
+
+    return $digit != null ? getRect($digit) : null;
+  }
+
+  minuteDigitRect(minute) {
+    const $digit = _classPrivateFieldGet(this, _$pickerMinutes).children[Math.round(minute / 5)];
+
+    return $digit != null ? getRect($digit) : null;
+  }
+
+}));
+
+function _getClickDegree2(x, y) {
+  const touchRect = _classPrivateFieldGet(this, _$pickerTouch).getBoundingClientRect();
+
+  const cx = touchRect.width / 2;
+  const cy = touchRect.height / 2;
+  const px = x - touchRect.x;
+  const py = touchRect.height - y + touchRect.y;
+  const dx = px - cx;
+  const dy = py - cy;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  const cosRad = dx / len;
+  const rad = Math.acos(cosRad * (dy < 0 ? -1 : 1));
+  const deg = rad * (180 / Math.PI);
+  let cssDeg = (deg - 90 - 360) % 360 * -1;
+
+  if (dy < 0) {
+    cssDeg += 180;
+  }
+
+  const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
+  return [cssDeg, rowIndex];
+}
+
+function _render2() {
+  const is24 = getBooleanAttribute(this, 'ampm') === false;
+
+  _classPrivateMethodGet(this, _selectHour, _selectHour2).call(this, is24);
+
+  _classPrivateMethodGet(this, _selectMinute, _selectMinute2).call(this);
+
+  _classPrivateFieldGet(this, _$headerHoursText).textContent = stringifyHour(_classPrivateFieldGet(this, _hour), is24);
+  _classPrivateFieldGet(this, _$headerMinutesText).textContent = stringifyMinute(_classPrivateFieldGet(this, _minute));
+  updateAttribute(_classPrivateFieldGet(this, _$headerHours), 'aria-valuenow', _classPrivateFieldGet(this, _hour));
+  updateAttribute(_classPrivateFieldGet(this, _$headerHours), 'aria-valuetext', _classPrivateFieldGet(this, _hour));
+  updateAttribute(_classPrivateFieldGet(this, _$headerMinutes), 'aria-valuenow', _classPrivateFieldGet(this, _minute));
+  updateAttribute(_classPrivateFieldGet(this, _$headerMinutes), 'aria-valuetext', _classPrivateFieldGet(this, _minute));
+}
+
+function _selectHour2(is24) {
+  const $hours = _classPrivateFieldGet(this, _$pickerHours).children;
+
+  const hourDigitIndex = _classPrivateFieldGet(this, _hour) % 12;
+  const selectedIndex = hourToIndex(_classPrivateFieldGet(this, _hour), is24);
+  const currentCssDeg = getNeedleRotationDeg(_classPrivateFieldGet(this, _$needleHour));
+  const hourCssDeg = getShortestCssDeg(currentCssDeg, hourDigitIndex * 30);
+
+  for (let i = 0; i < $hours.length; i++) {
+    setClass($hours[i], 'selected', i === selectedIndex);
+  }
+
+  _classPrivateFieldGet(this, _$needleHour).style.transform = `rotate(${hourCssDeg}deg)`;
+
+  if (is24) {
+    if (_classPrivateFieldGet(this, _hour) > 0 && _classPrivateFieldGet(this, _hour) <= 12) {
+      _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    } else {
+      _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_24_LENGTH}px`;
+    }
+  } else {
+    _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+  }
+
+  _classPrivateFieldGet(this, _$ampm).setAttribute('value', _classPrivateFieldGet(this, _hour) >= 0 && _classPrivateFieldGet(this, _hour) < 12 ? 'am' : 'pm');
+}
+
+function _selectMinute2() {
+  const $minutes = _classPrivateFieldGet(this, _$pickerMinutes).children;
+
+  const isNeedleSelected = _classPrivateFieldGet(this, _minute) % 5 === 0;
+  const selectedIndex = _classPrivateFieldGet(this, _minute) / 5;
+  const currentCssDeg = getNeedleRotationDeg(_classPrivateFieldGet(this, _$needleMinute));
+  const minuteCssDeg = getShortestCssDeg(currentCssDeg, _classPrivateFieldGet(this, _minute) * 6);
+
+  for (let i = 0; i < $minutes.length; i++) {
+    setClass($minutes[i], 'selected', selectedIndex === i);
+  }
+
+  setClass(_classPrivateFieldGet(this, _$needleMinute), 'selected', isNeedleSelected);
+  _classPrivateFieldGet(this, _$needleMinute).style.transform = `rotate(${minuteCssDeg}deg)`;
+}

package/time-picker/types.d.ts

@@ -0,0 +1,31 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchTimePickerElement = HTMLElement & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm: boolean;
+    readonly submitButtonRect: TRect;
+    readonly amButtonRect: TRect | null;
+    readonly pmButtonRect: TRect | null;
+    hourDigitRect(hour: number): TRect | null;
+    minuteDigitRect(minute: number): TRect | null;
+    /** Change value handler, return time in ISO 8601 format */
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Time value in ISO 8601 format */
+    setAttribute(name: 'value', value: string): void;
+    /** AM/PM 12-hour clock system, `false` by default */
+    setAttribute(name: 'ampm', value: boolean): void;
+};
+export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Submit button label that is used for a11y */
+    'submit-aria-label': string;
+    /** Change value handler, return time in ISO 8601 format */
+    onChange: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
+};

package/time-picker/types.js

@@ -0,0 +1 @@
+export {};

package/time-picker/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const parseTime: (value: string) => {
+    hours: number;
+    minutes: number;
+};
+export declare const stringifyTime: (hour: number, minute: number) => string;
+export declare const stringifyHour: (hour: number, is24: boolean) => string;
+export declare const stringifyHourFace: (hour: number) => string;
+export declare const stringifyMinute: (minute: number) => string;
+export declare const hourToIndex: (hour: number, is24: boolean) => number;
+export declare const getNeedleRotationDeg: (elem: HTMLElement) => number;
+export declare const getShortestCssDeg: (currentDeg: number, nextDeg: number) => number;

package/time-picker/utils.js

@@ -0,0 +1,94 @@
+export const parseTime = value => {
+  if (value === '') {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+
+  const timeParts = value.split(':');
+
+  if (timeParts.length < 3) {
+    throw new Error(`Incorrect time format: ${value}. Should be "hh:mm:ss"`);
+  }
+
+  const hours = parseInt(timeParts[0]);
+  const minutes = parseInt(timeParts[1]);
+  const seconds = parseInt(timeParts[2]);
+
+  if (isNaN(hours) || hours > 23 || hours < 0) {
+    throw new Error(`Invalid hours value: ${value}`);
+  }
+
+  if (isNaN(minutes) || minutes > 59 || minutes < 0) {
+    throw new Error(`Invalid minutes value: ${value}`);
+  }
+
+  if (isNaN(seconds) || seconds > 59 || seconds < 0) {
+    throw new Error(`Invalid seconds value: ${value}`);
+  }
+
+  return {
+    hours,
+    minutes
+  };
+};
+
+const pad = value => {
+  return value.toString().padStart(2, '0');
+};
+
+export const stringifyTime = (hour, minute) => {
+  return `${pad(hour)}:${pad(minute)}:00`;
+};
+export const stringifyHour = (hour, is24) => {
+  if (is24) {
+    return pad(hour);
+  }
+
+  if (hour === 0 || hour === 12) {
+    return '12';
+  }
+
+  return pad(hour % 12);
+};
+export const stringifyHourFace = hour => {
+  return hour === 0 ? '12' : hour === 12 ? '24' : String(hour);
+};
+export const stringifyMinute = minute => {
+  return pad(minute);
+};
+export const hourToIndex = (hour, is24) => {
+  if (is24) {
+    if (hour === 0) {
+      return 12;
+    }
+
+    if (hour === 12) {
+      return 0;
+    }
+
+    return hour;
+  }
+
+  return hour % 12;
+};
+export const getNeedleRotationDeg = elem => {
+  const match = elem.style.transform.match(/^rotate\((-?\d+)deg\)$/);
+
+  if (match === null) {
+    return 0;
+  }
+
+  return Number(match[1]);
+};
+export const getShortestCssDeg = (currentDeg, nextDeg) => {
+  const angle = currentDeg % 360;
+  const diff = (360 - (angle - nextDeg)) % 360;
+
+  if (diff > 180) {
+    return currentDeg - 360 + diff;
+  }
+
+  return currentDeg + diff;
+};

package/toggle/types.d.ts

@@ -6,8 +6,6 @@ export declare type TSinchToggleElement = HTMLElement & {
     labeled: boolean;
     disabled: boolean;
     text: string | null;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'small', value: ''): void;

package/utils.js

@@ -30,7 +30,7 @@ export class NectaryElement extends HTMLElement {
   attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',
-      delegatesFocus: true,
+      delegatesFocus: false,
       customElements: nectaryRegistry,
       ...options
     });