@litigiovirtual/ius-design-components 1.0.267 → 1.0.268

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

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

@@ -1,282 +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;
-
-.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

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

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

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

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

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