@nectary/components 2.1.5 → 2.2.0

package/input/index.js

@@ -1,11 +1,12 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input{all:initial;flex:1;flex-basis:0;min-width:0;height:100%;padding:0 12px;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder);color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input:disabled+#border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}:host([invalid]:not(:focus-within)) #input:enabled+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#icon-wrapper:not(.empty)~#input{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
-import { inputTypes } from './utils';
+const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input-wrapper{position:relative;flex:1;flex-basis:0;min-width:0;align-self:stretch}#input{all:initial;width:100%;height:100%;padding:0 12px;box-sizing:border-box;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder);color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input-mask{display:none;position:absolute;inset:0;padding:0 12px;pointer-events:none;color:var(--sinch-comp-input-color-default-text-placeholder);white-space:pre;height:fit-content;margin:auto 0;overflow:hidden}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([disabled]) #border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input-wrapper:focus-within+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}#input-mask,:host([mask]) #input{font:var(--sinch-sys-font-body-monospace-m)}:host([mask]) #input-mask{display:block}:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within)+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input-wrapper>#input,#icon-wrapper.empty~#input-wrapper>#input-mask{padding-left:12px}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><div id="input-wrapper"><div id="input-mask"></div><input id="input" type="text"/></div><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
+import { deleteContentBackward, deleteContentForward, getMaskSymbols, inputTypes, insertText, beginMaskedComposition, endMaskedComposition, splitValueAndMask, getMergedValueSliced, insertFromPaste } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-input', class extends NectaryElement {
   #$input;
+  #$inputMask;
   #$iconSlot;
   #$iconWrapper;
   #$rightSlot;
@@ -13,10 +14,14 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #$leftSlot;
   #$leftWrapper;
   #$wrapper;
-  #cursorPos = null;
-  #isPendingDk = false;
+  #selectionStart = 0;
+  #selectionEnd = 0;
+  #isCompositionInProgress = false;
+  #compositionBeginValue = '';
+  #wasClearedByMask = false;
   #controller = null;
   #sizeContext;
+  #maskSymbols = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
@@ -24,6 +29,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('#input');
+    this.#$inputMask = shadowRoot.querySelector('#input-mask');
     this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
     this.#$iconWrapper = shadowRoot.querySelector('#icon-wrapper');
     this.#$rightSlot = shadowRoot.querySelector('slot[name="right"]');
@@ -32,18 +38,23 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$leftWrapper = shadowRoot.querySelector('#left');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#sizeContext = new Context(this.#$wrapper, 'size');
+    this.#controller = new AbortController();
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'textbox');
-    this.#controller = new AbortController();
+    if (this.#controller === null) {
+      this.#controller = new AbortController();
+    }
     const options = {
       signal: this.#controller.signal
     };
     this.#$input.addEventListener('input', this.#onInput, options);
+    this.#$input.addEventListener('cut', this.#onCut, options);
+    this.#$input.addEventListener('copy', this.#onCopy, options);
+    this.#$input.addEventListener('paste', this.#onPaste, options);
     this.#$input.addEventListener('compositionstart', this.#onCompositionStart, options);
-    this.#$input.addEventListener('mousedown', this.#onSelectionChange, options);
-    this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('compositionend', this.#onCompositionEnd, options);
     this.#$input.addEventListener('focus', this.#onInputFocus, options);
     this.#$input.addEventListener('blur', this.#onInputBlur, options);
     this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange, options);
