@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.2

package/src/lib/atoms/input/input.component.ts

@@ -1,239 +0,0 @@
-import { Component, Input, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { IconSourceDirective } from '../../directives/icon-source.directive';
-import { NoLeadingSpaceDirective } from '../../directives/no-leading-space.directive';
-
-type InputFormat = 'alphanumeric' | 'currency' | 'numeric';
-
-@Component({
-  selector: 'app-input',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, FormsModule, IconSourceDirective, NoLeadingSpaceDirective],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="input-wrapper" [class.input-wrapper--unstyled]="unstyled">
-      <label *ngIf="label && !unstyled" [for]="id">{{ label }}</label>
-      <div class="input-container" [class.error]="hasError && !unstyled" [class.input-container--unstyled]="unstyled">
-        <div class="input-prefix-wrapper">
-          <ng-content select="[prefix]"></ng-content>
-        </div>
-        <input
-          noLeadingSpace
-          [type]="type"
-          [id]="id"
-          [placeholder]="placeholder"
-          [attr.maxlength]="format === 'currency' ? null : maxLength"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          class="input-field"
-          [class.error]="hasError && !unstyled"
-          [class.input-field--unstyled]="unstyled"
-          [value]="formattedValue"
-          (blur)="onBlur()"
-          (input)="onInputChange($event)">
-        <div class="input-suffix-wrapper">
-          <ng-content select="[suffix]"></ng-content>
-        </div>
-      </div>
-      <div *ngIf="hasError && errorMessage && !unstyled" class="field-error">
-        {{ errorMessage }}
-      </div>
-    </div>
-  `,
-  styles: [`
-    /* Solución para el sombreado azul del autocompletado del navegador */
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    input:-webkit-autofill:active {
-      -webkit-box-shadow: 0 0 0 30px white inset !important;
-      box-shadow: 0 0 0 30px white inset !important;
-      -webkit-text-fill-color: #2E353A !important;
-      transition: background-color 5000s ease-in-out 0s;
-    }
-
-    /* Wrappers para prefix y suffix con soporte completo de eventos */
-    .input-prefix-wrapper,
-    .input-suffix-wrapper {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-family: 'Quicksand', sans-serif;
-      font-size: 14px;
-      font-weight: 500;
-      color: #969A9C;
-      position: relative;
-      z-index: 2;
-      pointer-events: auto !important;
-    }
-
-    .input-prefix-wrapper {
-      margin-right: 0.5rem;
-
-      &:empty {
-        display: none;
-        margin-right: 0;
-      }
-    }
-
-    .input-suffix-wrapper {
-      margin-left: 0.5rem;
-
-      &:empty {
-        display: none;
-        margin-left: 0;
-      }
-    }
-
-    /* Asegurar que todos los elementos dentro de prefix/suffix sean clickeables */
-    .input-prefix-wrapper *,
-    .input-suffix-wrapper * {
-      pointer-events: auto !important;
-    }
-
-    /* El input no debe cubrir los wrappers */
-    .input-field {
-      position: relative;
-      z-index: 1;
-    }
-  `],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputComponent),
-      multi: true
-    }
-  ]
-})
-export class InputComponent implements ControlValueAccessor {
-  @Input() label = '';
-  @Input() id = '';
-  @Input() placeholder = '';
-  @Input() type: 'text' | 'email' | 'tel' | 'password' | 'number' = 'text';
-  @Input() maxLength?: number | null;
-  @Input() hasError = false;
-  @Input() errorMessage = '';
-  @Input() disabled = false;
-  @Input() readonly = false;
-  @Input() format: InputFormat = 'alphanumeric';
-  @Input() unstyled = false; // Para usar dentro de componentes compuestos
-
-  value: any = '';
-  formattedValue = '';
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  writeValue(value: any): void {
-    let processedValue = value || '';
-
-    // For currency format, enforce maxLength on the raw value (without commas)
-    if (this.format === 'currency' && this.maxLength) {
-      const rawValue = String(processedValue).replace(/[^0-9.]/g, '');
-      if (rawValue.length > this.maxLength) {
-        processedValue = rawValue.slice(0, this.maxLength);
-      }
-    }
-
-    // For number inputs, enforce maxLength on initial value
-    if (this.type === 'number' && this.maxLength && String(processedValue).length > this.maxLength) {
-      processedValue = String(processedValue).slice(0, this.maxLength);
-    }
-
-    this.value = processedValue;
-    this.formattedValue = this.applyFormat(this.value);
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-
-  onInputChange(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    let inputValue = target.value;
-
-    // Parse the value first (removes formatting like commas)
-    let rawValue = this.parseValue(inputValue);
-
-    // For currency format, enforce maxLength on the raw value (without commas)
-    if (this.format === 'currency' && this.maxLength && String(rawValue).length > this.maxLength) {
-      rawValue = String(rawValue).slice(0, this.maxLength);
-    }
-
-    // For number inputs or numeric format, maxLength doesn't work natively, so we handle it manually
-    if ((this.type === 'number' || this.format === 'numeric') && this.maxLength) {
-      // Check the length of the raw value (without formatting)
-      const rawString = String(rawValue);
-      if (rawString.length > this.maxLength) {
-        rawValue = rawString.slice(0, this.maxLength);
-        // Update the input value to reflect the truncation
-        target.value = rawValue;
-      }
-    }
-
-    this.value = rawValue;
-    this.formattedValue = this.applyFormat(rawValue);
-
-    // Update the input display (for formatted inputs like currency)
-    if (this.format === 'currency') {
-      target.value = this.formattedValue;
-    }
-
-    this.onChange(rawValue);
-  }
-
-  onBlur(): void {
-    this.onTouched();
-  }
-
-  private parseValue(value: string): any {
-    switch (this.format) {
-      case 'currency':
-        // Remove all non-numeric characters except decimal point
-        return value.replace(/[^0-9.]/g, '');
-      case 'numeric':
-        // Remove all non-numeric characters (only digits allowed)
-        return value.replace(/[^0-9]/g, '');
-      case 'alphanumeric':
-      default:
-        return value;
-    }
-  }
-
-  private applyFormat(value: any): string {
-    if (!value && value !== 0) return '';
-
-    switch (this.format) {
-      case 'currency':
-        return this.formatCurrency(value);
-      case 'alphanumeric':
-      default:
-        return String(value);
-    }
-  }
-
-  private formatCurrency(value: any): string {
-    const numValue = typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) : value;
-
-    if (isNaN(numValue)) return '';
-
-    // Format with thousands separator
-    return numValue.toLocaleString('es-MX', {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2
-    });
-  }
-}

package/src/lib/atoms/loader/loader.component.scss

@@ -1,144 +0,0 @@
-.svu-loader-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: #F8F9FC;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 99999;
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.svu-loader-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  min-height: 500px;
-  justify-content: center;
-}
-
-.svu-loader-logo {
-  margin-bottom: 2rem;
-
-  img {
-    height: 60px;
-    width: auto;
-  }
-}
-
-.svu-loader-image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: float 3s ease-in-out infinite;
-
-  img {
-    max-width: 300px;
-    height: auto;
-  }
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-20px);
-  }
-}
-
-.svu-loader-dots {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 0;
-  height: 80px;
-}
-
-.svu-loader-dot {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #F59100;
-  position: relative;
-  transform-origin: center;
-
-  &:nth-child(1) {
-    animation: bounce 1.4s ease-in-out infinite;
-  }
-
-  &:nth-child(2) {
-    animation: bounce 1.4s ease-in-out infinite;
-    animation-delay: 0.2s;
-  }
-
-  &:nth-child(3) {
-    animation: bounce 1.4s ease-in-out infinite;
-    animation-delay: 0.4s;
-  }
-}
-
-@keyframes bounce {
-  0%, 80%, 100% {
-    transform: scale(0.6);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.svu-loader-message {
-  font-family: 'DM Sans', sans-serif;
-  color: #2E353A;
-  text-align: center;
-  font-weight: 900;
-  font-size: 30px;
-
-  ::ng-deep strong,
-  ::ng-deep b {
-    color: #F26D00;
-    font-weight: 900;
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .svu-loader-logo img {
-    height: 48px;
-  }
-
-  .svu-loader-image img {
-    max-width: 200px;
-  }
-
-  .svu-loader-message {
-    font-size: 20px;
-    padding: 0 1rem;
-  }
-
-  .svu-loader-dots {
-    height: 50px;
-    gap: 5px;
-  }
-
-  .svu-loader-dot {
-    width: 12px;
-    height: 12px;
-  }
-}

package/src/lib/atoms/loader/loader.component.ts

@@ -1,44 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AssetSourceDirective } from '../../directives/asset-source.directive';
-
-@Component({
-  selector: 'app-loader',
-  standalone: true,
-  imports: [CommonModule, AssetSourceDirective],
-  template: `
-    <div class="svu-loader-overlay" *ngIf="show">
-      <div class="svu-loader-content">
-        <!-- Logo -->
-        <div class="svu-loader-logo" *ngIf="logo">
-          <img [src]="logo" assetSource="mf" alt="Logo">
-        </div>
-
-        <!-- Image/Icon -->
-        <div class="svu-loader-image" *ngIf="image">
-          <img [src]="image" assetSource="mf" [alt]="imageAlt">
-        </div>
-
-        <!-- Loading Dots Animation -->
-        <div class="svu-loader-dots">
-          <span class="svu-loader-dot"></span>
-          <span class="svu-loader-dot"></span>
-          <span class="svu-loader-dot"></span>
-        </div>
-
-        <!-- Message -->
-        <div class="svu-loader-message" *ngIf="message">
-          <span [innerHTML]="message"></span>
-        </div>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./loader.component.scss']
-})
-export class LoaderComponent {
-  @Input() show: boolean = false;
-  @Input() message?: string;
-  @Input() logo?: string;
-  @Input() image?: string;
-  @Input() imageAlt: string = 'Loading';
-}

