@rededor/cura 0.5.2 → 0.5.4

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

@@ -0,0 +1,655 @@
+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') {
+        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;
+        }
+      }
+      else if (options === Number) {
+        if (this.value) {
+          this.maskedInput.typedValue = this.value;
+        }
+      }
+      else {
+        this.maskedInput.value = this.value || '';
+      }
+    }
+    else if (!!this.maskAdvanced) {
+      try {
+        if (this.maskAdvanced.constructor === Object) {
+          this.maskedInput = IMask(this.inputRef, this.maskAdvanced);
+        }
+        else if (typeof this.maskAdvanced === 'string') {
+          this.maskedInput = IMask(this.inputRef, JSON.parse(this.maskAdvanced));
+        }
+      }
+      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"
+            }
+          }
+        },
+        "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"
+            }
+          }
+        },
+        "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"
+            }
+          }
+        },
+        "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": {}
+        }
+      }];
+  }
+  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"
+      }];
+  }
+}
+//# sourceMappingURL=cura-input-text.js.map