@cauca-911/material 20.2.13 → 20.2.15

package/src/lib/components/inputs/password/password-input/password-input.component.spec.ts

@@ -1,141 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PasswordInputComponent } from './password-input.component';
-import { MockComponent, MockModule, MockPipe } from 'ng-mocks';
-import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-import { By } from '@angular/platform-browser';
-import { MatIcon } from '@angular/material/icon';
-
-describe('PasswordInputComponent', () => {
-  let component: PasswordInputComponent;
-  let fixture: ComponentFixture<PasswordInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PasswordInputComponent,
-        MockModule(TranslateModule),
-        MockComponent(MatIcon)
-      ],
-      declarations: [
-        MockPipe(TranslatePipe, value => `${value}:translated`)
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(PasswordInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should update the value when writeValue is called', () => {
-    const value = 'test123';
-
-    component.writeValue(value);
-
-    expect(component.passwordControl.value).toEqual(value);
-  });
-
-  it('should call onChange when passwordControl value changes', () => {
-    const value = 'test123';
-    const spy = spyOn(component, 'onChange');
-
-    component.passwordControl.setValue(value);
-
-    expect(spy).toHaveBeenCalledWith(value);
-  });
-
-  it('should disable passwordControl when setDisabledState is called with true', () => {
-    component.setDisabledState(true);
-    expect(component.passwordControl.disabled).toBeTrue();
-  });
-
-  it('should enable passwordControl when setDisabledState is called with false', () => {
-    component.setDisabledState(false);
-    expect(component.passwordControl.enabled).toBeTrue();
-  });
-
-  it('should translate label when translateLabel is true', () => {
-    fixture.componentRef.setInput('translateLabel', true);
-    fixture.componentRef.setInput('label', 'PASSWORD');
-    fixture.detectChanges();
-
-    const label = fixture.debugElement.query(By.css('mat-label')).nativeElement;
-    expect(label.textContent).toBe('PASSWORD:translated');
-  });
-
-  it('should not translate label when translateLabel is false', () => {
-    fixture.componentRef.setInput('translateLabel', false);
-    fixture.componentRef.setInput('label', 'PASSWORD');
-    fixture.detectChanges();
-
-    const label = fixture.debugElement.query(By.css('mat-label')).nativeElement;
-    expect(label.textContent).toBe('PASSWORD');
-  });
-
-  it('should translate placeholder when translatePlaceholder is true', () => {
-    fixture.componentRef.setInput('translatePlaceholder', true);
-    fixture.componentRef.setInput('placeholder', 'placeholder');
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input')).nativeElement;
-    expect(input.placeholder).toBe('placeholder:translated');
-  });
-
-  it('should not translate placeholder when translatePlaceholder is false', () => {
-    fixture.componentRef.setInput('translatePlaceholder', false);
-    fixture.componentRef.setInput('placeholder', 'placeholder');
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input')).nativeElement;
-
-    expect(input.placeholder).toBe('placeholder');
-  });
-
-  it('should toggle password visibility', () => {
-    const icon = fixture.debugElement.query(By.css('mat-icon')).nativeElement;
-
-    icon.click();
-    fixture.detectChanges();
-
-    expect(fixture.debugElement.query(By.css('mat-icon')).nativeElement.textContent.trim()).toBe('visibility');
-    expect(component.showPassword()).toBeTrue();
-    expect(component.inputType()).toBe('text');
-
-    icon.click();
-    fixture.detectChanges();
-
-    expect(fixture.debugElement.query(By.css('mat-icon')).nativeElement.textContent.trim()).toBe('visibility_off');
-    expect(component.showPassword()).toBeFalse();
-    expect(component.inputType()).toBe('password');
-  });
-
-  it('should emit enterKeyDown when enter key is pressed', () => {
-    const spy = spyOn(component.enterKeyDown, 'emit');
-    const input = fixture.debugElement.query(By.css('input')).nativeElement;
-
-    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('should set required', () => {
-    fixture.componentRef.setInput('required', true);
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input')).nativeElement;
-    expect(input.required).toBeTrue();
-  });
-
-  it('should set autocomplete', () => {
-    fixture.componentRef.setInput('autocomplete', 'new-password');
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input')).nativeElement;
-    expect(input.autocomplete).toBe('new-password');
-  });
-});

package/src/lib/components/inputs/password/password-input/password-input.component.ts

@@ -1,67 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, computed, forwardRef, input, InputSignal, output, signal, WritableSignal } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'cauca-password-input',
-  standalone: true,
-  imports: [TranslateModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule],
-  templateUrl: './password-input.component.html',
-  styleUrl: './password-input.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-      useExisting: forwardRef(() => PasswordInputComponent),
-    },
-  ],
-})
-export class PasswordInputComponent implements ControlValueAccessor {
-  public autocomplete: InputSignal<string> = input<'password' | 'new-password'>('password');
-  public translateLabel: InputSignal<boolean> = input(true);
-  public label: InputSignal<string> = input();
-  public translatePlaceholder: InputSignal<boolean> = input(true);
-  public placeholder: InputSignal<string> = input();
-  public required: InputSignal<boolean> = input(false);
-  public enterKeyDown = output();
-
-  public passwordControl: FormControl = new FormControl('');
-  public disabled: WritableSignal<boolean> = signal(false);
-  public showPassword: WritableSignal<boolean> = signal(false);
-  public inputType = computed(() => this.showPassword() ? 'text' : 'password');
-
-  public constructor() {
-    this.passwordControl.valueChanges.subscribe(value => {
-      this.onChange(value);
-    });
-  }
-
-  public writeValue(value: string): void {
-    this.passwordControl.setValue(value);
-  }
-
-  public registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  public setDisabledState?(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
-    if (isDisabled) {
-      this.passwordControl.disable();
-    } else {
-      this.passwordControl.enable();
-    }
-  }
-
-  public onChange = (value: string): string => value;
-
-  public onTouched = (): void => {/* This method needs to be empty */ };
-}

