ng-components-tsi 0.0.38 → 0.0.39

package/src/lib/ui/forms/sidebar/sidebar.component.ts

@@ -1,61 +0,0 @@
-import { Component, inject, input, signal } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { filter, fromEvent, map, startWith, throttleTime } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { NgClass } from '@angular/common';
-
-@Component({
-  selector: 'app-sidebar',
-  imports: [NgClass, RouterLink, RouterOutlet, RouterLinkActive],
-  templateUrl: './sidebar.component.html',
-  styleUrl: './sidebar.component.scss'
-})
-export class SidebarComponent {
-
-  private route = inject(ActivatedRoute)
-  private router = inject(Router)
-
-  showMenu = signal<boolean>(true)
-  lista = input<any[]>([])
-  titleMenu = input<string>('')
-  expandedWidth = input<string>('320px')
-
-  title = toSignal(
-    this.router.events.pipe(
-      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-      startWith(null),
-      map(() => {
-        let route = this.route
-        while (route.firstChild) route = route.firstChild
-        return route.snapshot?.data?.['title'] || ''
-      })
-    ),
-    { initialValue: '' }
-  )
-
-  constructor() {
-    if (typeof window != 'undefined') {
-      fromEvent(window, 'resize')
-        .pipe(throttleTime(200))
-        .subscribe(() => {
-          const isMediumScreen = window.innerWidth <= 1160 && window.innerWidth >= 700
-          this.showMenu.set(!isMediumScreen)
-        })
-      const initialCheck = window.innerWidth <= 1160 && window.innerWidth >= 700
-      this.showMenu.set(!initialCheck)
-    }
-  }
-  onMiddleClick(event: MouseEvent, ruta: string) {
-    if (event.button == 1 && ruta) {
-      event.preventDefault()
-      window.open(ruta, '_blank')
-    }
-  }
-
-  onRightClick(event: MouseEvent, ruta: string) {
-    if (ruta) {
-      event.preventDefault()
-      window.open(ruta, '_blank')
-    }
-  }
-}

package/src/lib/ui/general/detalle-credito/detalle-credito.component.html

@@ -1,35 +0,0 @@
-@let simbolo = data().simbolo || 'S/.';
-
-<div class="d-flex item-credito mt-2">
-  <div class="title-credito text-dark">Crédito:</div>
-  <div class="subtitle fw-bold" [ngClass]="data().credito ? 'text-success' : 'text-danger'">{{data().credito ? 'Abierto' : 'Cerrado'}}</div>
-</div>
-<div class="d-flex item-credito">
-  <div class="title-credito">Línea:</div>
-  <div class="subtitle">{{simbolo}} {{data().limitecredito ?? 0 | number:'1.2-2'}}</div>
-</div>
-
-<div class="d-flex item-credito">
-  <div class="title-credito">Utilizado:</div>
-  <div class="subtitle" (click)="data().saldo ? utilizado.emit() : null" [ngClass]="data().saldo ? 'cursor-pointer underline' : ''">{{simbolo}} {{ data().saldo ?? 0 | number:'1.2-2' }}</div>
-</div>
-
-<div class="d-flex item-credito">
-  <div class="title-credito">Por vencer:</div>
-  <div class="subtitle">{{simbolo}} {{ data().pendiente ?? 0 | number:'1.2-2' }}</div>
-</div>
-
-<div class="d-flex item-credito">
-  <div class="title-credito">Vencido:</div>
-  <div class="subtitle">{{simbolo}} {{ data().vencido ?? 0 | number:'1.2-2' }}</div>
-</div>
-
-<div class="d-flex item-credito">
-  <div class="title-credito">Disponible:</div>
-  <div class="subtitle">{{simbolo}} {{ data().disponible ?? 0 | number:'1.2-2' }}</div>
-</div>
-
-<div class="d-flex item-credito">
-  <div class="title-credito">Puntos:</div>
-  <div class="subtitle">{{ data().puntaje ?? 0 }}</div>
-</div>

package/src/lib/ui/general/detalle-credito/detalle-credito.component.scss

@@ -1,35 +0,0 @@
-.title-credito{
-    min-width: 130px;
-    width: 130px;
-    font-size: 18px;
-    font-weight: 600;
-}
-
-.subtitle{
-    font-size: 18px;
-    font-weight: 600;
-}
-
-.underline{
-    transition: all 0.3s ease-in-out;
-}
-.underline:hover{
-    text-decoration: underline;
-    transform: scale(1.05);
-    color: rgb(129, 129, 129);
-}
-
-@media (max-width: 380px) {
-            .item-credito{
-                padding-left: 5px;
-                padding-right: 5px;
-                flex-wrap: wrap;
-            }
-            .title-credito{
-                font-size: 16px !important;
-            }
-            .subtitle{
-                font-size: 15px !important;
-                font-weight: 600 !important;
-            }
-        }

