@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,26 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+
+.bar-container {
+  display: flex;
+  width: 100%;
+  height: 4px;
+  align-items: flex-start;
+  gap: variables.$spacing-xxs;
+}
+
+.bar-fill {
+  background-color: colors.$info-500;
+  border-radius: variables.$radius-pill;
+  flex-shrink: 0;
+  align-self: stretch;
+  transition: flex-basis 0.4s ease;
+}
+
+.bar-empty {
+  flex: 1 0 0;
+  align-self: stretch;
+  background-color: colors.$neutral-4;
+  border-radius: variables.$radius-pill;
+  transition: flex-basis 0.4s ease;
+}

package/src/lib/linear-progress-bar/linear-progress-bar.component.spec.ts

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

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

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ius-linear-progress-bar',
+  standalone: true,
+  imports: [],
+  templateUrl: './linear-progress-bar.component.html',
+  styleUrl: './linear-progress-bar.component.scss'
+})
+export class LinearProgressBarComponent {
+  @Input() porcentaje: number = 0; // de 0 a 100
+}

package/src/lib/loading-circle/index.ts

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

package/src/lib/loading-circle/loading-circle.component.html

@@ -0,0 +1,3 @@
+@if (show) {
+    <div class="loader-circle"></div>
+}

package/src/lib/loading-circle/loading-circle.component.scss

@@ -0,0 +1,19 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+
+.loader-circle {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  border: 4px solid #fff;
+  border-top-color: colors.$primary-900;
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/lib/loading-circle/loading-circle.component.spec.ts

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

package/src/lib/loading-circle/loading-circle.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ius-loading-circle',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './loading-circle.component.html',
+  styleUrl: './loading-circle.component.scss'
+})
+export class LoadingCircleComponent {
+  @Input() show = true;
+}

package/src/lib/loading-component-dynamic/index.ts

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

package/src/lib/loading-component-dynamic/loading-animation.const.ts

