@nectary/components 0.41.0 → 0.42.0

package/utils/index.js

@@ -6,25 +6,20 @@ export const defineCustomElement = (name, constructor) => {
     if (nectaryRegistry.get(name) == null) {
       nectaryRegistry.define(name, constructor);
     }
-
     return;
   }
-
   nectaryDefinitions.set(name, constructor);
 };
 export const setNectaryRegistry = registry => {
   if (nectaryRegistry !== null) {
     throw new Error('Nectary elements already registered');
   }
-
   nectaryRegistry = registry;
-
   for (const [name, ctor] of nectaryDefinitions.entries()) {
     if (nectaryRegistry.get(name) == null) {
       nectaryRegistry.define(name, ctor);
     }
   }
-
   nectaryDefinitions.clear();
 };
 export class NectaryElement extends HTMLElement {
@@ -36,13 +31,10 @@ export class NectaryElement extends HTMLElement {
       ...options
     });
   }
-
   version = pkg.version;
-
   get focusable() {
     return false;
   }
-
 }
 export const getReactEventHandler = ($element, handlerName) => {
   for (const key in $element) {
@@ -50,7 +42,6 @@ export const getReactEventHandler = ($element, handlerName) => {
       return $element[key][handlerName];
     }
   }
-
   return null;
 };
 export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
