@up_si_vale/sivale-componentes-angular 1.0.0

package/README.md

@@ -0,0 +1,81 @@
+# @up_si_vale/sivale-componentes-angular
+
+Librería de componentes Angular **standalone** (atoms + molecules) reutilizables por los microfrontends de Sivale.
+
+## Instalación
+
+```bash
+npm install @up_si_vale/sivale-componentes-angular
+```
+
+Esta librería **no incluye estilos**. El consumidor debe importar globalmente el design system:
+
+```scss
+// styles.scss del consumidor
+@use '@up_si_vale/sivale-design-styles/scss';
+```
+
+## Configuración de assets (opcional)
+
+Las directivas `AssetSourceDirective` e `IconSourceDirective` necesitan saber dónde están los íconos/imágenes. Provee el token `ASSET_BASE_URL` en el bootstrap de tu app:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { ASSET_BASE_URL } from '@up_si_vale/sivale-componentes-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    { provide: ASSET_BASE_URL, useValue: environment.mfAssetsUrl }
+  ]
+};
+```
+
+## Componentes
+
+### Atoms
+- `ButtonComponent` — `<app-button>`
+- `InputComponent` — `<app-input>` (CVA, `format: alphanumeric | currency | numeric`)
+- `TextareaComponent` — `<app-textarea>` (CVA)
+- `CheckboxComponent` — `<app-checkbox>` (CVA)
+- `RadioComponent` — `<app-radio>` (CVA)
+- `DatePickerComponent` — `<app-date-picker>` (CVA)
+- `LoaderComponent` — `<app-loader>`
+
+### Molecules
+- `SelectComponent` — `<app-select>` (CVA + content projection con `<app-option>`)
+- `MultiselectComponent` — `<app-multiselect>` (CVA)
+- `OptionComponent` — `<app-option>`
+- `PhoneInputComponent` — `<app-phone-input>` (composición)
+- `CopyInputComponent` — `<copy-input>`
+- `SnackbarComponent` — `<app-snackbar>` (consumir vía `SnackbarService`)
+
+### Directives
+- `[onlyNumber]`, `[onlyLetters]`, `[rfcValidator]`, `[noLeadingSpace]`, `[appTooltip]`, `[assetSource]`, `i[iconName]`
+
+### Services
+- `SnackbarService` — `success() / error() / warning() / info() / show() / dismiss() / dismissAll()`
+
+## Uso (ejemplo)
+
+```ts
+import { Component } from '@angular/core';
+import { InputComponent, SelectComponent, OptionComponent } from '@up_si_vale/sivale-componentes-angular';
+
+@Component({
+  standalone: true,
+  imports: [InputComponent, SelectComponent, OptionComponent],
+  template: `
+    <app-input label="Nombre" [(ngModel)]="nombre"></app-input>
+    <app-select label="País" [(ngModel)]="pais">
+      <app-option value="mx">México</app-option>
+    </app-select>
+  `
+})
+export class DemoComponent { nombre = ''; pais = ''; }
+```
+
+## Build
+
+```bash
+npm run build       # genera dist/ con ng-packagr (FESM, ESM, types)
+```

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": []
+  },
+  "assets": []
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@up_si_vale/sivale-componentes-angular",
+  "version": "1.0.0",
+  "description": "Librería de componentes Angular standalone (atoms + molecules) para los frontends de Sivale.",
+  "publishConfig": {
+    "access": "restricted"
+  },  
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "build:watch": "ng-packagr -p ng-package.json --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@up_si_vale/sivale-design-styles": "^1.0.15",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "ng-packagr": "^17.3.0",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.3.0",
+    "typescript": "~5.4.2",
+    "zone.js": "~0.14.3"
+  },
+  "sideEffects": false,
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/src/lib/atoms/button/button.component.html

@@ -0,0 +1,21 @@
+<button
+  [type]="type"
+  [class]="buttonClasses"
+  [disabled]="disabled || loading"
+  [id]="id"
+  [attr.aria-label]="ariaLabel"
+  [attr.aria-busy]="loading"
+  (click)="handleClick($event)">
+
+  <!-- Loading spinner -->
+  <span *ngIf="loading" class="svu-btn__spinner">
+    <svg class="svu-spinner" viewBox="0 0 24 24">
+      <circle class="svu-spinner__circle" cx="12" cy="12" r="10" fill="none" stroke-width="3"></circle>
+    </svg>
+  </span>
+
+  <!-- Content -->
+  <span [class.svu-btn__content--hidden]="loading" class="svu-btn__content">
+    <ng-content></ng-content>
+  </span>
+</button>

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

@@ -0,0 +1,242 @@
+.svu-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: 'Quicksand', sans-serif;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  outline: none !important;
+  text-decoration: none;
+  white-space: nowrap;
+  width: 100%;
+
+  &:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  // Sizes
+  &--small {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    height: inherit;
+  }
+
+  &--medium {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  &--large {
+    padding: 1rem 2rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  // Full width
+  &--full-width {
+    width: 100%;
+  }
+
+  // Primary variant
+  &--primary {
+    background: #364B9F;
+    color: white;
+
+    &:hover:not(:disabled):not(.btn--loading) {
+      background: #2A3B7F;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(54, 75, 159, 0.3);
+    }
+
+    &:active:not(:disabled):not(.btn--loading) {
+      transform: translateY(0);
+      background: #1F2D5F;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(54, 75, 159, 0.3);
+    }
+  }
+
+  // Secondary variant
+  &--secondary {
+    background: #F3F4F6;
+    color: #374151;
+
+    &:hover:not(:disabled):not(.btn--loading) {
+      background: #E5E7EB;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    &:active:not(:disabled):not(.btn--loading) {
+      transform: translateY(0);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.2);
+    }
+  }
+
+  // Outline variant
+  &--outline {
+    background: transparent;
+    color: #364B9F;
+    border: 1px solid #364B9F;
+
+    &:hover:not(:disabled):not(.btn--loading) {
+      background: rgba(54, 75, 159, 0.05);
+      border-color: #2A3B7F;
+      color: #2A3B7F;
+      transform: translateY(-1px);
+    }
+
+    &:active:not(:disabled):not(.btn--loading) {
+      transform: translateY(0);
+      background: rgba(54, 75, 159, 0.1);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(54, 75, 159, 0.2);
+    }
+  }
+
+  // Ghost variant
+  &--ghost {
+    background: transparent;
+    color: #364B9F;
+
+    &:hover:not(:disabled):not(.btn--loading) {
+      background: rgba(54, 75, 159, 0.1);
+      transform: translateY(-1px);
+    }
+
+    &:active:not(:disabled):not(.btn--loading) {
+      transform: translateY(0);
+      background: rgba(54, 75, 159, 0.15);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(54, 75, 159, 0.2);
+    }
+  }
+
+  // Danger variant
+  &--danger {
+    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+    color: white;
+
+    &:hover:not(:disabled):not(.btn--loading) {
+      background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+    }
+
+    &:active:not(:disabled):not(.btn--loading) {
+      transform: translateY(0);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
+    }
+  }
+
+  // Success variant
+  &--success {
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+    color: white;
+
+    &:hover:not(:disabled):not(.btn--loading) {
+      background: linear-gradient(135deg, #059669 0%, #047857 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    }
+
+    &:active:not(:disabled):not(.btn--loading) {
+      transform: translateY(0);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
+    }
+  }
+
+  // Disabled state
+  &:disabled,
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  // Loading state
+  &--loading {
+    cursor: wait;
+    pointer-events: none;
+  }
+
+  &__spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+}
+
+// Spinner animation
+.svu-spinner {
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: svu-spin 0.8s linear infinite;
+
+  &__circle {
+    stroke: currentColor;
+    stroke-dasharray: 50;
+    stroke-dashoffset: 25;
+    stroke-linecap: round;
+    animation: svu-spinner-dash 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes svu-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes svu-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

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

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonType = 'button' | 'submit' | 'reset';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent {
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() size: ButtonSize = 'medium';
+  @Input() type: ButtonType = 'button';
+  @Input() disabled: boolean = false;
+  @Input() loading: boolean = false;
+  @Input() fullWidth: boolean = false;
+  @Input() id?: string;
+  @Input() ariaLabel?: string;
+
+  @Output() onClick = new EventEmitter<MouseEvent>();
+
+  get buttonClasses(): string {
+    return [
+      'svu-btn',
+      `svu-btn--${this.variant}`,
+      `svu-btn--${this.size}`,
+      this.fullWidth ? 'svu-btn--full-width' : '',
+      this.loading ? 'svu-btn--loading' : '',
+      this.disabled ? 'svu-btn--disabled' : ''
+    ].filter(Boolean).join(' ');
+  }
+
+  handleClick(event: MouseEvent): void {
+    if (!this.disabled && !this.loading) {
+      this.onClick.emit(event);
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+.checkbox-wrapper {
+  width: 100%;
+  padding: 0 4px;
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.checkbox-label-input {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+    z-index: 2;
+    top: 2px;
+    left: 0;
+  }
+
+  .checkbox-custom {
+    width: 22px;
+    height: 22px;
+    min-width: 22px;
+    border: 2.5px solid #D5D7D8;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    background: white;
+    margin-top: 2px;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      background: #F59100;
+      opacity: 0;
+      transform: scale(0.5);
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &.checked, &.indeterminate {
+      background: white;
+      border-color: #F59100;
+      border-width: 2.5px;
+      box-shadow: 0 3px 8px rgba(242, 109, 0, 0.25), 0 1px 3px rgba(242, 109, 0, 0.15);
+      transform: scale(1.05);
+
+      &::after {
+        opacity: 0;
+      }
+    }
+
+    .check-icon {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: checkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+  }
+
+  &:hover .checkbox-custom:not(.checked) {
+    border-color: #F26D00;
+    transform: scale(1.05);
+  }
+}
+
+.checkbox-text {
+  flex: 1;
+  font-family: 'Quicksand', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.7;
+  user-select: none;
+  cursor: pointer;
+
+  ::ng-deep a {
+    color: #364B9F;
+    font-family: 'Quicksand', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.7;
+    cursor: pointer;
+  }
+}
+
+.checkbox-wrapper.disabled .checkbox-text {
+  cursor: not-allowed;
+}
+
+@keyframes checkPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.field-error {
+  color: #F04438;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  font-family: 'Quicksand', sans-serif;
+}

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

@@ -0,0 +1,130 @@
+import { Component, Input, forwardRef, ChangeDetectorRef, Output, EventEmitter, SimpleChanges, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-checkbox',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
+  template: `
+    <div class="checkbox-wrapper" [class.disabled]="disabled">
+      <div class="checkbox-container">
+        <label [for]="id" class="checkbox-label-input">
+          <input
+            type="checkbox"
+            [id]="id"
+            [disabled]="disabled"
+            [checked]="value"
+            (blur)="onTouched()"
+            (change)="onCheckboxChange($event)">
+          <span class="checkbox-custom" [class.checked]="value" [class.indeterminate]="indeterminate">
+            <!-- Paloma -->
+            <svg *ngIf="value && !indeterminate" class="check-icon" width="14" height="10" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M9 1L3.5 6.5L1 4" stroke="#F59100" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <!-- Guion -->
+            <svg *ngIf="indeterminate && !value" class="minus-icon" width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="12" height="2" rx="1" fill="#F59100"/>
+            </svg>
+          </span>
+        </label>
+        <span class="checkbox-text" (click)="onTextClick($event)">
+          <ng-content></ng-content>
+          <span *ngIf="label" [innerHTML]="label"></span>
+        </span>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `,
+  styleUrls: ['./checkbox.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true
+    }
+  ]
+})
+export class CheckboxComponent implements ControlValueAccessor {
+  @Input() label = '';
+  @Input() id = '';
+  @Input() hasError = false;
+  @Input() errorMessage = '';
+  @Input() disabled = false;
+  @Input() indeterminate = false;
+  @Input()
+  set checked(value: boolean) {
+    this.value = !!value;
+    this.cdr.markForCheck();
+  }
+  get checked(): boolean {
+    return this.value;
+  }
+
+  @Output() changed = new EventEmitter<boolean>();
+
+  value = false;
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  constructor(private cdr: ChangeDetectorRef, private elRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    this.updateNativeIndeterminate();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['indeterminate']) {
+      this.updateNativeIndeterminate();
+    }
+  }
+
+  private updateNativeIndeterminate() {
+    const input = this.elRef.nativeElement.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    if (input) input.indeterminate = this.indeterminate;
+  }
+
+  onCheckboxChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.value = target.checked;
+    this.onChange(this.value);
+    this.changed.emit(this.value); // ← EMITE EVENTO MANUAL PARA USO EXTERNO
+    this.cdr.markForCheck();
+  }
+
+  onTextClick(event: Event): void {
+    const target = event.target as HTMLElement;
+    if (target.tagName === 'A' || target.closest('a')) {
+      return;
+    }
+
+    if (this.disabled) {
+      return;
+    }
+
+    this.value = !this.value;
+    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();
+  }
+}