@nectary/components 2.8.7 → 2.9.0

package/input/index.js

@@ -1,637 +0,0 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, 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)!important;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]:not(:placeholder-shown){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', 'autofocus', '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);
-          this.ariaInvalid = isInvalid.toString();
-          this.#$input.ariaInvalid = this.ariaInvalid;
-          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 'autofocus':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
-          }
-          const isAutofocus = isAttrTrue(newVal);
-          this.#$input.autofocus = isAutofocus;
-          updateBooleanAttribute(this, name, isAutofocus);
-          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 autofocus(isAutofocus) {
-    updateBooleanAttribute(this, 'autofocus', isAutofocus);
-  }
-  get autofocus() {
-    return getBooleanAttribute(this, 'autofocus');
-  }
-  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);
-  };
-});