package/src/lib/atoms/radio/radio.component.scss

@@ -1,115 +0,0 @@
-:host {
-  display: block;
-  outline: none !important;
-
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    outline: none !important;
-    box-shadow: none !important;
-  }
-}
-
-.radio-wrapper {
-  cursor: pointer;
-  outline: none !important;
-  box-shadow: none !important;
-
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  &--selected {
-    .radio-custom {
-      border-color: #F59100;
-    }
-  }
-}
-
-.radio-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline: none !important;
-  box-shadow: none !important;
-
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  &:hover .radio-custom:not(.checked) {
-    border-color: #F59100;
-  }
-}
-
-.radio-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-
-  &:focus,
-  &:focus-visible,
-  &:checked {
-    outline: none !important;
-    box-shadow: none !important;
-    border: none !important;
-  }
-}
-
-.radio-custom {
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  border: 2px solid #D5D7DA;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: border-color 0.2s ease;
-  background: white;
-  flex-shrink: 0;
-  outline: none !important;
-  box-shadow: none !important;
-
-  &.checked {
-    border-color: #F59100;
-  }
-
-  .radio-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: #F59100;
-  }
-}
-
-.radio-text {
-  font-family: 'Quicksand', sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  color: #585D61;
-  user-select: none;
-}

package/src/lib/atoms/radio/radio.component.ts

