@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ius-design-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@litigiovirtual/ius-design-styles"
+  ]
+}

package/package.json

@@ -1,28 +1,18 @@
-{
-  "name": "@litigiovirtual/ius-design-components",
-  "version": "1.0.264",
-  "peerDependencies": {
-    "@angular/cdk": ">=17.0.0 <20.0.0",
-    "@angular/common": ">=17.0.0 <20.0.0",
-    "@angular/core": ">=17.0.0 <20.0.0",
-    "@lottiefiles/lottie-player": "^2.0.12"
-  },
-  "dependencies": {
-    "@litigiovirtual/ius-design-styles": "^1.0.17",
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/litigiovirtual-ius-design-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/litigiovirtual-ius-design-components.mjs",
-      "esm": "./esm2022/litigiovirtual-ius-design-components.mjs",
-      "default": "./fesm2022/litigiovirtual-ius-design-components.mjs"
-    }
-  }
-}
+{
+  "name": "@litigiovirtual/ius-design-components",
+  "version": "1.0.267",
+  "peerDependencies": {
+    "@angular/cdk": ">=17.0.0 <20.0.0",
+    "@angular/common": ">=17.0.0 <20.0.0",
+    "@angular/core": ">=17.0.0 <20.0.0",
+    "@lottiefiles/lottie-player": "^2.0.12"
+  },
+  "dependencies": {
+    "@litigiovirtual/ius-design-styles": "^1.0.17",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/cdk": "17.3.10"
+  },
+  "sideEffects": false
+}

package/src/lib/alert/alert.component.html

@@ -0,0 +1,19 @@
+<ng-template #modalTpl>
+  <div class="modal">
+    <h3 class="title">{{ title }}</h3>
+
+    <ius-simple-divider></ius-simple-divider>
+
+    <p class="msg">{{ text }}</p>
+
+    <div class="actions">
+      <ius-button-standard-secondary (buttonClicked)="onClickLeftButton()">{{
+        leftButtonName
+      }}</ius-button-standard-secondary>
+      <ius-button-dynamic
+        [labelDefault]="rightButtonName"
+        (buttonClicked)="onClickRightButton()"
+      ></ius-button-dynamic>
+    </div>
+  </div>
+</ng-template>

package/src/lib/alert/alert.component.scss

@@ -0,0 +1,47 @@
+@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;
+
+
+.modal {
+  background: #fff;
+  border-radius: 16px;
+  padding: 18px;
+  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  max-width: 450px;
+}
+
+.title {
+  color: semantic-colors.$color-text-primary-on-light;
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-h4;
+  font-style: normal;
+  font-weight: typography.$font-weight-bold;
+  line-height: typography.$line-height-h4;
+  letter-spacing: 0.2px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+.msg {
+  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-regular;
+  line-height: typography.$line-height-base;
+  letter-spacing: 0.28px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+.actions {
+  display: flex;
+  padding: variables.$spacing-xs variables.$spacing-md;
+  justify-content: space-evenly;
+  gap: variables.$spacing-xxs;
+}

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

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

package/src/lib/alert/alert.component.ts

@@ -0,0 +1,73 @@
+import { Overlay, OverlayModule, OverlayRef } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { ButtonDynamicComponent } from "../button-dynamic";
+import { ButtonStandardSecondaryComponent } from "../button-standard-secondary";
+import { SimpleDividerComponent } from "../simple-divider";
+import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
+
+
+@Component({
+  selector: 'ius-alert',
+  standalone: true,
+  imports: [OverlayModule, CommonModule, PortalModule, ButtonStandardSecondaryComponent, ButtonDynamicComponent, SimpleDividerComponent],
+  templateUrl: './alert.component.html',
+  styleUrl: './alert.component.scss'
+})
+export class AlertComponent {
+  @ViewChild('modalTpl', { static: true }) modalTpl!: TemplateRef<any>;
+
+  @Input() title = 'Título del Popup';
+  @Input() text = 'Texto';
+  @Input() leftButtonName = 'Cancelar';
+  @Input() rightButtonName = 'Confirmar';
+  
+  @Output() onRightButtonClick: EventEmitter<void> = new EventEmitter<any>();
+  @Output() onLeftButtonClick: EventEmitter<void> = new EventEmitter<any>();
+
+  private overlayRef?: OverlayRef;
+
+  constructor(
+    private overlay: Overlay,
+    private vcr: ViewContainerRef
+  ) { }
+
+  ngAfterViewInit(): void {
+    const positionStrategy = this.overlay.position()
+      .global()
+      .centerHorizontally()
+      .centerVertically();
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-dark-backdrop',
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+      panelClass: 'modal-alerta',
+      disposeOnNavigation: true,
+    });
+
+    const portal = new TemplatePortal(this.modalTpl, this.vcr);
+    this.overlayRef.attach(portal);
+
+    this.overlayRef.keydownEvents().subscribe((ev) => {
+      if (ev.key === 'Escape') this.onClickLeftButton();
+    });
+  }
+
+  onClickLeftButton(): void {
+    this.overlayRef?.dispose();
+    this.overlayRef = undefined;
+    this.onLeftButtonClick.emit();
+  }
+
+  onClickRightButton(): void {
+    this.overlayRef?.dispose();
+    this.overlayRef = undefined;
+    this.onRightButtonClick.emit();
+  }
+
+  ngOnDestroy(): void {
+    this.onClickLeftButton();
+  }
+}

