@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,79 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from '../icon-md';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'ius-input-large',
+  standalone: true,
+  imports: [IconMdComponent, FormsModule, CommonModule],
+  templateUrl: './input-large.component.html',
+  styleUrl: './input-large.component.scss'
+})
+export class InputLargeComponent {
+  @Input() textInput: string = '';
+  isFocused: boolean = false;
+  isAlertText: boolean = false;
+  @Input() required = false;
+  @Input() disabled = false;
+  @Input() showHelpText = false;
+  @Input() rows: number = 4;
+  @Input() error: boolean = false;
+
+  @Input() labelSuperior?: string;
+  @Input() labelInferior?: string;
+  @Input() errorText?: string;
+  @Input() labelInput: string = '';
+  @Input() maxlenght?: number;
+
+  @Input() initialText?: string;
+
+  @Output() onChangesValueEvent = new EventEmitter<any>();
+  @Output() onEnterKey = new EventEmitter<string>();
+  @Output() onBlurEvent = new EventEmitter<void>();
+
+  ngOnInit(): void {
+    if (this.initialText) {
+      this.textInput = this.initialText;
+    }
+  }
+
+  onInput(): void {
+    this.onChangesValueEvent.emit(this.textInput);
+  }
+
+
+  onFocus(): void {
+    this.isFocused = true;
+  }
+
+  onBlur(): void {
+    this.isFocused = false;
+    if (this.required) {
+      if (this.textInput === '') {
+        this.isAlertText = true;
+      } else {
+        this.isAlertText = false;
+      }
+    }
+    this.onBlurEvent.emit();
+  }
+
+  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();
+  }
+}

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

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

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

@@ -0,0 +1,60 @@
+<div class="container-general">
+  @if (labelSuperior) {
+    <div class="container-label-sup" [ngClass]="{ 'disabled': disabled }">
+      @if(!disabled && required){ <div class="icon-dot"></div> }
+      <span>{{ labelSuperior }}</span>
+      @if(!disabled && showHelpText){
+        <ius-icon-md iconName="icon-help" class="icon-color-help"></ius-icon-md>
+      }
+      <span>:</span>
+    </div>
+  }
+
+  <div class="container-otp">
+    <!-- Casillas OTP -->
+    <div class="otp-grid">
+      @for (ctrl of boxes; track $index) {
+        <div
+          class="container-textfield"
+          [ngClass]="{
+            'disabled': disabled,
+            'focused': focusedIndex === $index,
+            'alert': !disabled && isAlertText
+          }"
+        >
+          <input
+            #otpInput
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            maxlength="1"
+            [disabled]="disabled"
+            [value]="values[$index]"
+            (focus)="onFocus($index)"
+            (blur)="onBlur()"
+            (keydown)="onKeyDown($event, $index)"
+            (input)="onInputBox($event, $index)"
+            (paste)="onPaste($event)"
+          />
+        </div>
+      }
+    </div>
+
+    @if (!disabled && this.code.length > 0 ) {
+      <button class="button-delete" (click)="clearSearch()" [ngClass]="{
+            'alert': !disabled && isAlertText
+          }">
+        <ius-icon-md iconName="icon-cancel" class="icon-color-cancel" [ngClass]="{
+            'alert': !disabled && isAlertText
+          }"></ius-icon-md>
+      </button>
+    }
+  </div>
+
+  @if (labelInferior && isAnyFocused) {
+    <span class="label-inf">{{ labelInferior }}</span>
+  }
+  @if (labelInferior && !isAnyFocused && isAlertText) {
+    <span class="label-inf" [ngClass]="{ 'alert': isAlertText }">{{ labelInferior }}</span>
+  }
+</div>

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

