@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.2

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

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

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

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

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

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

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

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

@@ -1,211 +0,0 @@
-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/molecules/copy-input/copy-input.component.html

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