package/src/lib/alert/index.ts

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

package/src/lib/avatar-business/avatar-business.component.html

@@ -0,0 +1,39 @@
+<div
+  class="avatar-business"
+  [ngClass]="[size, shape]"
+>
+  @if (imageUrl && imageUrl !== '') {
+    <img [src]="imageUrl" [alt]="label || 'avatar'" class="avatar-business__image" />
+  } @else if (label) {
+    <span class="body-large avatar-business__label">{{ label }}</span>
+  } @else {
+    @switch (size) {
+      @case ('xs') {
+        <ius-icon-xs class="icon" [iconName]="fallbackIconName"></ius-icon-xs>
+      }
+      @case ('sm') {
+        <ius-icon-sm class="icon" [iconName]="fallbackIconName"></ius-icon-sm>
+      }
+      @case ('md') {
+        <ius-icon-md class="icon" [iconName]="fallbackIconName"></ius-icon-md>
+      }
+      @case ('lg') {
+        <ius-icon-lg class="icon" [iconName]="fallbackIconName"></ius-icon-lg>
+      }
+      @case ('xl') {
+        <ius-icon-xl class="icon" [iconName]="fallbackIconName"></ius-icon-xl>
+      }
+      @case ('xxl') {
+        <ius-icon-xxl class="icon" [iconName]="fallbackIconName"></ius-icon-xxl>
+      }
+    }
+  }
+
+  @if (showEditButton) {
+    <div class="avatar-business__edit-overlay" (click)="onEditClick($event)">
+      <div class="avatar-business__edit-btn">
+        <ius-icon-sm iconName="icon-edit"></ius-icon-sm>
+      </div>
+    </div>
+  }
+</div>

package/src/lib/avatar-business/avatar-business.component.scss

@@ -0,0 +1,89 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+
+$avatar-sizes: (
+  xs: 14px,
+  sm: 24px,
+  md: 32px,
+  lg: 40px,
+  xl: 64px,
+  xxl: 96px,
+);
+
+:host {
+  display: inline-block;
+}
+
+.avatar-business {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #EDF6FF;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &.circle {
+    border-radius: 50%;
+  }
+
+  &.square {
+    border-radius: variables.$radius-md;
+  }
+
+  @each $size, $value in $avatar-sizes {
+    &.#{$size} {
+      width: $value;
+      height: $value;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  &__label {
+    color: var(--ColorText-colorTextPrimary, #333);
+    user-select: none;
+  }
+
+  &__edit-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f5f5f5;
+    border: 0.5px solid var(--Stroke, #EAEAEA);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    cursor: pointer;
+
+    &:active {
+      background-color: #fafafa;
+    }
+  }
+
+  &__edit-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background-color: colors.$neutral-white;
+    color: colors.$neutral-10;
+    pointer-events: none;
+  }
+
+  &:hover .avatar-business__edit-overlay {
+    opacity: 1;
+  }
+}
+
+.icon {
+  color: #C4DFFF;
+}