package/src/lib/components/inputs/password/password-selection/password-selection.component.html

@@ -1,15 +0,0 @@
-<form [formGroup]="form" [class.full-width-form]="direction === 'column'">
-    <div class="passwords">
-        <cauca-password-input [autocomplete]="'new-password'" [label]="passwordLabel()" [translateLabel]="true" [required]="true" formControlName="password" />
-        <cauca-password-input [autocomplete]="'new-password'" [label]="passwordConfirmationLabel()" [translateLabel]="true" [required]="true" formControlName="confirmation" />
-    </div>
-    <div class="errors">
-        <ng-content></ng-content>
-    </div>
-</form>
-
-@if (showCriteria()) {
-    <cauca-password-criteria-viewer [disabled]="disabled" [passwordValidation]="passwordValidation" />
-} @else {
-    <span></span>
-}

package/src/lib/components/inputs/password/password-selection/password-selection.component.scss

@@ -1,32 +0,0 @@
-:host {
-    display: flex;
-    gap: 20px;
-}
-
-form {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-}
-
-.full-width-form {
-    width: 100%;
-}
-
-.passwords {
-    gap: 16px;
-    display: flex;
-    flex-direction: column;
-}
-
-.criteria {
-    flex-grow: 1;
-}
-
-.disabled {
-    opacity: 0.5;
-}
-
-.errors {
-    padding: 0 16px;
-}

package/src/lib/components/inputs/password/password-selection/password-selection.component.spec.ts

