@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

package/src/lib/card-list-drag-on/card-list-drag-on.component.scss

@@ -1,159 +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;
-}
-
-p {
-  margin: 0;
-}
-
-.container {
-  display: flex;
-  padding: variables.$spacing-xs variables.$spacing-sm;
-  min-height: 58px;
-  box-sizing: border-box;
-  align-items: center;
-  align-content: center;
-  gap: 12px variables.$spacing-sm;
-  align-self: stretch;
-  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);
-  }
-
-}
-
-
-.data-container {
-  display: flex;
-  align-items: center;
-  gap: variables.$spacing-lg;
-  flex: 1 0 0;
-  min-width: 0;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 8px variables.$spacing-xs;
-  flex: 1 0 0;
-  align-self: stretch;
-  min-width: 0;
-}
-
-.general-data {
-  display: flex;
-  align-items: center;
-  gap: variables.$spacing-xs;
-  flex: 1 0 0;
-  min-width: 0;
-}
-
-.data {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0;
-  flex: 1 0 0;
-  min-width: 0;
-}
-
-.state {
-  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;
-}
-
-.name {
-  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-medium;
-  line-height: typography.$line-height-base;
-  letter-spacing: 0.28px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
-.optional-data {
-  display: flex;
-  align-items: center;
-  align-content: space-between;
-  gap: variables.$spacing-lg;
-}
-
-.title-text-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 0;
-}
-
-.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;
-  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;
-}
-
-.image-date {
-  display: flex;
-  align-items: center;
-  gap: variables.$spacing-xs;
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-}
-
-.isClicked {
-  border: 1px solid #c4dfff !important;
-  background: #edf6ff !important;
-}
-
-.small-text {
-  color: var(--ColorText-colorTextTertiary, #8c8c8c);
-
-  /* BodySmall */
-  font-family: Rubik;
-  font-size: var(--Text-Size-FontSize-Small, 12px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Text-Size-FontHeight-Small, 16px);
-  /* 133.333% */
-  letter-spacing: 0.24px;
-}

package/src/lib/card-list-drag-on/card-list-drag-on.component.spec.ts

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

package/src/lib/card-list-drag-on/card-list-drag-on.component.ts

@@ -1,60 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IconSmComponent } from "../icon-sm/icon-sm.component";
-import { IconMdComponent } from "../icon-md/icon-md.component";
-import { ButtonSquaredTertiaryComponent } from "../button-squared-tertiary/button-squared-tertiary.component"
-import { AvatarV2Component } from "../avatar-v2/avatar-v2.component";
-
-@Component({
-  selector: 'ius-card-list-drag-on',
-  standalone: true,
-  imports: [IconSmComponent, IconMdComponent, ButtonSquaredTertiaryComponent, AvatarV2Component],
-  templateUrl: './card-list-drag-on.component.html',
-  styleUrl: './card-list-drag-on.component.scss'
-})
-export class CardListDragOnComponent {
-  @Input() etapaID?: number;
-  @Input() subetapaID?: number;
-  @Input() anotherID?: number;
-  @Input() state: string = '';
-  @Input() name: string = '';
-  @Input() subetapas: number = 0;
-  @Input() fecha: string = '';
-  @Input() imageUrl: string = '';
-  @Input() userName: string = '';
-  @Input() isUsed: boolean = false;
-  @Input() isSelected: boolean = false;
-  @Input() smallText: string = '';
-  
-  @Output() onClickEdit = new EventEmitter<any>();
-  @Output() onClickDelete = new EventEmitter<any>();
-  @Output() onClickCard = new EventEmitter<any>();
-
-  hover = false;
-
-  private get id(): number | undefined {
-    return this.etapaID ?? this.subetapaID ?? this.anotherID;
-  }
-
-  onMouseEnter() {
-    this.hover = true;
-  }
-
-  onMouseLeave() {
-    this.hover = false;
-  }
-
-  clickEdit(event: Event): void {
-    event.stopImmediatePropagation();
-    if (this.id != null) this.onClickEdit.emit(this.id);
-  }
-
-  clickDelete(event: Event): void {
-    event.stopImmediatePropagation();
-    if (this.id != null) this.onClickDelete.emit(this.id);
-  }
-
-  clickCard(event: Event): void {
-    event.stopImmediatePropagation();
-    if (this.id != null) this.onClickCard.emit(this.id);
-  }
-}