@@ -0,0 +1,141 @@
+@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-otp {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xs;
+}
+
+.otp-grid {
+    display: flex;
+    gap: variables.$spacing-xxs;
+}
+
+.otp-grid:hover .container-textfield:not(.disabled) {
+  background: colors.$info-100;
+  border: 1px solid colors.$info-100;
+}
+
+.container-textfield {
+    display: inline-flex;
+    width: 40px; // cuadrado tipo token
+    height: 40px;
+    border: 1px solid colors.$neutral-2;
+    border-radius: variables.$radius-md;
+    background: colors.$neutral-2;
+    transition: all 0.15s ease-in-out;
+
+    &:hover:not(.disabled):not(.focused):not(.alert) {
+        background: colors.$info-100;
+        border: 1px solid colors.$info-100;
+    }
+
+    &.focused {
+        border: 1px solid colors.$primary-600;
+        background: colors.$info-100;
+    }
+
+    &.alert {
+        border: 1px solid colors.$danger-600;
+        background: colors.$danger-100;
+    }
+
+    &.disabled {
+        background: colors.$neutral-2;
+    }
+
+    input {
+        width: 100%;
+        height: 100%;
+        border: none;
+        outline: none;
+        text-align: center;
+        background: transparent;
+
+        color: semantic-colors.$color-text-tertiary-on-light;
+        font-family: typography.$font-secondary;
+        font-size: typography.$font-size-base;
+        line-height: typography.$line-height-base;
+        letter-spacing: 0.28px;
+
+        // Evita flechas en algunos navegadores
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        // &[type="number"] { -moz-appearance: textfield; } // por si se cambia a number
+    }
+}
+
+.button-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: variables.$spacing-none;
+    color: semantic-colors.$color-text-secundary-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 {
+    width: 4px;
+    height: 4px;
+    background-color: colors.$danger-600;
+    border-radius: variables.$radius-pill;
+}
+
+.icon-color-help {
+    color: semantic-colors.$color-text-tertiary-on-light;
+}
+
+.icon-color-cancel {
+    color: semantic-colors.$color-btn-primary-default;
+
+    &.alert {
+        color: colors.$danger-700;
+    }
+}
+
+.label-inf {
+    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;
+    }
+}

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

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

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