@@ -1,138 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PasswordSelectionComponent } from './password-selection.component';
-import { MockComponents, MockDirective, MockModule, ngMocks } from 'ng-mocks';
-import { TranslateDirective, TranslateModule } from '@ngx-translate/core';
-import { PasswordCriteriaViewerComponent } from '../password-criteria-viewer/password-criteria-viewer.component';
-import { PasswordInputComponent } from '../password-input/password-input.component';
-
-describe('PasswordSelectionComponent', () => {
-  let component: PasswordSelectionComponent;
-  let fixture: ComponentFixture<PasswordSelectionComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PasswordSelectionComponent,
-        MockModule(TranslateModule),
-        ...MockComponents(PasswordCriteriaViewerComponent, PasswordInputComponent),
-      ],
-      declarations: [
-        MockDirective(TranslateDirective)
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(PasswordSelectionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should validate password when form change', () => {
-    const somePasswordWithNumeric = '4321';
-    const somePasswordWithNumericAndSpecialCharacter = '4321#';
-
-    component.form.get('password').setValue(somePasswordWithNumeric);
-
-    expect(component.passwordValidation.hasMinimumNumeric).toBeTrue();
-    expect(component.passwordValidation.hasSpecialCharacter).toBeFalse();
-
-    component.form.get('password').setValue(somePasswordWithNumericAndSpecialCharacter);
-
-    expect(component.passwordValidation.hasMinimumNumeric).toBeTrue();
-    expect(component.passwordValidation.hasSpecialCharacter).toBeTrue();
-  });
-
-  it('should only emit full password when form is valid', () => {
-    const spy = spyOn(component, 'onChange');
-    const somePassword = 'CaucaTest4321#';
-
-    component.form.get('password').setValue(somePassword);
-    component.form.get('confirmation').setValue(somePassword);
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledOnceWith(somePassword);
-  });
-
-  it('should emit empty password when form validity change to to invalid', async () => {
-    const spy = spyOn(component, 'onChange');
-    const somePassword = 'CaucaTest4321#';
-    component.form.get('password').setValue(somePassword);
-    component.form.get('confirmation').setValue(somePassword);
-
-    expect(spy).toHaveBeenCalledOnceWith(somePassword);
-
-    const password = component.form.get('password');
-    await password.setValue('C');
-    await password.setValue('Ca');
-    await password.setValue('Cau');
-    await password.setValue('Cauc');
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledTimes(2);
-    expect(spy).toHaveBeenCalledWith('');
-  });
-
-  it('should disable input when disable is set', () => {
-    const password = component.form.get('password');
-    const confirmation = component.form.get('confirmation');
-
-    component.setDisabledState(true);
-    fixture.detectChanges();
-
-    expect(password.disabled).toBeTrue();
-    expect(confirmation.disabled).toBeTrue();
-  });
-
-  it('should not show criteria when password has no value', () => {
-    fixture.componentRef.setInput('showCriteriaOnlyWhenPasswordHasValue', true);
-    fixture.componentRef.setInput('alwaysShowCriteria', false);
-    component.form.get('password').setValue('');
-    component.form.get('confirmation').setValue('');
-    fixture.detectChanges();
-
-    expect(component.showCriteria()).toBeFalse();
-    expect(ngMocks.find('cauca-password-criteria-viewer', null)).toBeNull();
-  });
-
-  it('should show criteria when password has value', () => {
-    fixture.componentRef.setInput('showCriteriaOnlyWhenPasswordHasValue', true);
-
-    component.form.get('password').setValue('CaucaTest4321#');
-    component.form.get('confirmation').setValue('CaucaTest4321#');
-    fixture.detectChanges();
-
-    expect(component.showCriteria()).toBeTrue();
-    expect(ngMocks.find('cauca-password-criteria-viewer', null)).not.toBeNull();
-  });
-
-  it('should show criteria when alwaysShowCriteria is set to true', () => {
-    fixture.componentRef.setInput('showCriteriaOnlyWhenPasswordHasValue', true);
-    fixture.componentRef.setInput('alwaysShowCriteria', true);
-    component.form.get('password').setValue('');
-    component.form.get('confirmation').setValue('');
-    fixture.detectChanges();
-
-    expect(component.showCriteria()).toBeTrue();
-    expect(ngMocks.find('cauca-password-criteria-viewer', null)).not.toBeNull();
-  });
-
-  it('should set password label from input', () => {
-    const passwordLabel = 'newPassword';
-    fixture.componentRef.setInput('passwordLabel', passwordLabel);
-    fixture.detectChanges();
-
-    expect(component.passwordLabel()).toBe(passwordLabel);
-  });
-
-  it('should set password confirmation from input', () => {
-    const passwordConfirmationLabel = 'confirmPassword';
-    fixture.componentRef.setInput('passwordConfirmationLabel', passwordConfirmationLabel);
-    fixture.detectChanges();
-
-    expect(component.passwordConfirmationLabel()).toBe(passwordConfirmationLabel);
-  });
-});

package/src/lib/components/inputs/password/password-selection/password-selection.component.ts

