@cauca-911/material 20.2.12 → 20.2.13

package/src/lib/components/dialogs/dialog-styles.scss

@@ -0,0 +1,9 @@
+@media (max-width: 500px) {
+  ::ng-deep .dialog-global-style {
+    max-width: 100vw !important;
+  }
+}
+
+::ng-deep .dialog-global-style {
+  margin: auto !important;
+}

package/src/lib/components/dialogs/error-dialog/error-dialog.component.html

@@ -0,0 +1,10 @@
+<div mat-dialog-title>
+    <div class="h6">{{('errorDialog.titleError' | translate)}}</div>
+    <cauca-icon-button id="closeButton" (buttonClick)="closeClick()" icon="close"/>
+</div>
+<div mat-dialog-content>
+    <p>{{('errorDialog.messageError' | translate:{itemName})}}</p>
+</div>
+<mat-dialog-actions align="end">
+    <cauca-raised-button id="okButton" label="ok" color="warn" (buttonClick)="closeClick()"/>
+</mat-dialog-actions>

package/src/lib/components/dialogs/error-dialog/error-dialog.component.scss

@@ -0,0 +1,10 @@
+@use "../dialog-styles";
+
+:host > div:first-child {
+    display: flex;
+    align-items: center;
+
+    div:first-child {
+        flex: 1;
+    }
+}

package/src/lib/components/dialogs/error-dialog/error-dialog.component.spec.ts

@@ -0,0 +1,91 @@
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+
+import { ErrorDialogComponent } from './error-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { of } from 'rxjs';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+describe('ErrorDialogComponent', () => {
+  let component: ErrorDialogComponent;
+  let fixture: ComponentFixture<ErrorDialogComponent>;
+  let mockMatDialog: jasmine.SpyObj<MatDialogRef<any>>;
+  let breakpointObserverMock: jasmine.SpyObj<BreakpointObserver>;
+
+  beforeEach(async () => {
+    breakpointObserverMock = jasmine.createSpyObj('BreakpointObserver', ['observe']);
+    breakpointObserverMock.observe.and.returnValue(of({ matches: true, breakpoints: {} }));
+
+    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close', 'addPanelClass', 'updateSize']);
+    await TestBed.configureTestingModule({
+      declarations: [
+        ...MockComponents(IconButtonComponent, RaisedButtonComponent),
+        MockPipe(TranslatePipe, value => value),
+      ],
+      imports: [
+        ErrorDialogComponent,
+        MockModule(TranslateModule)
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: mockMatDialog },
+        { provide: MAT_DIALOG_DATA, useValue: [] },
+        { provide: BreakpointObserver, useValue: breakpointObserverMock },
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ErrorDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initially add a global style class', () => {
+    expect(mockMatDialog.addPanelClass).toHaveBeenCalledWith('dialog-global-style');
+  });
+
+  it('should update dialog size when breakpoint matches', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: true, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(ErrorDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('100vw');
+  }));
+
+  it('should update dialog size when breakpoint does not match', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: false, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(ErrorDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('auto');
+  }));
+
+  it('should close dialog when pressing close', async () => {
+    const closeButton = ngMocks.find<IconButtonComponent>('#closeButton', null)?.componentInstance;
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalled();
+  });
+
+  it('should close dialog when pressing ok', async () => {
+    const cancelButton = ngMocks.find<RaisedButtonComponent>('#okButton', null)?.componentInstance;
+
+    cancelButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalled();
+  });
+
+});

