@sankhyalabs/ezui 6.2.1 → 6.3.0-dev.2

package/dist/collection/components/ez-classic-input/utils/maskFormatter.js

@@ -0,0 +1,194 @@
+export 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;
+  }
+}

package/dist/collection/components/ez-classic-text-area/ez-classic-text-area.css

@@ -0,0 +1,179 @@
+: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;
+
+  /* public */
+  --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;
+
+  /* public */
+  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;
+
+  /* public */
+  color: var(--ez-classic-text-area--text-color);
+}
+
+.text-area-container[data-disabled="true"] {
+  cursor: not-allowed;
+
+  /* public */
+  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;
+
+  /* public */
+  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);
+  /* public */
+  color: var(--ez-classic-text-area--label-color);
+}
+
+.icon-clickable {
+  cursor: pointer;
+}
+
+/* Adicionar estados de resize baseados na prop */
+.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;
+}