Add angular v21 ui plugin simple example

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"
   }
 }

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",

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>

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({

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';

packages/vcfa-plugin/projects/ui-plugin/vcf-webpack-util.js

@@ -21,7 +21,6 @@ function prepare() {
   const coreLibs = [
     "@angular",
     "@clr",
-    "@cds",
     "rxjs",
     "@vcfa"
   ];