package/src/lib/components/dialogs/error-dialog/error-dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { DeleteDialogData } from '../delete-dialog/models/delete-dialog-data';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+@Component({
+  selector: 'cauca-error-dialog',
+  templateUrl: './error-dialog.component.html',
+  styleUrls: ['./error-dialog.component.scss'],
+  standalone: true,
+  imports: [MatDialogModule, TranslateModule, RaisedButtonComponent, IconButtonComponent]
+})
+export class ErrorDialogComponent {
+  public itemName: string = '';
+
+  public constructor(
+    public dialogRef: MatDialogRef<ErrorDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteDialogData,
+    breakdownObserver: BreakpointObserver) {
+    this.itemName = data.name ? data.name : '';
+    dialogRef.addPanelClass("dialog-global-style");
+    breakdownObserver.observe('(max-width: 500px)').pipe(takeUntilDestroyed()).subscribe(result => dialogRef.updateSize(result.matches ? '100vw' : 'auto'));
+  }
+
+  public closeClick(): void {
+    this.dialogRef.close();
+  }
+}

package/src/lib/components/dialogs/services/dialog.service.spec.ts

@@ -0,0 +1,82 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfirmationResult, DialogService } from './dialog.service';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { AlertDialogComponent } from '../alert-dialog/alert-dialog.component';
+import { of } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+
+describe('DialogService', () => {
+  let service: DialogService;
+  let mockMatDialog: any;
+  let mockMatDialogRef: any;
+  let translateService: jasmine.SpyObj<any>;
+
+  beforeEach(() => {
+    mockMatDialog = jasmine.createSpyObj('MatDialog', ['open']);
+    mockMatDialogRef = jasmine.createSpyObj('MatDialogRef', ['afterClosed']);
+    translateService = jasmine.createSpyObj('TranslateService', ['instant']);
+    translateService.instant.and.callFake((key: string) => key);
+
+    TestBed.configureTestingModule({
+      providers: [DialogService,
+        { provide: MatDialog, useValue: mockMatDialog },
+        { provide: TranslateService, useValue: translateService }
+      ],
+      imports: [
+        MatDialogModule,
+      ]
+    });
+    service = TestBed.inject(DialogService);
+    mockMatDialog.open.and.returnValue(mockMatDialogRef);
+  });
+
+  afterEach(() => {
+    mockMatDialog.open.calls.reset();
+    mockMatDialogRef.afterClosed.calls.reset();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should have config with data when showCustomDialog without options', async () => {
+    const myData = 'myData';
+    mockMatDialogRef.afterClosed.and.returnValue(of({}));
+
+    await service.showCustomDialog(AlertDialogComponent, myData );
+
+    expect(mockMatDialog.open).toHaveBeenCalledWith(
+      AlertDialogComponent,
+      jasmine.objectContaining({ data: myData })
+    );
+  });
+
+  it('should have config with width and height when showCustomDialog ', async () => {
+    const myData = 'myData';
+    mockMatDialogRef.afterClosed.and.returnValue(of({}));
+
+    await service.showCustomDialog(AlertDialogComponent, myData, {width: 10, height:20} );
+
+    expect(mockMatDialog.open).toHaveBeenCalledWith(
+      AlertDialogComponent,
+      jasmine.objectContaining({ data: myData, width: 10 , height: 20})
+    );
+  });
+
+  it('should should ask user for confirmation', async () => {
+    mockMatDialogRef.afterClosed.and.returnValue(of(ConfirmationResult.Yes));
+
+    await service.askForConfirmation('title', 'message');
+
+    expect(mockMatDialog.open).toHaveBeenCalledTimes(1);
+  });
+
+  it('should returns user answer after confirmation', async () => {
+    mockMatDialogRef.afterClosed.and.returnValue(of(ConfirmationResult.Yes));
+
+    const result = await service.askForConfirmation('title', 'message');
+
+    expect(result).toBe(ConfirmationResult.Yes);
+  });
+});

package/src/lib/components/dialogs/services/dialog.service.ts

