import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
import { ElementIDUtils } from '@sankhyalabs/core';

class MaskFormatter {
  constructor(mask) {
    this.mask = mask;
    this.maskChars = {
      '#': (char) => /\d/.test(char),
      'U': (char) => /[a-zA-Z]/.test(char),
      'L': (char) => /[a-zA-Z]/.test(char),
      'A': (char) => /[a-zA-Z0-9]/.test(char),
      '?': (char) => /[a-zA-Z]/.test(char),
      '*': () => true
    };
  }
  /**
   * Formata a string de acordo com a máscara
   * @param value String a ser formatada
   * @returns String formatada
   */
  format(value) {
    if (!value || !this.mask)
      return value;
    const cleanedValue = this.removeIncompatibleChars(value);
    let formattedValue = '';
    let valueIndex = 0;
    let maskIndex = 0;
    while (maskIndex < this.mask.length && valueIndex < cleanedValue.length) {
      const maskChar = this.mask[maskIndex];
      const inputChar = cleanedValue[valueIndex];
      if (maskChar === "'") {
        maskIndex++;
        if (maskIndex < this.mask.length) {
          formattedValue += this.mask[maskIndex];
          maskIndex++;
        }
        continue;
      }
      if (this.maskChars[maskChar]) {
        if (this.maskChars[maskChar](inputChar)) {
          if (maskChar === 'U') {
            formattedValue += inputChar.toUpperCase();
          }
          else if (maskChar === 'L') {
            formattedValue += inputChar.toLowerCase();
          }
          else {
            formattedValue += inputChar;
          }
          valueIndex++;
        }
        else {
          valueIndex++;
          continue;
        }
      }
      else {
        formattedValue += maskChar;
        if (inputChar === maskChar) {
          valueIndex++;
        }
      }
      maskIndex++;
    }
    return formattedValue;
  }
  /**
   * Remove caracteres que não são compatíveis com nenhuma posição da máscara
   */
  removeIncompatibleChars(value) {
    let cleanValue = '';
    for (let i = 0; i < value.length; i++) {
      const char = value[i];
      let isValidChar = false;
      for (const maskRule in this.maskChars) {
        if (this.maskChars[maskRule](char)) {
          isValidChar = true;
          break;
        }
      }
      if (!isValidChar) {
        for (let j = 0; j < this.mask.length; j++) {
          if (this.mask[j] === char && !this.maskChars[this.mask[j]]) {
            isValidChar = true;
            break;
          }
        }
      }
      if (isValidChar) {
        cleanValue += char;
      }
    }
    return cleanValue;
  }
  /**
   * Remove a máscara de uma string formatada
   * @param formattedValue String formatada
   * @returns String sem máscara
   */
  removeMask(formattedValue) {
    if (!formattedValue || !this.mask)
      return formattedValue;
    let cleanValue = '';
    let valueIndex = 0;
    let maskIndex = 0;
    while (valueIndex < formattedValue.length && maskIndex < this.mask.length) {
      const maskChar = this.mask[maskIndex];
      const inputChar = formattedValue[valueIndex];
      if (maskChar === "'") {
        maskIndex++;
        if (maskIndex < this.mask.length) {
          if (inputChar === this.mask[maskIndex]) {
            valueIndex++;
          }
          maskIndex++;
        }
        continue;
      }
      if (this.maskChars[maskChar]) {
        if (this.maskChars[maskChar](inputChar)) {
          cleanValue += inputChar;
        }
        valueIndex++;
      }
      else {
        if (inputChar === maskChar) {
          valueIndex++;
        }
      }
      maskIndex++;
    }
    while (valueIndex < formattedValue.length) {
      const remainingChar = formattedValue[valueIndex];
      if (/[a-zA-Z0-9]/.test(remainingChar)) {
        cleanValue += remainingChar;
      }
      valueIndex++;
    }
    return cleanValue;
  }
  /**
   * Retorna a máscara configurada
   */
  getMask() {
    return this.mask;
  }
  /**
   * Gera um placeholder baseado na máscara
   * @returns String com placeholder gerado
   */
  generatePlaceholder() {
    if (!this.mask)
      return '';
    let placeholder = '';
    let maskIndex = 0;
    while (maskIndex < this.mask.length) {
      const maskChar = this.mask[maskIndex];
      if (maskChar === "'") {
        maskIndex++;
        if (maskIndex < this.mask.length) {
          placeholder += this.mask[maskIndex];
          maskIndex++;
        }
        continue;
      }
      if (this.maskChars[maskChar]) {
        switch (maskChar) {
          case '#':
            placeholder += '0';
            break;
          case 'U':
          case 'L':
          case '?':
            placeholder += 'A';
            break;
          case 'A':
            placeholder += 'A';
            break;
          case '~':
            placeholder += '0';
            break;
          case '*':
            placeholder += '_';
            break;
          default:
            placeholder += '_';
            break;
        }
      }
      else {
        placeholder += maskChar;
      }
      maskIndex++;
    }
    return placeholder;
  }
}

const ezClassicInputCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;--ez-classic-input--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-input--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-input--border-color-success:var(--color--green-600, #157A00);--ez-classic-input--border-color-error:var(--color--red-600, #BD0025);--ez-classic-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-input--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-input--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--placeholder-color:#bdbdbd;--ez-classic-input--icon-color:var(--color--gray-400, #77777A);--ez-classic-input--helptext-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--height:56px}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin:var(--space--4, 4px) var(--space--2, 2px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);height:var(--ez-classic-input--height);background-color:var(--ez-classic-input--background-color)}.input-container,.input-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-input--border-color-default)}.input-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-success)}.input-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-error)}.input-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-warning)}.input-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-input--icon-color)}input{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;color:var(--ez-classic-input--text-color)}input::placeholder{color:var(--ez-classic-input--placeholder-color)}.input-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-input--background-color-disabled);border-color:var(--ez-classic-input--border-color-default)}.input-container[data-disabled=\"true\"]>*{cursor:not-allowed}.input-container input:read-only{cursor:default}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-input--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}";

const EzClassicInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezChange = createEvent(this, "ezChange", 7);
    this.ezBlur = createEvent(this, "ezBlur", 7);
    this.ezFocus = createEvent(this, "ezFocus", 7);
    this.iconClick = createEvent(this, "iconClick", 7);
    this._internalValueChange = false;
    this.type = 'text';
    this.value = undefined;
    this.label = undefined;
    this.helpText = undefined;
    this.placeholder = undefined;
    this.enabled = true;
    this.readonly = false;
    this.name = undefined;
    this.minlength = undefined;
    this.maxlength = undefined;
    this.leftIconName = undefined;
    this.rightIconName = undefined;
    this.rightIconTooltip = undefined;
    this.leftIconTooltip = undefined;
    this.state = "default";
    this.leftIconClickable = false;
    this.rightIconClickable = false;
    this.mask = undefined;
    this.emitMaskedValue = false;
  }
  /**
   * Aplica o foco no campo.
   */
  async setFocus(option) {
    if (option === null || option === void 0 ? void 0 : option.selectText) {
      this._inputElem.select();
    }
    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
      this._inputElem.scrollIntoView({ behavior: "smooth", block: "center" });
    }
    this._inputElem.focus({ preventScroll: true });
  }
  /**
   * Remove o foco do campo.
   */
  async setBlur() {
    this._inputElem.blur();
  }
  async syncValue() {
    if (this._internalValueChange) {
      this._internalValueChange = false;
      return;
    }
    if (this.value && this._maskFormatter && this._inputElem) {
      const formattedValue = this._maskFormatter.format(this.value);
      this._inputElem.value = formattedValue;
    }
    else if (this._inputElem) {
      this._inputElem.value = this.value || '';
    }
  }
  onInput(event) {
    try {
      const inputElement = event.target;
      let inputValue = inputElement.value;
      if (this._maskFormatter) {
        const formattedValue = this._maskFormatter.format(inputValue);
        const cleanValue = this._maskFormatter.removeMask(formattedValue);
        inputElement.value = formattedValue;
        this._internalValueChange = true;
        this.value = cleanValue;
        const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
        this.ezChange.emit(emitValue);
      }
      else {
        this._internalValueChange = true;
        this.value = inputValue;
        this.ezChange.emit(inputValue);
      }
    }
    catch (error) {
      console.error("Error processing input event:", error);
    }
  }
  onBlur() {
    this.ezBlur.emit(this.value);
  }
  onFocus() {
    this.ezFocus.emit(this.value);
  }
  handleIconClick(event, icon) {
    if (!this.enabled) {
      return;
    }
    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
      this.setFocus({ preventScroll: true });
      return;
    }
    event.stopPropagation();
    this.iconClick.emit({ icon });
  }
  addInfoId() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._inputElem) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
    }
  }
  componentWillLoad() {
    if (this.mask && !this._maskFormatter) {
      this._maskFormatter = new MaskFormatter(this.mask);
    }
    if (!this.placeholder && this._maskFormatter) {
      this.placeholder = this._maskFormatter.generatePlaceholder();
    }
  }
  componentDidLoad() {
    this.syncValue();
    this.addInfoId();
  }
  render() {
    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
  }
  get _element() { return getElement(this); }
  static get watchers() { return {
    "value": ["syncValue"]
  }; }
};
EzClassicInput.style = ezClassicInputCss;

export { EzClassicInput as ez_classic_input };
