@unifylib/ui-lib 1.0.3

package/src/lib/components/report-form/report-form.component.ts

@@ -0,0 +1,588 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Injector, Input, OnInit, Output} from '@angular/core';
+import {FieldInfo} from "../../base-model/field-info";
+import {EMPTY_PAGE_INFO, PageInfo} from "../../base-model/page-info";
+import {TableColumn} from "../../base-model/table-column.interface";
+import {FieldMessage} from "../../base-model/api-response";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {BackendService} from "../../services/backend-service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {formatDate, NgForOf, NgIf} from "@angular/common";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {MatButton, MatButtonModule} from "@angular/material/button";
+import {BaseTableComponent} from "../base-table/base-table.component";
+import {MatIconModule} from "@angular/material/icon";
+import {FilterRequest} from "../../base-model/filter-request";
+import {ReportRequest} from "../../base-model/report-request.model";
+import {Filter} from "../../base-model/filter.model";
+import {TitleBarComponent} from "../title-bar/title-bar.component";
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {DRILL_DOWN_ACTION, JUNIOR_DOWN_ACTION, SnackMessage, TablePageUserAction} from "../../base-model";
+import {} from "../audit-log-details-dialog/audit-log-details-dialog.component";
+import {MatDialog} from "@angular/material/dialog";
+import {ReportDetailsDialogComponent} from "../report-details-dialog/report-details-dialog.component";
+import { cloneDeep } from 'lodash';
+import {MatTooltip} from "@angular/material/tooltip";
+import {Directionality} from "@angular/cdk/bidi";
+
+
+const NON_REPORT_COLUMNS = ['listAction', 'button', 'checkbox'];
+
+@Component({
+    selector: 'app-report-form',
+    standalone: true,
+  imports: [
+    FlexLayoutModule,
+    TitleBarComponent,
+    BaseFormCanvasComponent,
+    MatMenu,
+    MatMenuItem,
+    NgForOf,
+    MatMenuTrigger,
+    MatButtonModule,
+    TranslateModule,
+    BaseTableComponent,
+    NgIf,
+    MatIconModule,
+    MatButton,
+    MatTooltip
+  ],
+    templateUrl: './report-form.component.html',
+    styleUrl: './report-form.component.scss'
+})
+export class ReportFormComponent implements OnInit {
+    @Input()
+    showDetails : any = [];
+
+    @Input()
+    showExtractButton: boolean = true;
+
+    @Input()
+    columns: TableColumn<any>[] =[];
+
+    @Input() actionRequestCallback!: (actionRequest: TablePageUserAction) => TablePageUserAction;
+    @Input() enrichDrillDownReportRequest!: (actionRequest: TablePageUserAction, reportRequest: ReportRequest) => TablePageUserAction;
+    @Input() enrichHyperLinkReportRequest!: (actionRequest: TablePageUserAction, reportRequest: ReportRequest) => TablePageUserAction;
+    @Input() enrichJuniorReportRequest!: (actionRequest: TablePageUserAction, reportRequest: ReportRequest) => TablePageUserAction;
+
+    @Output()
+    userAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
+    activeLevel: number = 1;
+
+    private filterRequest: FilterRequest;
+    x: any;
+    isEditable: boolean = true;
+    fields: FieldInfo[] = [];
+    pageInfo: PageInfo = EMPTY_PAGE_INFO;
+    drillDownPageInfo: PageInfo = EMPTY_PAGE_INFO;
+    drillDownColumns: TableColumn<any>[] = [];
+    hideDrillDownButton: false;
+
+    juniorPageInfo: PageInfo = EMPTY_PAGE_INFO;
+    juniorColumns: TableColumn<any>[] = [];
+
+    columnsDefinition: TableColumn<any>[] = [];
+    types: string[] = ["pdf", "csv", "xlsx"]
+    searchStr: string = '';
+
+    errors: FieldMessage[] = [];
+
+    reloadData: boolean = false;
+    backButtonEnabled: boolean = true;
+
+
+    reportRequest: ReportRequest = new ReportRequest({});
+    childReportRequest: ReportRequest = new ReportRequest({});
+    juniorReportRequest: ReportRequest = new ReportRequest({});
+    public reportForm: FormGroup;
+    readyToSearch = false;
+    private pageSize: any;
+    private dialogReportRequest: any;
+    currentDirection: 'ltr' | 'rtl';
+
+  constructor(private translateService: TranslateService,
+                public backendService: BackendService,
+                private activatedRoute: ActivatedRoute,
+                private injector: Injector,
+                private router: Router,
+                private route: ActivatedRoute,
+                private directionality: Directionality,
+                public dialog: MatDialog,
+                private fb: FormBuilder) {
+    }
+
+    disableExportAction : boolean = false;
+
+    ngOnInit(): void {
+      this.currentDirection = this.directionality.value;
+      this.directionality.change.subscribe((value) => {
+        this.currentDirection = value;
+      })
+
+      this.activatedRoute.data.subscribe(data => {
+        this.pageInfo = data['pageInfo'];
+        this.pageSize = this.pageInfo.pageSize ?? 10;
+        this.filterRequest = new FilterRequest(this.pageSize);
+        data['pageInfo'].lazyLoadData = true;
+        this.drillDownPageInfo = data['drillDownPageInfo'];
+        this.drillDownColumns = data['drillDownColumns']?.filter(c => c.property !== 'selectItem');
+        this.hideDrillDownButton = data['hideDrillDownButton'] ?? false;
+        this.juniorPageInfo = data['juniorPageInfo'];
+        this.juniorColumns = data['juniorColumns'];
+        this.columnsDefinition = data['columnsDefinition'].filter(c => (this.drillDownPageInfo && this.drillDownColumns || (!NON_REPORT_COLUMNS.includes(c.type))));
+        this.fields = data['fields'];
+        if (data['enrichDrillDownReportRequest']) {
+          this.enrichDrillDownReportRequest = data['enrichDrillDownReportRequest'](this.injector);
+        }
+        if (data['enrichJuniorReportRequest']) {
+          this.enrichJuniorReportRequest = data['enrichJuniorReportRequest'](this.injector);
+        }
+
+        if (data['enrichHyperLinkReportRequest']) {
+          this.enrichHyperLinkReportRequest = data['enrichHyperLinkReportRequest'](this.injector);
+        }
+      });
+      this.route.queryParamMap.subscribe(params => {
+        const isComparisonReport = params.get('comparisonReport') === 'true';
+
+        if (isComparisonReport) {
+          const comparisonStr = sessionStorage.getItem('comparisonReportPageInfo');
+
+          if (comparisonStr) {
+            const comparisonData = JSON.parse(comparisonStr);
+
+            this.pageInfo.lazyLoadData = comparisonData.lazyLoadData ?? false;
+            this.activeLevel = comparisonData.activeLevel ?? 2;
+            this.isEditable = false;
+            this.backButtonEnabled = false;
+            this.drillDownPageInfo = comparisonData.drillDownPageInfo;
+            this.drillDownColumns = comparisonData.drillDownColumns;
+            this.reportForm = this.fb.group({
+              directorate: [[]],
+              fromDate: [''],
+              toDate: [''],
+              sector: [''],
+            });
+
+            this.reportForm.patchValue(comparisonData.form)
+            this.fields = this.fields.filter(c => c.type !== 'checkbox');
+
+            const reportRequest = comparisonData.reportRequest;
+
+            this.childReportRequest = this.backendService.buildReportRequest(
+              this.drillDownColumns,
+              `${this.drillDownPageInfo.labelsSection}.${this.drillDownPageInfo.id}`,
+              reportRequest,
+              '',
+              this.drillDownPageInfo,
+              'LANDSCAPE'
+            );
+
+          }
+        }
+      });
+        }
+
+
+    // ngOnChanges({item, errors, fields}: SimpleChanges): void {
+    //     // errors?.currentValue?.forEach((msg: FieldMessage) => {
+    //     //     this.backendService.parentForm.get(msg.fieldName)?.setErrors({serverError: msg.message});
+    //     // });
+    //     // if (fields?.currentValue && !fields.isFirstChange()){
+    //     //     this.buildForm();
+    //     // }
+    //     // this.buildForm();
+    // }
+
+    isMatchHeight() {
+        return this.pageInfo.pageHeight === 'match';
+    }
+
+
+    doAction(type: string) {
+      if (this.backendService.parentForm.valid) {
+        this.reloadData = !this.reloadData;
+        const filterRequest: FilterRequest = new FilterRequest(this.pageSize);
+        filterRequest.filters = [];
+        let paramsString: string[] = [];
+        this.fields.filter(x => x.type !== 'spacer').forEach(f => {
+          if (this.getParamValue(f) != null && this.getParamValue(f).toString().trim() !== '')
+          {
+          if (f.type === 'multi-select' || f.type === 'lookup') {
+            // do not filter if this field as cascading for another one and the other one got selected values
+            const childFieldIdx = this.fields.findIndex(field => field.cascadedBy === f.property);
+            if (childFieldIdx > -1 && this.backendService.parentForm.get(this.fields[childFieldIdx].property)?.value?.length > 0) {
+              return;
+            }
+            const idz: number[] = [];
+            const param: string[] = [];
+            if (this.backendService.parentForm.get(f.property)?.value && Array.isArray(this.backendService.parentForm.get(f.property)?.value)
+              && this.backendService.parentForm.get(f.property)?.value.length > 0) {
+              this.backendService.parentForm.get(f.property)?.value.forEach((a: {
+                channelId: number;
+                englishName: string;
+                id: number;
+              }) => {
+                if (f.flattenBySubAttribute) {
+                  idz.push(a[f.flattenBySubAttribute]);
+                  param.push(a[f.flattenBySubAttribute]);
+                } else if (this.fields.find(s => s.property === 'terminalId')) {
+                  idz.push(a.channelId);
+                  param.push(a.englishName);
+                } else {
+                  idz.push(a.id);
+                  param.push(a.englishName);
+                }
+              })
+              filterRequest.filters?.push(new Filter({
+                id: f.property, fieldName: f.property, label: this.translateService.instant(f.label),
+                filterType: 'FILED_FILTER', operator: f.filterOperator,
+                valueObject: idz
+              }));
+              paramsString.push(this.translateService.instant(f.label) + ' : ' + param.join(','));
+            } else if (this.backendService.parentForm.get(f.property)?.value && f.flattenBySubAttribute) {
+              filterRequest.filters?.push(new Filter({
+                id: f.property, fieldName: f.property, label: this.translateService.instant(f.label),
+                filterType: 'FILED_FILTER', operator: f.filterOperator,
+                valueObject: this.getParamValue(f)[f.flattenBySubAttribute]
+              }));
+            }
+          } else {
+            if (this.backendService.parentForm.get(f.property)?.value !== null &&
+              this.backendService.parentForm.get(f.property)?.value !== undefined &&
+              this.backendService.parentForm.get(f.property)?.value !== "") {
+              filterRequest.filters?.push(new Filter({
+                id: f.property, fieldName: f.property, label: this.translateService.instant(f.label),
+                filterType: 'FILED_FILTER', operator: f.filterOperator,
+                valueObject: this.getParamValue(f)
+              }));
+            }
+            paramsString.push(this.translateService.instant(f.label) + ' : ' + this.getParamValueLabel(f));
+          }
+        }})
+        const reportRequest = this.backendService.buildReportRequest(this.columnsDefinition, this.pageInfo.labelsSection + '.' + this.pageInfo.id,
+          filterRequest, type, this.pageInfo, 'LANDSCAPE');
+        reportRequest.searchStr = paramsString.join(' , ');
+        this.reportRequest = reportRequest;
+        // this.activeLevel = 1;
+      } else {
+        this.backendService.topPanelMessage$.next(new SnackMessage('INVALID_REPORT_FORM', true, 'error'));
+      }
+    }
+
+    private getParamValue(f: FieldInfo) {
+        if (f.type === 'date' && this.backendService.parentForm.get(f.property)?.value) {
+            return formatDate(this.backendService.parentForm.get(f.property)?.value, 'yyyy-MM-dd', 'en_US')
+        }else if (f.type === 'checkbox') {
+            return !!this.backendService.parentForm.get(f.property)?.value;
+        }else {
+            return this.backendService.parentForm.get(f.property)?.value;
+        }
+    }
+
+    private getParamValueLabel(f: FieldInfo) {
+        if (f.type === 'checkbox') {
+            return this.backendService.parentForm.get(f.property)?.value ? this.translateService.instant('yes') : this.translateService.instant('no');
+        }else {
+            return this.backendService.parentForm.get(f.property)?.value;
+        }
+    }
+
+  getTitle() {
+    const pageInfoMap = {
+      1: this.pageInfo,
+      2: this.drillDownPageInfo,
+      3: this.juniorPageInfo
+    };
+
+    const currentInfo = pageInfoMap[this.activeLevel] || this.pageInfo;
+    return `${currentInfo.labelsSection}.${currentInfo.id}`;
+  }
+
+    updateForm($event: FormGroup) {
+      this.reportForm = $event;
+      this.backendService.parentForm = $event;
+
+      this.setupDependentFieldWatchers();
+
+      this.backendService.parentForm.valueChanges.subscribe(x => {
+          this.readyToSearch = this.backendService.parentForm.valid;
+        }
+
+      );
+    }
+
+  private setupDependentFieldWatchers() {
+    this.fields
+      .filter(field => field.lookupFilterList && field.lookupFilterList.length > 0)
+      .forEach(field => {
+        const dependentFields = field.lookupFilterList.map(f => f.fieldName);
+
+        dependentFields.forEach(dependentFieldName => {
+          const dependentControl = this.reportForm.get(dependentFieldName);
+          if (dependentControl) {
+            dependentControl.valueChanges.subscribe(() => {
+              const targetControl = this.reportForm.get(field.property);
+              if (targetControl) {
+                targetControl.setValue([]);
+              }
+            });
+          }
+        });
+      });
+  }
+
+  isValidForm() {
+      return this.readyToSearch ;
+
+    }
+
+
+
+  emitUserAction($event: TablePageUserAction) {
+    $event.pageInfo = this.pageInfo;
+    this.doADrillDownAction($event);
+  }
+
+  emitHyperLinkAction($event: TablePageUserAction) {
+    if (!this.shouldProcessEventItem($event.item)) return;
+
+    const item = $event.item;
+    this.prepareDialogReportRequest(item);
+    const reportRequest = this.buildDialogReportRequest();
+    reportRequest.filterRequest.pageIndex = 0
+    const dialogRef = this.dialog.open(ReportDetailsDialogComponent, {
+      data: {
+        pageInfo: this.juniorPageInfo,
+        request: reportRequest,
+        columns: this.juniorColumns,
+        item,
+      },
+      height: '50vw',
+      maxWidth: '120vw',
+      direction: this.currentDirection,
+      disableClose: false,
+    });
+
+    dialogRef.afterOpened().subscribe(() => this.doHyperLinkAction($event));
+    dialogRef.afterClosed().subscribe(() => {});
+  }
+
+  private prepareDialogReportRequest(item: any): void {
+    this.dialogReportRequest = cloneDeep(this.reportRequest);
+    this.dialogReportRequest.filterRequest = { filters: [] };
+
+    this.addStandardFilters(item);
+    this.addOrReplaceFilter('isec1', 'iSec', item['isec_value']);
+    this.addFilterType();
+  }
+
+  private addStandardFilters(item: any): void {
+    const standardFilters = [
+      { key: 'period', value: item['period'] },
+      { key: 'year', value: item['year'] },
+      { key: 'sector', value: item['sectorCode'] },
+      { key: 'directorate', value: item['directorateCode'] },
+      { key: 'subTaxRate', value: item['tax_rate_code'] },
+    ];
+
+    standardFilters.forEach(({ key, value }) =>
+      this.dialogReportRequest.filterRequest.filters.push(
+        this.createFilter(key, key, value)
+      )
+    );
+  }
+
+  private addFilterType(): void {
+    const isTax = this.dialogReportRequest.actionKey?.toLowerCase().includes('tax');
+    const filterType = isTax ? 'TAX' : 'VALUE';
+
+    this.dialogReportRequest.filterRequest.filters.push(
+      this.createFilter('filterType', 'filterType', filterType)
+    );
+  }
+
+  private buildDialogReportRequest(): any {
+    return this.backendService.buildReportRequest(
+      this.juniorColumns,
+      `${this.juniorPageInfo.labelsSection}.${this.juniorPageInfo.id}`,
+      { ...this.dialogReportRequest.filterRequest },
+      '',
+      this.juniorPageInfo,
+      'LANDSCAPE'
+    );
+  }
+
+  private createFilter(key: string, fieldName: string, value: any): Filter {
+    return new Filter({
+      key,
+      fieldName,
+      label: '',
+      filterType: 'FILED_FILTER',
+      operator: 'EQUALS',
+      valueObject: value,
+    });
+  }
+
+  private addOrReplaceFilter(id: string, fieldName: string, value: any): void {
+    const filter = new Filter({
+      id,
+      fieldName,
+      label: '',
+      filterType: 'FILED_FILTER',
+      operator: 'EQUALS',
+      valueObject: value,
+    });
+
+    const filters = this.dialogReportRequest.filterRequest.filters;
+    const existingIndex = filters.findIndex((f: Filter) => f.id === id);
+
+    if (existingIndex !== -1) {
+      filters.splice(existingIndex, 1, filter);
+    } else {
+      filters.push(filter);
+    }
+  }
+
+
+
+  emitJuniorAction($event: TablePageUserAction) {
+    const juniorAction = JUNIOR_DOWN_ACTION;
+    juniorAction.pageInfo = this.drillDownPageInfo;
+    this.doJuniorAction($event);
+  }
+
+  drillDown() {
+    const drilldownaction = DRILL_DOWN_ACTION;
+    drilldownaction.pageInfo = this.drillDownPageInfo;
+    this.doADrillDownAction(drilldownaction);
+  }
+
+  private doJuniorAction($event: TablePageUserAction) {
+    if (this.juniorColumns && this.juniorPageInfo) {
+      if (this.enrichJuniorReportRequest) {
+        if (this.activeLevel === 2) {
+          this.isEditable = false;
+          this.disableExportAction = this.juniorPageInfo.hideReportsExtractButton || false;
+          this.juniorReportRequest = this.backendService.buildReportRequest(this.juniorColumns,
+            this.juniorPageInfo.labelsSection + '.' + this.juniorPageInfo.id,
+            this.reportRequest.filterRequest, '', this.juniorPageInfo, 'LANDSCAPE');
+          this.enrichJuniorReportRequest($event, this.juniorReportRequest);
+        }
+      }
+      this.activeLevel = this.activeLevel +1;
+    }
+  }
+  private doADrillDownAction($event: TablePageUserAction) {
+    if (this.drillDownColumns && this.drillDownPageInfo) {
+      if (this.enrichDrillDownReportRequest) {
+        if (this.activeLevel === 1) {
+          this.isEditable = false;
+          this.childReportRequest = this.backendService.buildReportRequest(this.drillDownColumns,
+            this.drillDownPageInfo.labelsSection + '.' + this.drillDownPageInfo.id,
+            this.reportRequest.filterRequest, '', this.drillDownPageInfo, 'LANDSCAPE');
+          this.disableExportAction = this.drillDownPageInfo.hideReportsExtractButton || false;
+          this.enrichDrillDownReportRequest($event, this.childReportRequest);
+        }
+      }
+      this.activeLevel = this.activeLevel +1;
+    }
+  }
+
+  private doHyperLinkAction($event: TablePageUserAction) {
+    if (this.enrichHyperLinkReportRequest) {
+          this.juniorReportRequest = this.backendService.buildReportRequest(this.juniorColumns,
+            this.juniorPageInfo.labelsSection + '.' + this.juniorPageInfo.id,
+            this.dialogReportRequest.filterRequest, '', this.juniorPageInfo, 'LANDSCAPE');
+          this.disableExportAction = this.juniorPageInfo.hideReportsExtractButton || false;
+          this.enrichHyperLinkReportRequest($event, this.juniorReportRequest);
+    }
+  }
+
+  extractReport(reportType: any) {
+      if (this.activeLevel === 1) {
+        this.reportRequest.reportType = reportType;
+        this.backendService.downloadReport(this.reportRequest, this.pageInfo.apiUri );
+      }
+      else if (this.activeLevel === 2) {
+        this.childReportRequest.reportType = reportType;
+        this.backendService.downloadReport(this.childReportRequest, this.drillDownPageInfo.apiUri );
+      }
+      else if (this.activeLevel === 3) {
+        this.juniorReportRequest.reportType = reportType;
+        this.backendService.downloadReport(this.juniorReportRequest, this.juniorPageInfo.apiUri );
+      }
+    }
+
+  goUp() {
+    this.isEditable = true;
+    this.activeLevel = this.activeLevel -1;
+    this.doAction(this.x);
+    this.reloadData = true;
+    if (this.activeLevel >1) {
+      this.isEditable = false;
+    }
+    this.disableExportAction = false
+  }
+
+  drillDownEnabled() {
+    return this.drillDownPageInfo && !this.hideDrillDownButton && !this.getIsEmptyList();
+  }
+
+  drillDownLabel() {
+    return `${this.pageInfo.labelsSection}.drillDownLabel` ;
+  }
+  getIsEmptyList() {
+    return this.backendService.isEmptyItems || this.disableExportAction === true;
+  }
+  clear() {
+    const currentUrl = this.router.url;
+    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
+      this.router.navigate([currentUrl]);
+    });
+
+    // if (this.reportForm) {
+    //   this.reportForm.reset();
+    //
+    //   this.fields.forEach(field => {
+    //     if (field.type === 'lookup' || field.type === 'multi-select') {
+    //       const control = this.reportForm.get(field.property);
+    //       if (control) {
+    //         control.setValue([]);
+    //       }
+    //     }
+    //   });
+    // }
+
+  }
+
+
+  isFormEmpty(): boolean {
+    if (!this.reportForm || !this.reportForm.value) {
+      return true;
+    }
+
+    return Object.values(this.reportForm.value).every(value => {
+      if (value === null || value === undefined || value === '') {
+        return true;
+      }
+      return Array.isArray(value) && value.length === 0;
+
+
+    });
+  }
+
+  shouldProcessEventItem(item: any): boolean {
+    const groupByProp = this.pageInfo?.groupByProperty;
+    const groupByValues = this.pageInfo?.groupByValue;
+
+    if (!groupByProp || !groupByValues || !item[groupByProp]) {
+      return true;
+    }
+
+    const value = item[groupByProp].toString();
+
+    return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
+  }
+}

