ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,54 +0,0 @@
-.menu-content {
-    position: relative;
-    display: inline-block;
-  }
-  
-  .toggle {
-    padding: 10px;
-    background-color: rgb(246, 246, 246);
-    color: black;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    margin: 0 10px;
-    
-  }
-
-  .toggle:focus {
-    outline: none;
-    box-shadow: none;
-  }
-  
-  .menu-desplegable {
-    position: absolute;
-    min-width: 200px;
-    border: 1px solid #ccc;
-    background: white;
-    border-radius: 4px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    z-index: 1500;
-    max-height: 200px;
-    overflow-y: auto;
-  }
-  
-  .menu-desplegable.top-left {
-    top: 100%;
-    left: 0;
-  }
-  
-  .menu-desplegable.top-right {
-    top: 100%;
-    right: 10px;
-  }
-  
-  .menu-desplegable.bottom-left {
-    bottom: 100%;
-    left: 0;
-  }
-  
-  .menu-desplegable.bottom-right {
-    bottom: 100%;
-    right: 0;
-  }
-
-  

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

@@ -1,36 +0,0 @@
-import { Component, ContentChild, input, output, signal, TemplateRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { fadeInOut } from '../../../directivas/animaciones/fade-animation';
-
-@Component({
-  selector: 'app-dropdown',
-  imports: [CommonModule],
-  templateUrl: './dropdown.component.html',
-  styleUrl: './dropdown.component.scss',
-  animations: [fadeInOut]
-})
-export class DropdownComponent {
-  @ContentChild('customActions', { static: false }) customActions!: TemplateRef<any>
-  
-  items = input<string[]>([])
-  selected = output<string>()
-  isOpen = signal<boolean>(false)
-
-  toggleDropdown() {
-    if (this.customActions) {
-      this.isOpen.set(!this.isOpen())
-    }
-  }
-
-  onDropdownClick(event: MouseEvent) {
-    const target = event.target as HTMLElement
-    if (!target.closest('.close-on-click')) {
-      this.isOpen.set(false)
-    }
-  }
-
-  selectItem(item: string) {
-    this.selected.emit(item)
-    this.isOpen.set(false)
-  }
-}

package/src/lib/ui/forms/button/button.component.html

@@ -1,69 +0,0 @@
-@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){
-<button atajoTecla #boton [altKeyCombination]="atajo()"
-    (emitirAtajo)="disabled() ? null : ( atajo() ? ejecutarAccion() : null)" [title]="construirAlt()"
-    (focus)="onFocus()" (blur)="onBlur()"
-    [style.--focus-color-rgb]="getFocusColor()"
-    [style.--focus-color]="'rgba(' + getFocusColor() + ',0.5)'"
-    class="{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}"
-    [ngClass]="outline() ? getColorClassOutline() : getColorClass() + (hasFocus() ? ' aura-focus' : '') " (click)="ejecutarAccion()" [disabled]="disabled()"
-    [id]="`id_button_${texto()}`">
-    <i [ngClass]="getIconClass()" class="button-icon-hover"></i>
-    @if(texto()){
-    <span [innerHTML]="isHtml() ? getSafeHtml() : texto()"></span>
-    }
-</button>
-}
-@if(sunatButton()){
-<button atajoTecla [altKeyCombination]="atajo()"
-    (emitirAtajo)="disabled() ? null : ( atajo() ? ejecutarAccion() : null)"
-    class="btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100"
-    [ngClass]="[outline() ? getColorClassOutline() : getColorClass()]" (click)="ejecutarAccion()"
-    [disabled]="disabled()">
-    <img src="../../../../../assets/images/Sunat.ico" class="button-icon-hover" height="16px" alt="Sunat"> {{texto() ?
-    texto() : 'Importar de SUNAT'}}
-</button>
-}
-
-@if(inputButton()){
-<button class="btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd"
-    [ngClass]="[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']"
-    (click)="ejecutarAccion()" [disabled]="disabled()">
-    <i [ngClass]="getIconClass()" class="button-icon-hover"></i>
-    @if(texto()){
-    <span>{{ texto() }}</span>
-    }
-</button>
-}
-
-@if(closeButton()){
-<button class="btn close fs-5 no-border" (click)="ejecutarAccion()" [disabled]="disabled()">
-    <i class="me-1 button-icon-hover text-dark fw-bold" [ngClass]="getIconClass()"></i>
-</button>
-}
-
-@if(dropdownButton()){
-<button class="dropdown-item fs-6" (click)="handleClick($event)" [disabled]="disabled()" [ngClass]="extraClass()"
-    [ngbTooltip]="tooltip()" [style.cursor]="shouldBlockClick() ? 'not-allowed' : 'pointer'" placement="right">
-    <i class="me-1" [ngClass]="getIconClass()"></i>
-    @if(texto()){
-    <span [innerHTML]="isHtml() ? getSafeHtml() : texto()"></span>
-    }
-    @if(uploadButton()){
-    <input type="file" #fileInput [accept]="accept()" (change)="handleFileInput($event)" [disabled]="disabled()"
-        class="d-none">
-    }
-</button>
-}
-
-@if(uploadButton() && !dropdownButton()){
-<button class="btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100"
-    [ngClass]="outline() ? getColorClassOutline() : getColorClass()" (click)="triggerFileInput()"
-    [disabled]="disabled()" [ngbTooltip]="tooltip()" type="button">
-    <i [ngClass]="getIconClass()" class="me-1 button-icon-hover"></i>
-    @if(texto()){
-    <span [innerHTML]="isHtml() ? getSafeHtml() : texto()"></span>
-    }
-    <input type="file" #fileInput [accept]="accept()" (change)="handleFileInput($event)" [disabled]="disabled()"
-        class="d-none">
-</button>
-}

