@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/input-password/input-password.component.ts

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from '../icon-md/icon-md.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'ius-input-password',
+  standalone: true,
+  imports: [IconMdComponent, FormsModule, CommonModule],
+  templateUrl: './input-password.component.html',
+  styleUrl: './input-password.component.scss'
+})
+export class InputPasswordComponent {
+  isFocused: boolean = false;
+  isAlertText: boolean = false;
+  passwordVisible: boolean = false;
+  isCapsLockOn: boolean = false;
+
+  @Input() textInput: string = '';
+  @Input() required = true;
+  @Input() disabled = false;
+  @Input() showHelpText = false;
+
+  @Input() labelSuperior?: string;
+  @Input() labelInferior?: string;
+  @Input() errorText?: string;
+  @Input() labelInput: string = '';
+  @Input() iconInput?: string;
+  @Input() error: boolean = false;
+
+  @Output() onChangesValueEvent = new EventEmitter<any>();
+  @Output() onEnterKey = new EventEmitter<string>();
+  @Output() onBlurEvent = new EventEmitter<void>();
+
+  onInput(): void {
+    this.onChangesValueEvent.emit(this.textInput);
+  }
+
+  onFocus(): void {
+    this.isFocused = true;
+  }
+
+  onBlur(): void {
+    this.isFocused = false;
+    this.isCapsLockOn = false;
+    if (this.required) {
+      if (this.textInput === '') {
+        this.isAlertText = true;
+      } else {
+        this.isAlertText = false;
+      }
+    }
+    this.onBlurEvent.emit();
+  }
+
+  togglePasswordVisibility() {
+    this.passwordVisible = !this.passwordVisible;
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.getModifierState) {
+      this.isCapsLockOn = event.getModifierState('CapsLock');
+    }
+  }
+
+  onKeyPress(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      if (this.textInput.trim() !== '') {
+        this.onEnterKey.emit(this.textInput);
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,52 @@
+<div class="container-general" [id]="componentId">
+  @if (labelSuperior) {
+  <div class="container-label-sup" [ngClass]="{
+        'disabled': disabled
+    }">
+    @if(!disabled && required){
+    <div class="icon-dot"></div>
+    }
+    <span class="">{{labelSuperior}}</span>
+    @if(!disabled && showHelpText){
+    <ius-icon-md iconName="icon-help" class="icon-color-help"></ius-icon-md>
+    }
+    <span>:</span>
+  </div>
+  }
+  <div class="container-textfield" [ngClass]="{
+        'disabled': disabled,
+        'focused': isFocused,
+        'alert': (!isFocused && isAlertText && !disabled) || (error && !disabled)
+    }" (click)="onFocus()">
+    @if (iconInput) {
+    <ius-icon-md [iconName]="iconInput" class="icon-color"></ius-icon-md>
+    }
+    <input [type]="inputType" [(ngModel)]="textInput" [placeholder]="labelInput" [disabled]="disabled" (input)="onInput()"
+      [maxlength]="maxlenght ?? null" (focus)="onFocus()" (blur)="onBlur()"
+      (keypress)="onKeyPress($event)" (drop)="onDropBlock($event)" (dragover)="onDragOverBlock($event)">
+    <div class="cnt-icon-right">
+      @if(!showList){
+      <ius-icon-md iconName="icon-keyboard-arrow-down" class="icon-arrows"></ius-icon-md>
+      }@else{
+      <div (click)="closeList($event)" style="height: 20px;">
+        <ius-icon-md iconName="icon-keyboard-arrow-up" class="icon-arrows"></ius-icon-md>
+      </div>
+      }
+    </div>
+  </div>
+  @if (labelInferior && isFocused && !error) {
+  <span class="label-inf">{{labelInferior}}</span>
+  }
+  @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {
+  <span class="label-inf" [ngClass]="{
+        'alert': (!isFocused && isAlertText && !disabled) || (error && !disabled)
+    }">{{errorText ?? labelInferior}}</span>
+  }
+  <ng-template #listPanel>
+    <div class="container-list scrollable-small">
+      <div (click)="onSelectOption()">
+        <ng-content selector="ius-option"></ng-content>
+      </div>
+    </div>
+  </ng-template>
+</div>

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

@@ -0,0 +1,195 @@
+@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):not(.alert) {
+        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;
+        }
+    }
+
+    &.alert {
+        border: 1px solid colors.$danger-600;
+        background: colors.$danger-100;
+    }
+}
+
+.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;
+
+    &.alert {
+        color: colors.$danger-800;
+    }
+}
+
+
+.container-list {
+    max-height: 144px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: variables.$radius-md;
+    background: colors.$neutral-white;
+    box-shadow: variables.$elevation-200;
+    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;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}

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

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

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

