@nectary/components 0.38.0 → 0.40.0

package/time-picker/index.js

@@ -1,16 +1,3 @@
-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, _onChangeReactHandler;
-
-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';
@@ -18,7 +5,7 @@ import '../icons/arrow-drop-down';
 import '../segmented-control';
 import '../segmented-control-option';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, 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)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.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>';
+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)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.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-size-icon: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;
@@ -32,254 +19,38 @@ 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(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-time-picker', class extends NectaryElement {
+  #$pickerHours;
+  #$pickerMinutes;
+  #$pickerTouch;
+  #$needleHour;
+  #$needleMinute;
+  #$headerHours;
+  #$headerHoursText;
+  #$headerMinutes;
+  #$headerMinutesText;
+  #$ampm;
+  #$submitButton;
+  #hour = 0;
+  #minute = 0;
+
   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
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail: value
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onHoursKeydown, {
-      writable: true,
-      value: e => {
-        switch (e.key) {
-          case 'ArrowUp':
-            {
-              e.preventDefault();
-
-              _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 1) % 24);
-
-              _classPrivateMethodGet(this, _render, _render2).call(this);
-
-              break;
-            }
-
-          case 'ArrowDown':
-            {
-              e.preventDefault();
-
-              _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':
-            {
-              e.preventDefault();
-
-              _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 1) % 60);
-
-              _classPrivateMethodGet(this, _render, _render2).call(this);
-
-              break;
-            }
-
-          case 'ArrowDown':
-            {
-              e.preventDefault();
-
-              _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 59) % 60);
-
-              _classPrivateMethodGet(this, _render, _render2).call(this);
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     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`;
+    this.#$pickerHours = shadowRoot.querySelector('#picker-hours');
+    this.#$pickerMinutes = shadowRoot.querySelector('#picker-minutes');
+    this.#$pickerTouch = shadowRoot.querySelector('#picker');
+    this.#$needleHour = shadowRoot.querySelector('#needle-hour');
+    this.#$needleMinute = shadowRoot.querySelector('#needle-minute');
+    this.#$headerHours = shadowRoot.querySelector('#header-hours');
+    this.#$headerMinutes = shadowRoot.querySelector('#header-minutes');
+    this.#$headerHoursText = shadowRoot.querySelector('#header-hours > span');
+    this.#$headerMinutesText = shadowRoot.querySelector('#header-minutes > span');
+    this.#$ampm = shadowRoot.querySelector('#ampm');
+    this.#$submitButton = shadowRoot.querySelector('#submit');
+    this.#$needleMinute.style.height = `${NEEDLE_MINUTE_LENGTH}px`;
+    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;
@@ -297,8 +68,7 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
       hours12Frag.appendChild(el);
     }
 
-    _classPrivateFieldGet(this, _$pickerHours).appendChild(hours12Frag);
-
+    this.#$pickerHours.appendChild(hours12Frag);
     const hours24Frag = document.createDocumentFragment();
 
     for (let i = 12; i < 24; i++) {
@@ -313,8 +83,7 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
       hours24Frag.appendChild(el);
     }
 
-    _classPrivateFieldGet(this, _$pickerHours).appendChild(hours24Frag);
-
+    this.#$pickerHours.appendChild(hours24Frag);
     const minutesFrag = document.createDocumentFragment();
 
     for (let i = 0; i < 60; i += 5) {
@@ -328,35 +97,25 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
       minutesFrag.appendChild(el);
     }
 
-    _classPrivateFieldGet(this, _$pickerMinutes).appendChild(minutesFrag);
+    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));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$pickerTouch.addEventListener('click', this.#onPickerClick);
+    this.#$ampm.addEventListener('change', this.#onAmPmChange);
+    this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick);
+    this.#$headerHours.addEventListener('keydown', this.#onHoursKeydown);
+    this.#$headerMinutes.addEventListener('keydown', this.#onMinutesKeydown);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   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));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$pickerTouch.removeEventListener('click', this.#onPickerClick);
+    this.#$ampm.removeEventListener('change', this.#onAmPmChange);
+    this.#$submitButton.removeEventListener('click', this.#onSubmitButtonClick);
+    this.#$headerHours.removeEventListener('keydown', this.#onHoursKeydown);
+    this.#$headerMinutes.removeEventListener('keydown', this.#onMinutesKeydown);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
@@ -379,13 +138,9 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
             hours,
             minutes
           } = parseTime(newVal);
-
-          _classPrivateFieldSet(this, _hour, hours);
-
-          _classPrivateFieldSet(this, _minute, minutes);
-
-          _classPrivateMethodGet(this, _render, _render2).call(this);
-
+          this.#hour = hours;
+          this.#minute = minutes;
+          this.#render();
           break;
         }
 
@@ -393,15 +148,13 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
         {
           const isAmpm = isAttrTrue(newVal);
           updateBooleanAttribute(this, 'ampm', isAmpm);
-
-          _classPrivateMethodGet(this, _render, _render2).call(this);
-
+          this.#render();
           break;
         }
 
       case 'submit-aria-label':
         {
-          _classPrivateFieldGet(this, _$submitButton).ariaLabel = newVal;
+          updateAttribute(this.#$submitButton, 'aria-label', newVal);
           break;
         }
     }
@@ -427,8 +180,16 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
     return getBooleanAttribute(this, 'ampm');
   }
 
+  set submitAriaLabel(value) {
+    updateAttribute(this, 'submit-aria-label', value);
+  }
+
+  get submitAriaLabel() {
+    return getAttribute(this, 'submit-aria-label', '');
+  }
+
   get submitButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$submitButton));
+    return getRect(this.#$submitButton);
   }
 
   get amButtonRect() {
@@ -436,8 +197,7 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
       return null;
     }
 
-    const $am = _classPrivateFieldGet(this, _$ampm).querySelector('[value="am"]');
-
+    const $am = this.#$ampm.querySelector('[value="am"]');
     return $am != null ? getRect($am) : null;
   }
 
@@ -446,102 +206,198 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
       return null;
     }
 
-    const $pm = _classPrivateFieldGet(this, _$ampm).querySelector('[value="pm"]');
-
+    const $pm = this.#$ampm.querySelector('[value="pm"]');
     return $pm != null ? getRect($pm) : null;
   }
 
   hourDigitRect(hour) {
-    const $digit = _classPrivateFieldGet(this, _$pickerHours).children[hourToIndex(hour, !this.ampm)];
-
+    const $digit = 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)];
-
+    const $digit = 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;
+  #getClickDegree(x, y) {
+    const touchRect = 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];
   }
 
-  const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
-  return [cssDeg, rowIndex];
-}
+  #onPickerClick = e => {
+    const [cssDeg, rowIndex] = this.#getClickDegree(e.x, e.y);
+    const isHourRowClick = rowIndex > 0;
+    const isHour24RowClick = rowIndex > 1;
 
-function _render2() {
-  const is24 = getBooleanAttribute(this, 'ampm') === false;
+    if (isHourRowClick) {
+      const digitIndex = Math.round(cssDeg / 30) % 12;
+      const is24 = getBooleanAttribute(this, 'ampm') === false;
 
-  _classPrivateMethodGet(this, _selectHour, _selectHour2).call(this, is24);
+      if (is24) {
+        if (isHour24RowClick) {
+          this.#hour = digitIndex === 0 ? 0 : digitIndex + 12;
+        } else {
+          this.#hour = digitIndex === 0 ? 12 : digitIndex;
+        }
+      } else {
+        this.#hour = digitIndex + (this.#$ampm.value === 'pm' ? 12 : 0);
+      }
+
+      this.#$headerHours.focus();
+    } else {
+      this.#minute = Math.round(cssDeg / 6) % 60;
+      this.#$headerMinutes.focus();
+    }
+
+    this.#render();
+  };
+
+  #render() {
+    const is24 = getBooleanAttribute(this, 'ampm') === false;
+    this.#selectHour(is24);
+    this.#selectMinute();
+    this.#$headerHoursText.textContent = stringifyHour(this.#hour, is24);
+    this.#$headerMinutesText.textContent = stringifyMinute(this.#minute);
+    updateAttribute(this.#$headerHours, 'aria-valuenow', this.#hour);
+    updateAttribute(this.#$headerHours, 'aria-valuetext', this.#hour);
+    updateAttribute(this.#$headerMinutes, 'aria-valuenow', this.#minute);
+    updateAttribute(this.#$headerMinutes, 'aria-valuetext', this.#minute);
+  }
 
-  _classPrivateMethodGet(this, _selectMinute, _selectMinute2).call(this);
+  #selectHour(is24) {
+    const $hours = this.#$pickerHours.children;
+    const hourDigitIndex = this.#hour % 12;
+    const selectedIndex = hourToIndex(this.#hour, is24);
+    const currentCssDeg = getNeedleRotationDeg(this.#$needleHour);
+    const hourCssDeg = getShortestCssDeg(currentCssDeg, hourDigitIndex * 30);
 
-  _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));
-}
+    for (let i = 0; i < $hours.length; i++) {
+      setClass($hours[i], 'selected', i === selectedIndex);
+    }
 
-function _selectHour2(is24) {
-  const $hours = _classPrivateFieldGet(this, _$pickerHours).children;
+    this.#$needleHour.style.transform = `rotate(${hourCssDeg}deg)`;
 
-  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);
+    if (is24) {
+      if (this.#hour > 0 && this.#hour <= 12) {
+        this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+      } else {
+        this.#$needleHour.style.height = `${NEEDLE_HOUR_24_LENGTH}px`;
+      }
+    } else {
+      this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    }
 
-  for (let i = 0; i < $hours.length; i++) {
-    setClass($hours[i], 'selected', i === selectedIndex);
+    this.#$ampm.setAttribute('value', this.#hour >= 0 && this.#hour < 12 ? 'am' : 'pm');
   }
 
-  _classPrivateFieldGet(this, _$needleHour).style.transform = `rotate(${hourCssDeg}deg)`;
+  #selectMinute() {
+    const $minutes = this.#$pickerMinutes.children;
+    const isNeedleSelected = this.#minute % 5 === 0;
+    const selectedIndex = this.#minute / 5;
+    const currentCssDeg = getNeedleRotationDeg(this.#$needleMinute);
+    const minuteCssDeg = getShortestCssDeg(currentCssDeg, this.#minute * 6);
 
-  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`;
+    for (let i = 0; i < $minutes.length; i++) {
+      setClass($minutes[i], 'selected', selectedIndex === i);
     }
