@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

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

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

@@ -1,67 +0,0 @@
-<div class="container-general">
-  @if (labelSuperior) {
-  <div class="container-label-sup" [ngClass]="{
-      disabled: disabled
-    }">
-    @if(!disabled && required){
-    <div class="icon-dot" aria-hidden="true"></div>
-    }
-    <label class="label-text" [id]="'label-' + labelSuperior">{{ labelSuperior }}</label>
-    @if(!disabled && showHelpText){
-    <ius-icon-md iconName="icon-help" class="icon-color-help" role="img"
-      aria-label="Información de ayuda"></ius-icon-md>
-    }
-    <span aria-hidden="true">:</span>
-  </div>
-  }
-
-  <div class="inputs-wrapper">
-    <div class="inputs-container">
-      @if (iconInput) {
-      <ius-icon-md [iconName]="iconInput" class="icon-color" aria-hidden="true"></ius-icon-md>
-      }
-
-      <div class="card-date-container container-card" role="group" aria-labelledby="label-fecha" [ngClass]="{
-          disabled: disabled,
-          focused: isFocused,
-          alert: !isFocused && isAlertText && !disabled
-        }">
-        <!-- MES -->
-        <input type="text" maxlength="2" inputmode="numeric" class="date-input" id="month-input" placeholder="MM"
-          aria-label="Mes (MM)" [disabled]="disabled" (input)="onChangeMonth($event)" (keydown)="onKeyDown($event)"
-          [(ngModel)]="textInputMonth" (drop)="onDropBlock($event)" (dragover)="onDragOverBlock($event)" />
-
-        <span class="separator" aria-hidden="true">/</span>
-
-        <!-- AÑO -->
-        <input type="text" maxlength="4" inputmode="numeric" class="date-input year" id="year-input" placeholder="AAAA"
-          aria-label="Año (AAAA)" [disabled]="disabled" (input)="onChangeYear($event)" (keydown)="onKeyDown($event)"
-          [(ngModel)]="textInputYear" (drop)="onDropBlock($event)" (dragover)="onDragOverBlock($event)" #yearInput />
-      </div>
-
-      <div class="container-card cvv-container" role="group" aria-labelledby="label-cvv" [ngClass]="{
-          disabled: disabled,
-          focused: isFocused,
-          alert: !isFocused && isAlertText && !disabled
-        }">
-        <input type="text" maxlength="3" inputmode="numeric" class="cvv-input" id="cvv-input" placeholder="CVV"
-          aria-label="CVV (3 dígitos)" [disabled]="disabled" (input)="onChangeCVV($event)" (keydown)="onKeyDown($event)"
-          [(ngModel)]="textInputCvv" (drop)="onDropBlock($event)" (dragover)="onDragOverBlock($event)" />
-      </div>
-    </div>
-
-    @if (!disabled && isEnableClearText) {
-    <button class="button-delete" type="button" aria-label="Limpiar formulario" (click)="clearSearch()">
-      <ius-icon-md iconName="icon-cancel" class="icon-color-cancel" aria-hidden="true"></ius-icon-md>
-    </button>
-    }
-  </div>
-
-  @if (labelInferior && isFocused) {
-  <span class="label-inf" role="status" aria-live="polite">{{ labelInferior }}</span>
-  } @if (labelInferior && !isFocused && isAlertText) {
-  <span class="label-inf" role="alert" [ngClass]="{
-      alert: !isFocused && isAlertText && !disabled
-    }">{{ labelInferior }}</span>
-  }
-</div>

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

