feat(platform): smart filter bar

[N1XUS]

Related Issue(s)

closes #5291 closes #7442

Description

Created new 'Smart Filter Bar' component. -> https://deploy-preview-7504--fundamental-ngx.netlify.app/#/platform/smart-filter-bar
Refactored Platform Table data source and data provider classes.
Adjusted Platform form container component to support inline layout.
Refactored Platform table resize column service.
Adjusted Platform select component to support filling full width.
Adjusted Platform date picker to support filling full width.
Added new component to form generator - multi-input.

Screenshots

Please check whether the PR fulfills the following requirements

During Implementation

1. Visual Testing:

• visual misalignments/updates
• check Light/Dark/HCB/HCW themes
• RTL/LTR - proper rendering and labeling
• responsiveness(resize)
• Content Density (Cozy/Compact/(Condensed))
• States - hover/disabled/focused/active/on click/selected/selected hover/press state
• Interaction/Animation - open/close, expand/collapse, add/remove, check/uncheck
• Mouse vs. Keyboard support
• Text Truncation

2. API and functional correctness

• check for console logs (warnings, errors)
• API boundary values
• different combinations of components - free style
• change the API values during testing

3. Documentation and Example validations

• missing API documentation or it is not understandable
• poor examples
• Stackblitz works for all examples

4. Accessibility testing
5. Browser Testing - Edge, Safari, Chrome, Firefox

PR Quality

• the commit message(s) follows the guideline:
  https://github.com/SAP/fundamental-ngx/blob/main/CONTRIBUTING.md
• tests for the changes that have been done
• all items on the PR Review Checklist are addressed :
  https://github.com/SAP/fundamental-ngx/wiki/PR-Review-Checklist
• Run npm run build-pack-library and test in external application
• update README.md
• Breaking Changes Wiki

[netlify]

✔️ Deploy Preview for fundamental-ngx ready!

🔨 Explore the source changes: c9d6068

🔍 Inspect the deploy log: https://app.netlify.com/sites/fundamental-ngx/deploys/61d43b230ffd1000074ce143

😎 Browse the preview: https://deploy-preview-7504--fundamental-ngx.netlify.app

[netlify]

✔️ Deploy Preview for fundamental-ngx ready!

🔨 Explore the source changes: 4ccdb86

🔍 Inspect the deploy log: https://app.netlify.com/sites/fundamental-ngx/deploys/61de9c101c065000075c6957

😎 Browse the preview: https://deploy-preview-7504--fundamental-ngx.netlify.app

[dmitry-stepanenko]

Big one! Unfortunately wasn't able to play around with smart filter component due to errors while using filters

[dmitry-stepanenko]

1. There's no way to clear search if I want to see all results again
   
   Also it's slightly confusing all filters are required. Maybe it would be better to have only one of them required in examples?

2.It incorrectly process absence of value

Jan-06-2022.13-30-06.mp4

3. There's an error when trying to remove value

Jan-06-2022.13-32-31.mp4

4. Filters count is invalid. Even if I remove one of the values, it will still increment the count

Jan-06-2022.13-35-48.mp4

[InnaAtanasova]

Great job!
I think the Reset is not working the way it's expected:

Is it possible to add an example with Dynamic Page or it's not in the scope of this PR?

[N1XUS]

Great job! I think the Reset is not working the way it's expected:

Is it possible to add an example with Dynamic Page or it's not in the scope of this PR?

It wasn't planned in this iteration, but I can try.
If you make changes to the filters selection in this dialog, and click on Reset button, it will reset to initial state. Since some of the fields are required and visible by default, they will be automatically selected.

[N1XUS]

@InnaAtanasova example with dynamic page has been added.

[platon-rov]

Good, thank you!

Found that example in dynamic page doesn't scroll properly.

Screen.Recording.2022-01-11.at.15.24.55.mov

[N1XUS]

Good, thank you!

Found that example in dynamic page doesn't scroll properly.

Screen.Recording.2022-01-11.at.15.24.55.mov

It's more of the Dynamic Page issue itself. If I add more items to the table to increase the height of the dynamic page content, this behaviour won't be present

[mikerodonnell89]

Styling - the additional padding provided by the form group causes the "name" input's left border to not left-align search input's left border, looks a bit strange:

Search input's width changes when adding a character (and the X to clear the field appears) - should stay the same width

[fkolar]

Do we have a design for this ? I am not even sure why we should call this smart filter bar, in the platform should be everything smart by default, to make the life of the app developer easier.

[InnaAtanasova]

Do we have a design for this ? I am not even sure why we should call this smart filter bar, in the platform should be everything smart by default, to make the life of the app developer easier.

There's no design as it's a composition of components. In UI5 it's called Smart Filer Bar. I can send you a link to it in an email, can share it here :)

[fkolar]

I believe there should be a design even for composition of the components. we have many examples in the platform like that. Cuz at the end the component is used certain why by app developer or by other component and it needs to feel right. IT does not matter what is inside. ;-(