@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

package/src/lib/checkbox/checkbox.component.scss

@@ -0,0 +1,67 @@
+@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-general {
+    position: relative;
+    display: flex;
+    width: 42px;
+    height: 42px;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    aspect-ratio: 1/1;
+}
+
+.container-interno {
+    display: flex;
+    padding: 11px;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100px;
+
+    &:hover:not(.disabled) {
+        background: colors.$neutral-4;
+
+        .icon-false {
+            background: colors.$neutral-white;
+        }
+    }
+
+    &:active:not(.disabled) {
+        background: colors.$info-300;
+    }
+
+
+    &.disabled {
+        background-color: transparent;
+        cursor: not-allowed;
+
+        .icon-false {
+            border: 1px solid colors.$neutral-4;
+            background: colors.$neutral-white;
+        }
+
+        .icon{
+            background-color: colors.$neutral-4;
+            border: 1px solid colors.$neutral-4;
+            color: colors.$neutral-white;
+        }
+    }
+}
+
+.icon {
+    border-radius: variables.$radius-sm;
+    background: colors.$neutral-4;
+    background-color: #2167FF;
+    color: colors.$neutral-4;
+}
+
+.icon-false {
+    width: 20px;
+    height: 20px;
+    border-radius: variables.$radius-sm;
+    background: colors.$neutral-4;
+}

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

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

package/src/lib/checkbox/checkbox.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconMdComponent } from '../icon-md/icon-md.component';
+
+
+@Component({
+  selector: 'ius-checkbox',
+  standalone: true,
+  imports: [CommonModule, IconMdComponent],
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss']
+})
+export class CheckboxComponent {
+
+  @Input() checked: boolean = false;
+  @Input() disabled: boolean = false;
+  @Output() checkedChange = new EventEmitter<boolean>();
+
+  onChecked() {
+    if (this.disabled) {
+      return;
+    }
+    this.checked = !this.checked;
+    this.checkedChange.emit(this.checked);
+  }
+
+}

package/src/lib/checkbox/index.ts

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

package/src/lib/checkbox-radio/checkbox-radio.component.html

@@ -0,0 +1,19 @@
+<div class="general-container">
+  <label class="cc" (mousedown)="markTouched()">
+    <input
+      class="cc__native"
+      type="checkbox"
+      [checked]="checked"
+      [disabled]="disabled"
+      (change)="toggle()"
+    />
+
+    <span class="cc__visual" aria-hidden="true">
+      <span class="cc__dot"></span>
+    </span>
+
+    @if (label) {
+    <span class="cc__label">{{ label }}</span>
+    }
+  </label>
+</div>

package/src/lib/checkbox-radio/checkbox-radio.component.scss

