@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IconMdComponent } from '../icon-md';
+import { OptionComponent } from '../option/option.component';
+
+@Component({
+  selector: 'ius-input-select-number',
+  standalone: true,
+  imports: [FormsModule, CommonModule, IconMdComponent, OptionComponent],
+  templateUrl: './input-select-number.component.html',
+  styleUrl: './input-select-number.component.scss',
+})
+export class InputSelectNumberComponent {
+  isFocused: boolean = false;
+  showList: boolean = false;
+  hasClickedInside: boolean = false; //Bandera para detectar que ya dieron el primer click en el componente
+
+  @Input({ required: true }) componentId: string = ''; //Debe mandar un componenteID para llamar el input varias veces
+  @Input() disabled = false;
+  @Input({ required: true }) maxNumberInput?: number;
+  @Input({ required: true }) actualNumber?: number;
+
+  @Output() onChangesValueEvent = new EventEmitter<number>();
+
+  get numberOptions(): number[] {
+    if (!this.maxNumberInput || this.maxNumberInput <= 0) {
+      return [1];
+    }
+    return Array.from(
+      { length: this.maxNumberInput },
+      (_, i) => this.maxNumberInput! - i
+    );
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: Event) {
+    if (!this.hasClickedInside) {
+      return;
+    }
+    const target = event.target as HTMLElement;
+    const container = document.getElementById(this.componentId);
+    if (container && !container.contains(target)) {
+      this.isFocused = false;
+      this.showList = false;
+    }
+  }
+
+  onFocus(): void {
+    this.isFocused = true;
+    this.showList = true;
+    this.hasClickedInside = true;
+  }
+
+  onSelectOption(value: number) {
+    this.isFocused = false;
+    this.showList = false;
+
+    this.actualNumber = value;
+    this.onChangesValueEvent.emit(this.actualNumber);
+  }
+}

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

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

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

@@ -0,0 +1,65 @@
+<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]="inputType"
+      [(ngModel)]="textInput"
+      [placeholder]="labelInput"
+      [disabled]="disabled"
+      [autocomplete]="inputType"
+      [name]="inputType"
+      [maxlength]="maxlenght ?? null"
+      (input)="onInput()"
+      (focus)="onFocus()"
+      (blur)="onBlur()"
+      (keypress)="onKeyPress($event)"
+      (keydown)="onKeyDown($event)"
+      (drop)="onDropBlock($event)"
+      (dragover)="onDragOverBlock($event)"
+    />
+    @if (!disabled && textInput && isEnableClearText) {
+    <button class="button-delete" (click)="clearSearch()">
+      <ius-icon-md
+        iconName="icon-cancel"
+        class="icon-color-cancel"
+      ></ius-icon-md>
+    </button>
+    }
+    @if (isIconRight) {
+        <button (click)="addText()" class="icon-right">
+          <ius-icon-md [iconName] ="'icon-add'" [color]="'#595959'" alt="icon"></ius-icon-md>
+        </button>
+      }
+  </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-textfield/input-textfield.component.scss

@@ -0,0 +1,167 @@
+@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 {
+            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
+}
+
+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;
+    }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+
+.icon-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80%;
+    background: transparent;
+    border: none;
+    border-radius: 50px;
+    padding-right: 4px;
+    // gap: 4px;
+    cursor: pointer;
+    transition: 0.5s;
+}

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

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

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

