@nectary/components 2.8.8 → 2.10.0

package/input/index.js

@@ -107,14 +107,14 @@ defineCustomElement('sinch-input', class extends NectaryElement {
             this.#$input.value = value;
             this.#$inputMask.textContent = placeholder;
             if (isElementFocused(this.#$input)) {
-              this.#$input.setSelectionRange(this.#selectionEnd, this.#selectionEnd);
+              this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
             }
             break;
           }
           if (nextVal !== prevVal) {
             this.#$input.value = nextVal;
             if (isElementFocused(this.#$input)) {
-              this.#$input.setSelectionRange(this.#selectionEnd, this.#selectionEnd);
+              this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
             }
           }
           break;
@@ -255,7 +255,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$input.selectionDirection = value;
   }
   setSelectionRange(selectionStart, selectionEnd) {
-    this.#$input.setSelectionRange(selectionStart, selectionEnd);
+    this.#setSelectionRange(selectionStart, selectionEnd);
   }
   get focusable() {
     return true;
@@ -266,6 +266,11 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   blur() {
     this.#$input.blur();
   }
+  #setSelectionRange = (start, end, direction) => {
+    if (this.type !== 'number') {
+      this.#$input.setSelectionRange(start, end, direction);
+    }
+  };
   #onCompositionStart = () => {
     this.#isCompositionInProgress = true;
     if (this.#maskSymbols !== null) {
@@ -279,7 +284,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         placeholder
       } = beginMaskedComposition(this.#$input.value, this.#maskSymbols, selectionStart);
       this.#$input.value = value;
-      this.#$input.setSelectionRange(selectionStart, selectionStart);
+      this.#setSelectionRange(selectionStart, selectionStart);
       this.#$inputMask.textContent = placeholder;
       this.#compositionBeginValue = value;
     }
@@ -299,7 +304,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
           cursorPos
         } = res;
         this.#$input.value = value;
-        this.#$input.setSelectionRange(cursorPos, cursorPos);
+        this.#setSelectionRange(cursorPos, cursorPos);
         this.#$inputMask.textContent = placeholder;
         if (mergedValue.length > 0) {
           this.#selectionStart = cursorPos;
@@ -354,7 +359,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         cursorPos
       } = res;
       this.#$input.value = value;
-      this.#$input.setSelectionRange(cursorPos, cursorPos);
+      this.#setSelectionRange(cursorPos, cursorPos);
       this.#$inputMask.textContent = placeholder;
       if (mergedValue.length > 0) {
         this.#selectionStart = cursorPos;
@@ -408,7 +413,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
       const nextSelectionStart = this.#$input.selectionStart;
       const nextSelectionEnd = this.#$input.selectionEnd;
       this.#$input.value = prevValue;
-      this.#$input.setSelectionRange(this.#selectionStart, this.#selectionEnd);
+      this.#setSelectionRange(this.#selectionStart, this.#selectionEnd);
       this.#selectionStart = nextSelectionStart;
       this.#selectionEnd = nextSelectionEnd;
       this.#dispatchChangeEvent(nextValue);
@@ -424,7 +429,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         cursorPos
       } = splitValueAndMask(nextVal, this.#maskSymbols);
       this.#$input.value = value;
-      this.#$input.setSelectionRange(cursorPos, cursorPos);
+      this.#setSelectionRange(cursorPos, cursorPos);
       this.#$inputMask.textContent = placeholder;
       if (mergedValue.length > 0) {
         this.#selectionStart = cursorPos;

package/input/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export type TSinchInputType = 'text' | 'password';
+export type TSinchInputType = 'text' | 'password' | 'number';
 export type TSinchInputClipboardEvent = CustomEvent<{
     value: string;
     replaceWith: (value: string) => void;

package/input/utils.js

@@ -1,4 +1,4 @@
-export const inputTypes = ['text', 'password'];
+export const inputTypes = ['text', 'password', 'number'];
 const MASK_SYMBOL_LETTER = 'A';
 const MASK_SYMBOL_DIGIT = '0';
 const EMPTY_CHAR = ' ';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "2.8.8",
+  "version": "2.10.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/popover/types.d.ts

@@ -34,7 +34,5 @@ export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
     /** Label that is used for a11y */
     'aria-label': string;
     /** Close event handler */
-    onClose?: () => void;
-    /** Close event handler */
     'on-close'?: (e: CustomEvent<void>) => void;
 };

package/text/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m)}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
+const templateHTML = '<style>:host{text-align:var(--sinch-comp-text-align);display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m);--sinch-comp-text-align:unset}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/tooltip/index.js

@@ -1,9 +1,9 @@
 import '../text';
 import '../pop';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 import { TooltipState } from './tooltip-state';
-import { getPopOrientation, orientationValues, typeValues } from './utils';
+import { getPopOrientation, orientationValues, textAlignValues, typeValues } from './utils';
 const TIP_SIZE = 8;
 const SHOW_DELAY_SLOW = 1000;
 const SHOW_DELAY_FAST = 250;
@@ -63,7 +63,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['text', 'orientation', 'type', 'aria-label', 'aria-description'];
+    return ['text', 'orientation', 'text-align', 'type', 'aria-label', 'aria-description'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -81,6 +81,11 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
           }
           break;
         }
