ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,41 +0,0 @@
-@for (input of inputs(); track $index) {
-<div class="{{ input.class }}">
-  @switch (input.modelo) { 
-    @case ('input-buscar') {
-  <!-- <app-doble-input-buscar
-    label="{{ input.label }}"
-    [(disabled)]="input.disabled"
-    [isRequired]="input.required"
-    [wlabel]="input.wlabel"
-    [maxLength]="input.maxlen"
-    [(valuecod)]="sender()[input.fieldname]"
-    [type]="input.buscar"
-    [oneinput]="true"
-    [withBuscar2]="true"
-    [joinInfo]="input.joinInfo"
-    [withBuscar]="true"
-    [viewInput]="input.viewInput"
-  /> -->
-  }
-  @default {
-    <app-input
-    label="{{ input.label }}"
-    [(disabled)]="input.disabled"
-    [isRequired]="input.required"
-    [wlabel]="input.wlabel"
-    [maxLength]="input.maxlen"
-    [(value)]="sender()[input.fieldname]"
-    [position]="input.position"
-    [type]="input.type"
-    [lista]="input.lista"
-    [keyCodigo]="input.keyCodigo"
-    [keyDescri]="input.keyDescri"
-    [withTodos]="input.withTodos"
-    [joinInfo]="input.joinInfo"
-  />
-  } 
-
-    }
-  
-</div>
-}

package/src/lib/ui/forms/inputs/input-dinamico/input-dinamico.component.ts

@@ -1,17 +0,0 @@
-import { Component, input, model } from '@angular/core';
-import { InputConfig } from '../../../../models/input-config';
-import { InputComponent } from "../input/input.component";
-
-@Component({
-  selector: 'app-input-dinamico',
-  imports: [InputComponent],
-  templateUrl: './input-dinamico.component.html',
-  styleUrl: './input-dinamico.component.scss'
-})
-export class InputDinamicoComponent {
-
-  inputs = input<InputConfig[]>([])
-  sender = model<any>()
-}
-
-

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

@@ -1,26 +0,0 @@
-<div class="d-flex" [attr.data-force]="onlyRow() ? 'true' : 'false'">
-    @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-{{position_row()}}">
-        @if (!isVertical()) {
-        <label for="{{'id_' + label()}}" [style.min-width]="wlabel() + 'px'"> {{label()}} @if (isRequired()) {<span
-                class="fw-bold text-danger">(*)</span>}</label>
-        }
-        <div class="flex-grow-1 me-2">
-            <div class="d-flex" [attr.data-force]="onlyRow() ? 'true' : 'false'"
-                [ngClass]="onlyRow() ? 'flex-row-force' : 'flex-' + position()">
-                @for (item of lista(); track $index) {
-                @switch (type()) {
-                @case ('radio') {
-                <app-radio [name]="name()" [label]="item[keyDescri()]" [disabled]="allDisabled()"
-                    [value]="item[keyCodigo()]" [id]="`radio_${item[keyCodigo()]}_${item[keyDescri()]}`"
-                    [(binding)]="value" />
-                }
-                }
-                }
-            </div>
-        </div>
-    </div>
-</div>

package/src/lib/ui/forms/inputs/input-radio/input-radio.component.scss

