@litigiovirtual/ius-design-components 1.0.126 → 1.0.128

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ius-design-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@litigiovirtual/ius-design-styles"
+  ]
+}

package/package.json

@@ -1,27 +1,17 @@
-{
-  "name": "@litigiovirtual/ius-design-components",
-  "version": "1.0.126",
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0 <20.0.0",
-    "@angular/core": ">=17.0.0 <20.0.0",
-    "@angular/cdk": ">=17.0.0 <20.0.0"
-  },
-  "dependencies": {
-    "@litigiovirtual/ius-design-styles": "^1.0.13",
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/litigiovirtual-ius-design-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/litigiovirtual-ius-design-components.mjs",
-      "esm": "./esm2022/litigiovirtual-ius-design-components.mjs",
-      "default": "./fesm2022/litigiovirtual-ius-design-components.mjs"
-    }
-  }
+{
+  "name": "@litigiovirtual/ius-design-components",
+  "version": "1.0.128",
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0 <20.0.0",
+    "@angular/core": ">=17.0.0 <20.0.0",
+    "@angular/cdk": ">=17.0.0 <20.0.0"
+  },
+  "dependencies": {
+    "@litigiovirtual/ius-design-styles": "^1.0.13",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/cdk": "17.3.10"
+  },
+  "sideEffects": false
 }

package/src/lib/avatar-icon/avatar-icon.component.html

@@ -0,0 +1,17 @@
+<div class="avatar" [ngClass]="size" [ngStyle]="{'background-color': backgroundColor}">
+    @if (imageUrl) {
+        <img [src]="imageUrl" alt="avatar" />
+    } @else {
+        @switch (size) {
+            @case('sm') {
+            <ius-icon-xs [iconName]="iconName" [color]="iconColor"></ius-icon-xs>
+            }
+            @case('md') {
+            <ius-icon-sm [iconName]="iconName" [color]="iconColor"></ius-icon-sm>
+            }
+            @case('lg') {
+            <ius-icon-md [iconName]="iconName" [color]="iconColor"></ius-icon-md>
+            }
+        }
+    }
+</div>

package/src/lib/avatar-icon/avatar-icon.component.scss

@@ -0,0 +1,28 @@
+$avatar-sizes: (
+  sm: 24px,
+  md: 32px,
+  lg: 40px,
+);
+
+.avatar {
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  // Se utiliza para recibir el tamaño dinamico del componente circular
+  @each $size, $value in $avatar-sizes {
+    &.#{$size} {
+      width: $value;
+      height: $value;
+    }
+  }
+}

package/src/lib/avatar-icon/avatar-icon.component.spec.ts

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

package/src/lib/avatar-icon/avatar-icon.component.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { IconXsComponent } from "../icon-xs";
+import { IconSmComponent } from '../icon-sm';
+import { IconMdComponent } from "../icon-md";
+
+@Component({
+  selector: 'ius-avatar-icon',
+  standalone: true,
+  imports: [CommonModule, IconXsComponent, IconSmComponent, IconMdComponent],
+  templateUrl: './avatar-icon.component.html',
+  styleUrl: './avatar-icon.component.scss'
+})
+export class AvatarIconComponent {
+  @Input() size: 'sm' | 'md' | 'lg' = 'sm';
+  
+  @Input() imageUrl?: string;
+
+  @Input() backgroundColor: string = 'grey';
+  @Input() iconName: string = 'icon-comment';
+  @Input() iconColor: string = 'grey';
+}

package/{lib/avatar-icon/index.d.ts → src/lib/avatar-icon/index.ts}

@@ -1 +1,2 @@
-export * from './avatar-icon.component';
+export * from './avatar-icon.component';
+

package/src/lib/badge/badge.component.html

@@ -0,0 +1,3 @@
+<div class="container-badge" [ngClass]="{'container-badge-no-value': formattedNumber == undefined }">
+    <span>{{formattedNumber}}</span>
+</div>

package/src/lib/badge/badge.component.scss

@@ -0,0 +1,29 @@
+@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-badge {
+    display: flex;
+    width: min-content;
+    min-height: variables.$icon-size-xs;
+    padding: variables.$spacing-none 5px;
+    justify-content: center;
+    align-items: center;
+    border-radius: variables.$radius-pill;
+    background: colors.$info-500;
+
+    color: semantic-colors.$color-text-primary-on-dark;
+    font-family: typography.$font-primary;
+    font-size: typography.$font-size-sm;
+    font-weight: typography.$font-weight-medium;
+    line-height: typography.$line-height-sm;
+    letter-spacing: 0.24px;
+}
+
+.container-badge-no-value {
+    min-height: variables.$icon-size-xs;
+    min-width: variables.$icon-size-xs;
+    padding: 0px;
+}

