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

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

@@ -1,621 +0,0 @@
-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

@@ -1,104 +0,0 @@
-/**
- * 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',
-  },
-};