NG: Styling issues on nested and directly included components in angular project

[Carlfjord]

Describe the bug
I'm having some styling related issues occurring while nesteing components. This also occurs with components included outside of <router-outlet> in angular applications.

To Reproduce
In any angular application simply take the sample code from the ids-wc-examples and use it in a new component. Take said component and import in in the top level template file next to your router outlet.

I created a clean angular application using "ng new" and then installed the ids-enterprise-wc. Then I created a new AppMenuComponent and added the sample code from the wc app-menu demo. Then I added the component to be rendered on the top level path. So far it works well and good.

However after I include the same <app-menu> component straight in my app.component template instead of using the router-outlet it no longer has the proper styling.

Here's a side-by-side view of the different implementations:

Note that similar problems occur if we say break out the accordion part of the app-menu to a new component and reference said component in the app-menu template. So nesting components by splitting them in different angular components also causes inconsistencies.

Steps to reproduce the behavior:

1. new ng app with ids-enterprise-wc
2. create new app menu component and add ids app-menu sample code
3. add component to routing
4. include component directly in app.component template
5. notice 2 copies of the component but one not looking as expected.

Expected behavior
Nested components or template included components should apply the accurate theming.

Version
v1.0.0-beta.13

Platform

• Infor Application/Team Name: M3 Portals

[tmcconechy]

@Carlfjord would you be able to post that test repo so we dont have to recreate this all (or zip it up without node_modules and upload if that works)

Some initial thoughts?

• does something interject an element or wrapper in between?
• we have had some issue from this issue Incorrect import order with code splitting and multiple entry points evanw/esbuild#399 you could try to include imports for the child elements (even though the intention was you shouldnt have to). But if it works without nesting thats probably not the issue

Will need some chunk of time to investigate this one

[Carlfjord]

@tmcconechy Yea sure! There's no difference in the component itself between the working and non working scenario so the structure is the same. So the issue occurs with template included components in general with or without nesting.

Here's a .zip with a basic angular project and the side by side view of the component like above screenshots.
theme-explorer.zip

[tmcconechy]

@Carlfjord fixed this you will see a PR attached soon but wanted to note a couple things:

1. You need the font (i add to index.html) -> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&amp;display=swap" rel="stylesheet">
2. Its probably weird to have multiple containers now but i assume its part of the example
3. The new module-nav will deprecate app-nav https://main.wc.design.infor.com/ids-module-nav/ so may want to try that.

I only fixed app nav and i think module-nav but if you run into more issues like this in more components let me know. As the fix requires refactoring that may or may not be required. I think i fixed module-nav but did not verify.

Attached update zip (with node_modules included) just for testing on the PR.

[jbrcna]

QA Passed. moving this ticket to done
verified in
https://main.wc.design.infor.com/ids-data-grid/tree-grid-expand-collapse.html
https://main.wc.design.infor.com/ids-data-grid/show-header-expander.html