fix: update combobox with latest fundamental-styles

[mikerodonnell89]

Please provide a link to the associated issue.

#2007

Please provide a brief summary of this pull request.

Update combobox to latest version of fundamental-styles. Currently missing the mobile mode which uses dialog, as ngx still hasn't been updated to dialog.

Before:

After:

Please check whether the PR fulfills the following requirements

• the commit message follows the guideline:
  https://github.com/SAP/fundamental-ngx/blob/master/CONTRIBUTING.md
• tests for the changes that have been done

Documentation checklist:

• update README.md
• Breaking Changes Wiki
• Documentation Examples
• Stackblitz works for all examples

[netlify]

Deploy preview for fundamental-ngx ready!

Built with commit 4338b98

https://deploy-preview-2188--fundamental-ngx.netlify.com

[JKMarkowski]

I know we had converstaion about this idea, but maybe groupFunction will be better there. I just realised that there can be more complex/indent objects.

[salarenko]

Could you make sure that:

• all methods in libs/core/src/lib/combobox/combobox.component.ts have correct typings
• all private properties have correct name convention (_ prefix)

I would be also great if:

• you move code currently placed inside component life-cycle hooks to separate methods.
• you could wait until we merge feat: Button in FIori3 | Dialog in Fiori3 | New way of adding Icons #2224 so you can use fdTemplate for providing custom templates instead of @Input

[InnaAtanasova]

LGTM @salarenko , could you take a look at the PR again and submit a new review? Thanks :)

[salarenko]

Except that little console.log code looks fine. One thing that bothers me are differences in behavior between our Combobox implementation and SAPUI5 Combobox and in my opinion SAPUI5 makes more sense.

NGX Core Combobox vs SAPUI5 Combobox behaviour:

Action	NGX Core	SAPUI5
Focus input with Tab and start typing	No action	Displays list of elements matching provided input.
Click on Combobox input	Displays list of all options	No action
Click on Combobox input and start typing	Filters elements lists, makrs list element only when its 1:1 with typed in query, element cannot be selected without manual Arrow Down navigation and Enter selection.	Filters elements lists, marks most accurate result on the list which can be selected by pressing Enter key.
Select an element from the list and click on Input expand button	Shows results filtered by selected element.	Show all possible options with currently selected element focused.
Click on Combobox input and start typing	No element has visible focus.	Input is focused.
Expand options list	No visuals for Combobox input group changed	Expand button marked as active

I have also a couple of reflections on the documentation:

1. After reading it I do not exactly understand what is the difference between filterFn and searchFunction I feel like this needs a little more explanation especially on searchFunction side. Also API naming convention conflicts here.

2. Description of 'Display Object Property' section is also quite hard to understand or maybe just wrong. (I do not understand it)

3. In 'Custom Item Template' you need clearly state that custom template supports List component features and provide link to the component.

4. ' Combobox with Two Columns' breaks after selecting list element
   

[salarenko]

console.log and still needs type annotation

[stefanoScalzo]

@mikerodonnell89 @salarenko has the above been addressed?

[rengare]

IE 11 -> can't open menu

[JKMarkowski]

IE 11 -> can't open menu

Should be fixed after rebasing to current master

[mikerodonnell89]

As we discussed in scrum on monday, click behavior will be reworked in another issue #2285

[JKMarkowski]

LGTM