@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

package/src/lib/card-agenda-judicial/card-agenda-judicial.component.ts

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, Output, LOCALE_ID } from '@angular/core';
+import { IconSmComponent } from "../icon-sm";
+import { DatePipe, NgClass, registerLocaleData } from '@angular/common';
+import localeEs from '@angular/common/locales/es';
+import { ButtonCircleTertiaryComponent } from "../button-circle-tertiary";
+import { SimpleDividerComponent } from "../simple-divider";
+import { ButtonMenuLinkComponent } from "../button-menu-link";
+
+registerLocaleData(localeEs);
+
+@Component({
+  selector: 'ius-card-agenda-judicial',
+  standalone: true,
+  imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, ButtonMenuLinkComponent, DatePipe],
+  providers: [
+    { provide: LOCALE_ID, useValue: 'es' }
+  ],
+  templateUrl: './card-agenda-judicial.component.html',
+  styleUrl: './card-agenda-judicial.component.scss'
+})
+export class CardAgendaJudicialComponent {
+
+  @Input() hasDocuments: boolean = false;
+  @Input() read: boolean = true;
+  @Input() collapse: boolean = true;
+
+  @Input() titulo?: string;
+  @Input() tipoAgenda?: string;
+  @Input() fechaPrincipal?: Date;
+  @Input() fechaAgenda?: Date;
+  @Input() text1?: string;
+  @Input() text2?: string;
+
+  @Output() onClickButtonCopy = new EventEmitter<Event>();
+  @Output() onClickButtonRead = new EventEmitter<Event>();
+
+  toggleCollapse(): void {
+    this.collapse = !this.collapse;
+  }
+
+  clickButtonCopy(event: Event) {
+    event.stopImmediatePropagation();
+    this.onClickButtonCopy.emit(event);
+  }
+
+  clickButtonRead(event: Event) {
+    event.stopImmediatePropagation();
+    this.onClickButtonRead.emit(event);
+  }
+
+}

package/src/lib/card-agenda-judicial/index.ts

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

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

@@ -0,0 +1,56 @@
+<div class="general-container">
+  <div class="card-block">
+    <div class="user">
+      <ius-avatar-icon
+        size="lg"
+        [imageUrl]="urlImage"
+        [iconName]="iconName"
+        [iconColor]="iconColor"
+      ></ius-avatar-icon>
+      <p class="user-name">{{ userName }}</p>
+    </div>
+    <div style="width: 100%">
+      <ius-input-select
+        [componentId]="componentID"
+        [required]="true"
+        labelSuperior="Rol dentro del proceso"
+        labelInput="Seleccione el rol dentro del proceso"
+        [textInput]="option?.text"
+      >
+        @for (option of options; track option) {
+        <ius-option (optionClick)="onSelectOption(option)">
+          {{ option.text }}
+        </ius-option>
+        }
+      </ius-input-select>
+    </div>
+    <ius-simple-divider></ius-simple-divider>
+    <div class="collapse">
+      <div class="cnt-procesos">
+        <p class="negrita">{{cntSeleccionados}}</p>
+        <p class="normal">de</p>
+        <p class="negrita">{{ cantProcesos }}</p>
+        <p class="normal">procesos compartidos</p>
+      </div>
+      <button
+        (click)="toggleProcesos()"
+        class="btn"
+      >
+        <ius-icon-sm
+          [iconName]="
+            showProcesos
+              ? 'icon-keyboard-double-arrow-up'
+              : 'icon-keyboard-double-arrow-down'
+          "
+        ></ius-icon-sm>
+      </button>
+    </div>
+    @if (showProcesos) {
+    <div class="list-procesos">
+      <div class="container">
+        <ng-content></ng-content>
+      </div>
+    </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,116 @@
+@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;
+}
+
+.card-block {
+  display: flex;
+  width: 100%;
+  padding: variables.$spacing-sm variables.$spacing-xs variables.$spacing-xs
+    variables.$spacing-xs;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: variables.$spacing-xs;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 0.5px solid semantic-colors.$neutral-6;
+  background: semantic-colors.$neutral-white;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-xs;
+  align-self: stretch;
+
+  .user-name {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xs;
+    color: semantic-colors.$color-text-primary-on-light;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    font-style: normal;
+    font-weight: typography.$font-weight-regular;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+  }
+}
+
+.collapse {
+  display: flex;
+  height: variables.$icon-size-lg;
+  padding: 0 variables.$spacing-xxs;
+  justify-content: flex-end;
+  align-items: center;
+  gap: variables.$spacing-xxs;
+  flex-shrink: 0;
+  align-self: stretch;
+
+  .cnt-procesos {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    flex: 1 0 0;
+
+    .negrita {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-xs;
+      color: semantic-colors.$color-text-primary-on-light;
+      font-family: typography.$font-secondary;
+      font-size: typography.$font-size-sm;
+      font-style: normal;
+      font-weight: typography.$font-weight-medium;
+      line-height: typography.$line-height-sm;
+      letter-spacing: 0.24px;
+    }
+
+    .normal {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-xs;
+      color: semantic-colors.$color-text-primary-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;
+    }
+  }
+}
+
+.list-procesos {
+  display: flex;
+  padding: variables.$spacing-none;
+  align-items: flex-start;
+  gap: variables.$spacing-xxs;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: variables.$radius-none;
+}
+
+.container {
+  display: flex;
+  padding: variables.$spacing-none;
+  flex-direction: column;
+  gap: variables.$spacing-xxs;
+  flex: 1 0 0;
+  overflow-y: auto;
+  height: 200px;
+}
+
+.btn {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}

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

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

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

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { OptionComponent } from "../option/option.component";
+import { InputSelectComponent } from '../input-select/input-select.component';
+import { SimpleDividerComponent } from '../simple-divider/simple-divider.component';
+import { IconSmComponent } from '../icon-sm/icon-sm.component';
+import { AvatarIconComponent } from '../avatar-icon/avatar-icon.component';
+
+export type ItemInputList = {
+  id?: number;
+  text: string;
+}
+
+@Component({
+  selector: 'ius-card-block',
+  standalone: true,
+  imports: [InputSelectComponent, SimpleDividerComponent, IconSmComponent, AvatarIconComponent, OptionComponent],
+  templateUrl: './card-block.component.html',
+  styleUrl: './card-block.component.scss'
+})
+export class CardBlockComponent {
+  showProcesos: boolean = false;
+  option: ItemInputList | null = null;
+
+  @Input() componentID: string = '';
+  @Input() options: ItemInputList[] = [];
+  @Input() urlImage?: string;
+  @Input() iconName: string = '';
+  @Input() iconColor: string = '';
+  @Input() userName: string = '';
+  @Input() cantProcesos: number = 0;
+  @Input() cntSeleccionados: number = 0;
+
+  @Output() optionSelected = new EventEmitter<any>();
+
+  toggleProcesos(){
+    this.showProcesos = !this.showProcesos;
+  }
+
+  onSelectOption(event: any) {
+    this.option = event;
+    this.optionSelected.emit(event);
+  }
+}

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

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

