@cauca-911/material 21.0.1-beta.4 → 21.0.1

package/src/lib/components/presenters/badge/badge.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BadgeComponent } from './badge.component';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+describe('BadgeComponent', () => {
+  let component: BadgeComponent;
+  let fixture: ComponentFixture<BadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BadgeComponent, MockModule(TranslateModule)],
+      declarations: [MockPipe(TranslatePipe, value => value)],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(BadgeComponent);
+    fixture.componentRef.setInput('color', 'primary');
+    fixture.componentRef.setInput('label', 'readOnly');
+    fixture.componentRef.setInput('icon', 'visibility');
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the badge color', async () => {
+    expect(component.color()).toBe('primary');
+  });
+
+  it('should set the badge label', async () => {
+    expect(fixture.nativeElement.querySelector('.chip-label').textContent).toBe('readOnly');
+  });
+
+  it('should set the badge icon', async () => {
+    expect(fixture.nativeElement.querySelector('.mat-icon').textContent).toBe('visibility');
+  });
+});

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

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'cauca-badge',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule, MatChipsModule, MatIcon],
+  templateUrl: './badge.component.html',
+  styleUrl: './badge.component.scss'
+})
+export class BadgeComponent {
+  public icon = input.required<string>();
+  public label = input.required<string>();
+  public color = input<string>('primary');
+}

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

@@ -0,0 +1,9 @@
+img {
+    max-height: 40px;
+    height: 40px;
+}
+
+fa-icon {
+    max-height: 40px;
+    height: 40px;
+}

package/src/lib/components/presenters/icon/icon.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ IconComponent ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set faIcon when icon is fontawesome', () => {
+    component.icon = 'fas running';
+
+    expect(component.isFontAwesome).toBe(true);
+    expect(component.faIcon).toEqual(['fas','running']);
+  });
+
+  it('should set image when icon is not fontawesome', () => {
+    component.icon = 'aImage';
+
+    expect(component.isFontAwesome).toBe(false);
+    expect(component.image).toEqual('aImage');
+  });
+
+});

package/src/lib/components/presenters/icon/icon.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+@Component({
+  selector: 'cauca-icon',
+  standalone: true,
+  imports: [FontAwesomeModule],
+  template: `
+  @if (isFontAwesome && faIcon && faIcon.length > 0) {
+    <div class="icon">
+      <fa-icon [icon]="faIcon"></fa-icon>
+    </div>
+  }
+  @if (!isFontAwesome && image) {
+    <div class="icon">
+      <img [src]="image" alt="icon" />
+    </div>
+  }
+  `,
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent {
+  public isFontAwesome: boolean = false;
+  public faIcon: string[] = [];
+  public image: string = '';
+
+  @Input()
+  public set icon(value: string) {
+    if (value && value.indexOf(' ') > -1) {
+      this.isFontAwesome = true;
+      this.faIcon = value.split(' ');
+    } else {
+      this.isFontAwesome = false;
+      this.image = value;
+    }
+  }
+}

package/src/lib/core/breadcrumb.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { BreadcrumbService } from './breadcrumb.service';
+
+
+describe('BreadcrumbService', () => {
+  let service: BreadcrumbService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [BreadcrumbService]
+    });
+    service = TestBed.inject(BreadcrumbService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should show breadcrumb with correct values', () => {
+    const breadcrumb = 'Home';
+    const location = [{ link: '/home', title: 'Home' }];
+
+    service.show(breadcrumb,  location);
+
+    expect(service.showBreadcrumb()).toBe(true);
+    expect(service.breadcrumb()).toBe(breadcrumb);
+    expect(service.location()).toEqual(location);
+  });
+
+  it('should hide breadcrumb', () => {
+    service.hide();
+
+    expect(service.showBreadcrumb()).toBe(false);
+  });
+});

package/src/lib/core/breadcrumb.service.ts

@@ -0,0 +1,24 @@
+import { computed, Injectable, Signal, signal, WritableSignal } from '@angular/core';
+import { BreadcrumbLocation } from './models/breadcrumb-location';
+
+@Injectable()
+export class BreadcrumbService {
+  public showBreadcrumb: Signal<boolean> = computed(() => this.isShown());
+
+  public location: WritableSignal<BreadcrumbLocation[]> = signal([]);
+  public breadcrumb: WritableSignal<string> = signal('');
+  public translateBreadcrumb = signal<boolean>(false);
+
+  private readonly isShown: WritableSignal<boolean> = signal(false);
+
+  public show(breadcrumb: string, location: BreadcrumbLocation[] = [], translateBreadcrumb: boolean = true): void {
+    this.isShown.set(true);
+    this.breadcrumb.set(breadcrumb);
+    this.location.set(location);
+    this.translateBreadcrumb.set(translateBreadcrumb);
+  }
+
+  public hide(): void {
+    this.isShown.set(false);
+  }
+}

