@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

@@ -1,116 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-<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

@@ -1,98 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-@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;
-}

package/src/lib/card-dynamic-content/card-dynamic-content.component.spec.ts

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

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

@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ius-card-dynamic-content',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './card-dynamic-content.component.html',
-  styleUrl: './card-dynamic-content.component.scss'
-})
-export class CardDynamicContentComponent {
-  @Input() titleCard?: string;
-  @Input() backgroundColor = '#EDF6FF';
-
-}

package/src/lib/card-dynamic-content/index.ts

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

package/src/lib/card-etapa-subetapa/card-etapa-subetapa.component.html

@@ -1,66 +0,0 @@
-<div class="ctn-gnrl" (click)="toggleCollapse()">
-    <div class="ctn-card">
-        <div class="ctn-inf">
-            <ius-icon-sm iconName="icon-book-5" class="icon-book-5"></ius-icon-sm>
-            <div class="info">
-                <span class="caption-sm txt-ter">Etapas Procesales</span>
-                <div class="body-base-1 row-text-1 txt-pry" [ngClass]="{'title-no-read': read === false}">
-                    <span>{{etapa}}</span>
-                    <span>-</span>
-                    <span>{{subEtapa}}</span>
-                </div>
-                <div class="body-base-1 txt-sec row-text-1">
-                    <span>{{text1}}</span>
-                    @if (origen) {
-                    <span>-</span>
-                    <span>{{origen}}</span>
-                    }
-                </div>
-            </div>
-        </div>
-        <div class="ctn-icons">
-            @if (hasDocuments) {
-            <div class="row-text-1">
-                <ius-icon-sm iconName="icon-attach-file" class="txt-sec"></ius-icon-sm>
-            </div>
-            }
-            <div class="row-text-2">
-                <div class="icon-dot" [ngClass]="{'icon-dot-f': read === false}"></div>
-                <span class="body-sm txt-ter fecha">{{fechaPrincipal | date: 'd MMM yyyy'}}</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>
-                    <ius-button-circle-tertiary iconName="icon-edit"
-                        iusPopoverContent="Editar"
-                        (buttonClicked)="clickButtonEdit($event)"></ius-button-circle-tertiary>
-                    <ius-button-circle-tertiary iconName="icon-delete"
-                        iusPopoverContent="Eliminar"
-                        (buttonClicked)="clickButtonDelete($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">
-                <div class="text-info">
-                    <span class="body-base-1 txt-pry">{{descripcion}}</span>
-                </div>
-            </div>
-            <div class="buttons-clp">
-                @if (hasDocuments) {
-                <ius-button-menu-link iconName="icon-attach-file" iconColor="#184FDB"
-                    iusPopoverContent="Ver documentos"
-                    (buttonClicked)="clickButtonDocs($event)"></ius-button-menu-link>
-                }
-            </div>
-        </div>
-    </div>
-</div>