@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

package/src/lib/button-circle-secondary/button-circle-secondary.component.scss

@@ -1,39 +0,0 @@
-@use '@litigiovirtual/ius-design-styles/lib/colors' as colors;
-@use '@litigiovirtual/ius-design-styles/lib/variables' as variables;
-@use '@litigiovirtual/ius-design-styles/lib/semantic-colors' as semantic-colors;
-
-.icon-color{
-    color : colors.$success-600;
-}
-
-.ius-btn {
-    display: inline-flex;
-    padding: variables.$spacing-sm;
-    justify-content: center;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-    border-radius: variables.$radius-pill;
-    border: 1px solid colors.$success-600;
-    background-color: semantic-colors.$color-btn-secondary-2-default;
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-        background-color: semantic-colors.$color-btn-secondary-2-hovered;
-    }
-
-    &:active:not(:disabled) {
-        .icon-color{
-            color: semantic-colors.$color-text-primary-on-dark; 
-        }
-        background-color: semantic-colors.$color-btn-secondary-2-pressed;
-    }
-
-    &:disabled {
-        .icon-color{
-            color: semantic-colors.$color-text-disabled-on-light; 
-        }
-        border: 1px solid colors.$neutral-4;
-        background-color: semantic-colors.$color-btn-secondary-2-disabled;
-        cursor: not-allowed;
-    }
-}

package/src/lib/button-circle-secondary/button-circle-secondary.component.spec.ts

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

package/src/lib/button-circle-secondary/button-circle-secondary.component.ts

@@ -1,25 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IconLgComponent } from "../icon-lg/icon-lg.component";
-
-
-@Component({
-  selector: 'ius-button-circle-secondary',
-  standalone: true,
-  imports: [IconLgComponent],
-  templateUrl: './button-circle-secondary.component.html',
-  styleUrl: './button-circle-secondary.component.scss'
-})
-export class ButtonCircleSecondaryComponent {
-
-  @Input() disabled = false;
-  @Input() iconName = '';
-  @Output() buttonClicked: EventEmitter<Event> = new EventEmitter();
-
-  onClick(event:Event) {
-    if (this.disabled == false) {
-      this.buttonClicked.emit(event);
-    }
-  }
-
-  
-}

package/src/lib/button-circle-secondary/index.ts

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

package/src/lib/button-circle-tertiary/button-circle-tertiary.component.html

@@ -1,3 +0,0 @@
-<button [disabled]="disabled" (click)="onClick($event)" class="ius-btn">
-    <ius-icon-sm [iconName]="iconName" class="icon-color"></ius-icon-sm>
-</button>

package/src/lib/button-circle-tertiary/button-circle-tertiary.component.scss

@@ -1,38 +0,0 @@
-@use '@litigiovirtual/ius-design-styles/lib/colors' as colors;
-@use '@litigiovirtual/ius-design-styles/lib/variables' as variables;
-@use '@litigiovirtual/ius-design-styles/lib/semantic-colors' as semantic-colors;
-
-.icon-color{
-    color : semantic-colors.$color-text-primary-on-light;
-}
-
-.ius-btn {
-    display: inline-flex;
-    padding: variables.$spacing-sm;
-    justify-content: center;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-    border-radius: variables.$radius-pill;
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-        background-color: semantic-colors.$color-btn-tertiary-hovered;
-    }
-
-    &:active:not(:disabled) {
-        .icon-color{
-            color: semantic-colors.$color-text-primary-on-dark; 
-        }
-        background-color: semantic-colors.$color-btn-tertiary-pressed;
-    }
-
-    &:disabled {
-        .icon-color{
-            color: semantic-colors.$color-text-disabled-on-light; 
-        }
-        background-color: semantic-colors.$color-btn-tertiary-disabled;
-        cursor: not-allowed;
-    }
-}

package/src/lib/button-circle-tertiary/button-circle-tertiary.component.spec.ts

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

package/src/lib/button-circle-tertiary/button-circle-tertiary.component.ts

@@ -1,22 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IconSmComponent } from "../icon-sm/icon-sm.component";
-
-@Component({
-  selector: 'ius-button-circle-tertiary',
-  standalone: true,
-  imports: [IconSmComponent],
-  templateUrl: './button-circle-tertiary.component.html',
-  styleUrl: './button-circle-tertiary.component.scss'
-})
-export class ButtonCircleTertiaryComponent {
-
-  @Input() disabled = false;
-  @Input() iconName = 'icon-add';
-  @Output() buttonClicked: EventEmitter<Event> = new EventEmitter();
-
-  onClick(event: Event) {
-    if (this.disabled == false) {
-      this.buttonClicked.emit(event);
-    }
-  }
-}