@@ -0,0 +1,107 @@
+import { inject, Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import { AlertDialogComponent, AlertDialogData } from '../alert-dialog/alert-dialog.component';
+import { ComponentType } from '@angular/cdk/portal';
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
+import { TextInputDialogComponent } from '../text-input-dialog/text-input-dialog.component';
+import { ValidatorFn } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
+import { DeleteDialogData } from '../delete-dialog/models/delete-dialog-data';
+import { ErrorDialogComponent } from '../error-dialog/error-dialog.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DialogService {
+
+  private readonly defaultConfirmationOptions: ConfirmationOptions = {
+    noText: 'no',
+    noColor: 'primary',
+    noType: 'stroked',
+    yesText: 'yes',
+    yesType: 'raised',
+    messageArgs: null,
+    titleArgs: null,
+    yesColor: 'primary'
+  };
+
+  private readonly translate = inject(TranslateService);
+  private readonly dialog = inject(MatDialog);
+
+  public async showDialog(title: string, message: string): Promise<any> {
+    const dialogRef = this.dialog.open(AlertDialogComponent, {
+      data: { title, message } as AlertDialogData,
+      autoFocus: false
+    });
+    return await firstValueFrom(dialogRef.afterClosed());
+  }
+
+  public async showCustomDialog(component: ComponentType<unknown>, args: any , options: any = { autoFocus: false }): Promise<any> {
+    const config = { ...options, ... { data: args} };
+    return await firstValueFrom(this.dialog.open(component, config)
+      .afterClosed());
+  }
+
+  public async askForConfirmation(title: string, message: string, args: Partial<ConfirmationOptions> = null, options: any = { autoFocus: false}): Promise<ConfirmationResult> {
+    args = { ...this.defaultConfirmationOptions, ...(args || {}) };
+    const data = { options: args, title, message };
+    const config = { ...options, ... { data } };
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, config);
+    return await firstValueFrom(dialogRef.afterClosed());
+  }
+
+  public async askForDeleteConfirmation(name: string, type: string, translateType: boolean = false): Promise<any> {
+    if (translateType) {
+      type = this.translate.instant(type);
+    }
+    const dialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { name, type } as DeleteDialogData,
+      autoFocus: false
+    });
+    return await firstValueFrom(dialogRef.afterClosed());
+  }
+
+  public async showDeletionError(name: string): Promise<any> {
+    const dialogRef = this.dialog.open(ErrorDialogComponent, {
+      data: { name } as DeleteDialogData,
+      autoFocus: '#okButton'
+    });
+    return await firstValueFrom(dialogRef.afterClosed());
+  }
+
+  public async input(inputOptions: InputOptions, optionsDialog: any = { autoFocus: false }, value: string = '' , suffix = ''): Promise<{ result: ConfirmationResult, value: string }> {
+    const args = { ...inputOptions, value, suffix };
+    const config = { ...optionsDialog, ... { data: args } };
+
+    return await firstValueFrom(this.dialog.open(TextInputDialogComponent, config)
+      .afterClosed());
+  }
+}
+
+export interface ConfirmationOptions {
+  noText: string;
+  noColor: string;
+  noType?: 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
+  yesText: string;
+  yesColor: string;
+  yesType?: 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
+  messageArgs: any;
+  titleArgs: any;
+}
+
+export enum ConfirmationResult {
+  Cancel,
+  Yes,
+  No
+}
+
+export interface InputOptions {
+  titleLabel: string;
+  validateButtonLabel: string;
+  cancelButtonLabel: string;
+  inputLabel: string;
+  useTextArea?: boolean;
+  validators?: ValidatorFn | ValidatorFn[];
+}

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.html

