ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,203 +0,0 @@
-import { Component, effect, ElementRef, input, model, output, QueryList, signal, ViewChildren } from '@angular/core';
-import { NgClass } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
-
-@Component({
-  selector: 'app-autocomplete',
-  imports: [NgClass, FormsModule],
-  templateUrl: './autocomplete.component.html',
-  styleUrl: './autocomplete.component.scss',
-})
-
-export class AutocompleteComponent {
-
-  private searchByIdSubject = new Subject<string>()
-
-  @ViewChildren('autocompleteItem') autocompleteItems!: QueryList<ElementRef>
-
-  wlabel = input<number>(0)
-  label = input<string>('')
-  isRequired = input<boolean>(false)
-  lista = input<any[]>([])
-  filteredItems = signal<any[]>([])
-  searchText = model<string>('')
-  selectedItem = signal<any>({})
-  showDropdown = signal<boolean>(false)
-
-  keyCodigo = input<string>('')
-  keyDescri = input<string>('')
-
-  withTodos = input<boolean>(false)
-  valuecod = model<any>()
-  searchIdText = model<string>('')
-
-  disabled1 = model<boolean>()
-  disabled2 = model<boolean>()
-
-  isVertical = input<boolean>(false)
-  showId = input<boolean>(false)
-  highlightedIndex = signal<number>(-1)
-  joinInfo = input<boolean>(false)
-
-  changeInput = output<void>()
-
-  activeFocus = input<boolean>(true)
-
-  customBorderColor = input<string>('')
-  customBoxShadow = input<string>('')
-  customTransition = input<string>('')
-
-  constructor() {
-    this.searchByIdSubject.pipe(
-      debounceTime(300),
-      distinctUntilChanged()
-    ).subscribe(id => this.handleSearchById(id))
-    effect(() => {
-      const lista = this.lista()
-      const id = this.valuecod()
-
-      if (lista.length > 0) {
-        if (id == 'noption' || id == null || id == undefined || id == '') {
-          this.clearInputFields()
-          this.searchIdText.set('')
-        } else {
-          const item = lista.find(it => String(it[this.keyCodigo()]) == String(id))
-          if (item) {
-            this.updateFieldsForItem(item)
-          } else {
-            this.searchIdText.set(String(id))
-            this.searchText.set('')
-            this.selectedItem.set({})
-          }
-        }
-      }
-    })
-  }
-
-  onSearch() {
-    const searchTerm = this.searchText().trim()
-    if (searchTerm == '') {
-      this.filteredItems.set([...this.lista()])
-      if (this.joinInfo()) {
-        this.valuecod.set('noption')
-      }
-    } else {
-      const filtered = this.lista().filter(item => {
-        const matchesEntrada = item[this.keyDescri()].toLowerCase().includes(searchTerm.toLowerCase())
-
-        if (this.joinInfo()) {
-          const matchesSalida = String(item[this.keyCodigo()]).toLowerCase().includes(searchTerm.toLowerCase())
-          return matchesEntrada || matchesSalida
-        }
-
-        return matchesEntrada
-      })
-
-      this.filteredItems.set(filtered)
-
-      if (this.joinInfo() && filtered.length == 0) {
-        this.valuecod.set('noption')
-      }
-    }
-    this.highlightedIndex.set(-1)
-    this.showDropdown.set(this.filteredItems().length > 0)
-  }
-
-  onSearchById() {
-    this.searchByIdSubject.next(this.searchIdText().trim())
-  }
-
-  onClick() {
-    if (this.showDropdown()) {
-      this.showDropdown.set(false)
-    } else {
-      this.filteredItems.set([...this.lista()])
-      this.showDropdown.set(true)
-    }
-  }
-
-  selectItem(item: any) {
-    this.selectedItem.set(item)
-    this.valuecod.set(item[this.keyCodigo()])
-    this.updateFieldsForItem(item)
-    this.showDropdown.set(false)
-    this.emitirChange()
-  }
-
-  onKeyDown(event: KeyboardEvent) {
-    const items = this.filteredItems()
-    if (!items.length) return
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault()
-        this.highlightedIndex.update(i => (i + 1) % items.length)
-        this.scrollToItem(this.highlightedIndex())
-        break
-      case 'ArrowUp':
-        event.preventDefault()
-        this.highlightedIndex.update(i => (i - 1 + items.length) % items.length)
-        this.scrollToItem(this.highlightedIndex())
-        break
-      case 'Enter':
-        event.preventDefault()
-        if (this.highlightedIndex() >= 0) {
-          this.selectItem(items[this.highlightedIndex()])
-        }
-        break
-    }
-  }
-
-  handleSearchById(id: string) {
-    if (id == '') {
-      this.clearInputFields()
-      this.valuecod.set('noption')
-      return
-    }
-
-    const itemExists = this.lista().some(it => String(it[this.keyCodigo()]) == id)
-
-    if (!itemExists) {
-      this.valuecod.set('noption')
-      this.searchIdText.set(id)
-      this.searchText.set('')
-      this.selectedItem.set({})
-      return
-    }
-
-    this.valuecod.set(id)
-    const item = this.lista().find(it => String(it[this.keyCodigo()]) == id)
-    if (item) {
-      this.updateFieldsForItem(item)
-    } else {
-      this.searchIdText.set(id)
-      this.searchText.set('')
-      this.selectedItem.set({})
-    }
-  }
-
-  updateFieldsForItem(item: any) {
-    this.selectedItem.set(item)
-    this.searchIdText.set(item[this.keyCodigo()])
-    this.searchText.set(
-      this.joinInfo()
-        ? `${item[this.keyCodigo()]} - ${item[this.keyDescri()]}`
-        : item[this.keyDescri()]
-    )
-  }
-
-  clearInputFields() {
-    this.searchText.set('')
-    this.selectedItem.set({})
-  }
-
-  scrollToItem(index: number) {
-    const itemElement = this.autocompleteItems?.toArray()[index]?.nativeElement
-    itemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-  }
-
-  emitirChange() {
-    this.changeInput.emit()
-  }
-}

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