package/src/lib/ui/general/detalle-credito/detalle-credito.component.ts

@@ -1,14 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { DecimalPipe, NgClass } from '@angular/common';
-import { DetalleCredito } from '../../../models/comercial/documentos-cab-auxiliares.model';
-
-@Component({
-  selector: 'app-detalle-credito',
-  imports: [NgClass,DecimalPipe],
-  templateUrl: './detalle-credito.component.html',
-  styleUrl: './detalle-credito.component.scss'
-})
-export class DetalleCreditoComponent {
-  data = input<DetalleCredito>({})
-  utilizado = output<void>()
-}

package/src/lib/ui/general/montos-calcular/montos-calcular.component.html

@@ -1,17 +0,0 @@
-<div class="container mt-2">
-    <div class="table-responsive-custom">
-        <table class="table total-table bg-dark">
-            <tbody>
-                @for (item of data(); track $index) {
-                <tr [style.font-size.px]="sizeFont() ?? null">
-                    <td>{{item.title}}</td>
-                    @if (withSimbolo()) {
-                        <td>{{item.simbolo ?? simbolo()}}</td>
-                    }
-                    <td>{{cleanNumber(item.value) | number:'1.2-2'}}</td>
-                </tr>
-                }
-            </tbody>
-        </table>
-    </div>
-</div>

package/src/lib/ui/general/montos-calcular/montos-calcular.component.scss

@@ -1,36 +0,0 @@
-.table-responsive-custom {
-            width: 100%;
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-        
-        .total-table {
-            font-size: 14px;
-            min-width: 280px;
-            width: 100%;
-        }
-        
-        .total-table tbody tr td {
-            padding: 0 10px;
-            border: none;
-            font-weight: 600;
-            text-align: right;
-            white-space: nowrap;
-        }
-        
-        @media (max-width: 380px) {
-            .container {
-                padding: 5px 0;
-                margin: 0;
-            }
-            
-            .total-table tbody tr td {
-                padding: 0 5px;
-                text-align: left;
-            }
-            .table-responsive-custom {
-                -webkit-overflow-scrolling: touch;
-                overflow-x: auto;
-                display: block;
-            }
-        }

package/src/lib/ui/general/montos-calcular/montos-calcular.component.ts

@@ -1,19 +0,0 @@
-import { Component, input, model } from '@angular/core';
-import { DecimalPipe } from '@angular/common';
-import { CalcularTotales } from '../../../models/comercial/documentos-cab-auxiliares.model';
-import { cleanNumber } from 'shared-tsi';
-
-@Component({
-  selector: 'app-montos-calcular',
-  imports: [DecimalPipe],
-  templateUrl: './montos-calcular.component.html',
-  styleUrl: './montos-calcular.component.scss'
-})
-export class MontosCalcularComponent {
-
-  data = input<CalcularTotales[]>([])
-  sizeFont = input<number>()
-  simbolo = model<string>('S/.')
-  cleanNumber = cleanNumber
-  withSimbolo = input<boolean>(true)
-}

package/src/lib/ui/general/spinner/spinner.component.html

@@ -1,8 +0,0 @@
-<div id="custom-spinner" class="spinner-overlay" hidden>
-    <div class="spinner-container">
-        <div class="spinner-border-wrapper">
-            <div class="spinner-border"></div>
-        </div>
-        <img src="../assets/images/logo-tsi-tres.png" class="spinner-img" />
-    </div>
-</div>

package/src/lib/ui/general/spinner/spinner.component.scss

@@ -1,96 +0,0 @@
-.spinner-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.85);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-    touch-action: none;
-    user-select: none;
-    pointer-events: auto;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-    }
-}
-
-.spinner-container {
-    position: relative;
-    width: 300px;
-    height: 300px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    animation: heartbeat 1.5s infinite ease-in-out;
-    user-select: none;
-}
-
-.spinner-border-wrapper {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    animation: heartbeat 1.5s infinite ease-in-out;
-}
-
-.spinner-border {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 10px dotted white;
-    animation: spin 5s linear infinite;
-    mask-image: conic-gradient(rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 1) 70%,
-            rgba(255, 255, 255, 0) 100%);
-    -webkit-mask-image: conic-gradient(rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 1) 70%,
-            rgba(255, 255, 255, 0) 100%);
-    pointer-events: none;
-}
-
-.spinner-img {
-    opacity: 0.85;
-    width: 200px;
-    height: auto;
-    position: relative;
-    z-index: 1;
-    animation: heartbeat 1.5s infinite ease-in-out;
-    user-select: none;
-    pointer-events: none;
-    -webkit-user-drag: none;
-}
-
-@keyframes heartbeat {
-
-    0%,
-    100% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.02);
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/src/lib/ui/general/spinner/spinner.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-spinner',
-  imports: [],
-  templateUrl: './spinner.component.html',
-  styleUrl: './spinner.component.scss'
-})
-export class SpinnerComponent {
-
-}

