@up_si_vale/sivale-componentes-angular 1.0.0

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

@@ -0,0 +1,155 @@
+import { Component, Input, forwardRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-textarea',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="textarea-wrapper">
+      <label *ngIf="label" [for]="id" class="textarea-label">{{ label }}</label>
+      <div class="textarea-container" [class.error]="hasError">
+        <textarea
+          [id]="id"
+          [placeholder]="placeholder"
+          [rows]="rows"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [attr.maxlength]="maxLength"
+          class="textarea-field"
+          [class.error]="hasError"
+          [value]="value"
+          (blur)="onBlur()"
+          (input)="onInputChange($event)"
+        ></textarea>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `,
+  styles: [`
+    .textarea-wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .textarea-label {
+      font-family: 'Quicksand', sans-serif;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #414651;
+    }
+
+    .textarea-container {
+      width: 100%;
+
+      &.error .textarea-field {
+        border-color: #F04438;
+      }
+    }
+
+    .textarea-field {
+      width: 100%;
+      padding: 10px 14px;
+      background: #FFFFFF;
+      border: 1px solid #D5D7DA;
+      border-radius: 8px;
+      font-family: 'Quicksand', sans-serif;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #2E353A;
+      resize: vertical;
+      min-height: 100px;
+      transition: all 0.2s ease;
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: #A4A7AE;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: #F59100;
+        box-shadow: 0 0 0 4px rgba(245, 145, 0, 0.1);
+      }
+
+      &:disabled {
+        background: #F9FAFB;
+        cursor: not-allowed;
+      }
+
+      &.error {
+        border-color: #F04438;
+
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.1);
+        }
+      }
+    }
+
+    .field-error {
+      color: #F04438;
+      font-size: 0.875rem;
+      font-family: 'Quicksand', sans-serif;
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextareaComponent),
+      multi: true
+    }
+  ]
+})
+export class TextareaComponent implements ControlValueAccessor {
+  @Input() label = '';
+  @Input() id = '';
+  @Input() placeholder = '';
+  @Input() rows = 4;
+  @Input() maxLength?: number;
+  @Input() hasError = false;
+  @Input() errorMessage = '';
+  @Input() disabled = false;
+  @Input() readonly = false;
+
+  value = '';
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  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();
+  }
+
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLTextAreaElement;
+    this.value = target.value;
+    this.onChange(this.value);
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+}

package/src/lib/directives/asset-source.directive.ts

@@ -0,0 +1,64 @@
+import { Directive, Input, ElementRef, OnInit, OnChanges, AfterViewInit, Inject, Optional } from '@angular/core';
+import { ASSET_BASE_URL } from '../tokens/asset-base-url.token';
+
+export type AssetSource = 'mf' | 'main';
+
+@Directive({
+  selector: '[assetSource]',
+  standalone: true
+})
+export class AssetSourceDirective implements OnInit, OnChanges, AfterViewInit {
+  @Input() assetSource: AssetSource = 'mf';
+  @Input() assetPath?: string;
+
+  private originalSrc: string | null = null;
+
+  constructor(
+    private el: ElementRef<HTMLImageElement>,
+    @Optional() @Inject(ASSET_BASE_URL) private assetBaseUrl: string | null
+  ) {}
+
+  ngOnInit() {
+    this.captureOriginalSrc();
+  }
+
+  ngAfterViewInit() {
+    this.updateSrc();
+  }
+
+  ngOnChanges() {
+    this.updateSrc();
+  }
+
+  private captureOriginalSrc() {
+    if (this.el.nativeElement.tagName === 'IMG') {
+      this.originalSrc = this.el.nativeElement.getAttribute('src');
+    }
+  }
+
+  private updateSrc() {
+    const assetPath = this.assetPath || this.originalSrc;
+
+    if (!assetPath) {
+      return;
+    }
+
+    const baseUrl = this.getBaseUrl();
+    const fullPath = `${baseUrl}/${assetPath}`;
+
+    if (this.el.nativeElement.tagName === 'IMG') {
+      this.el.nativeElement.src = fullPath;
+    }
+  }
+
+  private getBaseUrl(): string {
+    switch (this.assetSource) {
+      case 'mf':
+        return this.assetBaseUrl ?? '';
+      case 'main':
+        return '/assets';
+      default:
+        return this.assetBaseUrl ?? '';
+    }
+  }
+}

