@litigiovirtual/ius-design-components 1.0.267 → 1.0.268

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

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

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

@@ -1,109 +0,0 @@
-import { Component, computed, Input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PopoverComponent } from '../popover/popover.component';
-
-@Component({
-  selector: 'ius-progress-bar',
-  standalone: true,
-  imports: [CommonModule, PopoverComponent],
-  templateUrl: './progress-bar.component.html',
-  styleUrl: './progress-bar.component.scss'
-})
-export class ProgressBarComponent {
-  private _total = signal(0);
-  private _v1 = signal(0);
-  private _v2 = signal(0);
-  private _v3 = signal(0);
-  // private _v4 = signal(0);
-
-  @Input({ required: true }) set total(v: number) { this._total.set(this.n(v)); }
-  @Input() set v1(v: number) { this._v1.set(this.n(v)); }
-  @Input() set v2(v: number) { this._v2.set(this.n(v)); }
-  @Input() set v3(v: number) { this._v3.set(this.n(v)); }
-  // @Input() set v4(v: number) { this._v4.set(this.n(v)); }
-
-  @Input() titleV1 = '';
-  @Input() titleV2 = '';
-  @Input() titleV3 = '';
-  @Input() titleV4 = '';
-
-  showPopover1 = false;
-  showPopover2 = false;
-  showPopover3 = false;
-  // showPopover4 = false;
-  showPopoverGray = false;
-
-  private n(v: any) {
-    const x = Number(v);
-    return Number.isFinite(x) ? Math.max(0, x) : 0;
-  }
-
-  readonly t = computed(() => this._total());
-  readonly a1 = computed(() => this._v1());
-  readonly a2 = computed(() => this._v2());
-  readonly a3 = computed(() => this._v3());
-  // readonly a4 = computed(() => this._v4());
-
-  readonly used = computed(() => this.a1() + this.a2() + this.a3());
-  readonly available = computed(() => Math.max(0, this.t() - this.used()));
-
-  //evita desbordes
-  readonly pct = computed(() => {
-    const total = this.t();
-    if (!total) return { p1: 0, p2: 0, p3: 0, p4: 0, pg: 100 };
-
-    const p1 = (this.a1() / total) * 100;
-    const p2 = (this.a2() / total) * 100;
-    const p3 = (this.a3() / total) * 100;
-    // const p4 = (this.a4() / total) * 100;
-    const sum = p1 + p2 + p3 ;
-
-    if (sum <= 100) {
-      return { p1, p2, p3, pg: 100 - sum };
-    }
-
-
-    const k = sum === 0 ? 0 : 100 / sum;
-    return { p1: p1 * k, p2: p2 * k, p3: p3 * k, pg: 0 };
-  });
-
-  onMouseEnter(segment: string) {
-    switch (segment) {
-      case 's1':
-        this.showPopover1 = true;
-        break;
-      case 's2':
-        this.showPopover2 = true;
-        break;
-      case 's3':
-        this.showPopover3 = true;
-        break;
-      // case 's4':
-      //   this.showPopover4 = true;
-        // break;
-      case 'gray':
-        this.showPopoverGray = true;
-        break;
-    }
-  }
-
-  onMouseLeave(segment: string) {
-    switch (segment) {
-      case 's1':
-        this.showPopover1 = false;
-        break;
-      case 's2':
-        this.showPopover2 = false;
-        break;
-      case 's3':
-        this.showPopover3 = false;
-        break;
-      // case 's4':
-      //   this.showPopover4 = false;
-      //   break;
-      case 'gray':
-        this.showPopoverGray = false;
-        break;
-    }
-  }
-}

package/src/lib/search-bar/index.ts

@@ -1,2 +0,0 @@
-export * from './search-bar.component';
-

package/src/lib/search-bar/search-bar.component.html

