@annalib/anna-core 3.1.1 → 3.1.4

package/src/lib/anna-common-scss/_modal.scss

@@ -0,0 +1,37 @@
+.modal-header {
+  height: 72px;
+  background-color: #3f4961;
+  background-position: center center;
+  background-size: cover;
+  font-weight: 300;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.modal-title {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 400 !important;
+  position: absolute;
+  top: 40px;
+  text-align: left;
+}
+
+.modal-dialog {
+  font-family: Roboto !important;
+  top: 100px !important;
+  margin: 1.75rem auto;
+}
+
+.modal-content {
+  border-radius: 7px;
+  width: fit-content;
+  min-width: 100%;
+}
+
+.modal-body {
+  padding: 24px;
+}
+.fade {
+  transition: none !important;
+}

package/src/lib/anna-common-scss/_ng-select.scss

@@ -0,0 +1,176 @@
+/***COMMON NG-SELECT STYLING FOR ALL SIZES **/
+::ng-deep .ng-select {
+  & .ng-arrow,
+  & .ng-arrow:hover {
+    border-color: black transparent transparent !important;
+    opacity: 1 !important;
+  }
+
+  &.ng-select-opened .ng-arrow,
+  &.ng-select-opened .ng-arrow:hover {
+    border-color: transparent transparent black !important;
+    opacity: 1 !important;
+    padding-top: 2px;
+  }
+
+  & .ng-select-container {
+    border: 1px solid #b7b7b7 !important;
+    border-radius: 2px;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  &.custom-error-ng-select .ng-select-container {
+    border: 1px solid #f86c6b;
+  }
+
+  &.ng-select-disabled > .ng-select-container {
+    background-color: #bdbdbd;
+    opacity: 0.5;
+    cursor: not-allowed;
+
+  }
+
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    & .ng-option-label {
+      font-weight: normal !important;
+    }
+    &:hover {
+      background-color: #ebebeb;
+      color: #4a4a4a;
+    }
+    &:not(:hover){
+      background-color: #fff;
+    }
+    &.ng-option-selected  {
+      background-color: #268bff;
+      color: #fff;
+    }
+  }
+
+  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+    border-color: lightgray;
+    box-shadow: none;
+  }
+
+}
+
+/*****EXTRA SMALL NG STYLE******/
+::ng-deep .ng-select.custom-xs-ng-select {
+  & .ng-select-container {
+    min-height: 22px !important;
+    font-size: 12px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 22px !important;
+  }
+
+  & .ng-dropdown-panel .scroll-host {
+    font-size: 12px !important;
+  }
+
+  & .ng-arrow-wrapper {
+    padding-top: 2px !important;
+  }
+
+  &.ng-select-opened,
+  &.ng-select-bottom,
+  &.ng-select-top {
+    & .ng-select-container {
+      padding-top: 6px !important;
+    }
+  }
+  &.non-searchable {
+    &.ng-select-opened,
+    &.ng-select-bottom,
+    &.ng-select-top {
+      & .ng-select-container {
+        padding-top: 4px !important;
+      }
+    }
+  }
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 3px 10px;
+  }
+}
+
+/**SMALL NG SELECT STYLE***/
+::ng-deep .ng-select.custom-sm-ng-select {
+  & .ng-select-container {
+    min-height: 1.5625rem !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 1.5625rem !important;
+  }
+
+  &.ng-select-opened,
+  &.ng-select-bottom,
+  &.ng-select-top {
+    & .ng-select-container {
+      padding-top: 8px !important;
+    }
+  }
+  &.non-searchable {
+    &.ng-select-opened,
+    &.ng-select-bottom,
+    &.ng-select-top {
+      & .ng-select-container {
+        padding-top: 8px !important;
+      }
+    }
+  }
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 4px 10px;
+  }
+}
+
+/**MEDIUM NG SELECT STYLE***/
+::ng-deep .ng-select.custom-md-ng-select {
+  & .ng-select-container {
+    min-height: 30px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 1.875rem !important;
+  }
+}
+
+/**MEDIUM NG SELECT STYLE -2 !!! with 32px height !!!***/
+::ng-deep .ng-select.custom-md-32-ng-select {
+  & .ng-select-container {
+    min-height: 32px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 32px !important;
+  }
+}
+
+/**LARGE NG SELECT STYLE***/
+::ng-deep .ng-select.custom-lg-ng-select {
+  & .ng-select-container {
+    min-height: 2.8125rem !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 2.8125rem !important;
+  }
+}
+
+
+:host::ng-deep .custom-arrow.ng-select.ng-select-opened>.ng-select-container{
+  .ng-arrow{
+   border-width: 0 4px 4px;
+   position: relative;
+   bottom: 1px;
+ }
+}
+
+:host::ng-deep .custom-arrow.ng-select .ng-arrow-wrapper .ng-arrow{
+ border-width: 4px 4px 2.5px;
+ position: relative;
+ bottom: 1px;
+}