package/src/lib/button-circle-tertiary/index.ts

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

package/src/lib/button-dynamic/button-dynamic.component.html

@@ -1,19 +0,0 @@
-<button class="ius-btn" [attr.data-state]="state" [disabled]="state === 'disabled' || state === 'loading'"
-  (click)="onClick($event)" aria-live="polite">
-  @switch (state) {
-  @case ('loading') {
-  <ius-loading-circle></ius-loading-circle>
-  }
-  @case ('success') {
-  <ius-icon-md iconName="icon-check-circle"></ius-icon-md>
-  <span>{{ labelSuccess }}</span>
-  }
-  @case ('error') {
-  <ius-icon-md iconName="icon-error"></ius-icon-md>
-  <span>{{ labelError }}</span>
-  }
-  @default {
-  <span>{{ labelDefault }}</span>
-  }
-  }
-</button>

package/src/lib/button-dynamic/button-dynamic.component.scss

@@ -1,56 +0,0 @@
-@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
-@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
-@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
-@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
-
-.ius-btn {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  gap: variables.$spacing-xs;
-  width: 100%;
-  height: 40px;
-  padding: variables.$spacing-sm variables.$spacing-lg;
-  border: none;
-  border-radius: variables.$radius-lg;
-  background-color: semantic-colors.$color-btn-primary-default;
-  color: semantic-colors.$color-text-primary-on-dark;
-  font-family: typography.$font-secondary;
-  font-size: typography.$font-size-base;
-  font-weight: 500;
-  line-height: typography.$line-height-base;
-  cursor: pointer;
-  transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease;
-
-  &:hover:not(:disabled):not([data-state='loading']):not([data-state='success']):not([data-state='error']) {
-    background-color: semantic-colors.$color-btn-primary-hovered;
-    box-shadow: variables.$elevation-100;
-  }
-
-  &:active:not(:disabled) {
-    background-color: semantic-colors.$color-btn-primary-pressed;
-  }
-
-  &:disabled {
-    background-color: semantic-colors.$color-btn-primary-disabled;
-    color: semantic-colors.$color-text-disabled-on-light;
-    cursor: not-allowed;
-  }
-
-  &[data-state='loading'] {
-    background-color: semantic-colors.$color-btn-primary-pressed;
-  }
-
-  &[data-state='success'] {
-    background-color: colors.$success-600;
-  }
-
-  &[data-state='error'] {
-    background-color: colors.$danger-600;
-  }
-
-  &[data-state='disabled'] {
-    background-color: semantic-colors.$color-btn-primary-disabled;
-  }
-}

package/src/lib/button-dynamic/button-dynamic.component.spec.ts

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

package/src/lib/button-dynamic/button-dynamic.component.ts

