modernization ( Lara Theme ): #33882 Upgrade Angular from 20 to 21 & PrimeNG from 17 to 21#34531
Merged
modernization ( Lara Theme ): #33882 Upgrade Angular from 20 to 21 & PrimeNG from 17 to 21#34531
Conversation
…for PrimeNG Select integration
…n logic - Introduced a Set to track loaded pages, preventing redundant data fetching. - Updated content type addition logic to ensure uniqueness based on the variable property and maintain sorted order. - Improved pagination checks to optimize loading behavior and avoid unnecessary API calls.
…d-elements (#34076) # Migrate Stencil from v2 to v4 and Fix Build Errors ## Overview This PR migrates Stencil from version 2.22.2 to 4.39.0 to resolve critical build errors and fixes TypeScript compilation issues that were introduced after the Angular 21 migration. ## Problem Statement After the Angular 21 migration, the Stencil build was failing with: 1. **Runtime Error**: `TypeError: Cannot read properties of null (reading 'newLine')` at `getNewLineCharacter` - This was a bug in Stencil 2.x that prevented builds from completing 2. **TypeScript Compilation Errors**: - `Cannot find module 'primeng/api'` - `Cannot find module '@angular/common/http'` - These errors occurred because Stencil builds couldn't resolve types from Angular/PrimeNG dependencies ## Solution ### 1. Stencil Migration (v2 → v4) **Upgraded Dependencies:** - `@stencil/core`: `^2.22.2` → `^4.39.0` - `@stencil/sass`: `^2.0.3` → `^3.2.3` - `@nxext/stencil`: `20.1.0` → `21.0.0` **Configuration Updates:** - Removed deprecated configuration options - Fixed duplicate `outputTargets` in `dotcms-field-elements/stencil.config.ts` - Verified no deprecated `@Prop` context/connect usage (none found) **Migration References:** - [Stencil 4 Migration Guide](https://stenciljs.com/docs/introduction/upgrading-to-stencil-four) - [Stencil 2 Breaking Changes](https://github.com/stenciljs/core/blob/main/BREAKING_CHANGES.md#stencil-two) - [Stencil 3 Breaking Changes](https://github.com/stenciljs/core/blob/main/BREAKING_CHANGES.md#stencil-v300) ### 2. Type Declaration Stubs Created type declaration stubs (`stencil-types.d.ts`) for both Stencil projects to provide TypeScript type information for external dependencies that aren't available during the Stencil build: - **`@angular/common/http`**: Stub declarations for `HttpClient`, `HttpRequest`, `HttpResponse`, `HttpErrorResponse`, `HttpEvent`, `HttpEventType`, `HttpParams`, `HttpHeaders` - **`primeng/api`**: Stub declarations for `MenuItem`, `MenuItemCommandEvent`, `SelectItem` **Why This Approach?** - Web components should be framework-agnostic and not bundle Angular/PrimeNG code - These dependencies are only needed for type checking, not runtime - Stencil builds web components independently, and these external dependencies shouldn't be included in the final bundle - This is a standard TypeScript pattern using `declare module` **Files Created:** - `libs/dotcms-webcomponents/stencil-types.d.ts` - `libs/dotcms-field-elements/stencil-types.d.ts` ### 3. TypeScript Configuration Updates **Updated `tsconfig.json` files:** - Added `skipLibCheck: true` to ignore type errors in declaration files - Excluded e2e test files (`**/*.e2e.ts`, `**/*.e2e.tsx`) from builds - Updated `include` paths to reference type declaration files - Added `types: ["node"]` for proper type resolution **Files Modified:** - `libs/dotcms-webcomponents/tsconfig.json` - `libs/dotcms-field-elements/tsconfig.json` ### 4. Type-Only Imports Converted regular imports to `import type` for type-only usage to prevent runtime dependencies: **Files Modified:** - `libs/dotcms-models/src/lib/dot-action-menu-item.model.ts` - `libs/dotcms-models/src/lib/dot-apps.model.ts` - `libs/dotcms-models/src/lib/dot-experiments.model.ts` - `libs/dotcms-js/src/lib/core/util/http-response-util.ts` - `libs/dotcms-js/src/lib/core/login.service.ts` ### 5. Babel Runtime Module Resolution **Problem**: Build was failing with `Module not found: Error: Can't resolve '@babel/runtime/helpers/esm/asyncToGenerator.js'` because the build system was looking for `@babel/runtime` in a nested location. **Solution**: - Added `@babel/runtime@^7.28.4` as a direct dependency - Added npm `overrides` to ensure proper module hoisting: ```json "overrides": { "@babel/runtime": "^7.28.4" } ``` ### 6. Additional Fixes **MCP Server Module Resolution:** - Fixed ESM subpath imports by adding `.js` extensions: - `@modelcontextprotocol/sdk/server/mcp` → `@modelcontextprotocol/sdk/server/mcp.js` - `@modelcontextprotocol/sdk/shared/protocol` → `@modelcontextprotocol/sdk/shared/protocol.js` - `@modelcontextprotocol/sdk/types` → `@modelcontextprotocol/sdk/types.js` **SCSS @extend Issues:** - Added `!optional` flag to `@extend #form-field-disabled` in `_autocomplete.scss` - Added `@use "common";` at the top of `form/index.scss` to ensure proper import order **Type Definitions:** - Added `@types/minimatch@^5.1.2` for Stencil build compatibility ## Testing ✅ **All builds now succeed:** - `nx run dotcms-webcomponents:build` - ✅ Success - `nx run dotcms-field-elements:build` - ✅ Success (with type stubs) - `nx run dotcdn:build` - ✅ Success - `nx run mcp-server:build:production` - ✅ Success - `nx run sdk-angular:build:production` - ✅ Success ## Breaking Changes None. This is a bug fix and migration that maintains backward compatibility. ## Migration Notes - The type declaration stubs are minimal and only include the types actually used - If new Angular/PrimeNG types are needed in the future, they should be added to the stubs - The Stencil 4 migration follows official migration guides and maintains all existing functionality ## Related Issues - Resolves Stencil runtime error: `TypeError: Cannot read properties of null (reading 'newLine')` - Resolves TypeScript compilation errors for `primeng/api` and `@angular/common/http` - Resolves Babel runtime module resolution issues - Resolves MCP server module resolution issues This PR fixes: #33882
… for content type selection
…matic sorting and pagination handling
…for lazy load events
…ation to handle NaN values
… management and loading handling
…or content type component
…esting setup in unit tests
…nent with improved prop binding and lazy loading validation
…ontrol for enhanced form handling in unit tests
…nd structure for better readability
…e test cases for clarity and efficiency
…izing indentation and formatting for better readability
…omponent properties and methods to improve code clarity and maintainability
…oading and filtering capabilities
…d virtual scroller initialization for improved user experience
…ze and minHeight properties for better layout control
…ture for content type management
…nce content type selection experience
…d user experience and enhance dropdown options management
…nsive scenarios including lazy loading, filtering, and pinned option functionality
…S/core into issue-33882-primeng-update
fmontes
force-pushed
the
issue-33882-primeng-update
branch
from
e3bf546 to
9e270bd
Compare
…preflight reset on other portlets
… visual issues (#34758) ## Summary Enhance the analytics engagement dashboard with dual-period sparkline comparison, improved chart interactions, and UI refinements across engagement and pageview reports. https://github.com/user-attachments/assets/c46c97ea-7a20-4d7f-a6a0-d8916f1de2ba ## Changes Made ### Frontend - Engagement Sparkline (Current vs Previous Period) - Refactored `DotAnalyticsSparklineComponent` to accept an array of `SparklineDataset` objects instead of a single data series, enabling multi-line sparkline comparison - Added `SparklineDataset` interface with `label`, `data`, `color`, `dashed`, `borderWidth`, and `fillOpacity` properties for per-dataset customization - Updated `with-engagement.feature.ts` store to fetch both current and previous period data using `forkJoin` and `getPreviousPeriod()`, mapping results to `EngagementSparklineData` - Added `EngagementSparklineData` interface to `engagement.types.ts` to hold current and previous sparkline data ### Frontend - Chart Interactions & Plugins - Created `sparkline-crosshair.plugin.ts` - a Chart.js plugin that draws a vertical crosshair line and custom hover points at the active index, bypassing Chart.js internal clipping at chart edges - Implemented custom floating tooltip positioned to the left/right of the hovered point (avoids obstructing chart data), with date and multi-dataset value display - Updated `gradient-fill.plugin.ts` to apply gradient fills to ALL filled datasets (not just the first), using each dataset's `borderColor` and optional `_fillOpacity` multiplier ### Frontend - Engagement Platforms Table - Removed language tab/data from the platforms table component (`PlatformsData`, template, store query, utils, specs) - only Device and Browser remain - Cleaned up `toEngagementPlatforms()` and `getEmptyEngagementPlatforms()` utilities ### Frontend - Top Performing Pages Table - Replaced virtual scroll with PrimeNG native pagination (`[paginator]="true"`, 10 rows per page, no rows-per-page selector) - Removed `p-card` wrapper - table renders directly for a cleaner layout - Changed Pageviews column alignment from `center` to `right` - Removed `p-datatable-sm` class for better row height - Centered pie chart vertically when table is taller (`justify-center` on flex container) ### Backend - ClickHouse Schema - Updated ClickHouse materialized view refresh intervals to 30 seconds for local development (was 15 minutes) - Added `DEPENDS ON` clauses between downstream MVs and `session_facts_rmv` for correct refresh ordering - Switched `utc_time` from `DateTime` to `DateTime64(3,'UTC')` for millisecond precision - Fixed timezone handling: `toDate(session_start)` -> `toDate(session_start, 'UTC')` - Renamed `contextSiteId` dimension to `siteId` across all Cube.js schemas for consistency - Added sparkline documentation to `EngagementDaily.js` Cube schema explaining why `conversionRate` should be used instead of `engagementRate` for day-level trends ### i18n - Added `analytics.engagement.sparkline.period-current` and `analytics.engagement.sparkline.period-previous` translation keys to `Language.properties` ### Event Generator - Fixed session-mixing bug: events are now sent per-session with their own context (was buffering across sessions, inflating engagement rates to 100%) - Added `User-Agent` HTTP header passthrough so device profiles (Desktop/Mobile/Tablet) are correctly classified by the backend UA parser ## Technical Details The sparkline now shows two lines: current period (blue, 2px, gradient fill) and previous period (gray, 1px, subtle gradient with `fillOpacity: 0.35`). The gradient fill plugin was generalized to iterate all datasets with `fill: true`, reading each dataset's `borderColor` for the gradient color and an optional `_fillOpacity` custom property as an opacity multiplier. Native Chart.js hover points are disabled (`hoverRadius: 0`) because they get clipped at chart edges. Instead, the crosshair plugin draws custom hover circles using `ctx.arc()` in the `afterDraw` hook, which renders outside the chart area clipping boundary. ## Breaking Changes - `PlatformsData` interface no longer includes `language` property - `SparklineDataset[]` input replaces the previous single-series `data` input on `DotAnalyticsSparklineComponent` - `TABLE_CONFIG` no longer includes `VIRTUAL_SCROLL_ITEM_SIZE` or `SCROLL_HEIGHT` ## Testing - [x] Unit tests updated for sparkline component (multi-dataset, crosshair plugin, tooltip) - [x] Unit tests updated for platforms table (2 tabs instead of 3) - [x] Unit tests updated for top pages table (pagination, no CardModule) - [x] Unit tests updated for engagement report component (new sparkline data structure) ## Related Issues Closes #34353
…S/core into issue-33882-primeng-update
…grate spec to Spectator
…es (#34784) ## Summary - Replace Angular `@slideAnimation` trigger with CSS-based `animate.enter`/`animate.leave` attributes to remove the deprecated `@angular/animations` dependency from the toolbar component - Change toolbar tree-toggler visibility from conditional rendering (`@if`) to CSS-based show/hide (opacity/visibility/width) so the toggle button animates smoothly instead of popping in/out - Fix folder list view loading skeleton: extract `loadingRow` into a reusable `<ng-template>` and show it inside `emptymessage` during loading so rows appear correctly on initial load and page changes - Update `$loadingRows` signal to track the current page size and emit correctly sized skeleton row arrays on pagination - Fix optional chaining on `$dialog` signal calls in the shell component to prevent null-access errors - Fix `$folder` input type from `null` default to `undefined` (aligns with Angular signal input best practices) - Fix typing errors and update tests to match new DOM structure (toggler now always rendered, assertions check styles rather than element presence) https://github.com/user-attachments/assets/411e025f-b070-47b4-a931-4de53f257141 ## Test plan - [ ] Navigate to Content Drive portlet and verify the folder list renders skeleton loading rows on initial load - [ ] Verify that changing pages shows the correct number of skeleton rows matching the page size - [ ] Expand/collapse the folder tree panel and verify the tree-toggler button animates smoothly (fades rather than snapping in/out) - [ ] Click "Add New" and verify the toolbar button animates in/out when switching between normal and multi-selection mode - [ ] Open a dialog (e.g., create folder), verify it opens and closes correctly without null-reference errors - [ ] Run unit tests: `yarn nx test dot-content-drive-portlet` and confirm all pass - [ ] Run unit tests for the UI lib: `yarn nx test dot-content-drive-ui` and confirm all pass 🤖 Generated with [Claude Code](https://claude.com/claude-code)
adrianjm-dotCMS
approved these changes
Feb 27, 2026
nicobytes
approved these changes
Feb 27, 2026
fmontes
approved these changes
Feb 27, 2026
hmoreras
changed the title
hmoreras
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR upgrades the core-web monorepo from Angular 20 → 21 and PrimeNG 17 → 21, along with a full ecosystem update affecting ~1,979 files across all portlets, shared libraries, and tooling. Beyond dependency bumps, it includes architectural refactoring, new shared components, a Stencil v4 migration, a full dot-rules modernization, and a shift from SCSS + PrimeFlex to native CSS + Tailwind CSS v4.
Dependency Changes
@angular/*20.3.1621.1.2@angular/cdk20.2.921.1.2@angular/cli/@angular-devkit/*20.3.1321.1.2@angular-eslint/*20.7.0^21.0.0primeng17.18.11^21.1.1primeicons7.0.07.0.0(unchanged)primeflex3.3.13.3.1(unchanged, being phased out)@nxext/stencil20.1.021.0.0@primeuix/styles^2.0.2(new)@primeuix/themes^2.0.2(new)tailwindcss^4.1.17(new)tailwindcss-primeui^0.6.1(new)PrimeNG 21 Component Migrations
All deprecated PrimeNG v17 components have been renamed across the entire codebase, including templates, module imports, Storybook stories, and unit tests:
<p-dropdown>/DropdownModule<p-select>/SelectModule<p-calendar>/CalendarModule<p-datePicker>/DatePickerModule<p-tabView>/TabViewModule<p-tabs>/TabsModule<p-sidebar>/SidebarModule<p-drawer>/DrawerModule<p-messages>/MessagesModule<p-message>/MessageModule<p-inputSwitch>/InputSwitchModule<p-toggleSwitch>/ToggleSwitchModule<p-overlayPanel>/OverlayPanelModule<p-popover>/PopoverModulepDeferdirective@deferNew Shared UI Components (
libs/ui)Three new reusable components were extracted from legacy portlet-specific implementations and added to
libs/uifor use across the entire application:DotSiteComponent— A standalone, signal-based site selector withControlValueAccessorintegration, lazy loading via virtual scroll, and apinnedoption for improved UX. Replaces the oldDotSiteSelectorComponentandDotSiteSelectorFieldComponent.DotContentTypeComponent— A standalone content type selector with debounced filtering, virtual scroll, auto-size support, andsignalStatefor reactive state management. Replaces the inline content-type selectors used across portlets.DotThemeComponent— A standalone theme selector with card-based layout andControlValueAccessorsupport. ReplacesDotThemeSelectorDropdownComponent.Removed Legacy Components
The following components were deleted as they are superseded by the new shared ones:
DotSiteSelectorComponent(apps/dotcms-ui/view/components/_common/dot-site-selector/)DotSiteSelectorFieldComponent(apps/dotcms-ui/view/components/_common/dot-site-selector-field/)DotThemeSelectorDropdownComponent(apps/dotcms-ui/view/components/dot-theme-selector-dropdown/)dot-rules Library Modernization
The
libs/dot-ruleslibrary received a full architectural overhaul:karma.conf.js, addedjest.config.tsfeatures/actions/,features/conditions/, etc.)dot-autocomplete-tags.module.ts,dot-unlicense.module.ts,dot-autofocus.module.tsremoved)dropdown.ts,input-date.ts,RestDropdown.ts,serverside-condition.ts,visitors-location.container.ts, and moreStencil Migration: v2 → v4
The Stencil-based web components (
libs/dotcms-field-elements,libs/dotcms-webcomponents) were migrated to Stencil v4 via@nxext/stencil@21.0.0:project.jsonbuild targets andtsconfig.jsonfor both librariesdotcms-field-elements/project.jsonandtsconfig.jsonthat conflicted with the new setupStyling: SCSS → CSS + Tailwind CSS v4
A broad styling migration is in progress across the codebase:
.postcssrc.jsonadded toapps/dotcms-uiandapps/dotcms-block-editorto enable Tailwind CSS v4 PostCSS processingstyle.cssupdated with Tailwind v4 directivestailwindcss-primeuibridges PrimeNG 21's design tokens with Tailwind utilitiessrc/types/primeuix-themes.d.tsadded for@primeuix/themestype supportApp Architecture: NgModule → Standalone
app.module.tsremoved;app.config.tscreated — the main app now bootstraps fully standaloneapp.component.tsupdated accordinglyedit-page.guard.tsmoved to a more appropriate locationAffected Areas (by file count)
apps/dotcms-uilibs/portlets/dot-experimentslibs/portlets/edit-emalibs/edit-contentlibs/dotcms-field-elements(Stencil)libs/uilibs/portlets/dot-analyticslibs/dot-ruleslibs/portlets/dot-content-drivelibs/block-editorlibs/template-builderlibs/dotcms-scssStorybook Updates
All PrimeNG component stories in
src/stories/primeng/were updated to use the new component names and APIs:Calendar.stories.ts,Dropdown.stories.ts,InputSwitch.stories.ts,Messages.stories.ts,OverlayPanel.stories.ts,TabView.stories.ts,Chips.stories.tsand moredot-theme-selector-dropdown.stories.tsremoved (replaced by newDotThemeComponent)dot-palette.component.stories.tsremovedCloses #33882
This PR fixes: #33882