@nectary/components 2.4.0

package/input/index.js

@@ -0,0 +1,620 @@
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, 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-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;
+  #$rightWrapper;
+  #$leftSlot;
+  #$leftWrapper;
+  #$wrapper;
+  #selectionStart = 0;
+  #selectionEnd = 0;
+  #isCompositionInProgress = false;
+  #compositionBeginValue = '';
+  #wasClearedByMask = false;
+  #controller = null;
+  #sizeContext;
+  #maskSymbols = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
+    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"]');
+    this.#$rightWrapper = shadowRoot.querySelector('#right');
+    this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
+    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.role = 'textbox';
+    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('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);
+    this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, options);
+    this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange, options);
+    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();
+    this.#onLeftSlotChange();
+    this.#onRightSlotChange();
+    this.#onSizeUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'type':
+        {
+          updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
+          updateAttribute(this.#$input, 'spellcheck', newVal === 'password' ? 'false' : null);
+          break;
+        }
+      case 'value':
+        {
+          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) {
+            this.#$input.value = nextVal;
+            if (isElementFocused(this.#$input)) {
+              this.#$input.setSelectionRange(this.#selectionEnd, this.#selectionEnd);
+            }
+          }
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#updatePlaceholder();
+          break;
+        }
+      case 'mask':
+        {
+          this.#updateMask();
+          break;
+        }
+      case 'invalid':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, name, isInvalid);
+          break;
+        }
+      case 'disabled':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          const isDisabled = isAttrTrue(newVal);
+          this.#$input.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          this.#onSizeUpdate();
+          break;
+        }
+      case 'autocomplete':
+        {
+          updateAttribute(this.#$input, name, newVal);
+          break;
+        }
+      case 'aria-label':
+        {
+          this.#$input.ariaLabel = newVal;
+          break;
+        }
+    }
+  }
+  set type(value) {
+    updateAttribute(this, 'type', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, inputTypes, 'type', 'text');
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  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);
+  }
+  get placeholder() {
+    return getAttribute(this, 'placeholder');
+  }
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
+  set autocomplete(value) {
+    updateAttribute(this, 'autocomplete', value);
+  }
+  get autocomplete() {
+    return getAttribute(this, 'autocomplete', '');
+  }
+  get selectionStart() {
+    return this.#$input.selectionStart;
+  }
+  set selectionStart(value) {
+    this.#$input.selectionStart = value;
+  }
+  get selectionEnd() {
+    return this.#$input.selectionEnd;
+  }
+  set selectionEnd(value) {
+    this.#$input.selectionEnd = value;
+  }
+  get selectionDirection() {
+    return this.#$input.selectionDirection;
+  }
+  set selectionDirection(value) {
+    this.#$input.selectionDirection = value;
+  }
+  setSelectionRange(selectionStart, selectionEnd) {
+    this.#$input.setSelectionRange(selectionStart, selectionEnd);
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$input.focus();
+  }
+  blur() {
+    this.#$input.blur();
+  }
+  #onCompositionStart = () => {
+    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);
+    }
+  };
+  #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();
+      }
+    }
+  };
+  #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;
+    }
+    switch (e.detail) {
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
+  #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.#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 = () => {
+    const isEmpty = this.#$iconSlot.assignedElements().length === 0;
+    setClass(this.#$iconWrapper, 'empty', isEmpty);
+  };
+  #onLeftSlotChange = () => {
+    const isEmpty = this.#$leftSlot.assignedElements().length === 0;
+    setClass(this.#$leftWrapper, 'empty', isEmpty);
+  };
+  #onRightSlotChange = () => {
+    const isEmpty = this.#$rightSlot.assignedElements().length === 0;
+    setClass(this.#$rightWrapper, 'empty', isEmpty);
+  };
+  #onInputFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onInputBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onSizeUpdate() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    this.#sizeContext.dispatch(size);
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #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

@@ -0,0 +1,80 @@
+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 */
+    autocomplete: string;
+    /** Invalid state */
+    invalid: boolean;
+    /** Disabled */
+    disabled: boolean;
+    /** Size, `m` by default */
+    size: TSinchSize;
+    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 */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text field type, `text` by default */
+    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 */
+    setAttribute(name: 'autocomplete', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: TSinchSize): void;
+};
+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 */
+    type?: TSinchInputType;
+    /** The HTML autocomplete attribute */
+    autocomplete?: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder?: string;
+    /** Invalid state */
+    invalid?: boolean;
+    /** Disabled */
+    disabled?: boolean;
+    /** Size, `m` by default */
+    size?: TSinchSize;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
+    '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;
+};