package/src/lib/ui/tables/card-mobile/card-mobile.component.html

@@ -1,34 +0,0 @@
-<cdk-virtual-scroll-viewport itemSize="120" [style.height]="altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''" >
-    <div class="row g-2 py-2">
-        <div *cdkVirtualFor="let item of data(); let i = index" class="col-12">
-            <div class="card shadow-sm">
-                <span class="pt-2 px-3 fw-bold fs-7">{{titleTabla() ?? ''}} {{getIdentifier(item)}}</span>
-                <div class="card-body py-1 my-0">
-                    @for (col of columns(); track $index) {
-                        @if (col.swmobile) {
-                            <div class="d-flex py-1">
-                                <strong class="fs-6 me-2 flex-shrink-0 text-truncate" style="min-width: 90px; max-width: 90px;">
-                                    {{ col.caption }}
-                                </strong>
-                                
-                                <span class="fs-6 fw-normal text-break text-wrap flex-grow-1">
-                                    {{ item._format?.[col.fieldname] ?? item[col.fieldname] }}
-                                </span>
-                                
-                            </div>
-                        }
-                    
-                    }
-                </div>
-                @if (actions()) {
-                <div class="pb-2 px-3 d-flex justify-content-between align-items-center">
-                    <app-badge label="Acciones:" color="bg-success"></app-badge>
-                    <div>
-                        <ng-container *ngTemplateOutlet="actions(); context: { $implicit: item }"></ng-container>
-                    </div>
-                </div>
-                }
-            </div>
-        </div>
-    </div>
-</cdk-virtual-scroll-viewport>

package/src/lib/ui/tables/card-mobile/card-mobile.component.ts

@@ -1,36 +0,0 @@
-import { Component, input, TemplateRef } from '@angular/core';
-import { BadgeComponent } from "../../alerts/badge/badge.component";
-import { NgTemplateOutlet } from '@angular/common';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { TableData } from '../../../models/table-data.model';
-import { CellRender, CellRendered } from '../../../models/cell-rendered';
-import { validaArray } from 'shared-tsi';
-
-@Component({
-  selector: 'app-card-mobile',
-  imports: [BadgeComponent, NgTemplateOutlet,ScrollingModule],
-  templateUrl: './card-mobile.component.html',
-  styleUrl: './card-mobile.component.scss'
-})
-export class CardMobileComponent {
-  data = input<any[]>([])
-  columns = input<TableData[]>([])
-  identifier = input<string[]>([])
-  titleTabla = input<string>('Contrato')
-  actions = input<TemplateRef<any>>(null)
-  altoContainer = input<number>()
-
-  rendered = input<CellRendered[]>([])
-
-  getIdentifier (row:any) {
-    if(!validaArray(this.identifier())) return ''
-    const join = this.identifier().map(k => row[k]).join(' ')
-    return `N° ${join}`;
-  }
-
-  resolveCell(col: string, row: any): CellRender | null {
-      const value = row[col]
-      const r = this.rendered().find(r => r.matches(col, value, row))
-      return r ? r.render(value, row) : null
-    }
-}

package/src/lib/ui/tables/dropdown-menu/dropdown-menu.component.html

