ng-components-tsi 0.0.38 → 0.0.39

package/src/lib/service/alert-confirmation.service.ts

@@ -1,87 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { handleModalReturn } from '../utils/helpers/modal-result';
-
-
-export class AlertConfirmationConfig {
-    texto?: string;
-    showTextarea?: boolean;
-    select?: boolean;
-    opciones?: string[];
-    selectedOption?: string;
-    textareaValue?: string;
-    confirmar?: string;
-    mostrarConfirmar?: boolean;
-    cancelar?: string;
-    mostrarCancelar?: boolean;
-    mostrarExtra?: boolean;
-    extra?: string;
-    colorExtra?: string;
-    maxLength?: number;
-    focus?:boolean
-}
-
-@Injectable({
-    providedIn: 'root',
-})
-export class AlertConfirmationService {
-    private modalService = inject(NgbModal)
-
-    async open(config: AlertConfirmationConfig): Promise<NgbModalRef> {
-        const {AlertConfirmationComponent} = await import('../../lib/ui/alerts/alert-confirmation/alert-confirmation.component');
-        const modalRef = this.modalService.open(AlertConfirmationComponent, {
-            windowClass: 'modal-xs',
-            backdrop: 'static',
-            centered: true,
-        })
-
-        if (config.texto !== undefined) {
-            modalRef.componentInstance.texto.set(config.texto)
-        }
-        if (config.showTextarea !== undefined) {
-            modalRef.componentInstance.showTextarea.set(config.showTextarea)
-        }
-        if (config.select !== undefined) {
-            modalRef.componentInstance.select.set(config.select)
-        }
-        if (config.opciones !== undefined) {
-            modalRef.componentInstance.opciones.set(config.opciones)
-        }
-        if (config.selectedOption !== undefined) {
-            modalRef.componentInstance.selectedOption.set(config.selectedOption)
-        }
-        if (config.textareaValue !== undefined) {
-            modalRef.componentInstance.textareaValue.set(config.textareaValue)
-        }
-        if (config.confirmar !== undefined) {
-            modalRef.componentInstance.confirmar.set(config.confirmar)
-        }
-        if (config.mostrarConfirmar !== undefined) {
-            modalRef.componentInstance.mostrarConfirmar.set(config.mostrarConfirmar)
-        }
-        if (config.cancelar !== undefined) {
-            modalRef.componentInstance.cancelar.set(config.cancelar)
-        }
-        if (config.mostrarCancelar !== undefined) {
-            modalRef.componentInstance.mostrarCancelar.set(config.mostrarCancelar)
-        }
-        if (config.mostrarExtra !== undefined) {
-            modalRef.componentInstance.mostrarExtra.set(config.mostrarExtra)
-        }
-        if (config.extra !== undefined) {
-            modalRef.componentInstance.extra.set(config.extra)
-        }
-        if (config.colorExtra !== undefined) {
-            modalRef.componentInstance.colorExtra.set(config.colorExtra)
-        }
-        if (config.focus !== undefined) {
-            modalRef.componentInstance.focus.set(config.focus)
-        }
-        modalRef.componentInstance.maxLength.set(config.maxLength ?? 200)
-
-        return modalRef
-    }
-    async mostrarModalConfirmacion(config: AlertConfirmationConfig): Promise<any> {
-        return handleModalReturn(await this.open(config))
-    }
-}

package/src/lib/service/alert-error.service.ts

@@ -1,27 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { AlertErrorComponent } from '../ui/alerts/alert-error/alert-error.component';
-
-@Injectable({
-    providedIn: 'root',
-})
-
-export class AlertErrorService {
-
-    private modalService = inject(NgbModal)
-
-    open(mensaje: string): NgbModalRef {
-        const modalRef = this.modalService.open(AlertErrorComponent, {
-            windowClass: 'modal-xs',
-            backdrop: 'static',
-            centered: true,
-        })
-
-        modalRef.componentInstance.mensaje.set(mensaje)
-        return modalRef
-    }
-
-    mostrarModalError(mensaje: string): Promise<any> {
-        return this.open(mensaje).result
-    }
-}

package/src/lib/service/alert.service.ts