package/src/lib/card-list-drag-on/index.ts

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

package/src/lib/card-list-movimientos/card-list-movimientos.component.html

@@ -1,154 +0,0 @@
-<div class="container-general">
-    @if (cardType === 'vigilancia') {
-    <div class="container-card">
-        <div class="container-left">
-            <ius-icon-sm iconName="icon-account-balance" class="icon-account-balance"
-                [ngClass]="{'priority-off': !priority}"></ius-icon-sm>
-            <div class="content-left">
-                <span class="text-line-1">{{data1}}</span>
-                <span class="text-line-2" [ngClass]="{'read': read}">{{data2}}</span>
-                <span class="text-line-3">{{data3}}</span>
-            </div>
-        </div>
-        <div class="container-right">
-            <div class="ct-icons">
-                <ius-icon-sm iconName="icon-notification-2"></ius-icon-sm>
-                @if (docs) {
-                <ius-icon-sm iconName="icon-docs-2"></ius-icon-sm>
-                }
-            </div>
-            <div class="ct-date">
-                @if (!read) {
-                <div class="icon-dot"></div>
-                }
-                <span>{{date}}</span>
-            </div>
-            <ius-icon-sm iconName="icon-keyboard-arrow-down" class="icon-keyboard-arrow-down"></ius-icon-sm>
-
-        </div>
-    </div>
-    }@else if (cardType === 'agenda') {
-    <div class="container-card">
-        <div class="container-left">
-            <ius-icon-sm iconName="icon-calendar-judge" class="icon-calendar-judge"
-                [ngClass]="{'priority-off': !priority}"></ius-icon-sm>
-            <div class="content-left">
-                <span class="text-line-1">{{data1}}</span>
-                <span class="text-line-2">{{data2}}</span>
-                <span class="text-line-3">{{data3}}</span>
-            </div>
-        </div>
-        <div class="container-right">
-            <div class="ct-icons">
-                <ius-icon-sm iconName="icon-notification-2"></ius-icon-sm>
-                @if (docs) {
-                <ius-icon-sm iconName="icon-docs-2"></ius-icon-sm>
-                }
-            </div>
-            <div class="ct-date">
-                @if (!read) {
-                <div class="icon-dot"></div>
-                }
-                <span>{{date}}</span>
-            </div>
-            <ius-icon-sm iconName="icon-keyboard-arrow-down" class="icon-keyboard-arrow-down"></ius-icon-sm>
-
-        </div>
-    </div>
-    }@else if (cardType === 'actividad') {
-    <div class="container-card">
-        <div class="container-left">
-            <ius-icon-sm iconName="icon-calendar-clock" class="icon-calendar-clock"
-                [ngClass]="{'priority-off': !priority}"></ius-icon-sm>
-            <div class="content-left">
-                <span class="text-line-1">{{data1}}</span>
-                <span class="text-line-2">{{data2}}</span>
-                <div class="container-text-line-4">
-                    <div class="cont-line-4">
-                        <span class="text-line-1">Asignado a</span>
-                        <span class="text-line-3">{{asignado}}</span>
-                    </div>
-                    <div class="cont-line-4">
-                        <span class="text-line-1">Programada para el</span>
-                        <span class="text-line-3">{{programacion}}</span>
-                    </div>
-                </div>
-                <span class="text-line-3">{{data3}}</span>
-            </div>
-        </div>
-        <div class="container-right">
-            <div class="ct-icons">
-                @if (docs) {
-                <ius-icon-sm iconName="icon-attach-file"></ius-icon-sm>
-                }
-            </div>
-            <div class="ct-date">
-                @if (!read) {
-                <div class="icon-dot" [ngClass]="{'icon-dot-warning':warning}"></div>
-                }
-                @if (warning) {
-                <ius-icon-sm iconName="icon-emergency-home" class="icon-emergency-home"></ius-icon-sm>
-                }
-                <span>{{date}}</span>
-            </div>
-            <ius-icon-sm iconName="icon-keyboard-arrow-down" class="icon-keyboard-arrow-down"></ius-icon-sm>
-
-        </div>
-    </div>
-    }@else if (cardType === 'etapa') {
-    <div class="container-card">
-        <div class="container-left">
-            <ius-icon-sm iconName="icon-book-5" class="icon-book-5"
-                [ngClass]="{'priority-off': !priority}"></ius-icon-sm>
-            <div class="content-left">
-                <span class="text-line-1">{{data1}}</span>
-                <span class="text-line-2">{{data2}}</span>
-                <span class="text-line-3">{{data3}}</span>
-            </div>
-        </div>
-        <div class="container-right">
-            <div class="ct-icons">
-                @if (docs) {
-                <ius-icon-sm iconName="icon-attach-file"></ius-icon-sm>
-                }
-            </div>
-            <div class="ct-date">
-                @if (!read) {
-                <div class="icon-dot"></div>
-                }
-                <span>{{date}}</span>
-            </div>
-            <ius-icon-sm iconName="icon-keyboard-arrow-down" class="icon-keyboard-arrow-down"></ius-icon-sm>
-
-        </div>
-    </div>
-    }@else if (cardType === 'gestion') {
-    <div class="container-card">
-        <div class="container-left">
-            <ius-icon-sm iconName="icon-article-person" class="icon-article-person"
-                [ngClass]="{'priority-off': !priority}"></ius-icon-sm>
-            <div class="content-left">
-                <span class="text-line-1">{{data1}}</span>
-                <span class="text-line-2">{{data2}}</span>
-                <span class="text-line-3">{{data3}}</span>
-            </div>
-        </div>
-        <div class="container-right">
-            <div class="ct-icons">
-                @if (docs) {
-                <ius-icon-sm iconName="icon-attach-file"></ius-icon-sm>
-                }
-            </div>
-            <div class="ct-date">
-                @if (!read) {
-                <div class="icon-dot"></div>
-                }
-                <span>{{date}}</span>
-            </div>
-            <ius-icon-sm iconName="icon-keyboard-arrow-down" class="icon-keyboard-arrow-down"></ius-icon-sm>
-
-        </div>
-    </div>
-    }
-
-</div>