package/src/lib/avatar-business/avatar-business.component.spec.ts

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

package/src/lib/avatar-business/avatar-business.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconXsComponent } from '../icon-xs';
+import { IconSmComponent } from '../icon-sm';
+import { IconMdComponent } from '../icon-md';
+import { IconLgComponent } from '../icon-lg';
+import { IconXlComponent } from '../icon-xl';
+import { IconXxlComponent } from '../icon-xxl';
+
+export type AvatarBusinessSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarBusinessShape = 'circle' | 'square';
+
+@Component({
+  selector: 'ius-avatar-business',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IconXsComponent,
+    IconSmComponent,
+    IconMdComponent,
+    IconLgComponent,
+    IconXlComponent,
+    IconXxlComponent,
+  ],
+  templateUrl: './avatar-business.component.html',
+  styleUrl: './avatar-business.component.scss',
+})
+export class AvatarBusinessComponent {
+  @Input() imageUrl?: string;
+  @Input() label?: string;
+  @Input() size: AvatarBusinessSize = 'md';
+  @Input() shape: AvatarBusinessShape = 'circle';
+  @Input() showEditButton: boolean = false;
+  @Input() fallbackIconName: string = 'icon-business-center';
+
+  @Output() editClicked = new EventEmitter<void>();
+
+  onEditClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.editClicked.emit();
+  }
+}

package/src/lib/avatar-business/index.ts

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

package/src/lib/avatar-icon/avatar-icon.component.html

@@ -0,0 +1,20 @@
+<div class="avatar" [ngClass]="size" [ngStyle]="{'background-color': backgroundColor}">
+    @if (imageUrl) {
+        <img [src]="imageUrl" alt="avatar" />
+    } @else {
+        @switch (size) {
+            @case('sm') {
+            <ius-icon-xs [iconName]="iconName" [color]="iconColor"></ius-icon-xs>
+            }
+            @case('md') {
+            <ius-icon-sm [iconName]="iconName" [color]="iconColor"></ius-icon-sm>
+            }
+            @case('lg') {
+            <ius-icon-md [iconName]="iconName" [color]="iconColor"></ius-icon-md>
+            }
+            @case('xl') {
+            <ius-icon-xl [iconName]="iconName" [color]="iconColor"></ius-icon-xl>
+            }
+        }
+    }
+</div>

package/src/lib/avatar-icon/avatar-icon.component.scss

@@ -0,0 +1,29 @@
+$avatar-sizes: (
+  sm: 24px,
+  md: 32px,
+  lg: 40px,
+  xl: 64px
+);
+
+.avatar {
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  // Se utiliza para recibir el tamaño dinamico del componente circular
+  @each $size, $value in $avatar-sizes {
+    &.#{$size} {
+      width: $value;
+      height: $value;
+    }
+  }
+}

package/src/lib/avatar-icon/avatar-icon.component.spec.ts

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

package/src/lib/avatar-icon/avatar-icon.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { IconXsComponent } from "../icon-xs";
+import { IconSmComponent } from '../icon-sm';
+import { IconMdComponent } from "../icon-md";
+import { IconXlComponent } from "../icon-xl";
+
+
+@Component({
+  selector: 'ius-avatar-icon',
+  standalone: true,
+  imports: [CommonModule, IconXsComponent, IconSmComponent, IconMdComponent, IconXlComponent],
+  templateUrl: './avatar-icon.component.html',
+  styleUrl: './avatar-icon.component.scss'
+})
+export class AvatarIconComponent {
+  @Input() size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  
+  @Input() imageUrl?: string;
+
+  @Input() backgroundColor: string = 'grey';
+  @Input() iconName: string = 'icon-comment';
+  @Input() iconColor: string = 'grey';
+}

