@nectary/components 0.29.1 → 0.30.0

package/date-picker/index.js

@@ -0,0 +1,419 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$month, _$weeks, _$days, _$weekDayNames, _date, _minDate, _maxDate, _$prevMonth, _$nextMonth, _$prevYear, _$nextYear, _$date, _monthNames, _onPrevMonthClick, _onNextMonthClick, _onPrevYearClick, _onNextYearClick, _onDateClick, _render;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../icon-button';
+import '../icons/keyboard-arrow-right';
+import '../icons/keyboard-double-arrow-right';
+import '../icons/keyboard-arrow-left';
+import '../icons/keyboard-double-arrow-left';
+import '../icons/delete-outline';
+import '../icons/today';
+import '../text';
+import { defineCustomElement, getAttribute, getRect, NectaryElement, setClass, 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-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);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}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content" slot="content"><div id="content-header"><sinch-icon-button small id="prev-year"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button small id="prev-month"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text type="m" emphasized id="date"></sinch-text><sinch-icon-button small id="next-month"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button small id="next-year"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></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, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new WeakMap(), _$days = new WeakMap(), _$weekDayNames = new WeakMap(), _date = new WeakMap(), _minDate = new WeakMap(), _maxDate = new WeakMap(), _$prevMonth = new WeakMap(), _$nextMonth = new WeakMap(), _$prevYear = new WeakMap(), _$nextYear = new WeakMap(), _$date = new WeakMap(), _monthNames = new WeakMap(), _onPrevMonthClick = new WeakMap(), _onNextMonthClick = new WeakMap(), _onPrevYearClick = new WeakMap(), _onNextYearClick = new WeakMap(), _onDateClick = new WeakMap(), _render = new WeakSet(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _render);
+
+    _classPrivateFieldInitSpec(this, _$month, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$weeks, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$days, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$weekDayNames, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _date, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _minDate, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _maxDate, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _$prevMonth, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$nextMonth, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$prevYear, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$nextYear, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$date, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _monthNames, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onPrevMonthClick, {
+      writable: true,
+      value: () => {
+        decMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
+
+        _classPrivateMethodGet(this, _render, _render2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onNextMonthClick, {
+      writable: true,
+      value: () => {
+        incMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
+
+        _classPrivateMethodGet(this, _render, _render2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onPrevYearClick, {
+      writable: true,
+      value: () => {
+        decYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
+
+        _classPrivateMethodGet(this, _render, _render2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onNextYearClick, {
+      writable: true,
+      value: () => {
+        incYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
+
+        _classPrivateMethodGet(this, _render, _render2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDateClick, {
+      writable: true,
+      value: e => {
+        const dateIso = e.target.getAttribute('data-date');
+
+        if (dateIso === null || dateIso.length === 0) {
+          return;
+        }
+
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: dateIso,
+          bubbles: true
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$prevMonth, shadowRoot.querySelector('#prev-month'));
+
+    _classPrivateFieldSet(this, _$nextMonth, shadowRoot.querySelector('#next-month'));
+
+    _classPrivateFieldSet(this, _$prevYear, shadowRoot.querySelector('#prev-year'));
+
+    _classPrivateFieldSet(this, _$nextYear, shadowRoot.querySelector('#next-year'));
+
+    _classPrivateFieldSet(this, _$date, shadowRoot.querySelector('#date'));
+
+    _classPrivateFieldSet(this, _$month, shadowRoot.querySelector('#month'));
+
+    _classPrivateFieldSet(this, _$days, []);
+
+    _classPrivateFieldSet(this, _$weeks, []);
+
+    _classPrivateFieldSet(this, _monthNames, []);
+
+    shadowRoot.querySelectorAll('.week').forEach((week, i) => {
+      _classPrivateFieldGet(this, _$weeks).push(week);
+
+      _classPrivateFieldGet(this, _$days)[i] = [];
+      week.querySelectorAll('.day').forEach(day => {
+        _classPrivateFieldGet(this, _$days)[i].push(day);
+      });
+    });
+
+    _classPrivateFieldSet(this, _$weekDayNames, Array.from(shadowRoot.querySelectorAll('#week-day-names > .week-day-name')));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$prevMonth).addEventListener('click', _classPrivateFieldGet(this, _onPrevMonthClick));
+
+    _classPrivateFieldGet(this, _$nextMonth).addEventListener('click', _classPrivateFieldGet(this, _onNextMonthClick));
+
+    _classPrivateFieldGet(this, _$prevYear).addEventListener('click', _classPrivateFieldGet(this, _onPrevYearClick));
+
+    _classPrivateFieldGet(this, _$nextYear).addEventListener('click', _classPrivateFieldGet(this, _onNextYearClick));
+
+    _classPrivateFieldGet(this, _$month).addEventListener('click', _classPrivateFieldGet(this, _onDateClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$prevMonth).removeEventListener('click', _classPrivateFieldGet(this, _onPrevMonthClick));
+
+    _classPrivateFieldGet(this, _$nextMonth).removeEventListener('click', _classPrivateFieldGet(this, _onNextMonthClick));
+
+    _classPrivateFieldGet(this, _$prevYear).removeEventListener('click', _classPrivateFieldGet(this, _onPrevYearClick));
+
+    _classPrivateFieldGet(this, _$nextYear).removeEventListener('click', _classPrivateFieldGet(this, _onNextYearClick));
+
+    _classPrivateFieldGet(this, _$month).removeEventListener('click', _classPrivateFieldGet(this, _onDateClick));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'min', 'max', 'locale'];
+  }
+
+  attributeChangedCallback(name, prevValue, newVal) {
+    if (newVal === prevValue) {
+      return;
+    }
+
+    switch (name) {
+      case 'value':
+        {
+          assertValue(newVal);
+
+          _classPrivateFieldSet(this, _date, newVal.length > 0 ? isoToDate(newVal) : new Date());
+
+          if (!isValidDate(_classPrivateFieldGet(this, _date))) {
+            _classPrivateFieldSet(this, _date, new Date());
+          }
+
+          if (_classPrivateFieldGet(this, _minDate) !== null) {
+            clampMinDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
+          }
+
+          if (_classPrivateFieldGet(this, _maxDate) !== null) {
+            clampMaxDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
+          }
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'min':
+        {
+          assertMinMax(newVal, name);
+
+          _classPrivateFieldSet(this, _minDate, isoToDate(newVal));
+
+          assertDate(_classPrivateFieldGet(this, _minDate), name, newVal);
+
+          if (_classPrivateFieldGet(this, _date) !== null) {
+            clampMinDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
+          }
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'max':
+        {
+          assertMinMax(newVal, name);
+
+          _classPrivateFieldSet(this, _maxDate, isoToDate(newVal));
+
+          assertDate(_classPrivateFieldGet(this, _maxDate), name, newVal);
+
+          if (_classPrivateFieldGet(this, _date) !== null) {
+            clampMaxDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
+          }
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'locale':
+        {
+          assertLocale(newVal);
+          const names = getDayNames(newVal);
+
+          _classPrivateFieldGet(this, _$weekDayNames).forEach(($day, i) => {
+            $day.textContent = names[i];
+          });
+
+          _classPrivateFieldSet(this, _monthNames, getMonthNames(newVal));
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+    }
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  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', '');
+  }
+
+  get prevYearButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$prevYear));
+  }
+
+  get nextYearButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$nextYear));
+  }
+
+  get prevMonthButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$prevMonth));
+  }
+
+  get nextMonthButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$nextMonth));
+  }
+
+  nthButtonRect(index) {
+    if (index < 0 || index > 30) {
+      return null;
+    }
+
+    const indexOffset = _classPrivateFieldGet(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 = _classPrivateFieldGet(this, _$days)[rowIndex]?.[colIndex];
+
+    if ($el == null) {
+      return null;
+    }
+
+    return getRect($el);
+  }
+
+}));
+
+function _render2() {
+  if (_classPrivateFieldGet(this, _date) === null || _classPrivateFieldGet(this, _minDate) === null || _classPrivateFieldGet(this, _maxDate) === null || this.locale === null) {
+    return;
+  }
+
+  const valueDate = isoToDate(this.value);
+  const todayDate = new Date();
+  const month = getCalendarMonth(_classPrivateFieldGet(this, _date));
+  updateBooleanAttribute(_classPrivateFieldGet(this, _$prevMonth), 'disabled', canGoPrevMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate)) === false);
+  updateBooleanAttribute(_classPrivateFieldGet(this, _$nextMonth), 'disabled', canGoNextMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate)) === false);
+  updateBooleanAttribute(_classPrivateFieldGet(this, _$prevYear), 'disabled', canGoPrevYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate)) === false);
+  updateBooleanAttribute(_classPrivateFieldGet(this, _$nextYear), 'disabled', canGoNextYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate)) === false);
+  _classPrivateFieldGet(this, _$date).textContent = `${_classPrivateFieldGet(this, _monthNames)[_classPrivateFieldGet(this, _date).getMonth()]} ${_classPrivateFieldGet(this, _date).getFullYear()}`;
+
+  _classPrivateFieldGet(this, _$days).forEach(($week, wi) => {
+    let isEmptyWeek = true;
+    $week.forEach(($day, di) => {
+      const week = month[wi];
+      const day = week?.[di];
+      $day.classList.remove('selected');
+      $day.classList.remove('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.getDate().toString();
+        $day.setAttribute('data-date', dayIso);
+
+        if (isDateBetween(day, _classPrivateFieldGet(this, _minDate), _classPrivateFieldGet(this, _maxDate))) {
+          $day.removeAttribute('disabled');
+          $day.removeAttribute('aria-hidden');
+        } else {
+          $day.setAttribute('disabled', '');
+          $day.setAttribute('aria-hidden', 'true');
+        }
+
+        if (areDatesEqual(day, valueDate)) {
+          $day.classList.add('selected');
+        } else if (areDatesEqual(day, todayDate)) {
+          $day.classList.add('today');
+        }
+
+        isEmptyWeek = false;
+      }
+    });
+    setClass(_classPrivateFieldGet(this, _$weeks)[wi], 'empty', isEmptyWeek);
+  });
+}