@@ -52,6 +63,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.addEventListener('-change', this.#onChangeReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    this.addEventListener('-copy', this.#onCopyReactHandler, options);
+    this.addEventListener('-cut', this.#onCutReactHandler, options);
+    this.addEventListener('-paste', this.#onPasteReactHandler, options);
     this.#sizeContext.listen(this.#controller.signal);
     subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
     this.#onIconSlotChange();
@@ -62,9 +76,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
-    return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
+    return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -81,21 +96,40 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         {
           const nextVal = newVal ?? '';
           const prevVal = this.#$input.value;
+          if (this.#wasClearedByMask) {
+            this.#wasClearedByMask = false;
+            if (nextVal.length === 0) {
+              break;
+            }
+          }
+          if (this.#maskSymbols !== null) {
+            const {
+              value,
+              placeholder
+            } = splitValueAndMask(nextVal, this.#maskSymbols);
+            this.#$input.value = value;
+            this.#$inputMask.textContent = placeholder;
+            if (isElementFocused(this.#$input)) {
+              this.#$input.setSelectionRange(this.#selectionEnd, this.#selectionEnd);
+            }
+            break;
+          }
           if (nextVal !== prevVal) {
-            const prevCursorPos = this.#$input.selectionEnd;
-            const isPrevCursorEnd = prevCursorPos === prevVal.length;
             this.#$input.value = nextVal;
-            if (!isPrevCursorEnd) {
-              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+            if (isElementFocused(this.#$input)) {
+              this.#$input.setSelectionRange(this.#selectionEnd, this.#selectionEnd);
             }
           }
-          this.#onRightSlotChange();
           break;
         }
       case 'placeholder':
         {
-          this.#$input.placeholder = newVal ?? '';
-          updateAttribute(this, 'aria-placeholder', newVal);
+          this.#updatePlaceholder();
+          break;
+        }
+      case 'mask':
+        {
+          this.#updateMask();
           break;
         }
       case 'invalid':
@@ -146,6 +180,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   get value() {
     return getAttribute(this, 'value', '');
   }
+  set mask(value) {
+    updateAttribute(this, 'mask', value);
+  }
+  get mask() {
+    return getAttribute(this, 'mask');
+  }
   set placeholder(value) {
     updateAttribute(this, 'placeholder', value);
   }
@@ -194,6 +234,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
+  setSelectionRange(selectionStart, selectionEnd) {
+    this.#$input.setSelectionRange(selectionStart, selectionEnd);
+  }
   get focusable() {
     return true;
   }
@@ -204,15 +247,280 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$input.blur();
   }
   #onCompositionStart = () => {
-    this.#isPendingDk = true;
+    this.#isCompositionInProgress = true;
+    if (this.#maskSymbols !== null) {
+      const selectionStart = this.#$input.selectionStart;
+      this.#compositionBeginValue = this.#$input.value;
+      if (selectionStart === this.#$input.value.length) {
+        return;
+      }
+      const {
+        value,
+        placeholder
+      } = beginMaskedComposition(this.#$input.value, this.#maskSymbols, selectionStart);
+      this.#$input.value = value;
+      this.#$input.setSelectionRange(selectionStart, selectionStart);
+      this.#$inputMask.textContent = placeholder;
+      this.#compositionBeginValue = value;
+    }
+  };
+  #onCompositionEnd = e => {
+    this.#isCompositionInProgress = false;
+    if (this.#maskSymbols !== null) {
+      const value = this.#$input.value;
+      const wasValueInserted = value.length !== this.#compositionBeginValue.length;
+      const res = endMaskedComposition(value, e.data, this.#maskSymbols, this.#$input.selectionStart, wasValueInserted);
+      this.#compositionBeginValue = '';
+      if (res !== null) {
+        const {
+          value,
+          placeholder,
+          mergedValue,
+          cursorPos
+        } = res;
+        this.#$input.value = value;
+        this.#$input.setSelectionRange(cursorPos, cursorPos);
+        this.#$inputMask.textContent = placeholder;
+        if (mergedValue.length > 0) {
+          this.#selectionStart = cursorPos;
+          this.#selectionEnd = cursorPos;
+          this.#dispatchChangeEvent(mergedValue);
+        }
+      }
+      if ((res === null || res.mergedValue.length === 0) && this.value.length !== 0) {
+        this.#dispatchMaskClearChangeEvent();
+      }
+    } else {
+      this.#onInput();
+    }
+  };
+  #onMaskBeforeInput = e => {
+    this.#handleMaskBeforeInput(e.inputType, e.data);
+    e.preventDefault();
+  };
+  #handleMaskBeforeInput(inputType, data) {
+    const selectionStart = this.#$input.selectionStart ?? 0;
+    const selectionEnd = this.#$input.selectionEnd ?? 0;
+    let res = null;
+    switch (inputType) {
+      case 'insertText':
+        {
+          res = insertText(this.#$input.value, data, this.#maskSymbols, selectionStart, selectionEnd);
+          break;
+        }
+      case 'insertFromPaste':
+        {
+          res = insertFromPaste(this.#$input.value, data, this.#maskSymbols, selectionStart, selectionEnd);
+          break;
+        }
+      case 'deleteByCut':
+      case 'deleteContent':
+      case 'deleteContentBackward':
+        {
+          res = deleteContentBackward(this.#$input.value, this.#maskSymbols, selectionStart, selectionEnd);
+          break;
+        }
+      case 'deleteContentForward':
+        {
+          res = deleteContentForward(this.#$input.value, this.#maskSymbols, selectionStart, selectionEnd);
+          break;
+        }
+    }
+    if (res !== null) {
+      const {
+        value,
+        placeholder,
+        mergedValue,
+        cursorPos
+      } = res;
+      this.#$input.value = value;
+      this.#$input.setSelectionRange(cursorPos, cursorPos);
+      this.#$inputMask.textContent = placeholder;
+      if (mergedValue.length > 0) {
+        this.#selectionStart = cursorPos;
+        this.#selectionEnd = cursorPos;
+        this.#dispatchChangeEvent(mergedValue);
+      }
+    }
+    if ((res === null || res.mergedValue.length === 0) && this.value.length !== 0) {
+      this.#dispatchMaskClearChangeEvent();
+    }
+  }
+  #handleBeforeInput(inputType, data) {
+    const selectionStart = this.#$input.selectionStart ?? 0;
+    const selectionEnd = this.#$input.selectionEnd ?? 0;
+    switch (inputType) {
+      case 'insertFromPaste':
+        {
+          if (data === null) {
+            return;
+          }
+          const value = this.value;
+          const cursorPos = selectionStart + data.length;
+          const nextValue = value.substring(0, selectionStart) + data + value.substring(selectionEnd);
+          this.#selectionStart = cursorPos;
+          this.#selectionEnd = cursorPos;
+          this.#dispatchChangeEvent(nextValue);
+          break;
+        }
+      case 'deleteByCut':
+        {
+          const value = this.value;
+          const cursorPos = selectionStart;
+          const nextValue = value.substring(0, selectionStart) + value.substring(selectionEnd);
+          this.#selectionStart = cursorPos;
+          this.#selectionEnd = cursorPos;
+          this.#dispatchChangeEvent(nextValue);
+          break;
+        }
+    }
+  }
+  #onInput = () => {
+    if (this.#isCompositionInProgress) {
+      return;
+    }
+    if (this.#maskSymbols !== null) {
+      return;
+    }
+    const nextValue = this.#$input.value;
+    const prevValue = this.value;
+    if (prevValue !== nextValue) {
+      const nextSelectionStart = this.#$input.selectionStart;
+      const nextSelectionEnd = this.#$input.selectionEnd;
+      this.#$input.value = prevValue;
+      this.#$input.setSelectionRange(this.#selectionStart, this.#selectionEnd);
+      this.#selectionStart = nextSelectionStart;
+      this.#selectionEnd = nextSelectionEnd;
+      this.#dispatchChangeEvent(nextValue);
+    }
   };
-  #onSelectionChange = () => {
-    this.#cursorPos = this.#$input.selectionEnd;
+  #onMaskInputAutofillChange = () => {
+    const nextVal = this.#$input.value;
+    if (this.#maskSymbols !== null) {
+      const {
+        value,
+        placeholder,
+        mergedValue,
+        cursorPos
+      } = splitValueAndMask(nextVal, this.#maskSymbols);
+      this.#$input.value = value;
+      this.#$input.setSelectionRange(cursorPos, cursorPos);
+      this.#$inputMask.textContent = placeholder;
+      if (mergedValue.length > 0) {
+        this.#selectionStart = cursorPos;
+        this.#selectionEnd = cursorPos;
+        this.#dispatchChangeEvent(mergedValue);
+      } else {
+        this.#dispatchMaskClearChangeEvent();
+      }
+    }
   };
-  #onInput = e => {
-    e.stopPropagation();
-    this.#handleInput();
+  #onCopy = e => {
+    const value = this.#$input.value;
+    const selectionStart = this.#$input.selectionStart ?? 0;
+    const selectionEnd = this.#$input.selectionEnd ?? 0;
+    if (e.clipboardData === null || selectionStart === selectionEnd) {
+      return;
+    }
+    const copiedValue = this.#maskSymbols === null ? value.substring(selectionStart, selectionEnd) : getMergedValueSliced(value, this.#maskSymbols, selectionStart, selectionEnd);
+    let replacedValue = null;
+    const replaceWith = value => {
+      replacedValue = value ?? null;
+    };
+    if (this.#maskSymbols !== null) {
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', copiedValue);
+    }
+    const event = new CustomEvent('-copy', {
+      detail: {
+        value: copiedValue,
+        replaceWith
+      },
+      cancelable: true
+    });
+    this.dispatchEvent(event);
+    if (event.defaultPrevented || replacedValue !== null) {
+      e.preventDefault();
+    }
+    if (replacedValue !== null) {
+      e.clipboardData.setData('text/plain', replacedValue);
+    }
   };
+  #onCut = e => {
+    const value = this.#$input.value;
+    const selectionStart = this.#$input.selectionStart ?? 0;
+    const selectionEnd = this.#$input.selectionEnd ?? 0;
+    if (e.clipboardData === null || selectionStart === selectionEnd) {
+      return;
+    }
+    const copiedValue = this.#maskSymbols === null ? value.substring(selectionStart, selectionEnd) : getMergedValueSliced(value, this.#maskSymbols, selectionStart, selectionEnd);
+    let replacedValue = null;
+    const replaceWith = value => {
+      replacedValue = value ?? null;
+    };
+    if (this.#maskSymbols !== null) {
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', copiedValue);
+    }
+    const event = new CustomEvent('-cut', {
+      detail: {
+        value: copiedValue,
+        replaceWith
+      },
+      cancelable: true
+    });
+    this.dispatchEvent(event);
+    if (event.defaultPrevented || replacedValue !== null) {
+      e.preventDefault();
+    }
+    if (replacedValue !== null) {
+      e.clipboardData.setData('text/plain', replacedValue);
+      if (this.#maskSymbols !== null) {
+        this.#handleMaskBeforeInput('deleteByCut', null);
+      } else {
+        this.#handleBeforeInput('deleteByCut', null);
+      }
+    }
+  };
+  #onPaste = e => {
+    const pasteValue = e.clipboardData?.getData('text/plain') ?? '';
+    let replacedValue = '';
+    const replaceWith = value => {
+      replacedValue = value ?? '';
+    };
+    const event = new CustomEvent('-paste', {
+      detail: {
+        value: pasteValue,
+        replaceWith
+      },
+      cancelable: true
+    });
+    this.dispatchEvent(event);
+    if (event.defaultPrevented) {
+      e.preventDefault();
+    }
+    if (replacedValue.length === 0) {
+      return;
+    }
+    e.preventDefault();
+    if (this.#maskSymbols !== null) {
+      this.#handleMaskBeforeInput('insertFromPaste', replacedValue);
+    } else {
+      this.#handleBeforeInput('insertFromPaste', replacedValue);
+    }
+  };
+  #dispatchMaskClearChangeEvent() {
+    this.#wasClearedByMask = true;
+    this.#dispatchChangeEvent('');
+  }
+  #dispatchChangeEvent(value) {
+    if (value === this.value) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
   #onContextSize = e => {
     if (this.hasAttribute('size')) {
       return;
@@ -229,24 +537,38 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
     }
   };
-  #handleInput() {
-    const nextValue = this.#$input.value;
-    const prevValue = this.value;
-    if (prevValue !== nextValue) {
-      const nextCursorPos = this.#$input.selectionEnd;
-      if (!this.#isPendingDk) {
-        this.#$input.value = prevValue;
-        const prevCursorPos = this.#cursorPos;
-        const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-        if (!isPrevCursorEnd) {
-          this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
-        }
+  #updateMask() {
+    if (this.mask !== null) {
+      if (this.#maskSymbols === null) {
+        this.#$input.addEventListener('beforeinput', this.#onMaskBeforeInput, {
+          signal: this.#controller.signal
+        });
+        this.#$input.addEventListener('change', this.#onMaskInputAutofillChange, {
+          signal: this.#controller.signal
+        });
       }