@@ -1,113 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges } from '@angular/core';
-import { IconMdComponent } from '../icon-md/icon-md.component';
-import { LoadingCircleComponent } from '../loading-circle/loading-circle.component';
-
-export type ButtonResult = 'success' | 'error' | undefined;
-type ButtonState = 'default' | 'loading' | 'success' | 'error' | 'disabled';
-
-@Component({
-  selector: 'ius-button-dynamic',
-  standalone: true,
-  imports: [CommonModule, LoadingCircleComponent, IconMdComponent],
-  templateUrl: './button-dynamic.component.html',
-  styleUrls: ['./button-dynamic.component.scss'],
-})
-export class ButtonDynamicComponent implements OnChanges, OnDestroy {
-
-  @Input() labelDefault = 'Label';
-  @Input() labelSuccess?: string;
-  @Input() labelError?: string;
-
-  @Input() disabled = false;
-  @Input() loading = false;
-  @Input() result: ButtonResult;
-
-  @Input() autoReset = true;
-  @Input() autoResetDelay = 1500;
-
-  @Output() buttonClicked = new EventEmitter<Event>();
-
-  state: ButtonState = 'default';
-  private resetTimer: any;
-
-  ngOnInit() {
-    if (!this.labelSuccess) {
-      this.labelSuccess = this.labelDefault;
-    }
-    if (!this.labelError) {
-      this.labelError = this.labelDefault;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // 1) disabled manda todo a 'disabled'
-    if (this.disabled) {
-      this.setState('disabled');
-      return;
-    }
-
-    // 2) loading gobierna mientras es true
-    if (changes['loading']) {
-      if (this.loading) {
-        this.clearTimer();
-        this.setState('loading');
-        return;
-      } else {
-        // loading → false: mirar result
-        this.applyResultState();
-        return;
-      }
-    }
-
-    // 3) Si cambió 'result' y no estamos cargando, aplicar
-    if (changes['result'] && !this.loading) {
-      this.applyResultState();
-    }
-
-    // 4) fallback
-    if (!this.loading && !this.result) {
-      this.setState('default');
-    }
-  }
-
-  applyResultState(): void {
-    if (this.result === 'success') {
-      this.setState('success');
-      this.armAutoReset();
-    } else if (this.result === 'error') {
-      this.setState('error');
-      this.armAutoReset();
-    } else {
-      this.setState('default');
-    }
-  }
-
-  armAutoReset(): void {
-    this.clearTimer();
-    if (!this.autoReset) return;
-    this.resetTimer = setTimeout(() => {
-      this.setState('default');
-    }, this.autoResetDelay);
-  }
-
-  clearTimer(): void {
-    if (this.resetTimer) {
-      clearTimeout(this.resetTimer);
-      this.resetTimer = null;
-    }
-  }
-
-  setState(s: ButtonState) {
-    this.state = s;
-  }
-
-  onClick(event: Event) {
-    if (this.state === 'loading' || this.state === 'disabled') return;
-    this.buttonClicked.emit(event);
-  }
-
-  ngOnDestroy(): void {
-    this.clearTimer();
-  }
-}

package/src/lib/button-dynamic/index.ts

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

package/src/lib/button-filter/button-filter.component.html

@@ -1,22 +0,0 @@
-<div class="ius-btn">
-    <ius-button-squared-tertiary iconName="icon-filter-list"
-        (buttonClicked)="showListFilter()"></ius-button-squared-tertiary>
-</div>
-
-<ng-template #filterPanel>
-    <div class="ctn-filter color-pry">
-        <div class="head-fl">
-            <span class="label-large color-pry">Filtrar por:</span>
-            <ius-button-circle-tertiary iconName="icon-close" (buttonClicked)="onClickClose($event)"></ius-button-circle-tertiary>
-        </div>
-        <div class="content scrollable">
-            <ng-content></ng-content>
-        </div>
-        <div class="ctn-btns">
-            <ius-button-dynamic labelDefault="Filtrar" (buttonClicked)="onClickFilter($event)">
-            </ius-button-dynamic>
-            <ius-button-standard-secondary (buttonClicked)="onClickDeleteFilter($event)">Borrar
-                filtros</ius-button-standard-secondary>
-        </div>
-    </div>
-</ng-template>

package/src/lib/button-filter/button-filter.component.scss

@@ -1,90 +0,0 @@
-@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
-@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
-@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
-@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
-
-.ius-btn {
-    display: flex;
-    position: relative;
-    transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease;
-}
-
-.ctn-filter {
-    display: flex;
-    width: 372px;
-    max-height: 70vh;
-    box-sizing: border-box;
-    padding: variables.$spacing-md 0 variables.$spacing-xxs 0;
-    flex-direction: column;
-    gap: 0;
-
-    border-radius: variables.$radius-md;
-    background: colors.$neutral-white;
-    box-shadow: variables.$elevation-200;
-
-    animation: ius-filter-enter 0.25s ease;
-}
-
-@keyframes ius-filter-enter {
-    from {
-        opacity: 0;
-        transform: translateY(-6px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.color-pry {
-    color: semantic-colors.$color-text-primary-on-light;
-}
-
-.ctn-btns {
-    display: flex;
-    flex-shrink: 0;
-    padding: variables.$spacing-xs variables.$spacing-md;
-    flex-direction: column;
-    gap: variables.$spacing-xxs;
-    margin-top: variables.$spacing-md;
-}
-
-.content {
-    padding: 0 variables.$spacing-md;
-    flex: 1 1 auto;
-}
-
-.scrollable {
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.scrollable::-webkit-scrollbar {
-    -webkit-appearance: none;
-}
-
-.scrollable::-webkit-scrollbar:vertical {
-    width: 7px;
-}
-
-.scrollable::-webkit-scrollbar-thumb {
-    background-color: #d8d6d6;
-    border-radius: 20px;
-}
-
-.head-fl {
-    display: flex;
-    height: 48px;
-    padding: 0 variables.$spacing-md;
-    align-items: center;
-    gap: variables.$spacing-xxs;
-}
-
-.head-fl span {
-    display: flex;
-    padding: 8px;
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 1 0 0;
-}

package/src/lib/button-filter/button-filter.component.spec.ts

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

package/src/lib/button-filter/button-filter.component.ts

@@ -1,94 +0,0 @@
-import { Component, ElementRef, EventEmitter, OnDestroy, Output, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { ButtonSquaredTertiaryComponent } from "../button-squared-tertiary";
-import { ButtonDynamicComponent } from "../button-dynamic";
-import { ButtonStandardSecondaryComponent } from "../button-standard-secondary";
-import { ButtonCircleTertiaryComponent } from "../button-circle-tertiary";
-
-@Component({
-  selector: 'ius-button-filter',
-  standalone: true,
-  imports: [ButtonSquaredTertiaryComponent, ButtonDynamicComponent, ButtonStandardSecondaryComponent, ButtonCircleTertiaryComponent],
-  templateUrl: './button-filter.component.html',
-  styleUrl: './button-filter.component.scss'
-})
-export class ButtonFilterComponent implements OnDestroy {
-
-  @Output() clickFilter = new EventEmitter<Event>();
-  @Output() clickDeleteFilter = new EventEmitter<Event>();
-  @Output() clickClose = new EventEmitter<Event>();
-  @Output() panelOpened = new EventEmitter<void>();
-
-  @ViewChild('filterPanel') filterPanel!: TemplateRef<unknown>;
-
-  private _overlayRef: OverlayRef | null = null;
-
-  get showFilter(): boolean {
-    return this._overlayRef !== null;
-  }
-
-  constructor(
-    private readonly _el: ElementRef,
-    private readonly _overlay: Overlay,
-    private readonly _vcr: ViewContainerRef
-  ) {}
-
-  showListFilter(): void {
-    this.showFilter ? this.onClickClose(new Event('close')) : this._openPanel();
-  }
-
-  private _openPanel(): void {
-    this.panelOpened.emit();
-    const positionStrategy = this._overlay
-      .position()
-      .flexibleConnectedTo(this._el)
-      .withFlexibleDimensions(false)
-      .withPush(false)
-      .withPositions([
-        // 1. Abajo + alineado izquierda
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top',    offsetY:  4 },
-        // 2. Abajo + alineado derecha
-        { originX: 'end',   originY: 'bottom', overlayX: 'end',   overlayY: 'top',    offsetY:  4 },
-        // 3. Derecha + alineado centro
-        { originX: 'end',   originY: 'center', overlayX: 'start', overlayY: 'center', offsetX:  4 },
-        // 4. Izquierda + alineado centro
-        { originX: 'start', originY: 'center', overlayX: 'end',   overlayY: 'center', offsetX: -4 },
-        // 5. Arriba + alineado izquierda
-        { originX: 'start', originY: 'top',    overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-      ]);
-
-    this._overlayRef = this._overlay.create({
-      positionStrategy,
-      hasBackdrop: true,
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      scrollStrategy: this._overlay.scrollStrategies.reposition(),
-    });
-
-    this._overlayRef.backdropClick().subscribe((e) => this.onClickClose(e));
-    this._overlayRef.attach(new TemplatePortal(this.filterPanel, this._vcr));
-  }
-
-  private _closePanel(): void {
-    this._overlayRef?.dispose();
-    this._overlayRef = null;
-  }
-
-  ngOnDestroy(): void {
-    this._closePanel();
-  }
-
-  onClickFilter(event: Event): void {
-    this.clickFilter.emit(event);
-    this._closePanel();
-  }
-
-  onClickDeleteFilter(event: Event): void {
-    this.clickDeleteFilter.emit(event);
-  }
-
-  onClickClose(event: Event): void {
-    this._closePanel();
-    this.clickClose.emit(event);
-  }
-}

package/src/lib/button-filter/index.ts

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

package/src/lib/button-menu-link/button-menu-link.component.html

@@ -1,3 +0,0 @@
-<button [disabled]="disabled" (click)="onClick($event)" class="ius-btn">
-    <ius-icon-md [iconName]="iconName" class="icon-color" [style.color]="iconColor"></ius-icon-md>
-</button>

package/src/lib/button-menu-link/button-menu-link.component.scss

@@ -1,33 +0,0 @@
-@use '@litigiovirtual/ius-design-styles/lib/colors' as colors;
-@use '@litigiovirtual/ius-design-styles/lib/variables' as variables;
-@use '@litigiovirtual/ius-design-styles/lib/semantic-colors' as semantic-colors;
-
-.icon-color {
-    color: colors.$success-500;
-}
-
-.ius-btn {
-    display: flex;
-    width: 36px;
-    height: 28px;
-    padding: variables.$spacing-xxs variables.$spacing-xs;
-    justify-content: center;
-    align-items: center;
-    border-radius: variables.$radius-sm;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-        background-color: colors.$neutral-3;
-    }
-
-    &:disabled {
-        .icon-color {
-            color: colors.$neutral-8 !important;
-        }
-
-        background-color: colors.$neutral-3;
-        cursor: not-allowed;
-    }
-}