@@ -0,0 +1,274 @@
+export const DEFAULT_LOADING_ANIMATION = {
+  nm: '画板',
+  ddd: 0,
+  h: 200,
+  w: 200,
+  meta: { g: '@lottiefiles/toolkit-js 0.71.10' },
+  layers: [
+    {
+      ty: 4,
+      nm: '矩形副本 3',
+      sr: 1,
+      st: 0,
+      op: 150,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [0, 0, 0], ix: 1 },
+        s: { a: 0, k: [258.9219701314434, 258.9219701314434], ix: 6 },
+        sk: { a: 0, k: 0 },
+        p: { a: 0, k: [146.60584722294925, 146.60595368216735], ix: 2 },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: { a: 0, k: 100, ix: 11 },
+      },
+      shapes: [
+        {
+          ty: 'gr',
+          bm: 0,
+          hd: false,
+          mn: 'ADBE Vector Group',
+          nm: '矩形副本 3',
+          ix: 1,
+          cix: 2,
+          np: 2,
+          it: [
+            {
+              ty: 'rc',
+              bm: 0,
+              hd: false,
+              mn: 'ADBE Vector Shape - Rect',
+              nm: '矩形路径 1',
+              d: 1,
+              p: {
+                a: 1,
+                k: [
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, 0], t: 6, ti: [0, 6], to: [0, -3] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, -18], t: 10, ti: [0, 3], to: [0, -6] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, -36], t: 20, ti: [0, 0], to: [0, 0] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, -36], t: 36, ti: [3, 0], to: [-3, 0] },
+                  { s: [-18, -36], t: 40 },
+                ],
+                ix: 3,
+              },
+              r: { a: 0, k: 8, ix: 4 },
+              s: {
+                a: 1,
+                k: [
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 28], t: 6 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 64], t: 10 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 28], t: 20 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 28], t: 36 },
+                  { s: [64, 28], t: 40 },
+                ],
+                ix: 2,
+              },
+            },
+            {
+              ty: 'fl',
+              bm: 0,
+              hd: false,
+              mn: 'ADBE Vector Graphic - Fill',
+              nm: '填充 1',
+              c: { a: 0, k: [0.4745, 0.6745, 1], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 },
+            },
+            {
+              ty: 'tr',
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [0, 0], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 },
+            },
+          ],
+        },
+      ],
+      ind: 1,
+    },
+    {
+      ty: 4,
+      nm: '矩形副本 2',
+      sr: 1,
+      st: 0,
+      op: 150,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [0, 0, 0], ix: 1 },
+        s: { a: 0, k: [258.9219701314434, 258.9219701314434], ix: 6 },
+        sk: { a: 0, k: 0 },
+        p: { a: 0, k: [53.39393797562962, 146.60595368216735], ix: 2 },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: { a: 0, k: 100, ix: 11 },
+      },
+      shapes: [
+        {
+          ty: 'gr',
+          bm: 0,
+          hd: false,
+          mn: 'ADBE Vector Group',
+          nm: '矩形副本 2',
+          ix: 1,
+          cix: 2,
+          np: 2,
+          it: [
+            {
+              ty: 'rc',
+              bm: 0,
+              hd: false,
+              mn: 'ADBE Vector Shape - Rect',
+              nm: '矩形路径 1',
+              d: 1,
+              p: {
+                a: 1,
+                k: [
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, 0], t: 16, ti: [-6, 0], to: [3, 0] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [18, 0], t: 20, ti: [-3, 0], to: [6, 0] },
+                  { s: [36, 0], t: 30 },
+                ],
+                ix: 3,
+              },
+              r: { a: 0, k: 8, ix: 4 },
+              s: {
+                a: 1,
+                k: [
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 28], t: 16 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [64, 28], t: 20 },
+                  { s: [28, 28], t: 30 },
+                ],
+                ix: 2,
+              },
+            },
+            {
+              ty: 'fl',
+              bm: 0,
+              hd: false,
+              mn: 'ADBE Vector Graphic - Fill',
+              nm: '填充 1',
+              c: { a: 0, k: [0.7686, 0.8745, 1], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 },
+            },
+            {
+              ty: 'tr',
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [0, 0], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 },
+            },
+          ],
+        },
+      ],
+      ind: 2,
+    },
+    {
+      ty: 4,
+      nm: '矩形',
+      sr: 1,
+      st: 0,
+      op: 150,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [0, 0, 0], ix: 1 },
+        s: { a: 0, k: [258.9219701314434, 258.9219701314434], ix: 6 },
+        sk: { a: 0, k: 0 },
+        p: { a: 0, k: [99.99989259928942, 53.39404443484773], ix: 2 },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: { a: 0, k: 100, ix: 11 },
+      },
+      shapes: [
+        {
+          ty: 'gr',
+          bm: 0,
+          hd: false,
+          mn: 'ADBE Vector Group',
+          nm: '矩形',
+          ix: 1,
+          cix: 2,
+          np: 2,
+          it: [
+            {
+              ty: 'rc',
+              bm: 0,
+              hd: false,
+              mn: 'ADBE Vector Shape - Rect',
+              nm: '矩形路径 1',
+              d: 1,
+              p: {
+                a: 1,
+                k: [
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, 0], t: 0, ti: [3, 0], to: [-3, 0] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [-18, 0], t: 10, ti: [0, 0], to: [0, 0] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [-18, 0], t: 26, ti: [0, -6], to: [0, 3] },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [-18, 18], t: 30, ti: [0, -3], to: [0, 6] },
+                  { s: [-18, 36], t: 40 },
+                ],
+                ix: 3,
+              },
+              r: { a: 0, k: 8, ix: 4 },
+              s: {
+                a: 1,
+                k: [
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [64, 28], t: 0 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 28], t: 10 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 28], t: 26 },
+                  { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [28, 64], t: 30 },
+                  { s: [28, 28], t: 40 },
+                ],
+                ix: 2,
+              },
+            },
+            {
+              ty: 'fl',
+              bm: 0,
+              hd: false,
+              mn: 'ADBE Vector Graphic - Fill',
+              nm: '填充 1',
+              c: { a: 0, k: [0.6784, 0.9608, 1], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 },
+            },
+            {
+              ty: 'tr',
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [0, 0], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 },
+            },
+          ],
+        },
+      ],
+      ind: 3,
+    },
+  ],
+  v: '5.7.1',
+  fr: 30,
+  op: 40,
+  ip: 0,
+  assets: [],
+} as const;

package/src/lib/loading-component-dynamic/loading-component-dynamic.component.html