@@ -64,7 +55,6 @@ export const getBooleanAttribute = ($element, attrName) => {
 };
 export const updateBooleanAttribute = ($element, attrName, attrValue) => {
   const currentAttrValue = $element.getAttribute(attrName);
-
   if (attrValue === true) {
     if (!isAttrTrue(currentAttrValue)) {
       $element.setAttribute(attrName, '');
@@ -96,15 +86,12 @@ export const updateLiteralAttribute = ($element, literals, attrName, attrValue)
 };
 export function getLiteralAttribute($element, literals, attrName, defaultValue) {
   const attrValue = $element.getAttribute(attrName);
-
   if (isLiteralValue(literals, attrValue)) {
     return attrValue;
   }
-
   if (typeof defaultValue === 'undefined') {
     throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
   }
-
   return defaultValue;
 }
 export const clampNumber = (value, min, max) => {
@@ -115,25 +102,20 @@ const DEFAULT_INTEGER_OPTIONS = {
   itemSpaceBetween: 0,
   defaultValue: null
 };
-
 const applyRange = (value, _ref) => {
   let {
     min,
     max
   } = _ref;
   let result = value;
-
   if (min != null) {
     result = Math.max(min, result);
   }
-
   if (max != null) {
     result = Math.min(max, result);
   }
-
   return result;
 };
-
 export const attrValueToInteger = function (value) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
   const {
@@ -142,19 +124,15 @@ export const attrValueToInteger = function (value) {
     itemSpaceBetween = 0
   } = options;
   let intValue = defaultValue;
-
   if (value !== null) {
     const int = parseInt(value);
-
     if (Number.isInteger(int)) {
       intValue = applyRange(int, options);
     }
   }
-
   if (intValue !== null) {
     return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
   }
-
   return null;
 };
 export const attrValueToPixels = function (value) {
@@ -169,7 +147,6 @@ export const updateIntegerAttribute = function ($element, attrName, attrValue) {
     itemSizeMultiplier: multiplier = 1
   } = options;
   let intValue = null;
-
   if (typeof attrValue === 'string') {
     intValue = attrValueToInteger(attrValue, options);
   } else if (typeof attrValue === 'number') {
@@ -177,7 +154,6 @@ export const updateIntegerAttribute = function ($element, attrName, attrValue) {
   } else {
     intValue = defaultValue;
   }
-
   if (intValue === null) {
     $element.removeAttribute(attrName);
   } else {
@@ -187,27 +163,22 @@ export const updateIntegerAttribute = function ($element, attrName, attrValue) {
 export function getIntegerAttribute($element, attrName, defaultValue) {
   return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
 }
-
 const unpackCsv = csv => {
   return csv === '' ? [] : csv.split(',');
 };
-
 const packCsv = values => {
   return Array.from(values).join(',');
 };
-
 export const getCsvSet = acc => {
   return new Set(unpackCsv(acc));
 };
 export const updateCsv = (acc, value, setActive) => {
   const values = getCsvSet(acc);
-
   if (setActive) {
     values.add(value);
   } else {
     values.delete(value);
   }
-
   return packCsv(values);
 };
 export const getFirstCsvValue = acc => {
@@ -234,24 +205,19 @@ export const getCssVar = (element, variableName) => {
   const result = getComputedStyle(element).getPropertyValue(variableName);
   return result === '' ? null : result;
 };
-
 const throttle = (delayFn, cancelFn) => cb => {
   let id = null;
   let fnArgs;
-
   const delayCallback = () => {
     id = null;
     cb(fnArgs);
   };
-
   return {
     fn: function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       fnArgs = args;
-
       if (id === null) {
         id = delayFn(delayCallback);
       }
@@ -263,75 +229,57 @@ const throttle = (delayFn, cancelFn) => cb => {
     }
   };
 };
-
 export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);
-
 const isSlotElement = el => {
   return el.tagName === 'SLOT';
 };
-
 export const getFirstSlotElement = function (root) {
   let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const el = root.assignedElements()[0];
-
   if (el == null) {
     return null;
   }
-
   if (isDeep && isSlotElement(el)) {
     return getFirstSlotElement(el, isDeep);
   }
-
   return el;
 };
-
 const getChildren = root => {
   if (isSlotElement(root)) {
     return root.assignedElements();
   }
-
   return Array.from(root.children);
 };
-
 const isFocusable = el => {
   return el.focusable === true;
 };
-
 export const getFirstFocusableElement = root => {
   for (const child of getChildren(root)) {
     if (isFocusable(child)) {
       return child;
     }
-
     const resultEl = getFirstFocusableElement(child);
-
     if (resultEl !== null) {
       return resultEl;
     }
   }
-
   return null;
 };
 export const cloneNode = (el, deep) => {
   const root = el.getRootNode();
-
   if (root !== document && Reflect.has(root, 'createElement')) {
     const cloned = root.createElement(el.tagName.toLowerCase());
-
     for (const attr of el.getAttributeNames()) {
       cloned.setAttribute(attr, el.getAttribute(attr));
     }
-
     if (deep) {
       for (let i = 0; i < el.children.length; i++) {
         const clonedChild = cloneNode(el.children[i], deep);
         cloned.appendChild(clonedChild);
       }
     }
-
     return cloned;
   }
-
   return el.cloneNode(deep);
 };
 export const isElementFocused = $el => {
@@ -339,4 +287,15 @@ export const isElementFocused = $el => {
 };
 export const rectOverlap = (targetRect, contentRect) => {
   return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
+};
+
+export const getTargetRect = slot => {
+  const item = getFirstSlotElement(slot, true);
+  if (item === null) {
+    return null;
+  }
+  if (Reflect.has(item, 'footprintRect')) {
+    return item.footprintRect;
+  }
+  return getRect(item);
 };

package/vertical-stepper/index.js

@@ -6,33 +6,27 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
   #$itemsSlot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$itemsSlot = shadowRoot.querySelector('slot');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
     this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
   }
-
   disconnectedCallback() {
     this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
   }
-
   static get observedAttributes() {
     return ['index'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'index':
         {
@@ -41,24 +35,19 @@ defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
         }
     }
   }
-
   set index(value) {
     updateAttribute(this, 'index', value);
   }
-
   get index() {
     return getAttribute(this, 'index', '1');
   }
-
   #updateItems = () => {
     const $items = this.#$itemsSlot.assignedElements();
     const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
-
     for (let i = 0; i < $items.length; i++) {
       const $el = $items[i];
       const itemIndex = i + 1;
       $el.setAttribute('data-index', String(itemIndex));
-
       if (itemIndex === activeIndex) {
         $el.setAttribute('data-progress', 'active');
       } else if (itemIndex < activeIndex) {
@@ -67,7 +56,6 @@ defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
         $el.removeAttribute('data-progress');
       }
     }
-
     this.setAttribute('aria-valuemax', String($items.length));
     this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
   };

package/vertical-stepper-item/index.js

@@ -9,7 +9,6 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
   #$label;
   #$description;
   #$circleText;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,15 +17,11 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
     this.#$description = shadowRoot.querySelector('#description');
     this.#$circleText = shadowRoot.querySelector('#circle-text');
   }
-
   connectedCallback() {}
-
   disconnectedCallback() {}
-
   static get observedAttributes() {
     return ['label', 'description', 'data-index'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'label':
@@ -34,13 +29,11 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'description':
         {
           this.#$description.textContent = newVal;
           break;
         }
-
       case 'data-index':
         {
           this.#$circleText.textContent = newVal;
@@ -48,29 +41,22 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
         }
     }
   }
-
   set label(value) {
     updateAttribute(this, 'label', value);
   }
-
   get label() {
     return getAttribute(this, 'label', '');
   }
-
   set description(value) {
     updateAttribute(this, 'description', value);
   }
-
   get description() {
     return getAttribute(this, 'description', '');
   }
-
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
-
   set status(value) {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
-
 });

package/avatar-badge/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchAvatarBadgeElement, TSinchAvatarBadgeReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-avatar-badge': TSinchAvatarBadgeReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-avatar-badge': TSinchAvatarBadgeElement;
-    }
-}

package/avatar-badge/index.js

@@ -1,38 +0,0 @@
-import { defineCustomElement, getAttribute, NectaryElement, setClass, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:fit-content;background-color:var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);padding:1px;box-sizing:border-box}#text{width:calc(var(--sinch-avatar-badge-size) - 2px);height:calc(var(--sinch-avatar-badge-size) - 2px);font:var(--sinch-avatar-badge-font);color:var(--sinch-color-snow-100);text-align:center;background-color:var(--sinch-color-raspberry-500);border-radius:calc(var(--sinch-avatar-badge-size)/ 2 - 1px)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="wrapper"><div id="text"></div></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-avatar-badge', class extends NectaryElement {
-  #$text;
-
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
-  }
-
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-
-  static get observedAttributes() {
-    return ['text'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          setClass(this.#$text, 'long', newVal !== null && newVal.length > 1);
-          break;
-        }
-    }
-  }
-
-});

