[HIMA-111] UI library

- Added folder libs to root of project where our libraries will be
- Moved search-input and card components to UI library
- Updated FE to use new UI library

apps/sales/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { NotifierState } from './core/store/state/notifier.state';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 
+
 const states = [
   FeedState,
   ProcessState,
@@ -78,7 +79,6 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
     BrowserAnimationsModule,
     AppRoutingModule,
     ComponentsModule,
-    SharedModule,
     HttpClientModule,
     NgxsModule.forRoot(states, { developmentMode: !environment.production }),
     NgxsReduxDevtoolsPluginModule.forRoot(),

apps/sales/src/app/modules/article-search/article-search.module.ts

@@ -9,6 +9,7 @@ import { ArticleSearchComponent } from './article-search.component';
 import { FilterComponent } from './components/filter/filter.component';
 import { FilterItemComponent } from './components/filter-item/filter-item.component';
 import { SelectedFilterItemComponent } from './components/selected-filter-item/selected-filter-item.component';
+import { CardModule, SearchInputModule } from '@libs/ui';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,13 @@ import { SelectedFilterItemComponent } from './components/selected-filter-item/s
     FilterComponent,
     SelectedFilterItemComponent
   ],
-  imports: [CommonModule, FormsModule, SharedModule, BarcodeSearchModule]
+  imports: [
+    CommonModule,
+    FormsModule,
+    SharedModule,
+    BarcodeSearchModule,
+    CardModule,
+    SearchInputModule
+  ]
 })
 export class ArticleSearchModule {}

apps/sales/src/app/modules/article-search/components/text-search/text-search.component.ts

@@ -1,4 +1,4 @@
-import { SearchComponent } from './../../../../shared/components/search-input/search-input.component';
+import { SearchInputComponent } from '@libs/ui';
 import { Observable } from 'rxjs';
 import { Breadcrumb } from 'apps/sales/src/app/core/models/breadcrumb.model';
 import { Filter } from 'apps/sales/src/app/core/models/filter.model';
@@ -68,7 +68,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
   @Input()
   searchParams = '';
 
-  @ViewChild('searchInput') searchInput: SearchComponent;
+  @ViewChild('searchInput') searchInput: SearchInputComponent;
 
   constructor(
     private store: Store,

apps/sales/src/app/modules/barcode-search/barcode-search.module.ts

@@ -10,6 +10,7 @@ import { BarcodeScannerScanditComponent } from './components/barcode-scanner-sca
 import { BarcodeScannerComponent } from './components/barcode-scanner/barcode-scanner.component';
 import { CameraErrorHandler } from './camera-error.handler';
 import { RecommendationsdModule } from '../recommendations/recommendations.module';
+import { CardModule } from '@libs/ui';
 
 const licenseKey =
   // tslint:disable-next-line: max-line-length
@@ -22,7 +23,8 @@ const engineLocation = 'assets/vendor/scandit/';
     CommonModule,
     ScanditSdkModule.forRoot(licenseKey, engineLocation),
     SharedModule,
-    RecommendationsdModule
+    RecommendationsdModule,
+    CardModule
   ],
   exports: [BarcodeSearchComponent],
   declarations: [

apps/sales/src/app/modules/cart/cart-module.ts

@@ -7,6 +7,7 @@ import { CartReviewComponent } from './components/cart-review/cart-review.compon
 import { PayMethodComponent } from './components/pay-method/pay-method.component';
 import { CartConfirmationComponent } from './components/cart-confirmation/cart-confirmation.component';
 import { RouterModule } from '@angular/router';
+import { CardModule } from '@libs/ui';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { RouterModule } from '@angular/router';
     FormsModule,
     ReactiveFormsModule,
     SharedModule,
-    RouterModule
+    RouterModule,
+    CardModule
   ]
 })
 export class CartModule {}

apps/sales/src/app/modules/components.module.ts

@@ -1,4 +1,4 @@
-import { CardComponent } from './../shared/components/card/card.component';
+// import { CardComponent } from './../shared/components/card/card.component';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { AppRoutingModule } from 'apps/sales/src/app/app-routing.module';
 import { HeaderComponent } from 'apps/sales/src/app/components/header/header.component';
@@ -40,7 +40,7 @@ import { RecommendationsdModule } from './recommendations/recommendations.module
     ProductCardComponent,
     ProductDetailsComponent,
     CheckoutComponent,
