v4web-components/dist/collection/components/input/lab-ds-text-field/lab-ds-text-field.js

Stencil Component Starter

import { h } from '@stencil/core';
export class LabDsTextField {
  constructor() {
    this.value = undefined;
    this.valueState = this.value;
    this.titleInput = '';
    this.label = '';
    this.labelIcon = '';
    this.type = 'text';
    this.mask = undefined;
    this.maxLength = undefined;
    this.disabled = false;
    this.helperText = '';
    this.state = 'default';
  }
  handleChange(event) {
    let value = event.target.value;
    const onlyNumbers = (str) => str.replace(/[^0-9]/g, '');
    const currencyFormat = (str) => {
      return new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 2 }).format(parseFloat(str.replace(/[^0-9]/g, '')) / 100 || 0);
    };
    if (this.mask) {
      const masks = {
        CPF: onlyNumbers(value).replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4'),
        phone: onlyNumbers(value).replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3'),
        CEP: onlyNumbers(value).replace(/(\d{5})(\d{3})/, '$1-$2'),
        CNPJ: onlyNumbers(value).replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5'),
        credit_card: onlyNumbers(value).replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4'),
        hour: onlyNumbers(value).replace(/(\d{2})(\d{2})/, '$1:$2'),
        currency: currencyFormat(value),
      };
      this.valueState = masks[this.mask];
      value = masks[this.mask];
    }
    this.changeInput.emit(value);
  }
  watchHandler(newValue) {
    this.valueState = newValue;
  }
  render() {
    const iconHelper = {
      error: { icon: 'error' },
      success: { icon: 'check_circle' },
      default: { icon: '' },
    };
    return (h("div", { class: `v4-input ${this.state} ${this.disabled && 'disabled'}` }, h("span", { class: "title-text" }, this.titleInput), h("div", { class: "input-helper" }, h("div", { class: "input-icon" }, this.labelIcon && h("lab-ds-icon-not-selectable", { class: "icon left", size: "small", icon: this.labelIcon }), this.mask === 'currency' && h("span", { class: "currency-field" }, "R$"), h("input", { maxLength: this.maxLength, disabled: this.disabled, placeholder: this.label, class: "input-field", type: !this.mask ? this.type : 'text', value: this.valueState, onInput: event => this.handleChange(event) }), h("lab-ds-icon-not-selectable", { class: "icon right", size: "small", icon: iconHelper[this.state].icon })), this.helperText && (h("span", { class: "helper-text" }, iconHelper[this.state].icon && h("lab-ds-icon-not-selectable", { class: "icon", size: "x-small", icon: iconHelper[this.state].icon }), this.helperText)))));
  }
  static get is() { return "lab-ds-text-field"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["lab-ds-text-field.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["lab-ds-text-field.css"]
    };
  }
  static get properties() {
    return {
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value",
        "reflect": false
      },
      "titleInput": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "title-input",
        "reflect": false,
        "defaultValue": "''"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "''"
      },
      "labelIcon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label-icon",
        "reflect": false,
        "defaultValue": "''"
      },
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'text' | 'number'",
          "resolved": "\"number\" | \"text\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "'text'"
      },
      "mask": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'CPF' | 'phone' | 'CEP' | 'CNPJ' | 'hour' | 'currency' | 'credit_card' | ''",
          "resolved": "\"\" | \"CEP\" | \"CNPJ\" | \"CPF\" | \"credit_card\" | \"currency\" | \"hour\" | \"phone\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "mask",
        "reflect": false
      },
      "maxLength": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "max-length",
        "reflect": false
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "helperText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "helper-text",
        "reflect": false,
        "defaultValue": "''"
      },
      "state": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'error' | 'success' | 'default'",
          "resolved": "\"default\" | \"error\" | \"success\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "state",
        "reflect": false,
        "defaultValue": "'default'"
      }
    };
  }
  static get states() {
    return {
      "valueState": {}
    };
  }
  static get events() {
    return [{
        "method": "changeInput",
        "name": "changeInput",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get watchers() {
    return [{
        "propName": "value",
        "methodName": "watchHandler"
      }];
  }
}
//# sourceMappingURL=lab-ds-text-field.js.map