@nectary/components 0.38.0 → 0.40.0

package/date-picker/index.js

@@ -1,16 +1,3 @@
-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, _dispatchChangeEvent, _onChangeReactHandler;
-
-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';
@@ -20,207 +7,68 @@ import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
 import { defineCustomElement, getAttribute, getReactEventHandler, 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"><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>';
+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"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><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, today } 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(), _dispatchChangeEvent = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-date-picker', class extends NectaryElement {
+  #$month;
+  #$weeks;
+  #$days;
+  #$weekDayNames;
+  #date = null;
+  #minDate = null;
+  #maxDate = null;
+  #$prevMonth;
+  #$nextMonth;
+  #$prevYear;
+  #$nextYear;
+  #$date;
+  #monthNames;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
-    _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: e => {
-        e.stopPropagation();
-        decMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
-
-        _classPrivateMethodGet(this, _render, _render2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onNextMonthClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        incMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
-
-        _classPrivateMethodGet(this, _render, _render2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onPrevYearClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        decYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
-
-        _classPrivateMethodGet(this, _render, _render2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onNextYearClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        incYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
-
-        _classPrivateMethodGet(this, _render, _render2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onDateClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const dateIso = e.target.getAttribute('data-date');
-
-        if (dateIso === null || dateIso.length === 0) {
-          return;
-        }
-
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, dateIso);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     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, []);
-
+    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) => {
-      _classPrivateFieldGet(this, _$weeks).push(week);
-
-      _classPrivateFieldGet(this, _$days)[i] = [];
+      this.#$weeks.push(week);
+      this.#$days[i] = [];
       week.querySelectorAll('.day').forEach(day => {
-        _classPrivateFieldGet(this, _$days)[i].push(day);
+        this.#$days[i].push(day);
       });
     });
-
-    _classPrivateFieldSet(this, _$weekDayNames, Array.from(shadowRoot.querySelectorAll('#week-day-names > .week-day-name')));
+    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));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$prevMonth.addEventListener('click', this.#onPrevMonthClick);
+    this.#$nextMonth.addEventListener('click', this.#onNextMonthClick);
+    this.#$prevYear.addEventListener('click', this.#onPrevYearClick);
+    this.#$nextYear.addEventListener('click', this.#onNextYearClick);
+    this.#$month.addEventListener('click', this.#onDateClick);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   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));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$prevMonth.removeEventListener('click', this.#onPrevMonthClick);
+    this.#$nextMonth.removeEventListener('click', this.#onNextMonthClick);
+    this.#$prevYear.removeEventListener('click', this.#onPrevYearClick);
+    this.#$nextYear.removeEventListener('click', this.#onNextYearClick);
+    this.#$month.removeEventListener('click', this.#onDateClick);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
-    return ['value', 'min', 'max', 'locale'];
+    return ['value', 'min', 'max', 'locale', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
   }
 
   attributeChangedCallback(name, prevValue, newVal) {
@@ -232,57 +80,49 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
       case 'value':
         {
           assertValue(newVal);
+          this.#date = newVal.length > 0 ? isoToDate(newVal) : today();
 
-          _classPrivateFieldSet(this, _date, newVal.length > 0 ? isoToDate(newVal) : today());
-
-          if (!isValidDate(_classPrivateFieldGet(this, _date))) {
-            _classPrivateFieldSet(this, _date, today());
+          if (!isValidDate(this.#date)) {
+            this.#date = today();
           }
 
-          if (_classPrivateFieldGet(this, _minDate) !== null) {
-            clampMinDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
+          if (this.#minDate !== null) {
+            clampMinDate(this.#date, this.#minDate);
           }
 
-          if (_classPrivateFieldGet(this, _maxDate) !== null) {
-            clampMaxDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
+          if (this.#maxDate !== null) {
+            clampMaxDate(this.#date, this.#maxDate);
           }
 
-          _classPrivateMethodGet(this, _render, _render2).call(this);
-
+          this.#render();
           break;
         }
 
       case 'min':
         {
           assertMinMax(newVal, name);
+          this.#minDate = isoToDate(newVal);
+          assertDate(this.#minDate, name, newVal);
 
-          _classPrivateFieldSet(this, _minDate, isoToDate(newVal));
-
-          assertDate(_classPrivateFieldGet(this, _minDate), name, newVal);
-
-          if (_classPrivateFieldGet(this, _date) !== null) {
-            clampMinDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
+          if (this.#date !== null) {
+            clampMinDate(this.#date, this.#minDate);
           }
 
-          _classPrivateMethodGet(this, _render, _render2).call(this);
-
+          this.#render();
           break;
         }
 
       case 'max':
         {
           assertMinMax(newVal, name);
+          this.#maxDate = isoToDate(newVal);
+          assertDate(this.#maxDate, name, newVal);
 
-          _classPrivateFieldSet(this, _maxDate, isoToDate(newVal));
-
-          assertDate(_classPrivateFieldGet(this, _maxDate), name, newVal);
-
-          if (_classPrivateFieldGet(this, _date) !== null) {
-            clampMaxDate(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
+          if (this.#date !== null) {
+            clampMaxDate(this.#date, this.#maxDate);
           }
 
-          _classPrivateMethodGet(this, _render, _render2).call(this);
-
+          this.#render();
           break;
         }
 
@@ -290,15 +130,35 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
         {
           assertLocale(newVal);
           const names = getDayNames(newVal);
-
-          _classPrivateFieldGet(this, _$weekDayNames).forEach(($day, i) => {
+          this.#$weekDayNames.forEach(($day, i) => {
             $day.textContent = names[i];
           });
+          this.#monthNames = getMonthNames(newVal);
+          this.#render();
+          break;
+        }
 
-          _classPrivateFieldSet(this, _monthNames, getMonthNames(newVal));
+      case 'prev-year-aria-label':
+        {
+          updateAttribute(this.#$prevYear, 'aria-label', newVal);
+          break;
+        }
+
+      case 'next-year-aria-label':
+        {
+          updateAttribute(this.#$nextYear, 'aria-label', newVal);
+          break;
+        }
 
-          _classPrivateMethodGet(this, _render, _render2).call(this);
+      case 'prev-month-aria-label':
+        {
+          updateAttribute(this.#$prevMonth, 'aria-label', newVal);
+          break;
+        }
 
+      case 'next-month-aria-label':
+        {
+          updateAttribute(this.#$nextMonth, 'aria-label', newVal);
           break;
         }
     }
@@ -340,20 +200,36 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     return getAttribute(this, 'max', '');
   }
 
+  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(_classPrivateFieldGet(this, _$prevYear));
+    return getRect(this.#$prevYear);
   }
 
   get nextYearButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$nextYear));
+    return getRect(this.#$nextYear);
   }
 
   get prevMonthButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$prevMonth));
+    return getRect(this.#$prevMonth);
   }
 
   get nextMonthButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$nextMonth));
+    return getRect(this.#$nextMonth);
   }
 
   nthButtonRect(index) {
@@ -361,7 +237,7 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
       return null;
     }
 
-    const indexOffset = _classPrivateFieldGet(this, _$days)[0].findIndex(el => el.getAttribute('data-date') !== null);
+    const indexOffset = this.#$days[0].findIndex(el => el.getAttribute('data-date') !== null);
 
     if (indexOffset < 0) {
       return null;
@@ -369,7 +245,7 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
     const rowIndex = Math.floor((indexOffset + index) / 7);
     const colIndex = (indexOffset + index) % 7;
-    const $el = _classPrivateFieldGet(this, _$days)[rowIndex]?.[colIndex];
+    const $el = this.#$days[rowIndex]?.[colIndex];
 
     if ($el == null) {
       return null;
@@ -378,67 +254,100 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     return getRect($el);
   }
 
-}));
+  #onPrevMonthClick = e => {
+    e.stopPropagation();
+    decMonth(this.#date, this.#minDate);
+    this.#render();
+  };
+  #onNextMonthClick = e => {
+    e.stopPropagation();
+    incMonth(this.#date, this.#maxDate);
+    this.#render();
+  };
+  #onPrevYearClick = e => {
+    e.stopPropagation();
+    decYear(this.#date, this.#minDate);
+    this.#render();
+  };
+  #onNextYearClick = e => {
+    e.stopPropagation();
+    incYear(this.#date, this.#maxDate);
+    this.#render();
+  };
+  #onDateClick = e => {
+    e.stopPropagation();
+    const dateIso = e.target.getAttribute('data-date');
+
+    if (dateIso === null || dateIso.length === 0) {
+      return;
+    }
 
-function _render2() {
-  if (_classPrivateFieldGet(this, _date) === null || _classPrivateFieldGet(this, _minDate) === null || _classPrivateFieldGet(this, _maxDate) === null || this.locale === null) {
-    return;
-  }
+    this.#dispatchChangeEvent(dateIso);
+  };
 
-  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 {
+  #render() {
+    if (this.#date === null || this.#minDate === null || this.#maxDate === null || this.locale === null) {
+      return;
+    }
+
+    const valueDate = isoToDate(this.value);
+    const todayDate = new Date();
+    const month = getCalendarMonth(this.#date);
+    updateBooleanAttribute(this.#$prevMonth, 'disabled', canGoPrevMonth(this.#date, this.#minDate) === false);
+    updateBooleanAttribute(this.#$nextMonth, 'disabled', canGoNextMonth(this.#date, this.#maxDate) === false);
+    updateBooleanAttribute(this.#$prevYear, 'disabled', canGoPrevYear(this.#date, this.#minDate) === false);
+    updateBooleanAttribute(this.#$nextYear, 'disabled', canGoNextYear(this.#date, this.#maxDate) === false);
+    this.#$date.textContent = `${this.#monthNames[this.#date.getMonth()]} ${this.#date.getFullYear()}`;
+    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, this.#minDate, 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');
-        }
+          if (areDatesEqual(day, valueDate)) {
+            $day.classList.add('selected');
+          } else if (areDatesEqual(day, todayDate)) {
+            $day.classList.add('today');
+          }
 
-        isEmptyWeek = false;
-      }
+          isEmptyWeek = false;
+        }
+      });
+      setClass(this.#$weeks[wi], 'empty', isEmptyWeek);
     });
-    setClass(_classPrivateFieldGet(this, _$weeks)[wi], 'empty', isEmptyWeek);
-  });
-}
-
-function _dispatchChangeEvent2(value) {
-  this.dispatchEvent(new CustomEvent('change', {
-    detail: value,
-    bubbles: true
-  }));
-  this.dispatchEvent(new CustomEvent('-change', {
-    detail: value
-  }));
-}
+  }
+
+  #dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: value,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
+
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/date-picker/types.d.ts

@@ -9,6 +9,14 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     max: string;
     /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     locale: string;
+    /** 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;
@@ -24,6 +32,14 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     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;
+    /** 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 declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
     /** Date value in ISO 8601 format */
@@ -36,7 +52,15 @@ export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerE
     locale: string;
     /** Label that is used for a11y */
     'aria-label': string;
-    /** Change value handler, return date in ISO 8601 format */
+    /** 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;
+    /** @deprecated Change value handler, return date in ISO 8601 format */
     onChange?: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return date in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;