package/src/lib/directives/icon-source.directive.ts

@@ -0,0 +1,74 @@
+import { Directive, Input, ElementRef, OnInit, OnChanges, AfterViewInit, Inject, Optional } from '@angular/core';
+import { ASSET_BASE_URL } from '../tokens/asset-base-url.token';
+
+export type IconName =
+  'user'
+  | 'mail'
+  | 'build'
+  | 'map-pin'
+  | 'money'
+  | 'card'
+  | 'nav-arrow-up'
+  | 'nav-arrow-down'
+  | 'car'
+  | 'trash'
+  | 'hand-card'
+  | 'help-outlined'
+  | 'edit'
+  | 'shopping-cart';
+
+@Directive({
+  selector: 'i[iconName]',
+  standalone: true
+})
+export class IconSourceDirective implements OnInit, OnChanges, AfterViewInit {
+  @Input() iconName!: IconName;
+  @Input() assetSource: 'mf' | 'main' = 'mf';
+
+  constructor(
+    private el: ElementRef<HTMLElement>,
+    @Optional() @Inject(ASSET_BASE_URL) private assetBaseUrl: string | null
+  ) {
+  }
+
+  ngOnInit() {
+    this.addIconClass();
+  }
+
+  ngAfterViewInit() {
+    this.setIconUrl();
+  }
+
+  ngOnChanges() {
+    this.setIconUrl();
+  }
+
+  private addIconClass() {
+    if (this.iconName) {
+      this.el.nativeElement.classList.add(`icon-${this.iconName}`);
+    }
+  }
+
+  private setIconUrl() {
+    if (!this.iconName) {
+      return;
+    }
+
+    const baseUrl = this.getBaseUrl();
+    const iconUrl = `${baseUrl}/icons/${this.iconName}.svg`;
+
+    this.el.nativeElement.style.maskImage = `url('${iconUrl}')`;
+    this.el.nativeElement.style.webkitMaskImage = `url('${iconUrl}')`;
+  }
+
+  private getBaseUrl(): string {
+    switch (this.assetSource) {
+      case 'mf':
+        return this.assetBaseUrl ?? '';
+      case 'main':
+        return '/assets';
+      default:
+        return this.assetBaseUrl ?? '';
+    }
+  }
+}

package/src/lib/directives/no-leading-space.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[noLeadingSpace]',
+  standalone: true
+})
+export class NoLeadingSpaceDirective {
+
+  @HostListener('input', ['$event'])
+  onInput(event: any) {
+    const value = event.target.value;
+
+    // Elimina espacios al inicio
+    if (value.startsWith(' ')) {
+      event.target.value = value.trimStart();
+    }
+  }
+}

package/src/lib/directives/only-letters.directive.ts

@@ -0,0 +1,21 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[onlyLetters]',
+  standalone: true
+})
+
+export class OnlyLettersDirective {
+
+  private regex = /^[A-Za-zÁÉÍÓÚÜÑáéíóúüñ' -]*$/;
+
+  @HostListener('input', ['$event'])
+  onInput(event: any) {
+    const value: string = event.target.value;
+
+    event.target.value = value
+      .split('')
+      .filter(char => this.regex.test(char))
+      .join('');
+  }
+}

package/src/lib/directives/only-number.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[onlyNumber]',
+  standalone: true
+})
+
+export class OnlyNumberDirective {
+  @HostListener('input', ['$event'])
+  onInput(event: any) {
+    const value = event.target.value;
+    event.target.value = value.replace(/\D/g, '');
+  }
+
+}

package/src/lib/directives/rfc.directive.ts