package/src/lib/ui/forms/button/button.component.scss

@@ -1,126 +0,0 @@
-.no-border {
-    border: none !important;
-}
-
-.button-icon-hover {
-    display: inline-block;
-}
-
-.btn {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@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, aura-pulse 1.5s ease-out infinite;
-}
-
-.button-tilt-hover:hover .button-icon-hover {
-    animation: icon-rotate-pop 1s ease-in-out infinite;
-}
-
-.dropdown-item {
-    font-size: 12px !important;
-    padding: 7px 20px;
-    color: rgb(117, 117, 117);
-    transition: color .3s ease-in-out;
-}
-
-.dropdown-item:hover {
-    background: rgb(232, 232, 232);
-    color: rgb(34, 34, 34);
-}
-
-.tooltip-inner {
-    white-space: nowrap;
-    max-width: none !important;
-}
-
-:host ::ng-deep .tooltip-inner {
-    white-space: nowrap;
-    max-width: none !important;
-}
-
-.radius-none {
-    border-radius: 0;
-}
-
-.padd {
-    padding: 3px 8px !important;
-}
-
-.circle {
-    width: 40px !important;
-    height: 40px !important;
-    min-width: 40px !important;
-    min-height: 40px !important;
-    max-width: 40px !important;
-    max-height: 40px !important;
-    border-radius: 100%;
-    color: white;
-    transition: box-shadow 0.3s ease;
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-
-}
-
-.circle:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-@keyframes aura-pulse {
-  0% {
-    box-shadow: 0 0 0 0 var(--focus-color, rgba(0,123,255,0.5));
-  }
-  50% {
-    box-shadow: 0 0 0 6px rgba(var(--focus-color-rgb, 0,123,255), 0.2);
-  }
-  100% {
-    box-shadow: 0 0 0 0 var(--focus-color, rgba(0,123,255,0));
-  }
-}
-
-.aura-focus {
-  animation: aura-pulse 1.5s ease-out infinite;
-  outline: none !important;
-}

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

