Is your feature request related to a problem? Please describe.
Contextual Action Panel is supposed to be used with large forms or components displayed in a modal. In WFM, we use it to display tens of components of variable, unknown before rendering height. Because rendering so many components takes a long time, we wanted to improve performance by adding some kind of lazy loading/virtual scrolling mechanism, but because it requires setting up the height of the scrolling element, it's impossible to use that in CAP.

The reason for that is the way the max-height and max-width of CAP is calculated and set:

1. The size is set on div.modal-body-wrapper, which is a grandparent of the component placed inside the panel. This style is not inherited by the actual component wrapper, div.modal-body, so the component doesn't know what the max size is. That means, if we wanted to use this max-width and max-height properties to style the virtual scrolling element, we need to access the styling using document.getElementById(), then find a child, get the styling, parse it, apply, include padding... It's definitely not a way to go.
2. Even if we decide to do that, the size is calculated in javascript, what can cause a race mechanism between the code executed by modal to calculate its max size and the component placed in the panel which tries to get these values. It's something we observed then we tried to use IntersectionObserver instead of any kind of virtual scrolling components - sometimes it was working correctly, sometimes it was reading the size of the div.modal-body-wrapper before its size was calculated and set, so the height was unrestricted and all elements were rendered.
3. Even if that was working correctly, there is also a padding: 3rem 0; styling applied to div.modal-body, so that is another thing that needs to be included.

Describe the solution you'd like
Two additional styling options should be added to address these issues:

• propagateStyle - if true, set a propagate-style class to div.modal-body, which would add additional CSS styling to this element: max-height: inherit; max-width: inherit; overflow: inherit;.
• compactPanel - if true, set a compact class to div.modal-body, which would add padding: 0; to this element, overriding default padding: 3rem 0; styling for CAP.

Describe alternatives you've considered
For lazy loading/virtual scrolling, we were trying to use:

• Angular CDK Virtual Scrolling - requires setting the heigth of the element, which leads to problems described above
• IntersectionObserver - breaks randomly due to race issue described above

For getting the maximum size of the component:

• document.getElementById() with getElementsByClassName() - race condition described above
• calculating the size on our own using max-height: calc(80svh - 180px - 6rem) (80% of height - modal height setting - padding to avoid having two scrollbars) - that's a no go as every library upgrade may result with styling being broken and it's not a proper solution if we need to copy the calculations the library does
• using Action Panel from Web Components library - it works most of the time, but when a component placed inside changes its size after some time (think of fetching the data to display from the server), the panel no longer is centered on the screen - that's a separate issue I need to create 😉

Additional context

• Infor Application/Team Name: Infor WFM