change to v22 and ui optimus ng

UI/package.json

@@ -1,57 +1,57 @@
-{
-  "name": "family-tree-ui",
-  "version": "1.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "prettier": {
-    "printWidth": 100,
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
-  },
-  "private": true,
-  "packageManager": "npm@11.6.4",
-  "dependencies": {
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@ngrx/effects": "^21.0.1",
-    "@ngrx/store": "^21.0.1",
-    "@ngrx/store-devtools": "^21.0.1",
-    "@primeuix/themes": "^2.0.2",
-    "@tailwindcss/postcss": "^4.1.17",
-    "file-saver": "^2.0.5",
-    "moment": "^2.30.1",
-    "postcss": "^8.5.6",
-    "primeicons": "^7.0.0",
-    "primeng": "^21.0.1",
-    "rxjs": "~7.8.0",
-    "tailwindcss": "^4.1.17",
-    "tailwindcss-primeui": "^0.6.1",
-    "tslib": "^2.3.0",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@angular/build": "^21.2.7",
-    "@angular/cli": "^21.2.7",
-    "@angular/compiler-cli": "^21.0.0",
-    "@types/file-saver": "^2.0.7",
-    "jsdom": "^27.1.0",
-    "typescript": "~5.9.2",
-    "vitest": "^4.0.8"
-  }
-}
+{
+  "name": "family-tree-ui",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@11.6.4",
+  "dependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "@ngrx/effects": "^22.0.0",
+    "@ngrx/store": "^22.0.0",
+    "@ngrx/store-devtools": "^22.0.0",
+    "@openng/optimus-ui": "^2.0.2",
+    "@tailwindcss/postcss": "^4.1.17",
+    "file-saver": "^2.0.5",
+    "moment": "^2.30.1",
+    "postcss": "^8.5.6",
+    "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.17",
+    "tslib": "^2.3.0",
+    "xlsx": "^0.18.5",
+    "@openng/icons": "^1.0.0",
+    "@openng/optimus-ui-themes": "^2.0.2",
+    "@openng/optimus-ui-tailwindcss": "^2.0.2"
+  },
+  "devDependencies": {
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
+    "@types/file-saver": "^2.0.7",
+    "jsdom": "^27.1.0",
+    "typescript": "~6.0.0",
+    "vitest": "^4.0.8"
+  }
+}

UI/src/app/app.config.ts

@@ -1,9 +1,9 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners ,
   provideAppInitializer} from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
-import { providePrimeNG } from 'primeng/config';
+import { provideOptimus } from '@openng/optimus-ui/config';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
 import { routes } from './app.routes';
 import MyPreset from './mythem';
 import { JwtInterceptor, ErrorInterceptor, initializeApp } from './shares';