package/src/lib/badge/badge.component.spec.ts

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

package/src/lib/badge/badge.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ius-badge',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './badge.component.html',
+  styleUrl: './badge.component.scss',
+})
+export class BadgeComponent {
+  @Input() number: number | undefined;
+
+  get formattedNumber(): string | undefined {
+    if (this.number === undefined) {
+      return undefined;
+    }
+    if (this.number > 999) {
+      return '999+';
+    } else {
+      return this.number.toString();
+    }
+  }
+}

package/{lib/badge/index.d.ts → src/lib/badge/index.ts}

@@ -1 +1,2 @@
-export * from './badge.component';
+export * from './badge.component';
+

package/src/lib/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,24 @@
+<nav class="container" aria-label="Breadcrumb">
+  @for (item of (items); track item.label) {
+    @if (!$first) {
+      <span class="divider" aria-hidden="true">{{ separator }}</span>
+    }
+    <a
+      class="body-ba link"
+      [routerLink]="item.commands"
+      [queryParams]="item.queryParams"
+      [fragment]="item.fragment"
+      [replaceUrl]="item.replaceUrl ?? false"
+      [state]="item.state"
+      [attr.aria-label]="item.ariaLabel || item.label"
+      routerLinkActive="current"
+      [routerLinkActiveOptions]="{ exact: true }"
+      #rla="routerLinkActive"
+      [attr.aria-current]="rla.isActive ? 'page' : null"
+    >
+      {{ item.label }}
+    </a>
+  }
+</nav>
+
+

package/src/lib/breadcrumb/breadcrumb.component.scss

@@ -0,0 +1,41 @@
+@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 {
+    display: inline-flex;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    height: 24px;
+    position: relative;
+}
+
+.divider {
+    color: colors.$neutral-5;
+    user-select: none;
+}
+
+.link {
+    color: semantic-colors.$color-text-tertiary-on-light;
+    text-decoration: none;
+    padding: 0 variables.$spacing-xxs;
+    transition: color .15s ease, text-decoration .15s ease;
+}
+
+.link:hover,
+.link:focus {
+    outline: 0;
+}
+
+.current {
+    color: semantic-colors.$color-text-secundary-on-light;
+}
+
+.body-ba {
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    font-weight: typography.$font-weight-regular;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+}

package/src/lib/breadcrumb/breadcrumb.component.spec.ts

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

package/src/lib/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+export interface IusBreadcrumbItem {
+  label: string;
+  commands?: any[];
+  queryParams?: any;
+  fragment?: string;
+  replaceUrl?: boolean;
+  state?: any;
+  ariaLabel?: string;
+}
+
+@Component({
+  selector: 'ius-breadcrumb',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkActive],
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss'],
+})
+export class BreadcrumbComponent {
+  @Input({ required: true }) items: IusBreadcrumbItem[] = [];
+  @Input() separator = '|';
+}

package/{lib/breadcrumb/index.d.ts → src/lib/breadcrumb/index.ts}

@@ -1 +1,2 @@
-export * from './breadcrumb.component';
+export * from './breadcrumb.component';
+

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

@@ -0,0 +1,4 @@
+<button class="ctn-button" [disabled]="disabled">
+    <span [innerHTML]="svg" class="icon-btn"></span>
+    <span class="label-base">{{textButton}}</span>
+</button>

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

@@ -0,0 +1,39 @@
+@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;
+
+.ctn-button {
+    position: relative;
+    display: flex;
+    padding: variables.$spacing-sm variables.$spacing-lg;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    border: none;
+    cursor: pointer;
+
+    border-radius: variables.$radius-lg;
+    background: semantic-colors.$color-btn-secondary-3-default;
+    color: semantic-colors.$color-text-primary-on-light;
+
+    &:hover:not(:disabled) {
+        background-color: semantic-colors.$color-btn-secondary-3-hovered;
+    }
+
+    &:active:not(:disabled) {
+        color: semantic-colors.$color-text-primary-on-dark;
+        background-color: semantic-colors.$color-btn-secondary-3-pressed;
+    }
+
+    &:disabled {
+        color: semantic-colors.$color-text-disabled-on-light;
+        background-color: semantic-colors.$color-btn-secondary-3-disabled;
+        cursor: default;
+    }
+}
+
+.icon-btn {
+    width: 20px;
+    height: 20px;
+}

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

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

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/{lib/button-auth/index.d.ts → src/lib/button-auth/index.ts}

@@ -1 +1,2 @@
-export * from './button-auth.component';
+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/{lib/button-circle-secondary/index.d.ts → src/lib/button-circle-secondary/index.ts}

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