From 1fdf793a7bf65fef596fe88001e275a2ee120214 Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Tue, 7 Jul 2020 09:48:11 +0200
Subject: [PATCH] TSK-1324: Rename selectors in shared component

---
 .../access-items-management.component.html    | 12 ++---
 .../classification-details.component.html     | 22 ++++-----
 .../classification-list.component.html        |  6 +--
 .../workbasket-access-items.component.html    |  6 +--
 .../workbasket-details.component.html         |  2 +-
 .../workbasket-dual-list.component.html       |  6 +--
 .../workbasket-information.component.html     | 26 +++++------
 .../workbasket-list-toolbar.component.html    |  4 +-
 .../workbasket-list.component.html            |  6 +--
 .../workbasket-list.component.spec.ts         |  2 +-
 web/src/app/app.component.html                |  8 ++--
 .../task-query/task-query.component.html      | 14 +++---
 .../date-picker/date-picker.component.ts      |  2 +-
 .../components/dropdown/dropdown.component.ts |  2 +-
 .../field-error-display.component.ts          |  2 +-
 .../components/filter/filter.component.html   |  2 +-
 .../components/filter/filter.component.ts     |  2 +-
 .../master-and-detail.component.ts            |  2 +-
 .../components/nav-bar/nav-bar.component.html |  2 +-
 .../components/nav-bar/nav-bar.component.ts   |  2 +-
 .../no-access/no-access.component.ts          |  2 +-
 .../number-picker/number-picker.component.ts  |  2 +-
 .../pagination/pagination.component.ts        |  2 +-
 .../popup/dialog-pop-up.component.ts          |  2 +-
 .../progress-bar/progress-bar.component.ts    |  2 +-
 .../shared/components/sort/sort.component.ts  |  8 +---
 .../components/spinner/spinner.component.ts   |  2 +-
 .../components/toast/toast.component.ts       |  2 +-
 .../shared/components/tree/tree.component.ts  |  2 +-
 .../type-ahead/type-ahead.component.html      |  4 +-
 .../type-ahead/type-ahead.component.ts        |  2 +-
 .../type-ahead/type-ahead.mock.component.ts   |  2 +-
 .../user-information.component.ts             |  2 +-
 .../task-list-toolbar.component.html          |  6 +--
 .../task-master/task-master.component.html    |  4 +-
 .../components/task/task.component.html       |  2 +-
 .../general-fields.component.html             | 46 +++++++++----------
 .../taskdetails/taskdetails.component.html    |  2 +-
 web/src/theme/_site.scss                      |  4 +-
 39 files changed, 112 insertions(+), 116 deletions(-)

diff --git a/web/src/app/administration/components/access-items-management/access-items-management.component.html b/web/src/app/administration/components/access-items-management/access-items-management.component.html
index 5ff4c2cf7..591e36773 100644
--- a/web/src/app/administration/components/access-items-management/access-items-management.component.html
+++ b/web/src/app/administration/components/access-items-management/access-items-management.component.html
@@ -4,8 +4,8 @@
   </div>
   <div class="panel-body">
     <div class="col-md-6 col-md-offset-3 margin">
-      <taskana-type-ahead #accesId="ngModel" name="accessIdSelected" [(ngModel)]="accessIdSelected" placeHolderMessage="Search for access id..."
-        (selectedItem)="onSelectAccessId($event)" displayError=true></taskana-type-ahead>
+      <taskana-shared-type-ahead #accesId="ngModel" name="accessIdSelected" [(ngModel)]="accessIdSelected" placeHolderMessage="Search for access id..."
+                                 (selectedItem)="onSelectAccessId($event)" displayError=true></taskana-shared-type-ahead>
     </div>
     <div *ngIf="!AccessItemsForm" class="center-block no-detail col-xs-12">
       <h3 class="grey">Select an access id</h3>
@@ -17,7 +17,7 @@
           <thead>
             <tr>
               <th>
-                <taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" menuPosition="left" [defaultSortBy]="accessItemDefaultSortBy"></taskana-sort>
+                <taskana-shared-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" menuPosition="left" [defaultSortBy]="accessItemDefaultSortBy"></taskana-shared-sort>
               </th>
               <th class="text-align min-width">Workbasket Key</th>
               <th colspan="2" class="text-align">Access Id</th>
@@ -69,9 +69,9 @@
               </td>
               <td *ngIf="(accessItemsCustomization$ | async)?.accessId.lookupField else accessIdInput" colspan="2" class="text-align text-width taskana-type-ahead">
                 <div>
-                  <taskana-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required"
-                    [validationValue]="toogleValidationAccessIdMap.get(index)" [displayError]="!isFieldValid('accessItem.value.accessId', index)"
-                    [disable]=true></taskana-type-ahead>
+                  <taskana-shared-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required"
+                                             [validationValue]="toogleValidationAccessIdMap.get(index)" [displayError]="!isFieldValid('accessItem.value.accessId', index)"
+                                             [disable]=true></taskana-shared-type-ahead>
                 </div>
               </td>
               <ng-template #accessIdInput>
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.html b/web/src/app/administration/components/classification-details/classification-details.component.html
index c8ecf9a95..77d416be9 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.html
+++ b/web/src/app/administration/components/classification-details/classification-details.component.html
@@ -1,5 +1,5 @@
 <div class="container-scrollable">
-  <taskana-spinner [isRunning]="requestInProgress" class="floating" (spinnerIsRunning)="spinnerRunning($event)"></taskana-spinner>
+  <taskana-shared-spinner [isRunning]="requestInProgress" class="floating" (spinnerIsRunning)="spinnerRunning($event)"></taskana-shared-spinner>
   <div id="classification-details" *ngIf="classification && !spinnerIsRunning">
     <div id="classification" class="panel panel-default classification">
 