package/src/lib/components/search-bar/search-bar.component.html

@@ -0,0 +1,62 @@
+<div class="mainSearchBar">
+  <div
+    fxLayout="row"
+    fxLayoutAlign="start center"
+    fxLayoutGap="16px"
+    class="search"
+    style="width: 100%; padding: 0 16px; margin-bottom: 16px;"
+  >
+
+    <mat-form-field appearance="outline" class="search__field" fxFlex="50">
+      <input
+        matInput
+        class="search__input"
+        placeholder="Search..."
+        (keydown.enter)= onSearch()
+        [(ngModel)]="searchValue" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="search__field" fxFlex="15">
+      <mat-select
+        class="search__toggle"
+        [(ngModel)]="searchType"
+        placeholder="Type">
+        <mat-option value="exact">Exact</mat-option>
+        <mat-option value="like">Like</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+
+    <mat-form-field appearance="outline" class="search__field" fxFlex="15">
+      <mat-select
+        class="search__toggle"
+        [(ngModel)]="selectedSortKey"
+        placeholder="Sort By">
+        <mat-option *ngFor="let col of getColumns()" [value]="col.property">
+          {{ labelKey(col) | translate }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="search__field" fxFlex="10">
+      <mat-select
+        class="search__toggle"
+        [(ngModel)]="selectedSortType"
+        placeholder="Type">
+        <mat-option value="ASC">ASC</mat-option>
+        <mat-option value="DESC">DESC</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <div
+      class="search__button"
+      fxLayout="row"
+      fxLayoutAlign="center center"
+      style="margin-bottom: 6px "
+    >
+      <div class="icon-design" (click)="onSearch()">
+          <mat-icon style="height: 30px; width: 30px; font-size: 30px; margin-bottom: 15px;cursor: pointer" color="primary">search</mat-icon>
+      </div>
+    </div>
+
+  </div>
+</div>

package/src/lib/components/search-bar/search-bar.component.scss

@@ -0,0 +1,8 @@
+::ng-deep .search__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  margin-top: -6px;
+
+}

package/src/lib/components/search-bar/search-bar.component.spec.ts

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