@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/card-plan-subscription/card-plan-subscription.component.scss

@@ -0,0 +1,273 @@
+@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-card {
+  display: flex;
+  padding: variables.$spacing-xs variables.$spacing-md;
+  align-items: center;
+  align-content: center;
+  gap: variables.$spacing-sm;
+  flex-wrap: wrap;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-4;
+  background: colors.$neutral-white;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow:
+      0 1px 3px 0 rgba(0, 0, 0, 0.12),
+      0 1px 2px 0 rgba(0, 0, 0, 0.08);
+  }
+}
+
+.data {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-2xl;
+  flex: 1 0 0;
+}
+
+.left-data {
+  display: flex;
+  min-width: 280px;
+  align-items: center;
+  gap: variables.$spacing-xs;
+  flex: 1 0 0;
+
+  .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;
+    border-radius: variables.$radius-pill;
+    border: 0.5px solid colors.$neutral-2;
+    background: colors.$info-200;
+    width: 32px;
+    height: 32px;
+    justify-content: center;
+    aspect-ratio: 1/1;
+  }
+
+  .data-container {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+
+    p {
+      margin: 0;
+    }
+
+    .name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: colors.$neutral-10;
+      font-family: typography.$font-primary;
+      font-size: typography.$font-size-large;
+      font-style: normal;
+      font-weight: 500;
+      line-height: typography.$line-height-large;
+    }
+
+    .state {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      align-self: stretch;
+      color: semantic-colors.$color-text-secundary-on-light;
+      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;
+    }
+
+    .role {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      align-self: stretch;
+      color: semantic-colors.$color-text-tertiary-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;
+    }
+  }
+
+  .container {
+    display: flex;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+
+    .data-container {
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-xxs;
+
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: semantic-colors.$color-text-tertiary-on-light;
+        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;
+        align-self: start;
+      }
+
+      .data {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        align-self: stretch;
+        color: colors.$neutral-10;
+        font-family: typography.$font-secondary;
+        font-size: typography.$font-size-sm;
+        font-style: normal;
+        font-weight: 400;
+        line-height: typography.$line-height-sm;
+        letter-spacing: 0.24px;
+      }
+    }
+  }
+}
+
+.right-data {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-2xl;
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: semantic-colors.$color-text-tertiary-on-light;
+    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;
+    align-self: start;
+  }
+
+  .data {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    color: colors.$neutral-10;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-sm;
+    font-style: normal;
+    font-weight: 400;
+    line-height: typography.$line-height-sm;
+    letter-spacing: 0.24px;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .btn {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    aspect-ratio: 1/1;
+    border-radius: variables.$radius-md;
+    background: semantic-colors.$color-btn-tertiary-default;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 9999;
+  min-width: max-content;
+  white-space: nowrap;
+}
+
+.options {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.container-active {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+
+  p {
+    color: colors.$success-600;
+    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;
+  }
+}

package/src/lib/card-plan-subscription/card-plan-subscription.component.spec.ts

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

package/src/lib/card-plan-subscription/card-plan-subscription.component.ts

@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {  ButtonSquaredTertiaryComponent } from "../button-squared-tertiary";
+import { IconSmComponent } from "../icon-sm";
+
+@Component({
+  selector: 'ius-card-plan-subscription',
+  standalone: true,
+  imports: [ButtonSquaredTertiaryComponent, IconSmComponent],
+  templateUrl: './card-plan-subscription.component.html',
+  styleUrl: './card-plan-subscription.component.scss'
+})
+export class CardPlanSubscriptionComponent {
+
+  hover: boolean = false;
+
+  @Input() planType?: string;
+  @Input() name?: string;
+  @Input() role?: string;
+  @Input() label1?: string;
+  @Input() data1?: string;
+  @Input() label2?: string;
+  @Input() data2?: string;
+  @Input() planID?: number;
+  @Input() titleDate?: string;
+  @Input() date?: string | Date;
+  @Input() iconName: string = 'icon-extension';
+  @Input() iconColor: string = '#02457F';
+
+
+
+  @Output() onClickCard = new EventEmitter<any>();
+  onMouseEnter() {
+    this.hover = true;
+  }
+
+  onMouseLeave() {
+    this.hover = false;
+  }
+
+  clickCard(event: Event): void {
+    event.stopImmediatePropagation();
+    this.onClickCard.emit(this.planID);
+  }
+
+}

package/src/lib/card-plan-subscription/index.ts

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

package/src/lib/card-ticket/card-ticket.component.html

@@ -0,0 +1,40 @@
+<div class="general-container">
+    <div class="container-card" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" (click)="clickCard($event)">
+        <div class="data">
+            <div class="left-data">
+                <div class="image-container">
+                    <ius-icon-md [color]="iconColor" [iconName]="iconName"></ius-icon-md>
+                </div>
+                <div class="data-container">
+                    <div class="data-container-interno">
+                        <p class="state">
+                            {{ state }}
+                        </p>
+                        
+                        <div class="container">
+                            <div class="data-container">
+                                <p class="title">{{ label1 | date:'dd/MM/yyyy' }}</p>
+                                <p class="data">{{ data1 }}</p>
+                            </div>
+                        </div>
+                        <p class="name">{{ name }}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="right-data">
+                <div>
+                    <p class="title">{{ label2 }}</p>
+                    <p class="data">{{ data2  }}</p>
+                </div>
+                <div>
+                    <p class="title">{{ titleDate }}</p>
+                    <p class="data">{{ date | date:"dd 'de' MMMM 'de' y" }}</p>
+                </div>
+                <div class="btn">
+                    <ius-button-squared-tertiary iconName="icon-keyboard-arrow-right"
+                        (buttonClicked)="clickCard($event)"></ius-button-squared-tertiary>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/card-ticket/card-ticket.component.scss

@@ -0,0 +1,253 @@
+@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-card {
+  display: flex;
+  padding: variables.$spacing-xs variables.$spacing-md;
+  align-items: center;
+  align-content: center;
+  gap: variables.$spacing-sm;
+  flex-wrap: wrap;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-4;
+  background: colors.$neutral-white;
+
+  :hover {
+    cursor: pointer;
+  }
+}
+
+.data {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-2xl;
+  flex: 1 0 0;
+}
+
+.left-data {
+  display: flex;
+  min-width: 280px;
+  align-items: center;
+  gap: variables.$spacing-xs;
+  flex: 1 0 0;
+
+  .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;
+    border-radius: variables.$radius-pill;
+      border: 0.5px solid colors.$neutral-2;
+      background: colors.$info-200;
+      width: 32px;
+      height: 32px;
+      justify-content: center;
+      aspect-ratio: 1/1;
+  }
+
+  .data-container {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+
+    p {
+      margin: 0;
+    }
+
+    .name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: colors.$neutral-10;
+      font-family: typography.$font-primary;
+      font-size: typography.$font-size-large;
+      font-style: normal;
+      font-weight: 500;
+      line-height: typography.$line-height-large
+    }
+
+    .state {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      align-self: stretch;
+      color: semantic-colors.$color-text-secundary-on-light;
+      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;
+    }
+
+    .role {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      align-self: stretch;
+      color: semantic-colors.$color-text-tertiary-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;
+    }
+  }
+
+  .container {
+    display: flex;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+
+    .data-container {
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-xxs;
+
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: semantic-colors.$color-text-tertiary-on-light;
+        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;
+        align-self: start;
+      }
+
+      .data {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        align-self: stretch;
+        color: colors.$neutral-10;
+        font-family: typography.$font-secondary;
+        font-size: typography.$font-size-sm;
+        font-style: normal;
+        font-weight: 400;
+        line-height: typography.$line-height-sm;
+        letter-spacing: 0.24px;
+      }
+    }
+  }
+}
+
+.right-data {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-2xl;
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: semantic-colors.$color-text-tertiary-on-light;
+    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;
+    align-self: start;
+  }
+
+  .data {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    color: colors.$neutral-10;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-sm;
+    font-style: normal;
+    font-weight: 400;
+    line-height: typography.$line-height-sm;
+    letter-spacing: 0.24px;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .btn {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    aspect-ratio: 1/1;
+    border-radius: variables.$radius-md;
+    background: semantic-colors.$color-btn-tertiary-default;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 9999;
+  min-width: max-content;
+  white-space: nowrap;
+}
+
+.options {
+  display: flex;
+  align-items: center;
+  position: relative;
+}

package/src/lib/card-ticket/card-ticket.component.spec.ts

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

package/src/lib/card-ticket/card-ticket.component.ts

@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {  ButtonSquaredTertiaryComponent } from "../button-squared-tertiary";
+import { IconMdComponent } from "../icon-md";
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'ius-card-ticket',
+  standalone: true,
+  imports: [ ButtonSquaredTertiaryComponent, IconMdComponent, DatePipe],
+  templateUrl: './card-ticket.component.html',
+  styleUrl: './card-ticket.component.scss'
+})
+export class CardTicketComponent {
+
+  hover: boolean = false;
+
+  @Input() state?: string| boolean;
+  @Input() ticketID?: string | number;
+  @Input() name?: string;
+  @Input() label1?: Date;
+  @Input() data1?: string;
+  @Input() label2?: string;
+  @Input() data2?: string;
+  @Input() titleDate?: string;
+  @Input() date?: Date;
+  @Input() iconName: string = 'icon-ticket';
+  @Input() iconColor: string = '#02457F';
+
+
+
+  @Output() onClickCard = new EventEmitter<any>();
+  onMouseEnter() {
+    this.hover = true;
+  }
+
+  onMouseLeave() {
+    this.hover = false;
+  }
+
+  clickCard(event: Event): void {
+    event.stopImmediatePropagation();
+    this.onClickCard.emit(this.ticketID);
+  }
+}

package/src/lib/card-ticket/index.ts

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