package/src/lib/core/directives/auto-trim-and-lower.directive.spec.ts

@@ -0,0 +1,22 @@
+import { ElementRef } from '@angular/core';
+import { AutoTrimAndLowerDirective } from './auto-trim-and-lower.directive';
+
+describe('AutoTrimAndLowerDirective', () => {
+  it('should create an instance', () => {
+    const element = new ElementRef({});
+    const directive = new AutoTrimAndLowerDirective(element);
+    expect(directive).toBeTruthy();
+  });
+
+  it('should trim and lowercase text on blur', () => {
+    const element = new ElementRef({
+      value: '   My@Test.Ca    '
+    });
+    const directive = new AutoTrimAndLowerDirective(element);
+
+    directive.onBlur(new KeyboardEvent(''));
+
+    expect(element.nativeElement.value).toBe('my@test.ca');
+
+  });
+});

package/src/lib/core/directives/auto-trim-and-lower.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appAutoTrimAndLower]',
+  standalone: true
+})
+export class AutoTrimAndLowerDirective {
+
+  public constructor(private readonly el: ElementRef) {}
+
+  @HostListener('blur', ['$event'])
+  public onBlur(_: KeyboardEvent) {
+    this.trimText();
+  }
+
+  private trimText() {
+    this.el.nativeElement.value = this.el.nativeElement.value?.trim().toLowerCase();
+  }
+}

package/src/lib/core/directives/form-error/form-error.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HasErrorRootDirective } from './has-error-root.directive';
+import { HasErrorDirective } from './has-error.directive';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    HasErrorDirective,
+    HasErrorRootDirective
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    HasErrorDirective,
+    HasErrorRootDirective
+  ],
+})
+export class FormErrorModule { }

package/src/lib/core/directives/form-error/has-error-root.directive.ts

@@ -0,0 +1,31 @@
+import { ContentChild, Directive } from '@angular/core';
+import { FormControl, FormControlDirective, FormControlName } from '@angular/forms';
+import { ReplaySubject } from 'rxjs';
+
+@Directive({
+  /* eslint-disable @angular-eslint/directive-selector */
+  selector: 'mat-form-field',
+  /* eslint-enable @angular-eslint/directive-selector */
+  standalone: false,
+})
+export class HasErrorRootDirective {
+  private readonly _formControl$ = new ReplaySubject<FormControl>(1);
+
+  @ContentChild(FormControlDirective)
+  public set formControl(formControlDirective: FormControlDirective) {
+    if (formControlDirective) {
+      this._formControl$.next(formControlDirective.control);
+    }
+  }
+
+  @ContentChild(FormControlName)
+  public set formControlName(formControlName: FormControlName) {
+    if (formControlName) {
+      this._formControl$.next(formControlName.control);
+    }
+  }
+
+  public get formControl$() {
+    return this._formControl$.asObservable();
+  }
+}

package/src/lib/core/directives/form-error/has-error.directive.ts

