@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ius-simple-user-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './simple-user-card.component.html',
+  styleUrl: './simple-user-card.component.scss'
+})
+export class SimpleUserCardComponent {
+
+  @Input() letterIcon?: string;
+  @Input() image?: string;
+  @Input() text?: string;
+
+
+}

package/src/lib/slide-toggle/index.ts

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

package/src/lib/slide-toggle/slide-toggle.component.html

@@ -0,0 +1,6 @@
+<div class="ius-toggle-container" (click)="toggle()">
+  <span class="label">{{ label }}</span>
+  <div class="switch" [class.checked]="checked">
+    <div class="thumb"></div>
+  </div>
+</div>

package/src/lib/slide-toggle/slide-toggle.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;
+
+.ius-toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+
+    .label {
+        letter-spacing: 0.28px;
+        color: semantic-colors.$color-text-primary-on-light;
+        font-family: typography.$font-secondary;
+        font-size: typography.$font-size-base;
+        line-height: typography.$line-height-base;
+    }
+
+    .switch {
+        width: 34px;
+        height: 14px;
+        background-color: #C4DFFF;
+        border-radius: 34px;
+        position: relative;
+        transition: background-color 0.3s;
+
+        &.checked {
+            .thumb {
+                transform: translateX(20px);
+                background-color: #184FDB;
+            }
+        }
+
+        .thumb {
+            width: 20px;
+            height: 20px;
+            background-color: white;
+            border-radius: 50%;
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+        }
+    }
+}

package/src/lib/slide-toggle/slide-toggle.component.spec.ts

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

package/src/lib/slide-toggle/slide-toggle.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'ius-slide-toggle',
+  standalone: true,
+  imports: [],
+  templateUrl: './slide-toggle.component.html',
+  styleUrl: './slide-toggle.component.scss'
+})
+export class SlideToggleComponent {
+  @Input() label: string = '';
+  @Input() checked: boolean = false;
+  @Output() onCheckedChangeEvent = new EventEmitter<boolean>();
+
+  toggle() {
+    this.checked = !this.checked;
+    this.onCheckedChangeEvent.emit(this.checked);
+  }
+}

package/src/lib/snackbar/index.ts

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

package/src/lib/snackbar/snackbar.component.html

@@ -0,0 +1,10 @@
+<div class="ctn-snack" [ngClass]="variant" (click)="onclickAction()">
+    <div class="row-title">
+        <ius-icon-md iconName="icon-error" class="icon-error" [ngClass]="variant"></ius-icon-md>
+        <span class="label-large">{{label}}</span>
+        @if(showClose){
+        <ius-button-circle-tertiary iconName="icon-cancel" (click)="close($event)"></ius-button-circle-tertiary>
+        }
+    </div>
+    <span class="txt-content">{{content}}</span>
+</div>

package/src/lib/snackbar/snackbar.component.scss

@@ -0,0 +1,92 @@
+@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;
+
+.ctn-snack {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    padding: variables.$spacing-lg;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+    width: 304px;
+    color: semantic-colors.$color-text-primary-on-light;
+    border-radius: variables.$radius-md;
+
+    &:hover {
+        box-shadow: variables.$elevation-100;
+    }
+
+    &.notification {
+        border: 1px solid colors.$neutral-5;
+        background: colors.$neutral-white;
+    }
+
+    &.error {
+        border: 1px solid colors.$danger-300;
+        background: colors.$danger-100;
+    }
+
+    &.warning {
+        border: 1px solid colors.$warning-400;
+        background: colors.$warning-100;
+    }
+
+    &.info {
+        border: 1px solid colors.$info-400;
+        background: colors.$info-100;
+    }
+
+    &.success {
+        border: 1px solid colors.$success-400;
+        background: colors.$success-100;
+    }
+}
+
+.row-title {
+    display: flex;
+    align-items: center;
+    gap: variables.$spacing-xs;
+    width: 100%;
+}
+
+.row-title span {
+    display: flex;
+    align-items: center;
+    flex: 1 0 0;
+}
+
+.row-title span,
+.txt-content {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    max-width: 100%;
+}
+
+.icon-error {
+    color: colors.$info-600;
+
+    &.error {
+        color: colors.$danger-600;
+    }
+
+    &.warning {
+        color: colors.$warning-600;
+    }
+
+    &.success {
+        color: colors.$success-600;
+    }
+}
+
+.txt-content {
+    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;
+}

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

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