@@ -1,216 +0,0 @@
-import { Injectable } from '@angular/core';
-import { catchError, throwError } from 'rxjs';
-
-import Swal from "sweetalert2";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AlertService {
-
-  constructor() { }
-
-  showErrorAlert(msg: string): Promise<void> {
-    return Swal.fire({
-      html: msg,
-      icon: "error",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Aceptar",
-      focusConfirm:true
-    }).then(() => { })
-  }
-
-  showSuccessAlert(msg: string): Promise<void> {
-    return Swal.fire({
-      html: msg,
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Aceptar",
-      focusConfirm:true
-    }).then(() => { })
-  }
-
-  showWarningAlert(msg: string) {
-    Swal.fire({
-      text: msg,
-      icon: "warning",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Aceptar",
-      focusConfirm:true
-    })
-  }
-
-  openConfirmDialog(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      Swal.fire({
-        text: `¿Seguro de eliminar?`,
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#328ad9",
-        cancelButtonColor: "#ea0f0f",
-        confirmButtonText: "Aceptar",
-        focusConfirm:true
-      }).then((result) => {
-        if (result.isConfirmed) {
-          resolve(true);
-        } else {
-          resolve(false);
-        }
-      }).catch(err => reject(err));
-    });
-  }
-
-  openConfirmDialogFlex(params?: { titulo: string }): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      Swal.fire({
-        text: `${params.titulo}`,
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#328ad9",
-        cancelButtonColor: "#ea0f0f",
-        confirmButtonText: "Aceptar",
-        focusConfirm:true
-      }).then((result) => {
-        if (result.isConfirmed) {
-          resolve(true);
-        } else {
-          resolve(false);
-        }
-      }).catch(err => reject(err));
-    });
-  }
-
-  openConfirmDialogFlexHtml(params?: { content: string, type: any }): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      Swal.fire({
-        html: `${params.content}`,
-        icon: params.type,
-        showCancelButton: true,
-        confirmButtonColor: "#328ad9",
-        cancelButtonColor: "#ea0f0f",
-        confirmButtonText: "Aceptar",
-        focusConfirm:true
-      }).then((result) => {
-        if (result.isConfirmed) {
-          resolve(true);
-        } else {
-          resolve(false);
-        }
-      }).catch(err => reject(err));
-    });
-  }
-
-
-  openConfirmDialogFlexYesAndNoHtml(params?: { content: string, type: any, yes?: string, no?: string }): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      Swal.fire({
-        html: `${params.content}`,
-        icon: params.type,
-        showCancelButton: true,
-        confirmButtonColor: "#328ad9",
-        cancelButtonColor: "#ea0f0f",
-        focusConfirm:true,
-        confirmButtonText: params.yes ? params.yes : 'Si',
-        cancelButtonText: params.no ? params.no : 'No',
-        customClass: {
-          confirmButton: 'custom-button',
-          cancelButton: 'custom-button'
-        }
-      }).then((result) => {
-        if (result.isConfirmed) {
-          resolve(true);
-        } else {
-          resolve(false);
-        }
-      }).catch(err => reject(err));
-    });
-  }
-
-  dividirDialog(): Promise<number | null> {
-    return Swal.fire({
-      title: "Ingrese cantidad de registros",
-      input: "number",
-      inputPlaceholder: "Ingresar la cantidad entre 1 a 10",
-      showCancelButton: true,
-      confirmButtonText: 'Continuar',
-      cancelButtonText: 'Cancelar',
-      customClass: {
-        title: 'my-swal-title px-4 mx-4',
-        confirmButton: 'btn btn-success btn-rounded me-2 mt-2',
-        cancelButton: 'btn btn-warning btn-rounded mt-2'
-      },
-      buttonsStyling: false,
-      inputValidator: (value) => {
-        if (!value) {
-          return "Ingrese un número entre 1 y 10";
-        }
-        if (Number(value) > 10) {
-          return "El número debe ser 10 o menor!";
-        }
-        if (Number(value) < 1) {
-          return "El número debe ser 1 o mayor!";
-        }
-        return null;
-      }
-    }).then(result => {
-      if (result.isConfirmed) {
-        return Number(result.value);
-      } else {
-        return null;
-      }
-    });
-  }
-
-  alertaHTML(mensaje: string, tipoAlerta: any) {
-    Swal.fire({
-      html: mensaje,
-      icon: tipoAlerta,
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Aceptar",
-      focusConfirm:true
-    })
-  }
-
-  openConfirmDialogMultipleActions(params: {
-    content: string,
-    type: any,
-    confirm?: string,
-    deny?: string,
-    cancel?: string
-  }): Promise<'aceptar' | 'sunat' | 'manual' | 'cancelado'> {
-    return new Promise((resolve, reject) => {
-      Swal.fire({
-        html: params.content,
-        icon: params.type,
-        showCancelButton: true,
-        showDenyButton: true,
-        confirmButtonText: params.confirm ?? 'Aceptar',
-        denyButtonText: params.deny ?? '<img src="../../../../../assets/images/Sunat.ico" height="16px" width="16px" style="vertical-align: middle; margin-right: 5px;" alt=""> Importar desde SUNAT',
-        cancelButtonText: params.cancel ?? 'Registrar manual',
-        confirmButtonColor: '#328ad9',
-        denyButtonColor: '#b7b7b7',
-        cancelButtonColor: '#6c757d',
-        customClass: {
-          confirmButton: 'custom-button-2',
-          denyButton: 'custom-button-2',
-          cancelButton: 'custom-button-2'
-        }
-      }).then(result => {
-        if (result.isConfirmed) {
-          resolve('aceptar');
-        } else if (result.isDenied) {
-          resolve('sunat');
-        } else if (result.dismiss == Swal.DismissReason.cancel) {
-          resolve('manual');
-        } else {
-          resolve('cancelado');
-        }
-      }).catch(err => reject(err));
-    });
-  }
-
-  withErrorMessage = (msg: string) => catchError(err => {
-    this.showErrorAlert(`${msg} <br> ${err.error}`);
-    return throwError(() => err);
-  });
-}