package/src/lib/card-list-movimientos/card-list-movimientos.component.scss

@@ -1,150 +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;
-
-.container-general {
-    position: relative;
-    height: 100%;
-}
-
-.container-card {
-    display: flex;
-    padding: variables.$spacing-xs variables.$spacing-sm;
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    cursor: pointer;
-
-    border-radius: variables.$radius-sm;
-    border: 1px solid colors.$neutral-4;
-
-    &:hover {
-        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
-        border: 1px solid colors.$info-200;
-    }
-}
-
-.container-left {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    width: 50%;
-}
-
-.container-right {
-    display: flex;
-    align-items: center;
-    gap: variables.$spacing-md;
-    font-family: typography.$font-secondary;
-}
-
-.content-left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    font-family: typography.$font-secondary;
-}
-
-.icon-account-balance {
-    color: colors.$success-800;
-}
-
-.priority-off {
-    color: colors.$neutral-7;
-}
-
-.text-line-1 {
-    color: semantic-colors.$color-text-tertiary-on-light;
-    font-size: typography.$font-size-sm;
-    font-weight: typography.$font-weight-medium;
-    line-height: typography.$line-height-sm;
-    letter-spacing: 0.24px;
-}
-
-.text-line-2 {
-    color: semantic-colors.$color-text-primary-on-light;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-medium;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-}
-
-.read {
-    font-weight: typography.$font-weight-regular;
-}
-
-.text-line-3 {
-    color: semantic-colors.$color-text-secundary-on-light;
-    font-size: typography.$font-size-base;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-base;
-    letter-spacing: 0.28px;
-}
-
-.container-text-line-4 {
-    display: flex;
-    gap: variables.$spacing-lg;
-}
-
-.cont-line-4 {
-    display: flex;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-}
-
-.ct-icons {
-    display: flex;
-    align-items: center;
-    gap: variables.$spacing-xs;
-    color: semantic-colors.$color-text-secundary-on-light;
-}
-
-.ct-date {
-    display: flex;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-    color: semantic-colors.$color-text-tertiary-on-light;
-    font-size: typography.$font-size-sm;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-sm;
-    letter-spacing: 0.24px;
-}
-
-.icon-dot {
-    display: flex;
-    align-items: center;
-    width: 8px;
-    height: 8px;
-    aspect-ratio: 1/1;
-    background-color: colors.$info-500;
-    border-radius: variables.$radius-pill;
-}
-
-.icon-dot-warning{
-    background-color: colors.$warning-500;
-}
-
-.icon-keyboard-arrow-down {
-    color: semantic-colors.$color-text-primary-on-light;
-}
-
-.icon-calendar-judge {
-    color: colors.$info-800;
-}
-
-.icon-calendar-clock{
-    color: colors.$info-600;
-}
-
-.icon-emergency-home{
-    color: colors.$warning-500;
-}
-
-.icon-book-5{
-    color: colors.$success-600;
-}
-
-.icon-article-person{
-    color: colors.$neutral-9;
-}

