@cauca-911/material 21.0.1-beta.3 → 21.0.1-beta.5

package/src/lib/components/misc/loading-error/loading-error.component.spec.ts

@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingErrorComponent } from './loading-error.component';
+import { signal } from '@angular/core';
+import { MockComponent, ngMocks } from 'ng-mocks';
+import { SnackBarComponent } from '../snack-bar/snack-bar.component';
+import { By } from '@angular/platform-browser';
+import { LoadingStateService } from '../../../core/loading-state.service';
+
+describe('LoadingErrorComponent', () => {
+  let component: LoadingErrorComponent;
+  let fixture: ComponentFixture<LoadingErrorComponent>;
+  let loadingService: any;
+
+  beforeEach(async () => {
+    loadingService = { showError: signal(false) };
+    await TestBed.configureTestingModule({
+      declarations: [
+        MockComponent(SnackBarComponent),
+      ],
+      imports: [
+        LoadingErrorComponent
+      ],
+      providers: [
+        { provide: LoadingStateService, useValue: loadingService },
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(LoadingErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show the error if there is not any', () => {
+    loadingService.showError.set(false);
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-snackbar'))).toBeNull();
+  });
+
+  it('should show the error when it is one', () => {
+    loadingService.showError.set(true);
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-snackbar'))).not.toBeNull();
+  });
+
+  it('should have the snackbar correctly configured', () => {
+    loadingService.showError.set(true);
+    fixture.detectChanges();
+
+    const snack = ngMocks.find<SnackBarComponent>('cauca-snackbar').componentInstance;
+    expect(snack.caption).toBe('generalError.loadingErrorAlertTitle');
+    expect(snack.type).toBe('error');
+    expect(snack.variant).toBe('standard');
+    expect(snack.showButton).toBeTrue();
+    expect(snack.buttonLabel).toBe('generalError.retryButtonLabel');
+  });
+
+  it('should emit a retry request event when clicking on the snackbar button', () => {
+    loadingService.showError.set(true);
+    fixture.detectChanges();
+    const snack = ngMocks.find<SnackBarComponent>('cauca-snackbar').componentInstance;
+    const spy = spyOn(component.retryRequest, 'emit');
+
+    snack.buttonClick.emit();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/components/misc/loading-error/loading-error.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, inject, Output } from '@angular/core';
+import { SnackBarComponent } from '../snack-bar/snack-bar.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { LoadingStateService } from '../../../core/loading-state.service';
+
+@Component({
+  selector: 'cauca-loading-error',
+  standalone: true,
+  imports: [SnackBarComponent, TranslateModule],
+  templateUrl: './loading-error.component.html',
+  styleUrl: './loading-error.component.scss'
+})
+export class LoadingErrorComponent {
+  @Output() public retryRequest: EventEmitter<void> = new EventEmitter<void>();
+
+  public readonly loadingState = inject(LoadingStateService);
+  public showError = this.loadingState.showError;
+}

package/src/lib/components/misc/loading-spinner-indicator/loading-spinner-indicator.component.html

@@ -0,0 +1,3 @@
+@if (loadingState.showLoadingIndicator()) {
+    <mat-progress-spinner mode="indeterminate"  [diameter]="diameter()" />
+}

package/src/lib/components/misc/loading-spinner-indicator/loading-spinner-indicator.component.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingSpinnerIndicatorComponent } from './loading-spinner-indicator.component';
+import { signal } from '@angular/core';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { ngMocks } from 'ng-mocks';
+import { LoadingStateService } from '../../../core/loading-state.service';
+
+describe('LoadingSpinnerIndicatorComponent', () => {
+  let component: LoadingSpinnerIndicatorComponent;
+  let fixture: ComponentFixture<LoadingSpinnerIndicatorComponent>;
+  let loadingStateService: any;
+
+  beforeEach(async () => {
+    loadingStateService = {
+      showLoadingIndicator: signal(true)
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [LoadingSpinnerIndicatorComponent],
+      providers: [
+        { provide: LoadingStateService, useValue: loadingStateService },
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoadingSpinnerIndicatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set correct diameter to mat-progress-input', () => {
+    fixture.componentRef.setInput('diameter', 50);
+
+    fixture.detectChanges();
+
+    expect(ngMocks.find(MatProgressSpinner).componentInstance.diameter).toBe(50);
+  });
+});

package/src/lib/components/misc/loading-spinner-indicator/loading-spinner-indicator.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, inject, input, InputSignal } from '@angular/core';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { LoadingStateService } from '../../../core/loading-state.service';
+
+@Component({
+    selector: 'cauca-loading-spinner-indicator',
+    standalone: true,
+    imports: [MatProgressSpinner],
+    templateUrl: './loading-spinner-indicator.component.html',
+    styleUrl: './loading-spinner-indicator.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoadingSpinnerIndicatorComponent {
+  public diameter: InputSignal<number> = input(100);
+  public loadingState = inject(LoadingStateService);
+}

package/src/lib/components/misc/snack-bar/snack-bar.component.html

@@ -0,0 +1,16 @@
+<div class="container" [class]="appearanceClasses()">
+
+    <div class="icon-container">
+        <mat-icon>{{icon()}}</mat-icon>
+    </div>
+
+    <div class="text-container">
+        <div class="title alert-title">{{caption()|translate}}</div>
+        <div class="message body2"><ng-content></ng-content></div>
+    </div>
+
+    @if (showButton()) {<cauca-stroked-button [color]="buttonColor()" [label]="buttonLabel()" (click)="buttonClick.emit()" onkeypress="buttonClick.emit()" [isInProgress]="inProgress()" [icon]="buttonIcon()" />}
+
+    @if (showCloseButton()) {<cauca-icon-button icon="close" (click)="closeClick.emit()" onkeypress="closeClick.emit()" />}
+
+</div>

package/src/lib/components/misc/snack-bar/snack-bar.component.scss

@@ -0,0 +1,84 @@
+.info {
+    --darkBackgroundColor: #0288D1;
+    --lightBackgroundColor: #E5F6FD;
+    --lightColor: white;
+    --darkColor: #014361;
+}
+
+.warning {
+    --darkBackgroundColor: #ED6C02;
+    --lightBackgroundColor: #FFF4E5;
+    --lightColor: white;
+    --darkColor: #663C00;
+}
+
+.success {
+    --darkBackgroundColor: #2E7D32;
+    --lightBackgroundColor: #EDF7ED;
+    --lightColor: white;
+    --darkColor: #1E4620;
+}
+
+.error {
+    --darkBackgroundColor: #D32F2F;
+    --lightBackgroundColor: #FDEDED;
+    --lightColor: white;
+    --darkColor: #5F2120;
+}
+
+.filled {
+    --textColor: var(--lightColor);
+    --iconColor: var(--lightColor);
+    background-color: var(--darkBackgroundColor);
+}
+
+.standard,.outlined {
+    --textColor: var(--darkColor);
+    --iconColor: var(--darkBackgroundColor);
+}
+
+.container {
+    display: flex;
+    padding: 6px 16px;
+    align-items: flex-start;
+    border-radius: 4px;
+}
+
+.text-container {
+    display: flex;
+    padding: 8px 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    flex: 1 0 0;
+}
+
+.icon-container {
+    display: flex;
+    padding: 7px 12px 7px 0px;
+    align-items: flex-start;
+    mat-icon {
+        color: var(--iconColor);
+    }
+}
+
+.message {
+    color: var(--textColor);
+}
+
+.title {
+    color: var(--textColor);
+}
+
+.standard {
+    background-color: var(--lightBackgroundColor);
+}
+
+.outlined {
+    background-color: transparent;
+    border: 1px solid var(--darkBackgroundColor);
+}
+
+.standard .outlined {
+    color: var(--darkColor);
+}

package/src/lib/components/misc/snack-bar/snack-bar.component.spec.ts

@@ -0,0 +1,136 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnackBarComponent } from './snack-bar.component';
+import { MockComponents, MockPipe, ngMocks } from 'ng-mocks';
+import { By } from '@angular/platform-browser';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+import { TranslatePipe } from '@ngx-translate/core';
+
+describe('SnackBarComponent', () => {
+  let component: SnackBarComponent;
+  let fixture: ComponentFixture<SnackBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnackBarComponent],
+      declarations: [
+        ...MockComponents(
+          StrokedButtonComponent, IconButtonComponent
+        ),
+        MockPipe(TranslatePipe, key => key),
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SnackBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should generate appearance classes from type and variant', () => {
+    fixture.componentRef.setInput('variant', 'filled');
+    fixture.componentRef.setInput('type', 'error');
+
+    fixture.detectChanges();
+    const container = fixture.debugElement.query(By.css('.container'));
+    expect(container.nativeElement.classList.contains('error')).toBe(true);
+    expect(container.nativeElement.classList.contains('filled')).toBe(true);
+  });
+
+  it('should have white button when variant is filled', () => {
+    fixture.componentRef.setInput('variant', 'filled');
+    fixture.componentRef.setInput('type', 'error');
+    fixture.componentRef.setInput('showButton', true);
+
+    fixture.detectChanges();
+
+    expect(component.buttonColor()).toBe('white');
+    expect(ngMocks.find<StrokedButtonComponent>('cauca-stroked-button').componentInstance.color).toBe('white');
+  });
+
+  it('should have white button when variant is not filled', () => {
+    fixture.componentRef.setInput('variant', 'standard');
+    fixture.componentRef.setInput('type', 'error');
+    fixture.componentRef.setInput('showButton', true);
+
+    fixture.detectChanges();
+
+    expect(component.buttonColor()).toBeUndefined();
+    expect(ngMocks.find<StrokedButtonComponent>('cauca-stroked-button').componentInstance.color).toBeUndefined();
+  });
+
+  it('should display specified icon', async() => {
+    fixture.componentRef.setInput('icon', 'test');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('mat-icon').textContent).toBe('test');
+  });
+
+  it('should correctly display the title', () => {
+    fixture.componentRef.setInput('caption', 'test');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.title.alert-title').textContent).toBe('test');
+  });
+
+  it('should not display the button if showButton is false', () => {
+    fixture.componentRef.setInput('showButton', false);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-stroked-button'))).toBeNull();
+  });
+
+  it('should display the button with the right label if showButton is true', () => {
+    fixture.componentRef.setInput('showButton', true);
+    fixture.componentRef.setInput('buttonLabel', 'test');
+
+    fixture.detectChanges();
+
+    const button = ngMocks.find<StrokedButtonComponent>('cauca-stroked-button').componentInstance;
+    expect(button.label).toBe('test');
+  });
+
+  it('should set button color to buttonSpecificColor if it is defined', () => {
+    fixture.componentRef.setInput('showButton', true);
+    fixture.componentRef.setInput('buttonSpecificColor', 'test');
+
+    fixture.detectChanges();
+
+    expect(component.buttonColor()).toBe('test');
+    expect(ngMocks.find<StrokedButtonComponent>('cauca-stroked-button').componentInstance.color).toBe('test');
+  });
+
+  it('should set button as in progress if inProgress is true', () => {
+    fixture.componentRef.setInput('showButton', true);
+    fixture.componentRef.setInput('inProgress', true);
+
+    fixture.detectChanges();
+
+    expect(ngMocks.find<StrokedButtonComponent>('cauca-stroked-button').componentInstance.isInProgress).toBeTrue();
+  });
+
+  it('should not display the close button if showCloseButton is false', () => {
+    fixture.componentRef.setInput('showCloseButton', false);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-icon-button'))).toBeNull();
+  });
+
+  it('should display the close button if showCloseButton is true', () => {
+    fixture.componentRef.setInput('showCloseButton', true);
+
+    fixture.detectChanges();
+
+    const button = ngMocks.find<IconButtonComponent>('cauca-icon-button').componentInstance;
+    expect(button).toBeDefined();
+  });
+});

package/src/lib/components/misc/snack-bar/snack-bar.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, InputSignal, Output, Signal, computed, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-snackbar',
+    imports: [MatIcon, StrokedButtonComponent, IconButtonComponent, TranslateModule],
+    templateUrl: './snack-bar.component.html',
+    styleUrl: './snack-bar.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SnackBarComponent {
+
+  public icon: InputSignal<string> = input('info_outlined');
+  public caption: InputSignal<string> = input('');
+  public showCloseButton: InputSignal<boolean> = input(false);
+  public type: InputSignal<'info'|'success'|'warning'|'error'> = input('info');
+  public variant: InputSignal<'filled'|'outlined'|'standard'> = input('standard');
+  public appearanceClasses = computed(() => [this.type(), this.variant()]);
+
+  public buttonSpecificColor = input<string>(undefined);
+  public buttonIcon = input<string>(undefined);
+  public inProgress = input<boolean>(false);
+  public showButton: InputSignal<boolean> = input(false);
+  public buttonLabel: InputSignal<string> = input('');
+
+  public buttonColor: Signal<string> = computed(() => {
+    if (this.buttonSpecificColor()) {
+      return this.buttonSpecificColor();
+    } else {
+      return this.variant() === 'filled' ? 'white' : undefined;
+    }
+  });
+
+  @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() public buttonClick: EventEmitter<void> = new EventEmitter<void>();
+}

package/src/lib/components/notifications/saving-confirmed-box/saving-confirmed-box.component.html

@@ -0,0 +1,11 @@
+@if (show()) {
+    <cauca-snackbar
+        caption="savingSuccessNotification.title"
+        type="success"
+        variant="standard"
+        [showButton]="false"
+        [showCloseButton]="true"
+        (closeClick)="show.set(false)">
+        {{'savingSuccessNotification.message' | translate}}
+    </cauca-snackbar>
+}

package/src/lib/components/notifications/saving-confirmed-box/saving-confirmed-box.component.spec.ts

@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingConfirmedBoxComponent } from './saving-confirmed-box.component';
+import { SnackBarComponent } from '../../misc/snack-bar/snack-bar.component';
+import { MockComponent, ngMocks } from 'ng-mocks';
+import { By } from '@angular/platform-browser';
+
+describe('SavingConfirmedBoxComponent', () => {
+  let component: SavingConfirmedBoxComponent;
+  let fixture: ComponentFixture<SavingConfirmedBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SavingConfirmedBoxComponent],
+      declarations: [MockComponent(SnackBarComponent)],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SavingConfirmedBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show snackbar when show is false', () => {
+    component.show.set(false);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-snackbar'))).toBeNull();
+  });
+
+  it('should show snackbar when show is true', () => {
+    component.show.set(true);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-snackbar'))).toBeTruthy();
+  });
+
+  it('should have a correctly configured snackbar', () => {
+    component.show.set(true);
+
+    fixture.detectChanges();
+
+    const snackbar = ngMocks.find(SnackBarComponent).componentInstance;
+    expect(snackbar.caption).toBe('savingSuccessNotification.title');
+    expect(snackbar.type).toBe('success');
+    expect(snackbar.variant).toBe('standard');
+    expect(snackbar.showButton).toBeFalse();
+    expect(snackbar.showCloseButton).toBeTrue();
+  });
+
+  it('should hide the snackbar when clicking the close button', () => {
+    component.show.set(true);
+    fixture.detectChanges();
+    const snackbar = ngMocks.find(SnackBarComponent);
+    snackbar.componentInstance.closeClick.emit();
+
+    fixture.detectChanges();
+
+    expect(component.show()).toBeFalse();
+  });
+});