@@ -1,61 +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(computedType()){
-    <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]="allDisabled() ? true : disabled1()"
-        [(ngModel)]="value" (blur)="blurKey()" id="{{'id_' + label()}}" name="{{'id_' + label()}}" />
-    </div>
-    }
-
-    <div class="input-container content-2 me-2">
-      <input type="text" [(ngModel)]="searchText" class="form-control pe-4" cdkOverlayOrigin
-        #autocomplete="cdkOverlayOrigin" #inputRef [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-        [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-        [style.--focus-transition]="customTransition()" [disabled]="allDisabled() ? true : disabled2()" (input)="null"
-        (blur)="showDropdown.set(false)" (focus)="showDropdown.set(true)" (keydown)="onKeyDown($event)" />
-      @if (searchText().length > 0) {
-      <button @fadeInOut type="button" class="btn-clear text-dark" (click)="clear(); inputRef.focus()">
-        &times;
-      </button>
-      }
-      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="autocomplete"
-        [cdkConnectedOverlayOpen]="showDropdown()" [cdkConnectedOverlayHasBackdrop]="true"
-        [cdkConnectedOverlayWidth]="withInput()" (backdropClick)="showDropdown.set(false)"
-        cdkConnectedOverlayPanelClass="autocomplete-overlay" cdkConnectedOverlayBackdropClass="transparent-backdrop">
-
-        <ul [style.maxHeight.px]="altoContainer()">
-          @for (item of filteredItems(); track $index) {
-          <li #autocompleteItem class="text-dark"
-            [ngClass]="{'fw-bold': item[keyCodigo()] == value(), 'bg-primary text-white': highlightedIndex() == $index}"
-            (mousedown)="selectItem(item)">
-            @if (joinInfo()) {
-            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}
-            } @else{
-            {{ item[keyDescri()] }}
-            }
-            @if (item[keyCodigo()] == value()) {
-            <i class="far fa-check-circle fw-bold text-success cw-20"></i>
-            }
-          </li>
-          }
-        </ul>
-      </ng-template>
-    </div>
-    @if (withCheckTodos()) {
-    <div class="px-2"> <app-check-box label="Todos" name="check_todos" [value]="true" [(binding)]="allDisabled"
-        (bindingChange)="value.set('');" /></div>
-    }
-  </div>
-</div>

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

@@ -1,128 +0,0 @@
-.autocomplete {
-  position: relative;
-  width: 100%;
-}
-
-ul {
-  width: 100%;
-  list-style: none;
-  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;
-}
-
-li {
-  padding: 8px;
-  font-size: 0.7rem;
-  font-weight: 400;
-  cursor: pointer;
-  opacity: 80%;
-}
-
-li:hover {
-  opacity: 100%;
-  background: #16161616;
-}
-
-// .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;
-  }
-}
-
-.btn-clear {
-  position: absolute;
-  right: 8px;
-  background: transparent;
-  border: none;
-  font-size: 1.3rem;
-  font-weight: 500;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-}

