@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

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

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

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { IconXsComponent } from '../icon-xs';
+import { IconSmComponent } from '../icon-sm';
+import { IconMdComponent } from '../icon-md';
+import { IconXlComponent } from '../icon-xl';
+import { IconXxlComponent } from '../icon-xxl';
+import { IconLgComponent } from "../icon-lg";
+
+export type AvatarV2Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarV2Shape = 'circle' | 'square';
+
+@Component({
+  selector: 'ius-avatar-v2',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IconXsComponent,
+    IconSmComponent,
+    IconMdComponent,
+    IconXlComponent,
+    IconXxlComponent,
+    IconLgComponent
+],
+  templateUrl: './avatar-v2.component.html',
+  styleUrl: './avatar-v2.component.scss',
+})
+export class AvatarV2Component implements OnChanges {
+  @Input() imageUrl?: string;
+  @Input() name?: string;
+  @Input() size: AvatarV2Size = 'md';
+  @Input() shape: AvatarV2Shape = 'circle';
+  @Input() showEditButton: boolean = false;
+  @Input() backgroundColor?: string;
+  @Input() fallbackIconName: string = 'icon-account-circle';
+
+  @Output() editClicked = new EventEmitter<void>();
+
+  initials: string = '';
+
+  get containerStyle(): { [key: string]: string } {
+    if (!this.imageUrl && this.backgroundColor) {
+      return { 'background-color': this.backgroundColor };
+    }
+    return {};
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['name']) {
+      this.initials = this.extractInitials(this.name);
+    }
+  }
+
+  onEditClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.editClicked.emit();
+  }
+
+  private extractInitials(name?: string): string {
+    if (!name?.trim()) return '';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+  }
+}

package/src/lib/avatar-v2/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar-v2.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/src/lib/badge/index.ts

@@ -0,0 +1,2 @@
+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/src/lib/breadcrumb/index.ts

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

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

@@ -0,0 +1,39 @@
+<div class="general">
+    <button type="button" class="ius-btn" [class.isOpen]="isOpen" [class.menuOpen]="openOptions"
+        [class.isPredetermined]="account.isPredetermined" (click)="onClickAccount(account)">
+
+        <div class="content">
+            <ius-avatar-v2 [imageUrl]="account.logo" [name]="account.name" size="md" shape="circle"
+                fallbackIconName="icon-account-circle">
+            </ius-avatar-v2>
+
+            <span class="name body-base-1">{{ account.name }}</span>
+        </div>
+
+    @if (showOptionsFlag) {
+      <ius-button-circle-tertiary
+        (click)="showOptions($event)"
+        [iconName]="'icon-more-vert'"
+      >
+      </ius-button-circle-tertiary>
+    }
+    </button>
+
+    @if (openOptions) {
+    <div class="more-box active">
+        <ius-option [checked]="true" (optionClick)="onPressedPredeterminado.emit(account)">
+            <span class="body-large">Marcar como predeterminada</span>
+        </ius-option>
+
+        <ius-simple-divider></ius-simple-divider>
+
+        <ius-option [leadingIcon]="'icon-edit'" (optionClick)="onPressedEditar.emit(account)">
+            <span class="body-large">Editar</span>
+        </ius-option>
+
+        <ius-option [leadingIcon]="'icon-delete'" (optionClick)="onPressedDesvincular.emit(account)">
+            <span class="body-large">Desvincular</span>
+        </ius-option>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,110 @@
+@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;
+
+.general {
+  position: relative;
+  width: 100%;
+}
+
+.ius-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: variables.$spacing-xs;
+
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: variables.$spacing-xs;
+
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-4;
+  background-color: colors.$neutral-white;
+  color: semantic-colors.$color-text-primary-on-light;
+
+  cursor: pointer;
+  transition:
+    background-color .15s ease,
+    border-color .15s ease,
+    box-shadow .15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: colors.$neutral-3;
+    background-color: colors.$neutral-2;
+    box-shadow: variables.$elevation-100;
+  }
+
+  &:active:not(:disabled) {
+    border-color: colors.$info-200;
+    background-color: colors.$info-200;
+    box-shadow: none;
+  }
+
+  &.isOpen {
+    border-color: colors.$info-200;
+    background-color: colors.$info-100;
+  }
+
+  &.menuOpen {
+    border-color: colors.$neutral-3;
+    background-color: colors.$neutral-2;
+    box-shadow: variables.$elevation-100;
+  }
+
+  &.isOpen.menuOpen {
+    border-color: colors.$info-200;
+    background-color: colors.$info-100;
+    box-shadow: variables.$elevation-100;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.name {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  color: semantic-colors.$color-text-primary-on-light;
+}
+
+.more-box {
+  position: absolute;
+  top: 100%;
+  left: 90%;
+  margin-top: variables.$spacing-xs;
+  min-width: 240px;
+  padding: variables.$spacing-xs;
+  z-index: 100;
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: variables.$radius-md;
+  background: colors.$neutral-white;
+  box-shadow: variables.$elevation-200;
+  border: 1px solid colors.$neutral-3;
+
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-6px);
+  transition:
+    opacity .25s ease,
+    transform .25s ease;
+
+  &.active {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: all;
+  }
+}

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

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

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

@@ -0,0 +1,69 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+import { ButtonCircleTertiaryComponent } from '../button-circle-tertiary';
+import { OptionComponent } from '../option';
+import { SimpleDividerComponent } from '../simple-divider';
+import { AvatarV2Component } from '../avatar-v2';
+
+interface Account {
+  accountID: number;
+  name: string;
+  logo?: string;
+  isPredetermined?: boolean;
+}
+
+@Component({
+  selector: 'ius-button-accounts',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonCircleTertiaryComponent,
+    AvatarV2Component,
+    OptionComponent,
+    SimpleDividerComponent,
+    AvatarV2Component,
+  ],
+  templateUrl: './button-accounts.component.html',
+  styleUrl: './button-accounts.component.scss',
+})
+export class ButtonAccountsComponent {
+  isOpen = false;
+  openOptions = false;
+
+  @Input() account!: Account;
+
+  @Input() showOptionsFlag: boolean = true;
+  @Output() accountSelected = new EventEmitter<Account>();
+  @Output() onPressedPredeterminado = new EventEmitter<Account>();
+  @Output() onPressedDesvincular = new EventEmitter<Account>();
+  @Output() onPressedEditar = new EventEmitter<Account>();
+
+  constructor(private elementRef: ElementRef) {}
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    if (!this.elementRef.nativeElement.contains(target)) {
+      this.isOpen = false;
+      this.openOptions = false;
+    }
+  }
+
+  onClickAccount(account: Account): void {
+    this.isOpen = !this.isOpen;
+    this.accountSelected.emit(account);
+  }
+
+  showOptions(event: MouseEvent): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.openOptions = !this.openOptions;
+  }
+}

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

@@ -0,0 +1 @@
+export * from './button-accounts.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();
+  });
+});