ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,39 +0,0 @@
-.modal-error {
-    background-color: #a6222f;
-    border-radius: 6px;
-}
-
-.button-error {
-    background-color: white;
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-    padding: 10px;
-}
-
-@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: #ffffff;
-}

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

@@ -1,27 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, computed, signal, inject } from '@angular/core';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { ButtonComponent } from '../../forms/button/button.component';
-
-@Component({
-  selector: 'app-alert-error',
-  imports: [CommonModule, ButtonComponent],
-  templateUrl: './alert-error.component.html',
-  styleUrl: './alert-error.component.scss'
-})
-
-export class AlertErrorComponent {
-
-  private activeModal = inject(NgbActiveModal)
-
-  mensaje = signal<string>('')
-
-  mensajeFormateado = computed(() =>
-    this.mensaje().replace(/\n/g, '<br>')
-  )
-
-  onAceptar(): void {
-    this.activeModal.close(true)
-  }
-}
-

package/src/lib/ui/alerts/alerta/alerta.component.html

@@ -1,18 +0,0 @@
-<div class="d-flex bg-title align-items-center flex-md-row {{classContainer()}}"
-    [ngClass]="{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}">
-    <i class="fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0" [style.fontSize.px]="iconSize()"></i>
-    <div class="text-alerta text-center text-sm-start ms-1" [class.text-hanging]="validateSalto()"
-    [style.paddingLeft.px]="validateSalto() ? paddingClass() : null" >
-        @if (titulo()) {
-        <strong class="alert-title">{{ titulo() }}</strong>
-        }
-        @if (!validateSalto()) {
-        {{ mensaje() }}
-        }
-
-        @if (validateSalto()) {
-        <span class="alert-message" [innerHTML]="mensajeFormateado()"></span>
-        }
-        <ng-content></ng-content>
-    </div>
-</div>

package/src/lib/ui/alerts/alerta/alerta.component.scss

