@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

package/src/lib/notifications/notifications.component.ts

@@ -0,0 +1,64 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { DatePipe } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SimpleDividerComponent } from "../simple-divider/simple-divider.component";
+import { NotificationCardComponent } from "../notification-card/notification-card.component";
+import { ButtonSquaredTertiaryComponent } from "../button-squared-tertiary/button-squared-tertiary.component";
+import { IconLgComponent } from "../icon-lg/icon-lg.component";
+import { Alert } from "../toolbar/toolbar.component";
+
+@Component({
+  selector: 'ius-notifications',
+  standalone: true,
+  imports: [NotificationCardComponent, SimpleDividerComponent, ButtonSquaredTertiaryComponent, DatePipe, IconLgComponent],
+  templateUrl: './notifications.component.html',
+  styleUrl: './notifications.component.scss',
+  animations: [
+    trigger('slideInOut', [
+      state('void', style({
+        transform: 'translateX(100%)',
+        opacity: 0
+      })),
+      state('*', style({
+        transform: 'translateX(0)',
+        opacity: 1
+      })),
+      transition('void => *', [
+        animate('300ms ease-in')
+      ]),
+      transition('* => void', [
+        animate('300ms ease-out')
+      ])
+    ])
+  ],
+})
+export class NotificationsComponent {
+  @Input({ required: true }) alerts: Alert[] = [];
+  @Input() titleDrawer: string = "Title Drawer";
+  @Input() percentProgressBar: number = 50;
+
+  @Output() onDoneAlert: EventEmitter<any> = new EventEmitter();
+  @Output() onPostponeAlert: EventEmitter<any> = new EventEmitter();
+  @Output() onPressedBackEvent: EventEmitter<any> = new EventEmitter();
+  @Output() onDrawerClosed = new EventEmitter<void>();
+
+  isVisible: boolean = true;
+
+  close() {
+    this.isVisible = false;
+  }
+
+  onAnimDone(event: any) {
+    if (event.toState === 'void') {
+      this.onDrawerClosed.emit();
+    }
+  }
+
+  onPostpone(alert: Alert, time: string) {
+    this.onPostponeAlert.emit({ alert, time });
+  }
+
+  onClickDone(alertaID: number) {
+    this.onDoneAlert.emit(alertaID);
+  }
+}

package/src/lib/option/index.ts

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

package/src/lib/option/option.component.html

@@ -0,0 +1,11 @@
+<button class="ius-list" [disabled]="disabled" (click)="seleccionar()" (mouseenter)="onMouseEnter()">
+    @if(leadingIcon && !iconHidden) {
+    <ius-icon-sm [iconName]="leadingIcon" class="leading-icon"></ius-icon-sm>
+    }
+    <div class="content">
+        <ng-content></ng-content>
+    </div>
+    @if(checked){
+    <ius-icon-sm iconName="icon-check-circle" class="icon-color"></ius-icon-sm>
+    }
+</button>

package/src/lib/option/option.component.scss

@@ -0,0 +1,54 @@
+@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-list {
+    display: flex;
+    padding: variables.$spacing-xs 20px variables.$spacing-xs 12px;
+    height: 36px;
+    width: 100%;
+    align-items: center;
+    gap: variables.$spacing-xs;
+    cursor: pointer;
+    background: colors.$neutral-white;
+    user-select: none;
+    border: none;
+    cursor: pointer;
+
+
+    &:hover:not(:disabled) {
+        background: colors.$info-100;
+    }
+
+    &:active:not(:disabled) {
+        background: colors.$info-200 !important;
+        color: semantic-colors.$color-text-primary-on-light;
+    }
+
+    &:disabled {
+        background: colors.$neutral-1;
+        color: semantic-colors.$color-text-disabled-on-light;
+        cursor: default;
+    }
+}
+
+.icon-color {
+    color: colors.$info-500;
+}
+
+.leading-icon {
+    color: #333;
+    flex-shrink: 0;
+}
+
+.content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: block;
+    text-align: left;
+    flex: 1 0 0;
+    min-width: 0;
+    font-family: typography.$font-secondary;
+}

package/src/lib/option/option.component.spec.ts

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

