ng-components-tsi 0.0.36 → 0.0.38

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-components-tsi",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,31 +1,23 @@
-{
-  "name": "ng-components-tsi",
-  "version": "0.0.36",
-  "peerDependencies": {
-    "shared-tsi": "^0.0.13",
-    "core-tsi": "^0.0.13",
-    "@angular/animations": "^19.2.6",
-    "@angular/cdk": "^19.2.6",
-    "sweetalert2": "^11.19.1",
-    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
-    "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.5",
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ng-components-tsi.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ng-components-tsi.mjs"
-    }
-  }
-}
+{
+  "name": "ng-components-tsi",
+  "version": "0.0.38",
+  "peerDependencies": {
+    "shared-tsi": "^0.0.13",
+    "core-tsi": "^0.0.13",
+    "@angular/animations": "^19.2.6",
+    "@angular/cdk": "^19.2.6",
+    "sweetalert2": "^11.19.1",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.5",
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "release:lib": "npm version patch && ng build ng-components-tsi && npm publish --prefix dist/ng-components-tsi"
+  }
+}

package/src/lib/directivas/acciones/atajos.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, HostListener, input, output } from '@angular/core';
+
+@Directive({
+  selector: '[atajoTecla]'
+})
+export class AtajosDirective {
+
+  altKeyCombination = input<string>('')
+  emitirAtajo = output<void>()
+
+  @HostListener('window:keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+
+    const key = event.key?.toLowerCase?.();
+    if (!key) return;
+
+    if (event.ctrlKey &&
+        !event.altKey && 
+        !event.metaKey && 
+        !event.shiftKey && 
+        key === this.altKeyCombination().toLowerCase()) {
+      event.preventDefault();
+      this.emitirAtajo.emit();
+    }
+  }
+}

package/src/lib/directivas/animaciones/fade-animation.ts

@@ -0,0 +1,45 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+
+
+export const fadeInOut = trigger('fadeInOut', [
+    transition(':enter', [
+      style({ opacity: 0, transform: 'translateY(-5px)' }),
+      animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+    transition(':leave', [
+      animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-5px)' })),
+    ]),
+  ]);
+
+
+export const dropdownAnimation = trigger('dropdownAnimation', [
+    transition(':enter', [
+      style({ height: '0', opacity: 0, transform: 'translateY(-10px)', overflow: 'hidden' }),
+      animate(
+        '200ms ease-out',
+        style({ height: '*', opacity: 1, transform: 'translateY(0)' })
+      ),
+    ]),
+    transition(':leave', [
+      animate(
+        '200ms ease-in',
+        style({ height: '0', opacity: 0, transform: 'translateY(-10px)' })
+      ),
+    ]),
+  ]);
+
+export const dropdownAnimationV2 = trigger('dropdownAnimation', [
+    state('cerrado', style({
+    height: '0px',
+    opacity: 0,
+    transform: 'translateY(-10px)',
+    overflow: 'hidden',
+  })),
+  state('abierto', style({
+    height: '*',
+    opacity: 1,
+    transform: 'translateY(0)',
+    overflow: 'hidden',
+  })),
+  transition('cerrado <=> abierto', animate('300ms ease')),
+  ]);  

package/src/lib/directivas/animaciones/fade.directive.ts

@@ -0,0 +1,43 @@
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { Directive, ElementRef, inject, input, OnDestroy, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[fade]'
+})
+export class FadeDirective implements OnInit, OnDestroy{
+  
+  private elementRef = inject(ElementRef)
+  private builder = inject(AnimationBuilder)
+
+  fadeIn = input<boolean>(true)
+
+  private player: AnimationPlayer;
+
+  playAnimation(fadeIn: boolean){
+    const animation = fadeIn
+      ? [
+          style({ opacity: 0, transform: 'translateY(-5px)' }),
+          animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+        ]
+      : [
+          style({ opacity: 1, transform: 'translateY(0)' }),
+          animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-5px)' })),
+        ];
+
+    const factory = this.builder.build(animation);
+    this.player = factory.create(this.elementRef.nativeElement);
+    this.player.play();
+  }
+
+  ngOnInit(): void {
+    this.playAnimation(this.fadeIn());
+  }
+
+  ngOnDestroy(): void {
+    if (this.player) {
+      this.playAnimation(false);
+    }
+  }
+  
+
+}

