@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.2

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

@@ -0,0 +1,88 @@
+import { ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { OptionComponent } from '../option/option.component';
+import * as i0 from "@angular/core";
+export declare class SelectPrefixDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectPrefixDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectPrefixDirective, "[prefix]", never, {}, {}, never, never, true, never>;
+}
+export declare class SelectSuffixDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectSuffixDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectSuffixDirective, "[suffix]", never, {}, {}, never, never, true, never>;
+}
+export interface SelectOption {
+    value: any;
+    label: string;
+    disabled?: boolean;
+}
+export declare class SelectComponent implements ControlValueAccessor, OnDestroy, AfterContentInit {
+    private renderer;
+    private document;
+    label: string;
+    id: string;
+    placeholder: string;
+    options: SelectOption[] | any[];
+    hasError: boolean;
+    errorMessage: string;
+    disabled: boolean;
+    unstyled: boolean;
+    displayKey: string;
+    valueKey: string;
+    customClass: string;
+    trigger: ElementRef;
+    contentOptions: QueryList<OptionComponent>;
+    prefixDirective: SelectPrefixDirective;
+    suffixDirective: SelectSuffixDirective;
+    get hasPrefix(): boolean;
+    get hasSuffix(): boolean;
+    value: any;
+    isOpen: boolean;
+    onChange: any;
+    onTouched: any;
+    private _usingContentOptions;
+    private dropdownElement;
+    private backdropElement;
+    private scrollHandler;
+    private resizeHandler;
+    constructor(renderer: Renderer2, document: Document);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    onEsc(): void;
+    handleBlur(): void;
+    /**
+     * Get all options (from content or input)
+     */
+    private getAllOptions;
+    /**
+     * Get display label from option
+     */
+    getOptionLabel(option: any): string;
+    /**
+     * Get value from option
+     */
+    getOptionValue(option: any): any;
+    /**
+     * Check if option is disabled
+     */
+    isOptionDisabled(option: any): boolean;
+    onDocumentClick(event: MouseEvent): void;
+    toggleDropdown(event: Event): void;
+    private openDropdown;
+    private calculatePosition;
+    private addRepositionListeners;
+    private updateDropdownPosition;
+    private createOptionElement;
+    private createCheckIcon;
+    closeDropdown(): void;
+    private destroyDropdown;
+    selectOption(option: any): void;
+    isSelected(value: any): boolean;
+    isEmptyValue(value: any): boolean;
+    getSelectedLabel(): string;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "app-select", never, { "label": { "alias": "label"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "unstyled": { "alias": "unstyled"; "required": false; }; "displayKey": { "alias": "displayKey"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, {}, ["prefixDirective", "suffixDirective", "contentOptions"], ["[prefix]", "[suffix]", "*"], true, never>;
+}

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/organisms/sidebar/sidebar-icon.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export type SidebarIconName = 'dashboard' | 'file-users' | 'card' | 'logout' | 'chevron-down' | 'settings' | 'user' | 'home';
+export declare class SidebarIconComponent {
+    name: SidebarIconName;
+    size: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarIconComponent, "svu-sidebar-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/organisms/sidebar/sidebar.component.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter, ElementRef, TemplateRef } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
+import { SidebarIconName } from './sidebar-icon.component';
+import * as i0 from "@angular/core";
+export interface SidebarItem {
+    label: string;
+    icon?: SidebarIconName;
+    route?: string;
+    /** Subset match para que el padre se marque activo aunque la ruta hija no esté exacta. */
+    exact?: boolean;
+    children?: SidebarItem[];
+}
+export declare class SidebarComponent {
+    private hostRef;
+    /** Items del menú (datos-driven). Soporta children para sub-navegación. */
+    items: SidebarItem[];
+    /** Logo: si se pasa la URL se renderiza; alternativamente proyecta contenido con `[sidebarLogo]`. */
+    logoSrc?: string;
+    logoAlt: string;
+    /** Footer hibrido: si se pasan los inputs se usa el footer por defecto.
+     *  Para footer custom, proyectar con `[sidebarFooter]` (gana sobre los inputs). */
+    userName?: string;
+    userEmail?: string;
+    /** Si no se pasa, se usa la primera letra de userName. */
+    userInitial?: string;
+    /** Mostrar/ocultar el botón de logout en el menú de cuenta. */
+    showLogout: boolean;
+    logoutLabel: string;
+    /** Click en un item (incluye expandibles y hojas). */
+    itemClick: EventEmitter<SidebarItem>;
+    logout: EventEmitter<void>;
+    logoTpl?: TemplateRef<unknown>;
+    footerTpl?: TemplateRef<unknown>;
+    expandedKeys: Set<string>;
+    accountMenuOpen: boolean;
+    readonly subsetMatch: IsActiveMatchOptions;
+    readonly exactMatch: IsActiveMatchOptions;
+    constructor(hostRef: ElementRef<HTMLElement>);
+    get computedInitial(): string;
+    isExpanded(item: SidebarItem): boolean;
+    onItemClick(item: SidebarItem): void;
+    toggleAccountMenu(): void;
+    onLogoutClick(): void;
+    onDocumentClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "svu-sidebar", never, { "items": { "alias": "items"; "required": false; }; "logoSrc": { "alias": "logoSrc"; "required": false; }; "logoAlt": { "alias": "logoAlt"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "userEmail": { "alias": "userEmail"; "required": false; }; "userInitial": { "alias": "userInitial"; "required": false; }; "showLogout": { "alias": "showLogout"; "required": false; }; "logoutLabel": { "alias": "logoutLabel"; "required": false; }; }, { "itemClick": "itemClick"; "logout": "logout"; }, ["logoTpl", "footerTpl"], 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,40 +1,51 @@
 {
   "name": "@up_si_vale/sivale-componentes-angular",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
+    "@angular/common": ">=17.3.0 <22.0.0",
+    "@angular/core": ">=17.3.0 <22.0.0",
+    "@angular/forms": ">=17.3.0 <22.0.0",
+    "@angular/router": ">=17.3.0 <22.0.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"
-}
+  "sideEffects": [
+    "./elements/**/*.ts",
+    "./**/*.scss",
+    "./**/*.css"
+  ],
+  "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,11 +15,12 @@ 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/organisms/sidebar/sidebar-icon.component';
+export * from './lib/organisms/sidebar/sidebar.component';
 export * from './lib/molecules/option/option.component';
 export * from './lib/molecules/select/select.component';
 export * from './lib/molecules/multiselect/multiselect.component';
 export * from './lib/molecules/phone-input/phone-input.component';
 export * from './lib/molecules/copy-input/copy-input.component';
 export * from './lib/molecules/snackbar/snackbar.component';
+export * from './lib/molecules/alert/alert.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);
-    }
-  }
-}