package/src/lib/snackbar/snackbar.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from "../icon-md";
+import { CommonModule } from '@angular/common';
+import { ButtonCircleTertiaryComponent } from '../button-circle-tertiary';
+
+type SnackbarVariant = 'notification' | 'error' | 'warning' | 'info' | 'success';
+
+@Component({
+  selector: 'ius-snackbar',
+  standalone: true,
+  imports: [IconMdComponent, ButtonCircleTertiaryComponent, CommonModule],
+  templateUrl: './snackbar.component.html',
+  styleUrl: './snackbar.component.scss'
+})
+export class SnackbarComponent {
+
+  @Input() label?: string;
+  @Input() content?: string;
+  @Input() showClose: boolean = false;
+  @Input() variant: SnackbarVariant = 'notification';
+
+  @Output() closed = new EventEmitter<void>();
+  @Output() clickAction = new EventEmitter<void>();
+
+  close(event: Event) {
+    event.stopImmediatePropagation();
+    this.closed.emit();
+  }
+
+  onclickAction() {
+    this.clickAction.emit();
+  }
+
+}

package/src/lib/support-panel/index.ts

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

package/src/lib/support-panel/support-panel.component.html

@@ -0,0 +1,30 @@
+<ius-drawer-container-right [titleDrawer]="'Panel de soporte y ayuda'" (onDrawerClosed)="onClose()"
+    [percentProgressBar]="0">
+        <div class="form between-xs">
+        <div>
+            <div class="header-general">
+                <div class="header">
+                    <span class="h5">Panel de soporte y ayuda</span>
+                </div>
+            </div>
+            <div class="content-text">
+                <span class="body-base-1">¡Hola, aquí encontraras soluciones claras y acompañamiento siempre que lo
+                    requieras!</span>
+            </div>
+            <ius-section-collapse-drawer-parent textTitle="Tickets de soporte" [disabled]="false"
+                [isActive]="isExpandSupportTicket" (buttonClicked)="onExpandSupportTicket()">
+                <div class="section">
+                    <ius-button-standard-tertiary [iconName]="'icon-ticket'" (buttonClicked)="onShowTickets()">
+                        <span>Consultar mis tickets</span>
+                    </ius-button-standard-tertiary>
+                    <ius-button-standard-tertiary [iconName]="'icon-add'" (buttonClicked)="onAddTicket()">
+                        <span>Radicar nuevo ticket de soporte</span>
+                    </ius-button-standard-tertiary>
+                </div>
+            </ius-section-collapse-drawer-parent>
+            <ius-section-collapse-drawer-parent textTitle="Preguntas frecuentes" [disabled]="false"
+                [isActive]="isExpandQuestion" (buttonClicked)="onExpandQuestion()">
+            </ius-section-collapse-drawer-parent>
+        </div>
+    </div>
+</ius-drawer-container-right>

package/src/lib/support-panel/support-panel.component.scss

@@ -0,0 +1,72 @@
+@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;
+
+.background-drawer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.2);
+    transition: 0.2s ease-in-out;
+    align-items: center;
+    z-index: 900;
+}
+
+.form {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    padding: variables.$spacing-lg variables.$spacing-md;
+    align-items: flex-start;
+    gap: variables.$spacing-xs;
+}
+
+.header-general {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+    align-self: stretch;
+}
+
+.header {
+    display: flex;
+    padding: 0 variables.$spacing-xxs;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+}
+
+// .sections {
+//     display: flex;
+// flex-direction: column;
+// align-items: flex-start;
+// gap: variables.$spacing-sm;
+// align-self: stretch;
+// width: 100%;
+// }
+
+.section {
+    display: flex;
+    padding: variables.$spacing-sm;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+    align-self: stretch;
+}
+
+.content-text {
+    display: flex;
+    padding: variables.$spacing-xs variables.$spacing-sm;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+}

package/src/lib/support-panel/support-panel.component.spec.ts

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

package/src/lib/support-panel/support-panel.component.ts

@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { SectionCollapseDrawerParentComponent } from "../section-collapse-drawer-parent/section-collapse-drawer-parent.component";
+import { DrawerContainerRightComponent } from "../drawer-container-right/drawer-container-right.component";
+import { ButtonStandardTertiaryComponent } from "../button-standard-tertiary/button-standard-tertiary.component";
+
+@Component({
+  selector: 'ius-support-panel',
+  standalone: true,
+  imports: [DrawerContainerRightComponent, SectionCollapseDrawerParentComponent, ButtonStandardTertiaryComponent],
+  templateUrl: './support-panel.component.html',
+  styleUrl: './support-panel.component.scss'
+})
+export class SupportPanelComponent {
+
+  @Output() onCloseForm: EventEmitter<void> = new EventEmitter();
+  @Output() onClickAddTicket: EventEmitter<void> = new EventEmitter();
+  @Output() onClickShowTickets: EventEmitter<void> = new EventEmitter();
+
+  percentProgressBar = 100;
+  isExpandSupportTicket= true;
+  isExpandQuestion = false;
+
+  onExpandSupportTicket() {
+    this.isExpandSupportTicket = true;
+    this.isExpandQuestion = false;
+  }
+
+  onExpandQuestion() {
+    this.isExpandSupportTicket = false;
+    this.isExpandQuestion = true;
+  }
+
+  onClose() {
+    this.onCloseForm.emit();
+  }
+
+  onAddTicket() {
+    this.onClickAddTicket.emit();
+  }
+
+  onShowTickets() {
+    this.onClickShowTickets.emit();
+  }
+}

