@falcon-ng/tailwind 0.0.2

package/src/lib/component/bottom-sheet/bottom-sheet.component.html

@@ -0,0 +1,9 @@
+<mat-nav-list>
+  <ng-container *ngFor="let item of data">
+    <a [href]="item.link" mat-list-item (click)="click($event,item)">
+      <span matListItemTitle>{{item.levelOneText}}</span>
+      <span matLine>{{item.levelTwoText}}</span>
+    </a>
+  </ng-container>
+
+</mat-nav-list>

package/src/lib/component/bottom-sheet/bottom-sheet.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BottomSheetComponent } from './bottom-sheet.component';
+
+describe('BottomSheetComponent', () => {
+  let component: BottomSheetComponent;
+  let fixture: ComponentFixture<BottomSheetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BottomSheetComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BottomSheetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/bottom-sheet/bottom-sheet.component.ts

@@ -0,0 +1,19 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from "@angular/material/bottom-sheet";
+
+@Component({
+  selector: 'lib-bottom-sheet',
+  templateUrl: './bottom-sheet.component.html',
+  styleUrls: ['./bottom-sheet.component.scss']
+})
+export class BottomSheetComponent {
+  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>, @Inject(MAT_BOTTOM_SHEET_DATA) public data: any) { }
+
+  ngOnInit(): void {
+  }
+
+  click(event: MouseEvent, item : any): void {
+    this._bottomSheetRef.dismiss(item);
+    event.preventDefault();
+  }
+}

package/src/lib/component/button/button.component.html

@@ -0,0 +1,54 @@
+<div [ngStyle]="control.style" [ngClass]="control.class">
+    <ng-container [ngSwitch]="control.appearance">
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [color]="control.color" [ngClass]="control.class"
+            [ngStyle]="control.style" mat-button *ngSwitchCase="0">
+            <mat-icon *ngIf="control?.suffix?.isIcon" style="margin-bottom: 1px;">
+                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
+        </button>
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [type]="control.type" [ngClass]="control.class"
+            [color]="control.color" [ngStyle]="control.style"
+            mat-raised-button *ngSwitchCase="1">
+            <mat-icon *ngIf="control.suffix?.isIcon" style="margin-bottom: 1px;">
+                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
+        </button>
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [type]="control.type" [ngClass]="control.class"
+            [color]="control.color" [ngStyle]="control.style"
+            mat-stroked-button *ngSwitchCase="2">
+            <mat-icon *ngIf="control.suffix?.isIcon" style="margin-bottom: 1px;">
+                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
+        </button>
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [type]="control.type" [ngClass]="control.class"
+            [color]="control.color" [ngStyle]="control.style"
+            mat-flat-button *ngSwitchCase="3">
+            <mat-icon *ngIf="control.suffix.isIcon" style="margin-bottom: 1px;">
+                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
+        </button>
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [type]="control.type" [ngClass]="control.class"
+            [color]="control.color" [ngStyle]="control.style"
+            mat-icon-button [attr.aria-label]="control.label" *ngSwitchCase="4">
+            <mat-icon>{{control.label}}</mat-icon>
+        </button>
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [type]="control.type" [ngClass]="control.class"
+            [color]="control.color" [ngStyle]="control.style" mat-fab
+            [attr.aria-label]="control.label" *ngSwitchCase="5">
+            <mat-icon>{{control.label}}</mat-icon>
+        </button>
+        <button [disabled]="control.disabled" (click)="childBtnClick()"
+            [type]="control.type" [ngClass]="control.class"
+            [color]="control.color" [ngStyle]="control.style" mat-mini-fab
+            [attr.aria-label]="control.label" *ngSwitchCase="6">
+            <mat-icon>{{control.label}}</mat-icon>
+        </button>
+        <a mat-stroked-button *ngSwitchCase="7" [ngClass]="control.class"
+            [ngStyle]="control.style" routerLink="[]">{{control.label}}</a>
+        <a mat-stroked-button *ngSwitchCase="8" [ngClass]="control.class"
+            [ngStyle]="control.style"
+            href="{{control.value}}">{{control.label}}</a>
+    </ng-container>
+</div>

package/src/lib/component/button/button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/button/button.component.ts

@@ -0,0 +1,17 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormGroup} from "@angular/forms";
+import {BaseControl} from "../../base-control";
+
+@Component({
+  selector: 'falcon-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.css']
+})
+export class ButtonComponent {
+  @Input() control!: BaseControl<string>;
+  @Input() formGroup!: FormGroup;
+  @Output() btnClick = new EventEmitter<string>();
+  childBtnClick() {
+    this.btnClick.emit("Button Click Event");
+  }
+}