@@ -0,0 +1,42 @@
+<div class="ius-state-container" [attr.data-state]="state" aria-live="polite">
+    <div class="ius-state-inner">
+
+        @switch (state) {
+
+        @case ('loading') {
+        <lottie-player [attr.src]="src" speed="1" style="width: 64px; height: 64px;" loop autoplay>
+        </lottie-player>
+        <div class="ius-state-text">
+            <span class="h4">{{ titleLoading }}</span>
+            <span class="h5">{{ subtitleLoading }}</span>
+        </div>
+        }
+
+        @case ('empty') {
+        <div class="ius-state-img-wrapper">
+            <img [src]="srcEmpty" alt="Sin resultados" />
+        </div>
+        <div class="ius-state-text">
+            <span class="h4">{{ titleEmpty }}</span>
+            <span class="h5">{{ subtitleEmpty }}</span>
+        </div>
+        }
+
+        @case ('error') {
+        <div class="ius-state-img-wrapper">
+            <img [src]="srcError" alt="Error" />
+        </div>
+        <div class="ius-state-text">
+            <span class="h4">{{ titleError }}</span>
+            <span class="h5">{{ subtitleError }}</span>
+        </div>
+        }
+
+        @default {
+
+        }
+
+        }
+
+    </div>
+</div>

package/src/lib/loading-component-dynamic/loading-component-dynamic.component.scss

@@ -0,0 +1,52 @@
+@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%;
+  box-sizing: border-box;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-4;
+  background: colors.$neutral-white;
+  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: 87px;
+  height: 87px;
+  justify-content: center;
+  align-items: center;
+}
+
+lottie-player {
+  display: block;
+  min-width: 64px;
+  min-height: 64px;
+}

package/src/lib/loading-component-dynamic/loading-component-dynamic.component.spec.ts

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

package/src/lib/loading-component-dynamic/loading-component-dynamic.component.ts

@@ -0,0 +1,44 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type LoadingState = 'loading' | 'empty' | 'error' | 'idle';
+
+@Component({
+  selector: 'ius-loading-component-dynamic',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './loading-component-dynamic.component.html',
+  styleUrl: './loading-component-dynamic.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class LoadingComponentDynamicComponent implements OnChanges {
+
+  @Input() loading = false;
+  @Input() empty = false;
+  @Input() error = false;
+  @Input() src: string = '';
+  @Input() srcEmpty: string = '';
+  @Input() srcError: string = '';
+
+  @Input() titleLoading = 'Estamos cargando la información';
+  @Input() subtitleLoading = 'Danos un momento por favor...';
+
+  @Input() titleEmpty = 'No hay nada aquí...';
+  @Input() subtitleEmpty = 'No encontramos resultados para mostrar.';
+
+  @Input() titleError = 'Ocurrió un error al cargar los datos...';
+  @Input() subtitleError = 'Inténtalo nuevamente.';
+
+  state: LoadingState = 'idle';
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.state = this.resolveState();
+  }
+
+  private resolveState(): LoadingState {
+    if (this.loading) return 'loading';
+    if (this.error)   return 'error';
+    if (this.empty)   return 'empty';
+    return 'idle';
+  }
+}

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

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

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

@@ -0,0 +1,9 @@
+<button (click)="onClick()" class="ius-btn" [ngClass]="{'isActive': isActive}">
+    <ius-icon-md [iconName]="iconName" class="icon-color"></ius-icon-md>
+    <div class="content">
+        <ng-content></ng-content>
+    </div>
+    @if (numberAlerts) {
+    <ius-badge class="badge" [number]="numberAlerts"></ius-badge>
+    }
+</button>

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

@@ -0,0 +1,55 @@
+@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;
+
+.icon-color {
+  color: colors.$success-500;
+}
+
+.badge {
+  margin-left: auto;
+}
+
+.ius-btn {
+  display: inline-flex;
+  width: 100%;
+  padding: variables.$spacing-xxs variables.$spacing-md;
+  align-items: center;
+  justify-content: space-between;
+  gap: variables.$spacing-sm;
+  border-radius: variables.$radius-md;
+  background-color: semantic-colors.$color-btn-secondary-1-default;
+  color: semantic-colors.$color-text-primary-on-light;
+  border: none;
+  cursor: pointer;
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-large;
+  line-height: typography.$line-height-large;
+
+  &:hover:not(:disabled) {
+    background-color: semantic-colors.$color-btn-secondary-1-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: semantic-colors.$color-btn-secondary-1-pressed;
+    color: semantic-colors.$color-text-primary-on-dark;
+    .icon-color {
+      color: semantic-colors.$color-text-primary-on-dark;
+    }
+  }
+
+  &.isActive {
+    background-color: semantic-colors.$color-btn-secondary-1-hovered;
+  }
+}
+
+.content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: block;
+    text-align: left;
+    flex: 1 0 0;
+    min-width: 0;
+}

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

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