@sankhyalabs/ezui 6.2.0-dev.2 → 6.2.0-dev.4

package/dist/esm/{app-globals-8c57b015.js → app-globals-8a94d86c.js}

@@ -2,7 +2,9 @@ import { i as initI18n } from './index-498e0126.js';
 
 async function initializeApp() {
   await initI18n();
-  console.log('Global initialization ez-ui completed!');
+  {
+    console.log('Global initialization ez-ui completed!');
+  }
 }
 
 const globalScripts = initializeApp;

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

@@ -0,0 +1,314 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+class MaskFormatter {
+  constructor(mask) {
+    this.mask = mask;
+    this.maskChars = {
+      '#': (char) => /\d/.test(char),
+      'U': (char) => /[a-zA-Z]/.test(char),
+      'L': (char) => /[a-zA-Z]/.test(char),
+      'A': (char) => /[a-zA-Z0-9]/.test(char),
+      '?': (char) => /[a-zA-Z]/.test(char),
+      '*': () => true
+    };
+  }
+  /**
+   * Formata a string de acordo com a máscara
+   * @param value String a ser formatada
+   * @returns String formatada
+   */
+  format(value) {
+    if (!value || !this.mask)
+      return value;
+    const cleanedValue = this.removeIncompatibleChars(value);
+    let formattedValue = '';
+    let valueIndex = 0;
+    let maskIndex = 0;
+    while (maskIndex < this.mask.length && valueIndex < cleanedValue.length) {
+      const maskChar = this.mask[maskIndex];
+      const inputChar = cleanedValue[valueIndex];
+      if (maskChar === "'") {
+        maskIndex++;
+        if (maskIndex < this.mask.length) {
+          formattedValue += this.mask[maskIndex];
+          maskIndex++;
+        }
+        continue;
+      }
+      if (this.maskChars[maskChar]) {
+        if (this.maskChars[maskChar](inputChar)) {
+          if (maskChar === 'U') {
+            formattedValue += inputChar.toUpperCase();
+          }
+          else if (maskChar === 'L') {
+            formattedValue += inputChar.toLowerCase();
+          }
+          else {
+            formattedValue += inputChar;
+          }
+          valueIndex++;
+        }
+        else {
+          valueIndex++;
+          continue;
+        }
+      }
+      else {
+        formattedValue += maskChar;
+        if (inputChar === maskChar) {
+          valueIndex++;
+        }
+      }
+      maskIndex++;
+    }
+    return formattedValue;
+  }
+  /**
+   * Remove caracteres que não são compatíveis com nenhuma posição da máscara
+   */
+  removeIncompatibleChars(value) {
+    let cleanValue = '';
+    for (let i = 0; i < value.length; i++) {
+      const char = value[i];
+      let isValidChar = false;
+      for (const maskRule in this.maskChars) {
+        if (this.maskChars[maskRule](char)) {
+          isValidChar = true;
+          break;
+        }
+      }
+      if (!isValidChar) {
+        for (let j = 0; j < this.mask.length; j++) {
+          if (this.mask[j] === char && !this.maskChars[this.mask[j]]) {
+            isValidChar = true;
+            break;
+          }
+        }
+      }
+      if (isValidChar) {
+        cleanValue += char;
+      }
+    }
+    return cleanValue;
+  }
+  /**
+   * Remove a máscara de uma string formatada
+   * @param formattedValue String formatada
+   * @returns String sem máscara
+   */
+  removeMask(formattedValue) {
+    if (!formattedValue || !this.mask)
+      return formattedValue;
+    let cleanValue = '';
+    let valueIndex = 0;
+    let maskIndex = 0;
+    while (valueIndex < formattedValue.length && maskIndex < this.mask.length) {
+      const maskChar = this.mask[maskIndex];
+      const inputChar = formattedValue[valueIndex];
+      if (maskChar === "'") {
+        maskIndex++;
+        if (maskIndex < this.mask.length) {
+          if (inputChar === this.mask[maskIndex]) {
+            valueIndex++;
+          }
+          maskIndex++;
+        }
+        continue;
+      }
+      if (this.maskChars[maskChar]) {
+        if (this.maskChars[maskChar](inputChar)) {
+          cleanValue += inputChar;
+        }
+        valueIndex++;
+      }
+      else {
+        if (inputChar === maskChar) {
+          valueIndex++;
+        }
+      }
+      maskIndex++;
+    }
+    while (valueIndex < formattedValue.length) {
+      const remainingChar = formattedValue[valueIndex];
+      if (/[a-zA-Z0-9]/.test(remainingChar)) {
+        cleanValue += remainingChar;
+      }
+      valueIndex++;
+    }
+    return cleanValue;
+  }
+  /**
+   * Retorna a máscara configurada
+   */
+  getMask() {
+    return this.mask;
+  }
+  /**
+   * Gera um placeholder baseado na máscara
+   * @returns String com placeholder gerado
+   */
+  generatePlaceholder() {
+    if (!this.mask)
+      return '';
+    let placeholder = '';
+    let maskIndex = 0;
+    while (maskIndex < this.mask.length) {
+      const maskChar = this.mask[maskIndex];
+      if (maskChar === "'") {
+        maskIndex++;
+        if (maskIndex < this.mask.length) {
+          placeholder += this.mask[maskIndex];
+          maskIndex++;
+        }
+        continue;
+      }
+      if (this.maskChars[maskChar]) {
+        switch (maskChar) {
+          case '#':
+            placeholder += '0';
+            break;
+          case 'U':
+          case 'L':
+          case '?':
+            placeholder += 'A';
+            break;
+          case 'A':
+            placeholder += 'A';
+            break;
+          case '~':
+            placeholder += '0';
+            break;
+          case '*':
+            placeholder += '_';
+            break;
+          default:
+            placeholder += '_';
+            break;
+        }
+      }
+      else {
+        placeholder += maskChar;
+      }
+      maskIndex++;
+    }
+    return placeholder;
+  }
+}
+
+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}@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 EzClassicInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezBlur = createEvent(this, "ezBlur", 7);
+    this.iconClick = createEvent(this, "iconClick", 7);
+    this.type = 'text';
+    this.value = undefined;
+    this.label = undefined;
+    this.helpText = undefined;
+    this.placeholder = undefined;
+    this.enabled = true;
+    this.readonly = false;
+    this.name = undefined;
+    this.minlength = undefined;
+    this.maxlength = undefined;
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
+    this.rightIconTooltip = undefined;
+    this.leftIconTooltip = undefined;
+    this.state = "default";
+    this.leftIconClickable = false;
+    this.rightIconClickable = false;
+    this.mask = undefined;
+    this.emitMaskedValue = false;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(option) {
+    if (option === null || option === void 0 ? void 0 : option.selectText) {
+      this._inputElem.select();
+    }
+    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
+      this._inputElem.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    this._inputElem.focus({ preventScroll: true });
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  onInput(event) {
+    try {
+      const inputElement = event.target;
+      let inputValue = inputElement.value;
+      if (this._maskFormatter) {
+        const formattedValue = this._maskFormatter.format(inputValue);
+        const cleanValue = this._maskFormatter.removeMask(formattedValue);
+        inputElement.value = formattedValue;
+        this.value = cleanValue;
+        const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
+        this.ezChange.emit(emitValue);
+      }
+      else {
+        this.value = inputValue;
+        this.ezChange.emit(inputValue);
+      }
+    }
+    catch (error) {
+      console.error("Error processing input event:", error);
+    }
+  }
+  onBlur() {
+    this.ezBlur.emit(this.value);
+  }
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
+      this.setFocus({ preventScroll: true });
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElem) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
+    }
+  }
+  componentWillLoad() {
+    if (this.mask && !this._maskFormatter) {
+      this._maskFormatter = new MaskFormatter(this.mask);
+    }
+    if (!this.placeholder && this._maskFormatter) {
+      this.placeholder = this._maskFormatter.generatePlaceholder();
+    }
+  }
+  componentDidLoad() {
+    if (this.value && this._maskFormatter && this._inputElem) {
+      const formattedValue = this._maskFormatter.format(this.value);
+      this._inputElem.value = formattedValue;
+    }
+    else {
+      this._inputElem.value = this.value || '';
+    }
+    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: this.onInput.bind(this), onBlur: this.onBlur.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))));
+  }
+  get _element() { return getElement(this); }
+};
+EzClassicInput.style = ezClassicInputCss;
+
+export { EzClassicInput as ez_classic_input };

