ModuleNav: Cannot get Module Nav Switcher to properly show

[Abrai7]

Describe the bug Module Nav Switcher is not showing the dropdown. Also found that the display css property is set to none. None of the options of displayMode: undefined, collapsed, expanded works.

To Reproduce Steps to reproduce the behavior:

1. Go to: https://stackblitz.com/edit/ids-quick-start-1711-jtxbae?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Expected behavior The dropdown with the options should be used.

Version

• ids-enterprise-ng: 17.1.1 // - ids-enterprise-ng: 15.5.0

Screenshots

Platform

• Device (if applicable)
• OS Version: Windows 10
• Browser Name: Chrome
• Browser Version: Version 120.0.6099.109 (Official Build) (64-bit)

Additional context Found the display: none on my local project:

ids-enterprise-ng: 15.5.0 was used on local project.

[tmcconechy]

FYI if you are using NG 15.5.0 it did not have this it was only added in the last few versions. But i tried to add this to the quickstart and came up with roughly the same problem.

See branch https://github.com/infor-design/enterprise-ng-quickstart/pull/new/module-nav

@EdwardCoyle what do we need here to get it to work in the quickstart (or the stackblitz). See my branch. Looks like its not initialized.

@Abrai7 as a faster workaround maybe you can use the web component version https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-module-nav/demos because its a little cleaner to setup with the API and web components and the latest and greatest.

@krishollenbeck any suggestions as you got it all working? See branch https://github.com/infor-design/enterprise-ng-quickstart/pull/new/module-nav

[Abrai7]

@tmcconechy I found this commit https://github.com/infor-design/enterprise-ng/commit/056ebf0d74617ea5c361c6ad0b76f000b1e8a8e4 which adds the component to 15.5.0 as well. This means it also should be available on that version.

Btw, thanks for the suggestion but we can't use the enterprise-wc assets, only the enterprise-ng ones.

[tmcconechy]

ok that commit surprises me but maybe we had to patch some early module nav there. It does seem it would be out of base but i do see a similar behavior when i tried.

If we cant fix that soon i would consider trying the web components especially for new components like that.

[Abrai7]

I think this bug can be closed. I'd realized I was missing the soho-module-nav-container and soho-module-nav elements inside the DOM. After creating them I can see the module-nav-switcher being shown correctly.

[tmcconechy]

ok great. thanks @Abrai7 the only thing i wouldnt mind is fixing my branch too https://github.com/infor-design/enterprise-ng-quickstart/tree/module-nav

What precisely did you have to change?

[Abrai7]

@tmcconechy The

should be inside a soho-module nav tag and this one inside a soho-module-nav-container. So it should look like this: <soho-module-nav-container [ngClass]="{ 'module-nav-container': true }"> <soho-module-nav [ngClass]="{'module-nav': true }

tmcconechy commented 9 months ago

@EdwardCoyle @ericangeles i mostly have https://github.com/infor-design/enterprise-ng-quickstart/tree/module-nav working but can you look.

a) i dont know how to link the nav button b) the settings menu seems to have a position issue

Not urgent

Thanks @Abrai7 i see now 👍🏻

Abrai7 commented 9 months ago

Not sure if this is the correct channel to ask this but changing the value for the icon on the module-nav-switcher is not doing anything. I see on the documentation that it requires a SohoModuleNavSwitcherIconSetting which is set as a string.

As, per the documentation: type SohoModuleNavSwitcherIconSetting = string | ((api: SohoModuleNavSwitcherStatic) => string) | undefined;

Any ideas?

tmcconechy commented 9 months ago

Im a little unsure about the module nav API in angular (one reason i suggest the web component one as its considerably simpler). But this example shows changing the icon:

https://main-enterprise.demo.design.infor.com/components/module-nav/example-icon.html Source: https://github.com/infor-design/enterprise/blob/main/app/views/components/module-nav/example-icon.html#L170

So that means it should be an icon setting in the angular wrapper too but i dont see one.

CC @EdwardCoyle @ericangeles

Abrai7 commented 9 months ago

I'm not sure what changed but the icon setting for the switcher is working now. Now I'm in the same page as Tim: I don't know how to link the nav button to the soho-module nav. @EdwardCoyle could you please advise?

Abrai7 commented 9 months ago

I found what I was doing wrong: The soho-header should be inside the soho-module-container as well. And in order to link the soho-button to the soho-module-container you need an EventEmitter as described on the demo. @tmcconechy I think this bug can be closed, it wasn't a bug precisely but a wrong DOM manipulation.

