@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

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

@@ -0,0 +1,116 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ius-button-auth',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button-auth.component.html',
+  styleUrl: './button-auth.component.scss'
+})
+export class ButtonAuthComponent {
+
+  @Input() disabled = false;
+  @Input() textButton?: 'Google' | 'Microsoft' | 'LinkedIn' = 'Google';
+  @Output() buttonClicked: EventEmitter<void> = new EventEmitter();
+
+  colorDisabled: string = '#BFBFBF';
+
+  svg: SafeHtml = '';
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  ngOnInit() {
+    var svgIcon: string = '';
+
+    switch (this.textButton) {
+      case 'Google':
+        if (this.disabled) {
+          svgIcon = this.svgGoogleDisabled;
+        } else {
+          svgIcon = this.svgGoogle;
+        }
+        break;
+      case 'Microsoft':
+        if (this.disabled) {
+          svgIcon = this.svgMicrosoftDisabled;
+        } else {
+          svgIcon = this.svgMicrosoft;
+        }
+        break;
+      case 'LinkedIn':
+        if (this.disabled) {
+          svgIcon = this.svgLinkedinDisabled;
+        } else {
+          svgIcon = this.svgLinkedin;
+        }
+        break;
+      default:
+        svgIcon = '';
+        break;
+    }
+
+    this.svg = this.sanitizer.bypassSecurityTrustHtml(svgIcon) ?? '';
+  }
+
+  onClick() {
+    if (this.disabled == false) {
+      this.buttonClicked.emit();
+    }
+  }
+
+  svgGoogle: string = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M18.8 10.2084C18.8 9.55837 18.7417 8.93337 18.6333 8.33337H10V11.8834H14.9333C14.7167 13.025 14.0667 13.9917 13.0917 14.6417V16.95H16.0667C17.8 15.35 18.8 13 18.8 10.2084Z" fill="#4285F4"/>
+    <path d="M10 19.1667C12.475 19.1667 14.55 18.35 16.0667 16.95L13.0917 14.6417C12.275 15.1917 11.2333 15.525 10 15.525C7.61668 15.525 5.59168 13.9167 4.86668 11.75H1.81668V14.1167C3.32501 17.1083 6.41668 19.1667 10 19.1667Z" fill="#34A853"/>
+    <path d="M4.86668 11.7417C4.68334 11.1917 4.57501 10.6084 4.57501 10.0001C4.57501 9.39172 4.68334 8.80839 4.86668 8.25839V5.89172H1.81668C1.19168 7.12506 0.833344 8.51672 0.833344 10.0001C0.833344 11.4834 1.19168 12.8751 1.81668 14.1084L4.19168 12.2584L4.86668 11.7417Z" fill="#FBBC05"/>
+    <path d="M10 4.48337C11.35 4.48337 12.55 4.95004 13.5083 5.85004L16.1333 3.22504C14.5417 1.74171 12.475 0.833374 10 0.833374C6.41668 0.833374 3.32501 2.89171 1.81668 5.89171L4.86668 8.25837C5.59168 6.09171 7.61668 4.48337 10 4.48337Z" fill="#EA4335"/>
+  </svg>`;
+
+  svgGoogleDisabled: string = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M18.8 10.2084C18.8 9.55837 18.7417 8.93337 18.6333 8.33337H10V11.8834H14.9333C14.7167 13.025 14.0667 13.9917 13.0917 14.6417V16.95H16.0667C17.8 15.35 18.8 13 18.8 10.2084Z" fill="#BFBFBF"/>
+    <path d="M10 19.1667C12.475 19.1667 14.55 18.35 16.0667 16.95L13.0917 14.6417C12.275 15.1917 11.2333 15.525 10 15.525C7.61668 15.525 5.59168 13.9167 4.86668 11.75H1.81668V14.1167C3.32501 17.1083 6.41668 19.1667 10 19.1667Z" fill="#BFBFBF"/>
+    <path d="M4.86668 11.7417C4.68334 11.1917 4.57501 10.6084 4.57501 10.0001C4.57501 9.39172 4.68334 8.80839 4.86668 8.25839V5.89172H1.81668C1.19168 7.12506 0.833344 8.51672 0.833344 10.0001C0.833344 11.4834 1.19168 12.8751 1.81668 14.1084L4.19168 12.2584L4.86668 11.7417Z" fill="#BFBFBF"/>
+    <path d="M10 4.48337C11.35 4.48337 12.55 4.95004 13.5083 5.85004L16.1333 3.22504C14.5417 1.74171 12.475 0.833374 10 0.833374C6.41668 0.833374 3.32501 2.89171 1.81668 5.89171L4.86668 8.25837C5.59168 6.09171 7.61668 4.48337 10 4.48337Z" fill="#BFBFBF"/>
+  </svg>`;
+
+  svgMicrosoft: string = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <g clip-path="url(#clip0_1670_13811)">
+      <path d="M0 0H20V20H0V0Z" fill="#F3F3F3"/>
+      <path d="M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z" fill="#F35325"/>
+      <path d="M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z" fill="#81BC06"/>
+      <path d="M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z" fill="#05A6F0"/>
+      <path d="M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z" fill="#FFBA08"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1670_13811">
+        <rect width="20" height="20" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>`;
+
+  svgMicrosoftDisabled: string = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <g clip-path="url(#clip0_1670_13817)">
+      <path d="M0 0H20V20H0V0Z" fill="#F3F3F3"/>
+      <path d="M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z" fill="#BFBFBF"/>
+      <path d="M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z" fill="#BFBFBF"/>
+      <path d="M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z" fill="#BFBFBF"/>
+      <path d="M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z" fill="#BFBFBF"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1670_13817">
+        <rect width="20" height="20" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>`;
+
+  svgLinkedin: string = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.22222 20H17.7778C19.0051 20 20 19.0051 20 17.7778V2.22222C20 0.994923 19.0051 0 17.7778 0H2.22222C0.994923 0 0 0.994923 0 2.22222V17.7778C0 19.0051 0.994923 20 2.22222 20Z" fill="#007EBB"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2222 17.2223H14.2543V12.1673C14.2543 10.7814 13.7277 10.0069 12.6307 10.0069C11.4374 10.0069 10.8139 10.8129 10.8139 12.1673V17.2223H7.9537V7.59265H10.8139V8.88976C10.8139 8.88976 11.6739 7.29845 13.7174 7.29845C15.7599 7.29845 17.2222 8.54574 17.2222 11.1254V17.2223ZM4.54148 6.33172C3.56723 6.33172 2.77777 5.53607 2.77777 4.55478C2.77777 3.57349 3.56723 2.77783 4.54148 2.77783C5.51573 2.77783 6.30472 3.57349 6.30472 4.55478C6.30472 5.53607 5.51573 6.33172 4.54148 6.33172ZM3.06459 17.2223H6.04705V7.59265H3.06459V17.2223Z" fill="white"/>
+  </svg>`;
+
+  svgLinkedinDisabled: string = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.22222 20H17.7778C19.0051 20 20 19.0051 20 17.7778V2.22222C20 0.994923 19.0051 0 17.7778 0H2.22222C0.994923 0 0 0.994923 0 2.22222V17.7778C0 19.0051 0.994923 20 2.22222 20Z" fill="#BFBFBF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2222 17.2223H14.2543V12.1673C14.2543 10.7814 13.7277 10.0069 12.6307 10.0069C11.4374 10.0069 10.8139 10.8129 10.8139 12.1673V17.2223H7.9537V7.59265H10.8139V8.88976C10.8139 8.88976 11.6739 7.29845 13.7174 7.29845C15.7599 7.29845 17.2222 8.54574 17.2222 11.1254V17.2223ZM4.54148 6.33172C3.56723 6.33172 2.77777 5.53607 2.77777 4.55478C2.77777 3.57349 3.56723 2.77783 4.54148 2.77783C5.51573 2.77783 6.30472 3.57349 6.30472 4.55478C6.30472 5.53607 5.51573 6.33172 4.54148 6.33172ZM3.06459 17.2223H6.04705V7.59265H3.06459V17.2223Z" fill="white"/>
+  </svg>`;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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();
+  });
+});