-    ProductCardLoadingComponent
+    ProductCardLoadingComponent,
   ],
   imports: [
     CommonModule,
@@ -56,7 +56,7 @@ import { RecommendationsdModule } from './recommendations/recommendations.module
     CustomerSearchModule,
     CartModule,
     ProcessModule,
-    RecommendationsdModule
+    RecommendationsdModule,
   ],
   exports: [
     HeaderComponent,
@@ -66,7 +66,7 @@ import { RecommendationsdModule } from './recommendations/recommendations.module
     MenuComponent,
     BreadcrumbsComponent,
     InfiniteScrollModule,
-    ProcessModule
+    ProcessModule,
   ]
 })
 export class ComponentsModule {}

apps/sales/src/app/modules/customer-search/components/search-customer-card/search-customer-card.component.ts

@@ -1,4 +1,4 @@
-import { SearchComponent } from './../../../../shared/components/search-input/search-input.component';
+import { SearchInputComponent } from '@libs/ui';
 import {
   Component,
   OnInit,
@@ -42,7 +42,7 @@ export class SearchCustomerCardComponent implements OnInit, AfterViewInit {
   searchError = '';
 
   @Input() searchParams = '';
-  @ViewChild('searchInput') searchInput: SearchComponent;
+  @ViewChild('searchInput') searchInput: SearchInputComponent;
 
   constructor(private store: Store, private router: Router) {}
 

apps/sales/src/app/modules/customer-search/customer-search.module.ts

@@ -13,6 +13,7 @@ import { SearchCustomerResultComponent } from './components/search-customer-resu
 import { EditBillingAddressComponent } from './pages/edit-billing-address/edit-billing-address.component';
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RouterModule } from '@angular/router';
+import { CardModule, SearchInputModule } from '@libs/ui';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,9 @@ import { RouterModule } from '@angular/router';
     RouterModule,
     ReactiveFormsModule,
     SharedModule,
-    NewsletterSignupModule
+    NewsletterSignupModule,
+    CardModule,
+    SearchInputModule
   ]
 })
 export class CustomerSearchModule {}

apps/sales/src/app/modules/debug/debug.module.ts

@@ -9,6 +9,7 @@ import { NewsletterDebugComponent } from './newsletter-debug/newsletter-debug.co
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RecommendationDebugComponent } from './recommendations-animation/recommendations-animation.component';
 import { LoadingAnimationComponent } from './loading-animation/loading-animation.component';
