@cauca-911/material 20.2.13 → 20.2.14

package/src/lib/components/inputs/dropdown-chip-autocomplete/dropdown-chip-autocomplete.component.ts

@@ -1,263 +0,0 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  ContentChild,
-  DoCheck,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  input,
-  Input,
-  OnDestroy,
-  Optional,
-  Output,
-  Self,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import { ControlValueAccessor, FormGroupDirective, FormsModule, NgControl, NgForm } from '@angular/forms';
-import { MatAutocomplete, MatAutocompleteModule, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { MatChip, MatChipGrid, MatChipInput, MatChipRemove } from '@angular/material/chips';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { toLowerCaseAndWithoutDiacritics } from '@cauca-911/core';
-import { Observable, Subject, map, startWith } from 'rxjs';
-
-@Component({
-  selector: 'cauca-dropdown-chip-autocomplete',
-  templateUrl: './dropdown-chip-autocomplete.component.html',
-  styleUrls: ['./dropdown-chip-autocomplete.component.scss'],
-  providers: [{
-    provide: MatFormFieldControl,
-    useExisting: DropdownChipAutocompleteComponent,
-  }],
-  imports: [
-    MatChipGrid,
-    MatChip,
-    MatChipRemove,
-    FormsModule,
-    MatAutocompleteModule,
-    MatChipInput,
-    MatIcon,
-    CommonModule
-  ]
-})
-export class DropdownChipAutocompleteComponent implements ControlValueAccessor, MatFormFieldControl<any[]>, OnDestroy, DoCheck {
-  @HostBinding('id')
-  public id = `cauca-dropdown-chip-autocomplete-${DropdownChipAutocompleteComponent.nextId++}`;
-
-  @ViewChild('auto') public matAutocomplete: MatAutocomplete;
-  @ViewChild('chipInput') public matChipInput: ElementRef<HTMLInputElement>;
-  @ViewChild(MatAutocompleteTrigger) public matAutocompletePanel: MatAutocompleteTrigger;
-  @Output() public clearAll: EventEmitter<void> = new EventEmitter<void>();
-  @Input() public listAutoComplete: object[] = [];
-  @Input() public keyValue = 'id';
-  @Input() public displayValue = 'name';
-  @Input() public allowRemove = true;
-  @Input() public ariaDescribedBy: string;
-  public canRemoveAll = input(true);
-  public hasOptionTemplate = input<boolean>(false);
-  @ContentChild(TemplateRef) public optionTemplate: TemplateRef<any>;
-
-  public stateChanges = new Subject<void>();
-  public static nextId = 0;
-  public focused = false;
-  public touched = false;
-  public errorState = false;
-  public controlType = 'dropdown-chip-autocomplete';
-  public separatorKeysCodes: any = ',';
-  public filteredListAutoComplete: Observable<object[]>;
-
-  private _required = false;
-  private _disabled = false;
-  private _placeholder: string;
-  private _searchValue: string = null;
-  private selectedValues: any[] = [];
-
-  public get searchValue(): string {
-    return this._searchValue;
-  }
-
-  public set searchValue(newValue: string) {
-    if (this._searchValue !== newValue && (typeof newValue === 'string') || newValue===null) {
-      this._searchValue = newValue;
-      this.stateChanges.next();
-    }
-  }
-
-  @HostBinding('class.floating')
-  public get shouldLabelFloat() {
-    return this.focused || !this.empty || !!this._searchValue;
-  }
-
-  @Input()
-  public get value(): any[] {
-    return this.selectedValues;
-  }
-  public set value(values: any[]) {
-    this.selectedValues = values;
-    this.onChange(this.selectedValues);
-    this.stateChanges.next();
-  }
-
-  @Input()
-  public get required(): boolean {
-    return this._required;
-  }
-  public set required(req: BooleanInput) {
-    this._required = coerceBooleanProperty(req);
-    this.stateChanges.next();
-  }
-
-  @Input()
-  public get disabled(): boolean {
-    return this._disabled;
-  }
-  public set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-    this.stateChanges.next();
-  }
-
-  public get empty() {
-    return !this.selectedValues?.length;
-  }
-
-  @Input()
-  public get placeholder() {
-    return this._placeholder;
-  }
-  public set placeholder(plh) {
-    this._placeholder = plh;
-    this.stateChanges.next();
-  }
-
-  public constructor(
-    @Optional() @Self() public ngControl: NgControl,
-    @Optional() private readonly parentForm: NgForm,
-    @Optional() private readonly parentFormGroup: FormGroupDirective,
-    private readonly elementRef: ElementRef<HTMLElement>,
-  ) {
-    elementRef.nativeElement.addEventListener('focusin', this.onFocusIn.bind(this));
-    elementRef.nativeElement.addEventListener('focusout', this.onFocusOut.bind(this));
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-
-    this.filteredListAutoComplete = this.stateChanges.pipe(
-      startWith(null),
-      map(() => this.filterSelectedItem())
-    );
-  }
-
-  public ngDoCheck() {
-    if (this.ngControl) {
-      this.updateErrorState();
-    }
-  }
-
-  public ngOnDestroy() {
-    this.stateChanges.complete();
-  }
-
-  public onChange = (_: any): void => {
-    // Do nothing for now
-  };
-  public onTouched = (): void => {
-    // Do nothing for now
-  };
-
-  public onFocusIn() {
-    if (!this.focused) {
-      this.focused = true;
-      this.stateChanges.next();
-    }
-  }
-
-  public markAsClean(): void {
-    this.touched = false;
-    this.focused = false;
-    this.stateChanges.next();
-  }
-
-  public onFocusOut(event: FocusEvent) {
-    if (!this.elementRef.nativeElement.contains(event.relatedTarget as Element)) {
-      this.touched = true;
-      this.focused = false;
-      this.onTouched();
-      this.stateChanges.next();
-    }
-  }
-
-  public setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  public setDescribedByIds(ids: string[]) {
-    const controlElement = this.elementRef.nativeElement.querySelector('.dropdown-chip-autocomplete-container');
-    controlElement.setAttribute('aria-describedby', ids.join(' '));
-  }
-
-  public onContainerClick(event: MouseEvent) {
-    if ((event.target as Element).tagName.toLowerCase() != 'input') {
-      this.elementRef.nativeElement.querySelector('input').focus();
-    }
-    this.searchValue = null;
-  }
-
-  public writeValue(value: string[] | []): void {
-    this.value = value;
-  }
-
-  public registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  public selectItemOnAutocomplete(e: MatAutocompleteSelectedEvent): void {
-    this.value = [].concat(this.selectedValues, e.option.value);
-    this.matChipInput.nativeElement.value = '';
-  }
-
-  public removeSelectedItem(key: any): void {
-    const index = this.selectedValues.indexOf(key);
-
-    if (index >= 0) {
-      this.selectedValues.splice(index, 1);
-      this.value = this.selectedValues;
-    }
-  }
-
-  public getValueDisplay(key: any): string {
-    const selectedItem = this.listAutoComplete.find((item: object) => `${item[this.keyValue]}` === `${key}`);
-    return selectedItem ? selectedItem[this.displayValue] : '';
-  }
-
-  public onClearAll(): void {
-    this.matAutocompletePanel.closePanel();
-    this.value = [];
-    this.clearAll.emit();
-  }
-
-  private updateErrorState() {
-    const parent = this.parentFormGroup || this.parentForm;
-    const oldState = this.errorState;
-
-    const newState = (this.ngControl?.invalid) && (this.touched || parent.submitted);
-    if (oldState !== newState) {
-      this.errorState = newState;
-    }
-  }
-
-  private filterSelectedItem(): object[] {
-    const searchValue = toLowerCaseAndWithoutDiacritics(this.searchValue);
-    const filtered = this.listAutoComplete.filter((item: object) =>
-      !this.selectedValues.includes(item[this.keyValue])
-      && toLowerCaseAndWithoutDiacritics(item[this.displayValue]).includes(searchValue));
-    return filtered;
-  }
-
-}

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