@@ -35,9 +35,9 @@
                 <label for="classification-key" class="control-label">Key</label>
                 <input type="text" required #key="ngModel" [disabled]="!action" class="form-control"
                        id="classification-key" placeholder="Key" [(ngModel)]="classification.key" name="classification.key">
-                <taskana-field-error-display *ngIf="action" [displayError]="!isFieldValid('classification.key')"
-                  [validationTrigger]="this.toogleValidationMap.get('classification.key')" errorMessage="* Key is required">
-                </taskana-field-error-display>
+                <taskana-shared-field-error-display *ngIf="action" [displayError]="!isFieldValid('classification.key')"
+                                                    [validationTrigger]="this.toogleValidationMap.get('classification.key')" errorMessage="* Key is required">
+                </taskana-shared-field-error-display>
               </div>
 
               <!-- NAME -->
@@ -45,9 +45,9 @@
                 <label for="classification-name" class="control-label">Name</label>
                 <input type="text" required #name="ngModel" class="form-control" id="classification-name" placeholder="Name"
                   [(ngModel)]="classification.name" name="classification.name">
-                <taskana-field-error-display [displayError]="!isFieldValid('classification.name')" [validationTrigger]="this.toogleValidationMap.get('classification.name')"
-                  errorMessage="* Name is required">
-                </taskana-field-error-display>
+                <taskana-shared-field-error-display [displayError]="!isFieldValid('classification.name')" [validationTrigger]="this.toogleValidationMap.get('classification.name')"
+                                                    errorMessage="* Name is required">
+                </taskana-shared-field-error-display>
               </div>
 
               <!-- DOMAIN -->
@@ -68,10 +68,10 @@
               <div class="row">
                 <div class="form-group required col-xs-6">
                   <label for="classification-priority" class="control-label">Priority</label>
-                  <taskana-number-picker [(ngModel)]="classification.priority" name="classification.priority" id="classification-priority" [required]="true"></taskana-number-picker>
-                  <taskana-field-error-display [displayError]="!isFieldValid('classification.priority')" [validationTrigger]="this.toogleValidationMap.get('classification.priority')"
-                                               errorMessage="* Priority is required">
-                  </taskana-field-error-display>
+                  <taskana-shared-number-picker [(ngModel)]="classification.priority" name="classification.priority" id="classification-priority" [required]="true"></taskana-shared-number-picker>
+                  <taskana-shared-field-error-display [displayError]="!isFieldValid('classification.priority')" [validationTrigger]="this.toogleValidationMap.get('classification.priority')"
+                                                      errorMessage="* Priority is required">
+                  </taskana-shared-field-error-display>
                 </div>
                 <div class="form-group required btn-group col-xs-6">
                   <label for="classification-category" class="control-label">Category</label>
diff --git a/web/src/app/administration/components/classification-list/classification-list.component.html b/web/src/app/administration/components/classification-list/classification-list.component.html
index 8271957b2..afdf6674c 100644
--- a/web/src/app/administration/components/classification-list/classification-list.component.html
+++ b/web/src/app/administration/components/classification-list/classification-list.component.html
@@ -51,9 +51,9 @@
 	<div class="col-xs-12 horizontal-bottom-divider"></div>
 
 	<!-- CLASSIFICATION TREE -->
-	<taskana-spinner class="col-xs-12" [isRunning]="requestInProgress" positionClass="centered-spinner-whole-screen"></taskana-spinner>
-	<taskana-tree class="col-xs-12" *ngIf="(classifications && classifications.length) else empty_classifications"
-	 [filterText]="inputValue" [filterIcon]="selectedCategory" (switchTaskanaSpinnerEmit)="requestInProgress=$event"></taskana-tree>
+	<taskana-shared-spinner class="col-xs-12" [isRunning]="requestInProgress" positionClass="centered-spinner-whole-screen"></taskana-shared-spinner>
+	<taskana-shared-tree class="col-xs-12" *ngIf="(classifications && classifications.length) else empty_classifications"
+						 [filterText]="inputValue" [filterIcon]="selectedCategory" (switchTaskanaSpinnerEmit)="requestInProgress=$event"></taskana-shared-tree>
 	<ng-template #empty_classifications>
 		<div *ngIf="!requestInProgress" class="col-xs-12 container-no-items center-block">
 			<h3 class="grey">There are no classifications</h3>
diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html
index 183fd50f4..243b3fc09 100644
--- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html
+++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html
@@ -41,8 +41,8 @@
 						 [ngClass]="{
 							'has-warning': (accessItemsClone[index].accessId !== accessItem.value.accessId),
 							'has-error': !accessItem.value.accessId }">
-							<taskana-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required" [validationValue]="toggleValidationAccessIdMap.get(index)"
-							 [displayError]="!isFieldValid('accessItem.value.accessId', index)" (selectedItem)="accessItemSelected($event, index)" (inputField)="focusNewInput($event)"></taskana-type-ahead>
+							<taskana-shared-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required" [validationValue]="toggleValidationAccessIdMap.get(index)"
+													   [displayError]="!isFieldValid('accessItem.value.accessId', index)" (selectedItem)="accessItemSelected($event, index)" (inputField)="focusNewInput($event)"></taskana-shared-type-ahead>
 						</td>
 						<ng-template #accessIdInput>
 							<td class="input-group text-align text-width">
@@ -92,6 +92,6 @@
 			<span class="material-icons md-20 green-blue">add</span>
 			<span>Add new access</span>
 		</button>
-		<taskana-spinner [isRunning]="requestInProgress" [positionClass]=""></taskana-spinner>
+		<taskana-shared-spinner [isRunning]="requestInProgress" [positionClass]=""></taskana-shared-spinner>
 	</div>
 </div>
diff --git a/web/src/app/administration/components/workbasket-details/workbasket-details.component.html b/web/src/app/administration/components/workbasket-details/workbasket-details.component.html
index 65ec82c03..878a8ebd1 100644
--- a/web/src/app/administration/components/workbasket-details/workbasket-details.component.html
+++ b/web/src/app/administration/components/workbasket-details/workbasket-details.component.html
@@ -1,5 +1,5 @@
 <div class="container-scrollable">