@@ -0,0 +1,181 @@
+import { Component, 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 { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'ius-input-select',
+  standalone: true,
+  imports: [IconMdComponent, FormsModule, CommonModule],
+  templateUrl: './input-select.component.html',
+  styleUrl: './input-select.component.scss',
+})
+export class InputSelectComponent implements OnDestroy {
+
+  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() required = false;
+  @Input() disabled = false;
+  @Input() showHelpText = false;
+  @Input() error: boolean = false;
+
+  @Input() labelSuperior?: string;
+  @Input() labelInferior?: string;
+  @Input() errorText?: string;
+  @Input() labelInput?: string;
+  @Input() iconInput?: string;
+
+  @Input() textInput?: string = '';
+  @Input() maxlenght?: number;
+  @Input() inputType: string = 'text';
+
+  @Output() onChangesValueEvent = new EventEmitter<any>();
+  @Output() onEnterKey = new EventEmitter<string>();
+  @Output() onBlurEvent = new EventEmitter<void>();
+
+  constructor(
+    private readonly _el: ElementRef,
+    private readonly _overlay: Overlay,
+    private readonly _vcr: ViewContainerRef
+  ) {}
+
+  @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();
+    if (!this.selected && this.required) {
+      this.isAlertText = true;
+    } else {
+      this.isAlertText = false;
+    }
+    this.onBlurEvent.emit();
+  }
+
+  onInput(): void {
+    if (this.selected) {
+      this.selected = false;
+    }
+    this.onChangesValueEvent.emit(this.textInput);
+  }
+
+  onFocus(): void {
+    if (this.disabled) {
+      return;
+    }
+    this.isFocused = true;
+    this.hasClickedInside = true;
+    if (!this.showList) {
+      this._openPanel();
+    }
+  }
+
+  onBlur(): void {
+    this.isFocused = false;
+    if (this.required && !this.selected) {
+      if (this.textInput === '') {
+        this.isAlertText = true;
+      } else {
+        this.isAlertText = false;
+      }
+    }
+  }
+
+  onKeyPress(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      if (this.textInput!.trim() !== '') {
+        this.onEnterKey.emit(this.textInput);
+      }
+    }
+  }
+
+  onSelectOption() {
+    this.selected = true;
+    this.isFocused = false;
+    this._closePanel();
+    this.isAlertText = false;
+  }
+
+  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();
+  }
+
+  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: 'start', originY: 'top',    overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+      ]);
+
+    this._overlayRef = this._overlay.create({
+      positionStrategy,
+      scrollStrategy: this._overlay.scrollStrategies.reposition(),
+      width: (textfield ?? this._el.nativeElement).getBoundingClientRect().width,
+    });
+
+    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-filter/index.ts

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

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

@@ -0,0 +1,56 @@
+<div class="container-general" [id]="componentId">
+    @if (labelSuperior) {
+    <div class="container-label-sup" [ngClass]="{
+        'disabled': disabled
+    }">
+        <span class="">{{labelSuperior}}</span>
+        @if(!disabled && showHelpText){
+        <ius-icon-md iconName="icon-help" class="icon-color-help"></ius-icon-md>
+        }
+        <span>:</span>
+    </div>
+    }
+    <div class="container-textfield" [ngClass]="{
+        'disabled': disabled,
+        'focused': isFocused || showList
+    }" (click)="onFocus()">
+        @if (iconInput) {
+        <ius-icon-md [iconName]="iconInput" class="icon-color"></ius-icon-md>
+        }
+        <input [type]="inputType" [(ngModel)]="textInput" readonly [placeholder]="labelInput" [disabled]="disabled"
+            [maxlength]="maxlenght ?? null" (focus)="onFocus()" (blur)="onBlur()"
+            (drop)="onDropBlock($event)" (dragover)="onDragOverBlock($event)">
+        <div class="cnt-icon-right">
+            @if(!showList){
+            <ius-icon-md iconName="icon-keyboard-arrow-down" class="icon-arrows"></ius-icon-md>
+            }@else{
+            <div (click)="closeList($event)" style="height: 20px;">
+                <ius-icon-md iconName="icon-keyboard-arrow-up" class="icon-arrows"></ius-icon-md>
+            </div>
+            }
+        </div>
+    </div>
+    <ng-template #listPanel>
+    <div class="container-list">
+        <div class="ctn-items scrollable-small">
+            @for (data of filterData; track $index) {
+            <button class="item-list" (click)="selectedData(data)">
+                <span class="tx-item body-b color-pry">{{data.title}}</span>
+                <ius-icon-sm iconName="icon-arrow-forward-ios" class="color-pry"></ius-icon-sm>
+            </button>
+            }
+        </div>
+        @if(filterDataSelected){
+        <div class="separator"></div>
+        <div class="ctn-items scrollable-small">
+            @for (item of filterDataSelected.values; track $index) {
+            <div class="item-check" (click)="selectedItem(item)">
+                <ius-checkbox [checked]="item.checked" (click)="$event.stopPropagation(); selectedItem(item)"></ius-checkbox>
+                <span class="tx-item body-b color-pry">{{item.text}}</span>
+            </div>
+            }
+        </div>
+        }
+    </div>
+    </ng-template>
+</div>