@@ -0,0 +1,126 @@
+.general-container{
+    position: relative;
+}
+
+:host {
+  --cc-blue-600: #1d4ed8;
+  --cc-blue-100: #dbeafe;
+
+  --cc-gray-200: #e5e7eb;
+  --cc-gray-300: #d1d5db;
+  --cc-gray-400: #9ca3af;
+
+  --cc-size: 20px;          /* diámetro del círculo */
+  --cc-border: 1px;         /* grosor del aro */
+  --cc-hole: 10px;          /* “hueco” blanco del activado */
+  --cc-ring: 3px;          /* grosor del halo hover/pressed */
+  --cc-gap: 6px;
+
+  display: inline-block;
+}
+
+.cc {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cc-gap);
+  cursor: pointer;
+  user-select: none;
+}
+
+:host(.is-disabled) .cc {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.cc__native {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.cc__visual {
+  width: var(--cc-size);
+  height: var(--cc-size);
+  border-radius: 100%;
+  display: grid;
+  place-items: center;
+  background: #fff;
+  border: var(--cc-border) solid var(--cc-gray-200);
+}
+
+.cc__dot {
+  width: var(--cc-hole);
+  height: var(--cc-hole);
+  border-radius: 999px;
+  background: transparent;
+}
+
+/* -----------------------------
+   HOVER / PRESSED (unchecked)
+------------------------------*/
+:host(:not(.is-disabled):not(.is-checked)) .cc:hover .cc__visual {
+  border-color: var(--cc-blue-600);
+  box-shadow: 0 0 0 var(--cc-ring) var(--cc-blue-100);
+}
+
+:host(:not(.is-disabled):not(.is-checked)) .cc:active .cc__visual {
+  border-color: var(--cc-blue-600);
+  box-shadow: 0 0 0 calc(var(--cc-ring) + 2px) var(--cc-blue-100);
+}
+
+/* -----------------------------
+   CHECKED (activated)
+------------------------------*/
+:host(.is-checked) .cc__visual {
+  background: var(--cc-blue-600);
+  border-color: var(--cc-blue-600);
+}
+
+:host(.is-checked) .cc__dot {
+  background: #fff; /* hueco blanco */
+}
+
+/* CHECKED hover / pressed (halo azul claro) */
+:host(.is-checked:not(.is-disabled)) .cc:hover .cc__visual {
+  box-shadow: 0 0 0 var(--cc-ring) var(--cc-blue-100);
+}
+:host(.is-checked:not(.is-disabled)) .cc:active .cc__visual {
+  box-shadow: 0 0 0 calc(var(--cc-ring) + 2px) var(--cc-blue-100);
+}
+
+/* -----------------------------
+   DISABLED (unchecked)
+------------------------------*/
+:host(.is-disabled:not(.is-checked)) .cc__visual {
+  background: #fff;
+  border-color: var(--cc-gray-200);
+}
+
+/* -----------------------------
+   DISABLED (checked)
+------------------------------*/
+:host(.is-disabled.is-checked) .cc__visual {
+  background: var(--cc-gray-300);
+  border-color: var(--cc-gray-300);
+}
+:host(.is-disabled.is-checked) .cc__dot {
+  background: #fff;
+}
+
+/* Label */
+.cc__label {
+  font-size: 14px;
+  color: #111827;
+}
+
+:host(.is-disabled) .cc__label {
+  color: var(--cc-gray-400);
+}
+
+/* Focus visible (accesibilidad) */
+.cc__native:focus-visible + .cc__visual {
+  outline: 3px solid var(--cc-blue-100);
+  outline-offset: 2px;
+}

package/src/lib/checkbox-radio/checkbox-radio.component.spec.ts

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

package/src/lib/checkbox-radio/checkbox-radio.component.ts

@@ -0,0 +1,70 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+
+@Component({
+  selector: 'ius-checkbox-radio',
+  standalone: true,
+  imports: [],
+  templateUrl: './checkbox-radio.component.html',
+  styleUrl: './checkbox-radio.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxRadioComponent),
+      multi: true,
+    },
+  ],
+})
+export class CheckboxRadioComponent {
+  @Input() label = '';
+  @Input() disabled = false;
+  @Input() checked = false;
+  @Output() checkedChange = new EventEmitter<boolean>();
+
+  @HostBinding('class.is-disabled') get isDisabledClass() {
+    return this.disabled;
+  }
+
+  @HostBinding('class.is-checked') get isCheckedClass() {
+    return this.checked;
+  }
+
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  writeValue(value: boolean): void {
+    this.checked = !!value;
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  toggle(): void {
+    if (this.disabled) return;
+
+    this.checked = !this.checked;
+    this.onChange(this.checked);
+    this.checkedChange.emit(this.checked);
+  }
+
+  markTouched(): void {
+    this.onTouched();
+  }
+}

package/src/lib/checkbox-radio/index.ts

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

package/src/lib/chip/chip.component.html

@@ -0,0 +1,16 @@
+<div
+  class="chip"
+  [class.chip--eliminable]="eliminable"
+  [class.chip--disabled]="disabled"
+>
+  <span class="chip__label body-base-1">{{ label }}</span>
+  <button
+    *ngIf="eliminable"
+    class="chip__remove"
+    [disabled]="disabled"
+    (click)="onRemove()"
+    type="button"
+  >
+    <ius-icon-md iconName="icon-cancel"></ius-icon-md>
+  </button>
+</div>

package/src/lib/chip/chip.component.scss

@@ -0,0 +1,74 @@
+@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-flex;
+}
+
+.chip {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: variables.$spacing-xxs;
+  padding: variables.$spacing-xs;
+  border-radius: variables.$radius-sm;
+  border: 1px solid #EAEAEA;
+  background-color: colors.$neutral-white;
+  cursor: default;
+  user-select: none;
+  height: 36px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &:not(.chip--eliminable):not(.chip--disabled):hover {
+    background-color: colors.$info-100;
+    border-color: transparent;
+  }
+
+  &--eliminable {
+    background-color: colors.$info-200;
+    border-color: transparent;
+
+    &:not(.chip--disabled):hover {
+      background-color: colors.$info-100;
+    }
+  }
+
+  &--disabled {
+    background-color: colors.$neutral-3;
+    border-color: transparent;
+    cursor: not-allowed;
+
+    .chip__label {
+      color: semantic-colors.$color-text-disabled-on-light;
+    }
+
+    .chip__remove {
+      cursor: not-allowed;
+      color: semantic-colors.$color-text-disabled-on-light;
+    }
+  }
+}
+
+.chip__label {
+  color: semantic-colors.$color-text-primary-on-light;
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+
+.chip__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: semantic-colors.$color-text-primary-on-light;
+}

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

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