package/src/lib/card-button-checkbox/card-button-checkbox.component.html

@@ -0,0 +1,15 @@
+<div class="general-container">
+  <div class="container" [ngClass]="{'checked': isChecked}">
+    <ius-checkbox [checked]="isChecked" [disabled]="disabledCheckbox" (checkedChange)="toggleCheck($event)"></ius-checkbox>
+    <div class="data-container">
+      <div class="data">
+        <div class="status-container">
+          <p class="state">{{ estado }}</p>
+          <p class="tipo-proceso">{{tipoProceso}}</p>
+        </div>
+        <p class="radicado">{{radicado}}</p>
+        <p class="competente">{{competente}}</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/card-button-checkbox/card-button-checkbox.component.scss

@@ -0,0 +1,98 @@
+@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;
+}
+
+.container {
+  display: flex;
+  height: 88px;
+  box-sizing: border-box;
+  padding: variables.$spacing-xxs;
+  align-items: center;
+  gap: variables.$spacing-xxs;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-4;
+
+  &:hover {
+    box-shadow: variables.$elevation-100;
+  }
+}
+
+.checked {
+  border: 1px solid colors.$info-600;
+  background: colors.$info-100;
+}
+
+.data-container {
+  display: flex;
+  width: 80%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.data {
+  display: flex;
+  width: 100%;
+  padding: variables.$spacing-xs 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.status-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+
+  .state {
+    margin: 0;
+    color: colors.$success-700;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    font-style: normal;
+    font-weight: typography.$font-weight-regular;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+  }
+
+  .tipo-proceso {
+    margin: 0;
+    color: semantic-colors.$color-text-tertiary-on-light;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    font-style: normal;
+    font-weight: typography.$font-weight-medium;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+  }
+}
+
+.radicado {
+  margin: 0;
+  color: #333;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-base;
+  font-style: normal;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+}
+
+.competente {
+  margin: 0;
+  color: #333;
+  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;
+}

package/src/lib/card-button-checkbox/card-button-checkbox.component.spec.ts

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

package/src/lib/card-button-checkbox/card-button-checkbox.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PortalModule } from "@angular/cdk/portal";
+import { CommonModule } from '@angular/common';
+import { CheckboxComponent } from "../checkbox";
+
+@Component({
+  selector: 'ius-card-button-checkbox',
+  standalone: true,
+  imports: [PortalModule, CommonModule, CheckboxComponent],
+  templateUrl: './card-button-checkbox.component.html',
+  styleUrl: './card-button-checkbox.component.scss'
+})
+export class CardButtonCheckboxComponent {
+
+  @Input() isChecked: boolean = false;
+  @Input() disabledCheckbox: boolean = false;
+  @Input() estado: string = '';
+  @Input() tipoProceso: string = '';
+  @Input() radicado: string = '';
+  @Input() competente: string = '';
+
+  @Output() onChecked = new EventEmitter<boolean>();
+
+  toggleCheck(checked: boolean) {
+    this.isChecked = checked;
+    this.onChecked.emit(this.isChecked);
+  }
+
+}

package/src/lib/card-button-checkbox/index.ts

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

package/src/lib/card-collapse-detalle-proceso/card-collapse-detalle-proceso.component.html