@@ -1,6 +0,0 @@
-@if (condition()) {
-<mat-icon [ngClass]="disabled() ? 'disabled' : ''" class="green">check_circle</mat-icon>
-}@else {
-<mat-icon [ngClass]="disabled() ? 'disabled' : ''" class="red">cancel</mat-icon>
-}
-<label [ngClass]="disabled() ? 'disabled' : ''" class="body2" translate>{{label()}}</label>

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

@@ -1,27 +0,0 @@
-:host {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-mat-icon {
-  flex-shrink: 0;
-}
-
-.green {
-    fill: #81C784;
-    color: #81C784;
-}
-
-.red {
-    fill: #E57373;
-    color: #E57373;
-}
-
-label {
-    color: #000;
-}
-
-.disabled {
-    opacity: 0.5;
-}

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

@@ -1,90 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PasswordCriteriaComponent } from './password-criteria.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatIconHarness } from '@angular/material/icon/testing';
-import { MockDirective, MockModule, ngMocks } from 'ng-mocks';
-import { TranslateDirective, TranslateModule } from '@ngx-translate/core';
-import { By } from '@angular/platform-browser';
-import { MatIcon } from '@angular/material/icon';
-
-describe('PasswordCriteriaComponent', () => {
-  let component: PasswordCriteriaComponent;
-  let fixture: ComponentFixture<PasswordCriteriaComponent>;
-  let loader: HarnessLoader;
-
-  const someLabel = 'A label!';
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PasswordCriteriaComponent,
-        MockModule(TranslateModule)
-      ],
-      declarations: [
-        MockDirective(TranslateDirective)
-      ]
-    })
-      .compileComponents();
-    
-    fixture = TestBed.createComponent(PasswordCriteriaComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('label', someLabel);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should show check circle icon when condition is met', async () => {
-    fixture.componentRef.setInput('condition', true);
-    fixture.detectChanges();
-
-    const icons = await loader.getAllHarnesses(MatIconHarness);
-
-    expect(icons.length).toBe(1);
-    expect(await icons[0].getName()).toBe('check_circle');
-  });
-
-  it('should show cancel icon when condition is not met', async () => {
-    fixture.componentRef.setInput('condition', false);
-    fixture.detectChanges();
-
-    const icons = await loader.getAllHarnesses(MatIconHarness);
-
-    expect(icons.length).toBe(1);
-    expect(await icons[0].getName()).toBe('cancel');
-  });
-
-  it('should show label', () => {
-    const label = fixture.debugElement.query(By.css('label'));
-
-    expect(label.properties.innerText).toBe(someLabel);
-  });
-
-  it('should disable icon and label when receiving disable and condition is false', async () => {
-    fixture.componentRef.setInput('disabled', true);
-    fixture.componentRef.setInput('condition', false);
-    fixture.detectChanges();
-
-    const icon = ngMocks.find<MatIcon>('mat-icon');
-    const label = ngMocks.find<HTMLLabelElement>('label');
-
-    expect(icon.classes.disabled).toBeDefined();
-    expect(label.classes.disabled).toBeDefined();
-  });
-
-  it('should disable icon and label when receiving disable and condition is true', async () => {
-    fixture.componentRef.setInput('disabled', true);
-    fixture.componentRef.setInput('condition', true);
-    fixture.detectChanges();
-
-    const icon = ngMocks.find<MatIcon>('mat-icon');
-    const label = ngMocks.find<HTMLLabelElement>('label');
-
-    expect(icon.classes.disabled).toBeDefined();
-    expect(label.classes.disabled).toBeDefined();
-  });
-});

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

