@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

package/src/lib/button-standard-outline/button-standard-outline.component.spec.ts

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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+@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;
+
+.icon-color{
+    color : semantic-colors.$color-text-primary-on-dark;
+}
+
+.ius-btn {
+    display: inline-flex;
+    padding: variables.$spacing-sm variables.$spacing-lg;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    border-radius: variables.$radius-lg;
+    background-color: semantic-colors.$color-btn-primary-default;
+    color: semantic-colors.$color-text-primary-on-dark;
+    border: none;
+    cursor: pointer;
+    font-family: typography.$font-primary;
+    font-size: typography.$font-size-large;
+    line-height: typography.$line-height-large;
+
+    &:hover:not(:disabled) {
+        background-color: semantic-colors.$color-btn-primary-hovered;
+    }
+
+    &:active:not(:disabled) {
+        background-color: semantic-colors.$color-btn-primary-pressed;
+    }
+
+    &:disabled {
+        .icon-color{
+            color: semantic-colors.$color-text-disabled-on-light; 
+        }
+
+        color: semantic-colors.$color-text-disabled-on-light;
+        background-color: semantic-colors.$color-btn-primary-disabled;
+        cursor: not-allowed;
+    }
+}

package/src/lib/button-standard-primary/button-standard-primary.component.spec.ts

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

package/src/lib/button-standard-primary/button-standard-primary.component.ts

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

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

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

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

package/src/lib/button-standard-secondary/button-standard-secondary.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;
+
+.ius-btn {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    padding: variables.$spacing-sm variables.$spacing-lg;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    flex-shrink: 0;
+    border-radius: variables.$radius-lg;
+    background-color: colors.$neutral-3;
+    color: semantic-colors.$color-text-primary-on-light;
+    border: none;
+    cursor: pointer;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+
+    &:hover:not(:disabled) {
+        background-color: colors.$neutral-6;
+    }
+
+    &:active:not(:disabled) {
+        background-color: colors.$primary-600;
+        color: semantic-colors.$color-text-primary-on-dark;
+    }
+
+    &:disabled {
+        color: semantic-colors.$color-text-disabled-on-light;
+        background-color: semantic-colors.$color-btn-secondary-2-disabled;
+        cursor: not-allowed;
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+@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;
+
+.icon-color{
+    color : semantic-colors.$color-text-primary-on-light;
+}
+
+.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-color: semantic-colors.$color-btn-tertiary-default;
+    color: semantic-colors.$color-text-primary-on-light;
+    border: none;
+    cursor: pointer;
+    letter-spacing: 0.28px;
+    font-family: typography.$font-secondary;
+    font-weight: typography.$font-weight-medium;
+    font-size: typography.$font-size-base;
+    line-height: typography.$line-height-base;
+
+    &:hover:not(:disabled) {
+        background-color: semantic-colors.$color-btn-tertiary-hovered;
+    }
+
+    &:active:not(:disabled) {
+        background-color: semantic-colors.$color-btn-tertiary-pressed;
+        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; 
+        }
+
+        color: semantic-colors.$color-text-disabled-on-light;
+        background-color: semantic-colors.$color-btn-tertiary-disabled;
+        cursor: not-allowed;
+    }
+}

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

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

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

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

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

package/src/lib/button-standard-tertiary-small/button-standard-tertiary-small.component.html

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

package/src/lib/button-standard-tertiary-small/button-standard-tertiary-small.component.scss

@@ -0,0 +1,47 @@
+@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;
+
+.icon-color{
+    color : semantic-colors.$color-text-primary-on-light;
+}
+
+.ius-btn {
+    display: inline-flex;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    border-radius: variables.$radius-lg;
+    background-color: semantic-colors.$color-btn-tertiary-default;
+    color: semantic-colors.$color-text-primary-on-light;
+    border: none;
+    cursor: pointer;
+    letter-spacing: 0.24px;
+    font-weight: 400;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-sm;
+    line-height: typography.$line-height-sm;
+
+    &:hover:not(:disabled) {
+        background-color: semantic-colors.$color-btn-tertiary-hovered;
+    }
+
+    &:active:not(:disabled) {
+        background-color: semantic-colors.$color-btn-tertiary-pressed;
+        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; 
+        }
+
+        color: semantic-colors.$color-text-disabled-on-light;
+        background-color: semantic-colors.$color-btn-tertiary-disabled;
+        cursor: not-allowed;
+    }
+}