@@ -0,0 +1,19 @@
+<div class="ctn-card">
+    <div class="card" (click)="toggleCollapse()">
+        <div class="content">
+            <div class="row-text-1">
+                <span class="body-base-1 tx-estado">{{estadoProceso}}</span>
+                <span class="label-base color-ter">{{tipoProceso}}</span>
+            </div>
+            <span class="body-base-1 color-pry">{{radicado}}</span>
+            <span class="body-sm color-pry">{{nombreCompetente}}</span>
+        </div>
+        <ius-icon-sm [iconName]="collapsed ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'"
+            class="color-pry"></ius-icon-sm>
+    </div>
+    <ius-simple-divider [class.hidden]="collapsed"></ius-simple-divider>
+
+    <div class="ctn-ng-content scrollable collapse-wrapper" [class.collapsed]="collapsed" [style.--max-height.px]="maxHeight">
+        <ng-content></ng-content>
+    </div>
+</div>

package/src/lib/card-collapse-detalle-proceso/card-collapse-detalle-proceso.component.scss

@@ -0,0 +1,104 @@
+@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: block;
+    width: 100%;
+}
+
+.ctn-card {
+    display: flex;
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: variables.$spacing-xxs variables.$spacing-xs;
+    flex-direction: column;
+    cursor: pointer;
+
+    border: 1px solid #EAEAEA;
+    background: colors.$neutral-white;
+
+    &:hover {
+        box-shadow: variables.$elevation-100;
+    }
+}
+
+.card {
+    display: flex;
+    padding: variables.$spacing-xxs variables.$spacing-xs;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+}
+
+.content {
+    display: flex;
+    padding: variables.$spacing-xxs;
+    flex-direction: column;
+    gap: variables.$spacing-xxs;
+    flex: 1 0 0;
+}
+
+ius-simple-divider{
+    margin: variables.$spacing-xxs 0;
+}
+
+.color-pry {
+    color: semantic-colors.$color-text-primary-on-light;
+}
+
+.color-ter {
+    color: semantic-colors.$color-text-tertiary-on-light;
+}
+
+.row-text-1 {
+    display: flex;
+    height: 32px;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+}
+
+.tx-estado {
+    color: colors.$success-700;
+}
+
+.ctn-ng-content {
+    padding: variables.$spacing-xxs;
+}
+
+.ctn-ng-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.collapse-wrapper {
+    --max-height: 0px;
+    max-height: 0;
+    overflow-x: hidden;
+    padding: 0 variables.$spacing-xxs;
+    transition: max-height 280ms ease, padding 220ms ease;
+}
+
+.collapse-wrapper:not(.collapsed) {
+    max-height: var(--max-height);
+    padding: variables.$spacing-xxs;
+}
+
+.hidden {
+    display: none;
+}
+
+.ctn-ng-content::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+.ctn-ng-content::-webkit-scrollbar:vertical {
+  width: 7px;
+}
+
+.ctn-ng-content::-webkit-scrollbar-thumb {
+  background-color: #d8d6d6;
+  border-radius: 20px;
+}

package/src/lib/card-collapse-detalle-proceso/card-collapse-detalle-proceso.component.spec.ts

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

package/src/lib/card-collapse-detalle-proceso/card-collapse-detalle-proceso.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { IconSmComponent } from "../icon-sm";
+import { SimpleDividerComponent } from "../simple-divider";
+
+@Component({
+  selector: 'ius-card-collapse-detalle-proceso',
+  standalone: true,
+  imports: [IconSmComponent, SimpleDividerComponent],
+  templateUrl: './card-collapse-detalle-proceso.component.html',
+  styleUrls: ['./card-collapse-detalle-proceso.component.scss']
+})
+export class CardCollapseDetalleProcesoComponent {
+
+  collapsed: boolean = true;
+  @Input() maxHeight: number = 370;
+
+  @Input() tipoProceso?: string;
+  @Input() estadoProceso?: string;
+  @Input() radicado?: string;
+  @Input() nombreCompetente?: string;
+  @Input() demandados?: string;
+
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+  }
+}

package/src/lib/card-collapse-detalle-proceso/index.ts

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

package/src/lib/card-dynamic-content/card-dynamic-content.component.html

@@ -0,0 +1,9 @@
+<div class="card-dynamic" [ngStyle]="{ 'background-color': backgroundColor }">
+  @if(titleCard){
+  <span class="title-card">{{ titleCard }}</span
+  ><br />
+  }
+  <div class="content-card">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/lib/card-dynamic-content/card-dynamic-content.component.scss

@@ -0,0 +1,22 @@
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use '@litigiovirtual/ius-design-styles/lib/variables' as variables;
+
+.card-dynamic {
+    padding: variables.$spacing-xs;
+    border-radius: variables.$radius-md;
+}
+
+.title-card {
+    color: #313030;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-large;
+    font-weight: typography.$font-weight-medium;
+    line-height: 120%;
+    letter-spacing: 0.1px;
+}
+
+.content-card {
+    padding-top: variables.$spacing-xs;
+    padding-left: 6px;
+    padding-right: 6px;
+}