@@ -1,103 +0,0 @@
-import { Component, Input, forwardRef, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-radio',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, FormsModule],
-  template: `
-    <div
-      class="radio-wrapper"
-      [class.disabled]="disabled"
-      [class.radio-wrapper--selected]="isSelected"
-      (click)="onContainerClick()"
-    >
-      <div class="radio-container">
-        <input
-          type="radio"
-          [id]="id"
-          [name]="name"
-          [value]="radioValue"
-          [disabled]="disabled"
-          [checked]="isSelected"
-          (blur)="onTouched()"
-          (change)="onRadioChange($event)"
-          class="radio-input"
-        />
-        <span class="radio-custom" [class.checked]="isSelected">
-          <span class="radio-dot" *ngIf="isSelected"></span>
-        </span>
-        <span class="radio-text">
-          <ng-content></ng-content>
-          <span *ngIf="label">{{ label }}</span>
-        </span>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./radio.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RadioComponent),
-      multi: true
-    }
-  ]
-})
-export class RadioComponent implements ControlValueAccessor {
-  @Input() label = '';
-  @Input() id = '';
-  @Input() name = '';
-  @Input() radioValue: any = '';
-  @Input() disabled = false;
-
-  @Output() changed = new EventEmitter<any>();
-
-  value: any = null;
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  get isSelected(): boolean {
-    return this.value === this.radioValue;
-  }
-
-  onContainerClick(): void {
-    if (this.disabled) return;
-
-    this.value = this.radioValue;
-    this.onChange(this.value);
-    this.changed.emit(this.value);
-    this.cdr.markForCheck();
-  }
-
-  onRadioChange(event: Event): void {
-    event.stopPropagation();
-    const target = event.target as HTMLInputElement;
-    if (target.checked) {
-      this.value = this.radioValue;
-      this.onChange(this.value);
-      this.changed.emit(this.value);
-      this.cdr.markForCheck();
-    }
-  }
-
-  writeValue(value: any): void {
-    this.value = value;
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-}