@@ -1,100 +0,0 @@
-import { Component, forwardRef, HostBinding, input, Input, output, signal } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { PasswordCriteriaViewerComponent } from '../password-criteria-viewer/password-criteria-viewer.component';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms';
-import { filter } from 'rxjs';
-import { PasswordInputComponent } from '../password-input/password-input.component';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { PasswordValidation } from '../../../../core/models/password-validation';
-import { PasswordValidator } from '../../../../core/validators/password/password-validator';
-
-
-@Component({
-  selector: 'cauca-password-selection',
-  standalone: true,
-  imports: [PasswordInputComponent, FormsModule, ReactiveFormsModule, TranslateModule, PasswordCriteriaViewerComponent],
-  templateUrl: './password-selection.component.html',
-  styleUrl: './password-selection.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-      useExisting: forwardRef(() => PasswordSelectionComponent),
-    },
-  ],
-})
-export class PasswordSelectionComponent implements ControlValueAccessor {
-  public form: UntypedFormGroup;
-  public passwordValidation: PasswordValidation = new PasswordValidation();
-  public disabled: boolean = false;
-
-  @Input() @HostBinding('style.flex-direction') public direction: 'row'|'column' = 'row';
-  @Input() @HostBinding('style.form.width') public formWidth: string = '50%';
-  public showCriteriaOnlyWhenPasswordHasValue = input<boolean>(true);
-  public alwaysShowCriteria = input<boolean>(true);
-  public showCriteria = signal<boolean>(true);
-  public passwordLabel = input<string>('passwordEdition.password');
-  public passwordConfirmationLabel = input<string>('passwordEdition.passwordConfirmation');
-  public hasValueChange = output<boolean>();
-
-  private lastPasswordValidationSent = false;
-
-  public constructor(formBuilder: UntypedFormBuilder) {
-    this.form = formBuilder.group({
-      password: ['', Validators.required],
-      confirmation: ['', Validators.required]
-    }, { validators: (formGroup: UntypedFormGroup): ValidationErrors | null => {
-      this.passwordValidation = PasswordValidator.validate(formGroup);
-      if (!this.passwordValidation.isValid()) {
-        return ({ validation: this.passwordValidation});
-      }
-      return null;
-    }});
-    this.form.valueChanges.pipe(takeUntilDestroyed())
-      .subscribe(() => {
-        if (!this.alwaysShowCriteria()) {
-          if (this.showCriteriaOnlyWhenPasswordHasValue()) {
-            this.showCriteria.set(this.form.controls.password.value?.length > 0 || this.form.controls.confirmation.value?.length > 0);
-          }
-        }
-        this.hasValueChange.emit(this.form.controls.password.value?.length > 0);
-      });
-    this.form.valueChanges.pipe(takeUntilDestroyed(), filter(_ => this.form.valid != this.lastPasswordValidationSent)).subscribe(form => {
-      this.lastPasswordValidationSent = this.form.valid;
-      if (this.form.valid) {
-        this.onChange(form.password);
-      } else {
-        this.onChange('');
-      }
-    });
-  }
-
-  public writeValue(value: string): void {
-    this.form.get('password').setValue(value);
-    this.form.get('confirmation').setValue(value);
-  }
-
-  public registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  public setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    if (isDisabled) {
-      this.form.get('password').disable();
-      this.form.get('confirmation').disable();
-    } else {
-      this.form.get('password').enable();
-      this.form.get('confirmation').enable();
-    }
-  }
-
-  public onChange = (value: string): string => value;
-
-  public onTouched = (): void => {/* This method needs to be empty */ };
-
-}

package/src/lib/components/inputs/select-with-search/select-with-search.component.html

@@ -1,19 +0,0 @@
-<mat-form-field class="full-width-field header dense" subscriptSizing="dynamic">
-  <ng-content></ng-content>
-  <mat-label>{{ label | translate }}</mat-label>
-  <mat-select [(value)]="value" [disabled]="disableControl()" [class.readonly-field]="disableControl()" [multiple]="allowMultiSelection()" >
-    @if (enableSearch()) {
-      <mat-option>
-        <ngx-mat-select-search [formControl]="optionFilterControl" [placeholderLabel]="'search' | translate"
-          [noEntriesFoundLabel]="'noResult' | translate">
-        </ngx-mat-select-search>
-      </mat-option>
-    }
-    @for (option of filteredOptions.value() || []; track option) {
-      <mat-option [value]="option.id">
-        {{option.name}}
-      </mat-option>
-    }
-  </mat-select>
-
-</mat-form-field>