package/src/lib/directivas/estilos/animated-checkbox.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: 'input[type=checkbox][animatedCheckbox]',
+  standalone: true
+})
+
+export class AnimatedCheckboxDirective {
+
+  @Input() cbClass: 'success' | 'danger' | 'warning' | 'info' | '' = '';
+
+  private el = inject(ElementRef<HTMLInputElement>);
+  private renderer = inject(Renderer2);
+
+  ngOnInit() {
+    const input = this.el.nativeElement;
+    const label = input.closest('label');
+    if (!label) return;
+
+    this.renderer.addClass(label, 'checkbox-animated');
+
+    if (this.cbClass) {
+      this.renderer.addClass(label, this.cbClass);
+    }
+  }
+}

package/src/lib/directivas/estilos/button.constants.ts

@@ -0,0 +1,66 @@
+export const COLOR_CLASSES = {
+    azul: 'btn-info',
+    rojo: 'btn-danger',
+    rojo_alerta: 'btn-danger-alert',
+    verde: 'btn-success',
+    negro: 'btn-dark',
+    amarillo: 'btn-warning',
+    gris: 'btn-secondary',
+    plomo: 'btn-dark bg-mid-button'
+}
+
+export const OUTLINE_COLOR_CLASSES = {
+    azul: 'btn-outline-info',
+    rojo: 'btn-outline-danger',
+    verde: 'btn-outline-success',
+    negro: 'btn-outline-dark',
+    amarillo: 'btn-outline-warning',
+    gris: 'btn-outline-secondary',
+}
+
+export const ICON_CLASSES = {
+    agregar: 'fa-plus',
+    buscar: 'fa-search',
+    guardar: 'fa-save',
+    nocancelar: 'fa-check-circle',
+    cancelar: 'fa-times-circle',
+    cancelar2: 'fa-times',
+    marcar: 'fa-file',
+    atras: 'fa-angle-double-left',
+    adelante: 'fa-angle-double-right',
+    eliminar: 'fa-trash-alt',
+    imprimir: 'fa-print',
+    subir: 'fa-upload',
+    bajar: 'fa-download',
+    ver: 'fa-eye',
+    comentario: 'fa-comment',
+    editar: 'fa-pencil-alt',
+    calcular: 'fa-calculator',
+    aprobar: 'fa-thumbs-up',
+    desaprobar: 'fa-thumbs-down',
+    check: 'fa-check',
+    excel: 'fa-file-excel',
+    pdf: 'fa-file-pdf',
+    refresh: 'fa-sync-alt',
+    cerrar: 'fa-times',
+    visar: 'fa-paper-plane',
+    anular: 'fa-ban',
+    trazabilidad: 'fa-copy',
+    correo: 'fa-envelope-open',
+    usuario: 'fa-user-alt',
+    enviarSunat: 'fa-location-arrow',
+    descargar: 'fa-download',
+    borrar: 'fa-eraser',
+    lista: 'fa-list',
+    monedas: 'fa-coins',
+    izquierda: 'fa-arrow-left',
+    derecha: 'fa-arrow-right',
+    caja: 'fas fa-folder-plus',
+    cerrar_caja: 'fas fa-rectangle-xmark',
+    abrir_caja: 'fas fa-box-open',
+    liquidar: 'fas fa-cash-register',
+    configuracion: 'fas fa-cog',
+    contrato: 'fas fa-file-contract',
+    bloquear: 'fas fa-lock',
+    desbloquear: 'fas fa-unlock'
+}

package/src/lib/directivas/estilos/buttons-modal.directive.ts