@@ -1,53 +0,0 @@
-.d-flex[data-force="true"] {
-    flex-direction: row !important;
-}
-
-@media (max-width: 442px) {
-    .d-flex[data-force="false"] {
-        flex-direction: column !important;
-        align-items: stretch !important;
-    }
-
-    .infoBox {
-        font-size: 12px;
-        padding: 8px 12px;
-        width: 100% !important;
-        max-width: 100% !important;
-    }
-}
-
-@media (max-width: 900px) {
-
-    .infoBox {
-        width: 250px !important;
-    }
-}
-
-.infoBox {
-    position: absolute;
-    width: 400px;
-    top: calc(100% + 10px);
-    left: 0;
-    right: 0;
-    margin-top: 2px;
-    background: rgba(190, 0, 0, 0.835);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
-    padding: 15px 12px;
-    font-size: 14px;
-    color: #dbdbdb;
-    z-index: 10;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.infoBox::before {
-    content: "";
-    position: absolute;
-    top: -10px;
-    left: 20px;
-    border-width: 0 8px 10px 8px;
-    border-style: solid;
-    border-color: transparent transparent rgba(190, 0, 0, 0.835) transparent;
-    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
-}

package/src/lib/ui/forms/inputs/input-radio/input-radio.component.ts

@@ -1,36 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component,input, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RadioComponent } from "../radio/radio.component";
-import { fadeInOut } from '../../../../directivas/animaciones/fade-animation';
-@Component({
-  selector: 'app-input-radio',
-  imports: [FormsModule, CommonModule, RadioComponent],
-  templateUrl: './input-radio.component.html',
-  styleUrl: './input-radio.component.scss',
-  animations: [fadeInOut]
-})
-export class InputRadioComponent {
-
-  wlabel = input<number>(0)
-  label = input<string>('')
-  isRequired = input<boolean>(false)
-  type = input<'check' | 'radio'>('check')
-  name = input<string>('')
-  position = input<'row' | 'column'>('row')
-  onlyRow = input<boolean>(false)
-  value = model<any>()
-  position_row = input<'center' | 'start' | 'end'>('center')
-  disabled = model<boolean>(false)
-
-  lista = input<any[]>([])
-  keyCodigo = input<string>('')
-  keyDescri = input<string>('')
-  allDisabled = model<boolean>(false)
-  isVertical = input<boolean>(false)
-  activeFocus = input<boolean>(true)
-  customBorderColor = input<string>('')
-  customBoxShadow = input<string>('')
-  customTransition = input<string>('')
-
-}

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

@@ -1,56 +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="multiselect 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()" [(ngModel)]="value" [disabled]="allDisabled()"
-        id="{{'id_' + label()}}" name="{{'id_' + label()}}" />
-    </div>
-    }
-
-    <div class="input-container content-2 me-2">
-      <input type="text" [value]="selectedItems"  class="form-control pe-4" cdkOverlayOrigin readonly
-        #autocomplete="cdkOverlayOrigin" #inputRef [attr.data-active-focus]="activeFocus() == false ? 'false' : ''"
-        [style.--focus-border-color]="customBorderColor()" [style.--focus-box-shadow]="customBoxShadow()"
-        [style.--focus-transition]="customTransition()" (input)="null"
-        (focus)="showDropdown.set(true);" [disabled]="allDisabled()" />
-      @if (selectedItems.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 lista(); track $index) {
-          <li>
-            <label class="checkbox-animated">
-              <input type="checkbox" [id]="item[keyCodigo()]" [checked]="selection.isSelected(item)" (change)="selection.toggle(item)">
-              <span class="text-dark">{{item[keyDescri()]}}</span>
-            </label>
-          </li>
-          }
-          <li>
-            <label class="checkbox-animated">
-              <input type="checkbox" [id]="-1" [checked]="allSelected" (change)="toogleAllSelection()">
-              <span class="text-dark">Todos</span>
-            </label>
-          </li>
-        </ul>
-      </ng-template>
-    </div>
-  </div>
-</div>

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

@@ -1,145 +0,0 @@
-.multiselect {
-  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;
-  color: rgb(53, 53, 53);
-  cursor: pointer;
-  opacity: 90%;
-  
-}
-
-li:hover {
-  opacity: 100%;
-  background: #1010100b;
-}
-
-@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%;
-}
-
-@media (max-width: 443px) {
-  .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;
-}
-
-.checkbox-animated {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  font-family: "Inter", sans-serif;
-  font-size: 15px;
-  color: #333;
-}
-
-.checkbox-animated input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  min-height: 18px;
-  min-width: 18px;
-  border: 2px solid #999;
-  border-radius: 6px;
-  background-color: white;
-  position: relative;
-  outline: none;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.checkbox-animated input[type="checkbox"]:hover {
-  border-color: #00cf00;
-  transform: scale(1.05);
-}
-
-.checkbox-animated input[type="checkbox"]:active {
-  transform: scale(0.9);
-}
-
-.checkbox-animated input[type="checkbox"]::after {
-  content: "";
-  position: absolute;
-  top: 1px;
-  left: 5px;
-  width: 5px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  opacity: 0;
-  transform: rotate(45deg) scale(0.5);
-  transition: all 0.3s ease;
-}
-
-.checkbox-animated input[type="checkbox"]:checked {
-  background-color: #0044ff;
-  border-color: #0044ff;
-  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
-  animation: pop 0.25s ease;
-}
-
-.checkbox-animated input[type="checkbox"]:checked::after {
-  opacity: 1;
-  transform: rotate(45deg) scale(1);
-}
-
-@keyframes pop {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.3); }
-  100% { transform: scale(1); }
-}

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

