@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/cura/forms/cura-input-text/cura-input-text.component.ts

@@ -0,0 +1,621 @@
+import {
+  Component,
+  input,
+  output,
+  signal,
+  computed,
+  inject,
+  forwardRef,
+  ElementRef,
+  AfterViewInit,
+  OnDestroy,
+  viewChild,
+  model,
+  effect,
+  PLATFORM_ID,
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraLoaderCircleComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-circle';
+import IMask, { FactoryArg, InputMask } from 'imask';
+import {
+  InputTextMode,
+  InputTextSize,
+  InputTextStatus,
+  InputTextType,
+  InputTextInputMode,
+  MaskPreset,
+  InputTextValueChangeEvent,
+  InputTextClearEvent,
+  maskOptions,
+} from './cura-input-text.definitions';
+
+@Component({
+  selector: 'cura-input-text',
+  imports: [CommonModule, FormsModule, CuraLabelComponent, CuraIconComponent, CuraLoaderCircleComponent],
+  templateUrl: './cura-input-text.component.html',
+  styleUrls: ['./cura-input-text.component.scss'],
+  host: {
+    role: 'textbox',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.aria-required]': 'required()',
+    '[attr.aria-invalid]': 'status() === "error"',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CuraInputTextComponent),
+      multi: true,
+    },
+  ],
+})
+export class CuraInputTextComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
+  private curaApi: CuraApiService = inject(CuraApiService);
+  private elementRef = inject(ElementRef);
+  private platformId = inject(PLATFORM_ID);
+  /**
+   * Mode of the input: 'default' or 'transparent'
+   */
+  mode = input<InputTextMode>('default');
+
+  /**
+   * Status of the input component
+   */
+  status = input<InputTextStatus>('default');
+
+  /**
+   * Size of the input component
+   */
+  size = input<InputTextSize>('medium');
+
+  /**
+   * Type of the input
+   */
+  type = input<InputTextType>('text');
+
+  /**
+   * Input mode for mobile keyboards
+   */
+  inputMode = input<InputTextInputMode>('text');
+
+  /**
+   * Label text for the input
+   */
+  label = input<string>('');
+
+  /**
+   * Name attribute for the input
+   */
+  name = input<string>('');
+
+  /**
+   * Placeholder text for the input
+   */
+  placeholder = input<string | null>(null);
+
+  /**
+   * Current value of the input
+   */
+  value = model<string | number | any>('');
+
+  /**
+   * Icon name to display
+   */
+  iconName = input<string>('');
+
+  /**
+   * Helper text displayed below the input
+   */
+  // helperText = input<string>(''); // Não está sendo usado
+
+  /**
+   * Whether the input is disabled
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Whether the input is required
+   */
+  required = input<boolean>(false);
+
+  /**
+   * Mask preset for input formatting
+   */
+  maskPreset = input<MaskPreset | undefined>(undefined);
+
+  /**
+   * Controls whether the selection functionality is active
+   */
+  enableSelectionMode = input<boolean>(false);
+
+  /**
+   * Regular expression for custom input masking
+   */
+  maskRegex = input<string | null>(null);
+
+  /**
+   * Advanced mask object for IMask library
+   */
+  maskAdvanced = input<any | string | null>(null);
+
+  /**
+   * Maximum length of the input value
+   */
+  maxlength = input<number | undefined>(undefined);
+
+  /**
+   * Whether the input is read-only
+   */
+  readOnly = input<boolean>(false);
+
+  /**
+   * Whether the input is in loading state
+   */
+  isLoading = input<boolean>(false);
+
+  /**
+   * Whether to show the clear button
+   */
+  clearIcon = input<boolean>(true);
+
+  /**
+   * Removes the error icon when necessary
+   */
+  hideErrorIcon = input<boolean>(false);
+
+  /**
+   * Autocomplete attribute for the input
+   */
+  autocomplete = input<string>('on');
+
+  /**
+   * Event emitted when the value changes
+   */
+  valueChange = output<InputTextValueChangeEvent>();
+
+  /**
+   * Event emitted when the clear button is clicked
+   */
+  inputClear = output<InputTextClearEvent>();
+
+  // Internal state signals
+  private isHovered = signal<boolean>(false);
+  private isFocused = signal<boolean>(false);
+
+  // Form control callbacks
+  private onChange = (value: string | number) => {};
+  private onTouched = () => {};
+
+  // ViewChild references
+  inputElement = viewChild<ElementRef<HTMLInputElement>>('inputElement');
+
+  /**
+   * Instance of InputMask is returned when IMask constructor is called.
+   */
+  maskedInput?: InputMask<FactoryArg>;
+
+  private _isWriting = false;
+
+  // Reference to input element (equivalent to inputRef in Stencil)
+  private inputRef?: HTMLInputElement;
+
+  // Utility functions (equivalent to Stencil utils)
+  private checkMobile(): boolean {
+    if (isPlatformBrowser(this.platformId)) {
+      return window?.innerWidth < 768; // Static.breakpoints.medium.min equivalent
+    }
+    return false;
+  }
+
+  private checkIOS(): boolean {
+    if (isPlatformBrowser(this.platformId)) {
+      return (
+        ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.userAgent) ||
+        // iPad on iOS 13 detection
+        (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+      );
+    }
+    return false;
+  }
+
+  private fakeInputIOSHack(targetElement: HTMLElement): HTMLInputElement | null {
+    if (!this.checkMobile() || !this.checkIOS()) return null;
+    const fakeInput = document.createElement('input');
+    fakeInput.setAttribute('type', 'text');
+    fakeInput.style.position = 'absolute';
+    fakeInput.style.opacity = '0';
+    fakeInput.style.height = '0';
+    fakeInput.style.fontSize = '16px'; // disable auto zoom
+    targetElement.prepend(fakeInput);
+    // focus so that subsequent async focus will work
+    fakeInput.focus();
+    return fakeInput;
+  }
+
+  // Computed styles
+  styles = computed(() => {
+    const { fonts, colors } = this.curaApi?.theme || { fonts: null, colors: null };
+
+    const baseStyles: { [key: string]: string } = {};
+
+    if (fonts) {
+      const fontWeights = fonts.getWeights();
+      baseStyles['--font-weight-medium'] = fontWeights.medium;
+      baseStyles['--font-weight-bold'] = fontWeights.bold;
+      baseStyles['--font-weight-regular'] = fontWeights.regular;
+      baseStyles['--font-color'] = fonts.getColor();
+      baseStyles['--font-family'] = fonts.getFamily();
+      baseStyles['--font-size'] = fonts.getSize();
+    }
+
+    if (colors) {
+      const colorKeys = [
+        'primary-base',
+        'neutral-purewhite',
+        'neutral-white',
+        'neutral-black',
+        'neutral-medium',
+        'neutral-base',
+        'neutral-dark',
+        'success-dark',
+        'success-darker',
+        'success-lighter',
+        'error-lighter',
+        'error-dark',
+        'error-darker',
+        'error-base',
+        'info-base',
+      ];
+
+      colorKeys.forEach((key) => {
+        baseStyles[`--${key}`] = colors.getColor(key);
+      });
+    }
+
+    return baseStyles;
+  });
+
+  constructor() {
+    effect(() => {
+      if (this.inputRef && (this.maskPreset() || this.maskRegex() || this.maskAdvanced())) {
+        this.initializeMask();
+      } else {
+        this.destroyMask();
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    const inputEl = this.inputElement();
+    if (inputEl) {
+      this.inputRef = inputEl.nativeElement;
+      this.initializeMask();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroyMask();
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: string | number): void {
+    this._isWriting = true;
+    try {
+      if (this.maskedInput) {
+        if (this.maskedInput.mask === Date || this.maskedInput.mask === Number) {
+          this.maskedInput.typedValue = value ?? '';
+        } else {
+          this.maskedInput.value = String(value ?? '');
+        }
+        this.maskedInput.updateValue();
+        this.value.set(this.maskedInput.value);
+      } else {
+        this.value.set(value ?? '');
+      }
+    } finally {
+      this._isWriting = false;
+    }
+  }
+
+  registerOnChange(fn: (value: string | number) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  // Public methods
+  async setFocus(): Promise<void> {
+    // IOS needs large timeout value to work
+    const timeoutMs = this.checkMobile() && this.checkIOS() ? 1000 : 200;
+    // IOS fake input hack
+    let fakeInput = this.fakeInputIOSHack(this.elementRef.nativeElement);
+
+    setTimeout(() => {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+      if (fakeInput) {
+        fakeInput.remove();
+      }
+    }, timeoutMs);
+  }
+
+  // Computed signals
+  classes = computed(() => ({
+    [this.size().toLowerCase()]: this.mode() === 'default',
+    disabled: this.disabled(),
+    isLoading: this.isLoading(),
+    isFocused: this.isFocused() && !this.disabled() && !this.readOnly() && !this.isLoading(),
+    isHovered: this.isHovered(),
+    [this.status()]: true,
+    transparent: this.mode() === 'transparent',
+    selection: this.enableSelectionMode(),
+  }));
+
+  labelColor = computed(() => {
+    if (this.disabled()) {
+      return 'neutral-medium';
+    } else if (this.isLoading() && this.mode() === 'transparent' && !this.isHovered()) {
+      return 'neutral-dark';
+    } else if (((this.isFocused() || this.isHovered() || this.status() === 'success' || this.status() === 'error') && !this.readOnly()) || this.isHovered()) {
+      return 'neutral-black';
+    } else {
+      return 'neutral-dark';
+    }
+  });
+
+  iconConfig = computed(() => {
+    const shouldShowIcon = (() => {
+      if (
+        (this.iconName() === '' && this.status() === 'default') ||
+        (this.mode() === 'transparent' && this.isLoading()) ||
+        (this.mode() === 'transparent' && this.status() === 'default')
+      ) {
+        return false;
+      }
+      if (this.status() === 'error' && this.hideErrorIcon()) {
+        return false;
+      }
+      return true;
+    })();
+
+    if (!shouldShowIcon) {
+      return {
+        icon: null,
+        size: 0,
+      };
+    }
+
+    const iconSizeDefaultMode = this.size() === 'large' ? 20 : 16;
+    const size = this.mode() === 'transparent' ? 20 : iconSizeDefaultMode;
+
+    const iconMap: { [key: string]: { name: string; color: string } } = {
+      loading: { name: this.iconName(), color: 'primary-base' },
+      success: { name: 'checkCircle', color: 'success-dark' },
+      error: { name: 'alertCircle', color: 'error-dark' },
+      default: { name: this.iconName(), color: 'neutral-dark' },
+      disabled: { name: this.iconName(), color: 'neutral-medium' },
+    };
+
+    const icon = iconMap[this.isLoading() ? 'loading' : this.disabled() ? 'disabled' : this.status() || 'default'];
+
+    return {
+      icon,
+      size,
+    };
+  });
+
+  helperText = computed(() => {
+    const isError = this.status() === 'error';
+    const isSuccess = this.status() === 'success';
+    const isDefault = this.status() === 'default';
+    const helperTextSize = this.size() === 'large' ? 'small' : 'xsmall';
+
+    const colorText = (() => {
+      if (this.disabled()) return 'neutral-medium';
+      if (this.isLoading()) return 'primary-base';
+      if (this.isFocused() || this.isHovered()) return 'neutral-black';
+      return 'neutral-dark';
+    })();
+
+    return {
+      size: helperTextSize,
+      color: isDefault ? colorText : isError ? (this.mode() === 'transparent' ? 'neutral-black' : 'error-dark') : isSuccess ? 'success-dark' : colorText,
+    };
+  });
+
+  shouldShowClearButton = computed(() => {
+    return !!(this.clearIcon() && !this.readOnly() && !this.isLoading() && !this.disabled() && this.value() && this.isFocused());
+  });
+
+  // Event handlers
+  handleMouseEnter(): void {
+    this.isHovered.set(true);
+  }
+
+  handleMouseLeave(): void {
+    this.isHovered.set(false);
+  }
+
+  handleInputFocus(): void {
+    this.handleMaskUpdate();
+    this.isFocused.set(true);
+  }
+
+  handleInputBlur(): void {
+    this.handleMaskUpdate();
+    this.onTouched();
+    setTimeout(() => {
+      this.isFocused.set(false);
+    }, 150);
+  }
+
+  handleInputChange(event: Event): void {
+    const inputValue = (event.target as HTMLInputElement).value;
+
+    if (this.type() === 'number') {
+      this.handleNumberInputChange(inputValue);
+    } else {
+      this.handleTextInputChange(inputValue);
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (this.type() === 'number') {
+      this.handleBlockInvalidNumber(event);
+    }
+  }
+
+  handleClearInput(): void {
+    this.handleMaskUpdate();
+    this.value.set('');
+    if (this.inputRef) {
+      this.inputRef.value = '';
+    }
+    this.valueChange.emit({ value: this.value() });
+    this.inputClear.emit({ value: this.value() });
+    this.onChange(this.value());
+    this.handleMaskUpdate();
+    this.setFocus();
+  }
+
+  // Private methods
+  private handleNumberInputChange(inputValue: string): void {
+    const numericValue = parseFloat(inputValue);
+    if (!isNaN(numericValue)) {
+      this.value.set(numericValue);
+    } else {
+      console.error('Invalid numeric input:', inputValue);
+    }
+    this.valueChange.emit({ value: inputValue });
+  }
+
+  private handleTextInputChange(inputValue: string): void {
+    if (this.maskedInput) {
+      // IMask's own event listener (registered after Angular's) processes the input
+      // and fires the 'accept' event which handles signal sync, onChange, and valueChange.
+      return;
+    }
+    this.value.set(inputValue);
+    this.onChange(inputValue);
+    this.valueChange.emit({ value: inputValue });
+  }
+
+  private handleBlockInvalidNumber(e: KeyboardEvent): void {
+    if (['e', 'E', '+', '-'].includes(e.key)) {
+      e.preventDefault();
+    }
+  }
+
+  private shouldDisplayMask(): boolean {
+    return !!(this.maskPreset() || this.maskRegex() || this.maskAdvanced());
+  }
+
+  private initializeMask(): void {
+    if (this.shouldDisplayMask()) {
+      if (this.maskedInput) {
+        this.destroyMask();
+      }
+      if (this.maskPreset()) {
+        this.initializePresetMask();
+      } else if (this.maskRegex()) {
+        this.initializeRegexMask();
+      } else if (this.maskAdvanced()) {
+        this.initializeAdvancedMask();
+      }
+      this.applyValueToMask();
+    } else {
+      this.clearMaskValue();
+    }
+  }
+
+  initializePresetMask() {
+    const preset = this.maskPreset();
+    if (!preset) return;
+
+    const options = maskOptions[preset];
+
+    if (options && this.inputRef) {
+      this.maskedInput = IMask(this.inputRef, options);
+      this.subscribeToMaskEvents();
+    } else {
+      console.error(`Mask preset "${preset}" not found.`);
+    }
+  }
+
+  initializeRegexMask() {
+    const regex = this.maskRegex();
+    if (!regex || !this.inputRef) return;
+
+    const cleanedRegexString = regex.replace(/^\/|\/[gimsuy]*$/g, '');
+    const flags = (regex.match(/\/[gimsuy]*$/g) || [''])[0].slice(1);
+    this.maskedInput = IMask(this.inputRef, { mask: new RegExp(cleanedRegexString, flags) });
+    this.subscribeToMaskEvents();
+  }
+
+  initializeAdvancedMask() {
+    if (!this.inputRef) return;
+
+    try {
+      const config = typeof this.maskAdvanced() === 'string' ? JSON.parse(this.maskAdvanced()) : this.maskAdvanced();
+      this.maskedInput = IMask(this.inputRef, config);
+      this.subscribeToMaskEvents();
+    } catch (error) {
+      console.error('Error defining maskAdvanced:', error);
+    }
+  }
+
+  private subscribeToMaskEvents(): void {
+    if (!this.maskedInput) return;
+    this.maskedInput.on('accept', () => {
+      if (this.maskedInput) {
+        this.value.set(this.maskedInput.value);
+        if (!this._isWriting) {
+          this.onChange(this.maskedInput.value);
+          this.valueChange.emit({ value: this.maskedInput.value });
+        }
+      }
+    });
+  }
+
+  private applyValueToMask(): void {
+    if (this.maskedInput) {
+      this._isWriting = true;
+      try {
+        if (this.maskedInput.mask === Date || this.maskedInput.mask === Number) {
+          this.maskedInput.typedValue = this.value();
+        } else {
+          this.maskedInput.value = this.value() as string;
+        }
+        this.handleMaskUpdate();
+        this.value.set(this.maskedInput.value);
+      } finally {
+        this._isWriting = false;
+      }
+    }
+  }
+
+  private clearMaskValue(): void {
+    if (this.inputRef) {
+      this.inputRef.value = this.value() as string;
+    }
+  }
+
+  private destroyMask(): void {
+    if (this.maskedInput) {
+      this.maskedInput.destroy();
+      this.maskedInput = undefined;
+    }
+  }
+
+  private handleMaskUpdate(): void {
+    if (this.maskedInput) {
+      this.maskedInput.updateValue();
+    }
+  }
+}

package/cura/forms/cura-input-text/cura-input-text.definitions.ts

@@ -0,0 +1,104 @@
+/**
+ * Display mode options for the input text component
+ */
+export type InputTextMode = 'default' | 'transparent';
+
+/**
+ * Size options for the input text component
+ */
+export type InputTextSize = 'small' | 'medium' | 'large';
+
+/**
+ * Status options for the input text component
+ */
+export type InputTextStatus = 'success' | 'error' | 'default';
+
+/**
+ * Input type options for the input text component
+ */
+export type InputTextType = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url';
+
+/**
+ * Input mode options for the input text component
+ */
+export type InputTextInputMode = 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+
+/**
+ * Mask preset options for input formatting
+ */
+export type MaskPreset = 'cpf' | 'cnpj' | 'cpf_cnpj' | 'phone' | 'date' | 'dateRange';
+
+/**
+ * Event payload emitted when the input value changes
+ */
+export interface InputTextValueChangeEvent {
+  /**
+   * The new value of the input
+   */
+  value: string | number;
+}
+
+/**
+ * Event payload emitted when the clear button is clicked
+ */
+export interface InputTextClearEvent {
+  /**
+   * The value that was cleared (usually empty string)
+   */
+  value: string | number;
+}
+
+/**
+ * Mask options map for IMask library
+ */
+export interface MaskOptionsMap {
+  [key: string]: any;
+}
+
+/**
+ * Mask configuration for different presets
+ */
+export const maskOptions: MaskOptionsMap = {
+  cpf_cnpj: {
+    mask: [{ mask: '000.000.000-00' }, { mask: '00.000.000/0000-00' }],
+    placeholderChar: '_',
+  },
+  cpf: {
+    mask: '000.000.000-00',
+    placeholderChar: '_',
+  },
+  cnpj: {
+    mask: '00.000.000/0000-00',
+    placeholderChar: '_',
+  },
+  phone: {
+    mask: '(00) 00000-0000',
+    blocks: {
+      '(00)': {
+        mask: '(00)',
+        maxLength: 2,
+        placeholderChar: '',
+      },
+      '00000': {
+        mask: '00000',
+        maxLength: 5,
+        placeholderChar: '_',
+      },
+      '-': {
+        mask: '-',
+      },
+      '0000': {
+        mask: '0000',
+        maxLength: 4,
+        placeholderChar: '_',
+      },
+    },
+    placeholderChar: '_',
+  },
+  date: {
+    mask: '00/00/0000',
+  },
+  dateRange: {
+    mask: '00/00/0000 - 00/00/0000',
+  },
+};