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

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

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

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

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

@@ -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;
-    }
-}