@@ -1,26 +0,0 @@
-<div class="container-general">
-    <div class="container-search" [ngClass]="{
-        'disabled': disabled,
-        'focused': isFocused
-    }">
-        <div class="container-input">
-            <input type="text" [(ngModel)]="textInput" [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keypress)="onKeyPress($event)"
-                (input)="onInput()" (keyup.enter)="performSearch($event)" (drop)="onDropBlock($event)" (dragover)="onDragOverBlock($event)">
-            @if (textInput === '') {
-            <label class="input-label">{{labelInput}}</label>
-            }
-
-            @if (!disabled && textInput) {
-            <button class="button-delete" (click)="clearSearch()">
-                <ius-icon-md iconName="icon-cancel" class="icon-color-cancel"></ius-icon-md>
-            </button>
-            }
-
-        </div>
-        @if (showSearchIcon) {
-        <div class="container-icon">
-            <ius-icon-md iconName="icon-search" class="icon-color"></ius-icon-md>
-        </div>
-        }
-    </div>
-</div>

package/src/lib/search-bar/search-bar.component.scss

@@ -1,100 +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-search {
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-large;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-large;
-    color: semantic-colors.$color-text-tertiary-on-light;
-    display: flex;
-    height: 44px;
-    padding: variables.$spacing-none variables.$spacing-xs variables.$spacing-none variables.$spacing-lg;
-    align-items: center;
-    gap: variables.$spacing-sm;
-    border-radius: variables.$radius-lg;
-    border: 1px solid colors.$neutral-2;
-    background: colors.$neutral-2;
-
-    &:hover:not(.disabled):not(.focused) {
-        background: colors.$neutral-3;
-    }
-
-    &.focused {
-        .icon-color {
-            color: colors.$primary-600;
-        }
-
-        border: 1px solid colors.$neutral-4;
-        background: colors.$neutral-white;
-    }
-
-    &.disabled {
-        .icon-color {
-            color: semantic-colors.$color-text-disabled-on-light;
-        }
-
-        background: colors.$neutral-1;
-        color: semantic-colors.$color-text-disabled-on-light;
-    }
-}
-
-.container-icon {
-    display: flex;
-    padding: variables.$spacing-none variables.$spacing-sm;
-    align-items: center;
-    align-self: stretch;
-}
-
-.icon-color {
-    color: semantic-colors.$color-text-secundary-on-light;
-}
-
-.container-input {
-    display: flex;
-    flex: 1;
-    min-width: 120px;
-    padding: variables.$spacing-sm variables.$spacing-none;
-    align-items: center;
-    gap: variables.$spacing-xs;
-    position: relative;
-}
-
-input {
-    border: none;
-    outline: none;
-    background-color: transparent;
-    width: 100%;
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-large;
-    font-weight: typography.$font-weight-regular;
-    line-height: typography.$line-height-large;
-}
-
-.button-delete {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: variables.$spacing-none;
-    color: semantic-colors.$color-text-secundary-on-light;
-
-    &:hover {
-        color: semantic-colors.$color-btn-primary-default;
-    }
-}
-
-.input-label {
-    position: absolute;
-    left: 0;
-    pointer-events: none;
-}

package/src/lib/search-bar/search-bar.component.spec.ts

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

package/src/lib/search-bar/search-bar.component.ts

@@ -1,70 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IconMdComponent } from '../icon-md/icon-md.component';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'ius-search-bar',
-  standalone: true,
-  imports: [IconMdComponent, CommonModule, FormsModule],
-  templateUrl: './search-bar.component.html',
-  styleUrl: './search-bar.component.scss',
-})
-export class SearchBarComponent {
-  @Input() textInput: string = '';
-  isFocused: boolean = false;
-
-  @Input() labelInput: string = 'Buscar';
-  @Input() disabled = false;
-  @Input() initialText: string = '';
-  @Input() showSearchIcon: boolean = true;
-
-  @Output() onChangesValueEvent = new EventEmitter<any>();
-  @Output() enterSearchEvent = new EventEmitter<any>();
-  @Output() onEnterKey = new EventEmitter<string>();
-
-  ngOnInit(): void {
-    if (this.initialText) {
-      this.textInput = this.initialText;
-    }
-  }
-
-  onFocus(): void {
-    this.isFocused = true;
-  }
-
-  onBlur(): void {
-    this.isFocused = false;
-  }
-  
-  performSearch(event: any) {
-    this.enterSearchEvent.emit(this.textInput); 
-  }
-
-  onInput(): void {
-    this.onChangesValueEvent.emit(this.textInput);
-  }
-
-  clearSearch() {
-    this.textInput = '';
-    this.onChangesValueEvent.emit(this.textInput);
-  }
-
-  onKeyPress(event: KeyboardEvent): void {
-    if (event.key === 'Enter') {
-      if (this.textInput.trim() !== '') {
-        this.onEnterKey.emit(this.textInput);
-      }
-    }
-  }
-  
-  onDropBlock(event: DragEvent) {
-    // Evita que se dropee contenido en el input
-    event.preventDefault();
-  }
-
-  onDragOverBlock(event: DragEvent) {
-    // Evita que se permita arrastrar texto sobre el input
-    event.preventDefault();
-  }
-}

