ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,171 +0,0 @@
-import { Component, ViewChildren, QueryList, ElementRef, inject, computed, signal, ViewChild, input, HostListener } from '@angular/core';
-import { NgbDropdownModule, NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
-import { CommonModule } from '@angular/common';
-import { IconsDirective } from '../../../directivas/estilos/icons.directive';
-import { ButtonsModalDirective } from '../../../directivas/estilos/buttons-modal.directive';
-import { ButtonsOutlineDirective } from '../../../directivas/estilos/buttons-outline-directive';
-import { ButtonComponent } from '../../forms/button/button.component';
-import { DropdownOption } from '../../../models/dropdownoption.model';
-import { ButtonProperties } from '../../../models/button-properties.model';
-import { SesionService } from 'core-tsi';
-import { PermisoObject } from 'shared-tsi';
-
-@Component({
-  selector: 'app-dropdown-menu',
-  imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective],
-  templateUrl: './dropdown-menu.component.html',
-  styleUrl: './dropdown-menu.component.scss'
-})
-
-export class DropdownMenuComponent {
-  private sesion = inject(SesionService)
-  @ViewChild(NgbDropdown) dropdown!: NgbDropdown
-  @ViewChildren('submenuAnchor') submenuAnchors!: QueryList<NgbDropdown>
-  @ViewChildren('submenuDiv') submenuDivs!: QueryList<ElementRef>
-
-  disabled = input<boolean>(false)
-  options = input<DropdownOption[]>([], { alias: 'options' });
-  buttonProperties = input<ButtonProperties | null>(null, { alias: 'buttonProperties' })
-  hoverTrigger = input<boolean>(false)
-
-  propiedades = signal(this.sesion.getSession().propiedades)
-  factores = signal(this.sesion.getSession().factores)
-
-  activeSubmenu = signal<{ [key: string]: boolean }>({})
-  inputButton = input<boolean>(false)
-
-  isMobile = signal<boolean>(window.innerWidth <= 768)
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    this.isMobile.set(event.target.innerWidth <= 768)
-  }
-
-  readonly visibleOptions = computed(() => {
-    const allOptions = this.options()
-    if (this.isMobile()) {
-      return allOptions.filter(opt =>
-        opt.condition !== false &&
-        (!opt.factor || this.factores()[opt.factor.key]) &&
-        (opt.action || opt.upload || opt.fileAction || opt.submenu)
-      )
-    }
-    return allOptions.filter(opt =>
-      opt.condition !== false &&
-      (!opt.factor || this.factores()[opt.factor.key])
-    )
-  })
-
-  readonly buttonProps = computed(() => this.buttonProperties())
-
-  readonly mobileFlatOptions = computed(() => {
-    if (!this.isMobile()) return []
-
-    const flat: any[] = []
-
-    this.visibleOptions().forEach(option => {
-      if (option.submenu) {
-        const subs = this.getVisibleSubmenuItems(option.submenu)
-        subs.forEach(sub => flat.push(sub))
-      } else {
-        flat.push(option)
-      }
-    })
-    return flat
-  })
-
-  isFirstMobileItem(item: any): boolean {
-    return this.mobileFlatOptions()[0] == item
-  }
-
-  isLastMobileItem(item: any): boolean {
-    const list = this.mobileFlatOptions()
-    return list[list.length - 1] == item
-  }
-
-  handleMainButtonMouseEnter() {
-    if (this.hoverTrigger()) {
-      this.dropdown.open()
-    }
-  }
-
-  handleMainButtonMouseLeave() {
-    if (this.hoverTrigger()) {
-      if (!this.isMouseOverDropdown()) {
-        this.closeAll()
-      }
-    }
-  }
-
-  handleDropdownMouseEnter() {
-    if (this.hoverTrigger()) {
-      this.keepOpen()
-    }
-  }
-
-  handleDropdownMouseLeave() {
-    if (this.hoverTrigger()) {
-      if (!this.isMouseOverButton()) {
-        this.closeAll()
-      }
-    }
-  }
-
-  private isMouseOverDropdown(): boolean {
-    const dropdownElement = document.querySelector('.dropdown-menu')
-    return dropdownElement?.contains(document.activeElement) || false
-  }
-
-  private isMouseOverButton(): boolean {
-    const buttonElement = document.querySelector('[ngbDropdownToggle]')
-    return buttonElement?.contains(document.activeElement) || false
-  }
-
-  private keepOpen() {
-    if (this.dropdown) {
-      this.dropdown.open()
-    }
-  }
-
-  private closeAll() {
-    if (this.dropdown) {
-      this.dropdown.close()
-    }
-    this.submenuAnchors.forEach(anchor => anchor.close())
-    this.activeSubmenu.set({})
-  }
-
-  mouseLeaveItem(dropdown: NgbDropdown, event: MouseEvent, optionText: string) {
-    const submenuElementRef = this.submenuDivs.find(elRef =>
-      this.visibleOptions().some(opt => opt.text == optionText && elRef.nativeElement.contains(event.relatedTarget))
-    )
-    if (!submenuElementRef) {
-      dropdown.close()
-      this.activeSubmenu.update(state => ({ ...state, [optionText]: false }))
-    }
-  }
-
-  mouseLeaveSubmenu(dropdown: NgbDropdown, event: MouseEvent, optionText: string) {
-    const parentElement = this.submenuAnchors.find(anchor =>
-      anchor.open && anchor['id'] == optionText
-    )
-    const relatedTarget = event.relatedTarget as HTMLElement | null
-    if (!parentElement || !relatedTarget || !parentElement['nativeElement'].contains(relatedTarget)) {
-      dropdown.close()
-      this.activeSubmenu.update(state => ({ ...state, [optionText]: false }))
-    }
-  }
-
-  getVisibleSubmenuItems(submenuItems: any[]) {
-    return submenuItems.filter(
-      sub => sub.condition !== false && (!sub.factor || this.factores()[sub.factor])
-    )
-  }
-
-  getPropertyName(key: PermisoObject) {
-    if (key) {
-      return key?.descri ?? ''
-    }
-    return null
-  }
-}

