valtech-components 2.0.795 → 2.0.797

package/src/lib/components/molecules/phone-input/phone-input.component.scss

@@ -1,175 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.phone-input-container {
-  &.has-error {
-    .phone-input-wrapper {
-      border-color: var(--ion-color-danger);
-    }
-  }
-}
-
-.phone-label {
-  // Match `val-title size='small'` que val-form usa para los otros labels
-  // (Full name, etc.). Fuente 16px / line-height 24px / bold dark.
-  display: block;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 700;
-  color: var(--ion-color-dark);
-  margin-bottom: 8px;
-}
-
-.phone-input-wrapper {
-  display: flex;
-  align-items: stretch;
-  // Border alineado con el pill outline default de val-text-input. Ionic ion-input
-  // usa internamente step-300 para su border outline; replicamos para que el wrapper
-  // del phone-input se vea idéntico al resto de inputs del formulario.
-  border: 1px solid var(--ion-color-step-300, #aeb0b3);
-  border-radius: 28px;
-  background: var(--ion-background-color, #fff);
-  overflow: hidden;
-  transition: border-color 0.2s;
-  height: 56px;
-
-  &:focus-within {
-    border-color: var(--ion-color-primary);
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-.country-selector {
-  flex-shrink: 0;
-  border-right: 1px solid var(--ion-border-color, rgba(0, 0, 0, 0.08));
-  /* Mismo background que el wrapper para que ambos lados se vean integrados
-   * como un solo control (consistencia visual con val-text-input pill). */
-  background: transparent;
-  display: flex;
-  align-items: center;
-  padding: 0 4px 0 16px;
-
-  ion-select {
-    // Reset all Ionic styles
-    --background: transparent;
-    --border-style: none;
-    --border-width: 0;
-    --border-color: transparent;
-    --border-radius: 0;
-    --box-shadow: none;
-    --padding-start: 4px;
-    --padding-end: 4px;
-    --padding-top: 0;
-    --padding-bottom: 0;
-    --highlight-color-focused: transparent;
-    --highlight-color-valid: transparent;
-    --highlight-color-invalid: transparent;
-    min-width: 80px;
-    max-width: 100px;
-
-    &::part(container) {
-      border: none;
-      box-shadow: none;
-    }
-
-    &::part(icon) {
-      opacity: 0.6;
-    }
-
-    /* Cancela el border rect 2px primary del global override de styles/overrides.scss
-     * (`ion-select.select-expanded`). Dentro del phone-input el control vive en el
-     * wrapper pill — un border rect adicional rompe la coherencia visual. */
-    &.select-expanded {
-      border: none !important;
-    }
-  }
-
-  .flag {
-    margin-right: 4px;
-  }
-}
-
-.dial-code-display {
-  flex-shrink: 0;
-  padding: 0 12px;
-  font-weight: 500;
-  color: var(--ion-color-medium-shade);
-  border-right: 1px solid var(--ion-border-color, rgba(0, 0, 0, 0.08));
-  background: transparent;
-  display: flex;
-  align-items: center;
-}
-
-.number-input {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  background: transparent;
-  padding: 0 16px 0 12px;
-
-  .phone-icon {
-    color: var(--ion-color-medium);
-    font-size: 18px;
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  .phone-native-input {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: 16px;
-    font-family: inherit;
-    color: var(--ion-text-color, #000);
-
-    &::placeholder {
-      color: var(--ion-color-medium, #92949c);
-    }
-
-    &:focus {
-      outline: none;
-      border: none;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.hint {
-  // Texto explicativo legible — color dark sólido, alineado a la derecha
-  // para coherencia visual con username-hint.
-  display: block;
-  font-size: 12px;
-  color: var(--ion-color-dark);
-  margin-top: 6px;
-  padding-right: 4px;
-  text-align: right;
-}
-
-.error-message {
-  display: block;
-  font-size: 12px;
-  margin-top: 4px;
-  padding-left: 4px;
-}
-
-// Country select popover styling
-::ng-deep .country-select-popover {
-  --width: 200px;
-
-  .flag {
-    margin-right: 8px;
-  }
-}

package/src/lib/components/molecules/phone-input/phone-input.component.ts

@@ -1,359 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  inject,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-} from '@angular/core';
-import { ReactiveFormsModule, FormControl } from '@angular/forms';
-import { IonSelect, IonSelectOption, IonNote, IonIcon } from '@ionic/angular/standalone';
-import { Subscription } from 'rxjs';
-import { addIcons } from 'ionicons';
-import { callOutline, chevronDownOutline } from 'ionicons/icons';
-import { PresetService } from '../../../services/presets';
-import { ComponentStates } from '../../types';
-import { PhoneInputMetadata, PhoneInputChangeEvent, CountryCode, COMMON_COUNTRY_CODES } from './types';
-
-addIcons({ callOutline, chevronDownOutline });
-
-@Component({
-  selector: 'val-phone-input',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, IonSelect, IonSelectOption, IonNote, IonIcon],
-  template: `
-    <div class="phone-input-container" [class]="resolvedProps.cssClass" [class.has-error]="hasError">
-      @if (resolvedProps.label) {
-        <label class="phone-label">{{ getLabel() }}</label>
-      }
-
-      <div class="phone-input-wrapper" [class.disabled]="resolvedProps.state === states.DISABLED">
-        @if (resolvedProps.showCountrySelector !== false) {
-          <div class="country-selector">
-            <ion-select
-              [formControl]="internalCountryControl"
-              interface="popover"
-              [interfaceOptions]="{ cssClass: 'country-select-popover' }"
-              [disabled]="resolvedProps.state === states.DISABLED"
-              (ionChange)="onCountryChange($event)"
-            >
-              @for (country of getCountryList(); track country.code) {
-                <ion-select-option [value]="country.code">
-                  @if (resolvedProps.showFlag !== false) {
-                    <span class="flag">{{ country.flag }}</span>
-                  }
-                  {{ country.dialCode }}
-                </ion-select-option>
-              }
-            </ion-select>
-          </div>
-        } @else {
-          <div class="dial-code-display">
-            {{ getSelectedCountry()?.dialCode || '+1' }}
-          </div>
-        }
-
-        <div class="number-input">
-          <ion-icon name="call-outline" aria-hidden="true" class="phone-icon"></ion-icon>
-          <input
-            type="tel"
-            inputmode="tel"
-            [formControl]="internalNumberControl"
-            [placeholder]="getPlaceholder()"
-            [attr.disabled]="resolvedProps.state === states.DISABLED ? true : null"
-            [attr.readonly]="resolvedProps.state === states.WORKING ? true : null"
-            [maxLength]="resolvedProps.maxDigits || 15"
-            (input)="onNumberInputNative($event)"
-            (blur)="onBlur()"
-            class="phone-native-input"
-          />
-        </div>
-      </div>
-
-      @if (resolvedProps.hint && !hasError) {
-        <ion-note class="hint">{{ getHint() }}</ion-note>
-      }
-
-      @if (hasError && resolvedProps.showErrors) {
-        <ion-note class="error-message" color="danger">
-          {{ getErrorMessage() }}
-        </ion-note>
-      }
-    </div>
-  `,
-  styleUrls: ['./phone-input.component.scss'],
-})
-/**
- * val-phone-input
- *
- * A phone number input with country code selector.
- *
- * @example Basic usage
- * ```html
- * <val-phone-input
- *   [props]="{
- *     control: phoneControl,
- *     placeholder: 'Phone number',
- *     defaultCountry: 'MX'
- *   }"
- * ></val-phone-input>
- * ```
- *
- * @example With custom countries
- * ```html
- * <val-phone-input
- *   [props]="{
- *     control: phoneControl,
- *     label: 'Phone',
- *     countryCodes: myCountryCodes,
- *     preferredCountries: ['MX', 'US', 'ES'],
- *     showErrors: true
- *   }"
- *   (phoneChange)="onPhoneChange($event)"
- * ></val-phone-input>
- * ```
- */
-export class PhoneInputComponent implements OnInit, OnChanges, OnDestroy {
-  private presets = inject(PresetService);
-
-  /**
-   * Preset name to apply. Presets define reusable phone input configurations
-   * that can be registered at app level via provideValtechPresets().
-   *
-   * @example
-   * <val-phone-input preset="form-field" [props]="{ control: ctrl }"></val-phone-input>
-   */
-  @Input() preset?: string;
-
-  /**
-   * Phone input configuration object. Values here override preset values.
-   */
-  @Input() props: Partial<PhoneInputMetadata> = {};
-
-  /**
-   * Resolved props after merging preset + explicit props.
-   */
-  resolvedProps: PhoneInputMetadata = {} as PhoneInputMetadata;
-
-  @Output() phoneChange = new EventEmitter<PhoneInputChangeEvent>();
-
-  states = ComponentStates;
-
-  internalCountryControl = new FormControl<string>('');
-  internalNumberControl = new FormControl<string>('');
-
-  private valueSubscription: Subscription | null = null;
-  private isInternalUpdate = false;
-
-  ngOnInit(): void {
-    this.resolveProps();
-    this.setupComponent();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['preset'] || changes['props']) {
-      this.resolveProps();
-      this.setupComponent();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.valueSubscription?.unsubscribe();
-  }
-
-  /**
-   * Merge preset configuration with explicit props.
-   * Explicit props take precedence over preset values.
-   */
-  private resolveProps(): void {
-    const presetProps = this.preset ? (this.presets.get('phoneInput', this.preset) as Partial<PhoneInputMetadata>) : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    } as PhoneInputMetadata;
-  }
-
-  private setupComponent(): void {
-    // Set default country — fallback Chile (mercado primario del factory Valtech).
-    // Cualquier consumer puede sobrescribir via `props.defaultCountry`.
-    const defaultCountry = this.resolvedProps.defaultCountry || 'CL';
-    this.internalCountryControl.setValue(defaultCountry);
-
-    // Sync with external controls if provided
-    if (this.resolvedProps.countryControl) {
-      this.internalCountryControl = this.resolvedProps.countryControl;
-    }
-    if (this.resolvedProps.numberControl) {
-      this.internalNumberControl = this.resolvedProps.numberControl;
-    }
-
-    // Parse initial value from main control
-    if (this.resolvedProps.control?.value) {
-      this.parsePhoneNumber(this.resolvedProps.control.value);
-    }
-
-    // Subscribe to main control changes
-    this.valueSubscription?.unsubscribe();
-    this.valueSubscription =
-      this.resolvedProps.control?.valueChanges.subscribe(value => {
-        if (value && !this.isInternalUpdate) {
-          this.parsePhoneNumber(value);
-        }
-      }) || null;
-  }
-
-  private parsePhoneNumber(value: string): void {
-    if (!value) return;
-
-    // Try to extract country code
-    const countries = this.getCountryList();
-    for (const country of countries) {
-      if (value.startsWith(country.dialCode)) {
-        this.internalCountryControl.setValue(country.code);
-        this.internalNumberControl.setValue(value.substring(country.dialCode.length).trim());
-        return;
-      }
-    }
-
-    // If no country code found, just set the number
-    this.internalNumberControl.setValue(value);
-  }
-
-  getLabel(): string {
-    return this.resolvedProps.label || '';
-  }
-
-  getPlaceholder(): string {
-    // Use format from selected country if available
-    const country = this.getSelectedCountry();
-    if (country?.format && !this.resolvedProps.placeholder) {
-      return country.format;
-    }
-    return this.resolvedProps.placeholder || '';
-  }
-
-  getHint(): string {
-    return this.resolvedProps.hint || '';
-  }
-
-  getCountryList(): CountryCode[] {
-    const countries = this.resolvedProps.countryCodes || COMMON_COUNTRY_CODES;
-
-    // Sort by preferred countries first
-    if (this.resolvedProps.preferredCountries?.length) {
-      const preferred = this.resolvedProps.preferredCountries;
-      return [
-        ...countries.filter(c => preferred.includes(c.code)),
-        ...countries.filter(c => !preferred.includes(c.code)),
-      ];
-    }
-
-    return countries;
-  }
-
-  getSelectedCountry(): CountryCode | null {
-    const code = this.internalCountryControl.value;
-    return this.getCountryList().find(c => c.code === code) || null;
-  }
-
-  get hasError(): boolean {
-    return !!(this.resolvedProps.control?.touched && this.resolvedProps.control?.invalid);
-  }
-
-  getErrorMessage(): string {
-    if (!this.resolvedProps.control?.errors || !this.resolvedProps.errors) {
-      return '';
-    }
-
-    const errorKeys = Object.keys(this.resolvedProps.control.errors);
-    for (const key of errorKeys) {
-      if (this.resolvedProps.errors[key]) {
-        return this.resolvedProps.errors[key];
-      }
-    }
-
-    return '';
-  }
-
-  onCountryChange(event: CustomEvent): void {
-    this.updateMainControl();
-  }
-
-  onNumberInput(event: CustomEvent): void {
-    // Filter non-numeric characters except spaces and dashes
-    let value = (event.detail.value || '').replace(/[^\d\s\-]/g, '');
-
-    // Apply max digits limit
-    if (this.resolvedProps.maxDigits) {
-      const digitsOnly = value.replace(/\D/g, '');
-      if (digitsOnly.length > this.resolvedProps.maxDigits) {
-        value = digitsOnly.substring(0, this.resolvedProps.maxDigits);
-      }
-    }
-
-    this.internalNumberControl.setValue(value);
-    this.updateMainControl();
-  }
-
-  onNumberInputNative(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    // Filter non-numeric characters except spaces and dashes
-    let value = (input.value || '').replace(/[^\d\s\-]/g, '');
-
-    // Apply max digits limit
-    if (this.resolvedProps.maxDigits) {
-      const digitsOnly = value.replace(/\D/g, '');
-      if (digitsOnly.length > this.resolvedProps.maxDigits) {
-        value = digitsOnly.substring(0, this.resolvedProps.maxDigits);
-      }
-    }
-
-    this.internalNumberControl.setValue(value);
-    this.updateMainControl();
-  }
-
-  onBlur(): void {
-    this.resolvedProps.control?.markAsTouched();
-  }
-
-  private updateMainControl(): void {
-    const country = this.getSelectedCountry();
-    const number = this.internalNumberControl.value || '';
-    const fullNumber = country ? `${country.dialCode}${number}` : number;
-
-    this.isInternalUpdate = true;
-    this.resolvedProps.control?.setValue(fullNumber);
-    this.isInternalUpdate = false;
-
-    // Emit change event
-    const digitsOnly = number.replace(/\D/g, '');
-    const isValid = this.validateNumber(digitsOnly);
-
-    this.phoneChange.emit({
-      fullNumber,
-      number,
-      country,
-      isValid,
-    });
-  }
-
-  private validateNumber(digitsOnly: string): boolean {
-    if (this.resolvedProps.minDigits && digitsOnly.length < this.resolvedProps.minDigits) {
-      return false;
-    }
-    if (this.resolvedProps.maxDigits && digitsOnly.length > this.resolvedProps.maxDigits) {
-      return false;
-    }
-    if (this.resolvedProps.pattern) {
-      const regex = new RegExp(this.resolvedProps.pattern);
-      return regex.test(digitsOnly);
-    }
-    // Default: at least 7 digits
-    return digitsOnly.length >= 7;
-  }
-}