package/src/lib/component/button-toggle/button-toggle.component.html

@@ -0,0 +1,21 @@
+<div [ngStyle]="control.style" [ngClass]="control.class"
+     [formGroup]="formGroup">
+  <mat-label [ngStyle]="control.style" [ngClass]="control.class"
+             *ngIf="control.label != undefined">
+    {{control.label | titlecase}}
+  </mat-label>
+  <mat-button-toggle-group
+    [formControlName]="control.formControlName != undefined ? control.formControlName : 'default'"
+    [appearance]="control.appearance" [ngStyle]="control.style"
+    [ngClass]="control.class" [attr.aria-label]="control.label"
+    class="botton-toggle" (change)="toggleChange($event)">
+    <mat-button-toggle *ngFor="let item of control.options" [value]="item?.value"
+                       [ngStyle]="control.style"
+                       [ngClass]="control.class">
+      <mat-icon [ngClass]="item?.class" aria-hidden="false" aria-label="item icon" *ngIf="item?.icon != undefined">
+        {{item?.icon}}
+      </mat-icon>
+      {{item.viewValue | titlecase}}
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>

package/src/lib/component/button-toggle/button-toggle.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonToggleComponent } from './button-toggle.component';
+
+describe('ButtonToggleComponent', () => {
+  let component: ButtonToggleComponent;
+  let fixture: ComponentFixture<ButtonToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ButtonToggleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/button-toggle/button-toggle.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FormControl, FormGroup} from "@angular/forms";
+import {BaseControl} from "../../base-control";
+import {MatButtonToggleChange} from "@angular/material/button-toggle";
+
+@Component({
+  selector: 'falcon-button-toggle',
+  templateUrl: './button-toggle.component.html',
+  styleUrls: ['./button-toggle.component.scss'],
+})
+export class ButtonToggleComponent implements OnInit {
+  control!: BaseControl<string>;
+  formGroup!: FormGroup;
+  @Output() toggleGroupChange: EventEmitter<MatButtonToggleChange> = new EventEmitter<MatButtonToggleChange>();
+  ngOnInit(): void {
+    if (this.formGroup === undefined) {
+      this.formGroup = new FormGroup({
+        default: new FormControl()
+      });
+    }
+  }
+
+  toggleChange($event: any) {
+    this.toggleGroupChange.emit($event.value);
+  }
+}

package/src/lib/component/checkbox/checkbox.component.html

@@ -0,0 +1,6 @@
+<div [formGroup]="formGroup">
+    <mat-checkbox [ngStyle]="control.style" [ngClass]="control.class"
+        [color]="control.color != null ? control.color : 'accent'" [labelPosition]="control.labelPosition"
+        [formControlName]="control.formControlName" (change)="change($event)">
+        {{control.label}}</mat-checkbox>
+</div>

package/src/lib/component/checkbox/checkbox.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckboxComponent } from './checkbox.component';
+
+describe('CheckboxComponent', () => {
+  let component: CheckboxComponent;
+  let fixture: ComponentFixture<CheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckboxComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/checkbox/checkbox.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { BaseControl } from '../../base-control';
+
+@Component({
+  selector: 'falcon-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss'],
+})
+export class CheckboxComponent {
+  control!: BaseControl<string>;
+  formGroup!: FormGroup;
+  change($event: any) {
+    if (this.control.event !== undefined)
+      this.control?.event?.change?.emit($event);
+  }
+}

package/src/lib/component/chips/chip.component.html

@@ -0,0 +1,75 @@
+<ng-container [ngSwitch]="control.type">
+  <mat-form-field class="chip-list" *ngSwitchCase="'search'" [appearance]="control.appearance" [formGroup]="formGroup"
+                  [ngStyle]="control.style" [ngClass]="control.class">
+    <mat-label>{{control.label}}</mat-label>
+    <mat-chip-grid #chipGrid aria-label="item selection">
+      <mat-chip-row *ngFor="let option of control.chipSelectedOptions" [removable]="removable"
+                    (removed)="remove(option)">
+        {{option.value}}
+        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+      </mat-chip-row>
+
+      <input matInput #chipAutoCompleteInput [formControl]="autoCompleteControl"
+             [formArrayName]="control.formControlName" [placeholder]="control.placeHolder" [ngStyle]="control.style"
+             [ngClass]="control.class" [matAutocomplete]="auto" [matChipInputFor]="chipGrid"
+             [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)"
+             [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']"
+             (keyup.enter)="keyboardEnterEvent($event)">
+
+    </mat-chip-grid>
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event)">
+      <mat-option *ngFor="let item of filteredOptions | async" [value]="item.key">
+        {{item.value}}
+      </mat-option>
+    </mat-autocomplete>
+    <mat-hint>
+      <ng-container *ngIf="control.hint.link?.isLink; else elseBlock">
+        <ng-container *ngIf="control.hint.link?.queryParams !== undefined; else withoutQueryBlock">
+          <a [routerLink]="[control.hint.link?.routerLink]" [queryParams]="{ query: control.hint.link?.queryParams }"
+             routerLinkActive="router-link-active">{{control.hint.text}}</a>
+        </ng-container>
+      </ng-container>
+      <ng-template #elseBlock>
+        <span>{{control.hint.text}}</span>
+      </ng-template>
+      <ng-template #withoutQueryBlock>
+        <a [routerLink]="[control.hint.link?.routerLink]"
+           routerLinkActive="router-link-active">{{control.hint.text}}</a>
+      </ng-template>
+    </mat-hint>
+  </mat-form-field>
+
+  <mat-form-field class="chip-list" *ngSwitchCase="'text'" [appearance]="control.appearance" [formGroup]="formGroup"
+                  [ngStyle]="control.style" [ngClass]="control.class">
+    <mat-label>{{control.label}}</mat-label>
+    <mat-chip-grid #chipGrid aria-label="item selection">
+      <mat-chip-row *ngFor="let option of control.chipSelectedOptions" [value]="selectable" [removable]="removable"
+                    (removed)="remove(option)">
+        {{option?.value}}
+        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+      </mat-chip-row>
+
+      <input matInput #chipTextInput [formArrayName]="control.formControlName" multiple
+             [placeholder]="control.placeHolder"
+             [matChipInputFor]="chipGrid" [ngStyle]="control.style" [ngClass]="control.class"
+             [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
+             (matChipInputTokenEnd)="add($event)"
+             [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']"
+             (keyup.enter)="keyboardEnterEvent($event)">
+
+    </mat-chip-grid>
+  </mat-form-field>
+
+  <mat-chip-listbox aria-label="Chips selection" *ngSwitchDefault>
+    <mat-chip color="{{control.color}}" selected>{{control.label}}</mat-chip>
+  </mat-chip-listbox>
+
+
+  <mat-chip-set class="chip-list" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)"
+                *ngSwitchCase="'dragDrop'" class="example-chip">
+    <mat-chip class="example-box" cdkDrag *ngFor="let option of control?.options">
+      {{option?.value}}
+    </mat-chip>
+  </mat-chip-set>
+
+</ng-container>

package/src/lib/component/chips/chip.component.scss

@@ -0,0 +1,3 @@
+.chip-list {
+  width: 100%;
+}

package/src/lib/component/chips/chip.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChipComponent } from './chip.component';
+
+describe('ChipsComponent', () => {
+  let component: ChipComponent;
+  let fixture: ComponentFixture<ChipComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChipComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/chips/chip.component.ts

@@ -0,0 +1,125 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { BaseControl } from '../../base-control';
+import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { Observable } from 'rxjs';
+import { IOptions } from '../../model/interface';
+import {
+  MatAutocomplete,
+  MatAutocompleteSelectedEvent,
+} from '@angular/material/autocomplete';
+import { map, startWith } from 'rxjs/operators';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'falcon-chip',
+  templateUrl: './chip.component.html',
+  styleUrls: ['./chip.component.scss'],
+})
+export class ChipComponent implements OnInit {
+  @Input() control!: BaseControl<any>;
+  @Input() formGroup!: FormGroup;
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  selectable = true;
+  removable = true;
+  addOnBlur = true;
+  filteredOptions: Observable<IOptions[]>;
+  autoCompleteControl = new FormControl('');
+  private items: FormArray;
+
+  @ViewChild('chipAutoCompleteInput')
+  chipAutoCompleteInput!: ElementRef<HTMLInputElement>;
+  @ViewChild('chipTextInput') chipTextInput!: ElementRef<HTMLInputElement>;
+  @ViewChild('auto') matAutocomplete!: MatAutocomplete;
+
+  constructor(private fb: FormBuilder) {
+     this.filteredOptions = this.autoCompleteControl.valueChanges.pipe(
+       startWith(null),
+       map((value: string | null) =>
+         value ? this._filter(value) : this.control?.options.slice()
+       )
+     );
+
+  }
+
+  ngOnInit() {
+     setTimeout(() => {
+       if (this.control.chipSelectedOptions.length > 0) {
+         this.items = this.formGroup.controls[
+           this.control.formControlName
+         ] as FormArray;
+         this.control.chipSelectedOptions.forEach((value: any) => {
+           this.items.controls.push(this.createItem(value.value));
+         });
+       }
+     });
+  }
+
+  add(event: MatChipInputEvent): void {
+     const input = event.input;
+     const value = event.value;
+     if ((value || '').trim()) {
+       this.control.chipSelectedOptions.push({
+         key: value.trim(),
+         value: value.trim(),
+       });
+       this.items = this.formGroup.get(
+         this.control.formControlName
+       ) as FormArray;
+       this.items.push(this.createItem(value));
+     }
+     if (input) {
+       input.value = '';
+     }
+  }
+
+   createItem(value: String): FormGroup {
+     return this.fb.group({
+       key: value,
+       value: value,
+     });
+   }
+
+  remove(option: IOptions): void {
+     const index = this.control.chipSelectedOptions.indexOf(option);
+     if (index >= 0) {
+       this.control.chipSelectedOptions.splice(index, 1);
+       this.items.removeAt(index);
+     }
+  }
+
+  optionSelected(event: MatAutocompleteSelectedEvent): void {
+     this.control.chipSelectedOptions.push({
+       key: event.option.value,
+       value: event.option.value,
+     });
+     this.items = this.formGroup.get(this.control.formControlName) as FormArray;
+     this.items.push(this.createItem(event.option.value));
+     this.chipAutoCompleteInput.nativeElement.value = '';
+     this.formGroup.get(this.control.formControlName)?.setValue(null);
+  }
+
+   private _filter(value: string): any {
+     if (value !== null) {
+       const filterValue = value.toLowerCase();
+       return this.control?.options?.filter((option: IOptions) =>
+         option.value.toLowerCase().includes(filterValue)
+       );
+     }
+   }
+
+   drop(event: CdkDragDrop<IOptions[]>) {
+     moveItemInArray(
+       this.control.options,
+       event.previousIndex,
+       event.currentIndex
+     );
+   }
+
+  keyboardEnterEvent(event: any): void {
+     if (this.control.event !== undefined)
+       this.control.event.keyboardEnter?.emit(event);
+     this.chipTextInput.nativeElement.value = '';
+  }
+}

package/src/lib/component/date-picker/date-picker.component.html

@@ -0,0 +1,18 @@
+<mat-form-field [appearance]="control.appearance" [formGroup]="formGroup"
+                [floatLabel]="control.floatLabel" [ngStyle]="control.style"
+                [ngClass]="control.class">
+  <mat-label>{{control.label}}</mat-label>
+  <input matInput [matDatepicker]="picker" [formControlName]="control.formControlName"
+         [placeholder]="control.placeHolder" [type]="control.type"
+         [ngStyle]="control.style" [ngClass]="control.class"
+         [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']">
+  <mat-datepicker-toggle matSuffix [for]="picker">
+    <mat-icon matDatepickerToggleIcon *ngIf="control.suffix.isIcon">keyboard_arrow_down</mat-icon>
+  </mat-datepicker-toggle>
+  <mat-datepicker #picker></mat-datepicker>
+  <mat-hint>{{control.hint.text}}</mat-hint>
+  <ng-container *ngFor="let validation of control.validations;" ngProjectAs="mat-error">
+    <mat-error *ngIf="formGroup.get(control.formControlName)?.hasError(validation.name)">{{validation.message}}
+    </mat-error>
+  </ng-container>
+</mat-form-field>

package/src/lib/component/date-picker/date-picker.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatePickerComponent } from './date-picker.component';
+
+describe('DatePickerComponent', () => {
+  let component: DatePickerComponent;
+  let fixture: ComponentFixture<DatePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatePickerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DatePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/date-picker/date-picker.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import {BaseControl} from "../../base-control";
+import {FormGroup} from "@angular/forms";
+
+@Component({
+  selector: 'falcon-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss'],
+})
+export class DatePickerComponent {
+ control!: BaseControl<string>;
+ formGroup!: FormGroup;
+}

package/src/lib/component/dialog/dialog.component.html

@@ -0,0 +1,12 @@
+<span mat-dialog-title>{{data.title}}</span>
+<mat-divider></mat-divider>
+<div mat-dialog-content>
+  <span class="mat-h3">{{data.bodyMessage}}</span>
+</div>
+<mat-divider></mat-divider>
+<div mat-dialog-actions>
+    <button mat-raised-button [mat-dialog-close]="" cdkFocusInitial>{{data.cancelBtnText}}</button>
+    <button mat-raised-button [color]="'warn'" [mat-dialog-close]="data">
+      {{data.mainbtnText}}
+    </button>
+  </div>

package/src/lib/component/dialog/dialog.component.scss

@@ -0,0 +1,3 @@
+.mat-mdc-dialog-actions {
+  justify-content: end !important;
+}

package/src/lib/component/dialog/dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/component/dialog/dialog.component.ts

@@ -0,0 +1,12 @@
+import {Component, Inject} from '@angular/core';
+import {IDialogData} from "../../model/interface";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
+
+@Component({
+  selector: 'lib-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss']
+})
+export class DialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: IDialogData) {}
+}

package/src/lib/component/pagination/pagination.component.html

@@ -0,0 +1,10 @@
+<div class="flex justify-between">
+    <span class="mat-h3">Page {{currentPage}} of {{totalPage}}</span>
+    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+        <mat-button-toggle value="bold" *ngFor="let item of paginationSize; index as i;"
+            (change)="receiveBtnChange(item)" [checked]="firstLoad && i ==0">
+            &nbsp;&nbsp; <span class="mat-h3">{{item}}</span>&nbsp;&nbsp;
+        </mat-button-toggle>
+    </mat-button-toggle-group>
+
+</div>