package/src/lib/components/notifications/saving-confirmed-box/saving-confirmed-box.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { SnackBarComponent } from '../../misc/snack-bar/snack-bar.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'cauca-saving-confirmed-box',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SnackBarComponent, TranslateModule],
+  templateUrl: './saving-confirmed-box.component.html',
+  styleUrl: './saving-confirmed-box.component.scss'
+})
+export class SavingConfirmedBoxComponent {
+  public show = model<boolean>(false);
+}

package/src/lib/components/notifications/saving-error-box/saving-error-box.component.html

@@ -0,0 +1,11 @@
+@if (show()) {
+    <cauca-snackbar
+        caption="generalError.savingErrorAlertTitle"
+        type="error"
+        variant="standard"
+        [showButton]="false"
+        [showCloseButton]="true"
+        (closeClick)="show.set(false)">
+        {{error() | translate}}
+    </cauca-snackbar>
+}

package/src/lib/components/notifications/saving-error-box/saving-error-box.component.spec.ts

@@ -0,0 +1,77 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingErrorBoxComponent } from './saving-error-box.component';
+import { MockComponent, ngMocks } from 'ng-mocks';
+import { SnackBarComponent } from '../../misc/snack-bar/snack-bar.component';
+import { By } from '@angular/platform-browser';
+
+describe('SavingErrorBoxComponent', () => {
+  let component: SavingErrorBoxComponent;
+  let fixture: ComponentFixture<SavingErrorBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SavingErrorBoxComponent],
+      declarations: [MockComponent(SnackBarComponent)],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SavingErrorBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have a default error message', () => {
+    expect(component.error()).toBe('generalError.savingErrorAlertMessage');
+  });
+
+  it('should use specific error message if provided', () => {
+    fixture.componentRef.setInput('specificError', 'specific error');
+
+    expect(component.error()).toBe('specific error');
+  });
+
+  it('should not show snackbar when show is false', () => {
+    component.show.set(false);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-snackbar'))).toBeNull();
+  });
+
+  it('should show snackbar when show is true', () => {
+    component.show.set(true);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('cauca-snackbar'))).toBeTruthy();
+  });
+
+  it('should have a correctly configured snackbar', () => {
+    component.show.set(true);
+
+    fixture.detectChanges();
+
+    const snackbar = ngMocks.find(SnackBarComponent).componentInstance;
+    expect(snackbar.caption).toBe('generalError.savingErrorAlertTitle');
+    expect(snackbar.type).toBe('error');
+    expect(snackbar.variant).toBe('standard');
+    expect(snackbar.showButton).toBeFalse();
+    expect(snackbar.showCloseButton).toBeTrue();
+  });
+
+  it('should hide the snackbar when clicking the close button', () => {
+    component.show.set(true);
+    fixture.detectChanges();
+    const snackbar = ngMocks.find(SnackBarComponent);
+    snackbar.componentInstance.closeClick.emit();
+
+    fixture.detectChanges();
+
+    expect(component.show()).toBeFalse();
+  });
+});

package/src/lib/components/notifications/saving-error-box/saving-error-box.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';
+import { SnackBarComponent } from '../../misc/snack-bar/snack-bar.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'cauca-saving-error-box',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SnackBarComponent, TranslateModule],
+  templateUrl: './saving-error-box.component.html',
+  styleUrl: './saving-error-box.component.scss'
+})
+export class SavingErrorBoxComponent {
+  public show = model<boolean>(false);
+  public specificError = input<string | null>(null);
+  public error = computed(() => this.specificError() ? this.specificError() : 'generalError.savingErrorAlertMessage');
+}

package/src/lib/components/presenters/badge/badge.component.html

@@ -0,0 +1,6 @@
+<mat-chip highlighted disableRipple [color]="color()">
+    <div class="mat-chip-content">
+        <mat-icon>{{icon()}}</mat-icon>
+        <div class="chip-label">{{label() | translate}}</div>
+    </div>
+</mat-chip>

package/src/lib/components/presenters/badge/badge.component.scss

@@ -0,0 +1,10 @@
+.mat-chip-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+
+mat-icon {
+  color: inherit;
+}