@nectary/components 0.41.1 → 0.42.0

package/date-picker/index.js

@@ -25,7 +25,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #$nextYear;
   #$date;
   #monthNames;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -48,7 +47,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     });
     this.#$weekDayNames = Array.from(shadowRoot.querySelectorAll('#week-day-names > .week-day-name'));
   }
-
   connectedCallback() {
     this.#$prevMonth.addEventListener('click', this.#onPrevMonthClick);
     this.#$nextMonth.addEventListener('click', this.#onNextMonthClick);
@@ -56,6 +54,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$nextYear.addEventListener('click', this.#onNextYearClick);
     this.#$month.addEventListener('click', this.#onDateClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
+
   }
 
   disconnectedCallback() {
@@ -66,22 +65,18 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$month.removeEventListener('click', this.#onDateClick);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     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) {
     if (newVal === prevValue) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
           assertValue(newVal);
           this.#date = newVal.length > 0 ? isoToDate(newVal) : today();
-
           if (!isValidDate(this.#date)) {
             this.#date = today();
           }
@@ -93,11 +88,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           if (this.#maxDate !== null) {
             clampMaxDate(this.#date, this.#maxDate);
           }
-
           this.#render();
           break;
         }
-
       case 'min':
         {
           assertMinMax(newVal, name);
@@ -107,11 +100,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           if (this.#date !== null) {
             clampMinDate(this.#date, this.#minDate);
           }
-
           this.#render();
           break;
         }
-
       case 'max':
         {
           assertMinMax(newVal, name);
@@ -121,11 +112,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           if (this.#date !== null) {
             clampMaxDate(this.#date, this.#maxDate);
           }
-
           this.#render();
           break;
         }
-
       case 'locale':
         {
           assertLocale(newVal);
@@ -137,25 +126,21 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           this.#render();
           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);
@@ -163,97 +148,73 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         }
     }
   }
-
   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', '');
   }
-
   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.#date, this.#minDate);
@@ -277,19 +238,15 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #onDateClick = e => {
     e.stopPropagation();
     const dateIso = e.target.getAttribute('data-date');
-
     if (dateIso === null || dateIso.length === 0) {
       return;
     }
-
     this.#dispatchChangeEvent(dateIso);
   };
-
   #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);
@@ -305,7 +262,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         const day = week?.[di];
         $day.classList.remove('selected');
         $day.classList.remove('today');
-
         if (day == null) {
           $day.textContent = '';
           $day.removeAttribute('data-date');
@@ -315,7 +271,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           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');
@@ -323,20 +278,17 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
             $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(this.#$weeks[wi], 'empty', isEmptyWeek);
     });
   }
-
   #dispatchChangeEvent(value) {
     this.dispatchEvent(new CustomEvent('change', {
       detail: value,
@@ -346,7 +298,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       detail: value
     }));
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/date-picker/utils.js

@@ -1,9 +1,7 @@
 const DAYS_IN_WEEK = 7;
-
 const pad = value => {
   return value.toString().padStart(2, '0');
 };
-
 export const getCalendarMonth = (date, options) => {
   const {
     firstDayOfWeek
@@ -20,7 +18,6 @@ export const getCalendarMonth = (date, options) => {
   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);
@@ -29,13 +26,11 @@ export const getCalendarMonth = (date, options) => {
       result.setDate(i);
       week.push(result);
     }
-
     if (week.length === 7) {
       month.push(week);
       week = [];
     }
   }
-
   return month;
 };
 export const today = () => {
@@ -90,11 +85,9 @@ export const assertDate = (value, attrName, attrValue) => {
     throw new Error(`sinch-date-picker: invalid "${attrName}" attribute: ${attrValue}`);
   }
 };
-
 const compareDates = (a, b) => {
   return a.getTime() - b.getTime();
 };
