@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

package/src/lib/segment/segment.component.scss

@@ -0,0 +1,62 @@
+@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;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: variables.$radius-md variables.$radius-md 0 0;
+  background: colors.$neutral-white;
+  cursor: pointer;
+  min-width: 0;
+  color: semantic-colors.$color-text-primary-on-light;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-base;
+  font-style: normal;
+  font-weight: typography.$font-weight-regular;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+
+  &:hover:not(.disabled) {
+    border-bottom: 1px solid colors.$neutral-3;
+    background: colors.$neutral-2;
+  }
+
+  &.active:not(.disabled) {
+    border-bottom: 2px solid colors.$neutral-4;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-base;
+    font-style: normal;
+    font-weight: typography.$font-weight-medium;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+  }
+
+  &.pressed:not(.disabled) {
+    color: white;
+    background: colors.$info-900;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    cursor: none;
+    background: colors.$neutral-white;
+    color: colors.$neutral-5;
+  }
+
+  p {
+    display: flex;
+    padding: variables.$spacing-sm 0;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    margin: 0;
+  }
+}

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

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

package/src/lib/segment/segment.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'ius-segment',
+  standalone: true,
+  imports: [],
+  templateUrl: './segment.component.html',
+  styleUrls: ['./segment.component.scss']
+})
+export class SegmentComponent {
+  @Input() active = false;
+  @Input() text?: string;
+  @Input() disabled = false;
+
+  @Output() pressed = new EventEmitter<void>();
+
+  isPressed = false;
+
+  onPress(): void {
+    if (this.disabled) { return; }
+    this.isPressed = true;
+  }
+
+  onRelease(): void {
+    if (this.disabled) { return; }
+    this.isPressed = false;
+  }
+
+  onClick(): void {
+    if (this.disabled) { return; }
+    this.pressed.emit();
+  }
+
+}

package/src/lib/simple-card-contador/index.ts

@@ -0,0 +1,2 @@
+export * from './simple-card-contador.component';
+

package/src/lib/simple-card-contador/simple-card-contador.component.html

@@ -0,0 +1,39 @@
+<div class="general-container">
+  <div class="container">
+    <div class="left">
+      <p>{{ title }}</p>
+    </div>
+
+    <div class="right">
+      <div class="num-wrapper">
+        <input
+          #num
+          type="number"
+          [step]="1"
+          [min]="1"
+          [max]="maxValue > 0 ? maxValue : null"
+          [value]="value"
+          (input)="onTyped(num)"
+          (blur)="onTyped(num)"
+        />
+        <button
+          class="spin up"
+          (click)="step(num, +1)"
+        >
+          <ius-icon-xl
+            [iconName]="'icon-keyboard-arrow-up'"
+          ></ius-icon-xl>
+        </button>
+
+        <button
+          class="spin down"
+          (click)="step(num, -1)"
+        >
+          <ius-icon-xl
+            [iconName]="'icon-keyboard-arrow-down'"
+          ></ius-icon-xl>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/simple-card-contador/simple-card-contador.component.scss

@@ -0,0 +1,110 @@
+/* simple-card-contador.component.scss */
+@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;
+}
+
+.container {
+  display: flex;
+  padding: variables.$spacing-xxs variables.$spacing-xxs variables.$spacing-xxs
+    variables.$spacing-sm;
+  align-items: center;
+  gap: 0;
+  align-self: stretch;
+  border-radius: variables.$radius-md;
+  border: 1px solid #eaeaea;
+  background: colors.$neutral-white;
+  justify-content: space-between;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 55%;
+
+    p {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin: 0;
+      color: semantic-colors.$color-text-primary-on-light;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: Rubik;
+      font-size: typography.$font-size-base;
+      font-weight: typography.$font-weight-regular;
+      line-height: typography.$line-height-base;
+      letter-spacing: 0.28px;
+    }
+  }
+
+  .right {
+    padding: var(--Spacing-Spacing-xs, 8px);
+    display: flex;
+    align-items: center;
+    width: 45%;
+
+    .num-wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      height: 40px;
+      border-radius: variables.$radius-lg;
+      background: colors.$neutral-2;
+      padding: 6px 44px 6px 12px;
+
+      input[type="number"] {
+        appearance: textfield;
+        -moz-appearance: textfield;
+        -webkit-appearance: none;
+        border: 0;
+        outline: 0;
+        width: 100%;
+        background: transparent;
+        color: semantic-colors.$color-text-tertiary-on-light;
+
+        font-family: Rubik;
+        font-size: typography.$font-size-base;
+        font-style: normal;
+        font-weight: typography.$font-weight-regular;
+        line-height: typography.$line-height-base;
+        letter-spacing: 0.28px;
+      }
+
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      .spin {
+        position: absolute;
+        right: 8px;
+        width: 28px;
+        height: 18px;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .up {
+        top: 15px;
+      }
+      .down {
+        bottom: -1px;
+      }
+    }
+  }
+}