-      this.#isPendingDk = false;
-      this.#cursorPos = nextCursorPos;
-      this.dispatchEvent(new CustomEvent('-change', {
-        detail: nextValue
-      }));
+      this.#maskSymbols = getMaskSymbols(this.mask);
+      const {
+        value,
+        placeholder
+      } = splitValueAndMask(this.#$input.value, this.#maskSymbols);
+      this.#$input.value = value;
+      this.#$inputMask.textContent = placeholder;
+    } else {
+      this.#maskSymbols = null;
+      this.#$input.removeEventListener('beforeinput', this.#onMaskBeforeInput);
+      this.#$input.removeEventListener('change', this.#onMaskInputAutofillChange);
+    }
+    this.#updatePlaceholder();
+  }
+  #updatePlaceholder() {
+    if (this.#maskSymbols === null) {
+      const value = this.placeholder;
+      this.#$input.placeholder = value ?? '';
+      updateAttribute(this, 'aria-placeholder', value);
+    } else {
+      updateAttribute(this, 'aria-placeholder', null);
+      this.#$input.placeholder = '';
     }
   }
   #onIconSlotChange = () => {
@@ -268,7 +590,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onSizeUpdate() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
@@ -283,4 +605,13 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
+  #onCopyReactHandler = e => {
+    getReactEventHandler(this, 'on-copy')?.(e);
+  };
+  #onCutReactHandler = e => {
+    getReactEventHandler(this, 'on-cut')?.(e);
+  };
+  #onPasteReactHandler = e => {
+    getReactEventHandler(this, 'on-paste')?.(e);
+  };
 });

