@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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