@cauca-911/material 21.0.1 → 21.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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