@cauca-911/material 20.2.13 → 20.2.15

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

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

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

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

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

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