@@ -0,0 +1,24 @@
+<div mat-dialog-title>
+    <div class="h6">{{ titleLabel | translate }}</div>
+    <cauca-icon-button id="close-button" icon="close" (buttonClick)="cancelClick()" />
+</div>
+<div mat-dialog-content>
+    <form [formGroup]="form">
+        <mat-form-field>
+            <mat-label>{{ inputLabel | translate}}</mat-label>
+            @if (useTextArea()) {
+                <textarea cdkTextareaAutosize formControlName="input" matInput></textarea>
+            } @else {
+                <input formControlName="input" matInput />
+            }
+            @if (showSuffix()) { <span matTextSuffix>{{suffix()}}</span> }
+            @if (form.controls.input.hasError('required')) {<mat-error>{{'error.requiredField' | translate}}</mat-error>}
+            @if (form.controls.input.hasError('invalidName')) {<mat-error>{{'error.invalidName' | translate}}</mat-error>}
+            @if (form.controls.input.hasError('alreadyUsed')) {<mat-error>{{'error.alreadyUsed' | translate}}</mat-error>}
+        </mat-form-field>
+    </form>
+</div>
+<mat-dialog-actions align="end">
+    <cauca-stroked-button id="close-button" [label]="cancelButtonLabel" (buttonClick)="cancelClick()" color="primary" />
+    <cauca-raised-button class="yes-button" [isDisabled]="!form.valid" [label]="validateButtonLabel" color="primary" (buttonClick)="validateClick()" />
+</mat-dialog-actions>

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.scss