package/src/lib/ui/forms/inputs/autocomplete-cdk/autocomplete.component.ts

@@ -1,145 +0,0 @@
-import { Component, computed, effect, ElementRef, input, model, output, QueryList, signal, viewChild, ViewChildren } from '@angular/core';
-import { NgClass } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CheckBoxComponent } from "../check-box/check-box.component";
-import { fadeInOut } from '../../../../directivas/animaciones/fade-animation';
-
-@Component({
-  selector: 'app-autocomplete-v2',
-  imports: [NgClass, FormsModule, OverlayModule, CheckBoxComponent],
-  templateUrl: './autocomplete.component.html',
-  styleUrl: './autocomplete.component.scss',
-  animations:[fadeInOut]
-})
-
-export class AutocompleteV2Component {
-
-  @ViewChildren('autocompleteItem') autocompleteItems!: QueryList<ElementRef>
-  inputRef = viewChild<ElementRef>('inputRef')
-  withInput = signal<number>(null)
-
-  inputFocus = signal<boolean>(false)
-  wlabel = input<number>(0)
-  label = input<string>('')
-  isRequired = input<boolean>(false)
-  showDropdown = signal<boolean>(false)
-
-  keyCodigo = input<string>('')
-  keyDescri = input<string>('')
-
-  withTodos = input<boolean>(false)
-  searchIdText = model<string>('')
-
-  disabled1 = model<boolean>()
-  disabled2 = model<boolean>()
-
-  isVertical = input<boolean>(false)
-  highlightedIndex = signal<number>(-1)
-  joinInfo = input<boolean>(false)
-
-  changeInput = output<void>()
-  activeFocus = input<boolean>(true)
-  customBorderColor = input<string>('')
-  customBoxShadow = input<string>('')
-  customTransition = input<string>('')
-
-  // NUEVAS VARIABLES
-  lista = input<any[]>([])
-  filteredItems = computed(() => this.filterList(this.searchText())) 
-  type = input<'simple'| 'doble'>('simple')
-  computedType = computed(() => this.type() == 'doble')
-
-  value = model<any>(null)
-  searchText = model<string>('')
-  listaMap = computed(() => this.toKeyValue(this.lista(), this.keyCodigo(), this.keyDescri()))
-  withCheckTodos = input<boolean>(false)
-
-  allDisabled = model<boolean>()
-  altoContainer = input<number>(200)
-
-  private resizeObserver?: ResizeObserver;
-
-  constructor() {
-    effect(() => {
-      const map = this.listaMap()
-      if(Object.keys(map).length == 0) return;
-      this.blurKey()
-    })
-
-    effect(() => {
-      const el = this.inputRef()?.nativeElement;
-      if (!el) return;
-      this.resizeObserver?.disconnect();
-      this.resizeObserver = new ResizeObserver(() => {
-        this.withInput.set(el.offsetWidth);
-      });
-      this.resizeObserver.observe(el);
-      this.withInput.set(el.offsetWidth);
-    })
-  }
-
-  filterList (text: string) {
-    const searchTerm = text.trim().toLowerCase()
-    return this.lista().filter(item => item[this.keyDescri()].toLowerCase().includes(searchTerm))
-  }
-
-  selectItem(item: any) {
-    this.value.set(item[this.keyCodigo()])
-    this.searchText.set(item[this.keyDescri()])
-    this.showDropdown.set(false)
-  }
-
-  blurKey() {
-    this.searchText.set(this.listaMap()[this.value()] ?? '')
-  }
-
-  get descriSelected() {
-    return this.listaMap()[this.value()] ?? '';
-  }
-
-  toKeyValue<T extends Record<string, any>, K extends keyof T, V extends keyof T>(
-  arr: T[],
-  keyField: K,
-  valueField: V
-): Record<T[K] & (string | number), T[V]> {
-  return arr.reduce((acc, item) => {
-    acc[item[keyField]] = item[valueField];
-    return acc;
-  }, {} as Record<T[K] & (string | number), T[V]>);
-}
-  clear() {
-    if(this.allDisabled()) return;
-    this.searchText.set('')
-    this.value.set(null)
-  }
-
-  onKeyDown(event: KeyboardEvent) {
-    const items = this.filteredItems()
-    if (!items.length) return
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault()
-        this.highlightedIndex.update(i => (i + 1) % items.length)
-        this.scrollToItem(this.highlightedIndex())
-        break
-      case 'ArrowUp':
-        event.preventDefault()
-        this.highlightedIndex.update(i => (i - 1 + items.length) % items.length)
-        this.scrollToItem(this.highlightedIndex())
-        break
-      case 'Enter':
-        event.preventDefault()
-        if (this.highlightedIndex() >= 0) {
-          this.selectItem(items[this.highlightedIndex()])
-        }
-        break
-    }
-  }
-
-  scrollToItem(index: number) {
-    const itemElement = this.autocompleteItems?.toArray()[index]?.nativeElement
-    itemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-  }
-}