@@ -29,13 +29,13 @@ export const appConfig: ApplicationConfig = {
     provideAppInitializer(initializeApp()),
     provideHttpClient(withInterceptors([JwtInterceptor, ErrorInterceptor])),
     provideRouter(routes, withComponentInputBinding()),
-    providePrimeNG({
+    provideOptimus({
         theme: {
             preset: MyPreset,
             options: {
                 cssLayer: {
-                    name: 'primeng',
-                    order: 'theme, base, primeng'
+                    name: 'optimus',
+                    order: 'theme, base, optimus'
                 }
             }
         }

UI/src/app/app.ts

@@ -2,8 +2,8 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { ToastModule } from 'primeng/toast';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ToastModule } from '@openng/optimus-ui/toast';
+import { ConfirmDialogModule } from '@openng/optimus-ui/confirmdialog';
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet,ToastModule,ToolbarComponent,ConfirmDialogModule],

UI/src/app/attachphoto/add.photo.ts

@@ -1,15 +1,15 @@
 import { ChangeDetectorRef, Component, inject, Inject, OnDestroy, OnInit, signal } from '@angular/core';
-import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from 'primeng/dynamicdialog';
+import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from '@openng/optimus-ui/dynamicdialog';
 
 import { LookupEdit } from '../models';
 import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Subject, Subscription } from 'rxjs';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
 import { LookupService } from '../shares';
 import { CommonModule } from '@angular/common';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
-import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
 @Component({
     selector: 'add-photo',
     imports: [CommonModule, ReactiveFormsModule,

UI/src/app/attachphoto/photolist.ts

@@ -2,16 +2,16 @@
 import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal, output } from '@angular/core';
 import { catchError, EMPTY, finalize, Subscription } from 'rxjs';
 import { CommonUtilities, HttpUtility, LookupService } from '../shares';
-import { DialogService ,DynamicDialogConfig,DynamicDialogModule, DynamicDialogRef} from 'primeng/dynamicdialog';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { DialogService ,DynamicDialogConfig,DynamicDialogModule, DynamicDialogRef} from '@openng/optimus-ui/dynamicdialog';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
 import { AddPhoto } from './add.photo';
 import { PersonPhotoDto } from '../models';
 
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { TableModule } from 'primeng/table';
-import { ButtonModule } from 'primeng/button';
-import { TooltipModule } from 'primeng/tooltip';
+import { TableModule } from '@openng/optimus-ui/table';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TooltipModule } from '@openng/optimus-ui/tooltip';
 import { AuthenticationService } from '../user-services';
 import { HttpResponse } from '@angular/common/http';
 import { PersonService } from '../person';

UI/src/app/import.com/import.com.ts

@@ -1,9 +1,9 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { FileUploadEvent, FileUploadModule } from 'primeng/fileupload';
-import { MessageService } from 'primeng/api';
-import { FileUpload } from 'primeng/fileupload';
-import { ToastModule } from 'primeng/toast';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { FileUploadEvent, FileUploadModule } from '@openng/optimus-ui/fileupload';
+import { MessageService } from '@openng/optimus-ui/api';
+import { FileUpload } from '@openng/optimus-ui/fileupload';
+import { ToastModule } from '@openng/optimus-ui/toast';
 import { AppSettingService } from '../shares';
 /*
 interface UploadEvent {

UI/src/app/login/login.ts

@@ -5,13 +5,13 @@ import { first } from 'rxjs/operators';
 
 import { AuthenticationService } from '../user-services';
 
-import { ConfirmationService } from 'primeng/api';
+import { ConfirmationService } from '@openng/optimus-ui/api';
 import { Subject, Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
-import { CardModule } from 'primeng/card';
+import { CardModule } from '@openng/optimus-ui/card';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 
 import { AppSettingService, Utils } from '../shares';
 @Component({

UI/src/app/mythem.ts

@@ -1,71 +1,62 @@
-
-
-//mypreset.ts
-import { definePreset } from '@primeuix/themes';
-import Aura from '@primeuix/themes/aura';
-import { primitive } from '@primeuix/themes/aura/base';
-
-const MyPreset = definePreset(Aura, {
-    semantic: {
-        colorScheme: {
-            primitive: {
-                cyan: {
-                    50: '{cyan.50}',
-                    100: '{cyan.100}',
-                    200: '{cyan.200}',
-                    300: '{cyan.300}',
-                   400: '{cyan.400}',
-                    500: '{cyan.500}',
-                   }
-
-            },
-             primary: {
-            50: '{zinc.50}',
-            100: '{zinc.100}',
-            200: '{zinc.200}',
-            300: '{zinc.300}',
-            400: '{zinc.400}',
-            500: '{zinc.500}',
-            600: '{zinc.600}',
-            700: '{zinc.700}',
-            800: '{zinc.800}',
-            900: '{zinc.900}',
-            950: '{zinc.950}'
-        },
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                }
-            }
-        }
-    }
-});
-
-export default MyPreset;
+
+
+//mypreset.ts
+import { definePreset } from '@openng/optimus-ui-themes';
+import Aura from '@openng/optimus-ui-themes/aura';
+
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{blue.50}',
+            100: '{blue.100}',
+            200: '{blue.200}',
+            300: '{blue.300}',
+            400: '{blue.400}',
+            500: '{blue.500}',
+            600: '{blue.600}',
+            700: '{blue.700}',
+            800: '{blue.800}',
+            900: '{blue.900}',
+            950: '{blue.950}'
+        },
+        colorScheme: {
+
+
+            light: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{blue.50}',
+                    100: '{blue.100}',
+                    200: '{blue.200}',
+                    300: '{blue.300}',
+                    400: '{blue.400}',
+                    500: '{blue.500}',
+                    600: '{blue.600}',
+                    700: '{blue.700}',
+                    800: '{blue.800}',
+                    900: '{blue.900}',
+                    950: '{blue.950}'
+                }
+            },
+            dark: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{slate.50}',
+                    100: '{slate.100}',
+                    200: '{slate.200}',
+                    300: '{slate.300}',
+                    400: '{slate.400}',
+                    500: '{slate.500}',
+                    600: '{slate.600}',
+                    700: '{slate.700}',
+                    800: '{slate.800}',
+                    900: '{slate.900}',
+                    950: '{slate.950}'
+                }
+            }
+        }
+
+    }
+});
+
+export default MyPreset;

UI/src/app/person/family.orga.ts

@@ -1,23 +1,23 @@
 import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
 
 import { StaffView ,StaffSearch, Person, RelationShip } from '../models';
-import { OrganizationChartModule } from 'primeng/organizationchart';
+import { OrganizationChartModule } from '@openng/optimus-ui/organizationchart';
 
 import { take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { PersonService } from './person.service';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { TreeNode } from 'primeng/api';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TreeNode } from '@openng/optimus-ui/api';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
 import { PersonEdit } from './person.edit';
-import { MessageService } from 'primeng/api';
-import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
+import { MessageService } from '@openng/optimus-ui/api';
+import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from '@openng/optimus-ui/tree';
 import { Utils } from '../shares';
-import { PopoverModule } from 'primeng/popover';
+import { PopoverModule } from '@openng/optimus-ui/popover';
 
 @Component({
   selector: 'family-orga',
@@ -64,7 +64,7 @@ export class FamilyOrga implements OnInit, OnDestroy{
         {
             expanded: true,
             type: 'person',
-            styleClass: 'bg-indigo-500 text-white',
+        styleClass: 'bg-blue-500 text-white',
             data: {
                 image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png',
                 name: 'Amy Elsner',

UI/src/app/person/family.tree.ts

@@ -1,24 +1,24 @@
 import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
 
 import { StaffView ,StaffSearch, Person } from '../models';
-import { OrganizationChartModule } from 'primeng/organizationchart';
+import { OrganizationChartModule } from '@openng/optimus-ui/organizationchart';
 
 import { take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { PersonService } from './person.service';
 import { AuthenticationService } from '../user-services';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { TreeNode } from 'primeng/api';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TreeNode } from '@openng/optimus-ui/api';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService } from '@openng/optimus-ui/dynamicdialog';
 import { PersonEdit } from './person.edit';
-import { MessageService } from 'primeng/api';
-import { CheckboxModule } from 'primeng/checkbox';
-import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
+import { MessageService } from '@openng/optimus-ui/api';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from '@openng/optimus-ui/tree';
 import { Utils } from '../shares';
 
 @Component({

UI/src/app/person/familylist.ts

@@ -8,17 +8,17 @@ import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { PersonService } from './person.service';
 import { AuthenticationService } from '../user-services';
-import { Table, TableModule } from 'primeng/table';
+import { Table, TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService } from '@openng/optimus-ui/dynamicdialog';
 import { PersonEdit } from './person.edit';
-import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
-import { IconFieldModule } from 'primeng/iconfield';
-import { InputIconModule } from 'primeng/inputicon';
-import { Menu, MenuModule } from 'primeng/menu';
+import { ConfirmationService, MenuItem, MessageService } from '@openng/optimus-ui/api';
+import { IconFieldModule } from '@openng/optimus-ui/iconfield';
+import { InputIconModule } from '@openng/optimus-ui/inputicon';
+import { Menu, MenuModule } from '@openng/optimus-ui/menu';
 import { FamilyOrga } from './family.orga';
 
 import { saveAs } from 'file-saver';

UI/src/app/person/person.edit.ts

@@ -1,28 +1,28 @@
 import { ChangeDetectorRef, Component, inject, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import {DialogService, DynamicDialogRef} from 'primeng/dynamicdialog';
-import {DynamicDialogConfig} from 'primeng/dynamicdialog';
+import {DialogService, DynamicDialogRef} from '@openng/optimus-ui/dynamicdialog';
+import {DynamicDialogConfig} from '@openng/optimus-ui/dynamicdialog';
 import { FormControl, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subject, Subscription} from 'rxjs';
-import { ConfirmationService, MessageService } from 'primeng/api';
-import { DatePickerModule } from 'primeng/datepicker';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
+import { DatePickerModule } from '@openng/optimus-ui/datepicker';
 import { Code, RelationShipView, Person, mState, RelationShip, PersonPhotoDto, enumPhoto } from '../models';
 import { AppSettingService, LookupService, Utils } from '../shares';
 import { PersonService } from './person.service';
-import { ButtonModule } from 'primeng/button';
-import { SelectModule } from 'primeng/select';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { SelectModule } from '@openng/optimus-ui/select';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 import moment from 'moment';
 import { HttpEvent } from '@angular/common/http';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { Pickperson } from '../pickperson/pickperson';
 import { ImageDisplayComponent } from '../pickperson/image.display';
-import { TooltipModule } from 'primeng/tooltip';
-import { AutoFocusModule } from 'primeng/autofocus';
+import { TooltipModule } from '@openng/optimus-ui/tooltip';
+import { AutoFocusModule } from '@openng/optimus-ui/autofocus';
 import { DomSanitizer } from '@angular/platform-browser';
 import { PhotoList } from '../attachphoto/photolist';
-import { InputNumberDesignTokens } from '@primeuix/themes/types/inputnumber';
+import { InputNumberDesignTokens } from '@openng/optimus-ui-themes/types/inputnumber';
 
 export interface FileUploadEvent {
   originalEvent: HttpEvent<any>;

UI/src/app/person/person.service.ts

@@ -4,7 +4,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Staff,StaffSearch, StaffView, ResultModel,ConfigureUrl,ResetPassword, Person, PersonContainer, RelationShip }  from '../models';
 import { AppSettingService } from '../shares';
-import { TreeNode } from 'primeng/api';
+import { TreeNode } from '@openng/optimus-ui/api';
 
 @Injectable({ providedIn: 'root' })
 export class PersonService {

UI/src/app/pickperson/image.display.ts

@@ -5,8 +5,8 @@ import { PersonService } from '../person';
 import { Subscription } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
 
 @Component({
   selector: 'app-image-display',

UI/src/app/pickperson/pickperson.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Table, TableModule } from 'primeng/table';
+import { Table, TableModule } from '@openng/optimus-ui/table';
 import { Person } from '../models';
-import { IconFieldModule } from 'primeng/iconfield';
-import { InputIconModule } from 'primeng/inputicon';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
+import { IconFieldModule } from '@openng/optimus-ui/iconfield';
+import { InputIconModule } from '@openng/optimus-ui/inputicon';
+import { DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 
 @Component({
   selector: 'app-pickperson',

UI/src/app/shares/utils.ts

@@ -1,6 +1,6 @@
 import moment from "moment";
 import { Person, User, userRole } from "../models"
-import { TreeNode } from "primeng/api";
+import { TreeNode } from "@openng/optimus-ui/api";
 
 type MyProName = "fatherId" | "motherId";
 

UI/src/app/staff/staff.component.ts

@@ -9,11 +9,11 @@ import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { StaffService } from './staff.service';
 import { AuthenticationService } from '../user-services';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 import { selectStaffLoaded,selectStaff } from '../state/staff.selectors';
 
 @Component({

UI/src/app/staff/staff.edit.component.ts

@@ -2,15 +2,15 @@ import { Component, inject, input, numberAttribute, OnDestroy, OnInit } from '@a
 import { Router, ActivatedRoute } from '@angular/router';
 import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subject, Subscription} from 'rxjs';
-import { MessageService } from 'primeng/api';
+import { MessageService } from '@openng/optimus-ui/api';
 
 import {Staff, Code, userRole}  from '../models';
 import { LookupService, Utils } from '../shares';
 import { StaffService } from './staff.service';
-import { ButtonModule } from 'primeng/button';
-import { SelectModule } from 'primeng/select';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { SelectModule } from '@openng/optimus-ui/select';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 
 @Component({
 templateUrl: 'staff.edit.component.html',

UI/src/app/staff/staff.pass.component.ts

@@ -2,13 +2,13 @@ import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subject, Subscription} from 'rxjs';
-import { MessageService } from 'primeng/api';
+import { MessageService } from '@openng/optimus-ui/api';
 
 import {Staff, Code, userRole, ResetPassword}  from '../models';
 import { LookupService, Utils } from '../shares';
 import { StaffService } from './staff.service';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
+import { ButtonModule } from '@openng/optimus-ui/button';
 
 @Component({
 templateUrl: 'staff.pass.component.html',

UI/src/app/toolbar/toolbar.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, OnDestroy, effect, computed, Signal, } from '@angular/core';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { MenuItem } from 'primeng/api';
-import { MenuModule } from 'primeng/menu';
-import { ButtonModule} from 'primeng/button';
-import { ButtonGroupModule } from 'primeng/buttongroup';
+import { MenuItem } from '@openng/optimus-ui/api';
+import { MenuModule } from '@openng/optimus-ui/menu';
+import { ButtonModule} from '@openng/optimus-ui/button';
+import { ButtonGroupModule } from '@openng/optimus-ui/buttongroup';
 import { Subscription } from 'rxjs';
 import { AuthenticationService } from '../user-services';
 import { Utils } from '../shares';

UI/src/styles.css

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "tailwindcss";
-@plugin "tailwindcss-primeui";
-@import "primeicons/primeicons.css";
+@plugin "@openng/optimus-ui-tailwindcss";
+@import "@openng/icons/openng-icons.css";
 html,
 body {
     height: 100%;

UI/tsconfig.json

@@ -10,7 +10,6 @@
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
     "isolatedModules": true,
-    "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
     "module": "preserve"