@nectary/components 0.41.0 → 0.42.0

package/time-picker/index.js

@@ -33,7 +33,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
   #$submitButton;
   #hour = 0;
   #minute = 0;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -67,10 +66,9 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       el.textContent = hourDisplayValue;
       hours12Frag.appendChild(el);
     }
-
     this.#$pickerHours.appendChild(hours12Frag);
-    const hours24Frag = document.createDocumentFragment();
 
+    const hours24Frag = document.createDocumentFragment();
     for (let i = 12; i < 24; i++) {
       const rad = Math.PI / 6 * (i - 3);
       const el = document.createElement('div');
@@ -82,10 +80,9 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       el.textContent = hourDisplayValue;
       hours24Frag.appendChild(el);
     }
-
     this.#$pickerHours.appendChild(hours24Frag);
-    const minutesFrag = document.createDocumentFragment();
 
+    const minutesFrag = document.createDocumentFragment();
     for (let i = 0; i < 60; i += 5) {
       const rad = Math.PI / 30 * (i - 15);
       const el = document.createElement('div');
@@ -96,10 +93,8 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       el.textContent = stringifyMinute(i);
       minutesFrag.appendChild(el);
     }
-
     this.#$pickerMinutes.appendChild(minutesFrag);
   }
-
   connectedCallback() {
     this.#$pickerTouch.addEventListener('click', this.#onPickerClick);
     this.#$ampm.addEventListener('change', this.#onAmPmChange);
@@ -108,7 +103,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$headerMinutes.addEventListener('keydown', this.#onMinutesKeydown);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$pickerTouch.removeEventListener('click', this.#onPickerClick);
     this.#$ampm.removeEventListener('change', this.#onAmPmChange);
@@ -117,23 +111,19 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$headerMinutes.removeEventListener('keydown', this.#onMinutesKeydown);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     return ['value', 'ampm', 'submit-aria-label'];
   }
-
   attributeChangedCallback(name, prevValue, newVal) {
     if (newVal === prevValue) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
           if (newVal === null) {
             throw new Error('Missing "value" attribute');
           }
-
           const {
             hours,
             minutes
@@ -143,7 +133,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
           this.#render();
           break;
         }
-
       case 'ampm':
         {
           const isAmpm = isAttrTrue(newVal);
@@ -151,7 +140,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
           this.#render();
           break;
         }
-
       case 'submit-aria-label':
         {
           updateAttribute(this.#$submitButton, 'aria-label', newVal);
@@ -159,67 +147,52 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
         }
     }
   }
-
   get nodeName() {
     return 'select';
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set ampm(value) {
     updateBooleanAttribute(this, 'ampm', value);
   }
-
   get ampm() {
     return getBooleanAttribute(this, 'ampm');
   }
-
   set submitAriaLabel(value) {
     updateAttribute(this, 'submit-aria-label', value);
   }
-
   get submitAriaLabel() {
     return getAttribute(this, 'submit-aria-label', '');
   }
-
   get submitButtonRect() {
     return getRect(this.#$submitButton);
   }
-
   get amButtonRect() {
     if (!this.ampm) {
       return null;
     }
-
     const $am = this.#$ampm.querySelector('[value="am"]');
     return $am != null ? getRect($am) : null;
   }
-
   get pmButtonRect() {
     if (!this.ampm) {
       return null;
     }
-
     const $pm = this.#$ampm.querySelector('[value="pm"]');
     return $pm != null ? getRect($pm) : null;
   }
-
   hourDigitRect(hour) {
     const $digit = this.#$pickerHours.children[hourToIndex(hour, !this.ampm)];
     return $digit != null ? getRect($digit) : null;
   }
-
   minuteDigitRect(minute) {
     const $digit = this.#$pickerMinutes.children[Math.round(minute / 5)];
     return $digit != null ? getRect($digit) : null;
   }
-
   #getClickDegree(x, y) {
     const touchRect = this.#$pickerTouch.getBoundingClientRect();
     const cx = touchRect.width / 2;
@@ -233,7 +206,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     const rad = Math.acos(cosRad * (dy < 0 ? -1 : 1));
     const deg = rad * (180 / Math.PI);
     let cssDeg = (deg - 90 - 360) % 360 * -1;
-
     if (dy < 0) {
       cssDeg += 180;
     }
@@ -241,16 +213,13 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
     return [cssDeg, rowIndex];
   }
-
   #onPickerClick = e => {
     const [cssDeg, rowIndex] = this.#getClickDegree(e.x, e.y);
     const isHourRowClick = rowIndex > 0;
     const isHour24RowClick = rowIndex > 1;
-
     if (isHourRowClick) {
       const digitIndex = Math.round(cssDeg / 30) % 12;
       const is24 = getBooleanAttribute(this, 'ampm') === false;
-
       if (is24) {
         if (isHour24RowClick) {
           this.#hour = digitIndex === 0 ? 0 : digitIndex + 12;
@@ -260,16 +229,13 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       } else {
         this.#hour = digitIndex + (this.#$ampm.value === 'pm' ? 12 : 0);
       }
-
       this.#$headerHours.focus();
     } else {
       this.#minute = Math.round(cssDeg / 6) % 60;
       this.#$headerMinutes.focus();
     }
-
     this.#render();
   };
-
   #render() {
     const is24 = getBooleanAttribute(this, 'ampm') === false;
     this.#selectHour(is24);
@@ -281,20 +247,16 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     updateAttribute(this.#$headerMinutes, 'aria-valuenow', this.#minute);
     updateAttribute(this.#$headerMinutes, 'aria-valuetext', this.#minute);
   }
-
   #selectHour(is24) {
     const $hours = this.#$pickerHours.children;
     const hourDigitIndex = this.#hour % 12;
     const selectedIndex = hourToIndex(this.#hour, is24);
     const currentCssDeg = getNeedleRotationDeg(this.#$needleHour);
     const hourCssDeg = getShortestCssDeg(currentCssDeg, hourDigitIndex * 30);
-
     for (let i = 0; i < $hours.length; i++) {
       setClass($hours[i], 'selected', i === selectedIndex);
     }
-
     this.#$needleHour.style.transform = `rotate(${hourCssDeg}deg)`;
-
     if (is24) {
       if (this.#hour > 0 && this.#hour <= 12) {
         this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
@@ -304,29 +266,23 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     } else {
       this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
     }
-
     this.#$ampm.setAttribute('value', this.#hour >= 0 && this.#hour < 12 ? 'am' : 'pm');
   }
-
   #selectMinute() {
     const $minutes = this.#$pickerMinutes.children;
     const isNeedleSelected = this.#minute % 5 === 0;
     const selectedIndex = this.#minute / 5;
     const currentCssDeg = getNeedleRotationDeg(this.#$needleMinute);
     const minuteCssDeg = getShortestCssDeg(currentCssDeg, this.#minute * 6);
-
     for (let i = 0; i < $minutes.length; i++) {
       setClass($minutes[i], 'selected', selectedIndex === i);
     }
-
     setClass(this.#$needleMinute, 'selected', isNeedleSelected);
     this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
   }
-
   #onAmPmChange = e => {
     e.stopPropagation();
     const value = e.detail;
-
     switch (value) {
       case 'am':
         {
@@ -334,17 +290,14 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
             this.#hour -= 12;
             this.#render();
           }
-
           break;
         }
-
       case 'pm':
         {
           if (this.#hour < 12) {
             this.#hour += 12;
             this.#render();
           }
-
           break;
         }
     }
@@ -368,7 +321,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
           this.#render();
           break;
         }
-
       case 'ArrowDown':
         {
           e.preventDefault();
@@ -387,7 +339,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
           this.#render();
           break;
         }
-
       case 'ArrowDown':
         {
           e.preventDefault();

package/time-picker/utils.js

@@ -5,39 +5,30 @@ export const parseTime = value => {
       minutes: 0
     };
   }
-
   const timeParts = value.split(':');
-
   if (timeParts.length < 3) {
     throw new Error(`Incorrect time format: ${value}. Should be "hh:mm:ss"`);
   }
-
   const hours = parseInt(timeParts[0]);
   const minutes = parseInt(timeParts[1]);
   const seconds = parseInt(timeParts[2]);
-
   if (isNaN(hours) || hours > 23 || hours < 0) {
     throw new Error(`Invalid hours value: ${value}`);
   }
-
   if (isNaN(minutes) || minutes > 59 || minutes < 0) {
     throw new Error(`Invalid minutes value: ${value}`);
   }
-
   if (isNaN(seconds) || seconds > 59 || seconds < 0) {
     throw new Error(`Invalid seconds value: ${value}`);
   }
-
   return {
     hours,
     minutes
   };
 };
-
 const pad = value => {
   return value.toString().padStart(2, '0');
 };
-
 export const stringifyTime = (hour, minute) => {
   return `${pad(hour)}:${pad(minute)}:00`;
 };
@@ -45,11 +36,9 @@ export const stringifyHour = (hour, is24) => {
   if (is24) {
     return pad(hour);
   }
-
   if (hour === 0 || hour === 12) {
     return '12';
   }
-
   return pad(hour % 12);
 };
 export const stringifyHourFace = hour => {
@@ -63,32 +52,25 @@ export const hourToIndex = (hour, is24) => {
     if (hour === 0) {
       return 12;
     }
-
     if (hour === 12) {
       return 0;
     }
-
     return hour;
   }
-
   return hour % 12;
 };
 export const getNeedleRotationDeg = elem => {
   const match = elem.style.transform.match(/^rotate\((-?\d+)deg\)$/);
-
   if (match === null) {
     return 0;
   }
-
   return Number(match[1]);
 };
 export const getShortestCssDeg = (currentDeg, nextDeg) => {
   const angle = currentDeg % 360;
   const diff = (360 - (angle - nextDeg)) % 360;
-
   if (diff > 180) {
     return currentDeg - 360 + diff;
   }
-
   return currentDeg + diff;
 };

package/title/index.js

@@ -6,46 +6,38 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-title', class extends NectaryElement {
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'heading');
+
   }
 
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   set type(value) {
     updateLiteralAttribute(this, typeValues, 'type', value);
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }
-
   set ellipsis(isEllipsis) {
     updateBooleanAttribute(this, 'ellipsis', isEllipsis);
   }
-
   get ellipsis() {
     return getBooleanAttribute(this, 'ellipsis');
   }
-
   static get observedAttributes() {
     return ['text', 'type', 'level'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -53,14 +45,12 @@ defineCustomElement('sinch-title', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'level':
         {
           assertLevel(newVal);
           updateAttribute(this, 'aria-level', newVal);
           break;
         }
-
       case 'type':
         {
           assertType(newVal);
@@ -68,5 +58,4 @@ defineCustomElement('sinch-title', class extends NectaryElement {
         }
     }
   }
-
 });

package/title/utils.js

@@ -14,19 +14,14 @@ export const getTitleLevelFromType = type => {
   switch (type) {
     case 'xl':
       return '1';
-
     case 'l':
       return '2';
-
     case 'm':
       return '3';
-
     case 's':
       return '4';
-
     case 'xs':
       return '5';
-
     default:
       throw new Error(`sinch-title: invalid type value: ${type}`);
   }

package/toast/index.js

@@ -13,72 +13,58 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-toast', class extends NectaryElement {
   #$text;
   #tid = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('aria-atomic', 'true');
     this.setAttribute('aria-live', 'polite');
     this.addEventListener('-timeout', this.#onTimeoutReactHandler);
     this.#updateTimeout();
   }
-
   disconnectedCallback() {
     this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
     this.#clearTimeout();
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }
-
   set type(value) {
     updateLiteralAttribute(this, typeValues, 'type', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get persistent() {
     return getBooleanAttribute(this, 'persistent');
   }
-
   set persistent(isPersistent) {
     updateBooleanAttribute(this, 'persistent', isPersistent);
   }
-
   static get observedAttributes() {
     return ['text', 'type', 'persistent'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'type':
         {
           assertType(newVal);
           break;
         }
-
       case 'text':
         {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'persistent':
         {
           this.#updateTimeout();
@@ -86,29 +72,24 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
         }
     }
   }
-
   #updateTimeout() {
     if (this.persistent) {
       this.#clearTimeout();
       return;
     }
-
     if (this.#tid === null) {
       this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
     }
   }
-
   #onTimeout = () => {
     this.dispatchEvent(new CustomEvent('-timeout'));
   };
-
   #clearTimeout() {
     if (this.#tid !== null) {
       window.clearTimeout(this.#tid);
       this.#tid = null;
     }
   }
-
   #onTimeoutReactHandler = e => {
     getReactEventHandler(this, 'on-timeout')?.(e);
   };

package/toast-manager/index.js

@@ -17,7 +17,6 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
   #map = new WeakMap();
   #shouldReduceMotion = false;
   #animations = new Set();
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -25,31 +24,25 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
     this.#$slot = shadowRoot.querySelector('slot');
     this.#$list = shadowRoot.querySelector('#list');
   }
-
   connectedCallback() {
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
     this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   }
-
   disconnectedCallback() {
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     this.#clear();
   }
-
   get containerRect() {
     return getRect(this.#$list);
   }
-
   nthActionRect(nth) {
     const item = this.#$list.children[nth]?.querySelector('[slot=action]');
     return item != null ? getRect(item) : null;
   }
-
   nthCloseRect(nth) {
     const item = this.#$list.children[nth]?.querySelector('[slot=close]');
     return item != null ? getRect(item) : null;
   }
-
   #onAnimateAdd(item, index, height) {
     const duration = this.#shouldReduceMotion ? 0 : DURATION_ADD;
     const addAnim = item.animate({
@@ -63,7 +56,6 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
     });
     this.#storeAnimation(addAnim);
   }
-
   #onAnimateRemove(item, index) {
     const rect = item.getBoundingClientRect();
     const duration = this.#shouldReduceMotion ? 0 : DURATION_REMOVE;
@@ -88,42 +80,33 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
     this.#storeAnimation(heightAnim, () => item.remove());
     this.#storeAnimation(opacityAnim);
   }
-
   #onSlotChange = () => {
     const slotItems = this.#$slot.assignedElements();
     const listItems = Array.from(this.#$list.children);
     let removeIndex = 0;
-
     for (const item of listItems) {
       if (item.hasAttribute('data-deleting')) {
         ++removeIndex;
         continue;
       }
-
       const orig = this.#map.get(item);
-
       if (orig != null && slotItems.includes(orig)) {
         continue;
       }
-
       this.#map.delete(item);
-
       if (orig != null) {
         this.#map.delete(orig);
       }
-
       this.#unsubscribeChildren(item);
       this.#onAnimateRemove(item, removeIndex);
       ++removeIndex;
     }
 
     let addIndex = 0;
-
     for (const item of slotItems) {
       if (this.#map.has(item)) {
         continue;
       }
-
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
       const wrapper = document.createElement('div');
@@ -137,7 +120,6 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
       addIndex++;
     }
   };
-
   #storeAnimation(anim, cb) {
     const onAnimEnd = () => {
       this.#animations.delete(anim);
@@ -146,40 +128,32 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
       anim.removeEventListener('remove', onAnimEnd);
       anim.removeEventListener('cancel', onAnimEnd);
     };
-
     anim.addEventListener('finish', onAnimEnd);
     anim.addEventListener('remove', onAnimEnd);
     anim.addEventListener('cancel', onAnimEnd);
     this.#animations.add(anim);
   }
-
   #clear() {
     const listItems = Array.from(this.#$list.children);
-
     for (const item of listItems) {
       this.#map.delete(item);
       this.#unsubscribeChildren(item);
       item.remove();
     }
-
     for (const anim of this.#animations) {
       anim.cancel();
     }
   }
-
   #subscribeChildren(item) {
     item.querySelector('[slot=close]')?.addEventListener('-click', this.#onCloneCloseClick);
     item.querySelector('[slot=action]')?.addEventListener('-click', this.#onCloneActionClick);
   }
-
   #unsubscribeChildren(item) {
     item.querySelector('[slot=close]')?.removeEventListener('-click', this.#onCloneCloseClick);
     item.querySelector('[slot=action]')?.removeEventListener('-click', this.#onCloneActionClick);
   }
-
   #onCloneCloseClick = e => {
     const item = e.target.parentElement?.parentElement;
-
     if (item != null) {
       item.setAttribute('data-delete-now', '');
       this.#map.get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
@@ -187,7 +161,6 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
   };
   #onCloneActionClick = e => {
     const item = e.target.parentElement?.parentElement;
-
     if (item != null) {
       this.#map.get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
     }