@@ -1,59 +0,0 @@
-<div class="d-inline-block" ngbDropdown container="body">
-  @if (buttonProps()) {
-  <button [colorBtn]="buttonProps()?.color || null"
-    [colorOutlineBtn]="!buttonProps()?.color ? buttonProps()?.colorOutline : null" [disabled]="disabled()"
-    class="button-tilt-hover w-auto w-sm-100" [ngClass]="{
-      'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),
-      'pbp-6 wrap': !inputButton()
-    }" ngbDropdownToggle (mouseenter)="handleMainButtonMouseEnter()" (mouseleave)="handleMainButtonMouseLeave()">
-    <i [iconName]="buttonProps()?.icon" class="button-icon-hover"></i> {{ buttonProps()?.texto }}
-  </button>
-  } @else {
-  <button class="btn btn-sm border-0" ngbDropdownToggle (mouseenter)="handleMainButtonMouseEnter()"
-    (mouseleave)="handleMainButtonMouseLeave()" [disabled]="disabled()">
-    <i class="fas fa-align-left fs-6"></i>
-  </button>
-  }
-
-  <div ngbDropdownMenu class="my-0 py-0" (mouseenter)="!isMobile() && handleDropdownMouseEnter()"
-    (mouseleave)="!isMobile() && handleDropdownMouseLeave()">
-    @for (option of visibleOptions(); track $index) {
-    @if (isMobile() && option.submenu) {
-    @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {
-    <app-button [icon]="sub.icon" [texto]="sub.text" (accion)="!sub.upload && sub.action()" [uploadButton]="sub.upload"
-      [accept]="sub.accept" (fileSelected)="sub.fileAction && sub.fileAction($event)"
-      [tooltip]="getPropertyName(sub.property)" [extraClass]="
-    (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +
-    (isLastMobileItem(sub) ? 'border-bottom-radius' : '')
-  " [buttonDeshabilitado]="sub.property && !propiedades()[sub.property.key]" [dropdownButton]="true" />
-    }
-    }
-    @else if (!option.submenu || (option.submenu && !isMobile())) {
-    <div class="dropdown-item-with-submenu" ngbDropdown #submenuAnchor="ngbDropdown"
-      (mouseenter)="!isMobile() && submenuAnchor.open()">
-      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {
-      <app-button [icon]="option.icon" [texto]="option.text" (accion)="!option.upload && option.action()"
-        [uploadButton]="option.upload" [accept]="option.accept"
-        (fileSelected)="option.fileAction && option.fileAction($event)" [tooltip]="getPropertyName(option.property)"
-        [extraClass]="($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')"
-        [buttonDeshabilitado]="option.property && !propiedades()[option.property.key]" [dropdownButton]="true"
-        (mouseleave)="!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)">
-        @if (option.submenu && !isMobile()) {
-        <div ngbDropdownMenu placement="end" class="my-0 py-0 submenu-container" #submenuDiv
-          (mouseleave)="!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)">
-          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {
-          <app-button [icon]="sub.icon" [texto]="sub.text" (accion)="!sub.upload && sub.action()"
-            [uploadButton]="sub.upload" [accept]="sub.accept" (fileSelected)="sub.fileAction && sub.fileAction($event)"
-            [tooltip]="getPropertyName(sub.property)"
-            [extraClass]="($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')"
-            [buttonDeshabilitado]="sub.property && !propiedades()[sub.property.key]" [dropdownButton]="true" />
-          }
-        </div>
-        }
-      </app-button>
-      }
-    </div>
-    }
-    }
-  </div>
-</div>

package/src/lib/ui/tables/dropdown-menu/dropdown-menu.component.scss

@@ -1,88 +0,0 @@
-.dropdown-item-with-submenu {
-    position: relative;
-    transition: all 0.3s ease;
-}
-
-.submenu-container {
-    position: absolute;
-    left: 100%;
-    top: 0;
-    margin-top: 0 !important;
-    opacity: 0;
-    transform: translateY(-10px);
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    pointer-events: none;
-}
-
-.dropdown-item-with-submenu:hover .submenu-container,
-.dropdown-item-with-submenu:focus-within .submenu-container {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-}
-
-@keyframes tilt-bounce {
-
-    0%,
-    100% {
-        transform: rotate(0deg);
-    }
-
-    25% {
-        transform: rotate(-0.5deg);
-    }
-
-    75% {
-        transform: rotate(0.5deg);
-    }
-}
-
-@keyframes icon-rotate-pop {
-    0% {
-        transform: rotate(0deg) scale(1);
-    }
-
-    25% {
-        transform: rotate(10deg) scale(1.05);
-    }
-
-    50% {
-        transform: rotate(-10deg) scale(1.1);
-    }
-
-    75% {
-        transform: rotate(10deg) scale(1.05);
-    }
-
-    100% {
-        transform: rotate(0deg) scale(1);
-    }
-}
-
-.button-tilt-hover:hover {
-    animation: tilt-bounce 0.6s infinite ease-in-out;
-}
-
-.button-tilt-hover:hover .button-icon-hover {
-    animation: icon-rotate-pop 1s ease-in-out infinite;
-}
-
-.wrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@media (max-width: 575px) {
-    .d-inline-block {
-        display: block !important;
-    }
-}
-
-button.radius-none,
-.btn.radius-none {
-    border-radius: 0 !important;
-}
-
-.padd {
-    padding: 3px 8px !important;
-}