@nectary/components 2.4.0

package/date-picker/index.js

@@ -0,0 +1,381 @@
+import '../icon-button';
+import '../icon';
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon" name="keyboard_double_arrow_left"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon" name="keyboard_arrow_left"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon" name="keyboard_arrow_right"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon" name="keyboard_double_arrow_right"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
+import { areDatesEqual, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isDateOnScreen, isoToDate, isValidDate, sortDates, today } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-date-picker', class extends NectaryElement {
+  #$month;
+  #$weeks;
+  #$days;
+  #$weekDayNames;
+  #uiDate = null;
+  #date1 = null;
+  #date2 = null;
+  #minDate = null;
+  #maxDate = null;
+  #$prevMonth;
+  #$nextMonth;
+  #$prevYear;
+  #$nextYear;
+  #$date;
+  #monthNames;
+  #controller = null;
+  #isHoverSubscribed = false;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$prevMonth = shadowRoot.querySelector('#prev-month');
+    this.#$nextMonth = shadowRoot.querySelector('#next-month');
+    this.#$prevYear = shadowRoot.querySelector('#prev-year');
+    this.#$nextYear = shadowRoot.querySelector('#next-year');
+    this.#$date = shadowRoot.querySelector('#date');
+    this.#$month = shadowRoot.querySelector('#month');
+    this.#$days = [];
+    this.#$weeks = [];
+    this.#monthNames = [];
+    shadowRoot.querySelectorAll('.week').forEach((week, i) => {
+      this.#$weeks.push(week);
+      this.#$days[i] = [];
+      week.querySelectorAll('.day').forEach(day => {
+        this.#$days[i].push(day);
+      });
+    });
+    this.#$weekDayNames = Array.from(shadowRoot.querySelectorAll('#week-day-names > .week-day-name'));
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$prevMonth.addEventListener('click', this.#onPrevMonthClick, options);
+    this.#$nextMonth.addEventListener('click', this.#onNextMonthClick, options);
+    this.#$prevYear.addEventListener('click', this.#onPrevYearClick, options);
+    this.#$nextYear.addEventListener('click', this.#onNextYearClick, options);
+    this.#$month.addEventListener('click', this.#onDateClick, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+  }
+  disconnectedCallback() {
+    this.#unsubscribeRangeHover();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'min', 'max', 'locale', 'range', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
+  }
+  attributeChangedCallback(name, prevValue, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange();
+          break;
+        }
+      case 'min':
+        {
+          this.#minDate = isoToDate(newVal);
+          if (this.#uiDate !== null) {
+            clampMinDate(this.#uiDate, this.#minDate);
+          }
+          this.#render();
+          break;
+        }
+      case 'max':
+        {
+          this.#maxDate = isoToDate(newVal);
+          if (this.#uiDate !== null) {
+            clampMaxDate(this.#uiDate, this.#maxDate);
+          }
+          this.#render();
+          break;
+        }
+      case 'locale':
+        {
+          const names = getDayNames(newVal);
+          this.#$weekDayNames.forEach(($day, i) => {
+            $day.textContent = names[i];
+          });
+          this.#monthNames = getMonthNames(newVal);
+          this.#render();
+          break;
+        }
+      case 'range':
+        {
+          const isRange = isAttrTrue(newVal);
+          if (isRange) {
+            this.#onValueChange();
+          } else {
+            this.#unsubscribeRangeHover();
+          }
+          break;
+        }
+      case 'prev-year-aria-label':
+        {
+          updateAttribute(this.#$prevYear, 'aria-label', newVal);
+          break;
+        }
+      case 'next-year-aria-label':
+        {
+          updateAttribute(this.#$nextYear, 'aria-label', newVal);
+          break;
+        }
+      case 'prev-month-aria-label':
+        {
+          updateAttribute(this.#$prevMonth, 'aria-label', newVal);
+          break;
+        }
+      case 'next-month-aria-label':
+        {
+          updateAttribute(this.#$nextMonth, 'aria-label', newVal);
+          break;
+        }
+    }
+  }
+  set locale(value) {
+    updateAttribute(this, 'locale', value);
+  }
+  get locale() {
+    return getAttribute(this, 'locale', '');
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set min(value) {
+    updateAttribute(this, 'min', value);
+  }
+  get min() {
+    return getAttribute(this, 'min', '');
+  }
+  set max(value) {
+    updateAttribute(this, 'max', value);
+  }
+  get max() {
+    return getAttribute(this, 'max', '');
+  }
+  set range(isRanged) {
+    updateBooleanAttribute(this, 'range', isRanged);
+  }
+  get range() {
+    return getBooleanAttribute(this, 'range');
+  }
+  set prevMonthAriaLabel(value) {
+    updateAttribute(this, 'prev-month-aria-label', value);
+  }
+  get prevMonthAriaLabel() {
+    return getAttribute(this, 'prev-month-aria-label', '');
+  }
+  set nextMonthAriaLabel(value) {
+    updateAttribute(this, 'next-month-aria-label', value);
+  }
+  get nextMonthAriaLabel() {
+    return getAttribute(this, 'next-month-aria-label', '');
+  }
+  get prevYearButtonRect() {
+    return getRect(this.#$prevYear);
+  }
+  get nextYearButtonRect() {
+    return getRect(this.#$nextYear);
+  }
+  get prevMonthButtonRect() {
+    return getRect(this.#$prevMonth);
+  }
+  get nextMonthButtonRect() {
+    return getRect(this.#$nextMonth);
+  }
+  nthButtonRect(index) {
+    if (index < 0 || index > 30) {
+      return null;
+    }
+    const indexOffset = this.#$days[0].findIndex(el => el.getAttribute('data-date') !== null);
+    if (indexOffset < 0) {
+      return null;
+    }
+    const rowIndex = Math.floor((indexOffset + index) / 7);
+    const colIndex = (indexOffset + index) % 7;
+    const $el = this.#$days[rowIndex]?.[colIndex];
+    if ($el == null) {
+      return null;
+    }
+    return getRect($el);
+  }
+  #onPrevMonthClick = e => {
+    e.stopPropagation();
+    decMonth(this.#uiDate, this.#minDate);
+    this.#render();
+  };
+  #onNextMonthClick = e => {
+    e.stopPropagation();
+    incMonth(this.#uiDate, this.#maxDate);
+    this.#render();
+  };
+  #onPrevYearClick = e => {
+    e.stopPropagation();
+    decYear(this.#uiDate, this.#minDate);
+    this.#render();
+  };
+  #onNextYearClick = e => {
+    e.stopPropagation();
+    incYear(this.#uiDate, this.#maxDate);
+    this.#render();
+  };
+  #onDateMouseEnter = e => {
+    if (this.#date1 !== null && this.#date2 === null) {
+      const hoverDateIso = getTargetAttribute(e, 'data-date');
+      if (hoverDateIso === null) {
+        return;
+      }
+      const hoverDate = isoToDate(hoverDateIso);
+      const todayDate = today();
+      for (const week of this.#$days) {
+        for (const $day of week) {
+          if ($day.hasAttribute('disabled')) {
+            continue;
+          }
+          const dayDate = isoToDate($day.getAttribute('data-date'));
+          setClass($day, 'range', !areDatesEqual(todayDate, dayDate) && (isDateBetween(dayDate, this.#date1, hoverDate) || isDateBetween(dayDate, hoverDate, this.#date1)));
+        }
+      }
+    }
+  };
+  #onDateClick = e => {
+    e.stopPropagation();
+    const dateIso = getTargetAttribute(e, 'data-date');
+    if (dateIso === null || dateIso.length === 0) {
+      return;
+    }
+    if (this.range) {
+      if (this.#date1 !== null && this.#date2 === null) {
+        const date2 = isoToDate(dateIso);
+        const dateTuple = sortDates([this.#date1, date2]);
+        const value = packCsv(dateTuple.map(dateToIso));
+        this.#date1 = dateTuple[0];
+        this.#date2 = dateTuple[1];
+        this.#unsubscribeRangeHover();
+        this.#render();
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: value
+        }));
+        return;
+      }
+      this.#date1 = isoToDate(dateIso);
+      this.#date2 = null;
+      this.#subscribeRangeHover();
+      this.#render();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: dateIso
+    }));
+  };
+  #onValueChange() {
+    const value = this.value;
+    this.#date1 = null;
+    this.#date2 = null;
+    if (this.range) {
+      const isoDates = unpackCsv(value);
+      if (isoDates.length === 2) {
+        const date1 = isoToDate(isoDates[0]);
+        const date2 = isoToDate(isoDates[1]);
+        if (isValidDate(date1) && isValidDate(date2)) {
+          [this.#date1, this.#date2] = sortDates([date1, date2]);
+          if (this.#uiDate === null || !isDateOnScreen(this.#uiDate, date1) && !isDateOnScreen(this.#uiDate, date2)) {
+            this.#uiDate = cloneDate(this.#date1);
+          }
+        } else {
+          this.#uiDate = null;
+        }
+      } else if (isoDates.length === 1) {
+        const date1 = isoToDate(isoDates[0]);
+        if (isValidDate(date1)) {
+          this.#uiDate = date1;
+        }
+      }
+    } else {
+      const valueDate = isoToDate(value);
+      if (isValidDate(valueDate)) {
+        this.#date1 = valueDate;
+        this.#uiDate = cloneDate(this.#date1);
+      } else {
+        this.#uiDate = null;
+      }
+    }
+    if (this.#uiDate === null) {
+      this.#uiDate = today();
+    }
+    if (this.#minDate !== null) {
+      clampMinDate(this.#uiDate, this.#minDate);
+    }
+    if (this.#maxDate !== null) {
+      clampMaxDate(this.#uiDate, this.#maxDate);
+    }
+    this.#render();
+  }
+  #render() {
+    if (this.#uiDate === null || this.#minDate === null || this.#maxDate === null || this.locale === null) {
+      return;
+    }
+    const todayDate = today();
+    const month = getCalendarMonth(this.#uiDate);
+    updateBooleanAttribute(this.#$prevMonth, 'disabled', canGoPrevMonth(this.#uiDate, this.#minDate) === false);
+    updateBooleanAttribute(this.#$nextMonth, 'disabled', canGoNextMonth(this.#uiDate, this.#maxDate) === false);
+    updateBooleanAttribute(this.#$prevYear, 'disabled', canGoPrevYear(this.#uiDate, this.#minDate) === false);
+    updateBooleanAttribute(this.#$nextYear, 'disabled', canGoNextYear(this.#uiDate, this.#maxDate) === false);
+    this.#$date.textContent = `${this.#monthNames[this.#uiDate.getUTCMonth()]} ${this.#uiDate.getUTCFullYear()}`;
+    for (let wi = 0; wi < this.#$days.length; wi++) {
+      const $week = this.#$days[wi];
+      let isEmptyWeek = true;
+      for (let di = 0; di < $week.length; di++) {
+        const $day = $week[di];
+        const week = month[wi];
+        const day = week?.[di];
+        $day.classList.remove('selected', 'range', 'today');
+        if (day == null) {
+          $day.textContent = '';
+          $day.removeAttribute('data-date');
+          $day.setAttribute('disabled', '');
+          $day.setAttribute('aria-hidden', 'true');
+        } else {
+          const dayIso = dateToIso(day);
+          $day.textContent = day.getUTCDate().toString();
+          $day.setAttribute('data-date', dayIso);
+          if (isDateBetween(day, this.#minDate, this.#maxDate)) {
+            $day.removeAttribute('disabled');
+            $day.removeAttribute('aria-hidden');
+          } else {
+            $day.setAttribute('disabled', '');
+            $day.setAttribute('aria-hidden', 'true');
+          }
+          if (areDatesEqual(day, this.#date1) || areDatesEqual(day, this.#date2)) {
+            $day.classList.add('selected');
+          } else if (areDatesEqual(day, todayDate)) {
+            $day.classList.add('today');
+          } else if (isDateBetween(day, this.#date1, this.#date2)) {
+            $day.classList.add('range');
+          }
+          isEmptyWeek = false;
+        }
+      }
+      setClass(this.#$weeks[wi], 'empty', isEmptyWeek);
+    }
+  }
+  #subscribeRangeHover() {
+    if (!this.#isHoverSubscribed) {
+      this.#$month.addEventListener('mouseover', this.#onDateMouseEnter);
+      this.#isHoverSubscribed = true;
+    }
+  }
+  #unsubscribeRangeHover() {
+    if (this.#isHoverSubscribed) {
+      this.#$month.removeEventListener('mouseover', this.#onDateMouseEnter);
+      this.#isHoverSubscribed = false;
+    }
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/date-picker/types.d.ts

@@ -0,0 +1,70 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchDatePickerElement = HTMLElement & {
+    /** Date value in ISO 8601 format */
+    value: string;
+    /** Date min limit in ISO 8601 format */
+    min: string;
+    /** Date max limit in ISO 8601 format */
+    max: string;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
+    locale: string;
+    /** Date range mode */
+    range: boolean;
+    /** Label that is used for a11y */
+    prevYearAriaLabel: string;
+    /** Label that is used for a11y */
+    nextYearAriaLabel: string;
+    /** Label that is used for a11y */
+    prevMonthAriaLabel: string;
+    /** Label that is used for a11y */
+    nextMonthAriaLabel: string;
+    readonly prevYearButtonRect: TRect;
+    readonly nextYearButtonRect: TRect;
+    readonly prevMonthButtonRect: TRect;
+    readonly nextMonthButtonRect: TRect;
+    nthButtonRect(index: number): TRect | null;
+    /** Change value handler, return date in ISO 8601 format */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Date value in ISO 8601 format */
+    setAttribute(name: 'value', value: string): void;
+    /** Date min limit in ISO 8601 format */
+    setAttribute(name: 'min', value: string): void;
+    /** Date max limit in ISO 8601 format */
+    setAttribute(name: 'max', value: string): void;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
+    setAttribute(name: 'locale', value: string): void;
+    /** Date range mode */
+    setAttribute(name: 'range', value: ''): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'prev-year-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'next-year-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'prev-month-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'next-month-aria-label', value: string): void;
+};
+export type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
+    /** Date value in ISO 8601 format */
+    value: string;
+    /** Date min limit in ISO 8601 format */
+    min: string;
+    /** Date max limit in ISO 8601 format */
+    max: string;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
+    locale: string;
+    /** Date range mode */
+    range?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Label that is used for a11y */
+    'prev-year-aria-label': string;
+    /** Label that is used for a11y */
+    'next-year-aria-label': string;
+    /** Label that is used for a11y */
+    'prev-month-aria-label': string;
+    /** Label that is used for a11y */
+    'next-month-aria-label': string;
+    /** Change value handler, return date in ISO 8601 format */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/date-picker/types.js

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

package/date-picker/utils.d.ts

@@ -0,0 +1,28 @@
+type TCalendarOptions = {
+    firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+};
+type TMaybeDate = Date | null;
+export declare const getCalendarMonth: (date: Date, options?: TCalendarOptions) => TMaybeDate[][];
+export declare const dateToIso: (date: Date) => string;
+export declare const isoToDate: (value: string) => Date;
+export declare const today: () => Date;
+export declare const getDayNames: (locale: string) => string[];
+export declare const getMonthNames: (locale: string) => string[];
+export declare const isValidDate: (value: any) => value is Date;
+export declare const compareDates: (a: Date, b: Date) => number;
+export declare const clampMinDate: (date: Date, min: Date) => void;
+export declare const clampMaxDate: (date: Date, max: Date) => void;
+export declare const incMonth: (date: Date, max: Date) => void;
+export declare const decMonth: (date: Date, min: Date) => void;
+export declare const incYear: (date: Date, max: Date) => void;
+export declare const decYear: (date: Date, min: Date) => void;
+export declare const canGoPrevMonth: (date: Date, min: Date) => boolean;
+export declare const canGoNextMonth: (date: Date, max: Date) => boolean;
+export declare const canGoNextYear: (date: Date, max: Date) => boolean;
+export declare const canGoPrevYear: (date: Date, min: Date) => boolean;
+export declare const isDateBetween: (date: Date, min: Date | null, max: Date | null) => boolean;
+export declare const areDatesEqual: (a: Date, b: Date | null) => boolean;
+export declare const cloneDate: (date: Date) => Date;
+export declare const sortDates: (dateTuple: [Date, Date]) => [Date, Date];
+export declare const isDateOnScreen: (uiDate: Date | null, date: Date | null) => boolean;
+export {};

package/date-picker/utils.js

@@ -0,0 +1,142 @@
+const DAYS_IN_WEEK = 7;
+const pad = value => {
+  return value.toString().padStart(2, '0');
+};
+export const getCalendarMonth = (date, options) => {
+  const {
+    firstDayOfWeek
+  } = {
+    firstDayOfWeek: 1,
+    ...options
+  };
+  const firstDateOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+  const lastDateOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0));
+  const firstWeekdayOfMonth = firstDateOfMonth.getUTCDay();
+  const lastWeekdayOfMonth = lastDateOfMonth.getUTCDay();
+  const daysInMonth = lastDateOfMonth.getUTCDate();
+  const daysToPrepend = (firstWeekdayOfMonth - firstDayOfWeek + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+  const daysToAppend = (DAYS_IN_WEEK - 1 - lastWeekdayOfMonth + firstDayOfWeek) % DAYS_IN_WEEK;
+  const month = [];
+  let week = [];
+  for (let i = 1 - daysToPrepend; i <= daysInMonth + daysToAppend + 1; i++) {
+    if (i <= 0 || i > daysInMonth) {
+      week.push(null);
+    } else {
+      const result = new Date(date);
+      result.setUTCDate(i);
+      week.push(result);
+    }
+    if (week.length === 7) {
+      month.push(week);
+      week = [];
+    }
+  }
+  return month;
+};
+export const dateToIso = date => {
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+};
+export const isoToDate = value => {
+  return new Date(`${value.substring(0, 10)}T00:00:00Z`);
+};
+export const today = () => {
+  const today = new Date();
+  return new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
+};
+export const getDayNames = locale => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'narrow',
+    timeZone: 'UTC'
+  });
+  return [1, 2, 3, 4, 5, 6, 7].map(dd => {
+    const date = new Date(Date.UTC(2018, 0, dd));
+    return formatter.format(date);
+  });
+};
+export const getMonthNames = locale => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    month: 'short',
+    timeZone: 'UTC'
+  });
+  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(mm => {
+    const date = new Date(Date.UTC(2018, mm, 1));
+    return formatter.format(date);
+  });
+};
+export const isValidDate = value => {
+  return value instanceof Date && !isNaN(value);
+};
+export const compareDates = (a, b) => {
+  return a.getTime() - b.getTime();
+};
+export const clampMinDate = (date, min) => {
+  if (compareDates(min, date) > 0) {
+    date.setTime(min.getTime());
+  }
+};
+export const clampMaxDate = (date, max) => {
+  if (compareDates(date, max) > 0) {
+    date.setTime(max.getTime());
+  }
+};
+export const incMonth = (date, max) => {
+  date.setUTCMonth(date.getUTCMonth() + 1);
+  clampMaxDate(date, max);
+};
+export const decMonth = (date, min) => {
+  date.setUTCMonth(date.getUTCMonth() - 1);
+  clampMinDate(date, min);
+};
+export const incYear = (date, max) => {
+  date.setUTCFullYear(date.getUTCFullYear() + 1);
+  clampMaxDate(date, max);
+};
+export const decYear = (date, min) => {
+  date.setUTCFullYear(date.getUTCFullYear() - 1);
+  clampMinDate(date, min);
+};
+export const canGoPrevMonth = (date, min) => {
+  const prevMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 0));
+  return compareDates(prevMonth, min) >= 0;
+};
+export const canGoNextMonth = (date, max) => {
+  const nextMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));
+  return compareDates(max, nextMonth) >= 0;
+};
+export const canGoNextYear = (date, max) => {
+  const nextYear = new Date(Date.UTC(date.getUTCFullYear() + 1, 0, 1));
+  return compareDates(max, nextYear) >= 0;
+};
+export const canGoPrevYear = (date, min) => {
+  const prevYear = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));
+  return compareDates(prevYear, min) >= 0;
+};
+export const isDateBetween = (date, min, max) => {
+  if (min === null || max === null) {
+    return false;
+  }
+  return compareDates(date, min) >= 0 && compareDates(max, date) >= 0;
+};
+export const areDatesEqual = (a, b) => {
+  if (b === null) {
+    return false;
+  }
+  return compareDates(a, b) === 0;
+};
+export const cloneDate = date => {
+  return new Date(date.getTime());
+};
+export const sortDates = dateTuple => {
+  if (compareDates(dateTuple[0], dateTuple[1]) > 0) {
+    return [dateTuple[1], dateTuple[0]];
+  }
+  return dateTuple;
+};
+export const isDateOnScreen = (uiDate, date) => {
+  if (uiDate === null || date === null) {
+    return false;
+  }
+  const firstDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth(), 1));
+  const lastDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth() + 1, 0));
+  return isDateBetween(date, firstDateOfMonth, lastDateOfMonth);
+};

package/dialog/index.d.ts

@@ -0,0 +1,15 @@
+import '../icon-button';
+import '../icon';
+import '../stop-events';
+import '../title';
+import type { TSinchDialogElement, TSinchDialogReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dialog': TSinchDialogReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dialog': TSinchDialogElement;
+    }
+}