package/src/lib/option/option.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconSmComponent } from "../icon-sm/icon-sm.component";
+
+@Component({
+  selector: 'ius-option',
+  standalone: true,
+  imports: [IconSmComponent],
+  templateUrl: './option.component.html',
+  styleUrl: './option.component.scss'
+})
+export class OptionComponent {
+
+  @Input() disabled: boolean = false;
+  @Input() checked: boolean = false;
+  @Input() leadingIcon: string = '';
+  @Output() optionClick = new EventEmitter<any>();
+
+  iconHidden = false;
+
+  onMouseEnter() {
+    if (this.leadingIcon) this.iconHidden = true;
+  }
+
+  seleccionar() {
+    this.optionClick.emit();
+  }
+}

package/src/lib/option-item/index.ts

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

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

@@ -0,0 +1,6 @@
+<button class="item body-large" [disabled]="disabled" [ngClass]="{'show-icon': iconName}" (click)="onClick($event)">
+    @if(iconName){
+        <ius-icon-sm [iconName]="iconName" class="icon-c"></ius-icon-sm>
+    }
+    <ng-content></ng-content>
+</button>

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

@@ -0,0 +1,47 @@
+@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;
+
+.item {
+    display: flex;
+    position: relative;
+    color: semantic-colors.$color-text-primary-on-light;
+    height: 30px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: variables.$spacing-xxs variables.$spacing-xs;
+    gap: variables.$spacing-xs;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+
+    border-radius: variables.$radius-md;
+    background: var(--Neutral-Color-Neutral-White, #FFF);
+
+    &:hover:not(:disabled) {
+        background: semantic-colors.$color-btn-secondary-1-hovered;
+    }
+
+    &:active:not(:disabled) {
+        background: colors.$info-200 !important;
+    }
+
+    &:disabled {
+        background: colors.$neutral-white;
+        color: semantic-colors.$color-text-disabled-on-light;
+        cursor: default;
+
+        .icon-c {
+            color: semantic-colors.$color-text-disabled-on-light;
+        }
+    }
+}
+
+.show-icon{
+    height: 38px;
+}
+
+.icon-c {
+    color: semantic-colors.$color-text-primary-on-light;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconSmComponent } from "../icon-sm";
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'ius-option-item',
+  standalone: true,
+  imports: [IconSmComponent, NgClass],
+  templateUrl: './option-item.component.html',
+  styleUrl: './option-item.component.scss'
+})
+export class OptionItemComponent {
+
+  @Input() checked: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() iconName: string = '';
+  @Output() optionClick = new EventEmitter<Event>();
+
+  onClick(event: Event) {
+    this.optionClick.emit(event);
+  }
+}

package/src/lib/page-not-found/index.ts

@@ -0,0 +1,2 @@
+export * from './page-not-found.component';
+

package/src/lib/page-not-found/page-not-found.component.html