@@ -1,137 +0,0 @@
-import { Component, computed, effect, ElementRef, inject, input, output, signal, viewChild, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { AtajosDirective } from '../../../directivas/acciones/atajos.directive';
-import { ColorType, IconType, OutlineType } from '../../../models/button-color.model';
-import { COLOR_CLASSES, ICON_CLASSES, OUTLINE_COLOR_CLASSES } from '../../../directivas/estilos/button.constants';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'app-button',
-  imports: [CommonModule, NgbTooltipModule, AtajosDirective],
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.scss'
-})
-export class ButtonComponent {
-
-  private sanitizer = inject(DomSanitizer)
-
-  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>
-
-  buttonNormal = viewChild<ElementRef<HTMLInputElement>>('boton')
-  autoFocus = input<boolean>(false)
-
-  color = input<ColorType>(undefined)
-  outline = input<OutlineType>(undefined)
-  icon = input<IconType>(undefined)
-  tooltip = input<string>('')
-
-  texto = input<string>('')
-  isHtml = input<boolean>(false)
-  closeButton = input<boolean>(false)
-  sunatButton = input<boolean>(false)
-  inputButton = input<boolean>(false)
-  buttonDeshabilitado = input<boolean>(false)
-  atajo = input<string>('')
-
-  dropdownButton = input<boolean>(false)
-  extraClass = input<string>('')
-
-  accion = output<void>()
-
-  disabled = input<boolean>(false)
-
-  uploadButton = input<boolean>(false)
-  accept = input<string>('*/*')
-  fileSelected = output<File>()
-
-  isRounded = input<boolean>(false)
-  isNotStyle = input<boolean>(false)
-
-
-  hasFocus = signal(false);
-
-  onFocus() {
-    this.hasFocus.set(true);
-  }
-
-  onBlur() {
-    this.hasFocus.set(false);
-  }
-
-  constructor() {
-    effect(() => {
-      if (this.buttonNormal() && this.autoFocus()) {
-        this.buttonNormal().nativeElement.focus()
-      }
-    })
-  }
-
-  getFocusColor(): string {
-    switch (this.color()) {
-      case 'rojo': return '255,0,0';
-      case 'azul': return '0,123,255';
-      case 'verde': return '0,200,0';
-      case 'plomo': return '128,128,128';
-      default: return '0,123,255';
-    }
-  }
-
-  getSafeHtml(): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(this.texto())
-  }
-
-  shouldBlockClick(): boolean {
-    return this.buttonDeshabilitado() == true
-  }
-
-  getColorClass(): string {
-    return this.color() ? COLOR_CLASSES[this.color()] || '' : ''
-  }
-
-  getColorClassOutline(): string {
-    return this.outline() ? OUTLINE_COLOR_CLASSES[this.outline()] || '' : ''
-  }
-
-  getIconClass(): string {
-    const iconClass = this.icon() ? `${ICON_CLASSES[this.icon()] || ''} ${!this.isRounded() ? 'me-1' : ''}` : ''
-    return iconClass ? `fa ${iconClass}` : ''
-  }
-
-  handleClick(event: MouseEvent): void {
-    if (this.shouldBlockClick()) {
-      event.stopPropagation()
-      event.preventDefault()
-      return
-    }
-
-    if (this.uploadButton()) {
-      event.stopPropagation()
-      this.triggerFileInput()
-    } else {
-      this.ejecutarAccion()
-    }
-  }
-
-  ejecutarAccion() {
-    this.accion.emit()
-  }
-
-  triggerFileInput(): void {
-    if (!this.disabled()) {
-      this.fileInput.nativeElement.click()
-    }
-  }
-
-  handleFileInput(event: Event): void {
-    const input = event.target as HTMLInputElement
-    if (input.files && input.files.length > 0) {
-      this.fileSelected.emit(input.files[0])
-      input.value = ''
-    }
-  }
-
-  construirAlt = () => {
-    return this.atajo() ? `${this.texto()}: Ctrl + ${this.atajo()}` : ""
-  }
-}