@@ -1,109 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { Component, computed, effect, ElementRef, input, model, signal, viewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { fadeInOut } from '../../../../directivas/animaciones/fade-animation';
-
-@Component({
-  selector: 'app-multiselected',
-  imports: [OverlayModule,FormsModule],
-  templateUrl: './multiselected.component.html',
-  styleUrl: './multiselected.component.scss',
-  animations:[fadeInOut]
-})
-export class MultiselectedComponent {
-
-  selection = new SelectionModel<any>(true, [])
-  
-  inputRef = viewChild<ElementRef>('inputRef')
-  withInput = signal<number>(null)
-
-  lista = input<any[]>([])
-  type = input<'simple'| 'doble'>('simple')
-  viewInput = input<'cod' | 'descri'>('descri')
-  computedKey = computed(() => this.viewInput() == 'cod' ? this.keyCodigo() : this.keyDescri())
-  computedType = computed(() => this.type() == 'doble')
-  withTodos = input<boolean>(true)
-  value = model<any>()
-
-  showDropdown = signal<boolean>(false)
-
-  keyCodigo = input<string>('')
-  keyDescri = input<string>('')
-  joinInfo = input<boolean>(false)
-  wlabel = input<number>(0)
-  label = input<string>('')
-  isRequired = input<boolean>(false)
-  isVertical = input<boolean>(false)
-  allDisabled = input<boolean>(false)
-  activeFocus = input<boolean>(true)
-  customBorderColor = input<string>('')
-  customBoxShadow = input<string>('')
-  customTransition = input<string>('')
-
-  selectionChanged = signal(0);
-
-  altoContainer = input<number>(200)
-  private resizeObserver?: ResizeObserver;
-
-  constructor(){
-    this.selection.changed.subscribe(() => {
-      this.selectionChanged.update(n => n + 1);
-    });
-
-    effect(() => {
-    this.selectionChanged();
-    const result = this.selection.selected
-      .sort((a, b) => a[this.keyCodigo()] - b[this.keyCodigo()])
-      .map(item => item[this.computedKey()]);
-      
-    const format = result.join(',');
-    this.value.set(format);
-  });
-
-    effect(() => {
-      if(!this.value()){
-        this.selection.clear()
-      }
-    })
-
-
-    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);
-    })
-
-  }
-
-  get allSelected():boolean {
-    return (!!this.lista().length && this.selection.selected.length === this.lista().length)
-  }
-
-  toogleAllSelection() {
-    if(this.allSelected){
-      this.selection.clear()
-      return
-    }
-    this.selection.select(...this.lista())
-  }
-
-  get selectedItems () {
-    return this.value() ?? ''
-  }
-
-  filterList (text: string) {
-    const searchTerm = text.trim().toLowerCase()
-    return this.lista().filter(item => item[this.keyDescri()].toLowerCase().includes(searchTerm))
-  }
-  clear() {
-    this.selection.clear()
-  }
-
-
-}

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

@@ -1,7 +0,0 @@
-<div class="form-check me-2">
-    <input class="form-check-input" type="radio" [name]="name()" [id]="id()" [value]="value()" [disabled]="disabled()"
-        (change)="handleChange()" [(ngModel)]="binding" >
-    <label class="form-check-label cursor-pointer" [for]="id()">
-        {{ label() }}
-    </label>
-</div>

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

