Risk Matrix

    <app-risk-matrix 
        [riskItems$]='riskList$' 
        header='Risk Summary'
        [config]="{risk: {default: 50, fit: 'row', items:2}}" 
        (updateRisk)='updateRisk($event)' 
        (dragged)='dragged($event)'>
    </app-risk-matrix>
    <dnp-table [data]='riskList' idAttr='ID'
        [cols]="['ID','Status','Workstream','Title','Description','Owner']"></dnp-table>

Risk Item Class

    export class RiskItem extends SharePointItem {
        ID: number;
        Title: string;
        Versions?: string;
        Created: string;
        Modified: string;
        Author?: string;

        Workstream: string;
        Description: string;
        Implications: string;
        Notes: string;

        Status: string;
        Impact: number;
        Probability: number;

        RAG: string;
        ItemType: string;

        ForecastDate: string;
        MaterialisationDate: string;


        SortOrder: string;
        Link: string;
        Owner: string;
        AssignedTo: string;

        MatrixRAGNumber?: number;
    }

Version History

<ng-container *ngIf='versionList$ | async as versionList'>
    <app-table class="versionHistory"
    [data]='versionList' 
    idAttr='VersionId' 
    [selectable] ='false'
    [headers] = 'true'
    [cols]="cols"
    ></app-table>
</ng-container>

DNP-Table

<dnp-table 
    [data]='registryList' 
    idAttr='ListID' 
    [cols]="[
        {type: 'iconLink', id:'Title', icon:'Icon', text:'Title', baseRef:'https://dnpassociates.sharepoint.com/sites/Ergo/Lists/', link:'Title'},
        {type: 'text', id:'EditorTitle', text:'Modified by'},
        {type: 'ago', id:'Modified'},
        {type: 'date', id:'Created'}
    ]"

    (selected)='onSelect($event)' ></dnp-table>

Base Setting

navState: string | 'min' | 'max' = 'min';

  defaultText = "ERGO - Project Management | Data | Analytics"
  toolBarItems: ToolBarItem[] = [
    { type: 'user', color: 'primary', visible: true, text: 'ERGO' },
    { type: 'admin', color: 'warn', visible: true, text: 'ERGO ADMIN' },
    { type: 'public', color: 'accent', visible: false, text: this.defaultText },
    { type: 'demo', color: 'primary', visible: true, text: 'QBE Finance PMO' },
  ];

  navItems$: BehaviorSubject<NavItem[]> = new BehaviorSubject(undefined);
  userNavItems: NavItem[] = [
    { icon: 'polymer', text: 'Demo', link: '/demo/dashboard' },
    { icon: 'view_compact', text: 'Dashboard', link: '/user/dashboard' },
    { icon: 'event_note', text: 'Plans', link: '/user/plans' },
    { icon: 'group', text: 'Team', link: '/user/team' },
    { icon: 'report_problem', text: 'Risks & Issues', link: '/user/raid' },
    { icon: 'extension', text: 'Change Records', link: '/user/delivery' },
    { icon: 'blur_on', text: 'Benefits', link: '/user/lca-rec' },
    { icon: 'slow_motion_video', text: 'Global Delivery', link: '/user/world-map' },
    { icon: 'turned_in', text: 'Status Report', link: '/user/status-report' },
    { icon: 'verified_user', text: 'Admin Panel', link: '/admin/dashboard', color: 'warn' },
    { icon: 'power_settings_new', text: 'Sign Out', link: '/auth/logout', color: 'warn'  }
  ];

  adminNavItems: NavItem[] = [
    { icon: 'verified_user', text: 'Dashboard', link: '/admin/dashboard', isAdmin: true },
    { icon: 'settings_applications', text: 'Plans', link: '/admin/setup', isAdmin: true  },
    { icon: 'receipt', text: 'Registry', link: '/admin/registry', isAdmin: true  },
    { icon: 'view_quilt', text: 'Dashboard', link: '/user/dashboard', isAdmin: true, color: 'primary'  },
  ];

Template

  <dnp-toolbar [items]='toolBarItems' (clicked)='toggleMenu()'>

    <ng-container *ngIf='userInfo'>
    <img class="profilePicture" *ngIf='userInfo.userImage else profileInitials' [src]='userInfo.userImage | safe : "url"'>
    <ng-template #profileInitials><span class="userName">{{userInfo.userName}}</span></ng-template>
    <button  mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu="matMenu" xPosition="before">

            <a mat-menu-item routerLink='/auth/logout'>
                    <mat-icon color='warn'>power_settings_new</mat-icon>
                    <span>Logout</span>
            </a>
    </mat-menu>
  </ng-container>
  </dnp-toolbar>

  
  <dnp-side-nav *ngIf='!loading' [navItems$]='navItems$' [state]='navState' mode='side' [fixedInViewport]='false' #dnpSideNav>
    <div class='routerContainer'>
      <router-outlet class="hidden-router"></router-outlet>
    </div>
  </dnp-side-nav>