@@ -0,0 +1,22 @@
+:host>div:first-child {
+    display: flex;
+    align-items: center;
+    padding: 8px 24px 0px 24px;
+
+    div:first-child {
+        flex: 1;
+    }
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-end,
+.mat-mdc-dialog-actions[align=end] {
+    column-gap: 8px;
+}
+
+.mat-mdc-dialog-content {
+    padding-top: 8px !important;
+}

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.spec.ts

@@ -0,0 +1,126 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextInputDialogComponent } from './text-input-dialog.component';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { ConfirmationResult } from '../services/dialog.service';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatFormFieldHarness } from '@angular/material/form-field/testing';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+describe('TextInputDialogComponent', () => {
+  let component: TextInputDialogComponent;
+  let fixture: ComponentFixture<TextInputDialogComponent>;
+  let loader: HarnessLoader;
+  let mockMatDialog, defaultData: any;
+
+  beforeEach(async () => {
+    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close']);
+    defaultData = {
+      titleLabel: 'Title',
+      validateButtonLabel: 'Validate',
+      cancelButtonLabel: 'Cancel',
+      inputLabel: 'Input',
+      suffix: '.xlxs'
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TextInputDialogComponent,
+        MockModule(TranslateModule),
+        ...MockComponents(IconButtonComponent, StrokedButtonComponent, RaisedButtonComponent)
+      ],
+      declarations: [
+        MockPipe(TranslatePipe, value => value),
+        ...MockComponents(StrokedButtonComponent, RaisedButtonComponent)
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: mockMatDialog },
+        { provide: MAT_DIALOG_DATA, useValue: defaultData },
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(TextInputDialogComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set dialog labels', () => {
+    expect(component.titleLabel).toBe(defaultData.titleLabel);
+    expect(fixture.nativeElement.querySelector('.h6').textContent).toBe(defaultData.titleLabel);
+
+    expect(component.validateButtonLabel).toBe(defaultData.validateButtonLabel);
+    expect(ngMocks.findInstance(RaisedButtonComponent).label).toBe(defaultData.validateButtonLabel);
+
+    expect(component.cancelButtonLabel).toBe(defaultData.cancelButtonLabel);
+    expect(ngMocks.findInstance(StrokedButtonComponent).label).toBe(defaultData.cancelButtonLabel);
+
+    expect(component.inputLabel).toBe(defaultData.inputLabel);
+  });
+
+  it('should close dialog when clicking on cancel button in title', () => {
+    const closeButton = ngMocks.findInstance(IconButtonComponent);
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalledWith({ result: ConfirmationResult.Cancel, value: null });
+  });
+
+  it('should close dialog with cancel result on cancel button click', () => {
+    const closeButton = ngMocks.findInstance(StrokedButtonComponent);
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalledWith({result: ConfirmationResult.Cancel, value: null});
+  });
+
+  it('should close dialog with yes result and input value on validate button click', () => {
+    const validateButton = ngMocks.findInstance(RaisedButtonComponent);
+    const value = 'test';
+
+    component.form.controls.input.setValue(value);
+    validateButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalledWith({result: ConfirmationResult.Yes, value});
+  });
+
+  it('should set suffix from received data', () => {
+    expect(component.suffix()).toBe(defaultData.suffix);
+  });
+
+  it('should show suffix when suffix is set', async () => {
+    const formField = await loader.getHarness(MatFormFieldHarness);
+    fixture.detectChanges();
+
+    expect(await formField.getSuffixText()).toBe('.xlxs');
+  });
+
+  it('should show suffix when showSuffix is not set', async () => {
+    const suffix = '';
+    component.suffix.set(suffix);
+    fixture.detectChanges();
+
+    const formField = await loader.getHarness(MatFormFieldHarness);
+
+    expect(await formField.getSuffixText()).toBe('');
+  });
+
+  it('should show textarea when useTextArea is set', async () => {
+    component.useTextArea.set(true);
+    fixture.detectChanges();
+
+    const textarea = fixture.nativeElement.querySelector('textarea');
+
+    expect(textarea).toBeTruthy();
+    expect( fixture.nativeElement.querySelector('input')).toBeFalsy();
+  });
+});

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.ts

@@ -0,0 +1,66 @@
+import { Component, computed, Inject, signal } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormGroup, ReactiveFormsModule, UntypedFormBuilder, ValidatorFn } from '@angular/forms';
+import { ConfirmationResult } from '../services/dialog.service';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+@Component({
+  selector: 'cauca-text-input-dialog',
+  standalone: true,
+  imports: [TranslateModule, RaisedButtonComponent, MatDialogModule, StrokedButtonComponent, MatFormFieldModule, MatInputModule, ReactiveFormsModule, IconButtonComponent],
+  templateUrl: './text-input-dialog.component.html',
+  styleUrl: './text-input-dialog.component.scss'
+})
+export class TextInputDialogComponent {
+  public form: FormGroup;
+
+  public titleLabel: string = '';
+  public validateButtonLabel: string = '';
+  public cancelButtonLabel: string = '';
+  public inputLabel: string = '';
+  public suffix = signal<string>('');
+  public showSuffix = computed(() => !!this.suffix());
+  public useTextArea = signal<boolean>(false);
+
+  public constructor(
+    formBuilder: UntypedFormBuilder,
+    public dialogRef: MatDialogRef<TextInputDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: TextInputDialogData) {
+    this.suffix.set(data.suffix);
+
+    this.titleLabel = data.titleLabel;
+    this.validateButtonLabel = data.validateButtonLabel;
+    this.cancelButtonLabel = data.cancelButtonLabel;
+    this.inputLabel = data.inputLabel;
+    this.useTextArea.set(data.useTextArea ?? false);
+
+    this.form = formBuilder.group({
+      input: [data.value, data.validators]
+    });
+  }
+
+  public cancelClick(): void {
+    this.dialogRef.close({ result: ConfirmationResult.Cancel, value: null });
+  }
+
+  public validateClick(): void {
+    const trimmedValue = this.form.controls.input.value.trim();
+    this.dialogRef.close({ result: ConfirmationResult.Yes, value: trimmedValue });
+  }
+}
+
+export interface TextInputDialogData {
+  titleLabel: string;
+  validateButtonLabel: string;
+  cancelButtonLabel: string;
+  inputLabel: string;
+  suffix?: string;
+  useTextArea?: boolean;
+  validators?: ValidatorFn | ValidatorFn[];
+  value?: string;
+}

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

@@ -0,0 +1,9 @@
+<input
+    matInput
+    [(colorPicker)]="value"
+    [value]="value"
+    (colorPickerChange)="onChangeColor($event)"
+    type="text"
+    class="form-control"
+    id="color-id"
+/>

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

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorPickerComponent } from './color-picker.component';
+
+describe('ColorPickerComponent', () => {
+  let component: ColorPickerComponent;
+  let fixture: ComponentFixture<ColorPickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ColorPickerComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ColorPickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set value when onChangeColor is called', () => {
+    const color = 'red';
+    component.onChangeColor(color);
+    expect(component.value).toEqual(color);
+  });
+});