@@ -1,104 +0,0 @@
-.bg-title {
-    position: relative;
-    background: #fff0d5;
-    display: inline-flex;
-    padding: 5px;
-    color: black;
-    font-weight: normal;
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.bg-title::after {
-    content: '';
-    position: absolute;
-    background: rgb(240, 173, 134);
-    top: 0;
-    left: 0;
-    animation: moveAround 4s linear infinite;
-}
-
-@keyframes moveAround {
-    0% {
-        top: 0;
-        left: 0;
-        width: 200px;
-        height: 2px;
-    }
-
-    25% {
-        top: 0;
-        left: calc(100% - 0px);
-        width: 2px;
-        height: 2px;
-    }
-
-    50% {
-        top: calc(100% - 2px);
-        left: calc(100% - 2px);
-        width: 200px;
-        height: 50px;
-    }
-
-    75% {
-        top: calc(100% - 2px);
-        left: 0;
-        width: 2px;
-        height: 50px;
-    }
-
-    100% {
-        top: 0;
-        left: 0;
-        width: 2px;
-        height: 2px;
-    }
-}
-
-.color-icon {
-    animation: metronomeSwing 1.5s infinite ease-in-out;
-    color: #855d16;
-}
-
-@keyframes metronomeSwing {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    25% {
-        transform: rotate(-15deg)
-    }
-
-    50% {
-        transform: rotate(15deg)
-    }
-
-    75% {
-        transform: rotate(-15deg)
-    }
-
-    100% {
-        transform: rotate(0deg)
-    }
-}
-
-.text-alerta {
-    font-size: 14px;
-}
-
-.text-hanging {
-    position: relative;
-    padding-left: 73px;
-}
-
-.text-hanging .alert-title {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.text-hanging .alert-message {
-    display: block;
-    white-space: pre-line;
-}

package/src/lib/ui/alerts/alerta/alerta.component.ts

@@ -1,25 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, computed, input } from '@angular/core';
-
-@Component({
-  selector: 'app-alerta',
-  imports: [NgClass],
-  templateUrl: './alerta.component.html',
-  styleUrl: './alerta.component.scss'
-})
-
-export class AlertaComponent {
-  titulo = input<string>('Atención:')
-  mensaje = input<string>('La consulta muestra los 100 primeros registros.')
-  iconSize = input<number>(25)
-  classContainer = input<string>('p-2')
-  paddingClass = input<number>(73)
-  validateSalto = input<boolean>(false)
-
-  mensajeFormateado = computed(() => {
-    if (!this.validateSalto()) {
-      return this.mensaje()
-    }
-    return this.mensaje().replace(/\n/g, '<br>')
-  })
-}

package/src/lib/ui/alerts/badge/badge.component.ts

@@ -1,16 +0,0 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@Component({
-  selector: 'app-badge',
-  imports: [NgClass],
-  template: `
-      <span class="badge text-dark font-weight-bold me-2" [ngClass]="color()" [style.fontSize.px]="size()"> {{ label() }} </span>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BadgeComponent {
-  label = input<string>('Exp');
-  color = input<string>('bg-warning');
-  size = input<number>(10.5);
-}

package/src/lib/ui/alerts/toaster/toaster.component.html

@@ -1,52 +0,0 @@
-<div class="toastr-container">
-    @for (toast of toastNormal; track toast.id) {
-
-    <div class="toast {{toast.type}}" [ngClass]="{'bg-white': toast.type == 'loading'}" [@toastAnimation]>
-
-        @if (toast.type == 'loading') {
-
-            <div class="toast-icon">
-                @if (toast.progress < 100) {
-                    <div class="spinner"></div>
-                }@else {
-                    <i class="fas fa-check checkmark"></i>
-                }
-                
-            </div>
-            <div class="toast-content">
-                <h4 class="toast-title text-dark">{{ toast.title }}</h4>
-                <p class="toast-message text-dark">{{ toast.message }}</p>
-            </div>
-        }@else {
-        <div class="toast-icon">
-            <i class="{{iconType[toast.type]}}"></i>
-        </div>
-        <div class="toast-content">
-            <h4 class="toast-title">{{ toast.title }}</h4>
-            <p class="toast-message">{{ toast.message }}</p>
-        </div>
-        <button class="toast-close" (click)="removeToast(toast.id)">×</button>
-        <div class="toast-loader"></div>
-        }
-
-
-    </div>
-    }
-</div>
-
-<div class="toastr-webpush shadow">
-    @for (toast of toastWebPush; track toast.id) {
-    <div class="toast-webpush {{toast.type}}" [@toastAnimation]>
-        <div class="toast-icon">
-            <img src="https://testing.grupotsiperu.com.pe:8844/assets/images/logo-tsi-tres.png" alt="">
-        </div>
-        <div class="toast-content-webpush">
-            <h4 class="toast-title">{{ toast.title }}</h4>
-            <p class="toast-message-webpush">{{ toast.message }}</p>
-            <p class="toast-subtitle">{{ toast.subtitle }}</p>
-        </div>
-        <button class="toast-close-webpush" (click)="removeToast(toast.id)">×</button>
-        <div class="toast-loader-webpush"></div>
-    </div>
-    }
-</div>

package/src/lib/ui/alerts/toaster/toaster.component.scss

@@ -1,275 +0,0 @@
-.toastr-container{
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    cursor: pointer;
-}
-
-.toast{
-    display: flex;
-    align-items: center;
-    width: 350px;
-    min-height: 35px;
-    border-radius: 4px;
-    margin-bottom: 10px;
-    overflow: hidden;
-    position: relative;
-    font-family: "Poppins", sans-serif;
-}
-
-.toast-icon i{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 25px !important;
-    height: 25px !important;
-    padding: 12px;
-    margin-left: 10px;
-    border-radius: 100%;
-    color: white;
-    animation: iconPopIn 1.5s ease-in-out infinite;
-    transform-origin: center;
-}
-
-.toast-content{
-    flex-grow: 1;
-    padding: 12px 8px 1px 8px;
-}
-
-.toast-title{
-    font-weight: 600;
-    margin-bottom: 3px;
-    font-size: 13px;
-}
-
-.toast-message{
-    font-size: 13px;
-    padding: 0 8px;
-}
-
-.toast-close{
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-weight: 600;
-    font-size: 22px !important;
-    cursor: pointer;
-    padding: 0;
-    color: inherit;
-    opacity: 0.7;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.toast-close:hover{
-    opacity: 1;
-} 
-    
-
-.success {
-    background-color:  #00c68e;
-    color:  white;
-}
-
-.error {
-    background-color:  #bd362f;
-    color:  white;
-}
-
-.info {
-    background-color:  #398bf7;
-    color:  white;
-}
-
-.warning {
-    background-color:  #ffa908;
-    color:  white;
-}
-
- .success .toast-loader {
-     background-color:  #00a879;
- }
-
-.error .toast-loader {
-    background-color:  #ffe4e3;
-}
-
-.info .toast-loader {
-    background-color:  #2796b4;
-}
-
-.warning .toast-loader {
-    background-color:  #eeeeeee8;
-}
-
-.toast-loader {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 4px;
-    animation: loader 3s linear;
-}
-
-@keyframes loader {
-    from {
-    width: 100%;
-    }
-
-   to {
-    width: 0%;
-    }
-}
-
-
-.toast-loader-webpush {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 4px;
-    animation: loader 10s linear;
-}
-
-.webpush .toast-loader-webpush {
-    background-color:  #c6c6c6;
-}
-
-.webpush {
-    background-color:#f8f8f8;
-    color:  black;
-}
-
-.toastr-webpush{
-    position: fixed;
-    bottom: 10px !important;
-    right: 10px;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    cursor: pointer;
-
-}
-
-.toast-webpush{
-    display: flex;
-    align-items: center;
-    width: 350px;
-    min-height: 120px;
-    border-radius: 4px;
-    margin-bottom: 0;
-    overflow: hidden;
-    position: relative;
-    font-family: "Poppins", sans-serif;
-}
-
-.toast-icon img{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 80px !important;
-    height: 80px !important;
-    padding: 12px;
-    margin-left: 10px;
-    border-radius: 100%;
-}
-
-.toast-content-webpush{
-    flex-grow: 1;
-    padding: 5px 8px 1px 8px;
-}
-
-.toast-message-webpush{
-    font-size: 11px;
-    color: gray;
-    margin-bottom: 8px;
-    padding-bottom: 0;
-}
-
-.toast-subtitle{
-    font-size: 10px;
-    color: rgb(160, 160, 160);
-    padding: 0;
-    margin: 0;
-}
-
-.toast-close-webpush{
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-weight: 600;
-    font-size: 22px !important;
-    cursor: pointer;
-    padding: 0;
-    color: inherit;
-    opacity: 0.3;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.toast-close-webpush:hover{
-    opacity: 1;
-}
-
-@media (max-width: 400px){
-    .toast, .toast-webpush{
-        width: 100%;
-    }
-    .toastr-container, .toastr-webpush{
-        left: 10px;
-        right: 25px;
-    }
-
-}
-
-@keyframes iconPopIn {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.9;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-
-.spinner {
-  width: 24px;
-  height: 24px;
-  border: 3px solid #ccc; /* color de fondo */
-  border-top: 3px solid #333; /* color del “giro” */
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-right: 10px; /* separa del texto */
-  margin-left: 10px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.checkmark {
-    width: 24px;
-  height: 24px;
-  color: green !important;
-  border-radius: 100%;
-  border: 1px solid green;
-  font-weight: bold;
-  margin-right: 10px; /* separa del texto */
-  margin-left: 10px;
-  display: inline-block;
-  vertical-align: middle;
-}

package/src/lib/ui/alerts/toaster/toaster.component.ts

@@ -1,50 +0,0 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, inject, input } from '@angular/core';
-import { ToastService } from '../../../service/toast.service';
-import { NgClass } from '@angular/common';
-@Component({
-  selector: 'app-toaster',
-  imports: [NgClass],
-  templateUrl: './toaster.component.html',
-  styleUrl: './toaster.component.scss',
-  animations: [
-    trigger('toastAnimation', [
-      transition(':enter', [
-        style({ transform: 'translateY(100%)', opacity: 0 }),
-        animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
-      ]),
-      transition(':leave', [
-        animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))
-      ])
-    ])
-  ]
-})
-export class ToasterComponent {
-
-  private toastService = inject(ToastService)
-
-  toasts = this.toastService.toasts
-
-  iconType = {
-    'success': 'fas fa-check bg-success',
-    'error': 'fas fa-times bg-danger',
-    'info': 'fas fa-info bg-info',
-    'warning': 'fas fa-exclamation-triangle bg-warning'
-  }
-
-  get toastNormal() {
-    return this.toasts().filter(toas => toas.type != 'webpush')
-  }
-
-  get toastWebPush() {
-    return this.toasts().filter(toas => toas.type == 'webpush')
-  }
-
-  get hasWebPush(): boolean {
-    return this.toasts().some(toast => toast.type == 'webpush')
-  }
-
-  removeToast(id: number) {
-    this.toastService.remove(id)
-  }
-}

package/src/lib/ui/dropdown/dropdown-cdk/dropdown-cdk.component.html

@@ -1,20 +0,0 @@
-<div class="w-100">
-
-    <div 
-    cdkOverlayOrigin
-    #dropdown="cdkOverlayOrigin"
-    (click)="show.set(true)"
-    [ngClass]="{'d-inline-block': inline()}">
-    <ng-container *ngTemplateOutlet="trigger()"></ng-container>
-  </div>
-
-    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="dropdown" [cdkConnectedOverlayOpen]="show()"
-        [cdkConnectedOverlayHasBackdrop]="true" (backdropClick)="show.set(false)"
-        cdkConnectedOverlayPanelClass="autocomplete-overlay" cdkConnectedOverlayBackdropClass="transparent-backdrop">
-
-        <div class="contenido" [style.maxHeight.px]="altoContainer()">
-            <ng-container *ngTemplateOutlet="content()"></ng-container>
-        </div>
-
-    </ng-template>
-</div>

package/src/lib/ui/dropdown/dropdown-cdk/dropdown-cdk.component.scss

@@ -1,11 +0,0 @@
-.contenido {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
-  border-radius: 0 0 8px 8px;
-  z-index: 9999;
-}

package/src/lib/ui/dropdown/dropdown-cdk/dropdown-cdk.component.ts

@@ -1,18 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
-import { Component, contentChild, input, signal, TemplateRef } from '@angular/core';
-
-@Component({
-  selector: 'app-dropdown-cdk',
-  imports: [OverlayModule, NgTemplateOutlet, NgClass],
-  templateUrl: './dropdown-cdk.component.html',
-  styleUrl: './dropdown-cdk.component.scss'
-})
-export class DropdownCdkComponent {
-
-  show = signal<boolean>(false)
-  trigger = contentChild<TemplateRef<any>>('trigger');
-  content = contentChild<TemplateRef<any>>('content');
-  inline = input<boolean>(false)
-  altoContainer = input<number>(200)
-}

package/src/lib/ui/dropdown/dropdown-simple/dropdown.component.html

@@ -1,10 +0,0 @@
-<div class="menu-content" (click)="toggleDropdown()">
-    <button class="toggle">
-      <i class="fa-solid fa-ellipsis-vertical"></i>
-    </button>
-        @if (isOpen()) {
-          <div class="menu-desplegable top-right" @fadeInOut (click)="onDropdownClick($event)">
-            <ng-container *ngTemplateOutlet="customActions; context: { $implicit: '' }"></ng-container>
-          </div>
-        }        
-  </div>