package/src/lib/toolbar/index.ts

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

package/src/lib/toolbar/toolbar.component.html

@@ -0,0 +1,127 @@
+<div class="tlb">
+  <div class="logo-page">
+    <div class="logo-lt">
+      <img [src]="object.logoLt" alt="logo" />
+    </div>
+    <div class="page">{{ pagina }}</div>
+  </div>
+  <div class="btns">
+    <div class="tools">
+      <ius-button-circle-tertiary
+        iconName="icon-support-agent"
+        (buttonClicked)="onClickSupport()"
+      ></ius-button-circle-tertiary>
+      <div class="notification-wrapper">
+        <ius-button-circle-tertiary
+          iconName="icon-notifications"
+          (buttonClicked)="onClickNotifications()"
+        ></ius-button-circle-tertiary>
+        @if (notificationsCount > 0) {
+          <span class="notification-badge">{{ notificationsCount }}</span>
+        }
+      </div>
+      <div class="relative" #buttonsAccion>
+        <ius-button-circle-tertiary
+          iconName="icon-apps"
+          (buttonClicked)="toggleShowMore()"
+        >
+        </ius-button-circle-tertiary>
+
+        <div class="more-box" [class.active]="showButtonsAccion">
+          <button class="item-btn">
+            <span
+              [innerHTML]="svgLitigio"
+              class="icon-btn"
+              (click)="onClickServicioVigilancia()"
+            ></span
+            >Vigilancia
+          </button>
+          <button class="item-btn">
+            <span
+              [innerHTML]="svgCorreo"
+              class="icon-btn"
+              (click)="onClickServicioCorreo()"
+            ></span
+            >Correo
+          </button>
+          <button class="item-btn">
+            <span
+              [innerHTML]="svgLocalizador"
+              class="icon-btn"
+              (click)="onClickServicioLocalizador()"
+            ></span
+            >Localizador
+          </button>
+          <button class="item-btn">
+            <span
+              [innerHTML]="svgFirma"
+              class="icon-btn"
+              (click)="onClickServicioFirma()"
+            ></span
+            >Firma
+          </button>
+          <button class="item-btn">
+            <span
+              [innerHTML]="svgCrm"
+              class="icon-btn"
+              (click)="onClickServicioCRM()"
+            ></span
+            >CRM
+          </button>
+        </div>
+      </div>
+    </div>
+    <ius-dropdown-user-menu
+      #userDropdown
+      [nameUser]="object.nombreUsuario"
+      class="dropdown"
+      [avatar]="object.avatarUsuario!"
+      [logo]="object.logoCompany!"
+      (buttonClicked)="onClickOpenToolbarUserMenu()"
+    >
+      <ius-toolbar-user-menu
+        [object]="object"
+        [accountList]="accountList"
+        [detallesConsumo]="detallesConsumo"
+        [subscripcionDetalle]="subscripcionDetalle"
+        [showUsuariosGrupos]="showUsuariosGrupos"
+        [showConfiguracionCuenta]="showConfiguracionCuenta"
+        [showPagosFacturacion]="showPagosFacturacion"
+        [showSubscripcionesServicios]="showSubscripcionesServicios"
+        [showReferir]="showReferir"
+        (clickUsuariosRoles)="onClickUsuariosRoles()"
+        (clickConfiguracion)="onClickConfiguracion()"
+        (clickPagos)="onClickPagos()"
+        (clickSubsServicios)="onClickSubsServicios()"
+        (clickCambiarCuenta)="onClickCambiarCuenta()"
+        (clickCerrarSesion)="onClickCerrarSesion()"
+        (clickPerfilPreferencias)="onClickPerfilPreferencias()"
+        (clickReferir)="onClickReferir()"
+        (clickAgregarAccount)="onClickAgregarAccount($event)"
+        (clickAccountSelected)="onClickAccountSelected($event)"
+        (clickAccountPredeterminada)="onClickAccountPredeterminada($event)"
+        (clickEditAccount)="onClickEditAccount($event)"
+        (clickDesvincularAccount)="onClickUnlinkAccount($event)"
+        (requestClose)="userDropdown.close()"
+      ></ius-toolbar-user-menu>
+    </ius-dropdown-user-menu>
+  </div>
+</div>
+
+@if (notificationsOpen) {
+  <ius-notifications
+    [alerts]="alerts ?? []"
+    (onPressedBackEvent)="onClickNotifications()"
+    (onDrawerClosed)="notificationsOpen = false"
+    (onDoneAlert)="handleDoneAlert($event)"
+    (onPostponeAlert)="handlePostponeAlert($event)"
+  ></ius-notifications>
+}
+
+@if (supportPanel) {
+  <ius-support-panel
+    (onCloseForm)="supportPanel = false"
+    (onClickAddTicket)="onAddTicket()"
+    (onClickShowTickets)="onShowTickets()"
+  ></ius-support-panel>
+}