[HIMA-50] - started on adrss change screen

src/app/modules/customer-search/components/billing-address/billing-address.component.html

@@ -0,0 +1,24 @@
+<div class="description">
+  <span>Welche Adresse möchten Sie als Rechnungsadresse verwenden?</span>
+</div>
+<div class="adresses">
+  <app-card *ngFor="let entry of addresses" class="entry">
+    <div class="radio" (click)="select(entry)">
+      <div class="selected" *ngIf="entry.selected"></div>
+    </div>
+    <span class="name">{{ entry.name }}</span>
+    <input type="radio" value="{{ entry.address }}" />
+    <span class="button"></span>
+  </app-card>
+</div>
+
+<h1 class="warning">
+  Neue Rechnungsadresse hinzufüngen
+</h1>
+
+<div class="default">
+  <span class="checkbox" (click)="selected = !selected">
+    <img class="checked" src="/assets/images/Check.svg" *ngIf="selected" />
+  </span>
+  <span class="text">Rechnungsadresse entspricht der Lieferadresse</span>
+</div>

src/app/modules/customer-search/components/billing-address/billing-address.component.scss

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+.description {
+  font-size: 22px;
+  width: 359px;
+  padding-top: 15px;
+  text-align: center;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.warning {
+  font-family: 'Open Sans';
+  font-size: 18px;
+  font-weight: bold;
+  color: rgba(247, 4, 0, 1);
+  text-align: left;
+  line-height: 21px;
+  margin-top: 40px;
+  margin-bottom: 35px;
+}
+
+.default {
+  font-family: 'Open Sans';
+  font-size: 16px;
+  color: rgba(0, 0, 0, 1);
+  margin-bottom: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  .checkbox {
+    display: inline-block;
+    min-height: 22px;
+    min-width: 22px;
+    max-height: 22px;
+    max-width: 22px;
+    height: 22px;
+    width: 22px;
+    border: solid 1px #a3b4c8;
+    margin: 0 10px;
+
+    .checked {
+      margin-left: 4px;
+    }
+  }
+}
+.entry {
+  width: 100%;
+  flex: 1;
+  padding: 20px 10px;
+  margin-top: -5px;
+}
+.radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  width: 20px;
+  border: 1px solid #a8b8cb;
+  border-radius: 10px;
+
+  .selected {
+    height: 8px;
+    width: 8px;
+    border: 1px solid #172062;
+    border-radius: 10px;
+    background-color: #172062;
+  }
+}

src/app/modules/customer-search/components/billing-address/billing-address.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-billing-address',
+  templateUrl: './billing-address.component.html',
+  styleUrls: ['./billing-address.component.scss']
+})
+export class BillingAddressComponent implements OnInit {
+  addresses = [
+    {
+      name: 'karlo karlo',
+      address: 'bundenstrasse 12',
+      selected: true
+    },
+    {
+      name: 'karlo karlo',
+      address: 'sdfsdf 12',
+      selected: false
+    }
+  ];
+  ngOnInit(): void {}
+
+  select(entry) {
+      this.addresses.forEach(e => e.selected = false);
+      entry.selected = true;
+  }
+}

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

@@ -1,13 +1,15 @@
+import { SharedModule } from 'src/app/shared/shared.module';
+
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+import { BillingAddressComponent } from './components/billing-address/billing-address.component';
 import { CreateCustomerCardComponent } from './components/create-customer-card/create-customer-card.component';
-import { EditCustomerCardComponent } from './components/edit-customer-card/edit-customer-card.component';
 import { CustomerSearchComponent } from './components/customer-search/customer-search.component';
+import { EditCustomerCardComponent } from './components/edit-customer-card/edit-customer-card.component';
 import { SearchCustomerCardComponent } from './components/search-customer-card/search-customer-card.component';
 import { SearchCustomerResultComponent } from './components/search-customer-result/search-customer-result.component';
-import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -15,14 +17,16 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SearchCustomerCardComponent,
     CreateCustomerCardComponent,
     CustomerSearchComponent,
-    EditCustomerCardComponent
+    EditCustomerCardComponent,
+    BillingAddressComponent
   ],
   exports: [
     SearchCustomerResultComponent,
     SearchCustomerCardComponent,
     CreateCustomerCardComponent,
     CustomerSearchComponent,
-    EditCustomerCardComponent
+    EditCustomerCardComponent,
+    BillingAddressComponent
   ],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule]
 })

src/app/modules/customer-search/index.ts

@@ -1,3 +1,4 @@
+export * from './components/billing-address/billing-address.component';
 export * from './components/edit-customer-card/edit-customer-card.component';
 export * from './components/search-customer-result/search-customer-result.component';
 export * from './components/search-customer-card/search-customer-card.component';

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

@@ -1,3 +1,4 @@
+import { CustomerSearchModule } from './../customer-search/customer-search.module';
 import { ComponentsModule } from './../components.module';
 import { CardStackAnimationComponent } from './card-stack-animation/card-stack-animation.component';
 import { NgModule } from '@angular/core';
@@ -34,7 +35,8 @@ const routes: Routes = [
     CommonModule,
     SharedModule,
     RouterModule.forChild(routes),
-    NewsletterSignupModule
+    NewsletterSignupModule,
+    CustomerSearchModule
   ],
   exports: [],
   declarations: [

src/app/modules/debug/recommendations-animation/recommendations-animation.component.html

@@ -3,9 +3,7 @@
     Rechnungsadresse
   </h1>
   <div class="placeholder" *ngIf="expanded" [@shrinkMain]="'second'">
-    <img
-      src="https://via.placeholder.com/500x400.png?text=Rechnungsadresse+component"
-    />
+    <app-billing-address></app-billing-address>
   </div>
 </app-card>
 <app-card class="newsletter">

src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss

@@ -3,6 +3,8 @@
   flex-direction: column;
   align-items: center;
   padding-top: 40px;
+  margin-left: -36px;
+  margin-right: -16px;
 }
 
 .tabtitle {