</div>

<!-- Public -->
<ng-template #public>
      <router-outlet></router-outlet>
</ng-template>
<mat-spinner *ngIf='loading' class="loader" mode="indeterminate"></mat-spinner>

Style

// @import "@angular/material/prebuilt-themes/deeppurple-amber.css";
// @import "bootstrap/dist/css/bootstrap.css";
/* You can add global styles to this file, and also import other style files */
/* // variable */

mat-card-title.mat-card-title{
  font-size: 1rem !important;
}

.mat-form-field {
  font-size: 0.8rem !important;
  width: 100%;
}

@media print {
  .page-break {page-break-after: always;}
  .no-print { display: none;}
}

/* // custom scroll */
::-webkit-scrollbar {
  width: 5px;
  height: 2px;
  background-color: #ebebeb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #2185d0;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 10px;
}

@font-face {
  font-family: 'Roboto';
  font-display: Roboto;
  src: local('Roboto'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

html,
body {
  height: 100%;
}
body {
  width: 100%;
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
 

.form mat-card-actions {
  justify-content: flex-end;
  display: flex;
}
.form.mat-card {
  background: none;
}

.form .mat-form-field-type-mat-select {
  max-width: 15rem;
}

.spacer {
  flex: 1 1 auto;
}

.spinner {
  position: fixed !important;
  top: 50%;
  left: 50%;
}

.alignIconText{
  display: flex;
  align-items: center;
}

.header.button {
  padding: 0 !important;
  margin: 0 0.1rem;
  min-width: 3rem;
  // background: aliceblue;
  border: none;
}
.header.button:hover {
  background: white;
}
.header.button[disabled="true"] {
  color: #999;
  // background: #ddd;
  /* background-color: transparent; */
}
.flip {
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.icon-row {
  display: flex;
  align-items: center;
}

.dnp-card .mat-card-title {
  font-size: 1rem !important;
}
.dnp-card .mat-card-actions {
  position: absolute;
  bottom: 1rem;
  right: 0.5rem;
  margin-top: 1rem;
  text-align: right;
  width: 100%;
  visibility: hidden;
  opacity: 0;
}
.dnp-card:hover .mat-card-actions {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 800ms;
}
table[mat-table]{ width: 100%;}
.grid{ display: grid; grid-gap: 1rem;}

.grid.one-two { grid-template-columns: 1fr 2fr;}
.grid.one { grid-template-columns: 1fr;}
.grid.two {grid-template-columns: repeat(2, 1fr);}
.grid.three {grid-template-columns: repeat(3, 1fr);}
.grid.four {grid-template-columns: repeat(4, 1fr);}
.grid.five {grid-template-columns: repeat(5, 1fr);}
.grid.six {grid-template-columns: repeat(6, 1fr);}
.grid.seven {grid-template-columns: repeat(7, 1fr);}
.grid.eight {grid-template-columns: repeat(8, 1fr);}
.grid.nine {grid-template-columns: repeat(9, 1fr);}
.grid.ten {grid-template-columns: repeat(10, 1fr);}
.grid.eleven {grid-template-columns: repeat(11, 1fr);}
.grid.twelve {grid-template-columns: repeat(12, 1fr);}
.grid.thirteen {grid-template-columns: repeat(13, 1fr);}
.grid.fourteen {grid-template-columns: repeat(14, 1fr);}
.grid.fifteen {grid-template-columns: repeat(15, 1fr);}
.grid.sixteen { grid-template-columns: repeat(16, 1fr);}

.backRAG[rag="Green"],
.backRAG[rag="green"],
.backRAG[rag="On Track"],
.backRAG[rag="G"] {
  background: #8bc34a;
  fill: #8bc34a;
  color: white;
}

.error-snackbar,
.backRAG[rag="Red"],
.backRAG[rag="red"],
.backRAG[rag="Issue"],
.backRAG[rag="R"] {
  background: #f44336;
  fill: #f44336;
  color: white;
}

.backRAG[rag="Amber"],
.backRAG[rag="amber"],
.backRAG[rag="In-progress"],
.backRAG[rag="A"] {
  background: #f1843d;
  fill: #f1843d;
  color: white;
}

.backRAG[rag="Blue"],
.backRAG[rag="blue"],
.backRAG[rag="complete"],
.backRAG[rag="Passed"],
.backRAG[rag="B"] {
  background: #03a9f4;
  fill: #03a9f4;
  color: white;
}

.backRAG[rag="Grey"],
.backRAG[rag="grey"],
.backRAG[rag="Unknown"],
.backRAG[rag="Planned"],
.backRAG[rag="Deferred"],
.backRAG[rag="Closed"],
.backRAG[rag="G"] {
  background: #999;
  fill: #999;
  color: white;
}

.fontRAG[rag="Green"],
.fontRAG[rag="green"],
.fontRAG[rag="On Track"],
.fontRAG[rag="G"] {
  color: #8bc34a;
  fill: #8bc34a;
}

.fontRAG[rag="Red"],
.fontRAG[rag="red"],
.fontRAG[rag="Issue"],
.fontRAG[rag="R"] {
  color: #ff5722;
  fill: #ff5722;
}

.fontRAG[rag="Amber"],
.fontRAG[rag="amber"],
.fontRAG[rag="In-progress"],
.fontRAG[rag="A"] {
  color: #ffc107;
  fill: #ffc107;
}

.fontRAG[rag="Blue"],
.fontRAG[rag="blue"],
.fontRAG[rag="Complete"],
.fontRAG[rag="Passed"],
.fontRAG[rag="B"] {
  color: #03a9f4;
  fill: #03a9f4;
}

.fontRAG[rag="Grey"],
.fontRAG[rag="grey"],
.fontRAG[rag="Unknown"],
.fontRAG[rag="Planned"],
.fontRAG[rag="G"] {
  color: #999;
  fill: #999;
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    overflow: visible !important;
  }

  .sideNav.container {
    overflow: visible !important;
    display: inline;
    position: relative !important;
    top: 0 !important;
  }
  mat-sidenav-content {
    margin-left: none !important;
  }

  .mat-drawer-content {
    overflow: visible !important;
  }

  .no-print,
  .no-print * {
    display: none !important;
    height: 0;
    width: 0;
  }
  .print-full {
    page-break-inside: avoid;
  }
}

@media only screen and(max-width: 992px) { 
  body {
    width: 102% !important;
  }
  /* // navbar */
  nav {
    display: none !important;
  }
  .mobile-menu {
    display: flex !important;
  }
/* // home */
  .ergo-home {
    display: flex !important;
    text-align: center;
  }

  h2{
    font-size: 1.2rem;
  }

  .desktop.only{
    display: none;
  }
  // .cdk-overlay-pane{
  //   // height: 100vh;
  //   width: 90vw !important;
  //   max-width: none !important;
  // }

  /* // Approach */
  .ergo-approach, 
  .ergo-example,
  .matrix-grid-layout,
  .ergo-delivery {
    margin: 1rem !important;
  }
  .ergo-app-box {
    flex-direction: column !important;
  }
  .left-side-approach {
    width: 100% !important;
    margin-bottom: 12px;
  }
  .right-side-approach {
    width: 100% !important;
    display: flex;
    justify-content: center;
  }
  .right-side-approach > mat-icon {
    height: 4rem !important;
    width: 4rem !important;
    font-size: 4rem !important;
  }

  .ergo-delivery .grid{
    display: block !important;
  }


  .app-content p {
    font-size: 14px;
  }
  .icons {
    width: 100%;
  }
  .right-side-approach .icons .grid {
    margin-left: 0rem !important;
  }
  .icons .grid > div {
    font-size: 12px !important;
  }
  /* // footer */
  .footer-sec {
    display: block !important;
    height: 100% !important;
    margin-top: 5rem;
    // flex-direction: column !important;
  }
  .foot-one-box {
    margin-bottom: 20px;
  }
  .footer-section h3 {
    font-size: 16px !important;
  }
  .footer-sec a {
    font-size: 14px !important;
    width: 100%;
    display: block;
    margin-top: 1rem;
  }
  .foot-one-box:not(:first-child) {
    box-shadow:none !important; 
}
}

// body{
//   // background: #f9f6ff;
//   // background-color: #f9f6ff;
// }


.cursor {
  cursor: pointer !important;
}

.dividing.header {
  border-bottom: 1px solid #999;
}

.spacer {
  flex: 1 1 auto;
}
.line-break{
 white-space: pre-line
}
/* Absolute Center Spinner */

.loader{
  position: absolute;
  margin: 0 auto;
}

// .loader {
//   position: fixed;
//   z-index: 999;
//   height: 2em;
//   width: 2em;
//   overflow: show;
//   margin: auto;
//   top: 0;
//   left: 0;
//   bottom: 0;
//   right: 0;
// }

pre {
 white-space: pre-wrap;       /* Since CSS 2.1 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}```