@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

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

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

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

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

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

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

package/src/lib/button-menu-link/button-menu-link.component.spec.ts

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

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

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

package/src/lib/button-menu-link/index.ts

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

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

@@ -0,0 +1,27 @@
+@if(orderData){
+<div class="ius-btn">
+    <ius-button-squared-tertiary iconName="icon-low-priority"
+        (buttonClicked)="showListOrder()"></ius-button-squared-tertiary>
+</div>
+
+<ng-template #orderPanel>
+    <div class="ctn-order color-pry">
+        <div class="scrollable">
+            @for (itemOrder of orderData!; track $index) {
+            <div class="title caption-sm">
+                <ius-icon-sm [iconName]="itemOrder.iconName" class="color-pry"></ius-icon-sm>
+                <span>{{itemOrder.title}}</span>
+            </div>
+            @for (label of itemOrder.values; track $index) {
+            <div class="ctn-option">
+                <ius-option-item (optionClick)="onClickOrderChange(itemOrder.title, label)">{{label}}</ius-option-item>
+            </div>
+            }
+            @if (itemOrder != orderData![orderData!.length - 1]) {
+            <ius-simple-divider></ius-simple-divider>
+            }
+            }
+        </div>
+    </div>
+</ng-template>
+}

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

@@ -0,0 +1,75 @@
+@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-order {
+    display: flex;
+    width: 348px;
+    max-height: 70vh;
+    box-sizing: border-box;
+    padding: variables.$spacing-xxs;
+    flex-direction: column;
+    justify-content: center;
+    gap: variables.$spacing-xxs;
+
+    border-radius: variables.$radius-md;
+    background: colors.$neutral-white;
+    box-shadow: variables.$elevation-200;
+
+    animation: ius-order-enter 0.25s ease;
+}
+
+.scrollable {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+        width: 7px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #d8d6d6;
+        border-radius: 20px;
+    }
+}
+
+@keyframes ius-order-enter {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.title {
+    display: flex;
+    height: 38px;
+    box-sizing: border-box;
+    padding: variables.$spacing-xs 20px variables.$spacing-xs variables.$spacing-sm;
+    align-items: center;
+    gap: variables.$spacing-xs;
+}
+
+.color-pry {
+    color: semantic-colors.$color-text-primary-on-light;
+}
+
+.ctn-option {
+    margin-bottom: variables.$spacing-xxs;
+}

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

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

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

@@ -0,0 +1,84 @@
+import { Component, Input, 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 { IconSmComponent } from '../icon-sm/icon-sm.component';
+import { SimpleDividerComponent } from "../simple-divider";
+import { OptionItemComponent } from "../option-item";
+
+export type OrderData = { title: string; iconName: string; values: string[]; };
+
+@Component({
+  selector: 'ius-button-order',
+  standalone: true,
+  imports: [ButtonSquaredTertiaryComponent, IconSmComponent, SimpleDividerComponent, OptionItemComponent],
+  templateUrl: './button-order.component.html',
+  styleUrl: './button-order.component.scss'
+})
+export class ButtonOrderComponent implements OnDestroy {
+
+  @Input() orderData?: OrderData[];
+  @Output() orderChange = new EventEmitter<{ title: string; value: string; }>();
+
+  @ViewChild('orderPanel') orderPanel!: TemplateRef<unknown>;
+
+  private _overlayRef: OverlayRef | null = null;
+
+  get showOrder(): boolean {
+    return this._overlayRef !== null;
+  }
+
+  constructor(
+    private readonly _el: ElementRef,
+    private readonly _overlay: Overlay,
+    private readonly _vcr: ViewContainerRef
+  ) {}
+
+  showListOrder(): void {
+    this.showOrder ? this._closePanel() : this._openPanel();
+  }
+
+  private _openPanel(): void {
+    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(() => this._closePanel());
+    this._overlayRef.attach(new TemplatePortal(this.orderPanel, this._vcr));
+  }
+
+  private _closePanel(): void {
+    this._overlayRef?.dispose();
+    this._overlayRef = null;
+  }
+
+  ngOnDestroy(): void {
+    this._closePanel();
+  }
+
+  onClickOrderChange(title: string, label: string): void {
+    this.orderChange.emit({ title, value: label });
+    this._closePanel();
+  }
+}

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

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

package/src/lib/button-squared-secondary/button-squared-secondary.component.html

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

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

@@ -0,0 +1,43 @@
+@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: 40px;
+    height: 40px;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    flex-shrink: 0;
+    align-self: 1/1;
+    border-radius: variables.$radius-md;
+    background-color: semantic-colors.$color-btn-secondary-1-default;
+    border: none;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+        background-color: semantic-colors.$color-btn-secondary-1-hovered;
+    }
+
+    &:active:not(:disabled) {
+        .icon-color{
+            color: semantic-colors.$color-text-primary-on-dark; 
+        }
+        background-color: semantic-colors.$color-btn-secondary-1-pressed;
+    }
+
+    &:disabled {
+        .icon-color{
+            color: semantic-colors.$color-text-disabled-on-light; 
+        }
+
+        background-color: semantic-colors.$color-btn-secondary-1-disabled;
+        cursor: not-allowed;
+    }
+}

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

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

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

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from "../icon-md/icon-md.component";
+
+@Component({
+  selector: 'ius-button-squared-secondary',
+  standalone: true,
+  imports: [IconMdComponent],
+  templateUrl: './button-squared-secondary.component.html',
+  styleUrl: './button-squared-secondary.component.scss'
+})
+export class ButtonSquaredSecondaryComponent {
+
+  @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-squared-secondary/index.ts

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

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

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

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

@@ -0,0 +1,42 @@
+@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: flex;
+    width: 40px;
+    height: 40px;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    flex-shrink: 0;
+    align-self: 1/1;
+    border-radius: variables.$radius-md;
+    background-color: semantic-colors.$color-btn-secondary-1-default;
+    border: none;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+        background-color: semantic-colors.$color-btn-secondary-1-hovered;
+    }
+
+    &:active:not(:disabled) {
+        .icon-color{
+            color: semantic-colors.$color-text-primary-on-dark; 
+        }
+        background-color: semantic-colors.$color-btn-secondary-1-pressed;
+    }
+
+    &:disabled {
+        .icon-color{
+            color: semantic-colors.$color-text-disabled-on-light; 
+        }
+
+        background-color: semantic-colors.$color-btn-secondary-1-default;
+        cursor: not-allowed;
+    }
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from "../icon-md/icon-md.component";
+
+@Component({
+  selector: 'ius-button-squared-tertiary',
+  standalone: true,
+  imports: [IconMdComponent],
+  templateUrl: './button-squared-tertiary.component.html',
+  styleUrl: './button-squared-tertiary.component.scss'
+})
+export class ButtonSquaredTertiaryComponent {
+  @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-squared-tertiary/index.ts

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

package/src/lib/button-standard-outline/button-standard-outline.component.html

@@ -0,0 +1,6 @@
+<button [disabled]="disabled" (click)="onClick($event)" class="ius-btn label-large">
+    @if(iconName){
+    <ius-icon-md [iconName]="iconName" class="icon-color"></ius-icon-md>
+    }
+    <ng-content></ng-content>
+</button>

package/src/lib/button-standard-outline/button-standard-outline.component.scss

@@ -0,0 +1,51 @@
+@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: inline-block;
+}
+
+.icon-color {
+    color: colors.$success-600;
+}
+
+.ius-btn {
+    width: 100%;
+    display: inline-flex;
+    padding: variables.$spacing-xs variables.$spacing-lg;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    border-radius: variables.$radius-lg;
+    background: colors.$neutral-white;
+    color: colors.$success-600;
+    border: 1px solid colors.$success-600;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+        background: colors.$success-100;
+        box-shadow: variables.$elevation-100;
+    }
+
+    &:active:not(:disabled) {
+        background: colors.$success-600;
+        color: semantic-colors.$color-text-primary-on-dark;
+
+        .icon-color {
+            color: semantic-colors.$color-text-primary-on-dark;
+        }
+    }
+
+    &:disabled {
+        .icon-color {
+            color: semantic-colors.$color-text-disabled-on-light;
+        }
+
+        border: 1px solid colors.$neutral-4;
+        background: colors.$neutral-2;
+        color: semantic-colors.$color-text-disabled-on-light;
+        cursor: not-allowed;
+    }
+}