33971 task support field visibility and state management in bridge api

[nicobytes]

This pull request adds robust show/hide field support to both Angular and Dojo form bridges, enabling dynamic field visibility management in forms. It introduces a standardized show() and hide() API for fields, propagates visibility changes to the Angular state store, and includes comprehensive tests to ensure correct behavior and error handling. Additionally, it updates the UI to reflect field visibility and improves documentation and type safety.

Field Visibility API and Integration:

• Added show() and hide() methods to the FormFieldAPI interface, and implemented them in both AngularFormBridge and DojoFormBridge to allow programmatic control of field visibility. [1] [2] [3]
• In AngularFormBridge, introduced an optional onFieldVisibilityChange callback, injected via the factory and used to decouple field visibility changes from the store, enabling state updates when fields are shown or hidden. [1] [2] [3] [4] [5]
• Updated the Angular form bridge factory and the NativeFieldComponent to pass and handle the onFieldVisibilityChange callback, ensuring visibility changes are reflected in the Angular store. [1] [2] [3]

UI and Store Synchronization:

• Modified form and field component templates to apply the hidden class based on the field's visibility state from the store, ensuring the UI reflects the correct visibility.
• Injected and mocked DotEditContentStore in relevant components and tests to support and verify visibility state propagation. [1] [2] [3] [4] [5]

Testing Enhancements:

• Added comprehensive tests for the new show() and hide() methods in both Angular and Dojo bridges, including error handling and NgZone integration. [1] [2] [3]

Documentation and Minor Fixes:

• Improved documentation for the form bridge configuration and APIs, clarifying the new callback and its usage.
• Fixed a minor typo in an event binding in the binary field wrapper.
• Updated CSS grid class for better layout consistency.

This PR fixes: #33971

This PR fixes: #33971

[claude]

Claude finished @nicobytes's task in 2m 38s —— View job

---

Review

• Gather context
• Read changed files
• Post review

---

Overall: The design is sound. A few things worth flagging:

---

1. Warning suppression is too broad — angular-form-bridge.ts:219

#visibilityWarningEmitted is keyed by method type (show/hide), not by field. Once show() is called once without a callback, the warning is suppressed for all subsequent show() calls on any field. If a developer has 10 custom fields and the callback is missing, they only see 1 warning total. Could miss that multiple fields are broken.

#visibilityWarningEmitted: Record<'show' | 'hide', boolean> = { show: false, hide: false };

If the intent is "log once", consider keying by fieldId or by ${method}:${fieldId} so at least the first call per field warns.

---

2. Dojo show()/hide() silently no-ops when .field ancestor is missing — dojo-form-bridge.ts:257

const container = element?.closest('.field');
if (container instanceof HTMLElement) {
    container.style.display = '';
}

If the field element exists but has no .field ancestor, container is null and nothing happens — no warning. Every other error case in DojoFormBridge has a console.warn. This one should too:

if (!container) {
    console.warn(`Field '${fieldId}' has no .field ancestor container. show() had no effect.`);
}

---

3. Angular ↔ Dojo visibility behavior asymmetry

In Angular, hide() patches the NgRx signal store, which cascades to hide the parent column and row when all their fields are hidden (via the template logic in dot-edit-content-form.component.html:64-70). In Dojo, hide() only toggles style.display on the nearest .field element — no row/column collapse. This means a Dojo custom field that hides a sibling field will leave an empty row gap, while an Angular custom field doing the same thing collapses the row cleanly. This is probably acceptable for a migration path but should be documented.

---

4. Complex inline template expression is untested — dot-edit-content-form.component.html:64

[class.hidden]="row.columns.some(c => c.fields.length > 0) && row.columns.every(c => c.fields.every(f => hiddenFields[f.variable]))"

This works correctly (vacuous truth on empty columns is the right behavior here), but it's dense enough to warrant a computed/helper or at minimum a // hide row only when it has fields and all are hidden comment. Edge case: a row with only divider/spacer fields (which may have no variable) — hiddenFields[undefined] is always undefined/falsy, so dividers would never count as hidden. Is that intentional?

---

5. show_hide.vtl radio handler — show_hide.vtl:21

