@dnb/eufemia/es/components/input-masked/text-mask/InputModeNumber.js

DNB Eufemia Design System UI Library

import { IS_IOS } from "../../../shared/helpers.js";
export default class InputModeNumber {
  setElement(element) {
    if (!IS_IOS) {
      return;
    }
    this.focusEventName = 'mouseenter';
    this.blurEventName = 'blur';
    if (!this.inputElement) {
      this.inputElement = element;
      this.add();
      this.handleLabel();
    }
  }
  handleLabel() {
    const id = this.inputElement?.id;
    if (!id) {
      return;
    }
    this.labelElement = document.querySelector(`[for="${id}"]`);
    if (this.labelElement) {
      this.labelElement.addEventListener('mousedown', this.onFocus);
    }
  }
  add() {
    const fnId = '__getCorrectCaretPosition';
    if (this.inputElement && !this.inputElement?.[fnId]) {
      this.inputElement[fnId] = true;
      this.inputElement.addEventListener(this.focusEventName, this.onFocus);
      this.inputElement.addEventListener(this.blurEventName, this.onBlur);
    }
  }
  removeEvent(element) {
    if (element) {
      element.removeEventListener(this.focusEventName, this.onFocus);
      element.removeEventListener(this.blurEventName, this.onBlur);
      element.removeEventListener('mousedown', this.onFocus);
    }
  }
  remove() {
    this.reset();
    clearTimeout(this.timeout);
    this.removeEvent(this.inputElement);
    this.removeEvent(this.labelElement);
    delete this.inputElement;
    delete this.labelElement;
  }
  onBlur = () => {
    this.hasFocus = false;
  };
  onFocus = () => {
    if (this.hasFocus || !this.inputElement) {
      return;
    }
    this.hasFocus = true;
    this._type = this.inputElement.type;
    if (this._type === 'number') {
      return;
    }
    this._value = this.inputElement.value;
    this._width = this.inputElement.offsetWidth;
    this._cssText = this.inputElement.style.cssText;
    this._placeholder = this.inputElement.placeholder;
    this._selectionStart = this.inputElement.selectionStart;
    this._selectionEnd = this.inputElement.selectionEnd;
    this.inputElement.placeholder = this._value;
    this.inputElement.type = 'number';
    this.inputElement.classList.add('dnb-input-masked--hide-controls');
    this.inputElement.style.width = `${this._width}px`;
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.reset();
    }, 10);
  };
  reset = () => {
    if (!this.inputElement) {
      return;
    }
    try {
      this.inputElement.type = this._type;
      this.inputElement.style.cssText = this._cssText;
      this.inputElement.classList.remove('dnb-input-masked--hide-controls');
      if (this.inputElement.value === '' || this.inputElement.value == null) {
        this.inputElement.value = this._value;
      }
      this.inputElement.placeholder = this._placeholder;
      if (this._selectionStart > 0) {
        this.inputElement.selectionStart = this._selectionStart;
        this.inputElement.selectionEnd = this._selectionEnd;
      }
      this.inputElement['runCorrectCaretPosition']?.();
    } catch (error) {
      console.error(error);
    }
  };
}
//# sourceMappingURL=InputModeNumber.js.map