package/src/lib/avatar-icon/index.ts

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

package/src/lib/avatar-v2/avatar-v2.component.html

@@ -0,0 +1,41 @@
+<div
+  class="avatar"
+  [ngClass]="[size, shape]"
+  [class.has-image]="imageUrl && imageUrl !== ''"
+  [ngStyle]="containerStyle"
+>
+  @if (imageUrl && imageUrl !== '') {
+    <img [src]="imageUrl" [alt]="name || 'avatar'" class="avatar__image" />
+  } @else if (initials) {
+    <span class="body-large" style="color: var(--ColorText-colorTextPrimary, #333);">{{ initials }}</span>
+  } @else {
+    @switch (size) {
+      @case ('xs') {
+        <ius-icon-xs class="icon" [iconName]="fallbackIconName"></ius-icon-xs>
+      }
+      @case ('sm') {
+        <ius-icon-sm class="icon" [iconName]="fallbackIconName"></ius-icon-sm>
+      }
+      @case ('md') {
+        <ius-icon-md class="icon" [iconName]="fallbackIconName"></ius-icon-md>
+      }
+      @case ('lg') {
+        <ius-icon-lg class="icon" [iconName]="fallbackIconName"></ius-icon-lg>
+      }
+      @case ('xl') {
+        <ius-icon-xl class="icon" [iconName]="fallbackIconName"></ius-icon-xl>
+      }
+      @case ('xxl') {
+        <ius-icon-xxl class="icon" [iconName]="fallbackIconName"></ius-icon-xxl>
+      }
+    }
+  }
+
+  @if (showEditButton) {
+    <div class="avatar__edit-overlay" (click)="onEditClick($event)">
+      <div class="avatar__edit-btn">
+        <ius-icon-sm iconName="icon-edit"></ius-icon-sm>
+      </div>
+    </div>
+  }
+</div>

package/src/lib/avatar-v2/avatar-v2.component.scss

@@ -0,0 +1,107 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+
+$avatar-sizes: (
+  xs: 14px,
+  sm: 24px,
+  md: 32px,
+  lg: 40px,
+  xl: 64px,
+  xxl: 96px,
+);
+
+$avatar-font-sizes: (
+  sm: 10px,
+  md: 12px,
+  lg: 14px,
+  xl: 22px,
+  xxl: 34px,
+);
+
+:host {
+  display: inline-block;
+}
+
+.avatar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: colors.$info-100;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &.circle {
+    border-radius: 50%;
+  }
+
+  &.square {
+    border-radius: variables.$radius-md;
+  }
+
+  @each $size, $value in $avatar-sizes {
+    &.#{$size} {
+      width: $value;
+      height: $value;
+    }
+  }
+
+  // @each $size, $fz in $avatar-font-sizes {
+  //   &.#{$size} .avatar__initials {
+  //     font-size: $fz;
+  //   }
+  // }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  // &__initials {
+  //   font-family: typography.$font-primary;
+  //   font-weight: typography.$font-weight-medium;
+  //   color: colors.$primary-500;
+  //   line-height: 1;
+  //   user-select: none;
+  // }
+
+  &__edit-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--Info-Color-Info-200, #C4DFFF);
+    opacity: 0;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+    cursor: pointer;
+  }
+
+  &.has-image .avatar__edit-overlay {
+    backdrop-filter: blur(2px);
+    background: rgba(255, 255, 255, 0.20);
+  }
+
+  &__edit-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background-color: colors.$neutral-white;
+    color: colors.$neutral-10;
+    pointer-events: none;
+  }
+
+  &:hover .avatar__edit-overlay {
+    opacity: 1;
+  }
+}
+
+.icon {
+  color: #C4DFFF;
+}