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

DNB Eufemia Design System UI Library

import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import { IS_IOS } from "../../../shared/helpers.js";
export default class InputModeNumber {
  constructor() {
    _defineProperty(this, "onBlur", () => {
      this.hasFocus = false;
    });
    _defineProperty(this, "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);
    });
    _defineProperty(this, "reset", () => {
      if (!this.inputElement) {
        return;
      }
      try {
        var _this$inputElement$ru, _this$inputElement;
        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$ru = (_this$inputElement = this.inputElement)['runCorrectCaretPosition']) === null || _this$inputElement$ru === void 0 || _this$inputElement$ru.call(_this$inputElement);
      } catch (error) {
        console.error(error);
      }
    });
  }
  setElement(element) {
    if (!IS_IOS) {
      return;
    }
    this.focusEventName = 'mouseenter';
    this.blurEventName = 'blur';
    if (!this.inputElement) {
      this.inputElement = element;
      this.add();
      this.handleLabel();
    }
  }
  handleLabel() {
    var _this$inputElement2;
    const id = (_this$inputElement2 = this.inputElement) === null || _this$inputElement2 === void 0 ? void 0 : _this$inputElement2.id;
    if (!id) {
      return;
    }
    this.labelElement = document.querySelector(`[for="${id}"]`);
    if (this.labelElement) {
      this.labelElement.addEventListener('mousedown', this.onFocus);
    }
  }
  add() {
    var _this$inputElement3;
    const fnId = '__getCorrectCaretPosition';
    if (this.inputElement && !((_this$inputElement3 = this.inputElement) !== null && _this$inputElement3 !== void 0 && _this$inputElement3[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;
  }
}
//# sourceMappingURL=InputModeNumber.js.map