@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/toolbar-user-menu/toolbar-user-menu.component.html

@@ -0,0 +1,180 @@
+<div class="tbl-menu">
+  <div class="body-menu scrollable">
+    <div class="colum-mn-1 text-head-mn">
+      <span>Estás navegando en</span>
+      <div class="tx-row-1">
+        <ius-icon-sm iconName="icon-account-circle" class="icon-acc-circle"></ius-icon-sm>
+        <span class="h4 tx-abog">{{ object.nombreCompany }}</span>
+      </div>
+      <div class="tx-row-1 id-ct">
+        <span>ID Cuenta</span>
+        <span class="tx-id-ct">{{ object.cuentaID }}</span>
+      </div>
+      <div class="tx-row-1 tx-rol">
+        <span>Tu rol</span>
+        <span class="tx-name-rl">{{ object.rol }}</span>
+      </div>
+    </div>
+    @if (!showFormSwitchAccount) {
+    <div class="colum-mn-1">
+      <div class="email-inf">
+        <ius-icon-xs iconName="icon-alternate-email" class="icon-alt-email"></ius-icon-xs>
+        <span>{{ object.correo }}</span>
+      </div>
+      <ius-dropdown-option-item (click)="onClickPerfilPreferencias()">Perfil, preferencias y
+        seguridad</ius-dropdown-option-item>
+    </div>
+    <ius-simple-divider></ius-simple-divider>
+    <div class="container-plan" [ngClass]="{ 'show-more': showMore }">
+      <div class="inf-plan">
+        <div class="row-plan-1">
+          <div class="col-plan-1">
+            <span class="tx-small tx-tipo-plan">{{
+              subscripcionDetalle?.tipoServicio
+              }}</span>
+            <div class="tx-row-1">
+              <span class="tx-base tx-name-plan">{{
+                subscripcionDetalle?.namePlan
+                }}</span>
+              <ius-icon-md iconName="icon-help" class="icon-help"></ius-icon-md>
+            </div>
+            <div class="tx-row-2 tx-small">
+              <div class="tx-row-1">
+                <span class="tx-contador-1">Total global</span>
+                <span class="tx-contador-2">{{
+                  subscripcionDetalle?.cantTotal
+                  }}</span>
+              </div>
+              <div class="tx-row-1">
+                <span class="tx-contador-1">Disponible global</span>
+                <span class="tx-contador-2">{{
+                  subscripcionDetalle?.cantDisponible
+                  }}</span>
+              </div>
+            </div>
+            <span class="tx-base tx-estado-plan">{{
+              subscripcionDetalle?.estado
+              }}</span>
+            @if (subscripcionDetalle?.esPlanGratuito) {
+            <div class="tx-row-1 tx-small tx-prueba">
+              <ius-icon-xs iconName="icon-schedule"></ius-icon-xs>
+              <span>Plan de prueba activo</span>
+            </div>
+            }
+          </div>
+          <ius-button-circle-tertiary iconName="icon-discover-tune"></ius-button-circle-tertiary>
+        </div>
+        <div style="width: 100%">
+          <ius-progress-bar [total]="subscripcionDetalle?.cantTotal ?? 0" [titleV1]="'Judicial'"
+            [v1]="subscripcionDetalle?.cantJudicial ?? 0" [titleV2]="'SuperSociedades'"
+            [v2]="subscripcionDetalle?.cantProcesos2 ?? 0" [titleV3]="'Procuraduria'"
+            [v3]="subscripcionDetalle?.cantProcesos3 ?? 0">
+          </ius-progress-bar>
+        </div>
+        <div class="legend">
+          <div class="item-counter tx-small">
+            <ius-icon-xs iconName="icon-storage-set" class="icon-storage-set"></ius-icon-xs>
+            <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>
+          </div>
+          <div class="item-counter tx-small">
+            <ius-icon-xs iconName="icon-storage-plus" class="icon-storage-plus"></ius-icon-xs>
+            <span>{{
+              subscripcionDetalle?.cantAsignadaDisponible ?? 0
+              }}</span>
+          </div>
+        </div>
+      </div>
+      <ius-simple-divider></ius-simple-divider>
+      @if (detallesConsumo) {
+      @for (detail of detallesConsumo; track $index) {
+      <div class="inf-plan">
+        <div class="row-plan-1">
+          <div class="col-plan-1">
+            <span class="tx-small tx-tipo-plan">{{
+              detail.tipoServicio
+              }}</span>
+            <div class="tx-row-1">
+              <span class="tx-base tx-name-plan">Por consumo</span>
+              <ius-icon-md iconName="icon-help" class="icon-help"></ius-icon-md>
+            </div>
+            <div class="tx-row-2 tx-small">
+              <div class="tx-row-1">
+                <span class="tx-contador-1">Consumo este mes</span>
+                <span class="tx-contador-2">{{
+                  detail.cantConsumida
+                  }}</span>
+              </div>
+            </div>
+            <span class="tx-base tx-estado-plan">{{
+              detail.estado
+              }}</span>
+          </div>
+          <ius-button-circle-tertiary iconName="icon-discover-tune"></ius-button-circle-tertiary>
+        </div>
+      </div>
+      <ius-simple-divider></ius-simple-divider>
+      }
+      }
+    </div>
+    @if(hasMultipleServices) {
+    <ius-button-standard-tertiary class="btn-list" [iconName]="
+          showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'
+        " (buttonClicked)="clickShowMore()">
+      {{ showMore ? "Mostrar menos" : "Mostrar más" }}
+    </ius-button-standard-tertiary>
+    }
+    <ius-simple-divider></ius-simple-divider>
+    <div class="ctn-items">
+      @if (showUsuariosGrupos) {
+        <ius-menu-item iconName="icon-groups" (buttonClicked)="onClickUsuariosRoles()">Usuarios y roles</ius-menu-item>
+      }
+      @if (showConfiguracionCuenta) {
+        <ius-menu-item iconName="icon-build" (buttonClicked)="onClickConfiguracion()">Configuración de la
+          cuenta</ius-menu-item>
+      }
+      @if (showPagosFacturacion) {
+        <ius-menu-item iconName="icon-finance-chip" (buttonClicked)="onClickPagos()">Pagos y facturación</ius-menu-item>
+      }
+      @if (showSubscripcionesServicios) {
+        <ius-menu-item iconName="icon-enterprise" (buttonClicked)="onClickSubsServicios()">Suscripciones y
+          servicios</ius-menu-item>
+      }
+      @if (showReferir) {
+        <ius-menu-item iconName="icon-stream" (buttonClicked)="onClickReferir()">Referir servicio</ius-menu-item>
+      }
+    </div>
+
+    <ius-simple-divider></ius-simple-divider>
+    } @else {
+    <div class="container-bottom">
+      <span class="tx-row-1 tx-rol">Cambiar a</span>
+      <div class="container-list">
+        @for (account of accountList; track account; let i = $index) {
+        <ius-button-accounts (accountSelected)="onClickAccount(account)" (onPressedPredeterminado)="
+                clickAccountPredeterminada.emit(account)
+              "
+              ,
+              (onPressedEditar)="clickEditAccount.emit(account)"
+              ,
+              (onPressedDesvincular)="clickDesvincularAccount.emit(account)"
+              [account]="account"
+              [showOptionsFlag]="false"
+            ></ius-button-accounts>
+          }
+        </div>
+        <ius-button-standard-tertiary [iconName]="'icon-add'" (buttonClicked)="addAccount()">Agregar
+                nueva cuenta</ius-button-standard-tertiary>
+      </div>
+    }
+  </div>
+  <div class="ctn-items mgt-8">
+    <ius-menu-item iconName="{{
+        !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'
+      }}" (buttonClicked)="onClickCambiarCuenta()">{{
+      !showFormSwitchAccount
+      ? "Cambiar de cuenta"
+      : "Volver al menu de usuario"
+      }}</ius-menu-item>
+    <ius-menu-item iconName="icon-exit-to-app" (buttonClicked)="onClickCerrarSesion()">Cerrar sesión</ius-menu-item>
+  </div>
+</div>