-    <taskana-spinner [isRunning]="requestInProgress"></taskana-spinner>
+    <taskana-shared-spinner [isRunning]="requestInProgress"></taskana-shared-spinner>
     <div id="workbasket-details" *ngIf="workbasket && !requestInProgress">
         <ul class="nav nav-tabs" role="tablist">
             <li *ngIf="showDetail" class="visible-xs visible-sm hidden">
diff --git a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html
index 48897f556..921ae5036 100644
--- a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html
+++ b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html
@@ -16,9 +16,9 @@
 		</div>
 	</div>
 	<div [@toggleDown]="toolbarState">
-		<taskana-filter (performFilter)="performAvailableFilter($event)"></taskana-filter>
+		<taskana-shared-filter (performFilter)="performAvailableFilter($event)"></taskana-shared-filter>
 	</div>
-	<taskana-spinner [isRunning]="requestInProgress" positionClass="centered-spinner" class="floating"></taskana-spinner>
+	<taskana-shared-spinner [isRunning]="requestInProgress" positionClass="centered-spinner" class="floating"></taskana-shared-spinner>
   <div infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" class="infinite-scroll">
 		<ul class="list-group">
 			<li class="list-group-item" *ngFor="let distributionTarget of distributionTargets | selectWorkbaskets: distributionTargetsSelected: side"
@@ -37,7 +37,7 @@
 				</div>
       </li>
       <li class="list-group-item" *ngIf="loadingItems">
-        <taskana-spinner [isRunning]="loadingItems" positionClass="centered-spinner" class="floating"></taskana-spinner>
+        <taskana-shared-spinner [isRunning]="loadingItems" positionClass="centered-spinner" class="floating"></taskana-shared-spinner>
       </li>
 		</ul>
 	</div>
diff --git a/web/src/app/administration/components/workbasket-information/workbasket-information.component.html b/web/src/app/administration/components/workbasket-information/workbasket-information.component.html
index 4e19da86f..cb7e7aa6e 100644
--- a/web/src/app/administration/components/workbasket-information/workbasket-information.component.html
+++ b/web/src/app/administration/components/workbasket-information/workbasket-information.component.html
@@ -1,4 +1,4 @@
-<taskana-spinner [isRunning]="requestInProgress" class="floating"></taskana-spinner>
+<taskana-shared-spinner [isRunning]="requestInProgress" class="floating"></taskana-shared-spinner>
 <div *ngIf="workbasket" id="wb-information" class="panel panel-default">
     <div class="panel-heading">
         <div class="pull-right btn-group">
@@ -30,29 +30,29 @@
                     <label for="wb-key" class="control-label">Key</label>
                     <input type="text" required #key="ngModel" class="form-control" id="wb-key" placeholder="Key"
                         [(ngModel)]="workbasket.key" name="workbasket.key">
-                    <taskana-field-error-display [displayError]="!isFieldValid('workbasket.key')" [validationTrigger]="this.toogleValidationMap.get('workbasket.key')"
-                        errorMessage="* Key is required">
-                    </taskana-field-error-display>
+                    <taskana-shared-field-error-display [displayError]="!isFieldValid('workbasket.key')" [validationTrigger]="this.toogleValidationMap.get('workbasket.key')"
+                                                        errorMessage="* Key is required">
+                    </taskana-shared-field-error-display>
                 </div>
                 <div class="form-group required">
                     <label for="wb-name" class="control-label">Name</label>
                     <input type="text" required #name="ngModel" class="form-control" id="wb-name" placeholder="Name"
                         [(ngModel)]="workbasket.name" name="workbasket.name">
-                    <taskana-field-error-display [displayError]="!isFieldValid('workbasket.name')" [validationTrigger]="this.toogleValidationMap.get('workbasket.name')"
-                        errorMessage="* Name is required">
-                    </taskana-field-error-display>
+                    <taskana-shared-field-error-display [displayError]="!isFieldValid('workbasket.name')" [validationTrigger]="this.toogleValidationMap.get('workbasket.name')"
+                                                        errorMessage="* Name is required">
+                    </taskana-shared-field-error-display>
                 </div>
                 <div class="input-group form-group col-xs-12 required">
                     <label for="wb-owner" class="control-label ">Owner</label>
-                    <taskana-type-ahead *ngIf="(workbasketsCustomisation$ | async)?.information?.lookupField else ownerInput" required #owner="ngModel" name="workbasket.owner"
-                        [(ngModel)]="workbasket.owner" placeHolderMessage="* Owner is required" [validationValue]="this.toogleValidationMap.get('workbasket.owner')"
-                        [displayError]="!isFieldValid('workbasket.owner')" width="100%"></taskana-type-ahead>
+                    <taskana-shared-type-ahead *ngIf="(workbasketsCustomisation$ | async)?.information?.lookupField else ownerInput" required #owner="ngModel" name="workbasket.owner"
+                                               [(ngModel)]="workbasket.owner" placeHolderMessage="* Owner is required" [validationValue]="this.toogleValidationMap.get('workbasket.owner')"
+                                               [displayError]="!isFieldValid('workbasket.owner')" width="100%"></taskana-shared-type-ahead>
                     <ng-template #ownerInput>
                         <input type="text" required #owner="ngModel" class="form-control" id="wb-owner" placeholder="Owner"
                             [(ngModel)]="workbasket.owner" name="workbasket.owner">
-                        <taskana-field-error-display [displayError]="!isFieldValid('workbasket.owner')"
-                            [validationTrigger]="this.toogleValidationMap.get('workbasket.owner')" errorMessage="* Owner is required">
-                        </taskana-field-error-display>
+                        <taskana-shared-field-error-display [displayError]="!isFieldValid('workbasket.owner')"
+                                                            [validationTrigger]="this.toogleValidationMap.get('workbasket.owner')" errorMessage="* Owner is required">
+                        </taskana-shared-field-error-display>
                     </ng-template>
                 </div>
                 <div class="form-group ">