package/src/lib/ui/forms/filter-toggle/filter-toggle.component.scss

@@ -1,22 +0,0 @@
-.rotate-up {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
-}
-
-.icon-arrow {
-    transition: transform 0.3s ease;
-    margin-left: -12px;
-    font-size: 10px;
-}
-
-.disabled-icon {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.header-actions {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    gap: 0.5rem;
-}

package/src/lib/ui/forms/filter-toggle/filter-toggle.component.ts

@@ -1,29 +0,0 @@
-import { Component, input, model } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-filter-toggle',
-  imports: [CommonModule],
-  template: `
-    <div class="d-flex align-items-center cursor-pointer"
-         [ngClass]="{ 'disabled-icon': !hasData() }">
-      <i class="fa-solid fa-filter px-2 me-1" [class]="'fs-' + tamanio()"></i>
-      <i class="icon-arrow fa-solid fa-chevron-down"
-         [ngClass]="{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData() }"></i>
-    </div>
-  `,
-  styleUrl: './filter-toggle.component.scss'
-})
-
-export class FilterToggleComponent {
-
-  hasData = input<boolean>(false)
-  tamanio = input<string>('7')
-  withFiltro = model<boolean>(true)
-
-  toggleFiltro() {
-    if (this.hasData()) {
-      this.withFiltro.update(value => !value)
-    }
-  }
-}

package/src/lib/ui/forms/header/header.component.html

@@ -1,22 +0,0 @@
-<div class="d-flex justify-content-between position-relative flex-wrap"
-    [ngClass]="{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}">
-    <div (click)="toggleFiltro()" [ngClass]="{ 'cursor-pointer': !isModal() }" class="d-flex align-items-center mb-2">
-        <h5 class="fw-bold no-select" [ngClass]="['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']">
-            {{ title() }}
-        </h5>
-        @if(showFiltro()){
-        <div [ngClass]="{'pt-2': isModal()}">
-            <app-filter-toggle [hasData]="hasData()" [(withFiltro)]="withFiltro" />
-        </div>
-        }
-    </div>
-
-    <div class="header-actions">
-        @if (showAlerta()) {
-        <app-alerta [mensaje]="textAlerta()" [validateSalto]="validateSalto()" />
-        }
-        @if(isModal()){
-        <app-button icon="cerrar" [closeButton]="true" (accion)="cerrar()" />
-        }
-    </div>
-</div>

package/src/lib/ui/forms/header/header.component.scss

@@ -1,22 +0,0 @@
-.rotate-up {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
-}
-
-.icon-arrow {
-    transition: transform 0.3s ease;
-    margin-left: -12px;
-    font-size: 10px;
-}
-
-.disabled-icon {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.header-actions {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    gap: 0.5rem;
-}

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

@@ -1,40 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input, output, model } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
-import { AlertaComponent } from "../../alerts/alerta/alerta.component";
-import { FilterToggleComponent } from "../filter-toggle/filter-toggle.component";
-
-@Component({
-  selector: 'app-header',
-  imports: [CommonModule, ButtonComponent, AlertaComponent, FilterToggleComponent],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
-})
-
-export class HeaderComponent {
-
-  title = input<string>('')
-  tamanio = input<string>('7')
-
-  showFiltro = input<boolean>(true)
-  withFiltro = model<boolean>(true)
-
-  hasData = input<boolean>(false)
-
-  isModal = input<boolean>(false)
-  cerrarModal = output<void>()
-
-  showAlerta = input<boolean>(false)
-  textAlerta = input<string>('La consulta muestra los 100 primeros registros.')
-  validateSalto = input<boolean>(false)
-
-  toggleFiltro() {
-    if (this.hasData()) {
-      this.withFiltro.update(value => !value)
-    }
-  }
-
-  cerrar() {
-    this.cerrarModal.emit()
-  }
-}