package/src/lib/service/formateador.service.ts

@@ -1,49 +0,0 @@
-import { DatePipe, DecimalPipe } from '@angular/common';
-import { inject, Injectable } from '@angular/core';
-import { TableData } from '../models/table-data.model';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class FormateadorService {
-
-  private decimalPipe = inject(DecimalPipe)
-  private datePipe = inject(DatePipe)
-
-  private camposAuditoria = ['fcreac', 'factua'];
-
-  procesarLista(data: any[], columns: TableData[]) {
-    return data.map((item, index) => {
-
-      const nuevoItem = { ...item };
-      if (!('idListTsi' in nuevoItem)) {
-        nuevoItem.idListTsi = crypto.randomUUID?.() ?? index;
-      }
-
-      const formatted: any = {};
-
-      this.camposAuditoria.forEach(campo => {
-        if (campo in item) {
-          formatted[campo] = item[campo] ? this.datePipe.transform(item[campo], 'dd/MM/yyyy') : '';
-        }
-      });
-
-      columns.forEach(col => {
-        const field = col.fieldname;
-        if (item.hasOwnProperty(field)) {
-          if (col.tipo === 'decimal' || col.tipo === 'number') {
-            const valor = item[field] ?? 0;
-            formatted[field] = this.decimalPipe.transform(valor, `1.${col.decimales ?? 2}-${col.decimales ?? 2}`);
-          }
-
-          else if (col.tipo === 'fecha' || col.tipo === 'date') {
-            const valor = item[field];
-            formatted[field] = valor ? this.datePipe.transform(valor, 'dd/MM/yyyy') : '';
-          }
-        }
-      });
-
-      return {...nuevoItem, _format: formatted}
-    })
-  }
-}

package/src/lib/service/toast.service.ts