@@ -0,0 +1,36 @@
+import { Directive, ElementRef, inject, input, OnInit, Renderer2 } from '@angular/core';
+import { COLOR_CLASSES } from './button.constants';
+
+@Directive({
+  selector: '[colorBtn]',
+  standalone: true
+})
+export class ButtonsModalDirective implements OnInit {
+  color = input<'azul' | 'rojo' | 'verde' | 'negro' | 'amarillo' | 'gris' | 'plomo' | 'none' | string>('azul', { alias: 'colorBtn' })
+
+  private el = inject(ElementRef)
+  private renderer = inject(Renderer2)
+
+  ngOnInit(): void {
+    this.aplicarEstilos()
+  }
+
+  aplicarEstilos() {
+    const baseClasses = ['btn', 'btn-sm', 'py-2', 'px-4', 'btn-rounded', 'me-1']
+    baseClasses.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls))
+
+    if (this.color() === 'none') {
+      this.renderer.removeClass(this.el.nativeElement, 'py-2')
+      this.renderer.removeClass(this.el.nativeElement, 'px-4')
+      this.renderer.addClass(this.el.nativeElement, 'bg-none')
+      this.renderer.addClass(this.el.nativeElement, 'border-0')
+      this.renderer.addClass(this.el.nativeElement, 'fs-6')
+      this.renderer.addClass(this.el.nativeElement, 'fw-7')
+    } else {
+      const colorClass = COLOR_CLASSES[this.color()]
+      if (colorClass) {
+        this.renderer.addClass(this.el.nativeElement, colorClass)
+      }
+    }
+  }
+}

package/src/lib/directivas/estilos/buttons-outline-directive.ts

@@ -0,0 +1,27 @@
+import { Directive, ElementRef, inject, input, OnInit, Renderer2 } from '@angular/core';
+import { OUTLINE_COLOR_CLASSES } from './button.constants';
+
+@Directive({
+  selector: '[colorOutlineBtn]',
+  standalone: true
+})
+export class ButtonsOutlineDirective implements OnInit {
+  color = input<'azul' | 'rojo' | 'verde' | 'negro' | 'amarillo' | 'gris' | 'plomo' | string>('azul', { alias: 'colorOutlineBtn' })
+
+  private el = inject(ElementRef)
+  private renderer = inject(Renderer2)
+
+  ngOnInit(): void {
+    this.aplicarEstilos()
+  }
+
+  aplicarEstilos() {
+    const baseClasses = ['btn', 'btn-rounded', 'me-1', 'fs-8', 'px-3']
+    baseClasses.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls))
+
+    const colorClass = OUTLINE_COLOR_CLASSES[this.color()]
+    if (colorClass) {
+      this.renderer.addClass(this.el.nativeElement, colorClass)
+    }
+  }
+}

package/src/lib/directivas/estilos/icons.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, ElementRef, inject, input, OnInit, Renderer2 } from '@angular/core';
+import { ICON_CLASSES } from './button.constants';
+
+@Directive({
+  selector: '[iconName]',
+  standalone: true
+})
+export class IconsDirective implements OnInit {
+  name = input<keyof typeof ICON_CLASSES | string>('agregar', { alias: 'iconName' })
+
+  private elementRef = inject(ElementRef)
+  private renderer = inject(Renderer2)
+
+  ngOnInit(): void {
+    this.aplicarEstilo()
+  }
+
+  aplicarEstilo() {
+    this.renderer.addClass(this.elementRef.nativeElement, 'fa')
+
+    const iconClass = ICON_CLASSES[this.name()]
+    if (iconClass) {
+      this.renderer.addClass(this.elementRef.nativeElement, iconClass)
+    }
+  }
+}

package/src/lib/directivas/inputs/caracteres-codigo.directive.ts