+      case 'text-align':
+        {
+          updateAttribute(this.#$pop, 'text-align', newVal);
+          break;
+        }
       case 'type':
         {
           this.#tooltipState.updateOptions({
@@ -108,6 +113,12 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   set orientation(value) {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
+  get 'text-align'() {
+    return getLiteralAttribute(this, textAlignValues, 'text-align', 'left');
+  }
+  set 'text-align'(value) {
+    updateLiteralAttribute(this, textAlignValues, 'text-align', value);
+  }
   get type() {
     return getLiteralAttribute(this, typeValues, 'type', 'slow');
   }

package/tooltip/types.d.ts

@@ -1,5 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type TSinchTooltipTextAlign = 'center' | 'right' | 'left';
 export type TSinchTooltipType = 'slow' | 'fast';
 export type TSinchTooltipElement = HTMLElement & {
     /** Text */
@@ -8,6 +9,8 @@ export type TSinchTooltipElement = HTMLElement & {
     orientation: TSinchTooltipOrientation;
     /** Type */
     type: TSinchTooltipType;
+    /** Text Align */
+    'text-align': TSinchTooltipTextAlign;
     readonly footprintRect: TRect;
     readonly tooltipRect: TRect;
     /** Show event */
@@ -20,6 +23,8 @@ export type TSinchTooltipElement = HTMLElement & {
     setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
     /** Type */
     setAttribute(name: 'type', value: TSinchTooltipType): void;
+    /** Text Align */
+    setAttribute(name: 'text-align', value: TSinchTooltipTextAlign): void;
 };
 export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     /** Text */
@@ -28,6 +33,8 @@ export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     orientation?: TSinchTooltipOrientation;
     /** Type */
     type?: TSinchTooltipType;
+    /** Text Align */
+    'text-align'?: TSinchTooltipTextAlign;
     /** Show event handler */
     'on-show'?: (e: CustomEvent<void>) => void;
     /** Hide event handler */

package/tooltip/utils.d.ts

@@ -1,5 +1,6 @@
-import type { TSinchTooltipOrientation, TSinchTooltipType } from './types';
+import type { TSinchTooltipOrientation, TSinchTooltipType, TSinchTooltipTextAlign } from './types';
 import type { TSinchPopOrientation } from '../pop/types';
 export declare const typeValues: readonly TSinchTooltipType[];
 export declare const orientationValues: readonly TSinchTooltipOrientation[];
+export declare const textAlignValues: readonly TSinchTooltipTextAlign[];
 export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;

package/tooltip/utils.js

@@ -1,5 +1,6 @@
 export const typeValues = ['fast', 'slow'];
 export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const textAlignValues = ['right', 'center', 'left'];
 export const getPopOrientation = orientation => {
   if (orientation === 'top') {
     return 'top-center';