@@ -1,75 +0,0 @@
-import { computed, Injectable, signal } from '@angular/core';
-
-export interface Toast {
-  id: number,
-  title: string,
-  message: string,
-  subtitle?: string,
-  type: 'success' | 'error' | 'info' | 'warning' | 'webpush' | 'loading',
-  progress?: number;
-  autoClose?: boolean; 
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ToastService {
-
-  toasts = signal<Toast[]>([])
-  toastCount = computed(() => this.toasts().length)
-
-  private show(title: string, message: string, type: 'success' | 'error' | 'info' | 'warning' | 'webpush', subtitle?: string) {
-    const id = Date.now() * 1000 + Math.floor(Math.random() * 1000);
-    const toast: Toast = { id, title, message, type, subtitle }
-
-    this.toasts.update((prev) => [...prev, toast])
-    setTimeout(() => this.remove(id), type == 'webpush' ? 10000 : 3000)
-    return id
-  }
-
-  showLoading(message: string, subtitle?: string) {
-    const id = Date.now() * 1000 + Math.floor(Math.random() * 1000);
-    
-    const toast: Toast = { 
-      id, 
-      title: 'Procesando...', 
-      message, 
-      type: 'loading', 
-      subtitle, 
-      progress: 0,
-      autoClose: false
-    };
-    this.toasts.update(prev => [...prev, toast]);
-    return id;
-  }
-
-  updateProgress(id: number, progress: number, title:string = 'Reporte listo', message:string = 'Carga exitosa') {
-    this.toasts.update(prev =>
-      prev.map(t => t.id === id ? { ...t, progress, title, message } : t)
-    );
-  }
-
-  remove(id: number) {
-    this.toasts.update(prev => prev.filter(t => t.id !== id))
-  }
-
-  success(title: string, message: string) {
-    return this.show(title, message, 'success')
-  }
-
-  error(title: string, message: string) {
-    return this.show(title, message, 'error')
-  }
-
-  info(title: string, message: string) {
-    return this.show(title, message, 'info')
-  }
-
-  warning(title: string, message: string) {
-    return this.show(title, message, 'warning')
-  }
-
-  webpush(title: string, message: string, subtitle?: string) {
-    return this.show(title, message, 'webpush', subtitle)
-  }
-}

package/src/lib/ui/alerts/alert-confirmation/alert-confirmation.component.html

@@ -1,40 +0,0 @@
-<div class="p-4">
-    <div class="d-flex justify-content-center mb-3">
-        <i class="fas fa-exclamation-circle color-icon"></i>
-    </div>
-
-    <div class="fs-8 text-center" [innerHTML]="textoFormateado()"></div>
-
-    @if(select()){
-    <div class="d-flex align-items-center gap-2 mt-3">
-        <label class="form-label mb-0 nowrap">Motivo:</label>
-        <select class="form-select text-center" [value]="selectedOption()"
-            (change)="selectedOption.set($any($event.target).value)">
-            @for(opt of opciones(); track $index){
-            <option [value]="opt">{{ opt }}</option>
-            }
-        </select>
-    </div>
-    }
-
-    @if(showTextarea() && mostrarTextareaComputed()){
-    <textarea class="form-control mt-3 fs-6 ch-100" placeholder="Ingresar motivo..." [(ngModel)]="textareaValueModel"
-        (ngModelChange)="onTextareaChange($event)" [maxlength]="maxLength()">
-    </textarea>
-    <div class="character-counter" [class.color-caracter]="(maxLength() - (textareaValueModel?.length || 0)) < 10">
-        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}
-    </div>
-    }
-
-    <div class="d-flex justify-content-center gap-2 mt-3">
-        @if(mostrarConfirmar()){
-        <app-button [texto]="confirmar()" color="azul" (accion)="onConfirmar()" [isHtml]="true" [autoFocus]="focus()" />
-        }
-        @if(mostrarExtra()){
-        <app-button [texto]="extra()" [color]="colorExtra()" (accion)="onExtra()" [isHtml]="true" />
-        }
-        @if(mostrarCancelar()){
-        <app-button [texto]="cancelar()" color="rojo" (accion)="closeModal()" [isHtml]="true" [autoFocus]="!focus()" />
-        }
-    </div>
-</div>

package/src/lib/ui/alerts/alert-confirmation/alert-confirmation.component.scss

@@ -1,42 +0,0 @@
-@keyframes metronomeSwing {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    25% {
-        transform: rotate(-10deg)
-    }
-
-    50% {
-        transform: rotate(10deg)
-    }
-
-    75% {
-        transform: rotate(-10deg)
-    }
-
-    100% {
-        transform: rotate(0deg)
-    }
-}
-
-.color-icon {
-    animation: metronomeSwing 1.5s infinite ease-in-out;
-    font-size: 80px;
-    color: #e9a837;
-}
-
-.textarea-container {
-    position: relative;
-}
-
-.color-caracter {
-    color: #e9a837 !important;
-}
-
-.character-counter {
-    font-size: 0.8rem;
-    color: #666;
-    text-align: right;
-    margin-top: 0.25rem;
-}

package/src/lib/ui/alerts/alert-confirmation/alert-confirmation.component.ts

