@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/card-tipo-proceso/card-tipo-proceso.component.html

@@ -0,0 +1,61 @@
+<div class="general-container">
+  <div class="container" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" (click)="clickCard($event)">
+    <div class="container-content">
+      <div class="content">
+        <div class="general-info">
+          <div class="icon-container">
+            <div class="icon-shadow">
+              <ius-icon-lg [iconName]="'icon-strategy'"> </ius-icon-lg>
+            </div>
+          </div>
+          <div class="text-container">
+            <p class="state-text">{{ displayEstado }}</p>
+            <p class="process-type">{{ nombreTipoProceso }}</p>
+            <p class="subtitle">{{ tipoCompetente }}</p>
+          </div>
+        </div>
+        <div class="another-info">
+          <div class="title-text-container wt-creado">
+            <p class="title">Creado por</p>
+            <p class="text body-base-1" [iusPopoverContent]="usuarioCreacion">{{ usuarioCreacion }}</p>
+          </div>
+          <div class="title-text-container">
+            <p class="title">Fecha creación</p>
+            <p class="text body-base-1">{{ fechaCreacion }}</p>
+          </div>
+          <div class="title-text-container wt-modificado">
+            <p class="title">Modificado por</p>
+            <p class="text body-base-1" [iusPopoverContent]="usuarioModificacion ?? 'Sin registro'">{{
+              usuarioModificacion ?? 'Sin registro' }}</p>
+          </div>
+          <div class="title-text-container">
+            <p class="title">Estados</p>
+            <p class="text body-base-1">{{ cantidadEstados }}</p>
+          </div>
+          @if(hover){
+          <div class="buttons wt-etapas">
+            <div>
+              <ius-button-squared-tertiary iconName="icon-edit"
+                (buttonClicked)="clickEdit($event)"></ius-button-squared-tertiary>
+            </div>
+            @if(!isUsed){
+            <div>
+              <ius-button-squared-tertiary iconName="icon-delete"
+                (buttonClicked)="clickDelete($event)"></ius-button-squared-tertiary>
+            </div>
+            }
+          </div>
+          }@else{
+          <div class="title-text-container wt-etapas">
+            <p class="title">Etapas/Subetapas</p>
+            <p class="text body-base-1">{{ etapasSubetapas }}</p>
+          </div>
+          }
+        </div>
+      </div>
+      <button>
+        <ius-icon-md [iconName]="'icon-keyboard-arrow-right'"></ius-icon-md>
+      </button>
+    </div>
+  </div>
+</div>

package/src/lib/card-tipo-proceso/card-tipo-proceso.component.scss