package/src/lib/ui/forms/inputs/check-box/check-box.component.html

@@ -1,6 +0,0 @@
-<label [ngClass]="class()" >
-    <input type="checkbox" animatedCheckbox [name]="name()" [id]="id()" [value]="value()" [(ngModel)]="binding" [disabled]="disabled()"
-    [checked]="checked()" (change)="changeCheck.emit($event)"
-    >
-    <span class="text-dark">{{ label() }}</span>
-</label>

package/src/lib/ui/forms/inputs/check-box/check-box.component.ts

@@ -1,24 +0,0 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { AnimatedCheckboxDirective } from '../../../../../lib/directivas/estilos/animated-checkbox.directive';
-
-@Component({
-  selector: 'app-check-box',
-  imports: [FormsModule,NgClass, AnimatedCheckboxDirective],
-  templateUrl: './check-box.component.html',
-  styles:``,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CheckBoxComponent {
-  name = input<string>()
-  id = input<string>()
-  label = input<string>()
-  value = input<any>()
-  disabled = input<boolean>(false)
-  binding = model<any>()
-  class = input<'success' | 'danger' | 'warning' | 'info' | ''>('')
-  checked = input<boolean>(false)
-  changeCheck = output<Event>()
-
-}

package/src/lib/ui/forms/inputs/doble-input/doble-input.component.html

@@ -1,60 +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="content-1 me-1">
-        <input type="text" class="form-control show-input"
-            (blur)="blur1()?.(); validaItem()" (keyup.enter)="enter1()?.()"
-            [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-            [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-            [style.--focus-transition]="customTransition()" [disabled]="disabled1()" [(ngModel)]="value"
-            id="{{'id_' + label()}}" name="{{'id_' + label()}}" [attr.maxlength]="maxLength()" (focus)="invalidInput.set(false)">
-        @if (withBuscar()) {
-        <button class="btn btn-dark boton-buscar fs-7" (click)="accion1.emit()">
-            <i class="fa fa-search"></i>
-        </button>
-        }
-    </div>
-
-    <div class="w-100">
-        <div class="content-2 position-relative me-2">
-        @if (tipoInput2() == 2) {
-        <select class="form-select" [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-            [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-            [style.--focus-transition]="customTransition()" [(ngModel)]="value" [disabled]="disabled2()"
-            id="{{'id_content' + label()}}" name="{{'id_content' + label()}}" (change)="emitirChange()" (focus)="invalidInput.set(false)">
-            @if (withTodos()) {
-            <option [value]="typeKey() == 'number' ? -1 : ''">Todos</option>
-            }
-            @for (item of lista(); track $index) {
-            <option [value]="item[keyCodigo()]"> {{ joinInfoReal() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :
-                item[keyDescri()]}}</option>
-            }
-        </select>
-        }
-        @if (tipoInput2() == 1) {
-        <input type="text" class="form-control" (blur)="blur2()?.()" (keyup.enter)="enter2()?.()" [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-            [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-            [style.--focus-transition]="customTransition()" [disabled]="disabled2()" id="{{'id_content' + label()}}"
-            [(ngModel)]="value2"
-            name="{{'id_content' + label()}}" [attr.maxlength]="maxLength()" (focus)="invalidInput.set(false)">
-        }
-        @if (withBuscar2()) {
-        <button class="btn btn-dark boton-buscar fs-7" (click)="accion2.emit()">
-            <i class="fa fa-search"></i>
-        </button>
-        }        
-        @if (invalidInput()) {
-        <div class="infoBox" @fadeInOut><i class="fas fa-exclamation-triangle fs-9 text-danger"></i> Ocurrió un
-            error: El campo es obligatorio, asegúrese de ingresar datos válidos.</div>
-        }
-
-    </div>
-    </div>
-    
-</div>