@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/menu-item/menu-item.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from "../icon-md/icon-md.component";
+import { CommonModule } from '@angular/common';
+import { BadgeComponent } from "../badge/badge.component";
+
+@Component({
+  selector: 'ius-menu-item',
+  standalone: true,
+  imports: [IconMdComponent, CommonModule, BadgeComponent],
+  templateUrl: './menu-item.component.html',
+  styleUrl: './menu-item.component.scss'
+})
+export class MenuItemComponent {
+
+  @Input() isActive = false;
+  @Input() iconName = '';
+  @Input() numberAlerts? : number;
+  @Output() buttonClicked: EventEmitter<void> = new EventEmitter();
+
+  onClick() {
+    if (this.isActive == false) {
+      this.buttonClicked.emit();
+    }
+  }
+
+}

package/src/lib/nav-rail/index.ts

@@ -0,0 +1,2 @@
+export * from './nav-rail.component';
+

package/src/lib/nav-rail/nav-rail.component.html

@@ -0,0 +1,14 @@
+<div class="container-general">
+  <div class="rail-container" [class.collapsed]="!isOpen" [@slideInOut]="isOpen ? 'open' : 'closed'" (@slideInOut.done)="onAnimDone($event)">
+    <div class="rail-icon-container">
+      <ius-button-squared-secondary
+        class="panel"
+        [iconName]="isOpen ? 'icon-left-panel-close' : 'icon-left-panel-open'"
+        (click)="toggle()">
+      </ius-button-squared-secondary>
+    </div>
+    <div class="rail-items-container">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/src/lib/nav-rail/nav-rail.component.scss

