Issue 33882 primeng update

.gitignore

@@ -190,6 +190,9 @@ examples/nextjs/package-lock.json
 examples/angular/package-lock.json
 examples/astro/package-lock.json
 
+# core-web uses yarn, ignore npm lock file
+/core-web/package-lock.json
+
 local/
 
 **/.yalc/

COMMIT_MESSAGE.txt

@@ -0,0 +1,11 @@
+refactor: migrate PrimeFlex classes to Tailwind CSS
+
+Migrate all PrimeFlex utility classes to Tailwind CSS equivalents using pf2tw tool.
+
+- Replace `align-items-*` → `items-*`
+- Replace `justify-content-*` → `justify-*`
+- Replace `flex-grow-1` → `grow`
+- Update spacing and sizing utilities to Tailwind scale
+- Update color utilities to use PrimeNG theme tokens
+
+Affects components across dotcms-ui, ui library, and various portlets.

core-web/.cursor/mcp.json

@@ -0,0 +1,9 @@
+{
+    "mcpServers": {
+        "primeng": {
+            "type": "stdio",
+            "command": "npx",
+            "args": ["-y", "@primeng/mcp"]
+        }
+    }
+}

core-web/README.MD

@@ -13,7 +13,6 @@ This folder contains the frontend infrastructure for the DotCMS admin system, in
 | [dot-layout-grid](https://github.com/dotCMS/core-web/tree/main/libs/dot-layout-grid)             | lib  | `libs/dot-layout-grid`       | Angular    | Components for layout editor                                |
 | [block-editor](https://github.com/dotCMS/core-web/tree/main/libs/block-editor)                   | lib  | `libs/block-editor`          | TitTap     | Block editor components                                     |
 | [dot-rules](https://github.com/dotCMS/core-web/tree/main/libs/dot-rules)                         | lib  | `libs/dot-rules`             | Angular    | Components and services for rules                           |
-| [dotcms-field-elements](https://github.com/dotCMS/core-web/tree/main/libs/dotcms-field-elements) | lib  | `libs/dotcms-field-elements` | Stenciljs  | Web components for form builder (deprecated)                |
 | [dotcms-js](https://github.com/dotCMS/core-web/tree/main/libs/dotcms-js)                         | lib  | `libs/dotcms-js`             | Angular    | Angular @injectables for DotCMS API                         |
 | [dotcms-models](https://github.com/dotCMS/core-web/tree/main/libs/dotcms-models)                 | lib  | `libs/dotcms-models`         | Typescript | DotCMS interfaces and types                                 |
 | [dotcms-scss](https://github.com/dotCMS/core-web/tree/main/libs/dotcms-scss)                     | lib  | `libs/dotcms-scss`           | SCSS       | SCSS shared files for theme Angular PrimeNG and Dijit Theme |

core-web/apps/dotcdn/project.json

@@ -19,7 +19,6 @@
                     "libs/dotcms-scss/angular/styles.scss",
                     "node_modules/primeicons/primeicons.css",
                     "node_modules/primeflex/primeflex.css",
-                    "node_modules/primeng/resources/primeng.min.css",
                     "apps/dotcdn/src/styles.scss"
                 ],
                 "stylePreprocessorOptions": {
@@ -96,7 +95,6 @@
                     "libs/dotcms-scss/angular/styles.scss",
                     "node_modules/primeicons/primeicons.css",
                     "node_modules/primeflex/primeflex.css",
-                    "node_modules/primeng/resources/primeng.min.css",
                     "apps/dotcdn/src/styles.scss"
                 ],
                 "assets": ["apps/dotcdn/src/favicon.ico", "apps/dotcdn/src/assets"],

core-web/apps/dotcdn/src/app/app.component.html

@@ -1,14 +1,14 @@
-<p-tabView>
+<p-tabs>
     @if (vm$ | async; as VM) {
-        <p-tabPanel header="Overview">
+        <p-tab header="Overview">
             <div class="dot-cdn__tab-content">
                 <div class="dot-cdn__tab-content-meta">
-                    <p-dropdown
+                    <p-select
                         (onChange)="changePeriod($event)"
                         [(ngModel)]="selectedPeriod.value"
                         [options]="periodValues"
                         optionLabel="label"
-                        optionValue="value" />
+                        optionValue="value"></p-select>
                     @if (VM.cdnDomain) {
                         <div class="dot-cdn__tab-domain">
                             <small>Root CDN Domain</small>
@@ -64,10 +64,10 @@ <h3 class="dot-cdn__tab-content-label">Requests Served</h3>
                     }
                 </div>
             </div>
-        </p-tabPanel>
+        </p-tab>
     }
     @if (vmPurgeLoaders$ | async; as VMPurgeLoaders) {
-        <p-tabPanel header="Flush Cache">
+        <p-tab header="Flush Cache">
             <div class="dot-cdn__tab-content--contained">
                 <form [formGroup]="purgeZoneForm">
                     <div class="dot-cdn__tab-content__row">
@@ -105,6 +105,6 @@ <h3 class="dot-cdn__tab-content-label">Purge All</h3>
                         class="p-button-danger p-button-outlined"></button>
                 </div>
             </div>
-        </p-tabPanel>
+        </p-tab>
     }
-</p-tabView>
+</p-tabs>

core-web/apps/dotcdn/src/app/app.module.ts

@@ -7,11 +7,11 @@ import { RouterModule } from '@angular/router';
 
 import { ButtonModule } from 'primeng/button';
 import { ChartModule } from 'primeng/chart';
-import { DropdownModule } from 'primeng/dropdown';
 import { InputTextModule } from 'primeng/inputtext';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { SelectModule } from 'primeng/select';
 import { SkeletonModule } from 'primeng/skeleton';
-import { TabViewModule } from 'primeng/tabview';
+import { TabsModule } from 'primeng/tabs';
+import { TextareaModule } from 'primeng/textarea';
 
 import {
     CoreWebService,
@@ -41,13 +41,13 @@ const dotEventSocketURLFactory = () => {
     imports: [
         BrowserModule,
         InputTextModule,
-        DropdownModule,
+        SelectModule,
         BrowserAnimationsModule,
         HttpClientModule,
         RouterModule.forRoot([]),
-        TabViewModule,
+        TabsModule,
         ChartModule,
-        InputTextareaModule,
+        TextareaModule,
         ButtonModule,
         DotIconComponent,
         FormsModule,

core-web/apps/dotcms-binary-field-builder/project.json

@@ -22,11 +22,7 @@
                 ],
                 "styles": [
                     "node_modules/primeicons/primeicons.css",
-                    "node_modules/primeng/resources/primeng.min.css",
                     "libs/dotcms-scss/angular/dotcms-theme/_misc.scss",
-                    "libs/dotcms-scss/angular/dotcms-theme/components/buttons/common.scss",
-                    "libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss",
-                    "libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss",
                     "libs/dotcms-scss/angular/dotcms-theme/components/form/_inputtext.scss",
                     "libs/dotcms-scss/angular/dotcms-theme/utils/_validation.scss",
                     "libs/dotcms-scss/angular/_prime-icons.scss"

core-web/apps/dotcms-block-editor/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

core-web/apps/dotcms-block-editor/project.json

@@ -26,13 +26,8 @@
                 ],
                 "styles": [
                     "node_modules/primeicons/primeicons.css",
-                    "node_modules/primeflex/primeflex.css",
-                    "node_modules/primeng/resources/primeng.min.css",
-                    "libs/dotcms-scss/angular/_forms.scss",
-                    "libs/dotcms-scss/angular/_mixins.scss",
-                    "libs/dotcms-scss/angular/dotcms-theme/theme.scss",
-                    "libs/dotcms-scss/angular/_prime-icons.scss",
-                    "apps/dotcms-block-editor/src/styles.scss"
+                    "libs/dotcms-scss/angular/styles.scss",
+                    "apps/dotcms-block-editor/src/styles.css"
                 ],
                 "stylePreprocessorOptions": {
                     "includePaths": ["libs/dotcms-scss/angular"]
@@ -74,8 +69,8 @@
                     "budgets": [
                         {
                             "type": "initial",
-                            "maximumWarning": "2mb",
-                            "maximumError": "2.8mb"
+                            "maximumWarning": "2.5mb",
+                            "maximumError": "3mb"
                         },
                         {
                             "type": "anyComponentStyle",

core-web/apps/dotcms-block-editor/src/app/app.module.ts

@@ -10,8 +10,12 @@ import { ListboxModule } from 'primeng/listbox';
 import { OrderListModule } from 'primeng/orderlist';
 
 import { BlockEditorModule, DotBlockEditorComponent } from '@dotcms/block-editor';
-import { DotPropertiesService, DotContentSearchService } from '@dotcms/data-access';
-import { DotAssetSearchComponent } from '@dotcms/ui';
+import {
+    DotPropertiesService,
+    DotContentSearchService,
+    DotMessageService
+} from '@dotcms/data-access';
+import { DotAssetSearchComponent, provideDotCMSTheme } from '@dotcms/ui';
 
 import { AppComponent } from './app.component';
 
@@ -28,7 +32,12 @@ import { AppComponent } from './app.component';
         HttpClientModule,
         DotAssetSearchComponent
     ],
-    providers: [DotPropertiesService, DotContentSearchService]
+    providers: [
+        DotPropertiesService,
+        DotContentSearchService,
+        DotMessageService,
+        provideDotCMSTheme()
+    ]
 })
 export class AppModule implements DoBootstrap {
     constructor(private injector: Injector) {}

core-web/apps/dotcms-block-editor/src/styles.scss → core-web/apps/dotcms-block-editor/src/styles.css

@@ -1,3 +1,6 @@
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+
 .p-dialog-mask.p-component-overlay.p-dialog-mask-scrollblocker {
     background-color: transparent;
     backdrop-filter: none;

core-web/apps/dotcms-ui/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

core-web/apps/dotcms-ui/project.json

@@ -66,11 +66,10 @@
                     }
                 ],
                 "styles": [
+                    "node_modules/prismjs/themes/prism-okaidia.css",
                     "node_modules/primeicons/primeicons.css",
                     "libs/dotcms-scss/angular/styles.scss",
-                    "node_modules/primeflex/primeflex.css",
-                    "node_modules/primeng/resources/primeng.min.css",
-                    "node_modules/gridstack/dist/gridstack.min.css"
+                    "apps/dotcms-ui/src/style.css"
                 ],
                 "scripts": [],
                 "stylePreprocessorOptions": {
@@ -194,4 +193,4 @@
     },
     "tags": [],
     "implicitDependencies": ["dotcms-webcomponents"]
-}
+}