diff --git a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.html b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.html
index 0c246ca05..72910e701 100644
--- a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.html
+++ b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.html
@@ -7,7 +7,7 @@
       <taskana-administration-import-export class="btn-group" [currentSelection]="selectionToImport"></taskana-administration-import-export>
     </div>
     <div class="margin-right pull-right btn-group">
-      <taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group" [defaultSortBy]="workbasketDefaultSortBy"></taskana-sort>
+      <taskana-shared-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group" [defaultSortBy]="workbasketDefaultSortBy"></taskana-shared-sort>
       <button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState"
         data-toggle="tooltip" title="Filter">
         <span class="material-icons md-20 blue">{{!toolbarState? 'search' : 'expand_less'}}</span>
@@ -15,6 +15,6 @@
     </div>
   </div>
   <div [@toggleDown]="toolbarState" class="row no-overflow">
-    <taskana-filter (performFilter)="filtering($event)"></taskana-filter>
+    <taskana-shared-filter (performFilter)="filtering($event)"></taskana-shared-filter>
   </div>
 </li>
diff --git a/web/src/app/administration/components/workbasket-list/workbasket-list.component.html b/web/src/app/administration/components/workbasket-list/workbasket-list.component.html
index 9798bb2a3..08c7d2f40 100644
--- a/web/src/app/administration/components/workbasket-list/workbasket-list.component.html
+++ b/web/src/app/administration/components/workbasket-list/workbasket-list.component.html
@@ -28,7 +28,7 @@
       </li>
     </ul>
   </div>
-  <taskana-spinner [isRunning]="requestInProgress"></taskana-spinner>
+  <taskana-shared-spinner [isRunning]="requestInProgress"></taskana-shared-spinner>
   <ng-template #empty_workbaskets>
     <div *ngIf="!requestInProgress" class="col-xs-12 container-no-items center-block">
       <h3 class="grey">There are no workbaskets</h3>
@@ -36,5 +36,5 @@
     </div>
   </ng-template>
 </div>
-<taskana-pagination [(page)]="workbasketsResource ? workbasketsResource.page : workbasketsResource"
-  [type]="type" [numberOfItems]="workbaskets.length" (changePage)="changePage($event)"></taskana-pagination>
+<taskana-shared-pagination [(page)]="workbasketsResource ? workbasketsResource.page : workbasketsResource"
+                           [type]="type" [numberOfItems]="workbaskets.length" (changePage)="changePage($event)"></taskana-shared-pagination>
diff --git a/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts b/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts
index ee8cf25bd..355ee4a08 100644
--- a/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts
+++ b/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts
@@ -31,7 +31,7 @@ class DummyDetailComponent {
 }
 
 @Component({
-  selector: 'taskana-pagination',
+  selector: 'taskana-shared-pagination',
   template: 'dummydetail'
 })
 class PaginationComponent {
diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index 4d6d167f4..843f58c9b 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -1,9 +1,9 @@
-<taskana-nav-bar></taskana-nav-bar>
+<taskana-shared-nav-bar></taskana-shared-nav-bar>
 <div (window:resize)="onResize()" class="container-fluid container-main">
     <div class="row ">
         <router-outlet></router-outlet>
-        <taskana-spinner [isRunning]="requestInProgress" isModal=true></taskana-spinner>
-        <taskana-progress-bar [ngClass]="{hidden: currentProgressValue === 0}" currentValue={{currentProgressValue}}></taskana-progress-bar>
+        <taskana-shared-spinner [isRunning]="requestInProgress" isModal=true></taskana-shared-spinner>
+        <taskana-shared-progress-bar [ngClass]="{hidden: currentProgressValue === 0}" currentValue={{currentProgressValue}}></taskana-shared-progress-bar>
     </div>
-  <taskana-type-ahead></taskana-type-ahead>
+  <taskana-shared-type-ahead></taskana-shared-type-ahead>
 </div>
diff --git a/web/src/app/history/task-query/task-query.component.html b/web/src/app/history/task-query/task-query.component.html
index fb6ff92dc..d11bb6783 100644
--- a/web/src/app/history/task-query/task-query.component.html
+++ b/web/src/app/history/task-query/task-query.component.html
@@ -49,10 +49,10 @@
             <ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
               <div *ngIf="isDate(taskHeader.key)"
                    class="table-cell table-cell--bold table-cell--justify divDate">
-                <taskana-date-picker (dateOutput)="updateDate($event)" [id]="'created'"
-                                     [name]="'this.created'" formControlName="{{taskHeader.key}}"
-                                     placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
-                                     type="text"></taskana-date-picker>
+                <taskana-shared-date-picker (dateOutput)="updateDate($event)" [id]="'created'"
+                                            [name]="'this.created'" formControlName="{{taskHeader.key}}"
+                                            placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
+                                            type="text"></taskana-shared-date-picker>
               </div>
               <div
                   *ngIf="!isDate(taskHeader.key) && filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
@@ -108,9 +108,9 @@
       </form>
     </div>
     <div *ngIf="taskQueryResource" class="divTablePagination">
-      <taskana-pagination (changePage)="changePage($event)" [(page)]="taskQueryResource.page"
-                          [numberOfItems]="taskQuery.length"
-                          type="Entries"></taskana-pagination>
+      <taskana-shared-pagination (changePage)="changePage($event)" [(page)]="taskQueryResource.page"
+                                 [numberOfItems]="taskQuery.length"
+                                 type="Entries"></taskana-shared-pagination>
     </div>
   </div>
 </div>
diff --git a/web/src/app/shared/components/date-picker/date-picker.component.ts b/web/src/app/shared/components/date-picker/date-picker.component.ts
index c61a691be..c50f00568 100644
--- a/web/src/app/shared/components/date-picker/date-picker.component.ts
+++ b/web/src/app/shared/components/date-picker/date-picker.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'taskana-date-picker',
+  selector: 'taskana-shared-date-picker',
   templateUrl: './date-picker.component.html',
   styleUrls: ['./date-picker.component.scss']
 })