package/src/lib/ui/forms/inputs/autocomplete/autocomplete.component.html

@@ -1,46 +0,0 @@
-@if (isVertical()) {
-<label for="{{'id_' + label()}}" [style.min-width]="wlabel() + 'px'"> {{label()}} @if (isRequired()) {<span
-    class="fw-bold text-danger">(*)</span>}</label>
-}
-<div class="d-flex align-items-center">
-  @if (!isVertical()) {
-  <label for="{{'id_' + label()}}" [style.min-width]="wlabel() + 'px'">{{label()}} @if (isRequired()) { <span
-      class="fw-bold text-danger">(*)</span>}</label>
-  }
-
-  <div class="autocomplete d-flex ">
-    @if(showId()){
-    <div class="content-1 me-1">
-      <input type="text" class="form-control show-input"
-        [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-        [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-        [style.--focus-transition]="customTransition()" [disabled]="disabled1()" [(ngModel)]="searchIdText"
-        (input)="onSearchById()" id="{{'id_' + label()}}" name="{{'id_' + label()}}" />
-    </div>
-    }
-
-    <div class="input-container content-2 me-2">
-      <input type="text" [(ngModel)]="searchText" class="form-select"
-        [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-        [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-        [style.--focus-transition]="customTransition()" [disabled]="disabled2()" (input)="onSearch()"
-        (blur)="showDropdown.set(false)" (click)="onClick()" (keydown)="onKeyDown($event)" />
-      <ul [class.show]="showDropdown()">
-        @for (item of filteredItems(); track $index) {
-        <li #autocompleteItem
-          [ngClass]="{'fw-bold': selectedItem()[keyCodigo()] == item[keyCodigo()], 'bg-primary text-white': highlightedIndex() == $index}"
-          (mousedown)="selectItem(item)">
-          @if (joinInfo()) {
-          {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}
-          } @else{
-          {{ item[keyDescri()] }}
-          }
-          @if (selectedItem()[keyCodigo()] == item[keyCodigo()]) {
-          <i class="far fa-check-circle fw-bold text-success cw-20"></i>
-          }
-        </li>
-        }
-      </ul>
-    </div>
-  </div>
-</div>

package/src/lib/ui/forms/inputs/autocomplete/autocomplete.component.scss

@@ -1,90 +0,0 @@
-.autocomplete {
-  position: relative;
-  width: 100%;
-}
-
-.autocomplete ul {
-  position: absolute;
-  width: 100%;
-  border: 1px solid #ccc;
-  background: white;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  top: 100%;
-  left: 0;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
-  z-index: 1000;
-  opacity: 0;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.autocomplete ul.show {
-  max-height: 250px;
-  overflow-y: auto;
-  opacity: 1;
-}
-
-.autocomplete li {
-  padding: 8px;
-  font-size: 0.7rem;
-  font-weight: 400;
-  color: rgb(53, 53, 53);
-  cursor: pointer;
-}
-
-.autocomplete li:hover {
-  background: #f0f0f0;
-}
-
-.dropdown-arrow {
-  position: absolute;
-  right: 15px;
-  font-size: 11px;
-  transition: transform 0.3s ease-in-out;
-  cursor: pointer;
-  user-select: none;
-}
-
-@media (max-width: 442px) {
-  .d-flex {
-    flex-direction: column !important;
-    align-items: stretch !important;
-  }
-}
-
-.content-1 {
-  flex-basis: 23%;
-  display: flex;
-  align-items: center;
-}
-
-.content-2 {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-}
-
-.input-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 70%;
-}
-
-.show-input {
-  display: block;
-}
-
-@media (max-width: 443px) {
-  .show-input {
-    display: none;
-  }
-
-  .input-container {
-    width: 100%;
-    padding-right: 8px;
-  }
-}