@@ -0,0 +1,46 @@
+<div class="ius-state-container" aria-live="polite">
+    <div class="ius-state-inner">
+        <div class="ius-state-img-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110" fill="none">
+            <path d="M7.27 93.64H102.72C103.98 93.64 104.99 94.66 104.99 95.91V100.46C104.99 104.23 101.94 107.28 98.17 107.28H11.82C8.05 107.28 5 104.23 5 100.46V95.91C5 94.65 6.02 93.64 7.27 93.64Z" fill="#4795EA"/>
+            <path d="M66.36 98.18H43.63C41.12 98.18 39.08 96.14 39.08 93.63H70.9C70.9 96.14 68.86 98.18 66.35 98.18H66.36Z" fill="url(#paint0_linear_4454_1610)"/>
+            <path d="M41.36 16.36C40.1 16.36 39.09 17.38 39.09 18.63V20.9H35.61L38.93 12.65C39.4 11.48 38.83 10.16 37.66 9.7C36.49 9.23 35.17 9.8 34.71 10.97L30.16 22.33C29.7 23.5 30.26 24.82 31.43 25.28C31.7 25.39 31.98 25.44 32.27 25.44H39.09V27.71C39.09 28.97 40.11 29.98 41.36 29.98C42.61 29.98 43.63 28.96 43.63 27.71V18.62C43.63 17.36 42.61 16.35 41.36 16.35V16.36Z" fill="#F0F7FC"/>
+            <path d="M77.73 16.36C76.47 16.36 75.46 17.38 75.46 18.63V20.9H71.98L75.3 12.65C75.77 11.48 75.2 10.16 74.03 9.7C72.86 9.23 71.54 9.8 71.08 10.97L66.53 22.33C66.07 23.5 66.63 24.82 67.8 25.28C68.07 25.39 68.35 25.44 68.64 25.44H75.46V27.71C75.46 28.97 76.48 29.98 77.73 29.98C78.98 29.98 80 28.96 80 27.71V18.62C80 17.36 78.98 16.35 77.73 16.35V16.36Z" fill="#F0F7FC"/>
+            <path d="M55.0001 9.54999C51.2301 9.54999 48.1801 12.6 48.1801 16.37V23.19C48.1801 26.96 51.2301 30.01 55.0001 30.01C58.7701 30.01 61.8201 26.96 61.8201 23.19V16.37C61.8201 12.6 58.7701 9.54999 55.0001 9.54999ZM57.2701 23.18C57.2701 24.44 56.2501 25.45 55.0001 25.45C53.7501 25.45 52.7301 24.43 52.7301 23.18V16.36C52.7301 15.1 53.7501 14.09 55.0001 14.09C56.2501 14.09 57.2701 15.11 57.2701 16.36V23.18Z" fill="#F0F7FC"/>
+            <path d="M81.76 20.91H28.25C17.9223 20.91 9.55005 29.2823 9.55005 39.61V74.94C9.55005 85.2677 17.9223 93.64 28.25 93.64H81.76C92.0878 93.64 100.46 85.2677 100.46 74.94V39.61C100.46 29.2823 92.0878 20.91 81.76 20.91Z" fill="url(#paint1_linear_4454_1610)"/>
+            <path d="M82.96 27.73H27.03C21.1371 27.73 16.36 32.5071 16.36 38.4V76.15C16.36 82.0429 21.1371 86.82 27.03 86.82H82.96C88.8529 86.82 93.63 82.0429 93.63 76.15V38.4C93.63 32.5071 88.8529 27.73 82.96 27.73Z" fill="#F0F7FC"/>
+            <path d="M86.82 7.27V32.27C86.82 34.78 84.78 36.82 82.27 36.82H58.77L57.11 40.12C56.54 41.24 55.17 41.68 54.05 41.11C53.63 40.89 53.28 40.55 53.06 40.12L51.33 36.82H27.72C25.21 36.82 23.17 34.78 23.17 32.27V7.27C23.17 4.76 25.21 2.72 27.72 2.72H82.27C84.78 2.72 86.82 4.76 86.82 7.27Z" fill="#A1B3BF"/>
+            <path d="M41.36 16.36C40.1 16.36 39.09 17.38 39.09 18.63V20.9H35.61L38.93 12.65C39.4 11.48 38.83 10.16 37.66 9.7C36.49 9.23 35.17 9.8 34.71 10.97L30.16 22.33C29.7 23.5 30.26 24.82 31.43 25.28C31.7 25.39 31.98 25.44 32.27 25.44H39.09V27.71C39.09 28.97 40.11 29.98 41.36 29.98C42.61 29.98 43.63 28.96 43.63 27.71V18.62C43.63 17.36 42.61 16.35 41.36 16.35V16.36Z" fill="#F0F7FC"/>
+            <path d="M77.73 16.36C76.47 16.36 75.46 17.38 75.46 18.63V20.9H71.98L75.3 12.65C75.77 11.48 75.2 10.16 74.03 9.7C72.86 9.23 71.54 9.8 71.08 10.97L66.53 22.33C66.07 23.5 66.63 24.82 67.8 25.28C68.07 25.39 68.35 25.44 68.64 25.44H75.46V27.71C75.46 28.97 76.48 29.98 77.73 29.98C78.98 29.98 80 28.96 80 27.71V18.62C80 17.36 78.98 16.35 77.73 16.35V16.36Z" fill="#F0F7FC"/>
+            <path d="M55.0001 9.54999C51.2301 9.54999 48.1801 12.6 48.1801 16.37V23.19C48.1801 26.96 51.2301 30.01 55.0001 30.01C58.7701 30.01 61.8201 26.96 61.8201 23.19V16.37C61.8201 12.6 58.7701 9.54999 55.0001 9.54999ZM57.2701 23.18C57.2701 24.44 56.2501 25.45 55.0001 25.45C53.7501 25.45 52.7301 24.43 52.7301 23.18V16.36C52.7301 15.1 53.7501 14.09 55.0001 14.09C56.2501 14.09 57.2701 15.11 57.2701 16.36V23.18Z" fill="#F0F7FC"/>
+            <path d="M31.5 64.75C30.61 63.87 29.18 63.87 28.3 64.75L27.64 65.43L26.96 64.75C26.07 63.87 24.64 63.87 23.76 64.75C22.87 65.63 22.86 67.07 23.75 67.96C23.75 67.96 23.75 67.96 23.76 67.97L24.42 68.63L23.76 69.29C22.87 70.17 22.86 71.61 23.75 72.5C23.75 72.5 23.75 72.5 23.76 72.51C24.65 73.39 26.08 73.39 26.96 72.51L27.64 71.83L28.3 72.51C29.19 73.39 30.62 73.39 31.5 72.51C32.39 71.63 32.4 70.19 31.51 69.3C31.51 69.3 31.51 69.3 31.5 69.29L30.93 68.63L31.59 67.97C32.46 67.06 32.42 65.62 31.51 64.76C31.51 64.76 31.51 64.76 31.5 64.75Z" fill="#B4CDE1"/>
+            <path d="M31.5 51.11C30.61 50.23 29.18 50.23 28.3 51.11L27.64 51.79L26.96 51.11C26.07 50.23 24.64 50.23 23.76 51.11C22.87 51.99 22.86 53.43 23.75 54.32C23.75 54.32 23.75 54.32 23.76 54.33L24.42 54.99L23.76 55.65C22.87 56.53 22.86 57.97 23.75 58.86C23.75 58.86 23.75 58.86 23.76 58.87C24.65 59.75 26.08 59.75 26.96 58.87L27.64 58.19L28.3 58.87C29.19 59.75 30.62 59.75 31.5 58.87C32.39 57.99 32.4 56.55 31.51 55.66C31.51 55.66 31.51 55.66 31.5 55.65L30.93 54.99L31.59 54.33C32.46 53.42 32.42 51.98 31.51 51.12C31.51 51.12 31.51 51.12 31.5 51.11Z" fill="#B4CDE1"/>
+            <path d="M43.25 56.25C43.93 55.21 43.65 53.81 42.61 53.11C41.57 52.41 40.16 52.69 39.46 53.74C36.21 58.63 36.21 64.99 39.46 69.88C39.88 70.52 40.6 70.91 41.37 70.9C42.63 70.9 43.64 69.87 43.63 68.62C43.63 68.18 43.5 67.75 43.26 67.38C41.01 64.01 41.01 59.61 43.26 56.24L43.25 56.25Z" fill="#B4CDE1"/>
+            <path d="M84.55 55H52.73C51.47 55 50.46 53.98 50.46 52.73C50.46 51.48 51.48 50.46 52.73 50.46H84.55C85.81 50.46 86.82 51.48 86.82 52.73C86.82 53.98 85.8 55 84.55 55Z" fill="#D7E9F7"/>
+            <path d="M84.55 64.09H52.73C51.47 64.09 50.46 63.07 50.46 61.82C50.46 60.57 51.48 59.55 52.73 59.55H84.55C85.81 59.55 86.82 60.57 86.82 61.82C86.82 63.07 85.8 64.09 84.55 64.09Z" fill="#D7E9F7"/>
+            <path d="M73.18 73.18H52.73C51.47 73.18 50.46 72.16 50.46 70.91C50.46 69.66 51.48 68.64 52.73 68.64H73.18C74.44 68.64 75.45 69.66 75.45 70.91C75.45 72.16 74.43 73.18 73.18 73.18Z" fill="#D7E9F7"/>
+            <defs>
+                <linearGradient id="paint0_linear_4454_1610" x1="36.1737" y1="92.5078" x2="67.9703" y2="92.5078" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#D3E6F5"/>
+                <stop offset="1" stop-color="#F0F7FC"/>
+                </linearGradient>
+                <linearGradient id="paint1_linear_4454_1610" x1="52.072" y1="90.2671" x2="52.072" y2="17.4977" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#54A5FF"/>
+                <stop offset="1" stop-color="#8AD3FE"/>
+                </linearGradient>
+            </defs>
+            </svg>
+        </div>
+        <div class="ius-state-text">
+            <span class="h4">{{ title }}</span>
+            <span class="h5">{{ subtitle }}</span>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer-interno">
+            <div class="container-button">
+                <ius-button-standard-primary [iconName]="'icon-home'" (buttonClicked)="goHome()">Volver al inicio</ius-button-standard-primary>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/page-not-found/page-not-found.component.scss