package/dist/esm/ez-classic-text-area.entry.js

@@ -0,0 +1,82 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+
+const ezClassicTextAreaCss = ":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-text-area--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-text-area--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-text-area--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-text-area--border-color-success:var(--color--green-600, #157A00);--ez-classic-text-area--border-color-error:var(--color--red-600, #BD0025);--ez-classic-text-area--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-text-area--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-text-area--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-text-area--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-text-area--placeholder-color:#bdbdbd;--ez-classic-text-area--icon-color:var(--color--gray-400, #77777A);--ez-classic-text-area--helptext-color:var(--color--ocean-green-1000, #00281D)}.text-area-container{display:flex;flex-direction:row;align-items:start;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);resize:vertical;overflow:auto;background-color:var(--ez-classic-text-area--background-color)}.text-area-container,.text-area-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-text-area--border-color-default)}.text-area-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-success)}.text-area-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-error)}.text-area-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-warning)}.text-area-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-text-area--icon-color)}textarea{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;min-height:calc(var(--ez-classic-text-area--min-height) - var(--space--32, 32px));resize:none;scrollbar-width:thin;color:var(--ez-classic-text-area--text-color)}.text-area-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-text-area--background-color-disabled);border-color:var(--ez-classic-text-area--border-color-default)}.text-area-container[data-disabled=\"true\"]>*{cursor:not-allowed}@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-text-area--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-text-area--label-color)}.icon-clickable{cursor:pointer}.text-area-container[data-resize=\"none\"]{resize:none}.text-area-container[data-resize=\"both\"]{resize:both}.text-area-container[data-resize=\"horizontal\"]{resize:horizontal}.text-area-container[data-resize=\"vertical\"]{resize:vertical}.text-area-container::-webkit-resizer{display:none}.text-area-container::-moz-resizer{display:none}.text-area-container:not([data-resize=\"none\"]){position:relative}.text-area-container:not([data-resize=\"none\"])::after{content:'';position:absolute;bottom:var(--space--2, 2px);right:var(--space--2, 2px);width:var(--space--10, 10px);height:var(--space--10, 10px);background:linear-gradient(135deg, transparent 0% 50%, var(--ez-classic-text-area--border-color-default) 50% 58%, transparent 58% 70%, var(--ez-classic-text-area--border-color-default) 70% 78%, transparent 78% 100%);pointer-events:none}";
+
+const EzClassicTextArea = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezBlur = createEvent(this, "ezBlur", 7);
+    this.iconClick = createEvent(this, "iconClick", 7);
+    this.name = StringUtils.generateUUID();
+    this.label = '';
+    this.placeholder = '';
+    this.value = '';
+    this.helpText = undefined;
+    this.state = "default";
+    this.enabled = true;
+    this.readonly = false;
+    this.maxlength = undefined;
+    this.resize = 'vertical';
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
+    this.rightIconTooltip = undefined;
+    this.leftIconTooltip = undefined;
+    this.leftIconClickable = false;
+    this.rightIconClickable = false;
+    this.rows = 5;
+  }
+  /** Aplica o foco no campo. */
+  async setFocus(option) {
+    if (option === null || option === void 0 ? void 0 : option.selectText) {
+      this._textAreaElem.select();
+    }
+    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
+      this._textAreaElem.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    this._textAreaElem.focus({ preventScroll: true });
+  }
+  /** Remove o foco do campo. */
+  async setBlur() {
+    this._textAreaElem.blur();
+  }
+  onBlur() {
+    this.ezBlur.emit(this.value);
+  }
+  handleInput(event) {
+    const target = event.target;
+    this.ezChange.emit(target.value);
+  }
+  ;
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
+      this.setFocus({ preventScroll: true });
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._textAreaElem) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._textAreaElem, 'classic-text-area', dataInfo);
+    }
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  render() {
+    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, 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("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.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))));
+  }
+  get _element() { return getElement(this); }
+};
+EzClassicTextArea.style = ezClassicTextAreaCss;
+
+export { EzClassicTextArea as ez_classic_text_area };