package/date-picker/types.d.ts

@@ -0,0 +1,26 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchDatePickerElement = HTMLElement & {
+    value: string;
+    min: string;
+    max: string;
+    locale: string;
+    readonly prevYearButtonRect: TRect;
+    readonly nextYearButtonRect: TRect;
+    readonly prevMonthButtonRect: TRect;
+    readonly nextMonthButtonRect: TRect;
+    nthButtonRect(index: number): TRect | null;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'min', value: string): void;
+    setAttribute(name: 'max', value: string): void;
+    setAttribute(name: 'locale', value: string): void;
+};
+export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
+    locale: string;
+    value: string;
+    min: string;
+    max: string;
+    'aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
+};

package/date-picker/types.js

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

package/date-picker/utils.d.ts

@@ -0,0 +1,32 @@
+declare type TCalendarOptions = {
+    firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare 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 getDayNames: (locale: string) => string[];
+export declare const getMonthNames: (locale: string) => string[];
+declare type TAssertMinMax = (value: string | null, attrName: string) => asserts value is string;
+export declare const assertMinMax: TAssertMinMax;
+declare type TAssertValue = (value: string | null) => asserts value is string;
+export declare const assertValue: TAssertValue;
+declare type TAssertLocale = (value: string | null) => asserts value is string;
+export declare const assertLocale: TAssertLocale;
+declare type TAssertDate = (value: any, attrName: string, attrValue: string) => asserts value is Date;
+export declare const isValidDate: (value: any) => value is Date;
+export declare const assertDate: TAssertDate;
+export declare const cloneDate: (date: Date) => Date;
+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, max: Date) => boolean;
+export declare const areDatesEqual: (a: Date, b: Date) => boolean;
+export {};

