From fd679b3414cf9b3f9f10478013ad1c899ed53dc6 Mon Sep 17 00:00:00 2001
From: Nikola Vladimirov Iliev <nikola.vladimirov-iliev@broadcom.com>
Date: Fri, 3 Jul 2026 10:57:57 +0300
Subject: [PATCH] Add angular v21 ui plugin simple example

---
 packages/vcfa-plugin/package.json             | 54 +++++++++----------
 .../projects/ui-plugin/public/manifest.json   |  2 +-
 .../src/plugin/subnav.component.html          |  2 +-
 .../ui-plugin/src/plugin/subnav.component.ts  |  3 +-
 .../projects/ui-plugin/src/styles.scss        |  2 -
 .../projects/ui-plugin/vcf-webpack-util.js    |  1 -
 6 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/packages/vcfa-plugin/package.json b/packages/vcfa-plugin/package.json
index 22b3a16..ad0e817 100644
--- a/packages/vcfa-plugin/package.json
+++ b/packages/vcfa-plugin/package.json
@@ -14,37 +14,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-architects/module-federation": "19.0.3",
-    "@angular/animations": "19.2.0",
-    "@angular/cdk": "19.2.0",
-    "@angular/common": "19.2.0",
-    "@angular/compiler": "19.2.0",
-    "@angular/core": "19.2.0",
-    "@angular/forms": "19.2.0",
-    "@angular/platform-browser": "19.2.0",
-    "@angular/platform-browser-dynamic": "19.2.0",
-    "@angular/router": "19.2.0",
-    "@cds/core": "6.15.1",
-    "@clr/angular": "17.10.0",
-    "@clr/ui": "17.10.0",
-    "ansi-escapes": "7.1.0",
-    "rxjs": "7.8.0",
-    "tslib": "2.3.0",
-    "zone.js": "0.15.0"
+    "@angular-architects/module-federation": "21.2.2",
+    "@angular/animations": "21.2.17",
+    "@angular/cdk": "21.2.14",
+    "@angular/common": "21.2.17",
+    "@angular/compiler": "21.2.17",
+    "@angular/core": "21.2.17",
+    "@angular/forms": "21.2.17",
+    "@angular/platform-browser": "21.2.17",
+    "@angular/platform-browser-dynamic": "21.2.17",
+    "@angular/router": "21.2.17",
+    "@clr/angular": "18.2.1",
+    "@clr/ui": "18.2.1",
+    "ansi-escapes": "7.3.0",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1",
+    "zone.js": "0.16.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.2.0",
-    "@angular/cli": "19.2.0",
-    "@angular/compiler-cli": "19.2.0",
-    "@types/jasmine": "5.1.0",
+    "@angular-devkit/build-angular": "21.2.17",
+    "@angular/build": "21.2.17",
+    "@angular/cli": "21.2.17",
+    "@angular/compiler-cli": "21.2.17",
+    "@types/jasmine": "5.1.15",
     "archiver": "7.0.1",
-    "jasmine-core": "5.6.0",
-    "karma": "6.4.0",
+    "jasmine-core": "5.13.0",
+    "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
-    "karma-coverage": "2.2.0",
+    "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
-    "karma-jasmine-html-reporter": "2.1.0",
-    "ngx-build-plus": "19.0.0",
-    "typescript": "5.7.2"
+    "karma-jasmine-html-reporter": "2.2.0",
+    "ngx-build-plus": "20.0.0",
+    "typescript": "5.9.3"
   }
 }
diff --git a/packages/vcfa-plugin/projects/ui-plugin/public/manifest.json b/packages/vcfa-plugin/projects/ui-plugin/public/manifest.json
index ebc12c8..0a7008f 100644
--- a/packages/vcfa-plugin/projects/ui-plugin/public/manifest.json
+++ b/packages/vcfa-plugin/projects/ui-plugin/public/manifest.json
@@ -2,7 +2,7 @@
     "urn": "vcfa:plugin:quick-start",
     "name": "Quick Start Plugin",
     "containerVersion": "9.1.0",
-    "manifestVersion": "6.0.0",
+    "manifestVersion": "7.0.0",
     "version": "0.0.0",
     "scope": [
         "service-provider",
diff --git a/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.html b/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.html
index 9bcba00..71fdc01 100755
--- a/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.html
+++ b/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.html
@@ -4,7 +4,7 @@
 
 <clr-vertical-nav [clrVerticalNavCollapsible]="true">
   <a *ngFor="let navItem of navItems" clrVerticalNavLink routerLink="{{navItem.routerLink}}" routerLinkActive="active">
-    <cds-icon *ngIf="navItem.iconShape" clrVerticalNavIcon [attr.shape]="navItem.iconShape" title="{{navItem.labelKey}}"></cds-icon>
+    <cds-icon *ngIf="navItem.iconShape" clrVerticalNavIcon [shape]="navItem.iconShape" title="{{navItem.labelKey}}"></cds-icon>
     {{navItem.labelKey}}
   </a>
 </clr-vertical-nav>
diff --git a/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.ts b/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.ts
index 42a89e9..f0cf9dd 100755
--- a/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.ts
+++ b/packages/vcfa-plugin/projects/ui-plugin/src/plugin/subnav.component.ts
@@ -4,8 +4,7 @@ import { ClarityModule } from "@clr/angular";
 import { StandaloneHelperModule } from "./standalone/standalone.helper.module";
 import { RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router";
 
-import "@cds/core/icon/register";
-import { ClarityIcons, homeIcon } from "@cds/core/icon";
+import { ClarityIcons, homeIcon } from "@clr/angular";
 ClarityIcons.addIcons(homeIcon);
 
 @Component({
diff --git a/packages/vcfa-plugin/projects/ui-plugin/src/styles.scss b/packages/vcfa-plugin/projects/ui-plugin/src/styles.scss
index 2609775..6386d9c 100644
--- a/packages/vcfa-plugin/projects/ui-plugin/src/styles.scss
+++ b/packages/vcfa-plugin/projects/ui-plugin/src/styles.scss
@@ -1,4 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-@import '@cds/core/global.min.css';
-@import '@cds/core/styles/theme.dark.min.css';
 @import '@clr/ui/clr-ui.min.css';
\ No newline at end of file
diff --git a/packages/vcfa-plugin/projects/ui-plugin/vcf-webpack-util.js b/packages/vcfa-plugin/projects/ui-plugin/vcf-webpack-util.js
index b696241..040ab74 100644
--- a/packages/vcfa-plugin/projects/ui-plugin/vcf-webpack-util.js
+++ b/packages/vcfa-plugin/projects/ui-plugin/vcf-webpack-util.js
@@ -21,7 +21,6 @@ function prepare() {
   const coreLibs = [
     "@angular",
     "@clr",
-    "@cds",
     "rxjs",
     "@vcfa"
   ];