@@ -0,0 +1,72 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+
+.ius-state-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 0;
+    align-self: stretch;
+    height: 100%;
+    border-radius: variables.$radius-md;
+    border: 1px solid colors.$neutral-4;
+    background: colors.$neutral-white;
+    gap: var(--Spacing-Spacing-xxs, 4px);
+    padding: 8px;
+
+    &[data-state='idle'] {
+        display: none;
+    }
+}
+
+.ius-state-inner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-md;
+}
+
+.ius-state-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    text-align: center;
+}
+
+.ius-state-img-wrapper {
+    display: flex;
+    width: 110px;
+    height: 110px;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: variables.$spacing-2xl;
+    align-self: stretch;
+}
+
+.footer-interno {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: variables.$spacing-xl;
+    align-self: stretch;
+}
+
+.container-button {
+    display: flex;
+    padding: 0 variables.$spacing-md;
+    flex-direction: column;
+    align-items: center;
+    gap: variables.$spacing-sm;
+    align-self: stretch;
+    margin-top: variables.$spacing-sm;
+}

package/src/lib/page-not-found/page-not-found.component.spec.ts

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

package/src/lib/page-not-found/page-not-found.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { ButtonStandardPrimaryComponent } from "../button-standard-primary";
+
+@Component({
+  selector: 'ius-page-not-found',
+  standalone: true,
+  imports: [ButtonStandardPrimaryComponent],
+  templateUrl: './page-not-found.component.html',
+  styleUrl: './page-not-found.component.scss'
+})
+export class PageNotFoundComponent {
+  @Input() title = 'Página no encontrada';
+  @Input() subtitle = 'Lo sentimos, la página que estás buscando no existe.';
+
+  @Input() homeRoute: string = '/';
+
+  constructor(private router: Router) {}
+
+  goHome(): void {
+    this.router.navigate([this.homeRoute]);
+  }
+}