package/src/lib/card-list-movimientos/card-list-movimientos.component.spec.ts

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

package/src/lib/card-list-movimientos/card-list-movimientos.component.ts

@@ -1,28 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { IconSmComponent } from '../icon-sm/icon-sm.component';
-import { IconXsComponent } from '../icon-xs/icon-xs.component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'ius-card-list-movimientos',
-  standalone: true,
-  imports: [IconSmComponent, CommonModule],
-  templateUrl: './card-list-movimientos.component.html',
-  styleUrl: './card-list-movimientos.component.scss',
-})
-export class CardListMovimientosComponent {
-
-  @Input() cardType?: 'vigilancia' | 'actividad' | 'agenda' | 'etapa' | 'gestion' = 'vigilancia';
-  @Input() read: boolean = false;
-  @Input() docs: boolean = false;
-  @Input() priority: boolean = true;
-  @Input() warning: boolean = false;
-
-  @Input() data1?: string;
-  @Input() data2?: string;
-  @Input() data3?: string;
-  @Input() date?: string;
-  @Input() asignado?: string;
-  @Input() programacion?: string;
-
-}

package/src/lib/card-list-movimientos/index.ts

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

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

@@ -1,27 +0,0 @@
-<div class="container-general">
-    <div class="container-card" (click)="onClick($event)" >
-        <div class="container-left">
-            <div class="content-left">
-                <span class="text-estado">{{state ? 'Activo' : 'Inactivo'}}</span>
-                <span class="text-proceso">{{tipoProceso}}
-                    <span class="text-numero-proceso">{{radicado}}</span>
-                </span>
-                <span class="descrip-proceso" style="padding: 4px 0;">Demandantes <span
-                        class="text-name-demand">{{demandantes}}</span>
-                    Demandados <span class="text-name-demand">{{demandados}}</span></span>
-                
-                <div class="assigned">
-                    <span class="descrip-proceso">Asignado por <span
-                        class="text-name-demand">{{usuarioAsignado}}</span></span>
-                <span class="descrip-proceso">Asignado el <span
-                        class="text-name-demand">{{fechaAsignacion | date: "d 'de' MMMM 'de' y"}}</span></span>
-                </div>
-            </div>
-            <div class="content-right">
-                <div style="display: flex; gap: 8px;">
-                    <span class="text-fecha-mov">{{fecha | date: "d 'de' MMMM 'de' y"}}</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>