@up_si_vale/sivale-componentes-angular 1.0.0

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

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

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

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

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

@@ -0,0 +1,103 @@
+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();
+  }
+}