package/src/lib/section-collapse-drawer-child/index.ts

@@ -1,2 +0,0 @@
-export * from './section-collapse-drawer-child.component';
-

package/src/lib/section-collapse-drawer-child/section-collapse-drawer-child.component.html

@@ -1,15 +0,0 @@
-<div class="dropdown-container">
-  <button [disabled]="disabled" (click)="onClick()" class="ius-btn" [ngClass]="{ isActive: isActive }">
-    @if (iconName !== '') {
-    <ius-icon-md [iconName]="iconName" class="icon-color"></ius-icon-md>
-    }
-    <span>{{textTitle}}</span>
-    <ius-icon-sm class="arrow"
-      [iconName]=" isActive && !disabled ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down' "></ius-icon-sm>
-  </button>
-</div>
-@if (isActive && !disabled) {
-<div @slideInOut>
-  <ng-content></ng-content>
-</div>
-}

package/src/lib/section-collapse-drawer-child/section-collapse-drawer-child.component.scss

@@ -1,52 +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;
-
-.icon-color {
-  color: colors.$info-400;
-}
-
-.icon-doc-color {
-  color: colors.$info-400;
-}
-
-.arrow {
-  margin-left: auto;
-  padding-bottom: 5px;
-}
-
-.ius-btn {
-  display: inline-flex;
-  width: 100%;
-  height: 46px;
-  padding: variables.$spacing-sm variables.$spacing-xs;
-  align-items: center;
-  gap: variables.$spacing-xs;
-  background-color: semantic-colors.$color-btn-secondary-1-default;
-  color: semantic-colors.$color-text-secundary-on-light;
-  border: none;
-  cursor: pointer;
-  font-family: typography.$font-primary;
-  font-size: typography.$font-size-large;
-  line-height: typography.$line-height-large;
-  letter-spacing: 1%;
-  justify-content: space-between;
-
-  &:hover:not(:disabled) {
-    color: colors.$info-700;
-  }
-
-  &:active:not(:disabled) {
-    background-color: colors.$info-100;
-  }
-
-  &:disabled {
-    .icon-color{
-        color: semantic-colors.$color-text-disabled-on-light; 
-    }
-
-    color: semantic-colors.$color-text-disabled-on-light;
-    cursor: not-allowed;
-}
-}

package/src/lib/section-collapse-drawer-child/section-collapse-drawer-child.component.spec.ts

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

package/src/lib/section-collapse-drawer-child/section-collapse-drawer-child.component.ts

@@ -1,45 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IconMdComponent } from "../icon-md/icon-md.component";
-import { IconSmComponent } from "../icon-sm/icon-sm.component";
-import { CommonModule } from '@angular/common';
-import { trigger, transition, style, animate, state, } from '@angular/animations';
-
-@Component({
-  selector: 'ius-section-collapse-drawer-child',
-  standalone: true,
-  imports: [CommonModule, IconMdComponent, IconSmComponent],
-  templateUrl: './section-collapse-drawer-child.component.html',
-  styleUrl: './section-collapse-drawer-child.component.scss',
-  animations: [
-    trigger('slideInOut', [
-      state('void', style({
-        height: '0px',
-        opacity: 0,
-        overflow: 'hidden'
-      })),
-      state('*', style({
-        height: '*',
-        opacity: 1
-      })),
-      transition('void => *', [
-        animate('370ms ease-in')
-      ]),
-      transition('* => void', [
-        animate('370ms ease-out')
-      ])
-    ])
-  ],
-})
-export class SectionCollapseDrawerChildComponent {
-  @Input() isActive = false;
-  @Input() disabled = false;
-  @Input() textTitle = 'Title';
-  @Input() iconName = '';
-  @Output() buttonClicked: EventEmitter<void> = new EventEmitter();
-
-
-  onClick() {
-    this.isActive = !this.isActive
-    this.buttonClicked.emit();
-  }
-}