package/date-picker/utils.js

@@ -0,0 +1,142 @@
+const DAYS_IN_WEEK = 7;
+export const getCalendarMonth = (date, options) => {
+  const {
+    firstDayOfWeek
+  } = {
+    firstDayOfWeek: 1,
+    ...options
+  };
+  const firstDateOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+  const lastDateOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const firstWeekdayOfMonth = firstDateOfMonth.getDay();
+  const lastWeekdayOfMonth = lastDateOfMonth.getDay();
+  const daysInMonth = lastDateOfMonth.getDate();
+  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.setDate(i);
+      week.push(result);
+    }
+
+    if (week.length === 7) {
+      month.push(week);
+      week = [];
+    }
+  }
+
+  return month;
+};
+export const dateToIso = date => {
+  return date.toISOString().substring(0, 10);
+};
+export const isoToDate = value => {
+  return new Date(`${value.substring(0, 10)}T00:00:00Z`);
+};
+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 assertMinMax = (value, attrName) => {
+  if (value == null || value === '') {
+    throw new Error(`sinch-date-picker: missing or empty "${attrName}" attribute`);
+  }
+};
+export const assertValue = value => {
+  if (value == null) {
+    throw new Error(`sinch-date-picker: missing "value" attribute`);
+  }
+};
+export const assertLocale = value => {
+  if (value === null || value.length === 0) {
+    throw new Error(`sinch-date-picker: invalid locale attribute: ${value}`);
+  }
+};
+export const isValidDate = value => {
+  return value instanceof Date && !isNaN(value);
+};
+export const assertDate = (value, attrName, attrValue) => {
+  if (!isValidDate(value)) {
+    throw new Error(`sinch-date-picker: invalid "${attrName}" attribute: ${attrValue}`);
+  }
+};
+
+const compareDates = (a, b) => {
+  return a.getTime() - b.getTime();
+};
+
+export const cloneDate = date => {
+  const result = new Date(date);
+  result.setHours(0, 0, 0, 0);
+  return result;
+};
+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.setMonth(date.getMonth() + 1);
+  clampMaxDate(date, max);
+};
+export const decMonth = (date, min) => {
+  date.setMonth(date.getMonth() - 1);
+  clampMinDate(date, min);
+};
+export const incYear = (date, max) => {
+  date.setFullYear(date.getFullYear() + 1);
+  clampMaxDate(date, max);
+};
+export const decYear = (date, min) => {
+  date.setFullYear(date.getFullYear() - 1);
+  clampMinDate(date, min);
+};
+export const canGoPrevMonth = (date, min) => {
+  const prevMonth = new Date(Date.UTC(date.getFullYear(), date.getMonth(), 0));
+  return compareDates(prevMonth, min) >= 0;
+};
+export const canGoNextMonth = (date, max) => {
+  const nextMonth = new Date(Date.UTC(date.getFullYear(), date.getMonth() + 1, 1));
+  return compareDates(max, nextMonth) >= 0;
+};
+export const canGoNextYear = (date, max) => {
+  const nextYear = new Date(Date.UTC(date.getFullYear() + 1, 0, 1));
+  return compareDates(max, nextYear) >= 0;
+};
+export const canGoPrevYear = (date, min) => {
+  const prevYear = new Date(Date.UTC(date.getFullYear(), 0, 0));
+  return compareDates(prevYear, min) >= 0;
+};
+export const isDateBetween = (date, min, max) => {
+  return compareDates(date, min) >= 0 && compareDates(max, date) >= 0;
+};
+export const areDatesEqual = (a, b) => {
+  return compareDates(a, b) === 0;
+};