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

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

@@ -0,0 +1,98 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordCriteriaViewerComponent } from './password-criteria-viewer.component';
+import { MockComponent, ngMocks } from 'ng-mocks';
+import { PasswordCriteriaComponent } from '../password-criteria/password-criteria.component';
+import { PasswordValidation } from '../../../../core/models/password-validation';
+
+describe('PasswordCriteriaViewerComponent', () => {
+  let component: PasswordCriteriaViewerComponent;
+  let fixture: ComponentFixture<PasswordCriteriaViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PasswordCriteriaViewerComponent, MockComponent(PasswordCriteriaComponent)]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PasswordCriteriaViewerComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('passwordValidation', new PasswordValidation());
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display criteria component for each password criteria', () => {
+    const criterias = ngMocks.findAll<PasswordCriteriaComponent>('cauca-password-criteria');
+
+    expect(criterias.length).toBe(5);
+  });
+
+  it('should display minimum character has first criteria and send condition', () => {
+    const criterias = ngMocks.findAll<PasswordCriteriaComponent>('cauca-password-criteria');
+    const criteria = criterias[0].componentInstance;
+
+    const passwordValidation = new PasswordValidation();
+    passwordValidation.hasMinimumCharacters = true;
+    fixture.componentRef.setInput('passwordValidation', passwordValidation);
+    fixture.detectChanges();
+
+    expect(criteria.label).toBe('passwordEdition.minimumCharacters');
+    expect(criteria.condition).toBe(true);
+  });
+
+
+  it('should display minimum numeric has second criteria and send condition', () => {
+    const criterias = ngMocks.findAll<PasswordCriteriaComponent>('cauca-password-criteria');
+    const criteria = criterias[1].componentInstance;
+
+    const passwordValidation = new PasswordValidation();
+    passwordValidation.hasMinimumNumeric = true;
+    fixture.componentRef.setInput('passwordValidation', passwordValidation);
+    fixture.detectChanges();
+
+    expect(criteria.label).toBe('passwordEdition.minimumOneNumeric');
+    expect(criteria.condition).toBe(true);
+  });
+
+  it('should display minimum special character has third criteria and send condition', () => {
+    const criterias = ngMocks.findAll<PasswordCriteriaComponent>('cauca-password-criteria');
+    const criteria = criterias[2].componentInstance;
+
+    const passwordValidation = new PasswordValidation();
+    passwordValidation.hasSpecialCharacter = true;
+    fixture.componentRef.setInput('passwordValidation', passwordValidation);
+    fixture.detectChanges();
+
+    expect(criteria.label).toBe('passwordEdition.minimumOneSpecialCharacter');
+    expect(criteria.condition).toBe(true);
+  });
+
+  it('should display minimum upper and lowercase has fourth criteria and send condition', () => {
+    const criterias = ngMocks.findAll<PasswordCriteriaComponent>('cauca-password-criteria');
+    const criteria = criterias[3].componentInstance;
+
+    const passwordValidation = new PasswordValidation();
+    passwordValidation.hasLowerAndUppercase = true;
+    fixture.componentRef.setInput('passwordValidation', passwordValidation);
+    fixture.detectChanges();
+
+    expect(criteria.label).toBe('passwordEdition.needLowerAndUppercase');
+    expect(criteria.condition).toBe(true);
+  });
+
+  it('should display identical password has fifth criteria and send condition', () => {
+    const criterias = ngMocks.findAll<PasswordCriteriaComponent>('cauca-password-criteria');
+    const criteria = criterias[4].componentInstance;
+
+    const passwordValidation = new PasswordValidation();
+    passwordValidation.hasIdenticalPassword = true;
+    fixture.componentRef.setInput('passwordValidation', passwordValidation);
+    fixture.detectChanges();
+
+    expect(criteria.label).toBe('passwordEdition.equalPasswords');
+    expect(criteria.condition).toBe(true);
+  });
+});

package/src/lib/components/inputs/password/password-criteria-viewer/password-criteria-viewer.component.ts

@@ -0,0 +1,16 @@
+import { Component, InputSignal, input } from '@angular/core';
+import { PasswordCriteriaComponent } from '../password-criteria/password-criteria.component';
+import { PasswordValidation } from '../../../../core/models/password-validation';
+
+
+@Component({
+  selector: 'cauca-password-criteria-viewer',
+  standalone: true,
+  imports: [PasswordCriteriaComponent],
+  templateUrl: './password-criteria-viewer.component.html',
+  styleUrl: './password-criteria-viewer.component.scss'
+})
+export class PasswordCriteriaViewerComponent {
+  public passwordValidation: InputSignal<PasswordValidation> = input.required();
+  public disabled: InputSignal<boolean> = input(false);
+}

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

@@ -0,0 +1,11 @@
+<mat-form-field subscriptSizing="dynamic">
+    @if(translateLabel()) {<mat-label>{{label() | translate}}</mat-label>}
+    @else {<mat-label>{{label()}}</mat-label>}
+    <input (keydown.enter)="enterKeyDown.emit()" [autocomplete]="autocomplete()" #password class="password"
+        [type]="inputType()" [formControl]="passwordControl" matInput [required]="required()"
+        [placeholder]="translatePlaceholder() ? (placeholder() | translate) : placeholder()" />
+    <mat-icon [ngClass]="disabled() ? 'disabled' : ''" style="cursor: pointer" matSuffix
+        (click)="showPassword.set(!showPassword())">
+        {{ password.type === "password" ? "visibility_off" : "visibility" }}
+    </mat-icon>
+</mat-form-field>

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

@@ -0,0 +1,12 @@
+:host {
+    width: 100%;
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+
+.disabled {
+    opacity: 0.5;
+}

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

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

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

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

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

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

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, 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',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  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 = signal<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.set(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

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