package/src/lib/popover/popover.component.html

@@ -0,0 +1,8 @@
+<div class="popover-bubble">
+    @if(label){
+    <span class="caption-sm">{{ label }}</span>
+    }
+    @if(content){
+    <span class="body-sm">{{ content }}</span>
+    }
+</div>

package/src/lib/popover/popover.component.scss

@@ -0,0 +1,80 @@
+@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;
+
+:host {
+    display: inline-block;
+    width: max-content;
+    max-width: 150px;
+    z-index: 1000;  
+    position: relative;
+}
+
+.popover-bubble {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: variables.$spacing-xxs;
+    padding: variables.$spacing-sm;
+    border-radius: variables.$radius-md;
+    background: colors.$neutral-white;
+    box-shadow: variables.$elevation-200;
+    
+    overflow-wrap: anywhere;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+/* Base de la cola (triángulo) */
+.popover-bubble::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .06));
+}
+
+.popover-bubble .caption-sm,
+.popover-bubble .body-sm {
+    display: block; 
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-wrap: break-word;
+}
+
+/* Popover a la DERECHA del host -> cola al lado IZQUIERDO */
+:host(.tail-left) .popover-bubble::before {
+    left: -8px;
+    top: calc(50% - 8px);
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid colors.$neutral-white;
+}
+
+/* Popover a la IZQUIERDA del host -> cola al lado DERECHO */
+:host(.tail-right) .popover-bubble::before {
+    right: -8px;
+    top: calc(50% - 8px);
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 8px solid colors.$neutral-white;
+}
+
+/* Popover ARRIBA del host -> cola abajo y centrada */
+:host(.tail-bottom) .popover-bubble::before {
+    left: calc(50% - 8px);
+    bottom: -8px;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid colors.$neutral-white;
+}
+
+/* Popover ABAJO del host -> cola arriba y centrada */
+:host(.tail-top) .popover-bubble::before {
+    left: calc(50% - 8px);
+    top: -8px;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid colors.$neutral-white;
+}

