@nectary/components 4.12.0 → 4.12.1

package/time-picker/index.js

@@ -1,13 +1,10 @@
-import "../icon/index.js";
-import "../segmented-control/index.js";
-import "../segmented-control-option/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getAttribute, getBooleanAttribute, setClass } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { stringifyHourFace, stringifyMinute, parseTime, hourToIndex, stringifyHour, getNeedleRotationDeg, getShortestCssDeg, stringifyTime } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 248px;\n    padding: 16px;\n    box-sizing: border-box;\n    gap: 16px;\n  }\n\n  #header {\n    position: relative;\n    width: 100%;\n    height: 48px;\n    font: var(--sinch-comp-time-picker-header-font);\n    line-height: 48px;\n    user-select: none;\n    color: var(--sinch-comp-time-picker-header-color-default-text-initial);\n  }\n\n  #footer {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 32px;\n  }\n\n  #picker {\n    position: relative;\n    width: 216px;\n    height: 216px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    border:\n      1px solid\n      var(--sinch-comp-time-picker-watch-face-color-default-border-initial);\n    background-color:\n      var(\n        --sinch-comp-time-picker-watch-face-color-default-background-initial\n      );\n  }\n\n  #picker-hours,\n  #picker-minutes {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .digit-hour-12,\n  .digit-hour-24,\n  .digit-minute {\n    position: absolute;\n    width: 28px;\n    height: 28px;\n    text-align: center;\n    top: calc(50% - 14px);\n    left: calc(50% - 14px);\n    z-index: 1;\n    cursor: pointer;\n  }\n\n  .digit-hour-12 {\n    font: var(--sinch-comp-time-picker-digit-font-default-h12);\n    color: var(--sinch-comp-time-picker-digit-color-default-h12-initial);\n    line-height: 28px;\n  }\n\n  .digit-hour-12.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-h12);\n    color: var(--sinch-comp-time-picker-digit-color-checked-h12-default);\n  }\n\n  .digit-hour-24 {\n    font: var(--sinch-comp-time-picker-digit-font-default-h24);\n    color: var(--sinch-comp-time-picker-digit-color-default-h24-initial);\n    line-height: 28px;\n  }\n\n  .digit-hour-24.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-h24);\n    color: var(--sinch-comp-time-picker-digit-color-checked-h24-initial);\n  }\n\n  .digit-minute {\n    font: var(--sinch-comp-time-picker-digit-font-default-minutes);\n    color: var(--sinch-comp-time-picker-digit-color-default-minute-initial);\n    line-height: 28px;\n  }\n\n  .digit-minute.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-minutes);\n    color: var(--sinch-comp-time-picker-digit-color-checked-minute-initial);\n  }\n\n  #picker-touch {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    border-radius: 50%;\n  }\n\n  #needle-hour,\n  #needle-minute,\n  #picker-touch::after {\n    background-color:\n      var(\n        --sinch-comp-time-picker-needle-color-default-background-initial\n      );\n  }\n\n  #needle-hour,\n  #needle-minute {\n    position: absolute;\n    transform-origin: bottom center;\n    transform: rotate(0deg);\n    bottom: 50%;\n    height: 50px;\n    transition-duration: 0.25s;\n    transition-timing-function: ease-in-out;\n    transition-property: transform height;\n    z-index: 2;\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion) {\n    #needle-hour,\n    #needle-minute {\n      transition: none;\n    }\n  }\n\n  #needle-hour {\n    width: 4px;\n    left: calc(50% - 2px);\n    border-radius: 2px;\n  }\n\n  #needle-minute {\n    width: 2px;\n    left: calc(50% - 1px);\n    border-radius: 1px;\n  }\n\n  #needle-hour:focus-visible,\n  #needle-minute:focus-visible {\n    background-color:\n      var(\n        --sinch-comp-time-picker-needle-color-default-background-focus\n      );\n  }\n\n  #needle-minute:not(.selected)::after {\n    content: "";\n    position: absolute;\n    transform: translateX(-50%);\n    left: 0;\n    top: -16px;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background-color:\n      var(\n        --sinch-comp-time-picker-digit-color-checked-minute-initial\n      );\n  }\n\n  #picker-touch::after {\n    content: "";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  #header-hours,\n  #header-minutes {\n    position: absolute;\n    padding: 0 4px;\n    width: 50px;\n    outline: none;\n  }\n\n  #header-hours {\n    right: calc(50% + 8px);\n    text-align: right;\n  }\n\n  #header-minutes {\n    left: calc(50% + 8px);\n  }\n\n  #header-colon {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  #submit {\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  #submit-icon {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-time-picker-header-color-default-icon-initial\n      );\n  }\n\n  :host([ampm]) .digit-hour-24 {\n    display: none;\n  }\n\n  :host(:not([ampm])) #footer {\n    display: none;\n  }\n</style>\n\n<div id="wrapper">\n  <div id="header">\n    <div\n      id="header-hours"\n      role="meter"\n      aria-valuemin="0"\n      aria-valuemax="23"\n      aria-valuenow="0"\n      aria-valuetext="0"\n    >\n      <span>00</span>\n    </div>\n    <div id="header-colon">&colon;</div>\n    <div\n      id="header-minutes"\n      role="meter"\n      aria-valuemin="0"\n      aria-valuemax="59"\n      aria-valuenow="0"\n      aria-valuetext="0"\n    >\n      <span>00</span>\n    </div>\n    <sinch-button id="submit" size="s" aria-label="Submit">\n      <sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="picker" aria-hidden="true">\n    <div id="picker-hours"></div>\n    <div id="picker-minutes"></div>\n    <div id="picker-touch">\n      <div id="needle-hour" tabindex="0"></div>\n      <div id="needle-minute" tabindex="0"></div>\n    </div>\n  </div>\n  <div id="footer">\n    <sinch-segmented-control id="ampm">\n      <sinch-segmented-control-option\n        value="am"\n        text="AM"\n        aria-label="AM"\n      ></sinch-segmented-control-option>\n      <sinch-segmented-control-option\n        value="pm"\n        text="PM"\n        aria-label="PM"\n      ></sinch-segmented-control-option>\n    </sinch-segmented-control>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+import '../icon';
+import '../segmented-control';
+import '../segmented-control-option';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrEqual, 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-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#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-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#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;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#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-comp-time-picker-needle-color-default-background-initial)}#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;outline:0}@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-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#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-comp-time-picker-digit-color-checked-minute-initial)}#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}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-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" tabindex="0"></div><div id="needle-minute" tabindex="0"></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;
@@ -19,7 +16,7 @@ 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;
-class TimePicker extends NectaryElement {
+export class TimePicker extends NectaryElement {
   #$pickerHours;
   #$pickerMinutes;
   #$pickerTouch;
@@ -38,17 +35,17 @@ class TimePicker extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    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.#$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;
@@ -57,11 +54,11 @@ class TimePicker extends NectaryElement {
     const hours12Frag = document.createDocumentFragment();
     for (let i = 0; i < 12; i++) {
       const rad = Math.PI / 6 * (i - 3);
-      const el = document.createElement("div");
+      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.className = 'digit-hour-12';
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = hourDisplayValue;
       hours12Frag.appendChild(el);
@@ -70,11 +67,11 @@ class TimePicker extends NectaryElement {
     const hours24Frag = document.createDocumentFragment();
     for (let i = 12; i < 24; i++) {
       const rad = Math.PI / 6 * (i - 3);
-      const el = document.createElement("div");
+      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.className = 'digit-hour-24';
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = hourDisplayValue;
       hours24Frag.appendChild(el);
@@ -83,10 +80,10 @@ class TimePicker extends NectaryElement {
     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 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.className = 'digit-minute';
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = stringifyMinute(i);
       minutesFrag.appendChild(el);
@@ -98,60 +95,66 @@ class TimePicker extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.#$pickerTouch.addEventListener("click", this.#onPickerClick, options);
-    this.#$ampm.addEventListener("-change", this.#onAmPmChange, options);
-    this.#$submitButton.addEventListener("click", this.#onSubmitButtonClick, options);
-    this.#$needleHour.addEventListener("keydown", this.#onHoursKeydown, options);
-    this.#$needleMinute.addEventListener("keydown", this.#onMinutesKeydown, options);
-    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#$pickerTouch.addEventListener('click', this.#onPickerClick, options);
+    this.#$ampm.addEventListener('-change', this.#onAmPmChange, options);
+    this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick, options);
+    this.#$needleHour.addEventListener('keydown', this.#onHoursKeydown, options);
+    this.#$needleMinute.addEventListener('keydown', this.#onMinutesKeydown, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "ampm", "submit-aria-label"];
+    return ['value', 'ampm', 'submit-aria-label'];
   }
   attributeChangedCallback(name, prevValue, newVal) {
     if (isAttrEqual(prevValue, newVal)) {
       return;
     }
     switch (name) {
-      case "value": {
-        const { hours, minutes } = parseTime(newVal);
-        this.#hour = hours;
-        this.#minute = minutes;
-        this.#render();
-        break;
-      }
-      case "ampm": {
-        this.#render();
-        updateBooleanAttribute(this, "ampm", isAttrTrue(newVal));
-        break;
-      }
-      case "submit-aria-label": {
-        updateAttribute(this.#$submitButton, "aria-label", newVal);
-        break;
-      }
+      case 'value':
+        {
+          const {
+            hours,
+            minutes
+          } = parseTime(newVal);
+          this.#hour = hours;
+          this.#minute = minutes;
+          this.#render();
+          break;
+        }
+      case 'ampm':
+        {
+          this.#render();
+          updateBooleanAttribute(this, 'ampm', isAttrTrue(newVal));
+          break;
+        }
+      case 'submit-aria-label':
+        {
+          updateAttribute(this.#$submitButton, 'aria-label', newVal);
+          break;
+        }
     }
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set ampm(value) {
-    updateBooleanAttribute(this, "ampm", value);
+    updateBooleanAttribute(this, 'ampm', value);
   }
   get ampm() {
-    return getBooleanAttribute(this, "ampm");
+    return getBooleanAttribute(this, 'ampm');
   }
   set submitAriaLabel(value) {
-    updateAttribute(this, "submit-aria-label", value);
+    updateAttribute(this, 'submit-aria-label', value);
   }
   get submitAriaLabel() {
-    return getAttribute(this, "submit-aria-label", "");
+    return getAttribute(this, 'submit-aria-label', '');
   }
   get submitButtonRect() {
     return getRect(this.#$submitButton);
@@ -197,13 +200,13 @@ class TimePicker extends NectaryElement {
     const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
     return [cssDeg, rowIndex];
   }
-  #onPickerClick = (e) => {
+  #onPickerClick = e => {
     const [cssDeg, rowIndex] = this.#getClickDegree(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;
+      const is24 = getBooleanAttribute(this, 'ampm') === false;
       if (is24) {
         if (isHour24RowClick) {
           this.#hour = digitIndex === 0 ? 0 : digitIndex + 12;
@@ -211,7 +214,7 @@ class TimePicker extends NectaryElement {
           this.#hour = digitIndex === 0 ? 12 : digitIndex;
         }
       } else {
-        this.#hour = digitIndex + (this.#$ampm.value === "pm" ? 12 : 0);
+        this.#hour = digitIndex + (this.#$ampm.value === 'pm' ? 12 : 0);
       }
       this.#$headerHours.focus();
     } else {
@@ -221,15 +224,15 @@ class TimePicker extends NectaryElement {
     this.#render();
   };
   #render() {
-    const is24 = getBooleanAttribute(this, "ampm") === false;
+    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);
+    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);
   }
   #selectHour(is24) {
     const $hours = this.#$pickerHours.children;
@@ -238,7 +241,7 @@ class TimePicker extends NectaryElement {
     const currentCssDeg = getNeedleRotationDeg(this.#$needleHour);
     const hourCssDeg = getShortestCssDeg(currentCssDeg, hourDigitIndex * 30);
     for (let i = 0; i < $hours.length; i++) {
-      setClass($hours[i], "selected", i === selectedIndex);
+      setClass($hours[i], 'selected', i === selectedIndex);
     }
     this.#$needleHour.style.transform = `rotate(${hourCssDeg}deg)`;
     if (is24) {
@@ -250,7 +253,7 @@ class TimePicker extends NectaryElement {
     } else {
       this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
     }
-    this.#$ampm.setAttribute("value", this.#hour >= 0 && this.#hour < 12 ? "am" : "pm");
+    this.#$ampm.setAttribute('value', this.#hour >= 0 && this.#hour < 12 ? 'am' : 'pm');
   }
   #selectMinute() {
     const $minutes = this.#$pickerMinutes.children;
@@ -259,75 +262,76 @@ class TimePicker extends NectaryElement {
     const currentCssDeg = getNeedleRotationDeg(this.#$needleMinute);
     const minuteCssDeg = getShortestCssDeg(currentCssDeg, this.#minute * 6);
     for (let i = 0; i < $minutes.length; i++) {
-      setClass($minutes[i], "selected", selectedIndex === i);
+      setClass($minutes[i], 'selected', selectedIndex === i);
     }
-    setClass(this.#$needleMinute, "selected", isNeedleSelected);
+    setClass(this.#$needleMinute, 'selected', isNeedleSelected);
     this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
   }
-  #onAmPmChange = (e) => {
+  #onAmPmChange = e => {
     const value = e.detail;
     switch (value) {
-      case "am": {
-        if (this.#hour >= 12) {
-          this.#hour -= 12;
-          this.#render();
+      case 'am':
+        {
+          if (this.#hour >= 12) {
+            this.#hour -= 12;
+            this.#render();
+          }
+          break;
         }
-        break;
-      }
-      case "pm": {
-        if (this.#hour < 12) {
-          this.#hour += 12;
-          this.#render();
+      case 'pm':
+        {
+          if (this.#hour < 12) {
+            this.#hour += 12;
+            this.#render();
+          }
+          break;
         }
-        break;
-      }
     }
   };
   #onSubmitButtonClick = () => {
     const value = stringifyTime(this.#hour, this.#minute);
-    this.dispatchEvent(
-      new CustomEvent("-change", {
-        detail: value
-      })
-    );
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
   };
-  #onHoursKeydown = (e) => {
+  #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;
-      }
+      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) => {
+  #onMinutesKeydown = e => {
     switch (e.key) {
-      case "ArrowUp": {
-        e.preventDefault();
-        this.#minute = (this.#minute + 1) % 60;
-        this.#render();
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        this.#minute = (this.#minute + 59) % 60;
-        this.#render();
-        break;
-      }
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 1) % 60;
+          this.#render();
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 59) % 60;
+          this.#render();
+          break;
+        }
     }
   };
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
 }
-defineCustomElement("sinch-time-picker", TimePicker);
-export {
-  TimePicker
-};
+defineCustomElement('sinch-time-picker', TimePicker);

package/time-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchTimePickerProps = {
     /** Time value in ISO 8601 format */
     value: string;
@@ -50,23 +50,3 @@ export type TSinchTimePicker = {
 };
 export type TSinchTimePickerElement = NectaryComponentVanillaByType<TSinchTimePicker>;
 export type TSinchTimePickerReact = NectaryComponentReactByType<TSinchTimePicker>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-time-picker': TSinchTimePicker;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-time-picker': NectaryComponentVanilla<'sinch-time-picker'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
-        }
-    }
-}

package/time-picker/types.js

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

package/time-picker/utils.js

@@ -1,40 +1,52 @@
-const parseTime = (value) => {
-  if (value === "" || value === null) {
-    return { hours: 0, minutes: 0 };
+export const parseTime = value => {
+  if (value === '' || value === null) {
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
-  const timeParts = value.split(":");
-  const hours = parseInt(timeParts[0] ?? "00");
-  const minutes = parseInt(timeParts[1] ?? "00");
+  const timeParts = value.split(':');
+  const hours = parseInt(timeParts[0] ?? '00');
+  const minutes = parseInt(timeParts[1] ?? '00');
   if (isNaN(hours) || hours > 23 || hours < 0) {
-    return { hours: 0, minutes: 0 };
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   if (isNaN(minutes) || minutes > 59 || minutes < 0) {
-    return { hours: 0, minutes: 0 };
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
-  return { hours, minutes };
+  return {
+    hours,
+    minutes
+  };
 };
-const pad = (value) => {
-  return value.toString().padStart(2, "0");
+const pad = value => {
+  return value.toString().padStart(2, '0');
 };
-const stringifyTime = (hour, minute) => {
+export const stringifyTime = (hour, minute) => {
   return `${pad(hour)}:${pad(minute)}:00`;
 };
-const stringifyHour = (hour, is24) => {
+export const stringifyHour = (hour, is24) => {
   if (is24) {
     return pad(hour);
   }
   if (hour === 0 || hour === 12) {
-    return "12";
+    return '12';
   }
   return pad(hour % 12);
 };
-const stringifyHourFace = (hour) => {
-  return hour === 0 ? "12" : hour === 12 ? "24" : String(hour);
+export const stringifyHourFace = hour => {
+  return hour === 0 ? '12' : hour === 12 ? '24' : String(hour);
 };
-const stringifyMinute = (minute) => {
+export const stringifyMinute = minute => {
   return pad(minute);
 };
-const hourToIndex = (hour, is24) => {
+export const hourToIndex = (hour, is24) => {
   if (is24) {
     if (hour === 0) {
       return 12;
@@ -46,28 +58,18 @@ const hourToIndex = (hour, is24) => {
   }
   return hour % 12;
 };
-const getNeedleRotationDeg = (elem) => {
+export const getNeedleRotationDeg = elem => {
   const match = elem.style.transform.match(/^rotate\((-?\d+)deg\)$/);
   if (match === null) {
     return 0;
   }
   return Number(match[1]);
 };
-const getShortestCssDeg = (currentDeg, nextDeg) => {
+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;
-};
-export {
-  getNeedleRotationDeg,
-  getShortestCssDeg,
-  hourToIndex,
-  parseTime,
-  stringifyHour,
-  stringifyHourFace,
-  stringifyMinute,
-  stringifyTime
-};
+};

package/title/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchTitleType } from './types';
-export * from './types';
+import type { TSinchTitleType, TSinchTitle } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Title extends NectaryElement {
     #private;
     constructor();
@@ -14,3 +14,23 @@ export declare class Title extends NectaryElement {
     set ellipsis(isEllipsis: boolean);
     get ellipsis(): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-title': TSinchTitle;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-title': NectaryComponentVanilla<'sinch-title'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-title': NectaryComponentReact<'sinch-title'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-title': NectaryComponentReact<'sinch-title'>;
+        }
+    }
+}