@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.1

package/lib/molecules/snackbar/snackbar.component.d.ts

@@ -0,0 +1,17 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { SnackbarService } from '../../services/snackbar.service';
+import { SnackbarData } from '../../models/snackbar.models';
+import * as i0 from "@angular/core";
+export declare class SnackbarComponent implements OnInit, OnDestroy {
+    private snackbarService;
+    snackbars: SnackbarData[];
+    private subscriptions;
+    constructor(snackbarService: SnackbarService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getSnackbarsByPosition(position: string): SnackbarData[];
+    dismiss(id: string): void;
+    handleAction(snackbar: SnackbarData): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SnackbarComponent, "app-snackbar", never, {}, {}, never, never, true, never>;
+}

package/lib/services/snackbar.service.d.ts

@@ -0,0 +1,40 @@
+import { SnackbarConfig, SnackbarData, SnackbarPosition } from '../models/snackbar.models';
+import * as i0 from "@angular/core";
+export declare class SnackbarService {
+    private snackbarSubject;
+    snackbar$: import("rxjs").Observable<SnackbarData>;
+    private dismissSubject;
+    dismiss$: import("rxjs").Observable<string>;
+    private snackbarIdCounter;
+    constructor();
+    /**
+     * Show success snackbar
+     */
+    success(message: string, duration?: number, position?: SnackbarPosition): void;
+    /**
+     * Show error snackbar
+     */
+    error(message: string, duration?: number, position?: SnackbarPosition): void;
+    /**
+     * Show warning snackbar
+     */
+    warning(message: string, duration?: number, position?: SnackbarPosition): void;
+    /**
+     * Show info snackbar
+     */
+    info(message: string, duration?: number, position?: SnackbarPosition): void;
+    /**
+     * Show snackbar with custom configuration
+     */
+    show(config: SnackbarConfig): void;
+    /**
+     * Dismiss specific snackbar by id
+     */
+    dismiss(id: string): void;
+    /**
+     * Dismiss all snackbars
+     */
+    dismissAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SnackbarService>;
+}

package/{src/lib/tokens/asset-base-url.token.ts → lib/tokens/asset-base-url.token.d.ts}

@@ -1,10 +1,6 @@
 import { InjectionToken } from '@angular/core';
-
 /**
  * Base URL para los assets remotos del microfrontend (íconos, imágenes).
  * El consumidor debe proveerlo, normalmente con el valor de `environment.mfAssetsUrl`.
  */
-export const ASSET_BASE_URL = new InjectionToken<string>('ASSET_BASE_URL', {
-  providedIn: 'root',
-  factory: () => ''
-});
+export declare const ASSET_BASE_URL: InjectionToken<string>;

package/package.json

@@ -1,14 +1,23 @@
 {
   "name": "@up_si_vale/sivale-componentes-angular",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Librería de componentes Angular standalone (atoms + molecules) para los frontends de Sivale.",
+  "author": "Up Sí Vale — Frontend Team",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/UP-SiVale/SI%20VALE%20Agile/_git/biblioteca_componentes_angular_sivale"
+  },
+  "keywords": [
+    "angular",
+    "componentes",
+    "ui",
+    "design-system",
+    "sivale",
+    "standalone"
+  ],
   "publishConfig": {
-    "access": "restricted"
-  },  
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "build:watch": "ng-packagr -p ng-package.json --watch",
-    "prepublishOnly": "npm run build"
+    "access": "public"
   },
   "peerDependencies": {
     "@angular/common": "^17.3.0",
@@ -20,21 +29,18 @@
   "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"
-}
+  "module": "fesm2022/up_si_vale-sivale-componentes-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/up_si_vale-sivale-componentes-angular.mjs",
+      "esm": "./esm2022/up_si_vale-sivale-componentes-angular.mjs",
+      "default": "./fesm2022/up_si_vale-sivale-componentes-angular.mjs"
+    }
+  }
+}

package/{src/public-api.ts → public-api.d.ts}

@@ -1,17 +1,6 @@
-/*
- * Public API Surface of @up_si_vale/sivale-componentes-angular
- */
-
-// Tokens
 export * from './lib/tokens/asset-base-url.token';
-
-// Models
 export * from './lib/models/snackbar.models';
-
-// Services
 export * from './lib/services/snackbar.service';
-
-// Directives
 export * from './lib/directives/asset-source.directive';
 export * from './lib/directives/icon-source.directive';
 export * from './lib/directives/only-number.directive';
@@ -19,8 +8,6 @@ export * from './lib/directives/only-letters.directive';
 export * from './lib/directives/rfc.directive';
 export * from './lib/directives/no-leading-space.directive';
 export * from './lib/directives/tooltip.directive';
-
-// Atoms
 export * from './lib/atoms/button/button.component';
 export * from './lib/atoms/input/input.component';
 export * from './lib/atoms/textarea/textarea.component';
@@ -28,8 +15,6 @@ export * from './lib/atoms/checkbox/checkbox.component';
 export * from './lib/atoms/radio/radio.component';
 export * from './lib/atoms/date-picker/date-picker.component';
 export * from './lib/atoms/loader/loader.component';
-
-// Molecules
 export * from './lib/molecules/option/option.component';
 export * from './lib/molecules/select/select.component';
 export * from './lib/molecules/multiselect/multiselect.component';

package/ng-package.json

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

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

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

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

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

@@ -1,131 +0,0 @@
-.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;
-}