DONT MERGE: Primeng 18 with Lara Theme

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

@@ -48,7 +48,6 @@
                     "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"
                 ],
                 "scripts": [],

core-web/apps/dotcms-ui/proxy-dev.conf.mjs

@@ -19,7 +19,7 @@ export default [
             '/api/vtl',
             '/tinymce'
         ],
-        target: 'http://localhost:8080',
+        target: 'https://demo.dotcms.com',
         secure: false,
         logLevel: 'debug',
         pathRewrite: {

core-web/apps/dotcms-ui/src/app/app.module.ts

@@ -1,4 +1,6 @@
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+import { definePreset } from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { CommonModule } from '@angular/common';
@@ -9,6 +11,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 // App is our top level component
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+import { providePrimeNG } from 'primeng/config';
+
 import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -19,6 +25,41 @@ import { ENV_PROVIDERS } from './providers';
 import { DotDirectivesModule } from './shared/dot-directives.module';
 import { SharedModule } from './shared/shared.module';
 
+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: {
+                primary: {
+                    color: '{blue.900}',
+                    inverseColor: '#ffffff',
+                    hoverColor: '{blue.700}',
+                    activeColor: '{blue.700}'
+                },
+                highlight: {
+                    background: '{blue.50}',
+                    focusBackground: '{blue.50}',
+                    color: '{blue.800}',
+                    focusColor: '{blue.800}'
+                }
+            },
+        }
+    }
+});
+
+
 @NgModule({
     bootstrap: [AppComponent],
     declarations: [AppComponent, ...COMPONENTS],
@@ -39,7 +80,17 @@ import { SharedModule } from './shared/shared.module';
         MarkdownModule.forRoot(),
         DotMessagePipe
     ],
-    providers: [ENV_PROVIDERS],
+    providers: [ENV_PROVIDERS,
+        provideAnimationsAsync(),
+        providePrimeNG({
+            theme: {
+                preset: MyPreset,
+                options: {
+                    darkModeSelector: false
+                }
+            }
+        })
+    ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AppModule {}

core-web/apps/dotcms-ui/src/app/modules.ts

@@ -10,7 +10,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
 import { DropdownModule } from 'primeng/dropdown';
 import { InputTextModule } from 'primeng/inputtext';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TextareaModule } from 'primeng/textarea';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { PasswordModule } from 'primeng/password';
 import { RadioButtonModule } from 'primeng/radiobutton';
@@ -73,7 +73,7 @@ export const NGFACES_MODULES = [
     DialogModule,
     DropdownModule,
     InputTextModule,
-    InputTextareaModule,
+    TextareaModule,
     MultiSelectModule,
     PasswordModule,
     RadioButtonModule,

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.module.ts

@@ -8,7 +8,7 @@ import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { DropdownModule } from 'primeng/dropdown';
 import { InputTextModule } from 'primeng/inputtext';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TextareaModule } from 'primeng/textarea';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotIconModule, DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
@@ -22,7 +22,7 @@ import { DotAppsConfigurationDetailFormComponent } from './dot-apps-configuratio
         CommonModule,
         DotIconModule,
         DropdownModule,
-        InputTextareaModule,
+        TextareaModule,
         InputTextModule,
         ReactiveFormsModule,
         TooltipModule,

core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-create-edit/dot-categories-create-edit.component.scss

@@ -1,12 +1,12 @@
 @use "variables" as *;
 
 :host ::ng-deep {
-    .p-tabview-nav {
+    .p-tabs-nav {
         padding: 0 $spacing-4;
         background: $white;
     }
 
-    .p-tabview-panel {
+    .p-tabs-panel {
         padding: 0 $spacing-4;
         padding-top: $spacing-4;
     }

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html

@@ -12,11 +12,15 @@
             data-testId="query-input" />
         <div class="container-listing__header-options">
             <div class="container-listing__filter-controls">
-                <p-checkbox
-                    (onChange)="handleArchivedFilter($event.checked)"
-                    [label]="'Show-Archived' | dm"
-                    [binary]="true"
-                    data-testId="archiveCheckbox"></p-checkbox>
+                <div class="flex items-center">
+                    <p-checkbox
+                        (onChange)="handleArchivedFilter($event.checked)"
+                        [binary]="true"
+                        inputId="showArchived"
+                        data-testid="archiveCheckbox">
+                    </p-checkbox>
+                    <label for="showArchived" class="ml-2">{{'Show-Archived' | dm}}</label>
+                </div>
             </div>
 
             <div>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-container-code.component.scss

@@ -25,13 +25,13 @@
         color: $color-palette-primary;
     }
 
-    .p-tabview {
+    .p-tabs {
         border: 1px solid $color-palette-gray-500;
     }
 
     .tab-panel-btn:first-child {
         min-height: 63.79px;
-        a.p-tabview-nav-link {
+        a.p-tabs-nav-link {
             align-items: center;
             background: $color-palette-primary-500;
             border: 0;

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-container-code.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { ButtonModule } from 'primeng/button';
-import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { DialogService, DynamicDialog } from 'primeng/dynamicdialog';
 import { MenuModule } from 'primeng/menu';
 import { SkeletonModule } from 'primeng/skeleton';
 import { TabViewModule } from 'primeng/tabview';
@@ -24,7 +24,7 @@ import { DotContentEditorComponent } from './dot-container-code.component';
         DotMessagePipe,
         ReactiveFormsModule,
         ButtonModule,
-        DynamicDialogModule,
+        DynamicDialog,
         DotAddVariableModule,
         DotIconModule,
         SkeletonModule,

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss

@@ -1,17 +1,17 @@
 @use "variables" as *;
 
 .container-create__tab-container ::ng-deep {
-    .p-tabview {
+    .p-tabs {
         height: 100%;
     }
-    .p-tabview-panels {
+    .p-tabs-panels {
         height: 100%;
         flex-grow: 1;
         flex-basis: 0;
         overflow: auto;
     }
 
-    .p-tabview-panel {
+    .p-tabs-panel {
         height: 100%;
         padding: 0 $spacing-4;
         padding-top: $spacing-2;

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.html

@@ -33,12 +33,16 @@ <h2>{{ variant.experimentName }}</h2>
             [pageState]="pageState"
             [variant]="variant" />
 
-        <p-checkbox
-            *ngIf="showWhatsChanged && isEnterpriseLicense$ | async"
-            (onChange)="whatschange.emit($event.checked)"
-            [binary]="true"
-            [label]="'dot.common.whats.changed' | dm"
-            class="dot-edit__what-changed-button" />
+        <div class="flex items-center">
+            <p-checkbox
+                *ngIf="showWhatsChanged && isEnterpriseLicense$ | async"
+                (onChange)="whatschange.emit($event.checked)"
+                [binary]="true"
+                inputId="whatsChanged"
+                class="dot-edit__what-changed-button">
+            </p-checkbox>
+            <label for="whatsChanged" class="ml-2">{{'dot.common.whats.changed' | dm}}</label>
+        </div>
     </div>
 
     <div class="lower-toolbar-right w-5">

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.html

@@ -47,11 +47,15 @@
                         [(ngModel)]="vm.languageIdValue"
                         [options]="vm.languageOptions"
                         class="dot-pages-listing-header__language-input"></p-dropdown>
-                    <p-checkbox
-                        (onChange)="setPagesArchived($event.checked)"
-                        [(ngModel)]="vm.showArchivedValue"
-                        [binary]="true"
-                        [label]="'Show-Archived' | dm"></p-checkbox>
+                    <div class="flex items-center">
+                        <p-checkbox
+                            (onChange)="setPagesArchived($event.checked)"
+                            [(ngModel)]="vm.showArchivedValue"
+                            [binary]="true"
+                            inputId="showArchived">
+                        </p-checkbox>
+                        <label for="showArchived" class="ml-2">{{'Show-Archived' | dm}}</label>
+                    </div>
                 </div>
                 <button
                     (click)="store.getPageTypes()"

core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.html

@@ -9,10 +9,14 @@ <h2 class="dot-starter-title" data-testId="dot-starter-title">
                     [innerHTML]="'starter.description' | dm: [user.username]"
                     class="dot-starter-description"></p>
             </div>
-            <p-checkbox
-                (onChange)="handleVisibility($event.checked)"
-                [binary]="true"
-                [label]="'starter.dont.show' | dm"></p-checkbox>
+            <div class="flex items-center">
+                <p-checkbox
+                    (onChange)="handleVisibility($event.checked)"
+                    [binary]="true"
+                    inputId="dontShow">
+                </p-checkbox>
+                <label for="dontShow" class="ml-2">{{'starter.dont.show' | dm}}</label>
+            </div>
         </div>
         <div class="col-12">
             <div class="grid">

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.scss

@@ -1,15 +1,15 @@
 @use "variables" as *;
 
 :host,
-:host ::ng-deep .p-tabview-panels {
+:host ::ng-deep .p-tabs-panels {
     overflow: hidden;
     flex-grow: 1;
     flex-basis: 0;
 }
 
 :host {
     & ::ng-deep {
-        .p-tabview {
+        .p-tabs {
             display: flex;
             flex-direction: column;
             height: 100%;
@@ -19,7 +19,7 @@
             }
         }
 
-        .p-tabview-panel:not([hidden]) {
+        .p-tabs-panel:not([hidden]) {
             height: 100%;
         }
 
@@ -31,7 +31,7 @@
         }
 
         .dot-template-builder__new-template-builder {
-            .p-tabview-nav {
+            .p-tabs-nav {
                 padding: 0 $spacing-5;
             }
         }

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-create-edit.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
-import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { DialogService, DynamicDialog } from 'primeng/dynamicdialog';
 
 import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
 import { DotApiLinkComponent, DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
@@ -20,7 +20,7 @@ import { DotTemplatePropsModule } from './dot-template-props/dot-template-props.
         DotPortletBaseModule,
         DotTemplateCreateEditRoutingModule,
         DotTemplatePropsModule,
-        DynamicDialogModule,
+        DynamicDialog,
         DotMessagePipe,
         DotFieldRequiredDirective,
         DotTemplateBuilderModule

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-props.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { InputTextModule } from 'primeng/inputtext';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TextareaModule } from 'primeng/textarea';
 
 import { DotThemeSelectorDropdownModule } from '@components/dot-theme-selector-dropdown/dot-theme-selector-dropdown.module';
 import {
@@ -24,7 +24,7 @@ import { DotTemplateThumbnailFieldModule } from './dot-template-thumbnail-field/
         DotFormDialogComponent,
         FormsModule,
         InputTextModule,
-        InputTextareaModule,
+        TextareaModule,
         ReactiveFormsModule,
         DotMessagePipe,
         DotTemplateThumbnailFieldModule,

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-list/dot-template-list.component.html

@@ -15,11 +15,15 @@
     dataKey="inode">
     <div class="template-listing__header-options">
         <div>
-            <p-checkbox
-                (onChange)="handleArchivedFilter($event.checked)"
-                [label]="'Show-Archived' | dm"
-                [binary]="true"
-                data-testid="archiveCheckbox"></p-checkbox>
+            <div class="flex items-center">
+                <p-checkbox
+                    (onChange)="handleArchivedFilter($event.checked)"
+                    [binary]="true"
+                    inputId="showArchived"
+                    data-testid="archiveCheckbox">
+                </p-checkbox>
+                <label for="showArchived" class="ml-2">{{'Show-Archived' | dm}}</label>
+            </div>
             <button
                 (click)="actionsMenu.toggle($event)"
                 [disabled]="!this.selectedTemplates?.length"