package/src/lib/toolbar-user-menu/toolbar-user-menu.component.scss

@@ -0,0 +1,282 @@
+@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;
+
+.tbl-menu {
+    display: flex;
+    width: 390px;
+    height: 85vh;
+    padding: variables.$spacing-md;
+    flex-direction: column;
+
+}
+
+.body-menu {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    padding-right: 6px;
+    gap: variables.$spacing-xs;
+    font-family: typography.$font-secondary;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.colum-mn-1 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+}
+
+.text-head-mn {
+    color: semantic-colors.$color-text-tertiary-on-light;
+    font-size: typography.$font-size-sm;
+    line-height: typography.$line-height-sm;
+    letter-spacing: 0.24px;
+}
+
+.icon-acc-circle {
+    color: semantic-colors.$color-text-secundary-on-light;
+
+}
+
+.tx-row-1 {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+}
+
+.tx-abog {
+    color: semantic-colors.$color-text-primary-on-light;
+    letter-spacing: 0.2px;
+}
+
+.id-ct {
+    padding: variables.$spacing-xxs;
+    border-radius: variables.$radius-sm;
+    border: 1px solid colors.$neutral-5;
+}
+
+.tx-id-ct {
+    font-weight: typography.$font-weight-medium;
+}
+
+.tx-rol {
+    font-size: typography.$font-size-base;
+    color: semantic-colors.$color-text-secundary-on-light;
+    line-height: typography.$line-height-base;
+}
+
+.tx-name-rl {
+    color: semantic-colors.$color-text-primary-on-light;
+    letter-spacing: 0.28px;
+    font-weight: 500;
+}
+
+.email-inf {
+    display: flex;
+    padding: variables.$spacing-xs;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+
+    color: semantic-colors.$color-text-secundary-on-light;
+    font-size: typography.$font-size-base;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+}
+
+.icon-alt-email {
+    color: colors.$success-600;
+}
+
+ius-dropdown-option-item {
+    width: 100%;
+}
+
+.container-plan {
+    overflow: hidden;
+    max-height: 200px;
+    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+}
+
+.inf-plan {
+    display: flex;
+    padding: variables.$spacing-xs;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+}
+
+.show-more {
+    max-height: 10000px;
+    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tx-small {
+    font-size: typography.$font-size-sm;
+    line-height: typography.$line-height-sm;
+    letter-spacing: 0.24px;
+}
+
+.tx-base {
+    font-size: typography.$font-size-base;
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+}
+
+.row-plan-1 {
+    display: flex;
+    gap: variables.$spacing-sm;
+    width: 100%;
+}
+
+.col-plan-1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1 0 0;
+}
+
+.icon-help {
+    color: semantic-colors.$color-text-tertiary-on-light;
+}
+
+.tx-tipo-plan {
+    color: semantic-colors.$color-text-secundary-on-light;
+    font-weight: typography.$font-weight-medium;
+}
+
+.tx-name-plan {
+    color: semantic-colors.$color-text-primary-on-light;
+    font-weight: typography.$font-weight-medium;
+}
+
+.tx-row-2 {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xs;
+}
+
+.tx-contador-1 {
+    color: semantic-colors.$color-text-tertiary-on-light;
+    font-weight: typography.$font-weight-medium;
+}
+
+.tx-contador-2 {
+    color: semantic-colors.$color-text-primary-on-light;
+}
+
+.tx-estado-plan {
+    color: colors.$success-600;
+}
+
+.mgt-8 {
+    margin-top: variables.$spacing-xs;
+}
+
+.progress-container {
+    width: 100%;
+    border-radius: variables.$radius-pill;
+    height: 23px;
+    overflow: hidden;
+    background: colors.$neutral-3;
+}
+
+.progress-bar {
+    display: flex;
+    height: 100%;
+}
+
+.segment {
+    height: 100%;
+}
+
+.tipo-1-color-bar {
+    background: colors.$info-400;
+}
+
+.tipo-1-color {
+    color: colors.$info-400;
+}
+
+.tipo-2-color-bar {
+    background: colors.$info-700;
+}
+
+.tipo-2-color {
+    color: colors.$info-700;
+}
+
+.legend {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: variables.$spacing-xs;
+    flex-wrap: wrap;
+
+    .icon-storage-set {
+        color: colors.$info-700;
+    }
+
+    .icon-storage-plus {
+        color: colors.$success-700;
+    }
+}
+
+.item-counter {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    color: semantic-colors.$color-text-primary-on-light;
+}
+
+.tx-name-serv {
+    color: semantic-colors.$color-text-secundary-on-light;
+    font-weight: typography.$font-weight-medium;
+}
+
+.btn-list {
+    margin-bottom: variables.$spacing-xs;
+}
+
+.ctn-items {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$spacing-xxs;
+}
+
+.scrollable {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.scrollable::-webkit-scrollbar {
+    -webkit-appearance: none;
+}
+
+.scrollable::-webkit-scrollbar:vertical {
+    width: 7px;
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+    background-color: #d8d6d6;
+    border-radius: 20px;
+}
+
+.container-bottom {
+    padding: 0 variables.$spacing-md;
+    display: flex;
+    flex-direction: column;
+    gap: variables.$spacing-xs;
+}
+
+.container-list {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$spacing-xxs;
+    width: 90%;
+}

package/src/lib/toolbar-user-menu/toolbar-user-menu.component.spec.ts

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

package/src/lib/toolbar-user-menu/toolbar-user-menu.component.ts

@@ -0,0 +1,111 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconSmComponent } from "../icon-sm";
+import { IconXsComponent } from "../icon-xs";
+import { DropdownOptionItemComponent } from "../dropdown-option-item";
+import { SimpleDividerComponent } from "../simple-divider";
+import { IconMdComponent } from "../icon-md";
+import { ButtonCircleTertiaryComponent } from "../button-circle-tertiary";
+import { ButtonStandardTertiaryComponent } from "../button-standard-tertiary";
+import { MenuItemComponent } from "../menu-item";
+import { CommonModule } from '@angular/common';
+import { ProgressBarComponent } from "../progress-bar/progress-bar.component";
+import { ButtonAccountsComponent } from "../button-accounts/button-accounts.component";
+import { Objeto, Account, SubscripcionDetalle, ConsumoDetalles } from "../toolbar/toolbar.component";
+
+@Component({
+  selector: 'ius-toolbar-user-menu',
+  standalone: true,
+  imports: [CommonModule, IconSmComponent, IconXsComponent, DropdownOptionItemComponent, SimpleDividerComponent, IconMdComponent, ButtonCircleTertiaryComponent, ButtonStandardTertiaryComponent, MenuItemComponent, ProgressBarComponent, ButtonAccountsComponent],
+  templateUrl: './toolbar-user-menu.component.html',
+  styleUrl: './toolbar-user-menu.component.scss'
+})
+export class ToolbarUserMenuComponent {
+
+  @Input({ required: true }) object!: Objeto;
+  @Input() subscripcionDetalle?: SubscripcionDetalle;
+  @Input() detallesConsumo?: ConsumoDetalles[];
+  @Input() accountList?: Account[];
+
+  @Input() showUsuariosGrupos?: boolean = true;
+  @Input() showConfiguracionCuenta?: boolean = true;
+  @Input() showPagosFacturacion?: boolean = true;
+  @Input() showSubscripcionesServicios?: boolean = true;
+  @Input() showReferir?: boolean = true;
+
+  @Output() clickPerfilPreferencias: EventEmitter<void> = new EventEmitter();
+  @Output() clickUsuariosRoles: EventEmitter<void> = new EventEmitter();
+  @Output() clickConfiguracion: EventEmitter<void> = new EventEmitter();
+  @Output() clickPagos: EventEmitter<void> = new EventEmitter();
+  @Output() clickSubsServicios: EventEmitter<void> = new EventEmitter();
+  @Output() clickCambiarCuenta: EventEmitter<void> = new EventEmitter();
+  @Output() clickCerrarSesion: EventEmitter<void> = new EventEmitter();
+  @Output() clickReferir: EventEmitter<void> = new EventEmitter();
+  @Output() requestClose: EventEmitter<void> = new EventEmitter();
+
+  @Output() clickAccountSelected: EventEmitter<any> = new EventEmitter();
+  @Output() clickAccountPredeterminada: EventEmitter<any> = new EventEmitter();
+  @Output() clickEditAccount: EventEmitter<any> = new EventEmitter();
+  @Output() clickDesvincularAccount: EventEmitter<any> = new EventEmitter();
+  @Output() clickAgregarAccount: EventEmitter<any> = new EventEmitter();
+
+
+  showMore: boolean = false;
+  showFormSwitchAccount: boolean = false;
+  isOpen: boolean = false;
+
+  clickShowMore() {
+    this.showMore = !this.showMore;
+  }
+
+  onClickUsuariosRoles() {
+    this.clickUsuariosRoles.emit();
+    this.requestClose.emit();
+  }
+
+  onClickConfiguracion() {
+    this.clickConfiguracion.emit();
+    this.requestClose.emit();
+  }
+
+  onClickPagos() {
+    this.clickPagos.emit();
+    this.requestClose.emit();
+  }
+
+  onClickSubsServicios() {
+    this.clickSubsServicios.emit();
+    this.requestClose.emit();
+  }
+
+  onClickCambiarCuenta() {
+    this.clickCambiarCuenta.emit();
+    this.showFormSwitchAccount = !this.showFormSwitchAccount;
+  }
+
+  onClickCerrarSesion() {
+    this.clickCerrarSesion.emit();
+  }
+
+  onClickPerfilPreferencias() {
+    this.clickPerfilPreferencias.emit();
+    this.requestClose.emit();
+  }
+
+  onClickReferir() {
+    this.clickReferir.emit();
+    this.requestClose.emit();
+  }
+
+  onClickAccount(account: Account) {
+    this.clickAccountSelected.emit(account);
+  }
+
+  addAccount() {
+    this.clickAgregarAccount.emit();
+    this.requestClose.emit();
+  }
+
+  get hasMultipleServices(): boolean {
+  return !!(this.detallesConsumo && this.detallesConsumo.length > 0);
+}
+}

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

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

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