-  } else {
-    _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+
+    setClass(this.#$needleMinute, 'selected', isNeedleSelected);
+    this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
   }
 
-  _classPrivateFieldGet(this, _$ampm).setAttribute('value', _classPrivateFieldGet(this, _hour) >= 0 && _classPrivateFieldGet(this, _hour) < 12 ? 'am' : 'pm');
-}
+  #onAmPmChange = e => {
+    e.stopPropagation();
+    const value = e.detail;
+
+    switch (value) {
+      case 'am':
+        {
+          if (this.#hour >= 12) {
+            this.#hour -= 12;
+            this.#render();
+          }
 
-function _selectMinute2() {
-  const $minutes = _classPrivateFieldGet(this, _$pickerMinutes).children;
+          break;
+        }
 
-  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);
+      case 'pm':
+        {
+          if (this.#hour < 12) {
+            this.#hour += 12;
+            this.#render();
+          }
 
-  for (let i = 0; i < $minutes.length; i++) {
-    setClass($minutes[i], 'selected', selectedIndex === i);
-  }
+          break;
+        }
+    }
+  };
+  #onSubmitButtonClick = () => {
+    const value = stringifyTime(this.#hour, this.#minute);
+    this.dispatchEvent(new CustomEvent('change', {
+      bubbles: true,
+      detail: value
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  };
+  #onHoursKeydown = e => {
+    switch (e.key) {
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#hour = (this.#hour + 1) % 24;
+          this.#render();
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#hour = (this.#hour + 23) % 24;
+          this.#render();
+          break;
+        }
+    }
+  };
+  #onMinutesKeydown = e => {
+    switch (e.key) {
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 1) % 60;
+          this.#render();
+          break;
+        }
 
-  setClass(_classPrivateFieldGet(this, _$needleMinute), 'selected', isNeedleSelected);
-  _classPrivateFieldGet(this, _$needleMinute).style.transform = `rotate(${minuteCssDeg}deg)`;
-}
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 59) % 60;
+          this.#render();
+          break;
+        }
+    }
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});