@@ -1,221 +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-card {
-    display: flex;
-    padding: 10px variables.$spacing-sm;
-    justify-content: flex-start;
-    align-items: center;
-    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 {
-            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;
-    }
-}
-
-.icon-color {
-    color: semantic-colors.$color-text-secundary-on-light;
-}
-
-.icon-color-cancel {
-    color: semantic-colors.$color-btn-primary-default;
-}
-
-.container-card input, 
-.card-date-container input {
-    display: flex;
-    align-items: center;
-    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;
-
-    &:disabled {
-        color: semantic-colors.$color-text-disabled-on-light;
-    }
-}
-
-.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;
-    top: calc(100% + #{variables.$spacing-xxs});
-    left: 0;
-    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;
-    }
-}
-
-.label-text {
-    cursor: pointer;
-}
-
-.inputs-wrapper {
-    position: relative;
-}
-
-.inputs-container {
-    display: flex;
-    gap: variables.$spacing-sm;
-    align-items: center;
-}
-
-.cvv-container {
-    padding: 10px variables.$spacing-xs;
-    flex-shrink: 0;
-}
-
-.cvv-input {
-    display: flex;
-    align-items: center;
-    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;
-    text-align: center;
-    width: 45px;
-    flex: 0 0 auto;
-}
-
-.card-date-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: variables.$spacing-xxs;
-    flex: 1 1 auto;
-}
-
-.date-input {
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: typography.$font-size-base;
-    width: 30px;
-    text-align: center;
-    flex: 0 0 auto;
-}
-
-.date-input.year {
-    width: 50px;
-}
-
-.separator {
-    margin: 0 variables.$spacing-xxs;
-    opacity: 0.6;
-    flex: 0 0 auto;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}

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

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

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

