@nectary/components 2.8.8 → 2.9.0

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

@@ -1,37 +0,0 @@
-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

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

package/time-picker/index.d.ts

@@ -1,15 +0,0 @@
-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

@@ -1,337 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

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

package/time-picker/utils.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,75 +0,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');
-  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

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

package/title/index.js

@@ -1,60 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/title/utils.d.ts

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

package/title/utils.js

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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;
-    }
-}