@nectary/components 2.9.0 → 2.11.0

package/tile-control-option/types.d.ts

@@ -0,0 +1,37 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTileControlOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Small */
+    small: boolean;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text content */
+    setAttribute(attr: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/tile-control-option/types.js

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

package/time-picker/index.d.ts

@@ -0,0 +1,15 @@
+import '../icon-button';
+import '../icon';
+import '../segmented-control';
+import '../segmented-control-option';
+import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-time-picker': TSinchTimePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-time-picker': TSinchTimePickerElement;
+    }
+}

package/time-picker/index.js

@@ -0,0 +1,337 @@
+import '../icon-button';
+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-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon" name="done"></sinch-icon></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" 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;
+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', class extends NectaryElement {
+  #$pickerHours;
+  #$pickerMinutes;
+  #$pickerTouch;
+  #$needleHour;
+  #$needleMinute;
+  #$headerHours;
+  #$headerHoursText;
+  #$headerMinutes;
+  #$headerMinutesText;
+  #$ampm;
+  #$submitButton;
+  #hour = 0;
+  #minute = 0;
+  #controller = null;
+  constructor() {
+    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.#$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;
+    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);
+    }
+    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);
+    }
+    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);
+    }
+    this.#$pickerMinutes.appendChild(minutesFrag);
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    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);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    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;
+        }
+    }
+  }
+  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');
+  }
+  set submitAriaLabel(value) {
+    updateAttribute(this, 'submit-aria-label', value);
+  }
+  get submitAriaLabel() {
+    return getAttribute(this, 'submit-aria-label', '');
+  }
+  get submitButtonRect() {
+    return getRect(this.#$submitButton);
+  }
+  get amButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+    const $am = this.#$ampm.querySelector('[value="am"]');
+    return $am != null ? getRect($am) : null;
+  }
+  get pmButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+    const $pm = this.#$ampm.querySelector('[value="pm"]');
+    return $pm != null ? getRect($pm) : null;
+  }
+  hourDigitRect(hour) {
+    const $digit = this.#$pickerHours.children[hourToIndex(hour, !this.ampm)];
+    return $digit != null ? getRect($digit) : null;
+  }
+  minuteDigitRect(minute) {
+    const $digit = this.#$pickerMinutes.children[Math.round(minute / 5)];
+    return $digit != null ? getRect($digit) : null;
+  }
+  #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];
+  }
+  #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;
+      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);
+  }
+  #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);
+    for (let i = 0; i < $hours.length; i++) {
+      setClass($hours[i], 'selected', i === selectedIndex);
+    }
+    this.#$needleHour.style.transform = `rotate(${hourCssDeg}deg)`;
+    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`;
+    }
+    this.#$ampm.setAttribute('value', this.#hour >= 0 && this.#hour < 12 ? 'am' : 'pm');
+  }
+  #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);
+    for (let i = 0; i < $minutes.length; i++) {
+      setClass($minutes[i], 'selected', selectedIndex === i);
+    }
+    setClass(this.#$needleMinute, 'selected', isNeedleSelected);
+    this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
+  }
+  #onAmPmChange = e => {
+    const value = e.detail;
+    switch (value) {
+      case 'am':
+        {
+          if (this.#hour >= 12) {
+            this.#hour -= 12;
+            this.#render();
+          }
+          break;
+        }
+      case 'pm':
+        {
+          if (this.#hour < 12) {
+            this.#hour += 12;
+            this.#render();
+          }
+          break;
+        }
+    }
+  };
+  #onSubmitButtonClick = () => {
+    const value = stringifyTime(this.#hour, this.#minute);
+    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;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 59) % 60;
+          this.#render();
+          break;
+        }
+    }
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/time-picker/types.d.ts

@@ -0,0 +1,34 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchTimePickerElement = HTMLElement & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm: boolean;
+    /** Submit button label that is used for a11y */
+    submitAriaLabel: string;
+    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;
+    /** Submit button label that is used for a11y */
+    setAttribute(name: 'submit-aria-label', value: string): void;
+};
+export 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 */
+    'on-change'?: (e: 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 | null) => {
+    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,75 @@
+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');
+  if (isNaN(hours) || hours > 23 || hours < 0) {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+  if (isNaN(minutes) || minutes > 59 || minutes < 0) {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+  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/title/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTitleElement, TSinchTitleReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-title': TSinchTitleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-title': TSinchTitleElement;
+    }
+}

package/title/index.js

@@ -0,0 +1,60 @@
+import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-title', class extends NectaryElement {
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'heading');
+  }
+  static get observedAttributes() {
+    return ['text', 'level', 'ellipsis'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'level':
+        {
+          updateAttribute(this, 'aria-level', newVal);
+          break;
+        }
+      case 'ellipsis':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          updateBooleanAttribute(this, 'ellipsis', isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
+});

package/title/types.d.ts

@@ -0,0 +1,31 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
+export type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
+export type TSinchTitleElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Type */
+    type: TSinchTitleType;
+    /** Semantical level */
+    level: TSinchTitleLevel;
+    /** Cuts the long title with “…” ellipsis */
+    ellipsis: boolean;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTitleType): void;
+    /** Semantical level */
+    setAttribute(name: 'level', value: TSinchTitleLevel): void;
+    /** Cuts the long title with “…” ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
+};
+export type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
+    /** Text */
+    text: string;
+    /** Type */
+    type: TSinchTitleType;
+    /** Semantical level */
+    level: TSinchTitleLevel;
+    /** Cuts the long title with “…” ellipsis */
+    ellipsis?: boolean;
+};

package/title/types.js

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

package/title/utils.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchTitleLevel, TSinchTitleType } from './types';
+export declare const typeValues: readonly TSinchTitleType[];
+export declare const getTitleLevelFromType: (type: TSinchTitleType) => TSinchTitleLevel;

package/title/utils.js

@@ -0,0 +1,17 @@
+export const typeValues = ['xl', 'l', 'm', 's', 'xs'];
+export const getTitleLevelFromType = type => {
+  switch (type) {
+    case 'xl':
+      return '1';
+    case 'l':
+      return '2';
+    case 'm':
+      return '3';
+    case 's':
+      return '4';
+    case 'xs':
+      return '5';
+    default:
+      return '';
+  }
+};

package/toast/index.d.ts

@@ -0,0 +1,13 @@
+import '../icon';
+import '../rich-text';
+import type { TSinchToastElement, TSinchToastReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': TSinchToastReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast': TSinchToastElement;
+    }
+}