@@ -0,0 +1,63 @@
+import { Directive, HostListener, inject, input } from '@angular/core';
+import { ToastService } from '../../service/toast.service';
+
+@Directive({
+    selector: '[caracteresCodigo]'
+})
+export class CaracteresCodigoDirective {
+
+    private regex: RegExp = /^[a-zA-Z0-9.\-/]*$/
+    private toast = inject(ToastService)
+
+    caracteresCodigo = input<boolean>(true)
+
+    @HostListener('keypress', ['$event'])
+    onKeyPress(event: KeyboardEvent): void {
+        if (!this.caracteresCodigo()) return
+        const allowedKeys = ['Delete', 'Backspace', 'Tab', 'Escape', 'Enter']
+        const isCtrlCombination =
+            event.ctrlKey && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())
+        if (allowedKeys.includes(event.key) || isCtrlCombination) {
+            return
+        }
+        if (!/^[a-zA-Z0-9.\-/]$/.test(event.key)) {
+            event.preventDefault()
+        }
+    }
+
+    @HostListener('input', ['$event'])
+    onInput(event: Event) {
+        if (!this.caracteresCodigo()) return
+        const input = event.target as HTMLInputElement
+        const originalValue = input.value
+
+        const newValue = originalValue.replace(/[^a-zA-Z0-9.\-/]/g, '')
+
+        if (originalValue != newValue) {
+            input.value = newValue
+            this.toast.warning('Advertencia',`Solo se permiten caracteres alfanuméricos, guion (-), punto (.) y slash (/)`)
+            input.dispatchEvent(new Event('input'))
+        }
+    }
+
+    @HostListener('paste', ['$event'])
+    onPaste(event: ClipboardEvent) {
+        if (!this.caracteresCodigo()) return
+        const clipboardData = event.clipboardData?.getData('text/plain') || ''
+        if (!this.regex.test(clipboardData)) {
+            event.preventDefault()
+            this.toast.warning('Advertencia', `Solo se permiten caracteres alfanuméricos, guion (-), punto (.) y slash (/)`)
+        }
+    }
+
+    @HostListener('drop', ['$event'])
+    onDrop(event: DragEvent) {
+        if (!this.caracteresCodigo()) return
+        const textData = event.dataTransfer?.getData('text') || ''
+        if (!this.regex.test(textData)) {
+            event.preventDefault()
+            this.toast.warning('Advertencia',`Solo se permiten caracteres alfanuméricos, guion (-), punto (.) y slash (/)`)
+        }
+    }
+
+}

package/src/lib/directivas/inputs/decimal.directive.ts

@@ -0,0 +1,51 @@
+import { DecimalPipe } from '@angular/common';
+import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';
+import { NgModel } from '@angular/forms';
+import { cleanNumber } from 'shared-tsi';
+
+@Directive({
+  selector: '[appDecimal]',
+  providers: [DecimalPipe]
+})
+export class DecimalDirective {
+
+  appDecimal = input<string>('1.2-2')
+
+  private elementRef = inject(ElementRef)
+  private decimalPipe = inject(DecimalPipe)
+  private ngModel = inject(NgModel)
+
+  private isFocused = false
+
+  ngAfterViewInit(): void {
+    queueMicrotask(() => {
+      this.formatValue()
+    })
+  }
+
+  @HostListener('blur')
+  onBlur(): void {
+    this.isFocused = false
+    this.formatValue()
+  }
+
+  // @HostListener('input', ['$event'])
+  // onInput(event: Event): void {
+  //   const input = event.target as HTMLInputElement
+  //   const rawValue = input.value
+    
+  //   const cleaned = rawValue.replace(/[^0-9.,-]/g, '')
+  //   const normalized = cleaned.replace(',', '.')
+  //   const parsed = parseFloat(normalized)
+
+  //   if (!isNaN(parsed)) {
+  //     this.ngModel.update.emit(parsed)
+  //   }
+  // }
+
+  private formatValue(): void {
+    const value = cleanNumber(this.ngModel.model)
+    const formatted = this.decimalPipe.transform(value, (this.appDecimal() ?? '1.2-2'))
+    this.elementRef.nativeElement.value = formatted !== null ? formatted : this.decimalPipe.transform(0, (this.appDecimal() ?? '1.2-2'))
+  }
+}

package/src/lib/directivas/inputs/only-day.directive.ts

@@ -0,0 +1,53 @@
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
+
+@Directive({
+  selector: '[onlyDay]'
+})
+export class OnlyDayDirective {
+  private elementRef = inject(ElementRef<HTMLInputElement>)
+
+  @HostListener('keypress', ['$event'])
+  onKeyPress(event: KeyboardEvent): void {
+    const inputChar = event.key
+
+    if (event.ctrlKey || event.metaKey || inputChar.length > 1) return
+
+    if (!/^[0-9]$/.test(inputChar)) {
+      event.preventDefault()
+      return
+    }
+
+    const input = this.elementRef.nativeElement
+    const currentValue = input.value
+    const start = input.selectionStart ?? currentValue.length
+    const end = input.selectionEnd ?? currentValue.length
+
+    const proposed = currentValue.substring(0, start) + inputChar + currentValue.substring(end)
+    const num = Number(proposed)
+
+    if (num < 1 || num > 31) {
+      event.preventDefault()
+    }
+  }
+
+  @HostListener('paste', ['$event'])
+  onPaste(event: ClipboardEvent): void {
+    const pasted = event.clipboardData?.getData('text') || ''
+
+    if (!/^\d+$/.test(pasted)) {
+      event.preventDefault()
+      return
+    }
+
+    const input = this.elementRef.nativeElement
+    const currentValue = input.value
+    const start = input.selectionStart ?? currentValue.length
+    const end = input.selectionEnd ?? currentValue.length
+
+    const proposed = currentValue.substring(0, start) + pasted + currentValue.substring(end)
+    const num = Number(proposed)
+    if (num < 1 || num > 31) {
+      event.preventDefault()
+    }
+  }
+}

