@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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