@@ -0,0 +1,125 @@
+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-textfield',
+  standalone: true,
+  imports: [IconMdComponent, FormsModule, CommonModule],
+  templateUrl: './input-textfield.component.html',
+  styleUrl: './input-textfield.component.scss',
+})
+export class InputTextfieldComponent {
+  @Input() textInput: string = '';
+  isFocused: boolean = false;
+  isAlertText: boolean = false;
+  @Input() required = false;
+  @Input() disabled = false;
+  @Input() isEnableClearText = false;
+  @Input() showHelpText = false;
+  @Input() error: boolean = false;
+
+  @Input() labelSuperior?: string;
+  @Input() labelInferior?: string;
+  @Input() errorText?: string;
+  @Input() labelInput: string = '';
+  @Input() iconInput?: string;
+  @Input() inputType: string = 'text';
+  @Input() maxlenght?: number;
+
+  @Input() initialText?: string;
+
+  @Input() isIconRight: boolean = false;
+
+  @Output() onChangesValueEvent = new EventEmitter<any>();
+  @Output() onEnterKey = new EventEmitter<string>();
+  @Output() onBlurEvent = new EventEmitter<void>();
+
+  ngOnInit(): void {
+    if (this.initialText) {
+      this.textInput = this.initialText;
+    }
+  }
+
+  clearSearch() {
+    this.textInput = '';
+    this.onBlur();
+    this.onChangesValueEvent.emit(this.textInput);
+  }
+
+  onInput(): void {
+    if (this.inputType === 'number') {
+      let soloDigitos = this.textInput.replace(/\D+/g, '');
+      if (this.maxlenght) {
+        soloDigitos = soloDigitos.slice(0, this.maxlenght);
+      }
+      if (soloDigitos !== this.textInput) {
+        this.textInput = soloDigitos;
+      }
+    }
+    this.onChangesValueEvent.emit(this.textInput);
+  }
+
+  addText(): void {
+    if (this.textInput.trim() !== '') {
+      this.onEnterKey.emit(this.textInput);
+      this.textInput = '';
+    }
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.inputType !== 'number') return;
+
+    const allowedControlKeys = [
+      'Backspace', 'Tab', 'ArrowLeft', 'ArrowRight',
+      'Delete', 'Home', 'End'
+    ];
+
+    if (allowedControlKeys.includes(event.key)) return;
+
+    if (event.key.length === 1 && !/[0-9]/.test(event.key)) {
+      event.preventDefault();
+      return;
+    }
+
+    if (this.maxlenght && this.textInput.length >= this.maxlenght) {
+      event.preventDefault();
+    }
+  }
+
+
+  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/item-document/index.ts

@@ -0,0 +1 @@
+export * from './item-document.component';

package/src/lib/item-document/item-document.component.html

