@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/forms/cura-input-text/cura-input-text.js

@@ -1,655 +1,746 @@
-import { Host, h } from '@stencil/core';
-import IMask from 'imask';
-import { maskOptions } from './mask-presets/input-mask-presets';
+import { Host, h } from "@stencil/core";
+import IMask from "imask";
+import { maskOptions } from "./mask-presets/input-mask-presets";
 export class CuraInputText {
-  constructor() {
-    this.mode = 'default';
-    this.status = 'default';
-    this.size = 'medium';
-    this.type = 'text';
-    this.label = '';
-    this.placeholder = null;
-    this.value = undefined;
-    this.iconName = '';
-    this.helperText = undefined;
-    this.disabled = false;
-    this.required = false;
-    this.maskPreset = undefined;
-    this.maskRegex = undefined;
-    this.maskAdvanced = undefined;
-    this.maxlength = undefined;
-    this.readOnly = false;
-    this.isLoading = false;
-    this.isHovered = false;
-    this.isFocused = false;
-    this.styles = {};
-    this.clearIcon = true;
-  }
-  connectedCallback() {
-    this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);
-    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
-    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
-    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
-    this.styles['--neutral-medium'] = window.CuraAPI.theme.colors.getColor(`neutral-medium`);
-    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
-    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
-    this.styles['--success-dark'] = window.CuraAPI.theme.colors.getColor(`success-dark`);
-    this.styles['--success-darker'] = window.CuraAPI.theme.colors.getColor(`success-darker`);
-    this.styles['--success-lighter'] = window.CuraAPI.theme.colors.getColor(`success-lighter`);
-    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor(`error-lighter`);
-    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor(`error-dark`);
-    this.styles['--error-darker'] = window.CuraAPI.theme.colors.getColor(`error-darker`);
-    this.styles['--error-base'] = window.CuraAPI.theme.colors.getColor(`error-base`);
-    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor(`info-base`);
-    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
-    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
-    this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
-    this.styles['--font-weight-medium'] = this.weights.medium;
-    this.styles['--font-weight-bold'] = this.weights.bold;
-    this.styles['--font-weight-regular'] = this.weights.regular;
-  }
-  getClasses() {
-    return {
-      [this.size.toLowerCase()]: this.mode === 'default',
-      disabled: this.disabled,
-      isLoading: this.isLoading,
-      isFocused: this.isFocused && !this.disabled && !this.readOnly && !this.isLoading,
-      isHovered: this.isHovered,
-      isSuccess: this.status === 'success',
-      isError: this.status === 'error',
-      transparent: this.mode === 'transparent',
-    };
-  }
-  getLabelColor() {
-    if (!!this.disabled) {
-      return 'neutral-medium';
-    }
-    else if (this.isLoading && this.mode === 'transparent' && !this.isHovered) {
-      return 'neutral-dark';
-    }
-    else if (((this.isFocused || this.isHovered || this.status === 'success' || this.status === 'error') && !this.readOnly) || this.isHovered) {
-      return 'neutral-black';
-    }
-    else {
-      return 'neutral-dark';
-    }
-  }
-  renderIcon() {
-    if ((!this.iconName && this.status === 'default') || (this.mode === 'transparent' && this.isLoading) || (this.mode === 'transparent' && this.status === 'default')) {
-      return;
-    }
-    const iconSizeDefaultMode = this.size === 'large' ? 20 : 16;
-    const baseIconSize = this.mode === 'transparent' ? 20 : iconSizeDefaultMode;
-    const iconMap = {
-      loading: { name: this.iconName, color: 'primary-base' },
-      success: { name: 'checkCircle', color: 'success-dark' },
-      error: { name: 'alertCircle', color: 'error-dark' },
-      default: { name: this.iconName, color: 'neutral-dark' },
-    };
-    const iconConfig = iconMap[this.isLoading ? 'loading' : this.status || 'default'];
-    return (h("div", { class: 'feedback-icon', style: this.styles }, h("cura-icon", { name: iconConfig.name, iconset: 'default', size: baseIconSize, color: iconConfig.color })));
-  }
-  renderHelperText() {
-    const isError = this.status === 'error';
-    const isSuccess = this.status === 'success';
-    const isDefault = this.status === 'default';
-    const helperTextSize = this.size === 'large' ? 'small' : 'xsmall';
-    const helperTextWeight = this.mode === 'transparent' ? 'bold' : 'regular';
-    const colorText = (() => {
-      if (this.disabled)
-        return 'neutral-medium';
-      if (this.isLoading)
-        return 'primary-base';
-      if (this.isFocused || this.isHovered)
-        return 'neutral-black';
-      return 'neutral-dark';
-    })();
-    return (h("div", { style: this.styles, class: 'helper-text' }, isDefault && (h("cura-label", { size: helperTextSize, color: colorText, weight: helperTextWeight }, h("slot", null))), isError && (h("cura-label", { size: helperTextSize, lineHeight: 'xsmall', color: 'error-dark', weight: helperTextWeight }, h("slot", null))), isSuccess && (h("cura-label", { size: helperTextSize, color: 'success-dark', weight: helperTextWeight }, h("slot", null)))));
-  }
-  componentDidLoad() {
-    this.initializeMask();
-  }
-  handleMouseEnter() {
-    this.isHovered = true;
-  }
-  handleMouseLeave() {
-    this.isHovered = false;
-  }
-  handleMaskUpdate() {
-    if (!!this.maskedInput) {
-      this.maskedInput.updateValue();
-    }
-  }
-  handleClearInput() {
-    this.handleMaskUpdate();
-    this.value = '';
-    this.inputRef.value = '';
-    this.handleMaskUpdate();
-  }
-  handleInputFocus() {
-    this.handleMaskUpdate();
-    this.isFocused = true;
-  }
-  handleInputBlur() {
-    this.handleMaskUpdate();
-    setTimeout(() => {
-      this.isFocused = false;
-    }, 150);
-  }
-  handleMaskPresetChange() {
-    this.initializeMask();
-  }
-  handleMaskRegexChange() {
-    this.initializeMask();
-  }
-  handlemaskAdvancedChange() {
-    this.initializeMask();
-  }
-  handleValueChange(newValue) {
-    if (this.maskedInput && this.maskedInput.value !== newValue) {
-      this.maskedInput.value = newValue;
-    }
-  }
-  initializeMask() {
-    if (this.maskedInput) {
-      this.maskedInput.destroy();
-    }
-    if (!!this.maskRegex) {
-      if (typeof this.maskRegex === 'string') {
+    constructor() {
+        this.mode = 'default';
+        this.status = 'default';
+        this.size = 'medium';
+        this.type = 'text';
+        this.inputMode = 'text';
+        this.label = '';
+        this.name = '';
+        this.placeholder = null;
+        this.value = '';
+        this.iconName = '';
+        this.helperText = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.maskPreset = undefined;
+        this.maskRegex = undefined;
+        this.maskAdvanced = undefined;
+        this.maxlength = undefined;
+        this.readOnly = false;
+        this.isLoading = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.styles = {};
+        this.clearIcon = true;
+        this.hideErrorIcon = false;
+    }
+    /**
+     * Callback to restore the switch state from the form.
+     */
+    formStateRestoreCallback(state) {
+        this.value = state.value;
+        this.applyValueToMask();
+        this.internals.setFormValue(this.value);
+    }
+    /**
+     * Callback for form association.
+     */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+     * Callback to reset the switch state when the form is reset.
+     */
+    formResetCallback() {
+        this.handleClearInput();
+        this.internals.setValidity({});
+        this.internals.setFormValue('');
+    }
+    /**
+     * Callback to update the switch's disabled state when the form's disabled state changes.
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    connectedCallback() {
+        this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);
+        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+        this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+        this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+        this.styles['--neutral-medium'] = window.CuraAPI.theme.colors.getColor(`neutral-medium`);
+        this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+        this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+        this.styles['--success-dark'] = window.CuraAPI.theme.colors.getColor(`success-dark`);
+        this.styles['--success-darker'] = window.CuraAPI.theme.colors.getColor(`success-darker`);
+        this.styles['--success-lighter'] = window.CuraAPI.theme.colors.getColor(`success-lighter`);
+        this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor(`error-lighter`);
+        this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor(`error-dark`);
+        this.styles['--error-darker'] = window.CuraAPI.theme.colors.getColor(`error-darker`);
+        this.styles['--error-base'] = window.CuraAPI.theme.colors.getColor(`error-base`);
+        this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor(`info-base`);
+        this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+        this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+        this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--font-weight-medium'] = this.weights.medium;
+        this.styles['--font-weight-bold'] = this.weights.bold;
+        this.styles['--font-weight-regular'] = this.weights.regular;
+    }
+    getClasses() {
+        return {
+            [this.size.toLowerCase()]: this.mode === 'default',
+            disabled: this.disabled,
+            isLoading: this.isLoading,
+            isFocused: this.isFocused && !this.disabled && !this.readOnly && !this.isLoading,
+            isHovered: this.isHovered,
+            [this.status]: true,
+            transparent: this.mode === 'transparent',
+        };
+    }
+    getLabelColor() {
+        if (!!this.disabled) {
+            return 'neutral-medium';
+        }
+        else if (this.isLoading && this.mode === 'transparent' && !this.isHovered) {
+            return 'neutral-dark';
+        }
+        else if (((this.isFocused || this.isHovered || this.status === 'success' || this.status === 'error') && !this.readOnly) || this.isHovered) {
+            return 'neutral-black';
+        }
+        else {
+            return 'neutral-dark';
+        }
+    }
+    renderIcon() {
+        if ((this.iconName === '' && this.status === 'default') || (this.mode === 'transparent' && this.isLoading) || (this.mode === 'transparent' && this.status === 'default')) {
+            return;
+        }
+        // Used when input is rendered in cura-dropdown-search with error status
+        if (this.status === 'error' && this.hideErrorIcon) {
+            return;
+        }
+        const iconSizeDefaultMode = this.size === 'large' ? 20 : 16;
+        const baseIconSize = this.mode === 'transparent' ? 20 : iconSizeDefaultMode;
+        const iconMap = {
+            loading: { name: this.iconName, color: 'primary-base' },
+            success: { name: 'checkCircle', color: 'success-dark' },
+            error: { name: 'alertCircle', color: 'error-dark' },
+            default: { name: this.iconName, color: 'neutral-dark' },
+        };
+        const iconConfig = iconMap[this.isLoading ? 'loading' : this.status || 'default'];
+        return (h("div", { class: "feedback-icon", style: this.styles }, h("cura-icon", { name: iconConfig.name, iconset: "default", size: baseIconSize, color: iconConfig.color })));
+    }
+    renderHelperText() {
+        const isError = this.status === 'error';
+        const isSuccess = this.status === 'success';
+        const isDefault = this.status === 'default';
+        const helperTextSize = this.size === 'large' ? 'small' : 'xsmall';
+        const helperTextWeight = this.mode === 'transparent' ? 'bold' : 'regular';
+        const colorText = (() => {
+            if (this.disabled)
+                return 'neutral-medium';
+            if (this.isLoading)
+                return 'primary-base';
+            if (this.isFocused || this.isHovered)
+                return 'neutral-black';
+            return 'neutral-dark';
+        })();
+        return (h("div", { style: this.styles, class: "helper-text" }, isDefault && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: colorText, weight: helperTextWeight }, h("slot", null))), isError && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "error-dark", weight: helperTextWeight }, h("slot", null))), isSuccess && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "success-dark", weight: helperTextWeight }, h("slot", null)))));
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    componentDidLoad() {
+        this.initializeMask();
+    }
+    disconnectedCallback() {
+        this.destroyMask();
+    }
+    handleMaskUpdate() {
+        if (this.maskedInput) {
+            this.maskedInput.updateValue();
+        }
+    }
+    handleClearInput() {
+        this.handleMaskUpdate();
+        this.value = '';
+        this.inputRef.value = '';
+        this.valueChange.emit(this.value);
+        this.handleMaskUpdate();
+    }
+    handleInputFocus() {
+        this.handleMaskUpdate();
+        this.isFocused = true;
+    }
+    handleInputBlur() {
+        this.handleMaskUpdate();
+        setTimeout(() => {
+            this.isFocused = false;
+        }, 150);
+    }
+    shouldDisplayMask() {
+        return this.maskPreset || this.maskRegex || this.maskAdvanced;
+    }
+    initializeMask() {
+        if (this.shouldDisplayMask()) {
+            if (this.maskedInput) {
+                this.destroyMask();
+            }
+            if (this.maskPreset) {
+                this.initializePresetMask();
+            }
+            else if (this.maskRegex) {
+                this.initializeRegexMask();
+            }
+            else if (this.maskAdvanced) {
+                this.initializeAdvancedMask();
+            }
+            this.applyValueToMask();
+        }
+        else {
+            this.clearMaskValue();
+        }
+    }
+    initializeRegexMask() {
         const cleanedRegexString = this.maskRegex.replace(/^\/|\/[gimsuy]*$/g, '');
         const flags = (this.maskRegex.match(/\/[gimsuy]*$/g) || [''])[0].slice(1);
         this.maskedInput = IMask(this.inputRef, { mask: new RegExp(cleanedRegexString, flags) });
-        this.handleMaskUpdate();
-      }
-      else {
-        this.maskedInput = IMask(this.inputRef, { mask: this.maskRegex });
-        this.handleMaskUpdate();
-      }
-    }
-    else if (!!this.maskPreset) {
-      const options = maskOptions[this.maskPreset];
-      if (!options) {
-        console.error(`Mask preset "${this.maskPreset}" not found.`);
-        return;
-      }
-      this.maskedInput = IMask(this.inputRef, options);
-      if (options === Date) {
-        if (this.value) {
-          this.maskedInput.typedValue = this.value;
+    }
+    initializePresetMask() {
+        const options = maskOptions[this.maskPreset];
+        if (options) {
+            this.maskedInput = IMask(this.inputRef, options);
         }
-      }
-      else if (options === Number) {
-        if (this.value) {
-          this.maskedInput.typedValue = this.value;
+        else {
+            console.error(`Mask preset "${this.maskPreset}" not found.`);
         }
-      }
-      else {
-        this.maskedInput.value = this.value || '';
-      }
-    }
-    else if (!!this.maskAdvanced) {
-      try {
-        if (this.maskAdvanced.constructor === Object) {
-          this.maskedInput = IMask(this.inputRef, this.maskAdvanced);
+    }
+    initializeAdvancedMask() {
+        try {
+            const config = typeof this.maskAdvanced === 'string' ? JSON.parse(this.maskAdvanced) : this.maskAdvanced;
+            this.maskedInput = IMask(this.inputRef, config);
         }
-        else if (typeof this.maskAdvanced === 'string') {
-          this.maskedInput = IMask(this.inputRef, JSON.parse(this.maskAdvanced));
+        catch (error) {
+            console.error('Error defining maskAdvanced:', error);
         }
-      }
-      catch (error) {
-        console.error('Erro ao definir a maskAdvanced:', error);
-      }
-    }
-    this.handleMaskUpdate();
-  }
-  handleInputChange(event) {
-    const inputValue = event.target.value;
-    if (this.type === 'number') {
-      const numericValue = parseFloat(inputValue);
-      if (!isNaN(numericValue)) {
-        this.value = numericValue;
-        this.valueChange.emit(numericValue);
-      }
-      else {
-        console.error('Invalid input:', inputValue);
-      }
-    }
-    if (this.maskedInput) {
-      if (this.maskedInput.mask instanceof Date || this.maskedInput.mask === Number) {
-        this.maskedInput.typedValue = inputValue;
-        this.value = this.maskedInput.typedValue;
-      }
-      else {
-        this.maskedInput.value = inputValue;
-        this.value = this.maskedInput.value;
-      }
-    }
-    this.value = inputValue;
-    this.valueChange.emit(this.value);
-  }
-  handleKeyDown(event) {
-    this.handleMaskUpdate();
-    this.type === 'number' ? this.handleBlockInvalidNumber(event) : undefined;
-  }
-  handleBlockInvalidNumber(e) {
-    return ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();
-  }
-  render() {
-    return (h(Host, null, h("div", { style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { class: 'input-wrapper' }, this.label && (h("cura-label", { class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { class: 'required' }, "* "))), h("div", { class: 'cura-input-field', style: this.styles }, this.renderIcon(), h("input", { type: this.type, autocomplete: 'off', "aria-autocomplete": 'none', "aria-required": this.required ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.status === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value, ref: ref => (this.inputRef = ref) }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { size: this.size === 'large' ? 20 : 16, color: 'primary-base', name: 'closeCircle', iconset: 'default', class: 'clear-button', onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { size: this.size === 'large' ? 'medium' : 'small', color: 'primary-base' })), this.renderHelperText()))));
-  }
-  static get is() { return "cura-input-text"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-input-text.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-input-text.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "mode": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'default' | 'transparent'",
-          "resolved": "\"default\" | \"transparent\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Mode of the input: 'default' or 'transparent' (default: 'default')"
-        },
-        "attribute": "mode",
-        "reflect": true,
-        "defaultValue": "'default'"
-      },
-      "status": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'error' | 'success' | 'default'",
-          "resolved": "\"default\" | \"error\" | \"success\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates input status(default: default)"
-        },
-        "attribute": "status",
-        "reflect": true,
-        "defaultValue": "'default'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'medium'"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'text' | 'number'",
-          "resolved": "\"number\" | \"text\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of the input: 'text', 'number' (default: 'text')"
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'text'"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label text for the input"
-        },
-        "attribute": "label",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Placeholder text for the input"
-        },
-        "attribute": "placeholder",
-        "reflect": true,
-        "defaultValue": "null"
-      },
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of the input field"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "iconName": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether to display a cura icon (default: null)"
-        },
-        "attribute": "icon-name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "helperText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Helper text displayed below the input"
-        },
-        "attribute": "helper-text",
-        "reflect": true
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is disabled (default: false)"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is required (default: false)"
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "maskPreset": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "MaskPreset",
-          "resolved": "number | string",
-          "references": {
-            "MaskPreset": {
-              "location": "local",
-              "path": "/Users/fellipesoares/Code/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx"
+    }
+    applyValueToMask() {
+        if (this.maskedInput) {
+            if (this.maskedInput.mask === Date || this.maskedInput.mask === Number) {
+                this.maskedInput.typedValue = this.value;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "see",
-              "text": " : https://imask.js.org/"
-            }],
-          "text": "Mask preset for input formatting: 'cpf', 'cnpj', 'phone', 'date', etc. Uses IMask library."
-        },
-        "attribute": "mask-preset",
-        "reflect": false
-      },
-      "maskRegex": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "MaskedRegExp['mask'] | string | null",
-          "resolved": "RegExp | string",
-          "references": {
-            "MaskedRegExp": {
-              "location": "import",
-              "path": "imask"
+            else {
+                this.value = this.maskedInput.value;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "see",
-              "text": " : https://imask.js.org/"
-            }],
-          "text": "Regular expression for custom input masking. Uses IMask library."
-        },
-        "attribute": "mask-regex",
-        "reflect": true
-      },
-      "maskAdvanced": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "FactoryArg | string | null",
-          "resolved": "string | RegExp | Masked<any> | FactoryOpts | DateConstructor | NumberConstructor | ((value: string, masked: Masked<any>) => boolean) | DynamicMaskType",
-          "references": {
-            "FactoryArg": {
-              "location": "import",
-              "path": "imask"
+            this.handleMaskUpdate();
+        }
+    }
+    clearMaskValue() {
+        this.inputRef.value = this.value;
+    }
+    destroyMask() {
+        if (this.maskedInput) {
+            this.maskedInput.destroy();
+            this.maskedInput = undefined;
+        }
+    }
+    handleInputChange(event) {
+        const inputValue = event.target.value;
+        if (this.type === 'number') {
+            this.handleNumberInputChange(inputValue);
+        }
+        else {
+            this.handleTextInputChange(inputValue);
+        }
+        this.internals.setFormValue(this.value);
+    }
+    handleNumberInputChange(inputValue) {
+        const numericValue = parseFloat(inputValue);
+        if (!isNaN(numericValue)) {
+            this.value = numericValue;
+        }
+        else {
+            console.error('Invalid numeric input:', inputValue);
+        }
+    }
+    handleTextInputChange(inputValue) {
+        if (this.maskedInput) {
+            if (this.maskedInput.mask instanceof Date || this.maskedInput.mask === Number) {
+                this.maskedInput.typedValue = inputValue;
+                this.value = this.maskedInput.typedValue;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "see",
-              "text": " : https://imask.js.org/"
-            }],
-          "text": "Advanced mask object to be used with IMask library"
-        },
-        "attribute": "mask-advanced",
-        "reflect": true
-      },
-      "maxlength": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number | undefined",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Maximum length of the input value (default: undefined)"
-        },
-        "attribute": "maxlength",
-        "reflect": true
-      },
-      "readOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is read-only (default: false)"
-        },
-        "attribute": "read-only",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "isLoading": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is in loading state (default: false)"
-        },
-        "attribute": "is-loading",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "clearIcon": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Icon button name for the clear button (default: 'closeCircle')"
-        },
-        "attribute": "clear-icon",
-        "reflect": true,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isHovered": {},
-      "isFocused": {},
-      "styles": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{EventEmitter<string | number>}"
-            }],
-          "text": "Emitted when the value of the input changes"
-        },
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
+            this.value = this.maskedInput.value;
+        }
+        else {
+            this.value = inputValue;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "styles",
-        "methodName": "connectedCallback"
-      }, {
-        "propName": "size",
-        "methodName": "getClasses"
-      }, {
-        "propName": "status",
-        "methodName": "renderIcon"
-      }, {
-        "propName": "mode",
-        "methodName": "renderIcon"
-      }, {
-        "propName": "maskPreset",
-        "methodName": "handleMaskPresetChange"
-      }, {
-        "propName": "maskRegex",
-        "methodName": "handleMaskRegexChange"
-      }, {
-        "propName": "maskAdvanced",
-        "methodName": "handlemaskAdvancedChange"
-      }, {
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }];
-  }
+    }
+    handleKeyDown(event) {
+        if (this.type === 'number') {
+            this.handleBlockInvalidNumber(event);
+        }
+    }
+    handleBlockInvalidNumber(e) {
+        if (['e', 'E', '+', '-'].includes(e.key))
+            e.preventDefault();
+    }
+    render() {
+        return (h(Host, { key: '958e9c9ce207852a9a89bcbf6b2300a020e57e21' }, h("div", { key: 'a0b0a2dc0cef39d82f922f19a68adc2fea19ada4', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { key: '600ac418f5e11b145546efd999e46f6dc439dbe2', class: "input-wrapper" }, this.label && (h("cura-label", { key: 'b7d8c89801d73f6b304b15cb3a1fb053be6c10a3', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: 'fbfc7e95fae3d2f695af8e966d50c36eaddf83ff', class: "required" }, "* "))), h("div", { key: '50b2e6a4edb17507bcbed66ddb262b5816eeea98', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), h("input", { key: 'e0fb2fe18ca4555b15396bc794dc553273f06921', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref) }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { key: 'dde6d704a5fa3aac4bfa2428b636fc7e19301ace', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { key: '9322c8e784058c1e0880b3d248c5f1272a1518c4', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
+    }
+    static get is() { return "cura-input-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-input-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-input-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'transparent'",
+                    "resolved": "\"default\" | \"transparent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the input: 'default' or 'transparent' (default: 'default')"
+                },
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'error' | 'success' | 'default'",
+                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates input status(default: default)"
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the input: 'text', 'number' (default: 'text')"
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'text'"
+            },
+            "inputMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the input: 'text', 'number' (default: 'text')"
+                },
+                "attribute": "input-mode",
+                "reflect": true,
+                "defaultValue": "'text'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the input"
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name text for the input"
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input"
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input field"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display a cura icon (default: null)"
+                },
+                "attribute": "icon-name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the input"
+                },
+                "attribute": "helper-text",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled (default: false)"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required (default: false)"
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maskPreset": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "MaskPreset",
+                    "resolved": "number | string",
+                    "references": {
+                        "MaskPreset": {
+                            "location": "local",
+                            "path": "/Users/fellipesoares/Code/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx",
+                            "id": "src/components/forms/cura-input-text/cura-input-text.tsx::MaskPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": " : https://imask.js.org/"
+                        }],
+                    "text": "Mask preset for input formatting: 'cpf', 'cnpj', 'phone', 'date', etc. Uses IMask library."
+                },
+                "attribute": "mask-preset",
+                "reflect": false
+            },
+            "maskRegex": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": " : https://imask.js.org/"
+                        }],
+                    "text": "Regular expression for custom input masking. Uses IMask library."
+                },
+                "attribute": "mask-regex",
+                "reflect": true
+            },
+            "maskAdvanced": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any | string | null",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": " : https://imask.js.org/"
+                        }],
+                    "text": "Advanced mask object to be used with IMask library"
+                },
+                "attribute": "mask-advanced",
+                "reflect": true
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum length of the input value (default: undefined)"
+                },
+                "attribute": "maxlength",
+                "reflect": true
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is read-only (default: false)"
+                },
+                "attribute": "read-only",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is in loading state (default: false)"
+                },
+                "attribute": "is-loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clearIcon": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon button name for the clear button (default: 'closeCircle')"
+                },
+                "attribute": "clear-icon",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "hideErrorIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the alertCircle icon when necessary(as used in CuraDropdownSearch)"
+                },
+                "attribute": "hide-error-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {},
+            "isFocused": {},
+            "styles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{EventEmitter<string | number>}"
+                        }],
+                    "text": "Emitted when the value of the input changes"
+                },
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "styles",
+                "methodName": "connectedCallback"
+            }, {
+                "propName": "size",
+                "methodName": "getClasses"
+            }, {
+                "propName": "status",
+                "methodName": "renderIcon"
+            }, {
+                "propName": "mode",
+                "methodName": "renderIcon"
+            }, {
+                "propName": "maskPreset",
+                "methodName": "initializeMask"
+            }, {
+                "propName": "maskRegex",
+                "methodName": "initializeMask"
+            }, {
+                "propName": "maskAdvanced",
+                "methodName": "initializeMask"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=cura-input-text.js.map