@@ -0,0 +1,58 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+
+.container-general {
+  position: relative;
+  height: 100%;
+}
+
+.panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.rail-container {
+  display: inline-flex;
+  height: calc(100% - 32px);
+  width: 239px;
+  padding: variables.$spacing-md variables.$spacing-xs;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: variables.$spacing-sm;
+  flex-shrink: 0;
+  border-right: 1px solid colors.$neutral-4;
+  background-color: colors.$neutral-1;
+  overflow: hidden;
+}
+
+.rail-icon-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+
+.rail-items-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: variables.$spacing-xxs;
+  width: 239px;
+  min-width: 0;
+  opacity: 1;
+  transition: opacity 200ms ease;
+}
+
+.collapsed .rail-items-container {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toggle-btn {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 8px;
+  align-self: flex-end;
+}

package/src/lib/nav-rail/nav-rail.component.spec.ts

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

package/src/lib/nav-rail/nav-rail.component.ts

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { trigger, transition, style, animate, state, } from '@angular/animations';
+import { ButtonSquaredSecondaryComponent } from "../button-squared-secondary/button-squared-secondary.component";
+
+@Component({
+  selector: 'ius-nav-rail',
+  standalone: true,
+  imports: [ButtonSquaredSecondaryComponent],
+  animations: [
+    trigger('slideInOut', [
+      state('open', style({
+        width: '239px',
+      })),
+      state('closed', style({
+        width: '40px',
+      })),
+      transition('open <=> closed', [
+        animate('370ms ease-in-out')
+      ]),
+    ])
+  ],
+  templateUrl: './nav-rail.component.html',
+  styleUrl: './nav-rail.component.scss'
+})
+export class NavRailComponent {
+
+  @Input() isOpen: boolean = false;
+  @Output() onClose : EventEmitter<void> = new EventEmitter();
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  onAnimDone(event: any) {
+    if (event.toState === 'closed') {
+      this.onClose.emit();
+    }
+  }
+}

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

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

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

@@ -0,0 +1,69 @@
+<div class="general-container">
+  <div class="container">
+    <div class="data">
+      <div class="header">
+        <ius-icon-md iconName="icon-notifications"></ius-icon-md>
+        <div class="date-title">
+          <div class="date">
+            <p>{{ date }}</p>
+          </div>
+          <div class="title">
+            <p>{{ title }}</p>
+          </div>
+        </div>
+        @if (simple || activity) {
+        <ius-button-squared-tertiary
+          iconName="icon-done-outline"
+          (buttonClicked)="onClickDone()"
+        ></ius-button-squared-tertiary>
+        } @if (activity) {
+        <ius-button-squared-tertiary
+          iconName="icon-history-2"
+          (buttonClicked)="onClickPostpone()"
+        ></ius-button-squared-tertiary>
+        } @if (process) {
+        <ius-button-squared-tertiary
+          iconName="icon-help-center"
+        ></ius-button-squared-tertiary>
+        }
+      </div>
+      @if(handlePostpone){
+      <div class="general-container-options">
+        <div class="container-options">
+          <div class="options">
+            <ius-dropdown-option-item (click)="onClickPostpone15Min()">
+              Posponer 15 minutos
+            </ius-dropdown-option-item>
+            <ius-dropdown-option-item (click)="onClickPostpone30Min()">
+              Posponer 30 minutos
+            </ius-dropdown-option-item>
+            <ius-dropdown-option-item (click)="onClickPostpone1Hour()">
+              Posponer 1 hora
+            </ius-dropdown-option-item>
+            <ius-dropdown-option-item (click)="onClickPostpone1Day()">
+              Posponer 1 día
+            </ius-dropdown-option-item>
+            <ius-dropdown-option-item (click)="onClickPostpone1Week()">
+              Posponer 1 semana
+            </ius-dropdown-option-item>
+            <ius-simple-divider></ius-simple-divider>
+            <ius-dropdown-option-item (click)="onClickEditActivity()">
+              Editar actividad
+            </ius-dropdown-option-item>
+          </div>
+        </div>
+      </div>
+      }
+      <div class="body">
+        <p>{{ body }}</p>
+      </div>
+      @if (process) {
+      <div class="btn">
+        <ius-button-standard-secondary (buttonClicked)="onClickAccept()"
+          >Aceptar</ius-button-standard-secondary
+        >
+      </div>
+      }
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,137 @@
+@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-sm variables.$spacing-md;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-5;
+}
+
+.data {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: variables.$spacing-xxs;
+  align-self: stretch;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: variables.$spacing-xxs;
+  align-self: stretch;
+
+  .date-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1 0 0;
+
+    .date {
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-sm;
+      align-self: stretch;
+
+      p {
+        margin: 0;
+        color: semantic-colors.$color-text-primary-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;
+      }
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      gap: variables.$spacing-sm;
+      align-self: stretch;
+
+      p {
+        margin: 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-medium;
+        line-height: typography.$line-height-base;
+        letter-spacing: 0.28px;
+      }
+    }
+  }
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: variables.$spacing-sm;
+  align-self: stretch;
+
+  p {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-sm;
+    align-self: stretch;
+    color: semantic-colors.$color-text-primary-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;
+  }
+}
+
+.btn {
+  width: 100%;
+}
+
+.general-container-options {
+  position: absolute;
+  right: 20px;
+  top: 55px;
+  z-index: 1000;
+}
+
+.container-options {
+  display: inline-flex;
+  padding: variables.$spacing-xxs;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: variables.$spacing-xxs;
+  border-radius: variables.$radius-md;
+  background: var(--N-WHITE, #fff);
+
+  box-shadow: variables.$elevation-200;
+
+  .options {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+  }
+}
+
+ius-dropdown-option-item {
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,76 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconMdComponent } from "../icon-md/icon-md.component";
+import { ButtonSquaredTertiaryComponent } from "../button-squared-tertiary/button-squared-tertiary.component";
+import { ButtonStandardSecondaryComponent } from "../button-standard-secondary/button-standard-secondary.component";
+import { DropdownOptionItemComponent } from "../dropdown-option-item";
+import { SimpleDividerComponent } from "../simple-divider";
+
+@Component({
+  selector: 'ius-notification-card',
+  standalone: true,
+  imports: [IconMdComponent, ButtonSquaredTertiaryComponent, ButtonStandardSecondaryComponent, DropdownOptionItemComponent, SimpleDividerComponent],
+  templateUrl: './notification-card.component.html',
+  styleUrl: './notification-card.component.scss'
+})
+export class NotificationCardComponent {
+  @Input() date?: string;
+  @Input() title?: string;
+  @Input() body?: string;
+  @Input() simple?: boolean;
+  @Input() activity?: boolean;
+  @Input() process?: boolean;
+
+  @Output() onAccept: EventEmitter<void> = new EventEmitter();
+  @Output() onDone: EventEmitter<void> = new EventEmitter();
+  @Output() onPostpone15Min: EventEmitter<void> = new EventEmitter();
+  @Output() onPostpone30Min: EventEmitter<void> = new EventEmitter();
+  @Output() onPostpone1Hour: EventEmitter<void> = new EventEmitter();
+  @Output() onPostpone1Day: EventEmitter<void> = new EventEmitter();
+  @Output() onPostpone1Week: EventEmitter<void> = new EventEmitter();
+  @Output() onEditActivity: EventEmitter<void> = new EventEmitter();
+
+  handlePostpone?: boolean = false;
+
+
+  onClickAccept() {
+    this.onAccept.emit();
+  }
+
+  onClickDone() {
+    this.onDone.emit();
+  }
+
+  onClickPostpone() {
+    this.handlePostpone = !this.handlePostpone;
+  }
+
+  onClickPostpone15Min() {
+    this.handlePostpone = false;
+    this.onPostpone15Min.emit();
+  }
+
+  onClickPostpone30Min() {
+    this.handlePostpone = false;
+    this.onPostpone30Min.emit();
+  }
+
+  onClickPostpone1Hour() {
+    this.handlePostpone = false;
+    this.onPostpone1Hour.emit();
+  }
+
+  onClickPostpone1Day() {
+    this.handlePostpone = false;
+    this.onPostpone1Day.emit();
+  }
+
+  onClickPostpone1Week() {
+    this.handlePostpone = false;
+    this.onPostpone1Week.emit();
+  }
+
+  onClickEditActivity() {
+    this.handlePostpone = false;
+    this.onEditActivity.emit();
+  }
+}

package/src/lib/notifications/index.ts

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

package/src/lib/notifications/notifications.component.html

@@ -0,0 +1,49 @@
+<div class="background-drawer">
+  @if (isVisible) {
+  <div
+    class="create-container"
+    @slideInOut
+    (@slideInOut.done)="onAnimDone($event)"
+  >
+    <div class="header-drawer">
+      <div class="title-header-drawer">Panel de notificaciones</div>
+      <ius-button-squared-tertiary
+        [iconName]="'icon-cancel'"
+        (buttonClicked)="close()"
+      ></ius-button-squared-tertiary>
+    </div>
+    <ius-simple-divider></ius-simple-divider>
+    <div
+      class="scrollable-small"
+      style="height: calc(100% - 69px); overflow-y: auto; padding: 5px;"
+    >
+      @if (alerts.length > 0) { @for (alert of alerts; track $index) {
+      <div class="notification">
+        <ius-notification-card
+          [date]="(alert?.fechaRegistro | date:'d \'de\' MMMM \'de\' y')!"
+          [title]="alert?.titulo"
+          [simple]="(alert?.tipoAlerta! === 'Simple' ? true : false)! || (alert?.tipoAlerta! === 'Hexti' ? true : false)!"
+          [activity]="alert?.tipoAlerta! === 'Actividad' ? true : false"
+          [process]="alert?.tipoAlerta! === 'Proceso' ? true : false"
+          [body]="alert?.descripcion!"
+          (onDone)="onClickDone(alert.alertaID!)"
+          (onPostpone15Min)="onPostpone(alert, '15m')"
+          (onPostpone30Min)="onPostpone(alert, '30m')"
+          (onPostpone1Hour)="onPostpone(alert, '1h')"
+          (onPostpone1Day)="onPostpone(alert, '1d')"
+          (onPostpone1Week)="onPostpone(alert, '1w')"
+        ></ius-notification-card>
+      </div>
+      }
+      <ius-simple-divider></ius-simple-divider>
+      }@else {
+      <div class="no-notifications">
+        <ius-icon-lg [iconName]="'icon-done-outline'"></ius-icon-lg>
+        <ius-simple-divider></ius-simple-divider>
+        <p>No tienes ninguna nueva notificación o alerta</p>
+      </div>
+      }
+    </div>
+  </div>
+  }
+</div>

package/src/lib/notifications/notifications.component.scss

@@ -0,0 +1,113 @@
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+
+.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;
+}
+
+.create-container {
+  height: calc(100vh - 60px);
+  position: absolute;
+  z-index: 1000;
+  width: 390px;
+  top: 60px;
+  right: 0px;
+  background-color: white;
+  border-radius: 8px 0px 0px 8px;
+  box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.15),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+}
+
+.header-drawer {
+  display: flex;
+  padding: 12px 16px;
+  align-items: center;
+}
+
+.title-header-drawer {
+  width: 100%;
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-h4;
+  color: semantic-colors.$color-text-primary-on-light;
+  line-height: typography.$line-height-h4;
+  letter-spacing: 0.2px;
+  font-weight: 500;
+  display: flex;
+  justify-content: start;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+}
+
+.notification {
+  padding: 2px 5px;
+}
+
+.no-notifications {
+  display: flex;
+  width: 70%;
+  padding: 8px;
+  flex-direction: column;
+  align-items: center;
+  align-self: center;
+  justify-self: center;
+  gap: variables.$spacing-sm;
+  margin-top: 24px;
+
+  p {
+    flex: 1 0 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    color: semantic-colors.$color-text-primary-on-light;
+    text-align: center;
+    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;
+  }
+}
+
+.button-header-drawer {
+  margin-left: 3px;
+  margin-top: 1px;
+}
+
+.scrollable-small::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+.scrollable-small::-webkit-scrollbar:vertical {
+  width: variables.$spacing-xs;
+  height: variables.$spacing-xl;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.scrollable-small::-webkit-scrollbar:horizontal {
+  height: 5px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.scrollable-small::-webkit-scrollbar-thumb {
+  background-color: colors.$primary-500;
+  border-radius: variables.$radius-sm;
+}

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

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