@@ -0,0 +1,81 @@
+<div class="general-container">
+  <div
+    class="container-card"
+    (mouseenter)="onMouseEnter()"
+    (mouseleave)="onMouseLeave()"
+    (click)="clickCard($event)"
+  >
+    <div class="data">
+      <div class="left-data">
+        @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 class="data-container">
+          <p class="state" [class.on]="state" [class.off]="state === false">
+            {{ stateLabel }}
+          </p>
+          <p class="name">{{ name }}</p>
+          <p class="role">{{ role }}</p>
+        </div>
+      </div>
+      <div class="right-data">
+        <div class="container">
+          @if (label1 && data1) {
+          <div class="data-container">
+            <p class="title">{{ label1 }}</p>
+            <p class="data">{{ data1 }}</p>
+          </div>
+          } @if (label2 && data2) {
+          <div class="data-container">
+            <p class="title">{{ label2 }}</p>
+            <p class="data">{{ data2 }}</p>
+          </div>
+          }
+        </div>
+        @if (hover && showActions) {
+        <div class="buttons">
+          <div>
+            <ius-button-squared-tertiary
+              iconName="icon-edit"
+              (buttonClicked)="clickEdit($event)"
+            ></ius-button-squared-tertiary>
+          </div>
+          <div>
+            <ius-button-squared-tertiary
+              iconName="icon-delete"
+              (buttonClicked)="clickDelete($event)"
+            ></ius-button-squared-tertiary>
+          </div>
+          @if (showOptionsPoints) {
+          <div class="options">
+            <ius-button-squared-tertiary
+              iconName="icon-more-vert"
+              (buttonClicked)="clickShowMore($event)"
+            ></ius-button-squared-tertiary>
+            @if (options) {
+            <div class="dropdown">
+              <ius-dropdown-contextual-menu>
+                <ng-content></ng-content>
+              </ius-dropdown-contextual-menu>
+            </div>
+            }
+          </div>
+          }
+        </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>