@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.10

package/dist/esm/ez-classic-input.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
-import { ElementIDUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, MaskFormatter as MaskFormatter$1 } from '@sankhyalabs/core';
 
 class MaskFormatter {
   constructor(mask) {
@@ -196,7 +196,7 @@ class MaskFormatter {
   }
 }
 
-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 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;padding-inline:var(--space--2, 2px);width:100%;--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:var(--space--56, 56px);--ez-classic-input--height-small:var(--space--48, 48px);--ez-classic-input--height-xsmall:var(--space--40, 40px);--ez-classic-input--gap:var(--space--10, 10px);--ez-classic-input--padding-inline:var(--space--16, 16px)}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding-inline:var(--ez-classic-input--padding-inline);box-sizing:border-box;gap:var(--ez-classic-input--gap);margin-block:var(--space--4, 4px);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--small{height:var(--ez-classic-input--height-small)}.input-container--xsmall{height:var(--ez-classic-input--height-xsmall)}.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;color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}.required-indicator{font-size:var(--font--size--default, 14px);font-family:var(--font--pattern, 'Roboto');color:var(--color--red-600, #BD0025);margin-left:var(--space--4, 4px);vertical-align:top}";
 
 const EzClassicInput = class {
   constructor(hostRef) {
@@ -210,10 +210,13 @@ const EzClassicInput = class {
     this.value = undefined;
     this.label = undefined;
     this.helpText = undefined;
+    this.errorMessage = undefined;
     this.placeholder = undefined;
     this.enabled = true;
     this.readonly = false;
+    this.required = false;
     this.name = undefined;
+    this.size = "default";
     this.minlength = undefined;
     this.maxlength = undefined;
     this.leftIconName = undefined;
@@ -257,29 +260,67 @@ const EzClassicInput = class {
       this._inputElem.value = this.value || '';
     }
   }
+  async observeErrorMessage(newValue) {
+    if (newValue && newValue.trim() !== '') {
+      this.state = "error";
+      return;
+    }
+    this.state = "default";
+  }
   onInput(event) {
     try {
       const inputElement = event.target;
-      let inputValue = inputElement.value;
+      const 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);
+        const { formattedValue, cleanValue } = this.processInputWithMask(inputValue);
+        this.updateInputValue(inputElement, formattedValue, cleanValue);
       }
       else {
-        this._internalValueChange = true;
-        this.value = inputValue;
-        this.ezChange.emit(inputValue);
+        this.updateInputValueWithoutMask(inputValue);
       }
     }
     catch (error) {
       console.error("Error processing input event:", error);
     }
   }
+  processInputWithMask(inputValue) {
+    if (this.mask === "cgc_cpf") {
+      return this.processCgcCpfMask(inputValue);
+    }
+    else {
+      return this.processRegularMask(inputValue);
+    }
+  }
+  processCgcCpfMask(inputValue) {
+    const numericOnly = inputValue.replace(/\D/g, '');
+    if (numericOnly.length === 11 || numericOnly.length === 14) {
+      const maskToUse = numericOnly.length === 11
+        ? MaskFormatter$1.DEFAULT_MASKS.cpf
+        : MaskFormatter$1.DEFAULT_MASKS.cnpj;
+      this._maskFormatter = new MaskFormatter(maskToUse);
+      const formattedValue = this._maskFormatter.format(numericOnly);
+      return { formattedValue, cleanValue: numericOnly };
+    }
+    // Se não tem o tamanho correto, mantém apenas os números
+    return { formattedValue: numericOnly, cleanValue: numericOnly };
+  }
+  processRegularMask(inputValue) {
+    const formattedValue = this._maskFormatter.format(inputValue);
+    const cleanValue = this._maskFormatter.removeMask(formattedValue);
+    return { formattedValue, cleanValue };
+  }
+  updateInputValue(inputElement, formattedValue, cleanValue) {
+    inputElement.value = formattedValue;
+    this._internalValueChange = true;
+    this.value = cleanValue;
+    const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
+    this.ezChange.emit(emitValue);
+  }
+  updateInputValueWithoutMask(inputValue) {
+    this._internalValueChange = true;
+    this.value = inputValue;
+    this.ezChange.emit(inputValue);
+  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -306,24 +347,64 @@ const EzClassicInput = class {
       ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
     }
   }
-  componentWillLoad() {
-    if (this.mask && !this._maskFormatter) {
-      this._maskFormatter = new MaskFormatter(this.mask);
-    }
+  buildPlaceholder() {
     if (!this.placeholder && this._maskFormatter) {
       this.placeholder = this._maskFormatter.generatePlaceholder();
     }
   }
+  buildMaskFormatter() {
+    if (this.mask && (!this._maskFormatter || this.mask === 'cgc_cpf')) {
+      const maskToBuilder = this.getMaskToBuilder();
+      this._maskFormatter = maskToBuilder ? new MaskFormatter(maskToBuilder) : undefined;
+    }
+  }
+  getMaskToBuilder() {
+    if (this.mask === "cgc_cpf") {
+      return this.getCGCCpfMask();
+    }
+    if (this.mask === 'phone') {
+      return this.getPhoneMask();
+    }
+    if (this.mask in MaskFormatter$1.DEFAULT_MASKS) {
+      return MaskFormatter$1.DEFAULT_MASKS[this.mask];
+    }
+    return this.mask;
+  }
+  getPhoneMask() {
+    if (this.value && this.value.length === 10) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone : undefined;
+    }
+    if (this.value && this.value.length === 11) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone_mobile : undefined;
+    }
+    return undefined;
+  }
+  getCGCCpfMask() {
+    var _a, _b;
+    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 11) {
+      return MaskFormatter$1.DEFAULT_MASKS.cpf;
+    }
+    if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) === 14) {
+      return MaskFormatter$1.DEFAULT_MASKS.cnpj;
+    }
+    return undefined;
+  }
+  componentDidRender() {
+    this.buildMaskFormatter();
+    this.buildPlaceholder();
+    this.syncValue();
+  }
   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))));