diff --git a/web/src/app/shared/components/dropdown/dropdown.component.ts b/web/src/app/shared/components/dropdown/dropdown.component.ts
index b3042761d..ebd0d3d53 100644
--- a/web/src/app/shared/components/dropdown/dropdown.component.ts
+++ b/web/src/app/shared/components/dropdown/dropdown.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
-  selector: 'taskana-dropdown',
+  selector: 'taskana-shared-dropdown',
   templateUrl: './dropdown.component.html',
   styleUrls: ['./dropdown.component.scss']
 })
diff --git a/web/src/app/shared/components/field-error-display/field-error-display.component.ts b/web/src/app/shared/components/field-error-display/field-error-display.component.ts
index ca204e154..3e01f443b 100644
--- a/web/src/app/shared/components/field-error-display/field-error-display.component.ts
+++ b/web/src/app/shared/components/field-error-display/field-error-display.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { highlight } from 'theme/animations/validation.animation';
 
 @Component({
-  selector: 'taskana-field-error-display',
+  selector: 'taskana-shared-field-error-display',
   templateUrl: './field-error-display.component.html',
   animations: [highlight],
   styleUrls: ['./field-error-display.component.scss']
diff --git a/web/src/app/shared/components/filter/filter.component.html b/web/src/app/shared/components/filter/filter.component.html
index 7dfadeb85..6d120f13d 100644
--- a/web/src/app/shared/components/filter/filter.component.html
+++ b/web/src/app/shared/components/filter/filter.component.html
@@ -48,7 +48,7 @@
   <ng-template #tasktype>
     <div class="row">
       <div class="col-xs-2">
-        <taskana-number-picker [(ngModel)]="filter.filterParams.priority" (keyup.enter)="search()" title="priority" id="display-priority-filter"></taskana-number-picker>
+        <taskana-shared-number-picker [(ngModel)]="filter.filterParams.priority" (keyup.enter)="search()" title="priority" id="display-priority-filter"></taskana-shared-number-picker>
       </div>
       <div class="col-xs-4">
         <input type="text" [(ngModel)]="filter.filterParams.name" (keyup.enter)="search()" class="form-control" id="display-name-filter"
diff --git a/web/src/app/shared/components/filter/filter.component.ts b/web/src/app/shared/components/filter/filter.component.ts
index c1e505262..d3b13b316 100644
--- a/web/src/app/shared/components/filter/filter.component.ts
+++ b/web/src/app/shared/components/filter/filter.component.ts
@@ -4,7 +4,7 @@ import { Filter } from 'app/shared/models/filter';
 import { TaskanaType } from 'app/shared/models/taskana-type';
 
 @Component({
-  selector: 'taskana-filter',
+  selector: 'taskana-shared-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.scss']
 })
diff --git a/web/src/app/shared/components/master-and-detail/master-and-detail.component.ts b/web/src/app/shared/components/master-and-detail/master-and-detail.component.ts
index a47523b89..9e8db6e38 100644
--- a/web/src/app/shared/components/master-and-detail/master-and-detail.component.ts
+++ b/web/src/app/shared/components/master-and-detail/master-and-detail.component.ts
@@ -3,7 +3,7 @@ import { Router, ActivatedRoute, NavigationStart, RouterEvent } from '@angular/r
 import { MasterAndDetailService } from 'app/shared/services/master-and-detail/master-and-detail.service';
 
 @Component({
-  selector: 'taskana-master-and-detail',
+  selector: 'taskana-shared-master-and-detail',
   templateUrl: './master-and-detail.component.html',
   styleUrls: ['./master-and-detail.component.scss'],
 
diff --git a/web/src/app/shared/components/nav-bar/nav-bar.component.html b/web/src/app/shared/components/nav-bar/nav-bar.component.html
index b165644f6..a07c314c3 100644
--- a/web/src/app/shared/components/nav-bar/nav-bar.component.html
+++ b/web/src/app/shared/components/nav-bar/nav-bar.component.html
@@ -43,7 +43,7 @@
       </ul>
     </div>
     <div class="nav-content">
-      <taskana-user-information></taskana-user-information>
+      <taskana-shared-user-information></taskana-shared-user-information>
       <div *ngIf="administrationAccess" class="row menu">
         <span (click)="toogleNavBar()" routerLink="taskana/administration/workbaskets" aria-controls="administration"
           routerLinkActive="active">Administration</span>
diff --git a/web/src/app/shared/components/nav-bar/nav-bar.component.ts b/web/src/app/shared/components/nav-bar/nav-bar.component.ts
index f23f735be..5fc473c3f 100644
--- a/web/src/app/shared/components/nav-bar/nav-bar.component.ts
+++ b/web/src/app/shared/components/nav-bar/nav-bar.component.ts
@@ -10,7 +10,7 @@ import { UserGuard } from 'app/shared/guards/user.guard';
 import { expandRight } from 'theme/animations/expand.animation';
 import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service';
 @Component({
-  selector: 'taskana-nav-bar',
+  selector: 'taskana-shared-nav-bar',
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.scss'],
   animations: [expandRight],
diff --git a/web/src/app/shared/components/no-access/no-access.component.ts b/web/src/app/shared/components/no-access/no-access.component.ts
index 215fe3227..ed813716c 100644
--- a/web/src/app/shared/components/no-access/no-access.component.ts
+++ b/web/src/app/shared/components/no-access/no-access.component.ts
@@ -6,7 +6,7 @@ import { Router } from '@angular/router';
 import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service';
 
 @Component({
-  selector: 'taskana-no-access',
+  selector: 'taskana-shared-no-access',
   templateUrl: './no-access.component.html',
   styleUrls: ['./no-access.component.scss']
 })
diff --git a/web/src/app/shared/components/number-picker/number-picker.component.ts b/web/src/app/shared/components/number-picker/number-picker.component.ts
index 69ff3fa29..f244c7d52 100644
--- a/web/src/app/shared/components/number-picker/number-picker.component.ts
+++ b/web/src/app/shared/components/number-picker/number-picker.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
-  selector: 'taskana-number-picker',
+  selector: 'taskana-shared-number-picker',
   templateUrl: './number-picker.component.html',
   styleUrls: ['./number-picker.component.scss'],
   providers: [
diff --git a/web/src/app/shared/components/pagination/pagination.component.ts b/web/src/app/shared/components/pagination/pagination.component.ts
index feb0fee57..1b2e95de9 100644
--- a/web/src/app/shared/components/pagination/pagination.component.ts
+++ b/web/src/app/shared/components/pagination/pagination.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChange
 import { Page } from 'app/shared/models/page';
 
 @Component({
-  selector: 'taskana-pagination',
+  selector: 'taskana-shared-pagination',
   templateUrl: './pagination.component.html',
   styleUrls: ['./pagination.component.scss']
 })
diff --git a/web/src/app/shared/components/popup/dialog-pop-up.component.ts b/web/src/app/shared/components/popup/dialog-pop-up.component.ts
index 8425cb8d3..0e2cf99b4 100644
--- a/web/src/app/shared/components/popup/dialog-pop-up.component.ts
+++ b/web/src/app/shared/components/popup/dialog-pop-up.component.ts
@@ -3,7 +3,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { notifications } from '../../models/notifications';
 
 @Component({
-  selector: 'app-popup',
+  selector: 'taskana-shared-dialog-pop-up',
   templateUrl: './dialog-pop-up.component.html',
   styleUrls: ['./dialog-pop-up.component.scss']
 })
diff --git a/web/src/app/shared/components/progress-bar/progress-bar.component.ts b/web/src/app/shared/components/progress-bar/progress-bar.component.ts
index c6d41188e..2a23bd61f 100644
--- a/web/src/app/shared/components/progress-bar/progress-bar.component.ts
+++ b/web/src/app/shared/components/progress-bar/progress-bar.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
 @Component({
-  selector: 'taskana-progress-bar',
+  selector: 'taskana-shared-progress-bar',
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.scss']
 })
diff --git a/web/src/app/shared/components/sort/sort.component.ts b/web/src/app/shared/components/sort/sort.component.ts
index d9e9d4c62..3f2ab0ac1 100644
--- a/web/src/app/shared/components/sort/sort.component.ts
+++ b/web/src/app/shared/components/sort/sort.component.ts
@@ -1,16 +1,12 @@
 import { Component,
-  ElementRef,
   EventEmitter,
   Input,
   OnInit,
-  Output,
-  ViewChild, ViewChildren,
-  ViewRef } from '@angular/core';
+  Output } from '@angular/core';
 import { Direction, Sorting } from 'app/shared/models/sorting';
-import { MatRadioButton } from '@angular/material/radio';
 
 @Component({
-  selector: 'taskana-sort',
+  selector: 'taskana-shared-sort',
   templateUrl: './sort.component.html',
   styleUrls: ['./sort.component.scss']
 })
diff --git a/web/src/app/shared/components/spinner/spinner.component.ts b/web/src/app/shared/components/spinner/spinner.component.ts
index 69c3cc70b..027ff14ef 100644
--- a/web/src/app/shared/components/spinner/spinner.component.ts
+++ b/web/src/app/shared/components/spinner/spinner.component.ts
@@ -5,7 +5,7 @@ import { NotificationService } from '../../services/notifications/notification.s
 declare let $: any;
 
 @Component({
-  selector: 'taskana-spinner',
+  selector: 'taskana-shared-spinner',
   templateUrl: './spinner.component.html',
   styleUrls: ['./spinner.component.scss']
 })
diff --git a/web/src/app/shared/components/toast/toast.component.ts b/web/src/app/shared/components/toast/toast.component.ts
index 6e57dfeec..0dc51d878 100644
--- a/web/src/app/shared/components/toast/toast.component.ts
+++ b/web/src/app/shared/components/toast/toast.component.ts
@@ -3,7 +3,7 @@ import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { NOTIFICATION_TYPES, notifications } from '../../models/notifications';
 
 @Component({
-  selector: 'app-toast',
+  selector: 'taskana-shared-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss']
 })
diff --git a/web/src/app/shared/components/tree/tree.component.ts b/web/src/app/shared/components/tree/tree.component.ts
index c46adac65..2edbe7045 100644
--- a/web/src/app/shared/components/tree/tree.component.ts
+++ b/web/src/app/shared/components/tree/tree.component.ts
@@ -31,7 +31,7 @@ import { ACTION } from '../../models/action';
 import { ClassificationTreeService } from '../../services/classification-tree/classification-tree.service';
 
 @Component({
-  selector: 'taskana-tree',
+  selector: 'taskana-shared-tree',
   templateUrl: './tree.component.html',
   styleUrls: ['./tree.component.scss'],
 })
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.html b/web/src/app/shared/components/type-ahead/type-ahead.component.html
index 425ba41c6..a3f492f1c 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.component.html
+++ b/web/src/app/shared/components/type-ahead/type-ahead.component.html
@@ -41,8 +41,8 @@
         <span class="material-icons md-20 blue">search</span>
       </button>
       <div *ngIf="typeaheadLoading" class="loading">
-        <taskana-spinner [isRunning]="typeaheadLoading" positionClass="type-ahead-spinner"></taskana-spinner>
+        <taskana-shared-spinner [isRunning]="typeaheadLoading" positionClass="type-ahead-spinner"></taskana-shared-spinner>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.ts b/web/src/app/shared/components/type-ahead/type-ahead.component.ts
index 95e977ff1..20d89714d 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.component.ts
+++ b/web/src/app/shared/components/type-ahead/type-ahead.component.ts
@@ -16,7 +16,7 @@ import { mergeMap } from 'rxjs/operators';
 import { AccessIdDefinition } from 'app/shared/models/access-id';
 
 @Component({
-  selector: 'taskana-type-ahead',
+  selector: 'taskana-shared-type-ahead',
   templateUrl: './type-ahead.component.html',
   styleUrls: ['./type-ahead.component.scss'],
   animations: [highlight],
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.mock.component.ts b/web/src/app/shared/components/type-ahead/type-ahead.mock.component.ts
index 8e14757c0..aae4aee95 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.mock.component.ts
+++ b/web/src/app/shared/components/type-ahead/type-ahead.mock.component.ts
@@ -2,7 +2,7 @@ import { Component, forwardRef, Input } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
 @Component({
-  selector: 'taskana-type-ahead',
+  selector: 'taskana-shared-type-ahead',
   template: 'dummydetail',
   providers: [
     {
diff --git a/web/src/app/shared/components/user-information/user-information.component.ts b/web/src/app/shared/components/user-information/user-information.component.ts
index 94647bde2..e14fd198d 100644
--- a/web/src/app/shared/components/user-information/user-information.component.ts
+++ b/web/src/app/shared/components/user-information/user-information.component.ts
@@ -4,7 +4,7 @@ import { UserInfo } from 'app/shared/models/user-info';
 import { expandDown } from '../../../../theme/animations/expand.animation';
 
 @Component({
-  selector: 'taskana-user-information',
+  selector: 'taskana-shared-user-information',
   templateUrl: './user-information.component.html',
   styleUrls: ['./user-information.component.scss'],
   animations: [expandDown],
diff --git a/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html b/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html
index bd48ab226..21ec0d7f5 100644
--- a/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html
+++ b/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html
@@ -21,7 +21,7 @@
         placeholder="Search by value ..." />
     </div>
     <div *ngIf="searched" class="pull-right margin-right btn-group">
-      <taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group" [defaultSortBy] = "taskDefaultSortBy"> </taskana-sort>
+      <taskana-shared-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group" [defaultSortBy] = "taskDefaultSortBy"> </taskana-shared-sort>
       <button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState">
         <span class="material-icons md-20 blue">search</span>
       </button>
@@ -61,7 +61,7 @@
     </div>
   </div>
   <div [@toggleDown]="toolbarState" class="row no-overflow">
-    <taskana-filter [filterParams]="filterParams" [filterType]="filterType" (performFilter)="filtering($event)">
-    </taskana-filter>
+    <taskana-shared-filter [filterParams]="filterParams" [filterType]="filterType" (performFilter)="filtering($event)">
+    </taskana-shared-filter>
   </div>
 </li>
diff --git a/web/src/app/workplace/components/task-master/task-master.component.html b/web/src/app/workplace/components/task-master/task-master.component.html
index c85c9ac47..890b0557a 100644
--- a/web/src/app/workplace/components/task-master/task-master.component.html
+++ b/web/src/app/workplace/components/task-master/task-master.component.html
@@ -6,5 +6,5 @@
   </div>
   <taskana-task-list *ngIf="!requestInProgress" [tasks]="tasks" [(selectedId)]="selectedId"></taskana-task-list>
 </div>
-<taskana-pagination [numberOfItems]="tasks.length" *ngIf="tasks && tasks.length > 0" [(page)]="tasksPageInformation"
-  [type]="type" (changePage)="changePage($event)"></taskana-pagination>
+<taskana-shared-pagination [numberOfItems]="tasks.length" *ngIf="tasks && tasks.length > 0" [(page)]="tasksPageInformation"
+                           [type]="type" (changePage)="changePage($event)"></taskana-shared-pagination>
diff --git a/web/src/app/workplace/components/task/task.component.html b/web/src/app/workplace/components/task/task.component.html
index 62b215afe..ad07202f9 100644
--- a/web/src/app/workplace/components/task/task.component.html
+++ b/web/src/app/workplace/components/task/task.component.html
@@ -1,4 +1,4 @@
-<taskana-spinner [isRunning]="requestInProgress"></taskana-spinner>
+<taskana-shared-spinner [isRunning]="requestInProgress"></taskana-shared-spinner>
 <div class="panel panel-default">
   <div class="panel-heading">
     <div class="pull-right">
diff --git a/web/src/app/workplace/components/taskdetails-general/general-fields.component.html b/web/src/app/workplace/components/taskdetails-general/general-fields.component.html
index d400c36eb..953c919f0 100644
--- a/web/src/app/workplace/components/taskdetails-general/general-fields.component.html
+++ b/web/src/app/workplace/components/taskdetails-general/general-fields.component.html
@@ -5,17 +5,17 @@
         <div class="form-group col-xs-6 required">
           <label for="task-name" class="control-label">Name</label>
           <input type="text" class="form-control" id="task-name" placeholder="Name" [(ngModel)]="task.name" name="task.name">
-          <taskana-field-error-display [displayError]="!isFieldValid('task.name')" [validationTrigger]="this.toogleValidationMap.get('task.name')"
-            errorMessage="* Name is required">
-          </taskana-field-error-display>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.name')" [validationTrigger]="this.toogleValidationMap.get('task.name')"
+                                              errorMessage="* Name is required">
+          </taskana-shared-field-error-display>
         </div>
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.company" class="control-label">Company</label>
           <input type="text" class="form-control" id="task.primaryObjRef.company" required placeholder="Company description"
             [(ngModel)]="task.primaryObjRef.company" name="task.primaryObjRef.company">
-          <taskana-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.company')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.company')"
-            errorMessage="* Company is required">
-          </taskana-field-error-display>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.company')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.company')"
+                                              errorMessage="* Company is required">
+          </taskana-shared-field-error-display>
         </div>
 
       </div>
@@ -24,17 +24,17 @@
           <label for="task.primaryObjRef.system" class="control-label">System</label>
           <input type="text" class="form-control" id="task.primaryObjRef.system" required placeholder="System description"
             [(ngModel)]="task.primaryObjRef.system" name="task.primaryObjRef.system">
-          <taskana-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.system')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.system')"
-            errorMessage="* System is required">
-          </taskana-field-error-display>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.system')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.system')"
+                                              errorMessage="* System is required">
+          </taskana-shared-field-error-display>
         </div>
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.systemInstance" class="control-label">System instance</label>
           <input type="text" class="form-control" id="task.primaryObjRef.systemInstance" required placeholder="System Instance description"
             [(ngModel)]="task.primaryObjRef.systemInstance" name="task.primaryObjRef.systemInstance">
-          <taskana-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.systemInstance')"
-            [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.systemInstance')" errorMessage="* System instance is required">
-          </taskana-field-error-display>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.systemInstance')"
+                                              [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.systemInstance')" errorMessage="* System instance is required">
+          </taskana-shared-field-error-display>
         </div>
       </div>
       <div class="row">
@@ -42,31 +42,31 @@
           <label for="task.primaryObjRef.type" class="control-label">Reference type</label>
           <input type="text" class="form-control" id="task.primaryObjRef.type" required placeholder="Reference type"
             [(ngModel)]="task.primaryObjRef.type" name="task.primaryObjRef.type">
-          <taskana-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.type')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.type')"
-            errorMessage="* Reference type is required">
-          </taskana-field-error-display>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.type')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.type')"
+                                              errorMessage="* Reference type is required">
+          </taskana-shared-field-error-display>
         </div>
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.value" class="control-label">Reference value</label>
           <input type="text" class="form-control" id="task.primaryObjRef.value" required placeholder="Reference value"
             [(ngModel)]="task.primaryObjRef.value" name="task.primaryObjRef.value">
-          <taskana-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.value')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.value')"
-            errorMessage="* Reference value is required">
-          </taskana-field-error-display>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.value')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.value')"
+                                              errorMessage="* Reference value is required">
+          </taskana-shared-field-error-display>
         </div>
       </div>
       <div class="row">
         <div class="form-group col-xs-6 required">
           <label for="classification" class="control-label">Classification</label>
-          <taskana-dropdown [list]="classifications" (performClassification)="changedClassification($event)" [itemSelected]="task?.classificationSummaryResource" id="classification"></taskana-dropdown>
+          <taskana-shared-dropdown [list]="classifications" (performClassification)="changedClassification($event)" [itemSelected]="task?.classificationSummaryResource" id="classification"></taskana-shared-dropdown>
         </div>
         <div class="form-group col-xs-4">
           <label for="task-due" class="control-label">Due date</label>
-          <taskana-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'" (dateOutput)="updateDate($event)"></taskana-date-picker>
+          <taskana-shared-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'" (dateOutput)="updateDate($event)"></taskana-shared-date-picker>
         </div>
         <div class="form-group col-xs-2">
           <label for="task-priority" class="control-label">Priority</label>
-          <taskana-number-picker [(ngModel)]="task.priority" title="priority" id="task-priority" name="task.priority"></taskana-number-picker>
+          <taskana-shared-number-picker [(ngModel)]="task.priority" title="priority" id="task-priority" name="task.priority"></taskana-shared-number-picker>
         </div>
       </div>
     </div>
@@ -83,8 +83,8 @@
       </div>
       <div class="input-group form-group col-xs-12">
         <label for="wb-owner" class="control-label ">Owner</label>
-        <taskana-type-ahead *ngIf="(tasksCustomisation$ |async)?.information.owner.lookupField else ownerInput" #owner="ngModel" name="task.owner"
-          [(ngModel)]="task.owner" width="100%" [isRequired]="false"></taskana-type-ahead>
+        <taskana-shared-type-ahead *ngIf="(tasksCustomisation$ |async)?.information.owner.lookupField else ownerInput" #owner="ngModel" name="task.owner"
+                                   [(ngModel)]="task.owner" width="100%" [isRequired]="false"></taskana-shared-type-ahead>
         <ng-template #ownerInput>
           <input type="text" #task.owner="ngModel" class="form-control" id="ts-owner" placeholder="Owner" [(ngModel)]="task.owner"
             name="task.owner">
diff --git a/web/src/app/workplace/components/taskdetails/taskdetails.component.html b/web/src/app/workplace/components/taskdetails/taskdetails.component.html
index a122dddb6..34a480b99 100644
--- a/web/src/app/workplace/components/taskdetails/taskdetails.component.html
+++ b/web/src/app/workplace/components/taskdetails/taskdetails.component.html
@@ -1,4 +1,4 @@
-<taskana-spinner [isRunning]="requestInProgress"></taskana-spinner>
+<taskana-shared-spinner [isRunning]="requestInProgress"></taskana-shared-spinner>
 <div class="panel panel-default" *ngIf="task && !requestInProgress">
   <div class="panel-heading">
     <div *ngIf="showDetail" class="pull-left btn-group align-header">
diff --git a/web/src/theme/_site.scss b/web/src/theme/_site.scss
index ec0788192..598fd453d 100644
--- a/web/src/theme/_site.scss
+++ b/web/src/theme/_site.scss
@@ -161,7 +161,7 @@ svg-icon {
 /*
  *Remove bootstrap cols padding for master and detail component
 */
-.no-gutter > taskana-master-and-detail > [class*='col-'] {
+.no-gutter > taskana-shared-master-and-detail > [class*='col-'] {
   padding-right: 0;
   padding-left: 0;
 }
@@ -303,7 +303,7 @@ span.flip {
   padding: 5px 15px;
 }
 
-.dual-list > taskana-filter > .list-group-search {
+.dual-list > taskana-shared-filter > .list-group-search {
   margin-top: 4px;
 }