@@ -0,0 +1,95 @@
+import {
+  AfterContentInit,
+  Directive,
+  EmbeddedViewRef,
+  Input,
+  OnDestroy,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+import {
+  combineLatest,
+  distinctUntilChanged,
+  EMPTY,
+  map,
+  ReplaySubject,
+  startWith,
+  Subscription,
+  switchMap,
+} from 'rxjs';
+import { HasErrorRootDirective } from './has-error-root.directive';
+
+export interface HasErrorContext {
+    $implicit: any;
+  }
+
+  @Directive({
+    selector: '[hasError]',
+    standalone: false,
+  })
+export class HasErrorDirective implements AfterContentInit, OnDestroy {
+
+  private readonly errorName$ = new ReplaySubject<string>(1);
+  private readonly ctrl$ = this.hasErrorRoot.formControl$;
+  private readonly status$ = this.ctrl$.pipe(
+    switchMap((ctrl) => (ctrl.statusChanges || EMPTY).pipe(startWith(null)))
+  );
+
+  private readonly error$ = combineLatest([
+    this.ctrl$,
+    this.errorName$,
+    this.status$,
+  ]).pipe(
+    map(([ctrl, errorName]) => ({
+      hasError: ctrl.hasError(errorName),
+      value: ctrl.getError(errorName),
+    })),
+    distinctUntilChanged(
+      (x, y) => x.hasError === y.hasError && x.value === y.value
+    )
+  );
+
+  private view?: EmbeddedViewRef<HasErrorContext>;
+  private subscription?: Subscription;
+
+    @Input()
+  public set hasError(errorName: string) {
+    this.errorName$.next(errorName);
+  }
+
+    public constructor(
+      private readonly hasErrorRoot: HasErrorRootDirective,
+      private readonly templateRef: TemplateRef<HasErrorContext>,
+      private readonly vcr: ViewContainerRef
+    ) {
+    }
+
+    public static ngTemplateContextGuard(_dir: HasErrorDirective, ctx: unknown): ctx is HasErrorContext {
+      return true;
+    }
+
+    public ngAfterContentInit(): void {
+      setTimeout(() => {
+        this.subscription = this.error$.subscribe((error) => {
+          if (!error.hasError) {
+            this.view?.destroy();
+            this.view = undefined;
+            return;
+          }
+
+          if (this.view) {
+            this.view.context.$implicit = error.value;
+            this.view.markForCheck();
+            return;
+          }
+          this.view = this.vcr.createEmbeddedView(this.templateRef, {
+            $implicit: error.value,
+          });
+        });
+      }, 100);
+    }
+
+    public ngOnDestroy(): void {
+      this.subscription?.unsubscribe();
+    }
+}

package/src/lib/core/loading-state.service.spec.ts

@@ -0,0 +1,57 @@
+
+import { catchError, delay, mergeMap, of, throwError } from 'rxjs';
+import { LoadingStateService } from './loading-state.service';
+import { fakeAsync, tick } from '@angular/core/testing';
+
+describe('LoadingStateService', () => {
+  let service: LoadingStateService;
+
+  beforeEach(() => {
+    service = new LoadingStateService();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should change showLoadingIndicator to true when calling showLoading', () => {
+    service.showLoading();
+
+    expect(service.showLoadingIndicator()).toBeTrue();
+  });
+
+  it('should change showLoadingIndicator to true when calling showLoading', () => {
+    service.showLoading();
+    service.hideLoading();
+
+    expect(service.showLoadingIndicator()).toBeFalse();
+  });
+
+  it('should show indicator until observable has completed', fakeAsync(() => {
+    const mockResult = 'test complete!';
+    const observable$ = of(mockResult).pipe(delay(2));
+
+    service.withLoadingIndicator(observable$)
+      .subscribe(result => expect(result).toBe(mockResult));
+
+    tick(1);
+    expect(service.showLoadingIndicator()).toBeTrue();
+    tick(2000);
+    expect(service.showLoadingIndicator()).toBeFalse();
+  }));
+
+  it('should set showError to true when an error occure while executing and observable', fakeAsync(() => {
+    const mockError = new Error('The bird hit the fan.');
+    const observableWithError$ = of('test')
+      .pipe(mergeMap(() => throwError(() => mockError)));
+    const spy = spyOn(window.console, 'error');
+
+    service.withLoadingIndicator(observableWithError$)
+      .pipe(catchError(() => 'test complete'))
+      .subscribe();
+    tick();
+
+    expect(service.showError()).toBeTrue();
+    expect(spy).toHaveBeenCalledOnceWith('Could not load data.', mockError);
+  }));
+});

package/src/lib/core/loading-state.service.ts

@@ -0,0 +1,44 @@
+import { Injectable, Signal, WritableSignal, computed, signal } from '@angular/core';
+import { Observable, catchError, finalize, mergeMap, of, tap, throwError } from 'rxjs';
+
+@Injectable()
+export class LoadingStateService {
+
+  public showLoadingIndicator: Signal<boolean> = computed(() => this.isLoading());
+  public showError: Signal<boolean> = computed(() => this.hasError());
+
+  private readonly isLoading: WritableSignal<boolean> = signal(false);
+  private readonly hasError: WritableSignal<boolean> = signal(false);
+
+  public showLoading(): void {
+    this.isLoading.set(true);
+  }
+
+  public hideLoading(): void {
+    this.isLoading.set(false);
+  }
+
+  public withLoadingIndicator<T>(observable$: Observable<T>): Observable<T> {
+    return of(null).pipe(
+        tap(() => this.startLoading()),
+        mergeMap(() => observable$),
+        catchError((error) => this.handleError(error)),
+        finalize(() => this.hideLoading()),
+      );
+  }
+
+  public setAsInError(): void {
+    this.hasError.set(true);
+  }
+
+  private startLoading(): void {
+    this.hasError.set(false);
+    this.showLoading();
+  }
+
+  private handleError(error: any): Observable<never> {
+    console.error('Could not load data.', error);
+    this.hasError.set(true);
+    return throwError(() => error);
+  }
+}

package/src/lib/core/models/breadcrumb-location.ts

@@ -0,0 +1,6 @@
+export class BreadcrumbLocation {
+  public link?: string;
+  public title: string;
+  public translate?: boolean = false;
+  public action?: () => void;
+}

package/src/lib/core/models/password-validation.ts

@@ -0,0 +1,20 @@
+export class PasswordValidation {
+  public hasMinimumCharacters: boolean;
+  public hasMinimumNumeric: boolean;
+  public hasLowerAndUppercase: boolean;
+  public hasSpecialCharacter: boolean;
+  public hasIdenticalPassword: boolean;
+
+  public constructor(hasMinimumCharacters: boolean = false, hasMinimumNumeric: boolean = false, hasLowerAndUppercase: boolean = false, hasSpecialCharacter: boolean = false, hasIdenticalPassword: boolean = false) {
+    this.hasMinimumCharacters = hasMinimumCharacters;
+    this.hasMinimumNumeric = hasMinimumNumeric;
+    this.hasLowerAndUppercase = hasLowerAndUppercase;
+    this.hasSpecialCharacter = hasSpecialCharacter;
+    this.hasIdenticalPassword = hasIdenticalPassword;
+  }
+
+  public isValid(): boolean {
+    return this.hasMinimumCharacters && this.hasMinimumNumeric && this.hasLowerAndUppercase && this.hasSpecialCharacter && this.hasIdenticalPassword;
+  }
+
+}

package/src/lib/core/validators/password/password-validator.spec.ts

@@ -0,0 +1,155 @@
+import { PasswordValidator } from './password-validator';
+import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+
+describe('PasswordValidator', () => {
+  it('should create an instance', () => {
+    expect(new PasswordValidator()).toBeTruthy();
+  });
+
+  it('should return invalid password when password does not have upper case', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('apasswordwithoutuppercase'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasLowerAndUppercase).toBe(false);
+  });
+
+  it('should return valid password when password have upper and lower case', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('Apassword'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasLowerAndUppercase).toBe(true);
+  });
+
+  it('should return invalid password when password does not have lower case', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('APASSWORDWITHOUTLOWERCASE'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasLowerAndUppercase).toBe(false);
+  });
+
+  it('should return valid password when password have numeric value', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('123'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasMinimumNumeric).toBe(true);
+  });
+
+  it('should return invalid password when password does not have numeric value', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('apasswordwithoutuppercase'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasMinimumNumeric).toBe(false);
+  });
+
+  it('should return invalid password when password does not have special character', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('apasswordwithoutuppercase'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasSpecialCharacter).toBe(false);
+  });
+
+  it('should return valid password when password have special character', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('&!aPassword'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasSpecialCharacter).toBe(true);
+  });
+
+  it('should return invalid password when password does not enough characters', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('test1'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasMinimumCharacters).toBe(false);
+  });
+
+  it('should return valid password when password has enough characters', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('aPasswordWithMoreThan8characters'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasMinimumCharacters).toBe(true);
+  });
+
+  it('should return valid password when password has exactly 13 characters', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('apasswordTest'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasMinimumCharacters).toBe(true);
+  });
+
+  it('should return invalid password when passwords are not equal', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('test1'),
+      confirmation: new UntypedFormControl('')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasIdenticalPassword).toBe(false);
+  });
+
+  it('should return valid password when passwords are equal', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('test1'),
+      confirmation: new UntypedFormControl('test1')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasIdenticalPassword).toBe(true);
+  });
+
+  it('should return valid password when every criteria is valid', () => {
+    const formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl('!TestCauca123'),
+      confirmation: new UntypedFormControl('!TestCauca123')
+    });
+
+    const errors = PasswordValidator.validate(formGroup);
+
+    expect(errors.hasIdenticalPassword).toBe(true);
+    expect(errors.hasLowerAndUppercase).toBe(true);
+    expect(errors.hasMinimumNumeric).toBe(true);
+    expect(errors.hasSpecialCharacter).toBe(true);
+    expect(errors.hasMinimumCharacters).toBe(true);
+  });
+});