@@ -0,0 +1,60 @@
+import { Directive, HostListener, Input, Optional, Self } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[rfcValidator]',
+  standalone: true
+})
+export class RfcDirective {
+
+  @Input() tipoContribuyente: string | null = null;
+
+  constructor(@Optional() @Self() private ngControl: NgControl | null) {
+  }
+
+  // Función para obtener el límite según el tipo de contribuyente
+  private getMaxLength(): number {
+    if (this.tipoContribuyente === 'fisica') return 13;
+    if (this.tipoContribuyente === 'moral') return 12;
+    return 13; // Default por si no llega el valor
+  }
+
+  @HostListener('input', ['$event'])
+  onInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    let value = input.value;
+
+    // Solo letras y números
+    value = value.replace(/[^a-zA-Z0-9]/g, '');
+
+    // Mayúsculas
+    value = value.toUpperCase();
+
+    // Aplicar límite dinámico
+    const max = this.getMaxLength();
+    if (value.length > max) {
+      value = value.substring(0, max);
+    }
+
+    this.ngControl?.control?.setValue(value, { emitEvent: false });
+  }
+
+  @HostListener('paste', ['$event'])
+  onPaste(event: ClipboardEvent) {
+    const pasted = event.clipboardData?.getData('text') || '';
+    const max = this.getMaxLength();
+
+    // Bloquear pegado con caracteres inválidos
+    if (/[^a-zA-Z0-9]/.test(pasted)) {
+      event.preventDefault();
+      return;
+    }
+
+    // Bloquear pegado si excede el máximo
+    if (pasted.length > max) {
+      event.preventDefault();
+    }
+  }
+}
+
+

package/src/lib/directives/tooltip.directive.ts

@@ -0,0 +1,211 @@
+import {
+  Directive,
+  Input,
+  ElementRef,
+  HostListener,
+  Renderer2,
+  OnDestroy,
+  HostBinding
+} from '@angular/core';
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+
+@Directive({
+  selector: '[appTooltip]',
+  standalone: true
+})
+export class TooltipDirective implements OnDestroy {
+  @Input('appTooltip') tooltipText = '';
+  @Input() tooltipPosition: TooltipPosition = 'auto';
+  @Input() tooltipDelay = 300;
+  @Input() tooltipMaxWidth = 280;
+  @Input() tooltipClass = '';
+
+  @HostBinding('style.cursor') cursor = 'help';
+
+  private tooltipElement: HTMLElement | null = null;
+  private showTimeout?: number;
+  private hideTimeout?: number;
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  @HostListener('mouseenter')
+  onMouseEnter(): void {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = undefined;
+    }
+
+    this.showTimeout = window.setTimeout(() => {
+      this.showTooltip();
+    }, this.tooltipDelay);
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = undefined;
+    }
+
+    this.hideTimeout = window.setTimeout(() => {
+      this.hideTooltip();
+    }, 100);
+  }
+
+  @HostListener('click')
+  onClick(): void {
+    // Allow click events to propagate
+  }
+
+  private showTooltip(): void {
+    if (!this.tooltipText || this.tooltipElement) {
+      return;
+    }
+
+    // Create tooltip element
+    this.tooltipElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.tooltipElement, 'app-tooltip');
+
+    if (this.tooltipClass) {
+      this.renderer.addClass(this.tooltipElement, this.tooltipClass);
+    }
+
+    // Create tooltip content
+    const tooltipContent = this.renderer.createElement('div');
+    this.renderer.addClass(tooltipContent, 'app-tooltip-content');
+    this.renderer.setStyle(tooltipContent, 'max-width', `${this.tooltipMaxWidth}px`);
+
+    const textNode = this.renderer.createText(this.tooltipText);
+    this.renderer.appendChild(tooltipContent, textNode);
+    this.renderer.appendChild(this.tooltipElement, tooltipContent);
+
+    // Create arrow element
+    const arrow = this.renderer.createElement('div');
+    this.renderer.addClass(arrow, 'app-tooltip-arrow');
+    this.renderer.appendChild(this.tooltipElement, arrow);
+
+    // Add to body
+    this.renderer.appendChild(document.body, this.tooltipElement);
+
+    // Position tooltip
+    this.positionTooltip();
+
+    // Trigger animation
+    requestAnimationFrame(() => {
+      if (this.tooltipElement) {
+        this.renderer.addClass(this.tooltipElement, 'app-tooltip-show');
+      }
+    });
+  }
+
+  private hideTooltip(): void {
+    if (!this.tooltipElement) {
+      return;
+    }
+
+    this.renderer.removeClass(this.tooltipElement, 'app-tooltip-show');
+
+    setTimeout(() => {
+      if (this.tooltipElement) {
+        this.renderer.removeChild(document.body, this.tooltipElement);
+        this.tooltipElement = null;
+      }
+    }, 200);
+  }
+
+  private positionTooltip(): void {
+    if (!this.tooltipElement) {
+      return;
+    }
+
+    const hostRect = this.el.nativeElement.getBoundingClientRect();
+    const tooltipRect = this.tooltipElement.getBoundingClientRect();
+    const scrollX = window.scrollX || window.pageXOffset;
+    const scrollY = window.scrollY || window.pageYOffset;
+    const gap = 16; // Space between element and tooltip
+
+    // Calculate available space in each direction
+    const spaceTop = hostRect.top;
+    const spaceBottom = window.innerHeight - hostRect.bottom;
+    const spaceLeft = hostRect.left;
+    const spaceRight = window.innerWidth - hostRect.right;
+
+    let position = this.tooltipPosition;
+    let top = 0;
+    let left = 0;
+
+    // Auto-detect best position
+    if (position === 'auto') {
+      if (spaceTop >= tooltipRect.height + gap) {
+        position = 'top';
+      } else if (spaceBottom >= tooltipRect.height + gap) {
+        position = 'bottom';
+      } else if (spaceRight >= tooltipRect.width + gap) {
+        position = 'right';
+      } else if (spaceLeft >= tooltipRect.width + gap) {
+        position = 'left';
+      } else {
+        // Default to top if no space is sufficient
+        position = 'top';
+      }
+    }
+
+    // Calculate position based on detected/specified position
+    switch (position) {
+      case 'top':
+        top = hostRect.top + scrollY - tooltipRect.height - gap;
+        left = hostRect.left + scrollX + (hostRect.width / 2) - (tooltipRect.width / 2);
+        break;
+
+      case 'bottom':
+        top = hostRect.bottom + scrollY + gap;
+        left = hostRect.left + scrollX + (hostRect.width / 2) - (tooltipRect.width / 2);
+        break;
+
+      case 'left':
+        top = hostRect.top + scrollY + (hostRect.height / 2) - (tooltipRect.height / 2);
+        left = hostRect.left + scrollX - tooltipRect.width - gap;
+        break;
+
+      case 'right':
+        top = hostRect.top + scrollY + (hostRect.height / 2) - (tooltipRect.height / 2);
+        left = hostRect.right + scrollX + gap;
+        break;
+    }
+
+    // Adjust horizontal position to keep tooltip within viewport
+    if (position === 'top' || position === 'bottom') {
+      const minLeft = scrollX + 10;
+      const maxLeft = scrollX + window.innerWidth - tooltipRect.width - 10;
+      left = Math.max(minLeft, Math.min(left, maxLeft));
+    }
+
+    // Adjust vertical position to keep tooltip within viewport
+    if (position === 'left' || position === 'right') {
+      const minTop = scrollY + 10;
+      const maxTop = scrollY + window.innerHeight - tooltipRect.height - 10;
+      top = Math.max(minTop, Math.min(top, maxTop));
+    }
+
+    // Apply position
+    this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+    this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+
+    // Add position class for arrow styling
+    this.renderer.addClass(this.tooltipElement, `app-tooltip-${position}`);
+  }
+
+  ngOnDestroy(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+    }
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+    this.hideTooltip();
+  }
+}