+import { CardModule } from '@libs/ui';
 
 const routes: Routes = [
   {
@@ -36,7 +37,8 @@ const routes: Routes = [
     SharedModule,
     RouterModule.forChild(routes),
     NewsletterSignupModule,
-    CustomerSearchModule
+    CustomerSearchModule,
+    CardModule
   ],
   exports: [],
   declarations: [

apps/sales/src/app/shared/components/card/card.component.scss

@@ -1,12 +0,0 @@
-@import '../../../../assets/scss/variables';
-
-:host {
-  display: block;
-  position: relative;
-  background-color: white;
-  margin-top: 5px;
-  -moz-box-shadow: 0 0 3px $hima-content-shadow-color;
-  -webkit-box-shadow: 0 0 3px $hima-content-shadow-color;
-  box-shadow: 0 0 3px $hima-content-shadow-color;
-  border-radius: 4px;
-}

apps/sales/src/app/shared/components/card/card.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-card',
-  template: `
-    <ng-content></ng-content>
-  `,
-  styleUrls: ['./card.component.scss']
-})
-export class CardComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

apps/sales/src/app/shared/components/search-input/search-input.component.scss

@@ -1,132 +0,0 @@
-@import '../../../../assets/scss/variables';
-
-:host {
-  display: block;
-  position: relative;
-  width: 100%;
-}
-
-.search-wrapper {
-  margin-top: 20px;
-  position: relative;
-  height: 60px;
-  border-radius: 40px;
-  border: 1px solid $color-inactive;
-  outline: none;
-  display: flex;
-  align-items: center;
-}
-
-.search-box {
-  width: 100%;
-  height: 49px;
-  position: relative;
-  outline: none;
-  border: none;
-  background-color: transparent;
-  margin-left: 20px;
-  padding-top: 5px;
-  text-overflow: ellipsis;
-  padding-bottom: 5px;
-  color: black;
-  font-weight: bold;
-  font-size: 21px;
-  z-index: 7;
-  caret-color: #f70400;
-}
-
-.autocomplete {
-  position: relative;
-  left: 21px;
-  top: -57px;
-  z-index: 1;
-  color: silver;
-  font-weight: bold;
-  font-size: 21px;
-  width: 180%;
-  height: 49px;
-  outline: none;
-  border: none;
-  background-color: white;
-}
-
-.autocomplete-result-item {
-  width: 90%;
-  padding-top: 12px;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 12px;
-  
-  span {
-    font-size: 16px;
-    color: #000000;
-  }
-}
-
-.active {
-  background-color: #E9EDF9;
-}
-
-.autocomplete-wrapper {
-  overflow: inherit;
-  position: absolute;
-  box-shadow: 0 0 24px 2px #dce2e9;
-  background-color: white;
-  width: 100%;
-  margin-top: 10px;
-  z-index: 8;
-  border-radius: 4px;
-  padding-bottom: 15px;
-  max-height: 300px;
-  overflow: scroll;
-}
-
-.search-icon {
-  z-index: 2;
-  width: 24px;
-  min-height: 24px;
-  margin-right: 26px;
-  margin-left: 20px;
-}
-
-.clear-icon {
-  z-index: 2;
-  width: 24px;
-  min-height: 24px;
-  margin-left: 20px;
-}
-
-.search-box::placeholder {
-  color: black;
-}
-
-.error-message {
-  animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
-  transform: translate3d(0, 0, 0);
-  font-size: 14px;
-  font-weight: bold;
-  text-align: left;
-  margin-left: 20px;
-  z-index: 100;
-
-  color: $hima-error-msg-color;
-  white-space: nowrap;
-}
-
-@keyframes shake {
-  10% {
-    transform: translate3d(-1px, 0, 0);
-  }
-
-  50% {
-    transform: translate3d(2px, 0, 0);
-  }
-
-  70% {
-    transform: translate3d(-3px, 0, 0);
-  }
-
-  90% {
-    transform: translate3d(3px, 0, 0);
-  }
-}

apps/sales/src/app/shared/components/search-input/search-input.component.ts

@@ -1,91 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  ViewChild,
-  ElementRef,
-  EventEmitter
-} from '@angular/core';
-
-@Component({
-  selector: 'app-search',
-  template: `
-    <div class="search-wrapper">
-      <input
-        [ngModel]="input"
-        (ngModelChange)="change($event)"
-        (keypress)="keyHandler($event)"
-        class="search-box"
-        [placeholder]="placeholder"
-        type="text"
-        #search
-        autofocus
-      />
-      <span *ngIf="error" class="error-message">{{ error }}</span>
-      <img
-        (click)="clear()"
-        *ngIf="input.length"
-        class="clear-icon"
-        src="/assets/images/close.svg"
-      />
-      <img
-        (click)="emitSearch(input)"
-        class="search-icon"
-        src="/assets/images/Search_Icon.svg"
-      />
-    </div>
-    <div class="autocomplete-wrapper" *ngIf="autocompleteResults.length > 0 && input && showAutocomplete === true">
-     <div *ngFor="let result of autocompleteResults">
-      <div class="autocomplete-result-item align-left" (click)="selectAuto(result)">
-        <span>{{result}}</span>
-      </div>
-     </div>
-    </div>
-  `,
-  styleUrls: ['./search-input.component.scss']
-})
-export class SearchComponent implements OnInit {
-  @Input() placeholder = '';
-  @Input() input = '';
-  @Input() error = '';
-  @Input() showAutocomplete;
-  @Input() autocompleteResults = [];
-  @Output() inputChange = new EventEmitter();
-  @Output() search = new EventEmitter();
-  @Output() keypress = new EventEmitter();
-  @ViewChild('search') searchInput: ElementRef;
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  focus() {
-    this.searchInput.nativeElement.focus();
-  }
-
-  change(text: string) {
-    this.input = text;
-    this.inputChange.emit(text);
-  }
-
-  clear() {
-    this.change('');
-    this.error = '';
-  }
-
-  emitSearch(input: string) {
-    this.search.emit(input);
-  }
-
-  selectAuto (result: string) {
-    this.input = result;
-    this.search.emit(this.input);
-  }
-
-  keyHandler(event: any) {
-    if (event.key === 'Enter') {
-      this.search.emit(this.input);
-    }
-  }
-}

apps/sales/src/app/shared/shared.module.ts

@@ -1,17 +1,13 @@
 import { FormsModule } from '@angular/forms';
-import { CardComponent } from './components/card/card.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ModalComponent } from './components/modal/modal.component';
-import { SearchComponent } from './components/search-input/search-input.component';
 import { BackArrowComponent } from './components/back-arrow/back-arrow.component';
 
 const components = [
-  CardComponent,
   LoadingComponent,
   ModalComponent,
-  SearchComponent,
   BackArrowComponent
 ];
 @NgModule({