@@ -0,0 +1,179 @@
+@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;
+
+.general-container {
+  position: relative;
+}
+
+p {
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  height: 86px;
+  box-sizing: border-box;
+  padding: variables.$spacing-md variables.$spacing-2xl;
+  align-items: center;
+  align-content: center;
+  gap: 12px variables.$spacing-sm;
+  align-self: stretch;
+  flex-wrap: wrap;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-4;
+  background: colors.$neutral-white;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid #C4DFFF;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+  }
+}
+
+.container-content {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-lg;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 8px variables.$spacing-xs;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.general-info {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-xs;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-shadow {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: variables.$spacing-none;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  aspect-ratio: 1/1;
+  border-radius: variables.$radius-pill;
+  background: colors.$info-200;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: variables.$spacing-none;
+}
+
+.state-text {
+  color: semantic-colors.$color-text-secundary-on-light;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: normal;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}
+
+.process-type {
+  color: semantic-colors.$color-text-primary-on-light;
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-large;
+  font-style: normal;
+  font-weight: typography.$font-weight-medium;
+  line-height: typography.$line-height-large;
+}
+
+.subtitle {
+  color: semantic-colors.$color-text-tertiary-on-light;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: normal;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}
+
+.another-info {
+  display: flex;
+  align-items: center;
+  align-content: space-between;
+  column-gap: variables.$spacing-lg;
+  flex-wrap: wrap;
+}
+
+.title-text-container {
+  display: flex;
+  flex-direction: column;
+  height: 32px;
+  align-items: flex-start;
+  gap: variables.$spacing-none;
+}
+
+.title {
+  color: semantic-colors.$color-text-tertiary-on-light;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: normal;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}
+
+.text {
+  color: semantic-colors.$color-text-secundary-on-light;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+
+.wt-etapas {
+  width: 110px;
+}
+
+.wt-modificado{
+  width: 205px;
+}
+
+.wt-creado{
+  width: 124px;
+}
+
+.wt-creado,
+.wt-modificado {
+  overflow: hidden;
+
+  .text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}

package/src/lib/card-tipo-proceso/card-tipo-proceso.component.spec.ts

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

package/src/lib/card-tipo-proceso/card-tipo-proceso.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from "../icon-md/icon-md.component";
+import { IconLgComponent } from "../icon-lg/icon-lg.component";
+import { ButtonSquaredTertiaryComponent } from "../button-squared-tertiary/button-squared-tertiary.component"
+import { PopoverDirective } from '../directives/popover.directive';
+
+@Component({
+  selector: 'ius-card-tipo-proceso',
+  standalone: true,
+  imports: [IconMdComponent, IconLgComponent, ButtonSquaredTertiaryComponent, PopoverDirective],
+  templateUrl: './card-tipo-proceso.component.html',
+  styleUrl: './card-tipo-proceso.component.scss'
+})
+export class CardTipoProcesoComponent {
+
+  @Input() tipoProcesoID?: number;
+  @Input() isUsed?: boolean;
+  @Input() nombreTipoProceso: string = '';
+
+  get displayEstado(): string {
+    return this.isUsed ? 'En uso' : 'Activo';
+  }
+  @Input() tipoCompetente?: string;
+  @Input() usuarioCreacion?: string;
+  @Input() fechaCreacion?: string;
+  @Input() usuarioModificacion?: string;
+  @Input() cantidadEstados?: number;
+  @Input() etapasSubetapas?: string;
+
+  @Output() onClickEdit = new EventEmitter<any>();
+  @Output() onClickDelete = new EventEmitter<any>();
+  @Output() onClickCard = new EventEmitter<any>();
+
+  hover = false;
+
+  onMouseEnter() {
+    this.hover = true;
+  }
+
+  onMouseLeave() {
+    this.hover = false;
+  }
+
+  clickEdit(event: Event): void {
+    event.stopImmediatePropagation();
+    this.onClickEdit.emit(this.tipoProcesoID);
+  }
+
+  clickDelete(event: Event): void {
+    event.stopImmediatePropagation();
+    this.onClickDelete.emit(this.tipoProcesoID);
+  }
+
+  clickCard(event: Event): void {
+    event.stopImmediatePropagation();
+    this.onClickCard.emit(this.tipoProcesoID);
+  }
+}

package/src/lib/card-tipo-proceso/index.ts

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

package/src/lib/card-uso-plan/card-uso-plan.component.html

@@ -0,0 +1,74 @@
+<div class="container-general">
+    <div class="header">
+        <span class="title">{{title}}</span>
+    </div>
+    <ius-simple-divider></ius-simple-divider>
+    <div class="container-interno-general">
+        <div class="row-1">
+            <div class="container-dot"><ius-icon-xs [iconName]="'icon-dot'"></ius-icon-xs></div>
+            <div class="row2">
+                <div class="row-2-interno">
+                    <span class="text-cant">{{label1}}</span>
+                </div>
+                <div class="row-2-end">
+                    <span class="label-base">{{data1}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="row-1">
+            <div class="row2">
+                <div class="row-2-interno">
+                    <span class="text-cant">{{label2}}</span>
+                </div>
+                <div class="row-2-end">
+                    <span class="label-base">{{data2}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="row-1">
+            <div class="row2">
+                <div class="row-2-interno">
+                    <span class="text-cant">{{label3}}</span>
+                </div>
+                <div class="row-2-end">
+                    <span class="label-base">{{data3}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="row-1">
+            <div class="row2">
+                <div class="row-2-end">
+                    <button class="container-button" (click)="onClickGroups($event)">
+                        <ius-icon-xs [iconName]="'icon-arrow-back-ios-new'"></ius-icon-xs>
+                        <span class="body-sm">{{data4}}</span>
+                        <ius-icon-xs [iconName]="'icon-group'"></ius-icon-xs>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="container-footer-general">
+            <div class="container-footer-interno">
+                <div class="row-2-interno">
+                    <span class="label-base">{{label4}}</span>
+                </div>
+
+            </div>
+            <div class="container-process-type">
+                <div class="container-judicial">
+                    <div class="row-2-interno">
+                        <ius-icon-xs [iconName]="'icon-ellipse'"></ius-icon-xs>
+                        <span class="text-cant">Judicial</span>
+                    </div>
+                     <span class="label-base">{{cantJudicial}}</span>
+                    <div class="row-2-end">
+                        <ius-icon-xs [iconName]="'icon-ellipse-blue'"></ius-icon-xs>
+                        <div class="row-2-interno">
+                            <span class="text-cant">Insolvencia</span>
+                        </div>
+                        <span class="label-base">{{cantInsolvencia}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/card-uso-plan/card-uso-plan.component.scss

@@ -0,0 +1,143 @@
+@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 {
+    display: flex;
+    padding: variables.$spacing-sm variables.$spacing-md;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-none;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: var(--Border-Radius-Radius-lg, 14px);
+    border: 1px solid var(--Stroke, #EAEAEA);
+}
+
+.header {
+    display: flex;
+    min-width: 89px;
+    align-items: center;
+    gap: 10px;
+}
+
+.title {
+    flex: 1 0 0;
+    color: colors.$neutral-10;
+    font-family: typography.$font-primary;
+    font-size: typography.$font-size-large;
+    font-style: normal;
+    font-weight: 500;
+    line-height: typography.$line-height-large;
+}
+
+.container-interno-general {
+    display: flex;
+    padding: variables.$spacing-xs variables.$spacing-none;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+    align-self: stretch;
+}
+
+.row-1 {
+    display: flex;
+    padding: variables.$spacing-none variables.$spacing-xs;
+    align-items: center;
+    gap: variables.$spacing-xs;
+    align-self: stretch;
+}
+
+
+.container-dot {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 8px;
+    aspect-ratio: 1/1;
+    padding-bottom: 8px;
+}
+
+.row2 {
+    display: flex;
+    padding: variables.$spacing-none 0;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+    flex: 1 0 0;
+}
+
+.row-2-interno {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+}
+
+.row-2-end {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+}
+
+.container-footer-general {
+    display: flex;
+    padding: variables.$spacing-none 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-sm;
+    align-self: stretch;
+}
+
+.container-footer-interno {
+    display: flex;
+    padding: variables.$spacing-none 0;
+    align-items: center;
+    gap: variables.$spacing-xs;
+    flex: 1 0 0;
+}
+
+.container-button {
+    display: flex;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    border-radius: var(--Border-Radius-Radius-lg, 14px);
+    background: colors.$neutral-white;
+    border: none;
+    cursor: pointer;
+}
+
+.container-button:hover {
+    background: colors.$primary-900;
+    color: colors.$neutral-white;
+}
+
+.container-process-type {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+}
+
+.container-judicial {
+    display: flex;
+    width: 166px;
+    padding: 0 variables.$spacing-xxs;
+    align-items: center;
+    gap: 8px;
+    border-radius: var(--Border-Radius-Radius-md, 8px);
+}
+
+.text-cant {
+    color: colors.$neutral-8;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    font-style: normal;
+    font-weight: 400;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+}

package/src/lib/card-uso-plan/card-uso-plan.component.spec.ts

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

package/src/lib/card-uso-plan/card-uso-plan.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconXsComponent } from "../icon-xs";
+import { SimpleDividerComponent } from "../simple-divider";
+
+@Component({
+  selector: 'ius-card-uso-plan',
+  standalone: true,
+  imports: [IconXsComponent, SimpleDividerComponent],
+  templateUrl: './card-uso-plan.component.html',
+  styleUrl: './card-uso-plan.component.scss'
+})
+export class CardUsoPlanComponent {
+
+  @Input() title?: string;
+  @Input() label1?: string;
+  @Input() data1?: string | number;
+  @Input() label2?: string;
+  @Input() data2?: string | number;
+  @Input() label3?: string;
+  @Input() data3?: string | number;
+  @Input() label4?: string;
+  @Input() data4?: string;
+  @Input() cantJudicial?: string | number;
+  @Input() cantInsolvencia?: string | number;
+
+  @Output() onClickEventGroup = new EventEmitter<any>();
+
+  onClickGroups(event: Event): void {
+    this.onClickEventGroup.emit(event);
+  }
+}

package/src/lib/card-uso-plan/index.ts

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

package/src/lib/card-vigilancia-judicial/card-vigilancia-judicial.component.html

@@ -0,0 +1,76 @@
+<div class="ctn-gnrl" (click)="toggleCollapse()">
+    <div class="ctn-card">
+        <div class="ctn-inf">
+            <ius-icon-sm iconName="icon-account-balance" class="icon-account"
+                [ngClass]="{'priority-tx': hasNotificacion || hasAuto }"></ius-icon-sm>
+            <div class="info">
+                <span class="caption-sm txt-ter">Vigilancia Judicial</span>
+                <span class="body-base-1 txt-pry" [ngClass]="{'title-no-read': read === false}">{{titulo}}</span>
+                <span class="body-base-1 txt-sec">{{juzgado}}</span>
+            </div>
+        </div>
+        <div class="ctn-icons">
+            @if (hasNotificacion || hasAuto) {
+            <div class="row-text-1">
+                @if (hasNotificacion) {
+                <ius-icon-sm iconName="icon-notification-2" class="txt-sec"></ius-icon-sm>
+                }
+                @if (hasAuto) {
+                <ius-icon-sm iconName="icon-docs-2" class="txt-sec"></ius-icon-sm>
+                }
+            </div>
+            }
+            <div class="row-text-2">
+                <div class="icon-dot" [ngClass]="{'icon-dot-f': read === true}"></div>
+                <span class="body-sm txt-ter fecha">{{fechaPrincipal | date: 'd MMM y'}}</span>
+                <span class="buttons-hove">
+                    <ius-button-circle-tertiary iconName="icon-mark-chat-read"
+                        [iusPopoverContent]="read ? 'Marcar como no leído' : 'Marcar como leído'"
+                        (buttonClicked)="clickButtonRead($event)"></ius-button-circle-tertiary>
+                    <ius-button-circle-tertiary iconName="icon-content-copy"
+                        iusPopoverContent="Copiar información"
+                        (buttonClicked)="clickButtonCopy($event)"></ius-button-circle-tertiary>
+                </span>
+            </div>
+            <ius-icon-sm [iconName]="collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'"
+                class="txt-pry"></ius-icon-sm>
+        </div>
+    </div>
+    <div class="ctn-collapse-card" [ngClass]="{'collapsed': collapse}">
+        <ius-simple-divider></ius-simple-divider>
+        <div class="ctn-clp">
+            <div class="ctn-info-clp">
+                @for (act of actuaciones; track $index) {
+                <div class="text-info">
+                    <div class="row-text-1 body-sm txt-ter">
+                        @if (act.fechaIniciaTermino) {
+                            <span>Inicia término: {{act.fechaIniciaTermino | date: 'd MMM y'}}</span>
+                        } @else {
+                            <span>Fecha registro: {{act.fechaActuacion | date: 'd MMM y'}}</span>
+                        }
+                        @if (act.fechaFinalizaTermino) {
+                            <span>-</span>
+                            <span>Finaliza término: {{act.fechaFinalizaTermino | date: 'd MMM y'}}</span>
+                        }
+                    </div>
+                    <span class="label-base txt-ter">{{act.actuacion}}</span>
+                    <span class="body-base-1 txt-sec">{{act.anotacion}}</span>
+                </div>
+                }
+            </div>
+            <div class="buttons-clp">
+                @if (hasNotificacion) {
+                <ius-button-menu-link iconName="icon-notificacion" iconColor="#184FDB"
+                    iusPopoverContent="Ver notificación"
+                    (buttonClicked)="clickButtonNotificacion($event)"></ius-button-menu-link>
+                <ius-simple-divider></ius-simple-divider>
+                }
+                @if (hasAuto) {
+                <ius-button-menu-link iconName="icon-docs" iconColor="#184FDB" iusPopoverContent="Ver auto"
+                    (buttonClicked)="clickButtonAuto($event)"></ius-button-menu-link>
+                <ius-simple-divider></ius-simple-divider>
+                }
+            </div>
+        </div>
+    </div>
+</div>