package/src/lib/models/snackbar.models.ts

@@ -0,0 +1,16 @@
+export type SnackbarType = 'success' | 'error' | 'warning' | 'info';
+export type SnackbarPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+
+export interface SnackbarConfig {
+  message: string;
+  type: SnackbarType;
+  duration?: number;
+  position?: SnackbarPosition;
+  action?: string;
+  actionCallback?: () => void;
+}
+
+export interface SnackbarData extends SnackbarConfig {
+  id: string;
+  position: SnackbarPosition;
+}

package/src/lib/molecules/copy-input/copy-input.component.html

@@ -0,0 +1,29 @@
+<div class="copy-input-wrapper">
+
+  <!-- Tooltip -->
+  <div
+    class="copy-tooltip"
+    *ngIf="isCopied"
+  >
+    Copiado
+  </div>
+
+  <!-- Componente -->
+  <div
+    class="copy-input"
+    (click)="copyToClipboard()"
+    tabindex="0"
+    role="button"
+    [attr.aria-label]="ariaLabel"
+    (keydown.enter)="copyToClipboard()"
+  >
+    <i
+      class="copy-input__icon"
+      [ngClass]="isCopied ? copiedIcon : icon">
+    </i>
+
+    <span class="copy-input__text">
+      {{ value }}
+    </span>
+  </div>
+</div>