radio.addEventListener("change", (e) => {
    const value = e.target.value;

e.target is EventTarget | null. Not a real runtime risk for a radio change event, but defensively: (e.target as HTMLInputElement).value would be clearer. The Copilot comment about CSS.escape is a false alarm here — the selector isn't built from currentValue; currentValue is compared to .value properties, so no injection risk.

---

6. Minor: isFieldHidden referenced in feature comment but not implemented

field-visibility.feature.ts comment at line 7 says the feature exposes setFieldVisibility/isFieldHidden/resetFieldVisibility, but only setFieldVisibility is implemented. The others aren't needed (template uses hiddenFields() signal directly, content reload resets state), but the comment should be corrected to avoid confusion.

---

What's clean: The hiddenFields reset-on-content-load in content.feature.ts (confirmed at 4 call sites), the onFieldVisibilityChange !== undefined guard in getInstance(), the ref-counting destroy pattern, and the no-op early return in setFieldVisibility are all correct.

[Copilot]

Pull request overview

Adds a standardized field show()/hide() API across the Angular and Dojo form bridges, with Angular store-backed visibility state and UI updates to reflect hidden fields.

Changes:

• Introduces show()/hide() on FormFieldAPI and implements them in both Angular and Dojo bridges.
• Adds a new edit-content store feature to track hidden fields and binds templates to that state via Tailwind’s hidden class.
• Adds/updates Jest tests to validate visibility behavior and error-handling.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/show_hide.vtl	Adds a sample/custom-field script and UI showing how to toggle visibility via Bridge API.
core-web/libs/edit-content/src/lib/store/features/field-visibility/field-visibility.feature.ts	Introduces a signal-store feature for hidden field tracking.
core-web/libs/edit-content/src/lib/store/features/field-visibility/field-visibility.feature.spec.ts	Adds unit tests for the new visibility feature behavior.
core-web/libs/edit-content/src/lib/store/edit-content.store.ts	Extends root state with hiddenFields and wires in the feature.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.spec.ts	Updates test setup to provide the store dependency used for visibility propagation.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.ts	Passes onFieldVisibilityChange callback to bridge to write visibility changes to the store.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.spec.ts	Updates test setup to provide the store dependency used by NativeFieldComponent.
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html	Applies hidden class based on store visibility and tweaks grid classes.
core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html	Fixes event binding typo for binary wrapper.
core-web/libs/edit-content-bridge/src/lib/interfaces/form-field.interface.ts	Extends the public field API with show()/hide().
core-web/libs/edit-content-bridge/src/lib/factories/form-bridge.factory.ts	Adds optional onFieldVisibilityChange to Angular bridge config and forwards it to the bridge.
core-web/libs/edit-content-bridge/src/lib/bridges/dojo-form-bridge.ts	Implements show()/hide() by toggling the .field container display.
core-web/libs/edit-content-bridge/src/lib/bridges/dojo-form-bridge.spec.ts	Adds tests for Dojo show/hide behavior and error handling.
core-web/libs/edit-content-bridge/src/lib/bridges/angular-form-bridge.ts	Adds callback plumbing and implements show/hide via NgZone + callback.
core-web/libs/edit-content-bridge/src/lib/bridges/angular-form-bridge.spec.ts	Adds tests validating Angular show/hide and NgZone integration.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR extends the edit-content Bridge API to support programmatic field visibility via show() / hide() across Angular and Dojo bridges, and wires Angular visibility changes into the edit-content signals store so the form UI can reactively hide/show fields.

Changes:

• Added show() / hide() to FormFieldAPI and implemented them in AngularFormBridge and DojoFormBridge.
• Introduced an edit-content store feature (hiddenFields) and updated form templates to hide fields via Tailwind’s hidden class.
• Added/updated unit tests for bridges and the new store feature; included a sample VTL script demonstrating visibility toggling.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/show_hide.vtl	Adds an example custom-field script that toggles another field’s visibility via the Bridge API.
core-web/libs/edit-content/src/lib/store/features/field-visibility/field-visibility.feature.ts	New store feature to track hidden fields and expose setFieldVisibility/isFieldHidden/resetFieldVisibility.
core-web/libs/edit-content/src/lib/store/features/field-visibility/field-visibility.feature.spec.ts	Unit tests covering hidden field set behavior and resets.
core-web/libs/edit-content/src/lib/store/edit-content.store.ts	Extends store state with hiddenFields and registers the new feature.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.spec.ts	Mocks DotEditContentStore for custom-field tests due to new visibility wiring.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.ts	Passes onFieldVisibilityChange to the bridge and updates the store on show/hide.
core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.spec.ts	Tests that bridge show()/hide() calls propagate to store.setFieldVisibility(...).
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html	Applies [class.hidden] based on store visibility and tweaks the grid auto-column class.
core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html	Fixes binary wrapper output binding to (valueUpdated).
core-web/libs/edit-content-bridge/src/lib/interfaces/form-field.interface.ts	Adds show() / hide() to the public field API interface.
core-web/libs/edit-content-bridge/src/lib/factories/form-bridge.factory.ts	Extends Angular bridge config to accept onFieldVisibilityChange and passes it through.
core-web/libs/edit-content-bridge/src/lib/bridges/dojo-form-bridge.ts	Implements DOM-based show/hide by toggling the nearest .field container display.
core-web/libs/edit-content-bridge/src/lib/bridges/dojo-form-bridge.spec.ts	Adds coverage for show/hide behaviors and improves console spy cleanup.
core-web/libs/edit-content-bridge/src/lib/bridges/angular-form-bridge.ts	Adds show/hide support via optional callback and introduces a one-time warning if missing.
core-web/libs/edit-content-bridge/src/lib/bridges/angular-form-bridge.spec.ts	Adds tests for show/hide callback behavior, warnings, and NgZone execution.

---

You can also share your feedback on Copilot code review. Take the survey.

[erickgonzalez]

@nicobytes Let's add how to do this and how to migrate this from dojo in the doc we have and also the skill

Fixed!