@cauca-911/material 20.2.12 → 20.2.13

package/src/lib/components/inputs/color-picker/color-picker.component.ts

@@ -0,0 +1,111 @@
+import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, Optional, Output, Self } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ColorPickerDirective } from 'ngx-color-picker';
+import { Subject } from 'rxjs';
+
+@Component({
+    selector: 'cauca-color-picker',
+    imports: [MatInputModule, ColorPickerDirective],
+    templateUrl: './color-picker.component.html',
+    styleUrl: './color-picker.component.scss',
+    providers: [{
+            provide: MatFormFieldControl,
+            useExisting: ColorPickerComponent,
+        }]
+})
+export class ColorPickerComponent implements ControlValueAccessor, MatFormFieldControl<string>, OnDestroy {
+
+  public stateChanges = new Subject<void>();
+  public static nextId = 0;
+
+  @HostBinding()public id = `example-tel-input-${ColorPickerComponent.nextId++}`;
+  public placeholder: string;
+  public focused: boolean = false;
+  public touched = false;
+  public required: boolean;
+  public disabled: boolean;
+  public errorState: boolean;
+  public controlType?: string;
+  public autofilled?: boolean;
+  public userAriaDescribedBy?: string;
+  @Output() public valueChanged = new EventEmitter<string>();
+  private _value: string;
+  @HostBinding('class.floating')
+  public get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  public get empty() {
+    return !this._value?.length;
+  }
+
+  @Input()
+  public get value(): string | null {
+    return this._value;
+  }
+
+  public set value(newValue: string | null) {
+    this._value = newValue;
+    this.onChange(this._value);
+    this.stateChanges.next();
+  }
+
+  public constructor(
+    private elementRef: ElementRef<HTMLElement>,
+    @Optional() @Self() public ngControl: NgControl) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+    elementRef.nativeElement.addEventListener('focusin', this.onFocusIn.bind(this));
+    elementRef.nativeElement.addEventListener('focusout', this.onFocusOut.bind(this));
+  }
+
+  public onFocusIn(_: FocusEvent) {
+    if (!this.focused) {
+      this.focused = true;
+      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 ngOnDestroy(): void {
+    this.stateChanges.complete();
+  }
+  public setDescribedByIds(_: string[]): void {
+    // Do nothing for now
+  }
+  public onContainerClick(_: MouseEvent): void {
+    // Do nothing for now
+  }
+  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 onChange = (_: any): void => {
+    // Do nothing for now
+  };
+  public onTouched = (): void => {
+    // Do nothing for now
+  };
+
+  public onChangeColor(color: string): void {
+    this.value = color;
+  }
+}

package/src/lib/components/inputs/date-range-picker/date-range-picker.component.html

@@ -0,0 +1,13 @@
+<mat-form-field class="full-width-field" subscriptSizing="dynamic">
+  <mat-datepicker-toggle matPrefix (click)="clear()" onkeypress="clear()">
+    <mat-icon matDatepickerToggleIcon>clear</mat-icon>
+  </mat-datepicker-toggle>
+    <mat-label>{{'dateRangeSelectorLabel'|translate}}</mat-label>
+    <mat-date-range-input [formGroup]="form" [rangePicker]="campaignOnePicker">
+      <input matStartDate formControlName="from" [readOnly]="true">
+      <input matEndDate formControlName="to" [readOnly]="true">
+    </mat-date-range-input>
+    <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker">
+    </mat-datepicker-toggle>
+    <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+  </mat-form-field>

package/src/lib/components/inputs/date-range-picker/date-range-picker.component.spec.ts

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateRangePickerComponent } from './date-range-picker.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatDateRangeInputHarness } from '@angular/material/datepicker/testing';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+describe('DateRangePickerComponent', () => {
+  let component: DateRangePickerComponent;
+  let fixture: ComponentFixture<DateRangePickerComponent>;
+  let harness: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DateRangePickerComponent, MockModule(TranslateModule)],
+      declarations: [MockPipe(TranslatePipe, value => value),],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(DateRangePickerComponent);
+    harness = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not have a range selected by default', () => {
+    expect(component.range()).toEqual({ from: null, to: null });
+  });
+
+  it('should update form from date when date picker changes', async () => {
+    const selectedDate = new Date();
+    const picker = await harness.getHarness(MatDateRangeInputHarness);
+    const input = await picker.getStartInput();
+
+    await input.setValue(selectedDate.toUTCString());
+
+    expect(component.form.value.from).not.toBeNull();
+  });
+
+  it('should update form to date when date picker changes', async () => {
+    const selectedDate = new Date();
+    const picker = await harness.getHarness(MatDateRangeInputHarness);
+    const input = await picker.getEndInput();
+
+    await input.setValue(selectedDate.toUTCString());
+
+    expect(component.form.value.to).not.toBeNull();
+  });
+
+  it('should clear the form when clear is called', async () => {
+    const selectedDate = new Date();
+    const picker = await harness.getHarness(MatDateRangeInputHarness);
+    const input = await picker.getStartInput();
+
+    await input.setValue(selectedDate.toUTCString());
+    expect(component.form.value.from).not.toBeNull();
+
+    component.clear();
+    expect(component.form.value.from).toBeNull();
+  });
+
+  it('should emit new range when form changes', async () => {
+    const selectedDate = new Date();
+    const picker = await harness.getHarness(MatDateRangeInputHarness);
+    const input = await picker.getStartInput();
+
+    await input.setValue(selectedDate.toUTCString());
+    expect(component.range()).toEqual({ from: component.form.value.from, to: null });
+
+    const toInput = await picker.getEndInput();
+    await toInput.setValue(selectedDate.toUTCString());
+    expect(component.range()).toEqual({ from: component.form.value.from, to: component.form.value.to });
+  });
+});

package/src/lib/components/inputs/date-range-picker/date-range-picker.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, model, OnInit } from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'cauca-date-range-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatFormFieldModule, MatDatepickerModule, ReactiveFormsModule, MatIcon, TranslateModule],
+  templateUrl: './date-range-picker.component.html',
+  styleUrl: './date-range-picker.component.scss',
+  providers: [provideNativeDateAdapter()]
+})
+export class DateRangePickerComponent implements OnInit {
+  public range = model<DateRange>({ from: null, to: null });
+
+  public readonly form = new FormGroup({
+    from: new FormControl(null),
+    to: new FormControl(null)
+  });
+
+  public constructor() {
+    this.form.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe(value => this.range.set({ from: value.from, to: value.to }));
+  }
+
+  public ngOnInit(): void {
+    this.form.patchValue(this.range());
+  }
+
+  public clear(): void {
+    this.form.patchValue({ from: null, to: null });
+  }
+
+}
+
+export interface DateRange {
+  from: Date|null,
+  to: Date|null
+}

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();
+  });
+
+});