@@ -0,0 +1,53 @@
+<div class="ius-item-document" (click)="onItemClick()">
+  <div class="item-document__icon">
+    @if (isPdf) {
+      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="38" viewBox="0 0 30 38" fill="none">
+        <path d="M0 10.3236V33.8362C0 36.1349 1.8378 38 4.10562 38H25.8921C28.1622 38 30 36.1349 30 33.8362V4.165C30 1.86628 28.1622 0 25.8921 0H10.1871L2.13203 8.16252L0 10.3236Z" fill="white"/>
+        <path d="M0 10.3236L2.13203 8.16252L10.1871 0H25.8921C28.1622 0 30 1.86513 30 4.16385V13.8405H0V10.3224V10.3236Z" fill="#DB676A"/>
+        <g style="mix-blend-mode:multiply">
+          <path d="M0 10.3225L5.02791 11.4478C7.24934 11.9135 9.42324 10.4624 9.88155 8.21073L10.092 7.04187C10.0253 7.36764 9.91777 7.67849 9.77744 7.97214C9.11317 9.36238 7.70653 10.3202 6.08035 10.3202H0V10.3225Z" fill="#D7D7D7"/>
+        </g>
+        <g opacity="0.4">
+          <path d="M0 10.3224H6.08035C7.70653 10.3224 9.11317 9.3635 9.77744 7.9744C9.91777 7.68075 10.0253 7.3699 10.092 7.04413C10.1554 6.75966 10.186 6.46257 10.186 6.1586V0L2.13203 8.16252L0 10.3224Z" fill="#EFEFEF"/>
+        </g>
+        <path d="M10.1192 34.1986C9.86567 34.1986 9.48091 34.1092 9.16066 33.6526C8.81777 33.164 8.40359 32.1626 9.47186 30.941C10.1339 30.1839 11.1999 29.5324 12.3078 29.0036C13.3014 26.6601 14.1614 24.3247 14.6922 22.5192C14.7137 22.4469 14.734 22.3758 14.7544 22.3047C13.7936 20.3019 13.4055 18.8922 13.8287 18.0032C13.9792 17.6878 14.3017 17.2874 14.9875 17.1762C15.5103 17.0913 15.9607 17.2565 16.255 17.6419C16.6273 18.1305 16.9294 19.0941 16.0988 22.1797C16.556 23.0973 17.0381 23.9634 17.3323 24.4933C17.8257 25.38 18.5092 26.2219 19.2165 26.9079C20.7714 26.6739 22.204 26.6544 22.9577 27.0696C23.5122 27.3759 23.7465 27.915 23.5824 28.5126C23.373 29.2743 22.874 29.7411 22.1769 29.8272C21.0871 29.9602 19.8253 29.1148 18.9585 28.3819C18.9132 28.344 18.8679 28.305 18.8227 28.2649C18.3915 28.344 17.9196 28.4438 17.4047 28.5711C15.9121 28.937 14.4737 29.428 13.2719 29.966C13.255 30.005 13.2391 30.0428 13.2221 30.0795C11.9966 32.9082 11.1297 34.1011 10.2278 34.194C10.195 34.1975 10.1588 34.1998 10.118 34.1998L10.1192 34.1986ZM11.4296 30.9478C11.1976 31.1004 10.9905 31.253 10.8129 31.4044C9.82154 32.2429 10.0377 32.6891 10.1656 32.8795C10.3308 32.7602 10.7336 32.3484 11.4307 30.949L11.4296 30.9478ZM20.6084 28.0343C21.1799 28.4025 21.6869 28.601 22.0241 28.5585C22.1135 28.547 22.2629 28.5287 22.3613 28.1903C22.1791 28.0733 21.6111 27.9701 20.6084 28.0332V28.0343ZM15.5794 23.9221C15.0758 25.4809 14.4794 27.0398 13.9668 28.3027C14.9547 27.9299 15.8227 27.673 16.2776 27.5457C16.7461 27.4149 17.2361 27.2922 17.7318 27.1832C17.1388 26.5213 16.6148 25.8044 16.2346 25.1196C16.0026 24.7021 15.7842 24.3029 15.5794 23.9198V23.9221ZM15.2501 18.4322C15.2353 18.4322 15.215 18.4334 15.1867 18.4379C15.0068 18.4678 14.9785 18.5263 14.9638 18.5584C14.8155 18.8692 14.9592 19.5059 15.2421 20.2629C15.4854 18.875 15.3044 18.4964 15.2625 18.4322C15.2591 18.4322 15.2546 18.4322 15.2501 18.4322Z" fill="#DB676A"/>
+        <path d="M16.065 11.0497V13.1178H15.6157V8.74635C15.6157 8.1969 15.6157 7.81034 15.6033 7.56601H16.0469C16.0559 7.68072 16.0639 7.99387 16.065 8.22214C16.2562 7.78625 16.6263 7.49146 17.2249 7.49146C18.0556 7.49146 18.5761 8.19461 18.5761 9.49653C18.5761 10.8661 17.9537 11.6266 17.0891 11.6266C16.5244 11.6266 16.2212 11.3697 16.065 11.0497ZM18.1065 9.51832C18.1065 8.50546 17.7591 7.90899 17.1027 7.90899C16.2868 7.90899 16.0457 8.56626 16.0457 9.57109C16.0457 10.514 16.1872 11.2102 17.0563 11.2102C17.7172 11.2102 18.1053 10.569 18.1053 9.51832H18.1065Z" fill="white"/>
+        <path d="M22.1647 5.81445V10.5587C22.1647 10.9074 22.1647 11.3123 22.1772 11.5601H21.7336C21.7245 11.4557 21.7155 11.1862 21.7155 10.9384C21.5321 11.403 21.2266 11.6324 20.6019 11.6324C19.6502 11.6324 19.2009 10.8145 19.2009 9.55274C19.2009 8.36323 19.7441 7.49261 20.7139 7.49261C21.3318 7.49261 21.6079 7.76217 21.7143 7.99847V5.81445H22.1647ZM19.6717 9.53554C19.6717 10.6711 20.0915 11.2125 20.6958 11.2125C21.5321 11.2125 21.7245 10.5255 21.7245 9.47245C21.7245 8.23247 21.4088 7.90785 15.1881 7.90785C14.5205 7.90785 14.1187 8.46653 14.1187 9.53445V9.5356Z" fill="white"/>
+        <path d="M23.405 11.5601V7.96752H22.803V7.5672H23.405V6.98678C23.405 6.3559 23.5872 5.75598 24.3579 5.75598C24.4586 5.75598 24.5966 5.7686 24.6826 5.80301V6.2194C24.6068 6.19875 24.4982 6.18154 24.3624 6.18154C23.9969 6.18154 23.8543 6.42701 23.8543 6.94549V7.5672H24.5831V7.96752H23.8543V11.5601H23.405Z" fill="white"/>
+      </svg>
+    } @else {
+      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="38" viewBox="0 0 30 38" fill="none">
+        <path d="M0 10.3236V33.8362C0 36.1349 1.8378 38 4.10562 38H25.8921C28.1622 38 30 36.1349 30 33.8362V4.165C30 1.86628 28.1622 0 25.8921 0H10.1871L2.13203 8.16252L0 10.3236Z" fill="white"/>
+        <path d="M0 10.3236L2.13203 8.16252L10.1871 0H25.8921C28.1622 0 30 1.86513 30 4.16385V13.8405H0V10.3224V10.3236Z" fill="#6972B1"/>
+        <g style="mix-blend-mode:multiply">
+          <path d="M0 10.3224L5.02791 11.4477C7.24934 11.9134 9.42324 10.4624 9.88155 8.21067L10.092 7.04181C10.0253 7.36758 9.91777 7.67843 9.77744 7.97208C9.11317 9.36232 7.70653 10.3201 6.08035 10.3201H0V10.3224Z" fill="#D7D7D7"/>
+        </g>
+        <g opacity="0.4">
+          <path d="M0 10.3224H6.08035C7.70653 10.3224 9.11317 9.3635 9.77744 7.9744C9.91777 7.68075 10.0253 7.3699 10.092 7.04413C10.1554 6.75966 10.186 6.46257 10.186 6.1586V0L2.13203 8.16252L0 10.3224Z" fill="#EFEFEF"/>
+        </g>
+        <path d="M14.6516 20.6965H5.96509V21.9744H14.6516V20.6965Z" fill="#6972B1"/>
+        <path d="M24.0352 20.6965H18.4199V21.9744H24.0352V20.6965Z" fill="#6972B1"/>
+        <path d="M17.7928 30.3433H5.96484V31.6212H17.7928V30.3433Z" fill="#6972B1"/>
+        <path d="M24.0352 25.5199H15.3486V26.7977H24.0352V25.5199Z" fill="#6972B1"/>
+        <path d="M11.5801 25.5199H5.96484V26.7977H11.5801V25.5199Z" fill="#6972B1"/>
+        <path d="M16.6117 5.81451V10.5588C16.6117 10.9075 16.6117 11.3124 16.6242 11.5602H16.1806C16.1715 11.4558 16.1625 11.1862 16.1625 10.9385C15.9791 11.403 15.6736 11.6324 15.0489 11.6324C14.0972 11.6324 13.6479 10.8146 13.6479 9.5528C13.6479 8.3633 14.1911 7.49267 15.161 7.49267C15.7788 7.49267 16.055 7.76223 16.1613 7.99853V5.81451H16.6117ZM14.1187 9.5356C14.1187 10.6712 14.5386 11.2126 15.1429 11.2126C15.9791 11.2126 16.1715 10.5255 16.1715 9.47251C16.1715 8.23253 15.8558 7.90791 15.1881 7.90791C14.5205 7.90791 14.1187 8.46653 14.1187 9.53445V9.5356Z" fill="white"/>
+        <path d="M20.5722 9.50003C20.5722 10.7354 20.1082 11.6278 19.0139 11.6278C17.9196 11.6278 17.4907 10.7239 17.4907 9.51379C17.4907 8.30364 18.0407 7.49152 19.0501 7.49152C20.0596 7.49152 20.5722 8.2612 20.5722 9.49888V9.50003ZM17.9615 9.51838C17.9615 10.553 18.3372 11.2218 19.0388 11.2218C19.7755 11.2218 20.0992 10.5611 20.0992 9.50232C20.0992 8.53764 19.7382 7.89987 19.0275 7.89987C18.3168 7.89987 17.9615 8.49864 17.9615 9.51953V9.51838Z" fill="white"/>
+        <path d="M24.0977 10.3615C23.9777 10.9167 23.6337 11.6359 22.6922 11.6359C21.6556 11.6359 21.2007 10.8318 21.2007 9.55279C21.2007 8.43555 21.6658 7.49152 22.7307 7.49152C23.7209 7.49152 24.0479 8.27726 24.0932 8.79229H23.6292C23.567 8.41376 23.3576 7.89528 22.7228 7.89528C21.9838 7.89528 21.6692 8.59385 21.6692 9.5505C21.6692 10.6104 22.0189 11.231 22.708 11.231C23.3135 11.231 23.5217 10.7664 23.636 10.3592H24.0966L24.0977 10.3615Z" fill="white"/>
+      </svg>
+    }
+  </div>
+
+  <div class="item-document__info">
+    <span class="item-document__name" [iusPopoverContent]="fileName">{{ fileName }}</span>
+    <span class="item-document__size">({{ fileSizeLabel }})</span>
+  </div>
+
+  <div class="item-document__actions">
+    @if (showDelete) {
+      <ius-button-squared-tertiary
+        [iconName]="'icon-delete'"
+        (buttonClicked)="onDelete($event)"
+      ></ius-button-squared-tertiary>
+    }
+  </div>
+</div>