@@ -0,0 +1,161 @@
+import { Component, EventEmitter, Input, Output, ViewChildren, QueryList, ElementRef } 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-otp',
+  standalone: true,
+  imports: [IconMdComponent, FormsModule, CommonModule],
+  templateUrl: './input-otp.component.html',
+  styleUrl: './input-otp.component.scss'
+})
+export class InputOtpComponent {
+  @Input() length = 6;
+
+  @Input() disabled = false;
+  @Input() showHelpText = false;
+  @Input() labelSuperior?: string;
+  @Input() labelInferior?: string;
+  @Input() required = true;
+
+  @Output() onChangesValueEvent = new EventEmitter<string>();
+  @Output() codeComplete = new EventEmitter<string>(); // cuando se llenan todas las casillas
+  @ViewChildren('otpInput') otpInputs!: QueryList<ElementRef<HTMLInputElement>>;
+
+  values: string[] = [];
+  focusedIndex: number | null = null;
+  isAlertText = false;
+
+  get isAnyFocused(): boolean { return this.focusedIndex !== null; }
+  get boxes(): any[] { return Array.from({ length: this.length }); }
+  get code(): string { return this.values.join(''); }
+
+  ngOnInit() {
+    this.values = Array(this.length).fill('');
+  }
+
+  clearSearch() {
+    this.values.fill('');
+    this.emitChange();
+    this.isAlertText = this.required;
+    this.focusIndex(0);
+  }
+
+  onFocus(index: number) {
+    this.focusedIndex = index;
+    this.isAlertText = false;
+  }
+
+  onBlur() {
+    this.focusedIndex = null;
+    if (this.required) {
+      this.isAlertText = this.code.length !== this.length;
+    }
+  }
+
+  // Restringe a dígitos y mueve el foco
+  onInputBox(e: Event, index: number) {
+    const inputEvent = e as InputEvent;
+    const input = inputEvent.target as HTMLInputElement;
+    const raw = (input.value || '').replace(/\D/g, '');
+
+    // Nos quedamos con el último dígito si escribió varios
+    const char = raw.slice(-1);
+    this.values[index] = char ?? '';
+    input.value = this.values[index];
+
+    // Avanza si hay valor
+    if (char && index < this.length - 1) this.focusIndex(index + 1);
+
+    this.emitChange();
+
+    // Si escribió múltiples (p.ej. autofill) distribuye
+    if (raw.length > 1) this.spreadFrom(index, raw);
+  }
+
+  // Teclas especiales: backspace, flechas, delete
+  onKeyDown(event: KeyboardEvent, index: number) {
+    const key = event.key;
+
+    if (!/^[0-9]$/.test(key) &&
+      !['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'].includes(key)) {
+      event.preventDefault();
+      return;
+    }
+
+    if (key === 'Backspace') {
+      if (this.values[index]) {
+        this.values[index] = '';
+        this.emitChange();
+      } else if (index > 0) {
+        this.focusIndex(index - 1);
+        // limpia la anterior para UX tipo “focused-error”
+        const prev = this.otpInputs.get(index - 1)?.nativeElement;
+        if (prev) { prev.value = ''; this.values[index - 1] = ''; this.emitChange(); }
+      }
+      event.preventDefault();
+      return;
+    }
+
+    if (key === 'Delete') {
+      this.values[index] = '';
+      this.emitChange();
+      event.preventDefault();
+      return;
+    }
+
+    if (key === 'ArrowLeft' && index > 0) {
+      this.focusIndex(index - 1); event.preventDefault(); return;
+    }
+    if (key === 'ArrowRight' && index < this.length - 1) {
+      this.focusIndex(index + 1); event.preventDefault(); return;
+    }
+  }
+
+  // Pegar un código completo
+  onPaste(event: ClipboardEvent) {
+    if (this.disabled) return;
+    event.preventDefault();
+    const data = (event.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, this.length);
+    if (!data) return;
+
+    const start = this.focusedIndex ?? 0;
+    this.spreadFrom(start, data);
+    this.emitChange();
+  }
+
+  /** Distribuye una cadena a partir de un índice */
+  spreadFrom(startIndex: number, data: string) {
+    let i = startIndex;
+    for (const ch of data) {
+      if (i >= this.length) break;
+      this.values[i] = ch;
+      const el = this.otpInputs.get(i)?.nativeElement;
+      if (el) el.value = ch;
+      i++;
+    }
+    // Enfoca siguiente libre o se queda en el último
+    const nextFree = this.values.findIndex((v, idx) => v === '' && idx >= startIndex);
+    this.focusIndex(nextFree === -1 ? this.length - 1 : nextFree);
+  }
+
+  /** Enfoca por índice de forma segura */
+  focusIndex(i: number) {
+    setTimeout(() => {
+      const el = this.otpInputs?.get(i)?.nativeElement;
+      if (el) el.focus();
+      this.focusedIndex = i;
+    });
+  }
+
+  /** Emite cambios y dispara codeComplete si procede */
+  emitChange() {
+    const code = this.code;
+    this.onChangesValueEvent.emit(code);
+    if (code.length === this.length) {
+      this.isAlertText = false;
+      this.codeComplete.emit(code);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+<div class="container-general">
+    @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)
+    }">
+        @if (iconInput) {
+        <ius-icon-md [iconName]="iconInput" class="icon-color"></ius-icon-md>
+        }
+        <input [type]="passwordVisible ? 'text' : 'password'" [(ngModel)]="textInput" [placeholder]="labelInput" [disabled]="disabled"
+            (input)="onInput()" (focus)="onFocus()" (blur)="onBlur()" (keypress)="onKeyPress($event)" (keydown)="onKeyDown($event)" />
+        @if (!disabled && textInput) {
+        <button class="button-delete" (click)="togglePasswordVisibility()">
+          @if (passwordVisible) {
+            <ius-icon-md iconName="icon-visibility" class="icon-color-cancel"></ius-icon-md>
+          }@else{
+            <ius-icon-md iconName="icon-visibility" class="icon-color-cancel"></ius-icon-md>
+          }
+        </button>
+        }
+    </div>
+    @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {
+    <span class="label-inf alert">{{ errorText ?? labelInferior }}</span>
+    } @else if (isCapsLockOn && isFocused && !disabled) {
+    <span class="label-inf warning">Bloq Mayús activado</span>
+    } @else if (labelInferior && isFocused) {
+    <span class="label-inf">{{labelInferior}}</span>
+    }
+
+</div>

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

@@ -0,0 +1,142 @@
+@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;
+
+    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;
+    transition: all 0.2s ease-in-out;
+
+    &:hover:not(.disabled):not(.focused):not(.alert) {
+        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;
+        }
+
+        background: colors.$neutral-2;
+
+        input::placeholder {
+            color: semantic-colors.$color-text-disabled-on-light;
+            opacity: 1;
+        }
+    }
+
+    &.alert {
+        border: 1px solid colors.$danger-600;
+        background: colors.$danger-100;
+    }
+}
+
+.icon-color {
+    color: semantic-colors.$color-text-secundary-on-light;
+}
+
+.icon-color-cancel {
+    color: semantic-colors.$color-btn-primary-default
+}
+
+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;
+}
+
+.button-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: variables.$spacing-none;
+    color: semantic-colors.$color-text-secundary-on-light;
+
+    &:hover {
+        color: semantic-colors.$color-btn-primary-default;
+    }
+}
+
+.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;
+    }
+}

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

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