package/src/lib/ui/tables/paginador/paginador.component.html

@@ -1,12 +0,0 @@
-<div class="{{`d-flex justify-content-${position()} pe-3`}}">
-    <div class="contenedor d-flex justify-content-end align-items-center px-3 py-2 rounded-2 gap-1 bg-white">
-        <span class="fs-6 fw-6"> Mostrando {{ cantidadDatos() }}/{{ limit() }} </span>
-        <p class="bg-white px-3 py-1 my-0 mx-3 fs-7 rounded-2 fw-5" style="border: 1px solid rgb(222, 222, 222);"> {{contador()}} </p>
-        
-        @if (contador() > 1) {
-            <button @fadeInOut class="py-1 btn btn-sm shadow bg-white rounded-4 px-3" [disabled]="loading()" (click)="retroceder()"> <i iconName="izquierda"></i></button>
-        }
-        <button [disabled]="cantidadDatos() < limit() || loading()" (click)="avanzar()" class="py-1 btn btn-sm btn-dark shadow rounded-4 px-3" > <i iconName="derecha"></i></button>
-    </div>
-    
-</div>

package/src/lib/ui/tables/paginador/paginador.component.scss

@@ -1,27 +0,0 @@
-@media (max-width:330px) {
-    .contenedor {
-        display: block !important;
-        width: 100%;
-        text-align: center;
-
-        span {
-            display: inline-block !important;
-            width: 100% !important;
-            padding-bottom: 10px !important;
-        }
-
-        p {
-            display: block;
-        }
-
-        button {
-            margin-top: 6px;
-            margin: 6px 2px 0 2px;
-        }
-
-    }
-}
-
-.border-p {
-    border: 1px solid rgb(222, 222, 222);
-}

package/src/lib/ui/tables/paginador/paginador.component.ts

@@ -1,49 +0,0 @@
-import { Component, computed, input, model, signal } from '@angular/core';
-import { fadeInOut } from '../../../directivas/animaciones/fade-animation';
-import { IconsDirective } from '../../../directivas/estilos/icons.directive';
-
-@Component({
-  selector: 'app-paginador',
-  imports: [IconsDirective],
-  templateUrl: './paginador.component.html',
-  styleUrl: './paginador.component.scss',
-  animations:[fadeInOut]
-})
-export class PaginadorComponent {
-
-  total = input<number>(0)
-  limit = input<number>(100) // DEFECTO
-  position = input<'start'| 'center' | 'end'>('end')
-  loaddata = input<(params: { offset: number; limit: number }) => Promise<boolean>>()
-
-  page = model<number>(1)
-  contador = computed(() => this.page())
-  readonly offset = computed(() => (this.page() - 1) * this.limit());
-  readonly cantidadDatos = computed(() => Math.min(this.page() * this.limit(), this.total()));
-  readonly loading = signal(false);
-
-  async avanzar() {
-    if (this.loading()) return;
-    if (this.total() < this.limit()) return;
-    await this.tryChangePage(this.page() + 1);
-  }
-
-  async retroceder() {
-    if (this.loading() || this.page() <= 1) return;
-    await this.tryChangePage(this.page() - 1);
-  }
-
-  private async tryChangePage(newPage: number) {
-    const fn = this.loaddata();
-    if (!fn) return;
-    this.loading.set(true);
-    const params = { offset: (newPage - 1) * this.limit(), limit: this.limit() };
-    try {
-      const ok = await fn(params);
-      if (ok) this.page.set(newPage);
-    } catch {
-    } finally {
-      this.loading.set(false);
-    }
-  }
-}