package/src/lib/directivas/inputs/only-number-flex.directive.ts

@@ -0,0 +1,50 @@
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
+
+@Directive({
+  selector: '[onlyNumberFlex]'
+})
+export class OnlyNumberFlexDirective {
+
+  private elementRef = inject(ElementRef)
+  private regex = /^-?[\d.,]*$/;
+
+  @HostListener('keypress', ['$event'])
+  onKeyPress(event: KeyboardEvent): void {
+    const inputChar = event.key
+
+    if (event.ctrlKey || event.metaKey || inputChar.length > 1) return
+
+    const input = this.elementRef.nativeElement
+    const currentValue = input.value
+    const start = input.selectionStart ?? currentValue.length
+    const end = input.selectionEnd ?? currentValue.length
+
+    const proposed =
+      currentValue.substring(0, start) +
+      inputChar +
+      currentValue.substring(end)
+
+    if (!this.regex.test(proposed)) {
+      event.preventDefault()
+    }
+  }
+
+  @HostListener('paste', ['$event'])
+  onPaste(event: ClipboardEvent): void {
+    const pasted = event.clipboardData?.getData('text') || ''
+    const input = this.elementRef.nativeElement
+    const currentValue = input.value
+    const start = input.selectionStart ?? currentValue.length
+    const end = input.selectionEnd ?? currentValue.length
+
+    const proposed =
+      currentValue.substring(0, start) +
+      pasted +
+      currentValue.substring(end)
+
+    if (!this.regex.test(proposed)) {
+      event.preventDefault()
+    }
+  }
+
+}

package/src/lib/directivas/inputs/only-number.directive.ts

@@ -0,0 +1,53 @@
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
+
+@Directive({
+  selector: '[onlyNumber]'
+})
+export class OnlyNumberDirective {
+
+  private elementRef = inject(ElementRef)
+
+  @HostListener('keypress', ['$event'])
+  onKeyPress(event: KeyboardEvent): void {
+    const inputChar = event.key
+
+    if (event.ctrlKey || event.metaKey || inputChar.length > 1) return
+
+    const input = this.elementRef.nativeElement
+    const currentValue = input.value
+    const start = input.selectionStart ?? currentValue.length
+    const end = input.selectionEnd ?? currentValue.length
+
+    const proposed =
+      currentValue.substring(0, start) +
+      inputChar +
+      currentValue.substring(end)
+
+    const regex = /^-?\d*\.?\d*$/
+
+    if (!regex.test(proposed)) {
+      event.preventDefault()
+    }
+  }
+
+  @HostListener('paste', ['$event'])
+  onPaste(event: ClipboardEvent): void {
+    const pasted = event.clipboardData?.getData('text') || ''
+    const input = this.elementRef.nativeElement
+    const currentValue = input.value
+    const start = input.selectionStart ?? currentValue.length
+    const end = input.selectionEnd ?? currentValue.length
+
+    const proposed =
+      currentValue.substring(0, start) +
+      pasted +
+      currentValue.substring(end)
+
+    const regex = /^-?\d*\.?\d*$/
+
+    if (!regex.test(proposed)) {
+      event.preventDefault()
+    }
+  }
+
+}

package/src/lib/enums/table-events.ts

@@ -0,0 +1,5 @@
+export enum TABLE_EVENTS {
+  CLICK = 1,
+  DOUBLE_CLICK = 2,
+  RIGHT_CLICK = 3
+}