@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

package/src/lib/input-select-filter/input-select-filter.component.scss

@@ -1,266 +0,0 @@
-@use '@litigiovirtual/ius-design-styles/lib/colors' as colors;
-@use '@litigiovirtual/ius-design-styles/lib/typography' as typography;
-@use '@litigiovirtual/ius-design-styles/lib/variables' as variables;
-@use '@litigiovirtual/ius-design-styles/lib/semantic-colors' as semantic-colors;
-
-.container-general {
-    position: relative;
-    height: 100%;
-}
-
-.container-textfield {
-    display: flex;
-    padding: 10px variables.$spacing-sm;
-    justify-content: center;
-    align-items: flex-start;
-    gap: variables.$spacing-xxs;
-    cursor: pointer;
-
-    border: 1px solid colors.$neutral-2;
-    border-radius: variables.$radius-md;
-    background: colors.$neutral-2;
-
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-
-    &:hover:not(.disabled):not(.focused) {
-        background: colors.$info-100;
-    }
-
-    &.focused {
-        border: 1px solid colors.$primary-600;
-        background: colors.$info-100;
-    }
-
-    &.disabled {
-        cursor: default;
-
-        .icon-color {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        .icon-arrows {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        background: colors.$neutral-2;
-
-        input {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        input::placeholder {
-            color: semantic-colors.$color-text-disabled-on-light;
-            opacity: 1;
-        }
-    }
-}
-
-.container-textfield .icon-arrows {
-    pointer-events: none;
-    /* El span no intercepta clicks */
-}
-
-.container-textfield .icon-arrows svg {
-    pointer-events: none;
-}
-
-.icon-color {
-    color: semantic-colors.$color-text-secundary-on-light;
-}
-
-.icon-arrows {
-    color: semantic-colors.$color-text-primary-on-light
-}
-
-input {
-    display: flex;
-    align-items: center;
-    flex: 1 0 0;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-}
-
-.cnt-icon-right {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    padding: variables.$spacing-none;
-    color: semantic-colors.$color-text-primary-on-light;
-}
-
-.container-label-sup {
-    display: flex;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-    margin-bottom: variables.$spacing-xs;
-    color: semantic-colors.$color-text-primary-on-light;
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-medium;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-
-
-    &.disabled {
-        color: semantic-colors.$color-text-disabled-on-light;
-    }
-}
-
-.icon-dot {
-    display: flex;
-    align-items: center;
-    width: 4px;
-    height: 4px;
-    aspect-ratio: 1/1;
-    background-color: colors.$danger-600;
-    border-radius: variables.$radius-pill;
-}
-
-.icon-color-help {
-    color: semantic-colors.$color-text-tertiary-on-light;
-}
-
-.label-inf {
-    display: flex;
-    position: absolute;
-    margin-top: variables.$spacing-xxs;
-
-    color: semantic-colors.$color-text-secundary-on-light;
-    font-family: typography.$font-primary;
-    font-size: typography.$font-size-sm;
-    font-style: italic;
-    font-weight: typography.$font-weight-medium;
-    line-height: typography.$line-height-sm;
-    letter-spacing: 0.24px;
-}
-
-
-.container-list {
-    height: 176px;
-    display: flex;
-    gap: variables.$spacing-xxs;
-    padding: variables.$spacing-xxs;
-    border-radius: variables.$radius-md;
-    background: colors.$neutral-white;
-    box-shadow: variables.$elevation-200;
-}
-
-.ctn-items {
-    display: flex;
-    width: 300px;
-    height: 100%;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.item-list {
-    display: flex;
-    height: 42px;
-    min-height: 42px;
-    flex-shrink: 0;
-    align-items: center;
-    cursor: pointer;
-    border: none;
-    padding: 0 variables.$spacing-xs 0 variables.$spacing-md;
-    gap: variables.$spacing-xs;
-    border-radius: variables.$radius-sm;
-    background: colors.$neutral-white;
-
-    &:active:not(:disabled) {
-        background: colors.$info-200 !important;
-    }
-
-    &:hover:not(:disabled) {
-        background: colors.$neutral-2;
-    }
-}
-
-.item-check {
-    display: flex;
-    height: 42px;
-    min-height: 42px;
-    flex-shrink: 0;
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    padding-right: variables.$spacing-xs;
-    gap: variables.$spacing-xs;
-    border-radius: variables.$radius-sm;
-    background: colors.$neutral-white;
-
-    &:active:not(:disabled) {
-        background: colors.$info-200 !important;
-    }
-
-    &:hover:not(:disabled) {
-        background: colors.$neutral-2;
-    }
-}
-
-.tx-item {
-    flex: 1 0 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    display: block;
-    min-width: 0;
-    text-align: left;
-}
-
-.body-b {
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-}
-
-.color-pry {
-    color: semantic-colors.$color-text-primary-on-light;
-}
-
-.separator {
-    width: 0.5px;
-    background: colors.$neutral-5;
-}
-
-
-.scrollable-small::-webkit-scrollbar {
-    -webkit-appearance: none;
-}
-
-.scrollable-small::-webkit-scrollbar:vertical {
-    width: variables.$spacing-xxs;
-    height: variables.$spacing-xl;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.scrollable-small::-webkit-scrollbar:horizontal {
-    height: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.scrollable-small::-webkit-scrollbar-thumb {
-    background-color: colors.$primary-500;
-    border-radius: variables.$radius-sm;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}

package/src/lib/input-select-filter/input-select-filter.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputSelectFilterComponent } from './input-select-filter.component';
-
-describe('InputSelectFilterComponent', () => {
-  let component: InputSelectFilterComponent;
-  let fixture: ComponentFixture<InputSelectFilterComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputSelectFilterComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(InputSelectFilterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/input-select-filter/input-select-filter.component.ts

@@ -1,214 +0,0 @@
-import { Component, DoCheck, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Output, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { IconMdComponent } from '../icon-md/icon-md.component';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { IconSmComponent } from "../icon-sm";
-import { CheckboxComponent } from "../checkbox";
-
-export type FilterData = { title: string; values: FilterItemInputList[]; };
-
-export type FilterItemInputList = {
-  id?: number;
-  text: string;
-  checked: boolean;
-}
-
-@Component({
-  selector: 'ius-input-select-filter',
-  standalone: true,
-  imports: [IconMdComponent, FormsModule, CommonModule, IconSmComponent, CheckboxComponent],
-  templateUrl: './input-select-filter.component.html',
-  styleUrl: './input-select-filter.component.scss'
-})
-export class InputSelectFilterComponent implements DoCheck, OnDestroy {
-
-  @Input() filterData?: FilterData[];
-  filterDataSelected?: FilterData;
-  itemSelected?: FilterItemInputList;
-
-  isFocused: boolean = false;
-  isAlertText: boolean = false;
-  hasClickedInside: boolean = false;
-  selected: boolean = false;
-
-  @ViewChild('listPanel') private listPanel!: TemplateRef<unknown>;
-  private _overlayRef: OverlayRef | null = null;
-  private _scrollListener = (): void => { this._overlayRef?.updatePosition(); };
-
-  get showList(): boolean {
-    return this._overlayRef !== null;
-  }
-
-  @Input({ required: true }) componentId: string = ''; //Debe mandar un componenteID para llamar el input varias veces
-  @Input() disabled = false;
-  @Input() showHelpText = false;
-
-  @Input() labelSuperior?: string;
-  @Input() labelInput?: string;
-  @Input() iconInput?: string = 'icon-search';
-
-  @Input() textInput?: string = '';
-  @Input() maxlenght?: number;
-  @Input() inputType: string = 'text';
-
-  @Output() onChangesValueEvent = new EventEmitter<{ text: string; items: FilterItemInputList[] }>();
-  @Output() onEnterKey = new EventEmitter<string>();
-
-  constructor(
-    private readonly _el: ElementRef,
-    private readonly _overlay: Overlay,
-    private readonly _vcr: ViewContainerRef
-  ) {}
-
-  /** Firma de los ítems seleccionados para detectar cambios externos (reset, etc.) */
-  private lastSelectedSignature: string = '';
-
-  // 🔍 Se ejecuta en cada ciclo de detección de cambios
-  ngDoCheck(): void {
-    const selectedItems = this.getSelectedItems();
-    const newSignature = selectedItems.map(i => (i.id ?? i.text)).join('|');
-
-    if (newSignature !== this.lastSelectedSignature) {
-      this.lastSelectedSignature = newSignature;
-      // Actualiza el texto en el input cada vez que cambia la selección desde afuera o desde adentro
-      this.textInput = selectedItems.map(i => i.text).join(', ');
-    }
-  }
-
-  @HostListener('document:click', ['$event'])
-  onClickOutside(event: Event) {
-    if (!this.hasClickedInside) {
-      return;
-    }
-    const target = event.target as HTMLElement;
-
-    // Si el click es dentro del panel overlay, no cerrar
-    if (this._overlayRef?.overlayElement.contains(target)) {
-      return;
-    }
-
-    // Si el click es dentro del textfield, no cerrar (el toggle lo maneja onFocus/closeList)
-    const textfield = this._el.nativeElement.querySelector('.container-textfield') as HTMLElement;
-    if (textfield?.contains(target)) {
-      return;
-    }
-
-    // Cualquier otro click (fuera del host, o dentro del host pero fuera del textfield) → cerrar
-    this.closeList();
-  }
-
-  closeList(event?: Event): void {
-    if (event) {
-      event.stopImmediatePropagation();
-    }
-    this.isFocused = false;
-    this._closePanel();
-  }
-
-  onInput(): void {
-    if (this.selected) {
-      this.selected = false;
-    }
-    const items = this.getSelectedItems();
-    this.onChangesValueEvent.emit({ text: this.textInput ?? '', items });
-  }
-
-  onFocus(): void {
-    if (this.disabled) {
-      return;
-    }
-    this.isFocused = true;
-    this.hasClickedInside = true;
-    if (!this.showList) {
-      this._openPanel();
-    }
-  }
-
-  onBlur(): void {
-    this.isFocused = false;
-  }
-
-  onKeyPress(event: KeyboardEvent): void {
-    if (event.key === 'Enter') {
-      if (this.textInput!.trim() !== '') {
-        this.onEnterKey.emit(this.textInput);
-      }
-    }
-  }
-
-  onDropBlock(event: DragEvent) {
-    // Evita que se dropee contenido en el input
-    event.preventDefault();
-  }
-
-  onDragOverBlock(event: DragEvent) {
-    // Evita que se permita arrastrar texto sobre el input
-    event.preventDefault();
-  }
-
-  selectedData(data: FilterData) {
-    this.filterDataSelected = data;
-  }
-
-  selectedItem(data: FilterItemInputList) {
-    data.checked = !data.checked;
-    this.itemSelected = data;
-
-    const selected = this.getSelectedItems();
-    this.textInput = selected.map(i => i.text).join(', ');
-    this.lastSelectedSignature = selected.map(i => (i.id ?? i.text)).join('|');
-
-    this.onChangesValueEvent.emit({ text: this.textInput ?? '', items: selected });
-  }
-
-  getSelectedItems(): FilterItemInputList[] {
-    const selectedItems: FilterItemInputList[] = [];
-    if (!this.filterData) { return selectedItems; }
-    for (const group of this.filterData) {
-      if (!group.values) { continue; }
-      for (const v of group.values) {
-        if (v && v.checked) {
-          selectedItems.push(v);
-        }
-      }
-    }
-    return selectedItems;
-  }
-
-  private _openPanel(): void {
-    const textfield = this._el.nativeElement.querySelector('.container-textfield') as HTMLElement;
-    const anchor = textfield ?? this._el;
-    const positionStrategy = this._overlay
-      .position()
-      .flexibleConnectedTo(anchor)
-      .withFlexibleDimensions(false)
-      .withPush(false)
-      .withPositions([
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-        { originX: 'end',   originY: 'bottom', overlayX: 'end',   overlayY: 'top', offsetY: 4 },
-        { originX: 'start', originY: 'top',    overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-      ]);
-
-    this._overlayRef = this._overlay.create({
-      positionStrategy,
-      scrollStrategy: this._overlay.scrollStrategies.reposition(),
-    });
-
-    this._overlayRef.attach(new TemplatePortal(this.listPanel, this._vcr));
-    window.addEventListener('scroll', this._scrollListener, true);
-  }
-
-  private _closePanel(): void {
-    if (this._overlayRef) {
-      this._overlayRef.dispose();
-      this._overlayRef = null;
-      window.removeEventListener('scroll', this._scrollListener, true);
-    }
-  }
-
-  ngOnDestroy(): void {
-    this._closePanel();
-  }
-}

package/src/lib/input-select-number/index.ts

@@ -1,2 +0,0 @@
-export * from './input-select-number.component';
-

package/src/lib/input-select-number/input-select-number.component.html

@@ -1,24 +0,0 @@
-<div class="container-general" [id]="componentId">
-    @if (showList) {
-    <div class="container-list scrollable-small">
-        <div>
-            @for (number of numberOptions; track $index) {
-            <ius-option (optionClick)="onSelectOption(number)">
-                {{number}}
-            </ius-option>
-            }
-        </div>
-    </div>
-    }
-    <button class="ct-button" [ngClass]="{
-        'disabled': disabled,
-        'focused': isFocused
-    }" (click)="onFocus()" [disabled]="disabled">
-        <span>{{actualNumber}}</span>
-        @if(!showList){
-        <ius-icon-md iconName="icon-keyboard-arrow-down" class="icon-arrows"></ius-icon-md>
-        }@else{
-        <ius-icon-md iconName="icon-keyboard-arrow-up" class="icon-arrows"></ius-icon-md>
-        }
-    </button>
-</div>

package/src/lib/input-select-number/input-select-number.component.scss

@@ -1,128 +0,0 @@
-@use '@litigiovirtual/ius-design-styles/lib/colors' as colors;
-@use '@litigiovirtual/ius-design-styles/lib/typography' as typography;
-@use '@litigiovirtual/ius-design-styles/lib/variables' as variables;
-@use '@litigiovirtual/ius-design-styles/lib/semantic-colors' as semantic-colors;
-
-.container-general {
-    position: relative;
-    height: 100%;
-}
-
-.ct-button {
-    display: flex;
-    padding: 10px variables.$spacing-sm;
-    justify-content: center;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-    height: 44px;
-    cursor: pointer;
-
-    border: 1px solid colors.$neutral-2;
-    border-radius: variables.$radius-md;
-    background: colors.$neutral-2;
-
-    color: semantic-colors.$color-text-secundary-on-light;
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-
-    &:hover:not(.disabled):not(.focused) {
-        background: colors.$info-100;
-    }
-
-    &.focused {
-        border: 1px solid colors.$primary-600;
-        background: colors.$info-100;
-    }
-
-    &.disabled {
-        .icon-color {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        .icon-arrows {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        background: colors.$neutral-2;
-        cursor: default;
-
-        input::placeholder {
-            color: semantic-colors.$color-text-disabled-on-light;
-            opacity: 1;
-        }
-    }
-}
-
-input {
-    display: flex;
-    align-items: center;
-    flex: 1 0 0;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-.icon-arrows {
-    color: semantic-colors.$color-text-primary-on-light
-}
-
-.ct-button .icon-arrows {
-    pointer-events: none;
-    /* El span no intercepta clicks */
-}
-
-.ct-button .icon-arrows svg {
-    pointer-events: none;
-}
-
-.container-list {
-    position: absolute;
-    bottom: 100%;
-    margin-bottom: variables.$spacing-xxs;
-    max-height: 144px;
-    width: 100%;
-    display: flex;
-    flex-direction: column-reverse;
-    margin-top: variables.$spacing-xxs;
-    border-radius: variables.$radius-md;
-    background: colors.$neutral-white;
-    box-shadow: variables.$elevation-200;
-    z-index: 1000;
-    overflow-y: auto;
-}
-
-.scrollable-small::-webkit-scrollbar {
-    -webkit-appearance: none;
-}
-
-.scrollable-small::-webkit-scrollbar:vertical {
-    width: variables.$spacing-xxs;
-    height: variables.$spacing-xl;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.scrollable-small::-webkit-scrollbar:horizontal {
-    height: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.scrollable-small::-webkit-scrollbar-thumb {
-    background-color: colors.$primary-500;
-    border-radius: variables.$radius-sm;
-}

package/src/lib/input-select-number/input-select-number.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputSelectNumberComponent } from './input-select-number.component';
-
-describe('InputSelectNumberComponent', () => {
-  let component: InputSelectNumberComponent;
-  let fixture: ComponentFixture<InputSelectNumberComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputSelectNumberComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(InputSelectNumberComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});