package/src/lib/popover/popover.component.spec.ts

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

package/src/lib/popover/popover.component.ts

@@ -0,0 +1,18 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'ius-popover',
+  standalone: true,
+  imports: [],
+  templateUrl: './popover.component.html',
+  styleUrl: './popover.component.scss'
+})
+export class PopoverComponent {
+  @Input() label = '';
+  @Input() content = '';
+
+  @Input() positionClass: 'tail-left' | 'tail-right' | 'tail-top' | 'tail-bottom' = 'tail-left';
+  @HostBinding('class') get hostClass() { return this.positionClass; }
+
+  @HostBinding('attr.role') role = 'tooltip';
+}

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

@@ -0,0 +1,23 @@
+<div
+  class="sb"
+  role="progressbar"
+  [attr.aria-valuemin]="0"
+  [attr.aria-valuemax]="t()"
+  [attr.aria-valuenow]="used()"
+>
+  <div class="seg s1" [style.width.%]="pct().p1" (mouseenter)="onMouseEnter('s1')" (mouseleave)="onMouseLeave('s1')">
+    <ius-popover *ngIf="showPopover1" content="{{ a1() }}" [label]="titleV1" positionClass="tail-top"></ius-popover>
+  </div>
+  <div class="seg s2" [style.width.%]="pct().p2" (mouseenter)="onMouseEnter('s2')" (mouseleave)="onMouseLeave('s2')">
+    <ius-popover *ngIf="showPopover2" content="{{ a2() }}" [label]="titleV2" positionClass="tail-top"></ius-popover>
+  </div>
+  <div class="seg s3" [style.width.%]="pct().p3" (mouseenter)="onMouseEnter('s3')" (mouseleave)="onMouseLeave('s3')">
+    <ius-popover *ngIf="showPopover3" content="{{ a3() }}" [label]="titleV3" positionClass="tail-top"></ius-popover>
+  </div>
+  <!-- <div class="seg s4" [style.width.%]="pct().p4" (mouseenter)="onMouseEnter('s4')" (mouseleave)="onMouseLeave('s4')">
+    <ius-popover *ngIf="showPopover4" content="{{ a4() }}" [label]="titleV4" positionClass="tail-top"></ius-popover>
+  </div> -->
+  <div class="seg gray" [style.width.%]="pct().pg" (mouseenter)="onMouseEnter('gray')" (mouseleave)="onMouseLeave('gray')">
+    <ius-popover *ngIf="showPopoverGray" content="{{ available() }}" positionClass="tail-top"></ius-popover>
+  </div>
+</div>

package/src/lib/progress-bar/progress-bar.component.scss

@@ -0,0 +1,37 @@
+@use '@litigiovirtual/ius-design-styles/lib/semantic-colors' as semantic-colors;
+@use '@litigiovirtual/ius-design-styles/lib/colors' as colors;
+
+:host {
+    display: block;
+}
+
+.sb {
+    width: 100%;
+    height: 20px;
+    border-radius: 10px;
+    display: flex;
+    background: #E5E7EB;
+    position: relative;
+}
+
+.seg {
+    height: 100%;
+}
+
+.s1 {
+    background: colors.$info-700;
+    border-radius: 10px 0px 0px 10px;
+}
+
+.s2 {
+    background: colors.$info-500;
+}
+
+.s3 {
+    background: colors.$info-400;
+}
+
+.gray {
+    background: #E5E7EB;
+    border-radius: 0 10px 10px 0;
+}