package/input/types.d.ts

@@ -1,11 +1,17 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchInputType = 'text' | 'password';
+export type TSinchInputClipboardEvent = CustomEvent<{
+    value: string;
+    replaceWith: (value: string) => void;
+}>;
 export type TSinchInputElement = HTMLElement & {
     /** Text field type, `text` by default */
     type: TSinchInputType;
     /** Value */
     value: string;
+    /** Mask */
+    mask: string | null;
     /** Text that appears in the text field when it has no value set */
     placeholder: string | null;
     /** The HTML autocomplete attribute */
@@ -19,6 +25,7 @@ export type TSinchInputElement = HTMLElement & {
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
+    setSelectionRange(selectionStart: number, selectionEnd: number): void;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Focus event */
@@ -29,6 +36,8 @@ export type TSinchInputElement = HTMLElement & {
     setAttribute(name: 'type', value: TSinchInputType): void;
     /** Value */
     setAttribute(name: 'value', value: string): void;
+    /** Mask */
+    setAttribute(name: 'mask', value: string): void;
     /** Text that appears in the text field when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
     /** The HTML autocomplete attribute */
@@ -43,6 +52,8 @@ export type TSinchInputElement = HTMLElement & {
 export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     /** Controlled value, doesn't change on its own and requres an onChange-value state loop */
     value: string;
+    /** Mask */
+    mask?: string;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** Text field type, `text` by default */
@@ -63,4 +74,7 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     'on-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
+    'on-cut'?: (e: TSinchInputClipboardEvent) => void;
+    'on-copy'?: (e: TSinchInputClipboardEvent) => void;
+    'on-paste'?: (e: TSinchInputClipboardEvent) => void;
 };

package/input/utils.d.ts

@@ -1,2 +1,26 @@
 import type { TSinchInputType } from './types';
+type TSInchInputMaskSymbolModeDigit = 0;
+type TSInchInputMaskSymbolModeLetter = 1;
+type TSInchInputMaskSymbolModeExact = 2;
+type TSinchInputMaskSymbol = {
+    value: string;
+    mode: TSInchInputMaskSymbolModeDigit | TSInchInputMaskSymbolModeLetter | TSInchInputMaskSymbolModeExact;
+    placeholder: string;
+};
+type TSinchMaskInputResult = {
+    value: string;
+    placeholder: string;
+    cursorPos: number;
+    mergedValue: string;
+};
 export declare const inputTypes: readonly TSinchInputType[];
+export declare const getMaskSymbols: (maskValue: string) => TSinchInputMaskSymbol[];
+export declare const deleteContentBackward: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const deleteContentForward: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const beginMaskedComposition: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number) => Pick<TSinchMaskInputResult, 'value' | 'placeholder'>;
+export declare const endMaskedComposition: (inputValue: string, data: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, wasValueInserted: boolean) => TSinchMaskInputResult | null;
+export declare const insertText: (inputValue: string, data: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const insertFromPaste: (inputValue: string, data: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const splitValueAndMask: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[]) => TSinchMaskInputResult;
+export declare const getMergedValueSliced: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => string;
+export {};