@@ -1,156 +0,0 @@
-import { Component, EventEmitter, Input, Output, ViewChild, 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-card',
-  standalone: true,
-  imports: [IconMdComponent, FormsModule, CommonModule],
-  templateUrl: './input-card.component.html',
-  styleUrl: './input-card.component.scss',
-})
-export class InputCardComponent {
-  @ViewChild('yearInput') yearInput?: ElementRef<HTMLInputElement>;
-  
-  @Input() textInputCvv: string = '';
-  @Input() textInputMonth: string = '';
-  @Input() textInputYear: string = '';
-
-  isFocused: boolean = false;
-  isAlertText: boolean = false;
-  @Input() required = false;
-  @Input() disabled = false;
-  @Input() isEnableClearText = false;
-  @Input() showHelpText = false;
-
-  @Input() labelSuperior?: string;
-  @Input() labelInferior?: string;
-  @Input() iconInput?: string;
-
-  @Input() initialTextCvv?: string;
-  @Input() initialTextMonth?: string;
-  @Input() initialTextYear?: string;
-
-
-  @Output() onChangesValueMonth = new EventEmitter<string>();
-  @Output() onChangesValueYear = new EventEmitter<string>();
-  @Output() onChangesValueCVV = new EventEmitter<string>();
-
-  @Output() onEnterKey = new EventEmitter<string>();
-
-  month: string = '';
-  year: string = '';
-  numeroCVV: string = ''; 
-
-
-  ngOnInit(): void {
-    if (this.initialTextCvv) {
-      this.textInputCvv = this.initialTextCvv;
-      this.numeroCVV = this.initialTextCvv;
-    }
-    if (this.initialTextMonth) {
-      this.textInputMonth = this.initialTextMonth;
-      this.month = this.initialTextMonth;
-    }
-    if (this.initialTextYear) {
-      this.textInputYear = this.initialTextYear;
-      this.year = this.initialTextYear;
-    }
-  }
-
-  clearSearch() {
-    this.month = '';
-    this.year = '';
-    this.numeroCVV = '';
-    this.onChangesValueMonth.emit(this.month);
-    this.onChangesValueYear.emit(this.year);
-    this.onChangesValueCVV.emit(this.numeroCVV);
-  }
-
-  onChangeCVV(event: any) {
-    const value = (event.target as HTMLInputElement).value ?? '';
-
-    let soloDigitos = value.replace(/\D+/g, '');
-
-    if (soloDigitos.length > 3) {
-      soloDigitos = soloDigitos.substring(0, 3);
-    }
-
-    if (soloDigitos === '0') {
-      soloDigitos = '';
-    }
-
-    this.numeroCVV = soloDigitos;
-    (event.target as HTMLInputElement).value = this.numeroCVV;
-
-    this.onChangesValueCVV.emit(this.numeroCVV);
-  }
-
-  onChangeMonth(e: any) {
-    let value = e.target.value.replace(/\D/g, '');
-
-    // limitar 01-12
-    if (value.length === 2) {
-      let num = parseInt(value, 10);
-      if (num < 1) value = '01';
-      if (num > 12) value = '12';
-    }
-
-    this.month = value;
-    e.target.value = value;
-
-    // auto focus al año
-    if (value.length === 2) {
-      this.yearInput?.nativeElement.focus();
-    }
-
-    this.onChangesValueMonth.emit(this.month);
-  }
-
-  onChangeYear(e: any) {
-    let value = e.target.value.replace(/\D/g, '');
-
-    if (value.length > 4) {
-      value = value.substring(0, 4);
-    }
-
-    if (value.length === 4) {
-      const year = parseInt(value, 10);
-      if (year < 2025 || year > 2099) {
-        value = '';
-      }
-    }
-
-    this.year = value;
-    e.target.value = value;
-
-    this.onChangesValueYear.emit(this.year);
-  }
-
-  onKeyDown(event: KeyboardEvent) {
-    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Home', 'End'];
-    
-    if (
-      !/[0-9]/.test(event.key) &&
-      !allowedKeys.includes(event.key)
-    ) {
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * Bloquea el drop de contenido
-   */
-  onDropBlock(event: DragEvent) {
-    event.preventDefault();
-  }
-
-  /**
-   * Bloquea el dragover para evitar drop
-   */
-  onDragOverBlock(event: DragEvent) {
-    event.preventDefault();
-  }
-
-}

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

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

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

@@ -1,46 +0,0 @@
-<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)
-    }"
-  >
-    <textarea class="scrollable-area"
-      [(ngModel)]="textInput"
-      [placeholder]="labelInput"
-      [disabled]="disabled"
-      [rows]="rows"
-      [maxlength]="maxlenght ?? null"
-      (input)="onInput()"
-      (focus)="onFocus()"
-      (blur)="onBlur()"
-      (keypress)="onKeyPress($event)"
-      (drop)="onDropBlock($event)"
-      (dragover)="onDragOverBlock($event)"
-    ></textarea>
-  </div>
-  @if (labelInferior && isFocused && !error) {
-  <span class="label-inf">{{ labelInferior }}</span>
-  } @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {
-  <span class="label-inf alert">{{ errorText ?? labelInferior }}</span>
-  }
-</div>

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

@@ -1,152 +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: flex-start;
-    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 {
-        background: colors.$neutral-2;
-
-        textarea {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        textarea::placeholder {
-            color: semantic-colors.$color-text-disabled-on-light;
-            opacity: 1;
-        }
-    }
-
-    &.alert {
-        border: 1px solid colors.$danger-600;
-        background: colors.$danger-100;
-    }
-}
-
-textarea {
-    display: flex;
-    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;
-    resize: vertical;
-    padding: 5px 0;
-    overflow-y: auto;
-    color: semantic-colors.$color-text-primary-on-light;
-
-    &::placeholder {
-        color: semantic-colors.$color-text-tertiary-on-light;
-    }
-}
-
-.scrollable-area {
-    overflow: auto;
-
-    &::-webkit-scrollbar-thumb:hover {
-        background-color: #BFBFBF;
-    }
-
-    &::-webkit-scrollbar-thumb:active {
-        background-color: #8C8C8C;
-    }
-
-    &::-webkit-scrollbar {
-        -webkit-appearance: none;
-    }
-
-    &::-webkit-scrollbar:vertical {
-        width: 7px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: #d8d6d6;
-        border-radius: 20px;
-    }
-}
-
-.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-large/input-large.component.spec.ts

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