package/src/lib/section-collapse-drawer-parent/index.ts

@@ -1,2 +0,0 @@
-export * from './section-collapse-drawer-parent.component';
-

package/src/lib/section-collapse-drawer-parent/section-collapse-drawer-parent.component.html

@@ -1,16 +0,0 @@
-<div class="dropdown-container">
-  <button [disabled]="disabled" (click)="onClick()" class="ius-btn" [ngClass]="{ isActive: isActive }">
-    @if(iconName !== '') {
-    <ius-icon-md [iconName]="iconName" class="icon-color"></ius-icon-md>
-    }
-    <span>{{textTitle}}</span>
-    <ius-icon-sm class="arrow"
-      [iconName]="isActive && !disabled ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'">
-    </ius-icon-sm>
-  </button>
-</div>
-@if (isActive && !disabled) {
-<div @slideInOut>
-  <ng-content></ng-content>
-</div>
-}

package/src/lib/section-collapse-drawer-parent/section-collapse-drawer-parent.component.scss

@@ -1,52 +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;
-
-.icon-color {
-  color: colors.$info-400;
-}
-
-.icon-doc-color {
-  color: colors.$info-400;
-}
-
-.arrow {
-  margin-left: auto;
-  padding-bottom: 5px;
-}
-
-.ius-btn {
-  display: inline-flex;
-  width: 100%;
-  height: 48px;
-  padding: variables.$spacing-sm;
-  align-items: center;
-  gap: variables.$spacing-xs;
-  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-h5;
-  line-height: typography.$line-height-h5;
-  letter-spacing: 1%;
-  justify-content: space-between;
-
-  &:hover:not(:disabled) {
-    color: colors.$info-700;
-  }
-
-  &:active:not(:disabled) {
-    background-color: colors.$info-100;
-  }
-
-  &:disabled {
-    .icon-color{
-        color: semantic-colors.$color-text-disabled-on-light; 
-    }
-
-    color: semantic-colors.$color-text-disabled-on-light;
-    cursor: not-allowed;
-}
-}

package/src/lib/section-collapse-drawer-parent/section-collapse-drawer-parent.component.spec.ts

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

package/src/lib/section-collapse-drawer-parent/section-collapse-drawer-parent.component.ts

@@ -1,46 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { trigger, transition, style, animate, state, } from '@angular/animations';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IconSmComponent } from '../icon-sm/icon-sm.component';
-import { IconMdComponent } from "../icon-md/icon-md.component";
-
-@Component({
-  selector: 'ius-section-collapse-drawer-parent',
-  standalone: true,
-  imports: [CommonModule, IconSmComponent, IconMdComponent],
-  templateUrl: './section-collapse-drawer-parent.component.html',
-  styleUrl: './section-collapse-drawer-parent.component.scss',
-  animations: [
-    trigger('slideInOut', [
-      state('void', style({
-        height: '0px',
-        opacity: 0,
-        overflow: 'hidden'
-      })),
-      state('*', style({
-        height: '*',
-        opacity: 1
-      })),
-      transition('void => *', [
-        animate('370ms ease-in')
-      ]),
-      transition('* => void', [
-        animate('370ms ease-out')
-      ])
-    ])
-  ],
-})
-export class SectionCollapseDrawerParentComponent {
-  @Input() isActive = false;
-  @Input() disabled = false;
-  @Input() textTitle = 'Title';
-  @Input() iconName = '';
-  @Output() buttonClicked: EventEmitter<void> = new EventEmitter();
-
-
-  onClick() {
-    this.isActive = !this.isActive
-    this.buttonClicked.emit();
-  }
-
-}

package/src/lib/segment/index.ts

@@ -1 +0,0 @@
-export * from './segment.component';

package/src/lib/segment/segment.component.html

@@ -1,15 +0,0 @@
-<div class="general-container">
-  <div class="container"
-       role="button"
-       tabindex="0"
-       [class.active]="active"
-       [class.disabled]="disabled"
-       [class.pressed]="isPressed"
-       (mousedown)="onPress()"
-       (mouseup)="onRelease()"
-       (mouseleave)="onRelease()"
-       (click)="onClick()"
-       [attr.aria-disabled]="disabled">
-    <span>{{text}}</span>
-  </div>
-</div>