@@ -1,118 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, computed, signal, inject, input } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ButtonComponent } from '../../forms/button/button.component';
-import { ToastService } from '../../../service/toast.service';
-import { ColorType } from '../../../models/button-color.model';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'app-alert-confirmation',
-  imports: [CommonModule, FormsModule, ButtonComponent],
-  templateUrl: './alert-confirmation.component.html',
-  styleUrl: './alert-confirmation.component.scss'
-})
-export class AlertConfirmationComponent {
-
-  private activeModal = inject(NgbActiveModal)
-  private toast = inject(ToastService)
-
-  showTextarea = signal<boolean>(true)
-  texto = signal<string>('')
-  textoFormateado = computed(() => {
-    const texto = this.texto()
-    const matches = [...texto.matchAll(/[-]{5,}/g)]
-
-    if (matches.length == 0) {
-      return texto.replace(/\n/g, '<br>')
-    }
-
-    const lastMatch = matches[matches.length - 1]
-    const start = lastMatch.index!
-    const end = start + lastMatch[0].length
-
-    const textoSinUltimaLinea = texto.slice(0, start) + texto.slice(end)
-
-    return textoSinUltimaLinea
-      .replace(/\n/g, '<br>')
-      .replace(/[-]{5,}/g, '<hr class="my-2 custom-hr" />')
-  })
-  select = signal<boolean>(false)
-  opciones = signal<string[]>([])
-  selectedOption = signal<string>('')
-  textareaValue = signal<string>('')
-
-  confirmar = signal<string>('Aceptar')
-  mostrarConfirmar = signal<boolean>(true)
-
-  cancelar = signal<string>('Cancelar')
-  mostrarCancelar = signal<boolean>(true)
-
-  mostrarExtra = signal<boolean>(false)
-  extra = signal<string>('')
-  colorExtra = signal<ColorType>('azul')
-
-  maxLength = signal<number>(200)
-  
-  focus = signal<boolean>(true)
-
-
-  get textareaValueModel(): string {
-    return this.textareaValue()
-  }
-  set textareaValueModel(val: string) {
-    this.textareaValue.set(val)
-  }
-
-  mostrarTextareaComputed = computed(() => {
-    if (!this.select()) return true
-    const opts = this.opciones()
-    const sel = this.selectedOption()
-    return sel == opts[opts.length - 1]
-  })
-
-  ngOnInit(): void {
-    if (this.select()) {
-      if (this.opciones().length > 0) {
-        this.selectedOption.set(this.opciones()[0])
-      }
-    }
-  }
-
-  onTextareaChange(value: string): void {
-    this.textareaValue.set(value)
-  }
-
-  onConfirmar(): void {
-    const opts = this.opciones()
-    const selected = this.selectedOption()
-
-    if (this.select() && selected == opts[0]) {
-      this.toast.warning('Advertencia', 'Debe seleccionar una opción correcta.')
-      return
-    }
-
-    if (this.showTextarea() && this.mostrarTextareaComputed() && !this.textareaValue().trim()) {
-      this.toast.warning('Advertencia', 'Debe ingresar un motivo.')
-      return
-    }
-
-    if (!this.select()) {
-      this.activeModal.close(this.showTextarea() ? this.textareaValue().trim() : true)
-    } else {
-      if (this.showTextarea() && this.mostrarTextareaComputed()) {
-        this.activeModal.close(this.textareaValue().trim())
-      } else {
-        this.activeModal.close(selected)
-      }
-    }
-  }
-  
-  onExtra(): void {
-    this.activeModal.close('extra')
-  }
-
-  closeModal(): void {
-    this.activeModal.close()
-  }
-}

package/src/lib/ui/alerts/alert-error/alert-error.component.html

@@ -1,11 +0,0 @@
-<div class="pt-4 text-center modal-error">
-    <div class="d-flex justify-content-center mb-3">
-        <i class="fas fa-times-circle color-icon"></i>
-    </div>
-
-    <div class="fs-7 text-white fw-6" [innerHTML]="mensajeFormateado()"></div>
-
-    <div class="d-flex justify-content-center mt-4 button-error">
-        <app-button texto="Aceptar" color="rojo_alerta" (accion)="onAceptar()" [autoFocus]="true" />
-    </div>
-</div>