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

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

@@ -0,0 +1,40 @@
+<div role="group" class="dropdown-chip-autocomplete-container">
+
+  <mat-chip-grid #chipGrid [disabled]="disabled">
+
+    @for (key of value; track key) {
+      <mat-chip highlighted [disabled]="disabled" (removed)="removeSelectedItem(key)" color="primary">
+        {{getValueDisplay(key)}}
+        @if (allowRemove) {
+          <mat-icon matChipRemove>cancel</mat-icon>
+        }
+      </mat-chip>
+    }
+
+    <div class="input-wrapper">
+      <input
+        #chipInput
+        [(ngModel)]="searchValue"
+        [matAutocomplete]="auto"
+        [matChipInputFor]="chipGrid"
+        [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+      @if (value.length > 0 && canRemoveAll()) {
+        <mat-icon matPrefix class="clearAll" (click)="onClearAll();">clear</mat-icon>
+      }
+      <mat-icon matSuffix>arrow_drop_down</mat-icon>
+    </div>
+  </mat-chip-grid>
+
+  <mat-autocomplete #auto="matAutocomplete" panelWidth="500px" [class.full-width-field]="optionTemplate" (optionSelected)="selectItemOnAutocomplete($event)">
+    @for (item of filteredListAutoComplete | async; track item) {
+      <mat-option [value]="item[keyValue]" class="full-width-option">
+        @if (optionTemplate) {
+          <ng-container *ngTemplateOutlet="optionTemplate; context: {data: item}" />
+        } @else {
+          {{item[displayValue]}}
+        }
+      </mat-option>
+    }
+  </mat-autocomplete>
+</div>
+

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

@@ -0,0 +1,39 @@
+span {
+    opacity: 0;
+    transition: opacity 200ms;
+}
+
+:host.floating span {
+    opacity: 1;
+}
+
+:host {
+    cursor: pointer;
+
+    mat-icon {
+        align-self: center;
+        color: var(--mat-select-enabled-arrow-color);
+    }
+
+    input.mat-mdc-chip-input {
+        flex: 1;
+    }
+}
+
+.input-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.input-wrapper > input {
+  flex: 1;
+  min-width: 150px;
+}
+
+.input-wrapper > mat-icon {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,135 @@
+import { ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
+import { DropdownChipAutocompleteComponent } from './dropdown-chip-autocomplete.component';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { FormsModule } from '@angular/forms';
+
+describe('DropdownChipAutocompleteComponent', () => {
+  let component: DropdownChipAutocompleteComponent;
+  let fixture: ComponentFixture<DropdownChipAutocompleteComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        DropdownChipAutocompleteComponent,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatIconModule,
+        FormsModule
+      ]
+    });
+    fixture = TestBed.createComponent(DropdownChipAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call "onChange" when an item is selected from autocomplete', () => {
+    spyOn(component, 'onChange');
+    const event = {
+      option: { value: 'test 2' }
+    } as MatAutocompleteSelectedEvent;
+
+    component.selectItemOnAutocomplete(event);
+
+    expect(component.onChange).toHaveBeenCalled();
+  });
+
+  it('should call "onChange" when an item is removed from autocomplete', () => {
+    spyOn(component, 'onChange');
+    component.value = ['test'];
+    component.removeSelectedItem(0);
+
+    expect(component.onChange).toHaveBeenCalled();
+  });
+
+  it('should clear all value when "clear" beside the "arrow_drop_down" is click', () => {
+    spyOn(component, 'onClearAll');
+    component.value = ['test'];
+    fixture.detectChanges();
+
+    const clearAllIcon = fixture.nativeElement.querySelector('.clearAll');
+    clearAllIcon.click();
+
+    expect(component.onClearAll).toHaveBeenCalled();
+  });
+
+  it('should not display the remove all button when the props is false', () => {
+    fixture.componentRef.setInput('canRemoveAll', false);
+    component.value = ['test'];
+    fixture.detectChanges();
+
+    const clearAllIcon = fixture.nativeElement.querySelector('.clearAll');
+    expect(clearAllIcon).toBeNull();
+  });
+
+  it('should filter datasource when filter is changed', fakeAsync(() => {
+    component.keyValue = 'id';
+    component.displayValue = 'text';
+    component.listAutoComplete = [
+      { id: '1', 'text': 'Patate' },
+      { id: '2', 'text': 'Chou' },
+      { id: '3', 'text': 'Hibou' },
+      { id: '4', 'text': 'Genou' }
+    ];
+
+    component.searchValue = 'Pat';
+
+    flush();
+
+    expect(component.searchValue).toBe('Pat');
+    component.filteredListAutoComplete.subscribe(filteredList => {
+      expect(filteredList.length).toBe(1);
+      expect(filteredList[0]).toBe(component.listAutoComplete[0]);
+    });
+  }));
+
+  it('should display everything when filter has been cleared', fakeAsync(() => {
+    component.keyValue = 'id';
+    component.displayValue = 'text';
+    component.listAutoComplete = [
+      { id: '1', 'text': 'Patate' },
+      { id: '2', 'text': 'Chou' },
+      { id: '3', 'text': 'Hibou' },
+      { id: '4', 'text': 'Genou' }
+    ];
+    component.searchValue = 'Pat';
+    flush();
+
+    component.searchValue = '';
+    flush();
+
+    expect(component.searchValue).toBe('');
+    component.filteredListAutoComplete.subscribe(filteredList => {
+      expect(filteredList.length).toBe(component.listAutoComplete.length);
+      expect(filteredList[0]).toBe(component.listAutoComplete[0]);
+    });
+  }));
+
+  it('should not labelFloat when empty', () => {
+    expect(component.shouldLabelFloat).toBeFalsy();
+  });
+
+  it('should labelFloat when not empty', () => {
+    component.value = ['123'];
+
+    expect(component.shouldLabelFloat).toBeTruthy();
+  });
+
+  it('should not labelFloat when there is no search value', () => {
+    component.searchValue = '';
+
+    expect(component.shouldLabelFloat).toBeFalsy();
+  });
+
+  it('should labelFloat when there is a search value', () => {
+    component.searchValue = 'a';
+
+    expect(component.shouldLabelFloat).toBeTruthy();
+  });
+
+});

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

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

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

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

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

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

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

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