tmcconechy commented 9 months ago

Thanks thats great @Abrai7 i still need to fix https://github.com/infor-design/enterprise-ng-quickstart/tree/module-nav so i have a good demo. Any suggestions what i might change there?

Abrai7 commented 9 months ago

On the header.component.ts add this Output: @Output() appMenuTriggerClick: EventEmitter = new EventEmitter(); Then on the toggleModuleNav method emit a new value using that emitter. Finally on the app.component.html on the tag, link that emitter to a method and on that method change the moduleNav.displayMode

tmcconechy commented 9 months ago

@EdwardCoyle any suggestions? I tried it here and i see you did it that way but something is off. See my attempt: https://github.com/infor-design/enterprise-ng-quickstart/commit/376e2950d515ec6f5c6ae66a0dff60447ba52d81

Abrai7 commented 9 months ago

@tmcconechy I think the problem is that the header is not a direct child of the soho-module-nav. What I did was adding the Event to the soho-header tag. Edward did something similar on the demo:

So for you, it should be the app-header tag which handles the hamburgerClick event

tmcconechy commented 9 months ago

Thanks to @EdwardCoyle the final piece was fixed. The quick start now shows the module nav https://github.com/infor-design/enterprise-ng-quickstart

And can be used as a future reference for setting this up. Closing for now. And thank you @Abrai7 for the help and contribution as well

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[tmcconechy]

@EdwardCoyle @ericangeles i mostly have https://github.com/infor-design/enterprise-ng-quickstart/tree/module-nav working but can you look.

a) i dont know how to link the nav button b) the settings menu seems to have a position issue

Not urgent

Thanks @Abrai7 i see now 👍🏻

[Abrai7]

Not sure if this is the correct channel to ask this but changing the value for the icon on the module-nav-switcher is not doing anything. I see on the documentation that it requires a SohoModuleNavSwitcherIconSetting which is set as a string.

As, per the documentation: type SohoModuleNavSwitcherIconSetting = string | ((api: SohoModuleNavSwitcherStatic) => string) | undefined;

Any ideas?

[tmcconechy]

Im a little unsure about the module nav API in angular (one reason i suggest the web component one as its considerably simpler). But this example shows changing the icon:

https://main-enterprise.demo.design.infor.com/components/module-nav/example-icon.html Source: https://github.com/infor-design/enterprise/blob/main/app/views/components/module-nav/example-icon.html#L170

So that means it should be an icon setting in the angular wrapper too but i dont see one.

CC @EdwardCoyle @ericangeles

[Abrai7]

I'm not sure what changed but the icon setting for the switcher is working now. Now I'm in the same page as Tim: I don't know how to link the nav button to the soho-module nav. @EdwardCoyle could you please advise?

[Abrai7]

I found what I was doing wrong: The soho-header should be inside the soho-module-container as well. And in order to link the soho-button to the soho-module-container you need an EventEmitter as described on the demo. @tmcconechy I think this bug can be closed, it wasn't a bug precisely but a wrong DOM manipulation.

[tmcconechy]

Thanks thats great @Abrai7 i still need to fix https://github.com/infor-design/enterprise-ng-quickstart/tree/module-nav so i have a good demo. Any suggestions what i might change there?

[Abrai7]

On the header.component.ts add this Output: @Output() appMenuTriggerClick: EventEmitter = new EventEmitter(); Then on the toggleModuleNav method emit a new value using that emitter. Finally on the app.component.html on the tag, link that emitter to a method and on that method change the moduleNav.displayMode

[tmcconechy]

@EdwardCoyle any suggestions? I tried it here and i see you did it that way but something is off. See my attempt: https://github.com/infor-design/enterprise-ng-quickstart/commit/376e2950d515ec6f5c6ae66a0dff60447ba52d81

[Abrai7]

@tmcconechy I think the problem is that the header is not a direct child of the soho-module-nav. What I did was adding the Event to the soho-header tag. Edward did something similar on the demo:

So for you, it should be the app-header tag which handles the hamburgerClick event

[tmcconechy]

Thanks to @EdwardCoyle the final piece was fixed. The quick start now shows the module nav https://github.com/infor-design/enterprise-ng-quickstart

And can be used as a future reference for setting this up. Closing for now. And thank you @Abrai7 for the help and contribution as well