refactor: fix update class bindings in HTML templates

[nicobytes]

This pull request refactors several Angular components to remove the use of the NgClass directive in favor of using Angular's built-in [class] and [class.class-name] bindings for conditional styling. This change simplifies the codebase, reduces unnecessary imports, and improves readability and maintainability.

Refactoring and code simplification:

• Replaced all uses of [ngClass] with explicit [class] and [class.class-name] bindings in component templates, making conditional class application clearer and more idiomatic. [1] [2] [3] [4]
• Removed NgClass imports from component TypeScript files and their imports arrays, as it is no longer needed after the template changes. [1] [2] [3] [4] [5] [6]

Related: #32713

[claude]

Claude finished @nicobytes's task in 1m 11s —— View job

---

PR Review

• Gather context
• Read changed files
• Post review

---

One real issue, one observation worth flagging:

1. Silent class change in dot-edit-content.layout.component.html (line 17)

The original binding was:

[ngClass]="{ 'border-b border-(--gray-300)': topBarHasMessages }"

The PR replaces it with:

[class.border-b]="topBarHasMessages"
[class.border-gray-300]="topBarHasMessages"

border-(--gray-300) is Tailwind v4 CSS custom property syntax — it applies --gray-300 as the border color via var(--gray-300). border-gray-300 is the static Tailwind utility that bakes in the gray-300 color value at build time. These behave differently if --gray-300 is overridden at runtime (e.g., for theming or dark mode). If that variable is used anywhere for theming, this is a silent regression. Confirm the two are genuinely interchangeable in this project before merging.

Fix this →

2. content-type-fields-add-row.component.html — duplicate condition evaluation

The element now has [class.active] alongside [class.bg-primary-50], [class.ring-2], [class.ring-primary-200] all bound to i === selectedColumnIndex. The [class.active] was pre-existing, so this isn't introduced by this PR — but worth noting these four bindings all evaluate the same expression independently per change detection cycle. Not a bug, but a minor inefficiency that could be a single @let isSelected = i === selectedColumnIndex if this component ever sees perf pressure.

Everything else looks correct. The dot-edit-content-compare sidebar toggle refactor, dot-action-button label styling, and NgClass import removals are all clean and functionally equivalent.

[Copilot]

Pull request overview

This PR refactors a set of Angular component templates to stop using NgClass and instead rely on Angular class bindings ([class] / [class.some-class]) for conditional styling, reducing directive imports and making template class logic more explicit.

Changes:

• Replaced [ngClass] usages in selected templates with explicit class bindings.
• Removed NgClass from standalone component imports arrays where it’s no longer used.
• Split combined conditional class strings into multiple conditional class bindings for readability.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.ts	Removes NgClass import from standalone component imports.
core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.html	Replaces [ngClass] on the top bar with class bindings (one binding needs adjustment).
core-web/libs/edit-content/src/lib/components/dot-edit-content-compare/dot-edit-content-compare.component.ts	Removes NgClass from standalone component imports.
core-web/libs/edit-content/src/lib/components/dot-edit-content-compare/dot-edit-content-compare.component.html	Replaces [ngClass] with multiple [class.*] bindings for sidebar toggle transitions.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-action-button/dot-action-button.component.ts	Removes NgClass from standalone component imports.
core-web/apps/dotcms-ui/src/app/view/components/_common/dot-action-button/dot-action-button.component.html	Replaces [ngClass] with [class.*] bindings for disabled label styling.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-add-row/content-type-fields-add-row.component.html	Splits a combined conditional class entry into separate conditional class entries within [class] map.