package/src/lib/button-standard-tertiary-small/button-standard-tertiary-small.component.spec.ts

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

package/src/lib/button-standard-tertiary-small/button-standard-tertiary-small.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-standard-tertiary-small',
+  standalone: true,
+  imports: [IconSmComponent],
+  templateUrl: './button-standard-tertiary-small.component.html',
+  styleUrl: './button-standard-tertiary-small.component.scss'
+})
+export class ButtonStandardTertiarySmallComponent {
+  @Input() disabled = false;
+  @Input() iconName = '';
+  @Input() iconNameRight = '';
+  @Output() buttonClicked: EventEmitter<Event> = new EventEmitter();
+
+  onClick(event:Event) {
+    if (this.disabled == false) {
+      this.buttonClicked.emit(event);
+    }
+  }
+}

package/src/lib/button-standard-tertiary-small/index.ts

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

package/src/lib/calification/calification.component.html

@@ -0,0 +1,19 @@
+<div class="general-container">
+    <div class="rating">
+                <div class="stars" role="img" [attr.aria-label]="rating + ' de 5 estrellas'" (mouseleave)="onMouseLeave()">
+
+                    @for (s of stars; track s) {
+                    <svg class="star" 
+                         [class.filled]="s <= rating" 
+                         [class.hovered]="s <= hoveredRating"
+                         (mouseenter)="onStarHover(s)"
+                         (click)="onStarClick(s)"
+                         viewBox="0 0 24 24" 
+                         aria-hidden="true">
+                        <path
+                            d="M12 2.5l2.96 6 6.64.97-4.8 4.68 1.13 6.6L12 17.77 6.07 20.75l1.13-6.6-4.8-4.68 6.64-.97L12 2.5z" />
+                    </svg>
+                    }
+                </div>
+            </div>
+</div>

package/src/lib/calification/calification.component.scss

@@ -0,0 +1,50 @@
+@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-container {
+  position: relative;
+}
+
+:host {
+  --star-size: 25px;
+  --star-gap: 4px;
+  --star-color-filled: #2167FF;
+  --star-color-empty: $neutral-5;
+  --comment-color: #000000;
+  display: block;
+}
+
+.rating {
+  font-family: typography.$font-secondary;
+}
+
+.stars {
+  display: flex;
+  align-items: center;
+  gap: var(--star-gap);
+  margin-bottom: 6px;
+}
+
+.star {
+  width: var(--star-size);
+  height: var(--star-size);
+  fill: var(--star-color-empty);
+  cursor: pointer;
+  transition: fill 0.2s ease;
+}
+
+.star.filled {
+  fill: var(--star-color-filled);
+}
+
+.star.hovered {
+  fill: colors.$info-300;
+}
+
+.comment {
+  margin: 0;
+  color: var(--comment-color);
+  font-weight: 400;
+}

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

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

package/src/lib/calification/calification.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ius-calification',
+  standalone: true,
+  imports: [],
+  templateUrl: './calification.component.html',
+  styleUrl: './calification.component.scss'
+})
+export class CalificationComponent {
+
+  @Input() rating: number = 0;
+  @Output() ratingChange = new EventEmitter<number>();
+
+  stars = [1, 2, 3, 4, 5];
+  hoveredRating: number = 0;
+
+  ngOnChanges(): void {
+    if (this.rating == null || isNaN(this.rating as any)) this.rating = 0;
+    this.rating = Math.max(0, Math.min(5, Math.round(this.rating)));
+  }
+
+  onStarHover(star: number): void {
+    this.hoveredRating = star;
+  }
+
+  onMouseLeave(): void {
+    this.hoveredRating = 0;
+  }
+
+  onStarClick(star: number): void {
+    this.rating = star;
+    this.ratingChange.emit(this.rating);
+  }
+}

package/src/lib/calification/index.ts

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