uicore-ts/compiledScripts/UITextField.js

UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework tha

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var UITextField_exports = {};
__export(UITextField_exports, {
  UITextField: () => UITextField
});
module.exports = __toCommonJS(UITextField_exports);
var import_UIColor = require("./UIColor");
var import_UICore = require("./UICore");
var import_UIObject = require("./UIObject");
var import_UITextView = require("./UITextView");
var import_UIView = require("./UIView");
const _UITextField = class extends import_UITextView.UITextView {
  constructor(elementID, viewHTMLElement = null, type = import_UITextView.UITextView.type.textField) {
    super(elementID, type, viewHTMLElement);
    this._nativeAutocompleteData = [];
    this._hasCommittedSelection = import_UIObject.NO;
    this.minCharactersForAutocomplete = 0;
    this.hideNativeAutocompleteOnExactMatch = import_UIObject.YES;
    this._validatesAgainstNativeAutocomplete = import_UIObject.NO;
    this._isValidAgainstNativeAutocomplete = import_UIObject.YES;
    this._validationInvalidBackgroundColor = import_UIColor.UIColor.redColor.colorWithAlpha(0.5);
    this._validationInvalidBorderColor = import_UIColor.UIColor.colorWithRGBA(200, 0, 0, 0.5);
    this.textElementView.viewHTMLElement.setAttribute("type", "text");
    this.backgroundColor = import_UIColor.UIColor.transparentColor;
    this.addTargetForControlEvent(
      import_UIView.UIView.controlEvent.PointerUpInside,
      (sender, event) => sender.focus()
    );
    this.textElementView.viewHTMLElement.oninput = (event) => {
      this._hasCommittedSelection = import_UIObject.NO;
      this.sendControlEventForKey(_UITextField.controlEvent.TextChange, event);
      this._validateAgainstNativeAutocompleteIfNeeded();
      this._updateDatalistVisibility();
    };
    this.textElementView.viewHTMLElement.onchange = (event) => {
      this.sendControlEventForKey(_UITextField.controlEvent.TextChange, event);
      if (this._datalistElement && this._nativeAutocompleteData.includes(this.text)) {
        this._hasCommittedSelection = import_UIObject.YES;
        this._updateDatalistVisibility();
      }
      this._validateAgainstNativeAutocompleteIfNeeded();
    };
    this.textElementView.controlEventTargetAccumulator.Blur = (sender, event) => {
      this._validateAgainstNativeAutocompleteIfNeeded();
    };
    this.textElementView.style.webkitUserSelect = "text";
    this.nativeSelectionEnabled = import_UIObject.YES;
    this.pausesPointerEvents = import_UIObject.NO;
    this.changesOften = import_UIObject.YES;
  }
  get controlEventTargetAccumulator() {
    return super.controlEventTargetAccumulator;
  }
  get viewHTMLElement() {
    return this._viewHTMLElement;
  }
  set text(text) {
    this.textElementView.viewHTMLElement.value = text;
    this._validateAgainstNativeAutocompleteIfNeeded();
    this._updateDatalistVisibility();
  }
  get text() {
    return this.textElementView.viewHTMLElement.value;
  }
  set placeholderText(text) {
    this.textElementView.viewHTMLElement.placeholder = text;
  }
  get placeholderText() {
    return this.textElementView.viewHTMLElement.placeholder;
  }
  setPlaceholderText(key, defaultString) {
    this._placeholderTextKey = key;
    this._defaultPlaceholderText = defaultString;
    const languageName = import_UICore.UICore.languageService.currentLanguageKey;
    this.placeholderText = import_UICore.UICore.languageService.stringForKey(key, languageName, defaultString, import_UIObject.nil);
  }
  get autocompleteEnabled() {
    const value = this.textElementView.viewHTMLElement.getAttribute("autocomplete");
    return value === null || value === "" || value === "on";
  }
  set autocompleteEnabled(enabled) {
    if (enabled) {
      this.textElementView.viewHTMLElement.removeAttribute("autocomplete");
    } else {
      const type = this.textElementView.viewHTMLElement.type;
      if (type === "password") {
        this.textElementView.viewHTMLElement.setAttribute("autocomplete", "new-password one-time-code");
      } else {
        this.textElementView.viewHTMLElement.setAttribute("autocomplete", "off");
      }
    }
  }
  didReceiveBroadcastEvent(event) {
    super.didReceiveBroadcastEvent(event);
    if (event.name == import_UIView.UIView.broadcastEventName.LanguageChanged || event.name == import_UIView.UIView.broadcastEventName.AddedToViewTree) {
      this._setPlaceholderFromKeyIfPossible();
    }
  }
  willMoveToSuperview(superview) {
    super.willMoveToSuperview(superview);
    this._setPlaceholderFromKeyIfPossible();
  }
  _setPlaceholderFromKeyIfPossible() {
    if (this._placeholderTextKey && this._defaultPlaceholderText) {
      this.setPlaceholderText(this._placeholderTextKey, this._defaultPlaceholderText);
    }
  }
  get isSecure() {
    const result = this.textElementView.viewHTMLElement.type == "password";
    return result;
  }
  set isSecure(secure) {
    let type = "text";
    if (secure) {
      type = "password";
    }
    this.textElementView.viewHTMLElement.type = type;
  }
  set nativeAutocompleteData(data) {
    this._nativeAutocompleteData = data;
    this._hasCommittedSelection = import_UIObject.NO;
    this._updateDatalist();
    this._validateAgainstNativeAutocompleteIfNeeded();
    this._updateDatalistVisibility();
  }
  get nativeAutocompleteData() {
    return this._nativeAutocompleteData;
  }
  set validatesAgainstNativeAutocomplete(validate) {
    if (this._validatesAgainstNativeAutocomplete !== validate) {
      this._validatesAgainstNativeAutocomplete = validate;
      this._validateAgainstNativeAutocompleteIfNeeded();
    }
  }
  get validatesAgainstNativeAutocomplete() {
    return this._validatesAgainstNativeAutocomplete;
  }
  get isValidAgainstNativeAutocomplete() {
    return this._isValidAgainstNativeAutocomplete;
  }
  set validationInvalidBackgroundColor(color) {
    this._validationInvalidBackgroundColor = color;
    this._updateValidationVisualState();
  }
  get validationInvalidBackgroundColor() {
    return this._validationInvalidBackgroundColor;
  }
  set validationInvalidBorderColor(color) {
    this._validationInvalidBorderColor = color;
    this._updateValidationVisualState();
  }
  get validationInvalidBorderColor() {
    return this._validationInvalidBorderColor;
  }
  _validateAgainstNativeAutocompleteIfNeeded() {
    if (!this._validatesAgainstNativeAutocomplete) {
      this._setValidationState(import_UIObject.YES);
      return;
    }
    const currentText = this.text;
    if (currentText.length === 0) {
      this._setValidationState(import_UIObject.YES);
      return;
    }
    const isValid = this._nativeAutocompleteData.includes(currentText);
    this._setValidationState(isValid);
  }
  _setValidationState(isValid) {
    const wasValid = this._isValidAgainstNativeAutocomplete;
    this._isValidAgainstNativeAutocomplete = isValid;
    this._updateValidationVisualState();
    if (wasValid !== isValid) {
      this.sendControlEventForKey(_UITextField.controlEvent.ValidationChange);
    }
  }
  _updateValidationVisualState() {
    const inputElement = this.textElementView.viewHTMLElement;
    if (!this._validatesAgainstNativeAutocomplete || this._isValidAgainstNativeAutocomplete) {
      inputElement.classList.remove("autocomplete-invalid");
      if (this._validationInvalidBackgroundColor) {
        inputElement.style.removeProperty("background-color");
      }
      if (this._validationInvalidBorderColor) {
        inputElement.style.removeProperty("border-color");
      }
    } else {
      inputElement.classList.add("autocomplete-invalid");
      if (this._validationInvalidBackgroundColor) {
        inputElement.style.backgroundColor = this._validationInvalidBackgroundColor.stringValue;
      }
      if (this._validationInvalidBorderColor) {
        inputElement.style.borderColor = this._validationInvalidBorderColor.stringValue;
      }
    }
  }
  clearIfInvalid() {
    if (this._validatesAgainstNativeAutocomplete && !this._isValidAgainstNativeAutocomplete && this.text.length > 0) {
      this.text = "";
      return import_UIObject.YES;
    }
    return import_UIObject.NO;
  }
  getMatchingAutocompleteOptions() {
    const currentText = this.text;
    if (currentText.length === 0) {
      return [...this._nativeAutocompleteData];
    }
    return this._getFilteredAutocompleteOptions(currentText);
  }
  _updateDatalist() {
    if (this._nativeAutocompleteData.length === 0) {
      if (this._datalistElement) {
        this._datalistElement.remove();
        this.textElementView.viewHTMLElement.removeAttribute("list");
        this._datalistElement = void 0;
      }
      return;
    }
    if (!this._datalistElement) {
      const datalistId = this.elementID + "_datalist";
      this._datalistElement = document.createElement("datalist");
      this._datalistElement.id = datalistId;
      this.viewHTMLElement.appendChild(this._datalistElement);
      this.textElementView.viewHTMLElement.setAttribute("list", datalistId);
    }
    this._datalistElement.innerHTML = "";
    this._nativeAutocompleteData.forEach((item) => {
      const option = document.createElement("option");
      option.value = item;
      this._datalistElement.appendChild(option);
    });
  }
  _updateDatalistVisibility() {
    if (!this._datalistElement) {
      return;
    }
    if (this._hasCommittedSelection) {
      this.textElementView.viewHTMLElement.removeAttribute("list");
      return;
    }
    const currentText = this.text;
    if (this.minCharactersForAutocomplete > 0 && currentText.length < this.minCharactersForAutocomplete) {
      this.textElementView.viewHTMLElement.removeAttribute("list");
      return;
    }
    if (this.hideNativeAutocompleteOnExactMatch && currentText.length > 0) {
      const matchingOptions = this._nativeAutocompleteData.filter(
        (item) => item.toLowerCase().startsWith(currentText.toLowerCase()) || currentText.toLowerCase().startsWith(item.toLowerCase())
      );
      if (matchingOptions.length === 1) {
        this.textElementView.viewHTMLElement.removeAttribute("list");
        return;
      }
    }
    this.textElementView.viewHTMLElement.setAttribute("list", this._datalistElement.id);
  }
  _getFilteredAutocompleteOptions(searchText) {
    const searchLower = searchText.toLowerCase();
    return this._nativeAutocompleteData.filter(
      (item) => item.toLowerCase().includes(searchLower)
    );
  }
  wasRemovedFromViewTree() {
    super.wasRemovedFromViewTree();
    if (this._datalistElement) {
      this._datalistElement.remove();
      this._datalistElement = void 0;
    }
  }
};
let UITextField = _UITextField;
UITextField.controlEvent = Object.assign({}, import_UITextView.UITextView.controlEvent, {
  "TextChange": "TextChange",
  "ValidationChange": "ValidationChange"
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  UITextField
});
//# sourceMappingURL=UITextField.js.map