-
 export const clampMinDate = (date, min) => {
   if (compareDates(min, date) > 0) {
     date.setTime(min.getTime());

package/dialog/index.js

@@ -13,7 +13,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
   #$caption;
   #isConnected = false;
   #prevOverflowValue = '';
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -23,7 +22,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$caption = shadowRoot.querySelector('#caption');
     dialogPolyfill.registerDialog(this.#$dialog);
   }
-
   connectedCallback() {
     this.setAttribute('role', 'dialog');
     this.#$closeButton.addEventListener('click', this.#onCloseClick);
@@ -31,9 +29,9 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$dialog.addEventListener('cancel', this.#onCancel);
     this.addEventListener('-close', this.#onCloseReactHandler);
     this.#isConnected = true;
+
     this.#setOpen(getBooleanAttribute(this, 'open'));
   }
-
   disconnectedCallback() {
     this.#$closeButton.removeEventListener('click', this.#onCloseClick);
     this.#$dialog.removeEventListener('mousedown', this.#onBackdropClick);
@@ -42,11 +40,9 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#setOpen(false);
     this.#isConnected = false;
   }
-
   static get observedAttributes() {
     return ['caption', 'open', 'close-aria-label'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'caption':
@@ -54,7 +50,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
           updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
-
       case 'open':
         {
           const shouldOpen = isAttrTrue(newVal);
@@ -62,7 +57,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
           updateBooleanAttribute(this, 'open', shouldOpen);
           break;
         }
-
       case 'close-aria-label':
         {
           updateAttribute(this.#$closeButton, 'aria-label', newVal);
@@ -70,15 +64,12 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
         }
     }
   }
-
   set caption(caption) {
     updateAttribute(this, 'caption', caption);
   }
-
   get caption() {
     return getAttribute(this, 'caption', '');
   }
-
   #onCancel = e => {
     e.preventDefault();
     this.#dispatchCloseEvent();
@@ -90,10 +81,8 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     if (e.target !== this.#$dialog) {
       return;
     }
-
     const rect = this.dialogRect;
     const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
-
     if (!isInside) {
       this.#dispatchCloseEvent();
     }
@@ -102,11 +91,9 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     getReactEventHandler(this, 'onClose')?.();
     getReactEventHandler(this, 'on-close')?.(e);
   };
-
   #dispatchCloseEvent() {
     this.dispatchEvent(new CustomEvent('-close'));
   }
-
   #setOpen(shouldOpen) {
     if (shouldOpen) {
       if (this.#isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
@@ -119,13 +106,10 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
       document.body.style.overflow = this.#prevOverflowValue;
     }
   }
-
   get dialogRect() {
     return getRect(this.#$dialog);
   }
-
   get closeButtonRect() {
     return getRect(this.#$closeButton);
   }
-
 });

package/field/index.js

@@ -11,7 +11,6 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   #$tooltipWrapper;
   #$tooltipSlot;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -24,7 +23,6 @@ defineCustomElement('sinch-field', class extends NectaryElement {
     this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
     this.#$tooltipWrapper = shadowRoot.querySelector('#tooltip');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -37,55 +35,42 @@ defineCustomElement('sinch-field', class extends NectaryElement {
       signal
     });
   }
-
   disconnectedCallback() {
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['label', 'optionaltext', 'additionaltext', 'invalidtext'];
   }
-
   set label(value) {
     updateAttribute(this, 'label', value);
   }
-
   get label() {
     return getAttribute(this, 'label', '');
   }
-
   set optionalText(value) {
     updateAttribute(this, 'optionaltext', value);
   }
-
   get optionalText() {
     return getAttribute(this, 'optionaltext');
   }
-
   set additionalText(value) {
     updateAttribute(this, 'additionaltext', value);
   }
-
   get additionalText() {
     return getAttribute(this, 'additionaltext');
   }
-
   set invalidText(value) {
     updateAttribute(this, 'invalidtext', value);
   }
-
   get invalidText() {
     return getAttribute(this, 'invalidtext');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'label':
@@ -93,19 +78,16 @@ defineCustomElement('sinch-field', class extends NectaryElement {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'optionaltext':
         {
           this.#$optionalText.textContent = newVal;
           break;
         }
-
       case 'additionaltext':
         {
           this.#$additionalText.textContent = newVal;
           break;
         }
-
       case 'invalidtext':
         {
           this.#$invalidText.textContent = newVal;
@@ -113,7 +95,6 @@ defineCustomElement('sinch-field', class extends NectaryElement {
         }
     }
   }
-
   #onLabelClick = () => {
     getFirstSlotElement(this.#$inputSlot)?.focus?.();
   };