@@ -1,17 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, InputSignal, input } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'cauca-password-criteria',
-  standalone: true,
-  imports: [MatIconModule, TranslateModule, NgClass],
-  templateUrl: './password-criteria.component.html',
-  styleUrl: './password-criteria.component.scss'
-})
-export class PasswordCriteriaComponent {
-  public label: InputSignal<string> = input.required<string>();
-  public condition: InputSignal<boolean> = input(false);
-  public disabled: InputSignal<boolean> = input(false);
-}

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

@@ -1,5 +0,0 @@
-<cauca-password-criteria [disabled]="disabled()" label="passwordEdition.minimumCharacters" [condition]="passwordValidation().hasMinimumCharacters"/>
-<cauca-password-criteria [disabled]="disabled()" label="passwordEdition.minimumOneNumeric" [condition]="passwordValidation().hasMinimumNumeric"/>
-<cauca-password-criteria [disabled]="disabled()" label="passwordEdition.minimumOneSpecialCharacter" [condition]="passwordValidation().hasSpecialCharacter"/>
-<cauca-password-criteria [disabled]="disabled()" label="passwordEdition.needLowerAndUppercase" [condition]="passwordValidation().hasLowerAndUppercase"/>
-<cauca-password-criteria [disabled]="disabled()" label="passwordEdition.equalPasswords" [condition]="passwordValidation().hasIdenticalPassword"/>

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

@@ -1,8 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-
-    > * {
-        flex-grow: 1;
-    }
-}

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

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

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

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

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