package/src/lib/simple-card-contador/simple-card-contador.component.spec.ts

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

package/src/lib/simple-card-contador/simple-card-contador.component.ts

@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconXlComponent } from '../icon-xl';
+
+
+@Component({
+  selector: 'ius-simple-card-contador',
+  standalone: true,
+  imports: [IconXlComponent],
+  templateUrl: './simple-card-contador.component.html',
+  styleUrl: './simple-card-contador.component.scss'
+})
+export class SimpleCardContadorComponent {
+  @Input() title?: string = '';
+  @Input() value = 1;
+  @Input() maxValue = 0;
+  @Output() valueChange = new EventEmitter<number>();
+  @Output() errorMaxValue = new EventEmitter<string>();
+
+  step(el: HTMLInputElement, dir: 1 | -1) {
+    const current = Number(el.value) || 1;
+    const next = current + dir;
+    this.applyLimitsAndEmit(next, el);
+  }
+
+  onTyped(el: HTMLInputElement) {
+    const n = Number(el.value);
+    this.applyLimitsAndEmit(n, el);
+  }
+
+  private applyLimitsAndEmit(n: number, el?: HTMLInputElement) {
+
+    let value = Number.isNaN(n) ? 1 : n;
+
+    if (value < 1) {
+      value = 1;
+    }
+
+    if (this.maxValue > 0 && value > this.maxValue) {
+      value = this.maxValue;
+      this.errorMaxValue.emit('El valor sobrepasa el limite que puedes asignar')
+    }
+
+    this.value = value;
+
+    if (el) {
+      el.value = String(value);
+    }
+
+    this.valueChange.emit(value);
+  }
+
+
+}
+
+
+

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

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

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

@@ -0,0 +1,8 @@
+<div class="general-container">
+  <div class="chip" [class.disabled]="disabled" [style.background]="disabled ? '#F5F5F5' : color">
+    <p [style.color]="disabled ? 'var(--ColorText-colorTextDisabled, #BFBFBF)' : textColor">{{ text }}</p>
+    <button (click)="remove()" [disabled]="disabled" [attr.aria-disabled]="disabled">
+      <ius-icon-md iconName="icon-cancel" [color]="iconColor"></ius-icon-md>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,49 @@
+@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;
+}
+
+.chip {
+  display: inline-flex;
+  padding: variables.$spacing-xs;
+  align-items: center;
+  gap: variables.$spacing-xxs;
+  border-radius: variables.$radius-sm;
+}
+
+.chip.disabled {
+  background-color: #F5F5F5;
+  cursor: default;
+  pointer-events: none;
+}
+
+p {
+  margin: 0;
+  margin-top: -2px;
+  display: flex;
+  align-items: center;
+  border-radius: variables.$radius-sm;
+  color: semantic-colors.$color-text-secundary-on-light;
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-base;
+  font-style: normal;
+  font-weight: 400;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+button[disabled] {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.7;
+}

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

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

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

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from '../icon-md/icon-md.component';
+
+@Component({
+  selector: 'ius-simple-chip',
+  standalone: true,
+  imports: [IconMdComponent],
+  templateUrl: './simple-chip.component.html',
+  styleUrl: './simple-chip.component.scss'
+})
+export class SimpleChipComponent {
+  @Input() text: string = '';
+  @Input() color: string = '#c4dfff';
+  @Input() textColor: string = '';
+  @Input() iconColor: string = '';
+  @Input() disabled: boolean = false;
+  @Output() onRemoveEvent = new EventEmitter<any>();
+
+  remove() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.onRemoveEvent.emit(null);
+  }
+}