+    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label, this.required && h("span", { class: "required-indicator" }, "*")), h("div", { class: "input-container " + (this.size ? `input-container--${this.size}` : ""), "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 || this.errorMessage) && (h("span", { id: "input_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
   }
   get _element() { return getElement(this); }
   static get watchers() { return {
-    "value": ["syncValue"]
+    "value": ["syncValue"],
+    "errorMessage": ["observeErrorMessage"]
   }; }
 };
 EzClassicInput.style = ezClassicInputCss;

package/dist/esm/ez-classic-number-input.entry.js

@@ -0,0 +1,201 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
+import { NumberUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
+import { i as initI18n } from './index-9e6dab5b.js';
+
+const ezClassicNumberInputCss = ":host{--ez-classic-number-input__min-width:0px;--ez-classic-number-input__max-width:100%;display:block;width:100%}.number__input{height:100%;min-width:var(--ez-classic-number-input__min-width);max-width:var(--ez-classic-number-input__max-width)}";
+
+const EzClassicNumberInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
+    this._focused = false;
+    this._changePending = false;
+    this._valuePromiseCallbacks = [];
+    this._value = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.required = false;
+    this.canShowError = true;
+    this.errorMessage = undefined;
+    this.allowNegative = true;
+    this.precision = undefined;
+    this.prettyPrecision = undefined;
+    this.mode = "regular";
+    this.size = "default";
+    this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    this._textInput.setFocus(options);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /*
+    * Retorna uma promise com o valor da opção selecionada,
+    * que será resolvida quando o backend devolver este dado.
+    */
+  async getValueAsync() {
+    if (this._changePending) {
+      return new Promise(accept => {
+        this._valuePromiseCallbacks.push(accept);
+      });
+    }
+    return Promise.resolve(this.value);
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this.handleNewValue(newValue, oldValue);
+    }
+    this._changePending = false;
+  }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
+  handleNewValue(newValue, oldValue) {
+    const newValueValidated = this.validateValue(newValue);
+    const oldValueValidated = this.validateValue(oldValue);
+    if (newValueValidated === null) {
+      this._value = '';
+    }
+    if (newValueValidated === oldValueValidated) {
+      return;
+    }
+    const textValue = this.getTextValue(newValueValidated) || '';
+    const parsedNumber = this.getParsedNumber(textValue);
+    if ((this._value || '') !== textValue && (parsedNumber !== undefined || !this._focused)) {
+      this._value = textValue;
+      this._focused = false;
+      this.errorMessage = "";
+    }
+    const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+    this.ezChange.emit(valueEmitted);
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  getTextValue(value) {
+    if (value == undefined)
+      return undefined;
+    let textValue = this.precision >= 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+    return (this.precision === 0) ? StringUtils.replaceAll(textValue, ".", "") : textValue;
+  }
+  changeValue(newValue) {
+    this.errorMessage = "";
+    if (this.value != newValue) {
+      this.value = newValue === undefined ? null : newValue;
+    }
+    else {
+      this.setInputValue();
+      this.ezCancelWaitingChange.emit();
+    }
+  }
+  setError(msg) {
+    this.value = null;
+    this.errorMessage = msg;
+    this.ezCancelWaitingChange.emit();
+  }
+  handleBlur() {
+    if (!this._changePending) {
+      return;
+    }
+    try {
+      const parsedNumber = this.getParsedNumber();
+      if (parsedNumber !== undefined && isNaN(parsedNumber)) {
+        this.setError(this.i18n("ez-classic-number-input.invalidNumber"));
+      }
+      else {
+        try {
+          this.changeValue(parsedNumber);
+        }
+        catch (e) {
+          this.setError(e.message);
+          return;
+        }
+      }
+    }
+    finally {
+      for (const callback of this._valuePromiseCallbacks) {
+        callback(this.value);
+      }
+      this._valuePromiseCallbacks = [];
+    }
+  }
+  handleInput() {
+    const parsedNumber = this.getParsedNumber();
+    if (parsedNumber !== this.value) {
+      this._focused = true;
+      this._changePending = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  getParsedNumber(value = this._textInput.value) {
+    return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._value || '') !== textValue) {
+      this._value = textValue;
+      this._textInput.value = this._value;
+    }
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-classic-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (elem) => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), enabled: this.enabled, errorMessage: this.errorMessage, size: this.size, value: this._value, required: this.required, onEzChange: (event) => event.stopPropagation() }));
+  }
+  get _elem() { return getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"],
+    "precision": ["observePrecision"],
+    "prettyPrecision": ["observePrecision"]
+  }; }
+};
+EzClassicNumberInput.style = ezClassicNumberInputCss;
+
+export { EzClassicNumberInput as ez_classic_number_input };