package/src/lib/item-document/item-document.component.scss

@@ -0,0 +1,72 @@
+@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;
+
+
+.ius-item-document {
+  display: flex;
+  padding: 6px 6px 6px 12px;
+  align-items: center;
+  gap: variables.$spacing-xs;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #c9c6c5;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #9b9694;
+  }
+}
+
+.item-document__icon {
+  display: flex;
+  width: 30px;
+  height: 38px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.item-document__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 5px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.item-document__name {
+  color: #000;
+  font-family: typography.$font-secondary;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0.1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-document__size {
+  color: #000;
+  font-family: typography.$font-secondary;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: 0.1px;
+}
+
+.item-document__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}

package/src/lib/item-document/item-document.component.spec.ts

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

package/src/lib/item-document/item-document.component.ts

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonSquaredTertiaryComponent } from '../button-squared-tertiary';
+import { PopoverDirective } from '../directives/popover.directive';
+
+@Component({
+  selector: 'ius-item-document',
+  standalone: true,
+  imports: [CommonModule, ButtonSquaredTertiaryComponent, PopoverDirective],
+  templateUrl: './item-document.component.html',
+  styleUrl: './item-document.component.scss'
+})
+export class ItemDocumentComponent {
+  @Input() fileName: string = '';
+  @Input() fileSize: number = 0;
+  /** Unidad en la que viene `fileSize`. Default `'bytes'` (igual que `File.size`).
+   *  Si el backend devuelve el peso en KB, pasar `'kb'` y la lib convierte internamente. */
+  @Input() fileSizeUnit: 'bytes' | 'kb' = 'bytes';
+  @Input() fileType: string = '';
+  @Input() showDelete: boolean = true;
+
+  @Output() deleteClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() itemClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  get isPdf(): boolean {
+    return this.fileType.includes('pdf');
+  }
+
+  get fileSizeLabel(): string {
+    // Normalizar a bytes según la unidad declarada en el input.
+    const bytes = this.fileSizeUnit === 'kb' ? this.fileSize * 1024 : this.fileSize;
+
+    if (bytes >= 1024 * 1024) {
+      const mb = bytes / (1024 * 1024);
+      return `${parseFloat(mb.toFixed(1))} MB`;
+    }
+    if (bytes >= 1024) {
+      return `${Math.round(bytes / 1024)} KB`;
+    }
+    return `${Math.round(bytes)} B`;
+  }
+
+  onDelete(event: Event) {
+    event.stopPropagation();
+    this.deleteClicked.emit();
+  }
+
+  onItemClick() {
+    this.itemClicked.emit();
+  }
+}

package/src/lib/linear-progress-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './linear-progress-bar.component';
+

package/src/lib/linear-progress-bar/linear-progress-bar.component.html

@@ -0,0 +1,4 @@
+<div class="bar-container">
+    <div class="bar-fill" [style.flex-basis.%]="porcentaje"></div>
+    <div class="bar-empty" [style.flex-basis.%]="99 - porcentaje"></div>
+  </div>