Package Issues

We were using an older version of Angular (v12) along with the free MDB package. Now, we planned to upgrade to the latest Angular version. During the upgrade, we got stuck at Angular 16 due to package compatibility issues. The free version of MDB supports only up to Angular 15, so we purchased mdb5-angular-ui-kit-pro-essential. I attached 2 images Old version working ui image, and New version of not working UI image. New version using essential pro version of MDB Package.

In this new package, some modules have been removed and some module names have been changed. Now, we need to know: How many modules are included in this paid package? What options do we have for features or modules that were removed in this new version?

Resources (screenshots, code snippets etc.)

UNCIA SCF --> UNCIA FLOW

<!--/. Logo -->

          <li mdbWavesEffect>
            <span class="Hlbl9">Business Date</span>
            <!-- <span class="Hlbl10">{{ busnsda | date: dat1 }}</span> -->
            <span class="Hlbl10" id="Businessda"></span>
          </li>
          <li mdbWavesEffect>
            <span class="Hlbl9">Last Login</span>
            <span class="Hlbl10">{{ lastlogin | date: dat }}</span>
          </li>
          <li class="nav-item waves-light d-flex justify-content-center align-items-center" mdbWavesEffect>
            <a class="nav-link d-flex justify-content-center align-items-center" (click)="EaseLogin()" mdbTooltip="Go To EASE" placement="bottom"> 
              <i far icon="arrow-alt-circle-left"></i>
            </a>
          </li>
          <div *ngFor="let top of topmenuarr">
            <li *ngIf="top.child==0" class="nav-item waves-light" mdbWavesEffect>
              <a class="nav-link">
                <i fas class="fas fa-{{ top.menuIcon }}" (click)="topmenuclick(top)"></i>
              </a>
            </li>
            <!-- <li *ngIf="top.child==0" class="nav-item waves-light" mdbWavesEffect>
              <a class="nav-link">
                <i fas icon="university" (click)="topmenuclick(top)"></i>
              </a>
            </li> -->
            <li *ngIf="top.child.length>0" class="nav-item dropdown" dropdown>
              <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light"
                mdbWavesEffect>
                <i fas icon="user-cog"></i>
              </a>
              <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
                <span>Hello ! {{ userna }}</span>
                <span>({{ defrole }})</span>
                <div *ngFor="let child of top.child">
                  <!-- <a class="dropdown-item waves-light" (click)="profileClicked()" mdbWavesEffect>Profile</a>
                <a class="dropdown-item waves-light" (click)="logout()" mdbWavesEffect>Log out</a> -->
                  <a class="dropdown-item waves-light" (click)="childmenu(child)">{{child.menuName}}</a>
                </div>
              </div>
            </li>
          </div>

          <!-- <li class="nav-item waves-light" mdbWavesEffect>
            <a class="nav-link">
              <i fas icon="bell"></i>
            </a>
          </li>
          <li class="nav-item waves-light" mdbWavesEffect>
            <a class="nav-link" (click)="newuser()">
              <i fas icon="university"></i>
            </a>
          </li>
          <li class="nav-item dropdown" dropdown>
            <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light"
              mdbWavesEffect>
              <i fas icon="user-cog"></i>
            </a>
            <div *dropdownMenu class="
                dropdown-menu dropdown-menu-right dropdown dropdown-primary
              " role="menu">
              <span>Hello ! {{ userna }}</span>
              <span>({{ defrole }})</span>
              <a class="dropdown-item waves-light" (click)="profileClicked()" mdbWavesEffect>Profile</a>
              <a class="dropdown-item waves-light" (click)="logout()" mdbWavesEffect>Log out</a>
            </div>
          </li> -->
        </ul>
      </app-links>
    </mdb-navbar>
  </div>
</div>

<div class="row colrightpad1 elembtmmrg0">
  <div class="col-12 colleftpad3">
    <div class="row PgHeadingBar cardstylewhite cardtopcurve1 cardbottomcurve1">
      <div class="col-12">
        <div class="row">
          <div class="col-6 Hlbl4">
            <div class="row">
              <div class="col-3">
                <span class="Hlbl9 PgNameval"></span> <br />
                <span class="Hlbl10 PgNumval"></span>
              </div>
              <div class="col-8 StatusA">
                <span class="Hlbl9">Current Status</span> <br />
                <span class="Hlbl10 PgNumstval"> {{ stpstatus }}</span>
                <span class="colleftpad hlnk2" (click)="statuspop()">View All</span>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="row">
              <div class="col-12 rightcontrols StatusA">
                <div *ngIf="comontray">
                  <button mdbBtn type="button" size="sm" (click)="commontray()" class="thdarkblu2" mdbWavesEffect>
                    <i far icon="comments"></i>
                    <span class="colrightpad0"> Common Tray</span>
                  </button>
                </div>
                <div>
                  <button mdbBtn type="button" size="sm" (click)="comments()" class="thdarkblu2" mdbWavesEffect>
                    <span class="iconhbl1">
                      <i far icon="comments"></i>
                    </span>
                    <span class="colrightpad0"> Comments</span>
                    <span class="circle1 Pending Hlbl13" id="comtscount">{{
                      count
                      }}</span>
                  </button>
                  <button mdbBtn type="button" size="sm" (click)="logs()" class="thdarkblu2" mdbWavesEffect>
                    <span class="iconhbl1">
                      <i far icon="comments"></i>
                    </span>
                    <span class="colrightpad0"> Logs</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row colrightpad1">
  <div class="col-12 colleftpad3">
    <div class="row">
      <div class="col-12 colnopad">
        <router-outlet></router-outlet>
        <div *ngIf="this.unciaassist == '1'">
          <app-chatbot></app-chatbot>
        </div>
      </div>
    </div>
  </div>
</div>