v4web-components
Version:
Stencil Component Starter
97 lines (92 loc) • 7.63 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';
const labDsTextFieldCss = "input{border:none;outline:none;padding:0;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default)}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s);color:var(--lab-ds-semantic-color-fg-default)}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.input-field{width:100%}.currency-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon{display:flex;align-items:center;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs)}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon .icon.right{display:none}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.icon{display:flex}.v4-input.error .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.error .input-icon .icon.right{display:flex}.v4-input.error .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.success .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-success);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-icon .icon.right{display:flex}.v4-input.success .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success);box-shadow:none}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}";
const LabDsTextField$1 = /*@__PURE__*/ proxyCustomElement(class LabDsTextField extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.changeInput = createEvent(this, "changeInput", 7);
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 watchers() { return {
"value": ["watchHandler"]
}; }
static get style() { return labDsTextFieldCss; }
}, [1, "lab-ds-text-field", {
"value": [1],
"titleInput": [1, "title-input"],
"label": [1],
"labelIcon": [1, "label-icon"],
"type": [1],
"mask": [1],
"maxLength": [2, "max-length"],
"disabled": [4],
"helperText": [1, "helper-text"],
"state": [1],
"valueState": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-text-field", "lab-ds-icon-not-selectable"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-text-field":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsTextField$1);
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const LabDsTextField = LabDsTextField$1;
const defineCustomElement = defineCustomElement$1;
export { LabDsTextField, defineCustomElement };
//# sourceMappingURL=lab-ds-text-field.js.map