package/src/lib/chip/chip.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconMdComponent } from '../icon-md/icon-md.component';
+
+@Component({
+  selector: 'ius-chip',
+  standalone: true,
+  imports: [CommonModule, IconMdComponent],
+  templateUrl: './chip.component.html',
+  styleUrl: './chip.component.scss',
+})
+export class ChipComponent {
+  @Input() label: string = 'Value';
+  @Input() eliminable: boolean = false;
+  @Input() disabled: boolean = false;
+  @Output() removed = new EventEmitter<void>();
+
+  onRemove(): void {
+    if (!this.disabled) {
+      this.removed.emit();
+    }
+  }
+}

package/src/lib/chip/index.ts

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

package/src/lib/chip-user/chip-user.component.html

@@ -0,0 +1,13 @@
+<div class="container-general">
+    <div class="content">
+        <ius-avatar-v2 [imageUrl]="imageUrl" [name]="name" size="md" shape="circle"></ius-avatar-v2>
+        <span class="text-name">{{text}}</span>
+        @if (removable) {
+        <div class="actions">
+            <button (click)="remove()" class="button-remove">
+                <ius-icon-md iconName="icon-cancel"></ius-icon-md>
+            </button>
+        </div>
+        }
+    </div>
+</div>

package/src/lib/chip-user/chip-user.component.scss

@@ -0,0 +1,66 @@
+@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;
+
+.container-general {
+    position: relative;
+    height: 100%;
+}
+
+.content {
+    display: flex;
+    height: 30px;
+    padding: variables.$spacing-xs;
+    align-items: center;
+    gap: 10px;
+
+    border-radius: variables.$radius-md;
+    border: 0.5px solid colors.$neutral-6;
+}
+
+.content:hover {
+    background: transparent !important;
+
+    .actions {
+        display: block;
+        right: 0;
+    }
+}
+
+.text-name {
+    color: #000;
+    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;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: block;
+    text-align: left;
+    flex: 1 0 0;
+    min-width: 0;
+}
+
+
+.actions {
+    display: none;
+}
+
+.button-remove {
+    border: none;
+    cursor: pointer;
+    height: 32px;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: variables.$radius-pill;
+    background: colors.$neutral-2;
+
+    &:hover {
+        background: colors.$neutral-4;
+    }
+}

package/src/lib/chip-user/chip-user.component.spec.ts

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

package/src/lib/chip-user/chip-user.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AvatarV2Component } from '../avatar-v2/avatar-v2.component';
+import { IconMdComponent } from '../icon-md/icon-md.component';
+
+@Component({
+  selector: 'ius-chip-user',
+  standalone: true,
+  imports: [AvatarV2Component, IconMdComponent],
+  templateUrl: './chip-user.component.html',
+  styleUrl: './chip-user.component.scss',
+})
+export class ChipUserComponent {
+  @Input() imageUrl?: string;
+  @Input() name?: string;
+  @Input() text?: string;
+  @Input() removable = true;
+  @Output() onRemoveEvent = new EventEmitter<any>();
+
+  remove() {
+    this.onRemoveEvent.emit(null);
+  }
+}

package/src/lib/chip-user/index.ts

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