package/src/lib/anna-common-scss/_sort.scss

@@ -0,0 +1,30 @@
+@import "./fonts", "./colors";
+
+.sort-btn{
+  background: white;
+  border: none;
+  border-right: 1px solid #1b88ff;
+  text-decoration: underline;
+  @include fonts(Roboto, 14px, normal, normal, normal, 1.07, normal);
+  color: #1b88ff;
+  cursor: pointer;
+  flex: 1;
+  text-align: center;
+}
+
+.sort-btn:last-of-type{
+  border-right: none;
+}
+
+.sort-btn.active{
+  color: #202b47;
+  text-decoration: none;
+}
+
+p.sort-container{
+  margin-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e6e6e6;
+  margin-bottom: 0;
+  display: flex;
+}

package/src/lib/anna-common-scss/_toggle.scss

@@ -0,0 +1,84 @@
+
+.switchBtn {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  font-size: 12px;
+  top: 3px;
+}
+
+.switchBtn input {
+  display: none;
+}
+
+.slide {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  -webkit-transition: .4s;
+  transition: .4s;
+  padding: 4px 4px 4px 22px;
+  line-height: 1;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+.slide:before {
+  position: absolute;
+  content: "";
+  width: 18px;
+  height: 18px;
+  background-color: #ffffff;
+  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
+  border: solid 0.5px rgba(0, 0, 0, 0.1);
+  left: 0px;
+  bottom: 0px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  color: #999999;
+}
+
+input:checked + .slide {
+  background-color: #44db5e;
+  padding-left: 7px;
+  color: #fff;
+  line-height: 1;
+}
+
+input:focus + .slide {
+  box-shadow: 0 0 1px #01aeed;
+}
+
+input:checked + .slide:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+  left: 10px;
+}
+
+.slide.round {
+  border-radius: 15.5px;
+}
+
+.slide.round:before {
+  border-radius: 50%;
+}
+
+.has-error {
+  transition: all linear 0.5s;
+  color: red !important;
+}
+
+.data-label {
+  font-size: 11px;
+  color: #666666;
+  letter-spacing: 0.2px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

package/src/lib/anna-common-scss/style.scss

@@ -0,0 +1 @@
+@import "./colors", "./filters", "./fonts", "./sort";

package/src/lib/anna-core-shared-lib/components/anna-buyer-approval-icon-template/anna-buyer-approval-icon-template.component.html

@@ -0,0 +1,22 @@
+<ng-container [ngTemplateOutlet]="buyerApprovalIcon"></ng-container>
+
+<ng-template #buyerApprovalIcon>
+    <svg width="15px" height="15px" viewBox="0 0 20 20">
+        <g id="Awaiting-Buyer-Approval-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="time-left" transform="translate(3.000000, 2.000000)" fill="#4A4A4A" fill-rule="nonzero">
+                <path
+                    d="M6.23157622,14.1696467 C5.70535057,14.0721422 5.2005579,13.9061054 4.72188769,13.6745242 C4.71622258,13.6714711 4.71115545,13.6679958 4.70520709,13.6652025 C4.59240848,13.6104091 4.47979871,13.551718 4.37065094,13.4903961 C4.37027327,13.4899414 4.36958087,13.4896491 4.36898288,13.4893893 C4.16872129,13.37558 3.97327504,13.2496557 3.78339947,13.1117139 C1.01467199,11.0989392 0.348958764,7.13679055 2.29945571,4.27950803 C2.72358352,3.65842885 3.23684237,3.14027823 3.80904983,2.72960334 C3.81609974,2.72453649 3.82314965,2.71950212 3.83013662,2.71440279 C5.84650619,1.28061347 8.58442178,1.183986 10.7254867,2.65733574 L10.2656372,3.34301728 C10.1377946,3.53386873 10.2164452,3.67294733 10.4402485,3.65216024 L12.4377343,3.46760989 C12.6618209,3.4468228 12.7958322,3.24677957 12.7355617,3.0234483 L12.1991703,1.02899228 C12.1391202,0.805401178 11.9853754,0.778637804 11.8574069,0.969456765 L11.3964873,1.6567623 C9.82523796,0.568265989 7.94067659,0.153206329 6.0701521,0.487943386 C5.88175576,0.521592483 5.69600314,0.562776899 5.51279981,0.610717118 C5.51138354,0.610976957 5.51025052,0.611139356 5.50911749,0.611399194 C5.50203611,0.613185585 5.4948603,0.615556612 5.48796775,0.617537881 C3.8749854,1.04500483 2.46767797,2.01585923 1.46347449,3.40105873 C1.4550083,3.41141979 1.44629033,3.4215535 1.43829623,3.432824 C1.40490356,3.47923766 1.37176268,3.52672316 1.33931419,3.57420867 C1.28625101,3.65203032 1.23394317,3.73180077 1.18390138,3.81157121 C1.17763828,3.82118524 1.17285441,3.83096167 1.16737814,3.84067314 C0.338698623,5.1658824 -0.0610062726,6.69795566 0.00754154337,8.25770173 C0.00769890751,8.26283354 0.00741565207,8.26799784 0.00754154337,8.27325957 C0.0141823097,8.42562242 0.0258902012,8.58009646 0.0417839785,8.73216699 C0.0426337448,8.7419759 0.0447424242,8.75126512 0.0463475384,8.76107403 C0.0627763537,8.91398904 0.0833910551,9.06726132 0.109230246,9.22050113 C0.371839509,10.7840149 1.08652445,12.1909434 2.15745032,13.2856758 C2.15993667,13.2882417 2.16251744,13.291035 2.16503527,13.2936983 C2.16591651,13.2947052 2.16689216,13.2952249 2.16774193,13.2961668 C2.45546651,13.5890373 2.7684323,13.8599191 3.10541185,14.1048494 C3.98728044,14.7461311 4.9692641,15.1700252 6.02385557,15.3653264 C6.3438398,15.424667 6.64950389,15.2048436 6.70691032,14.8747836 C6.76428528,14.5444963 6.55146603,14.2287924 6.23157622,14.1696467 Z"
+                    id="Path"
+                ></path>
+                <path
+                    d="M9.22237925,14.6588011 C9.29073073,14.9263505 9.1292489,15.198652 8.86169949,15.2670034 C8.51639563,15.355219 8.1641424,15.4188128 7.8069689,15.4570516 C7.53239558,15.4864472 7.28598003,15.2876915 7.25658436,15.0131182 C7.22718869,14.7385449 7.42594445,14.4921293 7.70051776,14.4627336 C8.01004537,14.4295958 8.31515603,14.3745129 8.61417689,14.2981213 C8.8817263,14.2297698 9.15402777,14.3912517 9.22237925,14.6588011 Z M12.5552524,12.2886551 C12.7611952,12.4726175 12.7790139,12.7886982 12.5950515,12.994641 C12.3569806,13.2611574 12.1001968,13.5104915 11.8267859,13.7406023 C11.6155121,13.9184167 11.3000937,13.8912925 11.1222793,13.6800187 C10.9444648,13.4687448 10.9715891,13.1533264 11.1828629,12.975512 C11.4200152,12.7759175 11.6427598,12.5596351 11.8492666,12.3284542 C12.033229,12.1225114 12.3493096,12.1046927 12.5552524,12.2886551 Z M13.9945063,8.57622811 C14.2674538,8.61811209 14.4547678,8.87333344 14.4128838,9.14628095 C14.3584322,9.50112883 14.2787427,9.85020038 14.1746496,10.1914009 C14.0940709,10.4555252 13.8146338,10.6043183 13.5505094,10.5237395 C13.2863851,10.4431608 13.137592,10.1637237 13.2181708,9.89959931 C13.3082912,9.6041989 13.3772907,9.30195366 13.4244534,8.99460564 C13.4663374,8.72165813 13.7215588,8.53434413 13.9945063,8.57622811 Z M13.8741743,4.99628976 C14.0173723,5.32357494 14.1370467,5.66111195 14.2320931,6.00667963 C14.305325,6.27293459 14.1488489,6.54814305 13.8825939,6.62137492 C13.6163389,6.6946068 13.3411305,6.53813067 13.2678986,6.27187571 C13.1856167,5.97271686 13.0820133,5.68050756 12.958028,5.39713383 C12.847338,5.14414702 12.9626923,4.84932868 13.2156791,4.73863865 C13.4686659,4.62794862 13.7634843,4.74330295 13.8741743,4.99628976 Z"
+                    id="Combined-Shape"
+                ></path>
+                <path
+                    d="M6.49684035,4 C6.22234237,4 6,4.21290493 6,4.47514225 L6,9.20888548 L10.5252942,11.4469308 C10.5981282,11.4830116 10.6761155,11.5 10.7528554,11.5 C10.9325937,11.5 11.106194,11.4063595 11.1944548,11.2429754 C11.3203307,11.0097848 11.2250786,10.7233052 10.9813357,10.6028789 L6.9931227,8.63027395 L6.9931227,4.47514225 C6.99308988,4.21290493 6.77101009,4 6.49684035,4 Z"
+                    id="Path"
+                ></path>
+            </g>
+        </g>
+    </svg>
+</ng-template>

package/src/lib/anna-core-shared-lib/components/anna-buyer-approval-icon-template/anna-buyer-approval-icon-template.component.spec.ts

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

package/src/lib/anna-core-shared-lib/components/anna-buyer-approval-icon-template/anna-buyer-approval-icon-template.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anna-buyer-approval-icon-template',
+  templateUrl: './anna-buyer-approval-icon-template.component.html',
+  styleUrls: ['./anna-buyer-approval-icon-template.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AnnaBuyerApprovalIconTemplateComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/anna-core-shared-lib/components/anna-icon-column/anna-icon-column.component.html

@@ -0,0 +1,33 @@
+<ng-container *ngIf="componentName == 'ORDER_LISTING_INFLIGHT'">
+    <span
+        *ngIf="dataObject.payForPerformance && dataObject.orderCategory == 'TV Revenue' && objectKey == 'payForPerformance'"
+        class="cursor-not-allowed"
+        (click)="$event.stopPropagation()"
+    >
+        <anna-pay-for-performance-icon-template
+            [color]="PfpIconActiveColor"
+            [width]="'15px'"
+            [height]="'15px'"
+        >
+        </anna-pay-for-performance-icon-template>
+    </span>
+    <span
+        *ngIf="dataObject.orderStatus == 'UPCOMING' && dataObject.orderCategory == 'TV Revenue' && !dataObject.payForPerformance && objectKey == 'payForPerformance'"
+        (click)="svgIconClicked(dataObject,'payForPerformance')"
+    >
+        <anna-pay-for-performance-icon-template
+            [color]="PfpIconDisableColor"
+            [width]="'15px'"
+            [height]="'15px'"
+        >
+        </anna-pay-for-performance-icon-template>
+    </span>
+
+    <anna-live-icon-template *ngIf="dataObject.orderStatus == 'LIVE' && objectKey == 'orderStatus' "></anna-live-icon-template>
+</ng-container>
+
+<ng-container *ngIf="objectKey == 'bizRuleStatus'">
+    <anna-rejected-icon-template *ngIf="dataObject.bizRuleStatus == 'REJECTED'"></anna-rejected-icon-template>
+    <anna-notify-icon-template *ngIf="dataObject.bizRuleStatus == 'NOTIFY'"></anna-notify-icon-template>
+    <anna-buyer-approval-icon-template *ngIf="dataObject.bizRuleStatus == 'AWAITING_APPROVAL'"></anna-buyer-approval-icon-template>
+</ng-container>

package/src/lib/anna-core-shared-lib/components/anna-icon-column/anna-icon-column.component.spec.ts

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

package/src/lib/anna-core-shared-lib/components/anna-icon-column/anna-icon-column.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GtColumnIconEmittedData } from '../../models/anna-generic-data-type.model';
+
+@Component({
+  selector: 'anna-core-anna-icon-column',
+  templateUrl: './anna-icon-column.component.html',
+  styleUrls: ['./anna-icon-column.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AnnaIconColumnComponent implements OnInit {
+
+  @Input() componentName: string;
+  @Input() objectKey: string;
+  @Input() dataObject: any;
+  PfpIconActiveColor = "#9B1B93"
+  PfpIconDisableColor = "rgba(189,189,189,0.5)";
+  @Output() onColumnIconClicked = new EventEmitter<GtColumnIconEmittedData>();
+ 
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  svgIconClicked(rowData: any,key: string){
+    this.onColumnIconClicked.emit({data: rowData,key: key});
+  }
+
+}

package/src/lib/anna-core-shared-lib/components/anna-live-icon-template/anna-live-icon-template.component.html

@@ -0,0 +1,20 @@
+<ng-container [ngTemplateOutlet]="liveIcon"></ng-container>
+<ng-template #liveIcon>
+    <svg width="15px" height="15px" viewBox="0 0 20 20">
+        <g id="Live-Icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="next" transform="translate(2.000000, 2.000000)" fill-rule="nonzero">
+                <path
+                    d="M8,0 C3.58171139,0 0,3.58171139 0,8 C0,12.4182886 3.58171139,16 8,16 C12.4182886,16 16,12.4182886 16,8 C15.9950435,3.58379835 12.4162343,0.00498913721 8,0 Z"
+                    id="Path"
+                    fill="#C2E361"
+                ></path>
+                <path
+                    d="M8,16 C3.58171139,16 0,12.4182633 0,7.9999837 C0,3.58170409 3.58171139,0 8,0 C12.4182886,0 16,3.58170409 16,7.9999837 C15.9950435,12.416209 12.4162343,15.9950109 8,16 Z M8,0.695640832 C3.96590756,0.695640832 0.69564225,3.96589948 0.69564225,7.9999837 C0.69564225,12.0340679 3.96590756,15.3043266 8,15.3043266 C12.0340924,15.3043266 15.3043578,12.0340679 15.3043578,7.9999837 C15.2997599,3.96782339 12.0322011,0.700238655 8,0.695640832 Z"
+                    id="Shape"
+                    fill="#8BAC2A"
+                ></path>
+                <circle id="Oval" fill="#8BAC2A" cx="8" cy="8" r="4"></circle>
+            </g>
+        </g>
+    </svg>
+</ng-template>

package/src/lib/anna-core-shared-lib/components/anna-live-icon-template/anna-live-icon-template.component.spec.ts

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

package/src/lib/anna-core-shared-lib/components/anna-live-icon-template/anna-live-icon-template.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anna-live-icon-template',
+  templateUrl: './anna-live-icon-template.component.html',
+  styleUrls: ['./anna-live-icon-template.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AnnaLiveIconTemplateComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/anna-core-shared-lib/components/anna-no-data/anna-no-data.component.html

@@ -0,0 +1,3 @@
+<div [style.width]="width" [style.marginTop]="marginTop" class="no-data">
+    <label>{{ message }}</label>
+</div>

package/src/lib/anna-core-shared-lib/components/anna-no-data/anna-no-data.component.scss

@@ -0,0 +1,17 @@
+div {
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  width: 46%;
+  margin: 20px;
+  z-index: 400;
+  label {
+    margin: 0;
+    width: auto;
+    font-weight: 500;
+    background-color: lightgray;
+    padding: 5px 18px;
+    border-radius: 4px;
+  }
+}

package/src/lib/anna-core-shared-lib/components/anna-no-data/anna-no-data.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+
+import { AnnaNoDataComponent } from "./anna-no-data.component";
+
+describe("AnnaNoDataComponent", () => {
+    let component: AnnaNoDataComponent;
+    let fixture: ComponentFixture<AnnaNoDataComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [AnnaNoDataComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AnnaNoDataComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/anna-core-shared-lib/components/anna-no-data/anna-no-data.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core";
+@Component({
+    selector: "anna-core-no-data-lib",
+    templateUrl: "./anna-no-data.component.html",
+    styleUrls: ["./anna-no-data.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AnnaNoDataComponent implements OnInit {
+    @Input() width;
+    @Input() marginTop;
+    message: string;
+    constructor() {
+        this.width = "46%";
+        this.marginTop = "1.25rem";
+    }
+
+    ngOnInit() {
+        this.message = "No data to display";
+    }
+}

package/src/lib/anna-core-shared-lib/components/anna-notify-icon-template/anna-notify-icon-template.component.html

@@ -0,0 +1,23 @@
+<ng-container [ngTemplateOutlet]="notifyIcon"></ng-container>
+
+<ng-template #notifyIcon>
+    <svg width="15px" height="15px" viewBox="0 0 20 20">
+        <g id="Notify-buyer-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="notification" transform="translate(3.000000, 1.000000)" fill="#4A4A4A" fill-rule="nonzero">
+                <path
+                    d="M12.6666669,8.66366455 L12.6666669,7.08618164 C12.6666669,4.78491943 11.1196383,2.8344397 9.0000114,2.19737549 L9.0000114,1.4831543 C9.0000114,0.665343018 8.32711346,8.52651283e-13 7.50001599,8.52651283e-13 C6.67291852,8.52651283e-13 6.00002058,0.665343018 6.00002058,1.4831543 L6.00002058,2.19737549 C3.8803604,2.8344397 2.33336513,4.78488647 2.33336513,7.08618164 L2.33336513,8.66366455 C2.33336513,10.685105 1.55410085,12.6018677 0.139138508,14.060896 C0.000472265053,14.2038721 -0.0384942824,14.4148425 0.0401054772,14.5970398 C0.118705237,14.7792371 0.299704683,14.8974609 0.500037404,14.8974609 L5.05032349,14.8974609 C5.28258944,16.0243945 6.29271969,16.875 7.50001599,16.875 C8.70734563,16.875 9.71740921,16.0243945 9.9497085,14.8974609 L14.5,14.8974609 C14.7003273,14.8974609 14.8812934,14.7792371 14.9598932,14.5970398 C15.0384929,14.4148425 14.9995264,14.2038721 14.8608935,14.060896 C13.4459311,12.6018677 12.6666669,10.685072 12.6666669,8.66366455 Z M7.00001752,1.4831543 C7.00001752,1.21055054 7.22431684,0.988769531 7.50001752,0.988769531 C7.77571515,0.988769531 8.00001752,1.21055054 8.00001752,1.4831543 L8.00001752,2.0015332 C7.8354483,1.98584473 7.66868214,1.97753906 7.50001752,1.97753906 C7.33134984,1.97753906 7.16458369,1.98584473 7.00001752,2.0015332 L7.00001752,1.4831543 Z M7.50001599,15.8862305 C6.84818465,15.8862305 6.29241969,15.4728918 6.08602032,14.8974609 L8.91401167,14.8974609 C8.7076123,15.4728918 8.15184733,15.8862305 7.50001599,15.8862305 L7.50001599,15.8862305 Z M1.57770077,13.9086914 C2.71639729,12.3994336 3.33336207,10.5729785 3.33336207,8.66366455 L3.33336207,7.08618164 C3.33336207,4.81448364 5.20252302,2.96630859 7.50001599,2.96630859 C9.79750897,2.96630859 11.6666699,4.81448364 11.6666699,7.08618164 L11.6666699,8.66366455 C11.6666699,10.5729785 12.2836347,12.3994336 13.4223645,13.9086914"
+                    id="Shape"
+                ></path>
+                <path
+                    d="M13.7705926,7.02729272 C13.7705926,7.28835319 14.0458159,7.5 14.3852963,7.5 C14.7247767,7.5 15,7.28835319 15,7.02729272 C15,5.13331221 14.0408983,3.3526869 12.2993607,2.01344415 C12.0593394,1.82886771 11.670109,1.82883619 11.4300467,2.01344415 C11.1899844,2.1980521 11.1899844,2.49733883 11.4300467,2.68194678 C12.9393902,3.84263224 13.7705926,5.38583244 13.7705926,7.02729272 L13.7705926,7.02729272 Z"
+                    id="Path"
+                ></path>
+                <path
+                    d="M0.614703713,7.5 C0.954184083,7.5 1.22940743,7.28835245 1.22940743,7.02729106 C1.22940743,5.38585655 2.06065077,3.84265095 3.56995328,2.68196143 C3.81001557,2.49735283 3.81001557,2.19806504 3.56995328,2.01345645 C3.32993197,1.82884785 2.94070158,1.82884785 2.70063929,2.01345645 C0.959101713,3.3527039 0,5.13330392 0,7.02729106 C0,7.28835245 0.275223342,7.5 0.614703713,7.5 Z"
+                    id="Path"
+                ></path>
+            </g>
+        </g>
+    </svg>
+</ng-template>
+