@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-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();
-  });
-});