package/src/lib/simple-divider/index.ts

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

package/src/lib/simple-divider/simple-divider.component.html

@@ -0,0 +1 @@
+

package/src/lib/simple-divider/simple-divider.component.scss

@@ -0,0 +1,9 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+
+:host {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: colors.$neutral-5; 
+  flex-shrink: 0;
+}

package/src/lib/simple-divider/simple-divider.component.spec.ts

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

package/src/lib/simple-divider/simple-divider.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ius-simple-divider',
+  standalone: true,
+  imports: [],
+  templateUrl: './simple-divider.component.html',
+  styleUrl: './simple-divider.component.scss'
+})
+export class SimpleDividerComponent {
+
+}

package/src/lib/simple-user-card/index.ts

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

package/src/lib/simple-user-card/simple-user-card.component.html

@@ -0,0 +1,20 @@
+<div class="general-container">
+  <div class="container">
+    <div class="image-container">
+      @if (letterIcon && !image) {
+      <div class="container-icon-letra">
+        <span>{{ letterIcon }}</span>
+      </div>
+      }@else if(image && !letterIcon){
+      <div class="image-container">
+        <img [src]="image" class="image" />
+      </div>
+      }
+    </div>
+    <div class="name-container">
+      <p class="text">
+        {{text}}
+      </p>
+    </div>
+  </div>
+</div>

package/src/lib/simple-user-card/simple-user-card.component.scss

@@ -0,0 +1,113 @@
+@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;
+}
+
+.container {
+  display: flex;
+  padding: variables.$spacing-xs;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: variables.$radius-md;
+  border: 0.5px solid colors.$neutral-6;
+
+  .image-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    .container-icon-letra {
+      background-color: #dfe0ff;
+      display: flex;
+      width: 20px;
+      height: 20px;
+      padding: 10px;
+      margin-right: 10px;
+      justify-content: center;
+      align-items: center;
+      border-radius: variables.$radius-pill;
+
+      font-family: typography.$font-secondary;
+      font-size: typography.$font-size-sm;
+      font-style: normal;
+      font-weight: typography.$font-weight-regular;
+      line-height: typography.$line-height-sm;
+      letter-spacing: 0.24px;
+    }
+
+    .container-icon-letra:hover {
+      background-color: #6670c4 !important;
+
+      > span {
+        display: none;
+      }
+
+      .icon-letra-edit {
+        display: block;
+      }
+    }
+
+    .container-icon-letra span {
+      color: #1b2678;
+      text-align: center;
+      font-size: 18px;
+      font-weight: typography.$font-weight-medium;
+    }
+    .image-container {
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-xs;
+
+      .image {
+        display: flex;
+        width: 32px;
+        height: 32px;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 1/1;
+        border-radius: variables.$radius-pill;
+        border: 0.5px solid colors.$neutral-2;
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+
+  .name-container {
+    display: flex;
+    min-width: 220px;
+    align-items: center;
+    align-content: center;
+    gap: 10px;
+    flex: 1 0 0;
+    flex-wrap: wrap;
+    min-width: 0;
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 4px;
+      flex: 1 0 0;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      color: #000;
+      font-family: Rubik;
+      font-size: typography.$font-size-base;
+      font-style: normal;
+      font-weight: typography.$font-weight-regular;
+      line-height: typography.$line-height-base;
+      letter-spacing: 0.28px;
+    }
+  }
+}

package/src/lib/simple-user-card/simple-user-card.component.spec.ts

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