package/avatar-badge/types.d.ts

@@ -1,8 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchAvatarBadgeElement = HTMLElement & {
-    text: string;
-    setAttribute(name: 'text', value: string): void;
-};
-export declare type TSinchAvatarBadgeReact = TSinchElementReact<TSinchAvatarBadgeElement> & {
-    text: string;
-};

package/avatar-status/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchAvatarStatusElement, TSinchAvatarStatusReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-avatar-status': TSinchAvatarStatusReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-avatar-status': TSinchAvatarStatusElement;
-    }
-}

package/avatar-status/index.js

@@ -1,37 +0,0 @@
-import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-color-snow-100)}#circle{width:8px;height:8px;border-radius:50%}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="wrapper"><div id="circle"></div></div>';
-import { assertColor, colorValues } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-avatar-status', class extends NectaryElement {
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback() {}
-
-  static get observedAttributes() {
-    return ['color'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'color':
-        {
-          assertColor(newVal);
-          break;
-        }
-    }
-  }
-
-  get color() {
-    return getLiteralAttribute(this, colorValues, 'color');
-  }
-
-  set color(value) {
-    updateLiteralAttribute(this, colorValues, 'color', value);
-  }
-
-});

package/avatar-status/types.d.ts

@@ -1,9 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchAvatarStatusColor = 'red' | 'yellow' | 'green' | 'grey';
-export declare type TSinchAvatarStatusElement = HTMLElement & {
-    color: TSinchAvatarStatusColor;
-    setAttribute(name: 'color', value: TSinchAvatarStatusColor): void;
-};
-export declare type TSinchAvatarStatusReact = TSinchElementReact<TSinchAvatarStatusElement> & {
-    color: TSinchAvatarStatusColor;
-};

package/avatar-status/types.js

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

package/avatar-status/utils.d.ts

@@ -1,5 +0,0 @@
-import type { TSinchAvatarStatusColor } from './types';
-export declare const colorValues: readonly TSinchAvatarStatusColor[];
-declare type TAssertColor = (value: string | null) => asserts value is TSinchAvatarStatusColor;
-export declare const assertColor: TAssertColor;
-export {};

package/avatar-status/utils.js

@@ -1,6 +0,0 @@
-export const colorValues = ['red', 'yellow', 'green', 'grey'];
-export const assertColor = value => {
-  if (value === null || !colorValues.includes(value)) {
-    throw new Error(`sinch-avatar-status: invalid color attribute: ${value}`);
-  }
-};

package/chat-avatar/index.d.ts

@@ -1,12 +0,0 @@
-import '../avatar';
-import type { TSinchChatAvatarElement, TSinchChatAvatarReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat-avatar': TSinchChatAvatarReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat-avatar': TSinchChatAvatarElement;
-    }
-}

package/chat-avatar/index.js

@@ -1,52 +0,0 @@
-import '../avatar';
-import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}sinch-avatar{display:block}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat-avatar', class extends NectaryElement {
-  #$avatar;
-
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$avatar = shadowRoot.querySelector('sinch-avatar');
-  }
-
-  static get observedAttributes() {
-    return ['src', 'alt'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'src':
-        {
-          updateAttribute(this.#$avatar, 'src', newVal);
-          break;
-        }
-
-      case 'alt':
-        {
-          updateAttribute(this.#$avatar, 'alt', newVal);
-          break;
-        }
-    }
-  }
-
-  get src() {
-    return getAttribute(this, 'src');
-  }
-
-  set src(value) {
-    updateAttribute(this, 'src', value);
-  }
-
-  get alt() {
-    return getAttribute(this, 'alt', '');
-  }
-
-  set alt(value) {
-    updateAttribute(this, 'alt', value);
-  }
-
-});

package/chat-avatar/types.d.ts

@@ -1,12 +0,0 @@
-import type { TSinchAvatarElement, TSinchAvatarReact } from '../avatar/types';
-import type { TSinchElementReact } from '../types';
-export declare type TSinchChatAvatarElement = HTMLElement & {
-    alt: TSinchAvatarElement['alt'];
-    src: TSinchAvatarElement['src'];
-    setAttribute(name: 'alt', value: string): void;
-    setAttribute(name: 'src', value: string): void;
-};
-export declare type TSinchChatAvatarReact = TSinchElementReact<TSinchChatAvatarElement> & {
-    alt: TSinchAvatarReact['alt'];
-    src?: TSinchAvatarReact['src'];
-};

package/chat-avatar/types.js

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