package/src/lib/ui/tables/table-advance/table-advance.component.html

@@ -1,322 +0,0 @@
-@if (withFiltro()) {
-<div class="col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative">
-    <label for="" class="form-label me-2 pt-2">Buscar</label>
-    <input type="text" class="form-control cw-250" (input)="textoDigitado($event)">
-    <button (click)="togglePopoverFilter()" class="btn btn-dark boton-buscar fs-7">
-        <i class="fas fa-cog"></i>
-    </button>
-    @if (showPopoverFilter()) {
-    <div class="popover-menu-filter shadow" @dropdownAnimation>
-        <div class="popover-title fs-7">Filtros</div>
-        <div class="form-check form-switch text-start">
-            <input class="form-check-input" type="checkbox" [checked]="true" (change)="toggleFiltros($event)">
-            <label class="form-check-label">Todos</label>
-        </div>
-        @for (col of columns(); track col.caption) {
-        <div class="form-check form-switch text-start">
-            <input type="checkbox" class="form-check-input" id="{{ 'filter_' + col.caption }}"
-                [(ngModel)]="filtrarColumnas()[col.fieldname]" />
-            <label class="form-check-label" for="{{ 'filter_' + col.caption }}">
-                {{ col.caption }}
-            </label>
-        </div>
-        }
-    </div>
-    }
-</div>
-}
-
-<!---
-<div class="table-container table-responsive" #tableContainer
-    [style.max-height]="altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''"
-    (scroll)="onTableScroll($event)">
--->
-<div class="table-container table-responsive"
-    [style.height]="withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''"
-    [style.max-height]="altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''">
-    <div>
-        <!-- [style.height]="virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)" -->
-        <table #table class="table table-striped normal-table" [ngClass]="isDarkMode() ? 'table-dark' : ''">
-            <thead>
-                <tr class="shadow-sm">
-                    @if (withDetails()) {
-                    <th class="cw-20 b-table" [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''"></th>
-                    }
-
-                    @if (withCheckbox()) {
-                    <th class="cw-20 b-table" [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''">
-                        <input type="checkbox" class="form-check-input fs-8 border border-secondary"
-                            [checked]="validaAllCheck()" (change)="allCheck($event)">
-                    </th>
-                    }
-
-                    @if (customActions) {
-                    <th class="cw-40 b-table" [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''">
-
-                        <app-dropdown-cdk>
-                            <ng-template #trigger>
-                                <button class="btn p-0 text-dark d-flex mx-auto border-0">
-                                    <i class="fas fa-cog"></i>
-                                </button>
-                            </ng-template>
-                            <ng-template #content>
-                                <div class="popover-menu-column bg-white shadow" @dropdownAnimation>
-                                    <div class="popover-title fs-7 bg-white">Columnas</div>
-                                    @for (col of columns(); track col.caption) {
-                                    @if (col.caption) {
-                                    <div class="form-check form-switch text-start align-items-center d-flex">
-                                        <input type="checkbox" class="form-check-input py-0 my-0 cw-25 ch-15"
-                                            id="{{'switch_' + col.caption}}"
-                                            [(ngModel)]="visibilidadColumn()[col.caption]" />
-                                        <label class="form-check-label ps-1 fs-6 cursor-pointer font-label"
-                                            for="{{'switch_' + col.caption}}">{{ col.caption }}</label>
-                                    </div>
-                                    }
-                                    }
-                                </div>
-                            </ng-template>
-                        </app-dropdown-cdk>
-
-                        <!-- <button (click)="togglePopoverColumn()" class="btn p-0 text-dark d-flex mx-auto border-0">
-                            <i class="fas fa-cog"></i>
-                        </button>
-                        @if (showPopoverColumn()) {
-                        <div class="popover-menu-column shadow" @dropdownAnimation>
-                            <div class="popover-title fs-7">Columnas</div>
-                            @for (col of columns(); track col.caption) {
-                                @if (col.caption) {
-                                <div class="form-check form-switch text-start">
-                                    <input type="checkbox" class="form-check-input py-0 my-0 cw-25 ch-15"
-                                        id="{{'switch_' + col.caption}}" [(ngModel)]="visibilidadColumn()[col.caption]" />
-                                    <label class="form-check-label ps-1 fs-6 cursor-pointer font-label"
-                                        for="{{'switch_' + col.caption}}">{{ col.caption }}</label>
-                                </div>
-                                }
-                            }
-                        </div>
-                        } -->
-                    </th>
-                    }
-                    @for (column of columns(); track $index) {
-                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {
-                    <th class="b-table" #thElement [title]="column.caption"
-                        [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''">
-                        {{ column.caption }}
-                        @if(column.caption){
-                        @if (sortColumn == column.fieldname) {
-                        <span (click)="sortTable(column.fieldname)" class="cursor-pointer">
-                            <i [ngClass]="sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'"></i>
-                        </span>
-                        }
-                        @if (sortColumn !== column.fieldname) {
-                        <i class="fas fa-sort icon-sort cursor-pointer" (click)="sortTable(column.fieldname)"></i>
-                        }
-                        @if (column.tipoCaption === 'check-input') {
-                        <input type="checkbox" class="form-check-input fs-8 ms-2 border border-secondary"
-                            [checked]="areAllChecked(column.fieldname)"
-                            (change)="column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null">
-                        }
-                        }
-                    </th>
-                    }
-                    }
-                </tr>
-            </thead>
-            <!--
-            <tbody
-                [style.transform]="virtualScrollService.getTransform(visibleRange().start, itemHeight())"
-                [style.min-height]="itemHeight() * rowFilter().length + 'px'">
-                @for (row of visibleRows(); track $index) {
-                <tr [ngClass]="{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), 
-                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}"
-                    (click)="selectRow(identifier().length < 1 ? $index : row)"
-                    [id]="identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))">
-            -->
-            <tbody>
-                @for (row of rowFilter(); track $index) {
-                <tr [ngClass]="{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), 
-                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}"
-                    (click)="selectRow(identifier().length < 1 ? $index : row); onClick(row)"
-                    (dblclick)="onDoubleClick(row)" (contextmenu)="onRightClick($event,row)"
-                    [id]="identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))">
-                    @if (withDetails()) {
-                    <td class="b-table text-center mwp-25">
-                        <a (click)="toggleExpandRow($index)" class="text-dark cursor-pointer fs-6">
-                            <i class="fa-solid" [class.fa-chevron-right]="expandedRows != $index"
-                                [class.fa-chevron-down]="expandedRows == $index"></i>
-                        </a>
-                    </td>
-                    }
-
-                    @if (withCheckbox()) {
-                    <td scope="col" class="text-center b-table">
-                        <input type="checkbox" class="form-check-input fs-8 border border-secondary my-0 py-0"
-                            [checked]="isItemSelected($index)" (change)="toogleItem($index, $event)">
-                    </td>
-                    }
-
-                    @if (customActions) {
-                    <td class="text-center mwp-90 b-table">
-                        <ng-container *ngTemplateOutlet="customActions; context: { $implicit: row }"></ng-container>
-                    </td>
-                    }
-                    @for (column of columns(); track $index) {
-                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {
-
-                    @if (column.template) {
-                    <td class="b-table">
-                        <ng-container *ngTemplateOutlet="column.template; context: { $implicit: row, column: column }">
-                        </ng-container>
-                    </td>
-                    }
-                    @else {
-                    @switch (column.tipo) {
-                    @case ('fecha') {
-                    <td [innerHTML]="getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)"
-                        [title]="row[column.fieldname] | date:'dd/MM/yyyy'" [ngClass]="getRowClass(row)"
-                        class="text-center b-table">
-                    </td>
-                    }
-
-                    @case ('date') {
-                    <td [innerHTML]="getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)"
-                        [title]="row[column.fieldname] | date:'dd/MM/yyyy'" [ngClass]="getRowClass(row)"
-                        class="text-center b-table">
-                    </td>
-                    }
-
-                    @case ('situacion') {
-                    <td [innerHTML]="getHighlight(row[column.fieldname], column.fieldname)"
-                        [title]="row[column.fieldname]" [ngClass]="getRowClass(row)" class="b-table">
-                    </td>
-                    }
-
-                    @case ('decimal') {
-                    <td class="text-end b-table"
-                        [innerHTML]="getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)"
-                        [title]="(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)"
-                        [ngClass]="getRowClass(row)">
-                    </td>
-                    }
-
-                    @case ('number') {
-                    <td class="text-end b-table"
-                        [innerHTML]="getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)"
-                        [title]="(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)"
-                        [ngClass]="getRowClass(row)">
-                    </td>
-                    }
-
-                    @case ('text-center') {
-                    <td class="text-center b-table" [innerHTML]="getHighlight(row[column.fieldname], column.fieldname)"
-                        [title]="row[column.fieldname]" [ngClass]="getRowClass(row)">
-                    </td>
-                    }
-
-                    @case ('check') {
-                    <td class="text-center b-table" [title]="checkString[row[column.fieldname]]">
-                        <i class="fs-5"
-                            [ngClass]="row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'"></i>
-                    </td>
-                    }
-
-                    @case ('check-input') {
-                    <td class="text-center b-table">
-                        <input type="checkbox" class="form-check-input fs-8 border border-secondary"
-                            [checked]="row[column.fieldname] == 1 || row[column.fieldname] == 'S'"
-                            (change)="column.event ? clickCheck(column.fieldname,$event,row) : null">
-                    </td>
-                    }
-
-                    @case ('radio-input') {
-                    <td class="text-center b-table">
-                        @if (!column.condition || column.condition(row)) {
-                        <input type="radio" class="form-check-input fs-8 mtn-0 border border-secondary"
-                            name="radioGroup" (change)="column.event ? clickRadio(row) : null">
-                        }
-                    </td>
-                    }
-
-                    @case ('mostrar') {
-                    @if (column.condition()) {
-                    <td [innerHTML]="getHighlight(row[column.fieldname], column.fieldname)"
-                        [title]="row[column.fieldname]" class="b-table">
-                    </td>
-                    }
-                    }
-
-                    @case ('cell-render') {
-                    @let resolverItem = resolveCell(column.fieldname, row);
-                    @if (resolverItem) {
-                    <td class="b-table" [title]="resolverItem.text" [class.text-center]="resolverItem.icon">
-                        @if (resolverItem.icon) {
-                        <i class="fs-5" [ngClass]="resolverItem.icon"></i>
-                        } @else if (resolverItem.class) {
-                        <span [ngClass]="row.situac == 'J' ? 'text-error' : resolverItem.class">
-                            {{ resolverItem.text }}
-                        </span>
-                        } @else {
-                        {{ resolverItem.text }}
-                        }
-                    </td>
-                    }
-                    }
-
-                    @default {
-                    <td [innerHTML]="getHighlight(row[column.fieldname], column.fieldname)"
-                        [title]="row[column.fieldname]" [ngClass]="getRowClass(row)" class="b-table">
-                    </td>
-                    }
-                    }
-                    }
-                    }
-                    }
-                </tr>
-                @if ($index == expandedRows) {
-                <tr @fadeInOut>
-                    <td [attr.colspan]="columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)"
-                        class="table-blank">
-                        <div class="d-flex flex-column auditoria">
-                            <span class="fw-bold fs-7 text-dark">Datos de auditoría</span>
-                            <span class="fs-6 text-dark fw-bold">
-                                Creación: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{
-                                row.hcreac }}
-                            </span>
-                            <span class="fs-6 text-dark fw-bold">
-                                Actualización: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{
-                                row.hactua }}
-                            </span>
-                        </div>
-                    </td>
-                </tr>
-                }
-                }
-            </tbody>
-
-            @if (withTotal()) {
-            <tfoot>
-                <tr>
-                    @for (seg of getFooterSegments(); track $index) {
-                    @if (seg.type == 'colspan') {
-                    <td class="b-table text-start fw-bold" [attr.colspan]="seg.span">
-                        {{ $index == 0 ? 'Totales' : '' }}
-                    </td>
-                    } @else {
-                    <td class="b-table text-end fw-bold">
-                        @if (seg.type == 'total') {
-                        {{ getTotals(seg.field) | number:'1.2-2' }}
-                        }@else if (seg.type == 'averageSimple') {
-                        {{ getAverageSimple(seg.field) | number:'1.2-2' }}
-                        }
-                        @else if (seg.type == 'averagePonderado') {
-                        {{ getAveragePonderado(seg.field) | number:'1.2-2' }}
-                        }
-                    </td>
-                    }
-                    }
-                </tr>
-            </tfoot>
-            }
-        </table>
-    </div>
-</div>