@@ -1,23 +0,0 @@
-import { Component, input, model, output } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-radio',
-  imports: [FormsModule],
-  templateUrl: './radio.component.html',
-  styleUrl: './radio.component.scss'
-})
-export class RadioComponent {
-  name = input<string>()
-  id = input<string>()
-  label = input<string>()
-  value = input<any>()
-  binding = model<any>()
-  checked = input<boolean>(false)  
-  changed = output<any>()
-  disabled = input<boolean>(false)
-
-  handleChange() {
-    this.changed.emit(this.value())
-  }
-}

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

@@ -1,12 +0,0 @@
-<div class="form-check form-switch d-flex align-items-center">
-    <input class="form-check-input" type="checkbox" role="switch" [checked]="_checked" [ngClass]="currentColor()"
-        (change)="toggle($event)" id="switchControl">
-
-    <span class="switch-circle">
-        <i [class]="currentIcon()"></i>
-    </span>
-
-    <label class="label-toggle ms-2" for="switchControl">
-        {{ currentLabel() }}
-    </label>
-</div>

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

@@ -1,48 +0,0 @@
-.form-check {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    position: relative;
-    padding-left: 0;
-}
-
-.form-check-input {
-    width: 50px !important;
-    height: 25px !important;
-    border-radius: 1.5rem;
-    appearance: none;
-    outline: none;
-    cursor: pointer;
-    background-color: #e9ecef;
-    border: 1px solid #a0a0a0;
-    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-    position: relative;
-    margin: 0;
-}
-
-.switch-circle {
-    position: absolute;
-    top: 50%;
-    left: 3px;
-    transform: translateY(-50%);
-    width: 19px;
-    height: 19px;
-    background-color: #fff;
-    border: 1px solid #a0a0a0;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10px;
-    color: #000;
-    transition: left 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s, border-color 0.2s;
-    pointer-events: none;
-    z-index: 1;
-}
-
-.form-check-input:checked~.switch-circle {
-    left: 28px;
-    background-color: #000;
-    border-color: #000;
-    color: #fff;
-}

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

@@ -1,50 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, effect, input, model } from '@angular/core';
-
-@Component({
-  selector: 'app-switch',
-  imports: [CommonModule],
-  templateUrl: './switch.component.html',
-  styleUrl: './switch.component.scss'
-})
-export class SwitchComponent {
-
-  valueOn = input.required<any>()
-  valueOff = input.required<any>()
-
-  labelOn = input<string>('Activo')
-  labelOff = input<string>('Inactivo')
-
-  iconOn = input<string>('fas fa-check')
-  iconOff = input<string>('fas fa-times')
-
-  colorOn = input<string>('bg-success')
-  colorOff = input<string>('bg-danger')
-
-  model = model<any>()
-
-  _checked = false
-
-  constructor() {
-    effect(() => {
-      this._checked = this.model() === this.valueOn()
-    });
-  }
-
-  toggle(event: Event) {
-    const checkbox = event.target as HTMLInputElement
-    this.model.set(checkbox.checked ? this.valueOn() : this.valueOff())
-  }
-
-  currentLabel() {
-    return this._checked ? this.labelOn() : this.labelOff()
-  }
-
-  currentColor() {
-    return this._checked ? this.colorOn() : this.colorOff()
-  }
-
-  currentIcon() {
-    return this._checked ? this.iconOn() : this.iconOff()
-  }
-}

package/src/lib/ui/forms/inputs/switch-activo/switch-activo.component.html

@@ -1,12 +0,0 @@
-<div class="form-check form-switch d-flex align-items-center">
-    <input class="form-check-input" type="checkbox" role="switch" [checked]="_checked" [ngClass]="currentColor()"
-        (change)="toggle($event)" [id]="`toogle-${id()}`" >
-
-    <span class="switch-circle">
-        <i [class]="currentIcon()"></i>
-    </span>
-
-    <label class="label-toggle" [for]="`toogle-${id()}`" >
-        {{ currentLabel() }}
-    </label>
-</div>