chore: update @ui5/webcomponents to 2.0-rc.5 (#126)

**Background** 

The PR updates the @ui5/webcomponents-ngx project to use @ui5/webcomponents v2.0-rc.x.
As this a new major version, the wrappers API also introduce breaking changes, that will be listed later-on.

**Breaking changes** 

This pr uses new major version of UI5 Web Components that has breaking changes that are also manifesting in the ngx wrappers APIs.
To see and adopt the breaking changes visit the migration guide:
https://sap.github.io/ui5-webcomponents/nightly/docs/Migrating%20to%20version%202.0%20guide/

**Changes in the PR**
- update @ui5/webcomponents to 2.0-rc.5
- build wrappers for "compat" (new) package as well
- fix runtime exceptions (unrelated to the upgrade, present in main) for form-assotiated components that used to call onChange and onTouched methods unconditionally, while these methods are only present in form model context and missing in standard (non-form) usage
- adopt breaking changes in samples, stories
- add stories for new components (Form, DynamicPage, Text, Tokenizer)


Fixes: #130
Fixes: #129
Fixes: #127
Fixes: #121
Fixes: #120
Fixes: #96
Fixes: #83

.gitignore

@@ -18,6 +18,7 @@ node_modules
 *.sublime-workspace
 
 libs/ui5-angular/fiori/
+libs/ui5-angular/compat/
 libs/ui5-angular/main/
 libs/ui5-angular/generic-cva/
 libs/ui5-angular/utils/

README.md

@@ -11,9 +11,7 @@ Angular without
 needing to use the [CUSTOM_ELEMENTS_SCHEMA](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA)
 or [NO_ERRORS_SCHEMA](https://angular.io/api/core/NO_ERRORS_SCHEMA) schemas,
 while providing full type safety and access to underlying web components in a type safe environment.
-Everything that works and is available on the [@ui5/webcomponents](https://sap.github.io/ui5-webcomponents) side, will
-work here as well, with few minor differences, which are described in
-the [documentation site](https://sap.github.io/ui5-webcomponents-ngx/).
+Everything that works and is available on the [@ui5/webcomponents](https://sap.github.io/ui5-webcomponents) side.
 
 ## Requirements and Setup
 
@@ -38,10 +36,10 @@ yarn add @ui5/webcomponents-ngx
 Import the module in your `app.module.ts` file:
 
 ```typescript
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {AppComponent} from './app.component';
-import {Ui5WebcomponentsModule} from '@ui5/webcomponents-ngx'; // here it is
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; // here it is
 
 @NgModule({
   declarations: [
@@ -67,6 +65,17 @@ documentation.
 Every form-capable component can be used with Angular's native form approaches. Meaning all the
 `formControlName` and `ngModel`s will work as expected.
 
+## Versions
+
+The table shows
+- the `Angular` compatible version
+- the `@ui5/webcomponents` version that `@ui5/webcomponents-ngx` is built upon and .
+
+|@ui5/webcomponents-ngx| Angular  |@ui5/webcomponents|
+|----------------------|----------|------------------|
+|0.3.2                 | 16 & 17  | 1.9.x            |
+
+
 ## Support, Feedback, Contributing
 
 For an overview on how this library works, see the [Maintainers](https://github.com/SAP/ui5-webcomponents-ngx/blob/main/MAINTAINERS.md) documentation.

apps/documentation/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+    .docs-story { 
+        background-color: var(--sapBackgroundColor);
+    }
+</style>

apps/documentation/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import '@ui5/webcomponents-icons/dist/AllIcons';
 import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js';
-import {getRTL} from '@ui5/webcomponents-base/dist/config/RTL';
+import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 import {getTheme, setTheme} from '@ui5/webcomponents-base/dist/config/Theme';
 
 type Themes = {
@@ -33,10 +33,17 @@ export const parameters = {
   },
 };
 
+const setDirection = (direction) => {
+  document.body.setAttribute("dir", direction);
+  applyDirection();
+}
+
+
 const withThemeProvider = (Story, storyContext) => {
   const {theme, rtl, density} = storyContext.globals;
   setTheme(themes[theme]);
-  document.body.setAttribute("dir", rtl === "RTL" ? "rtl" : "ltr");
+
+  setDirection(rtl === "RTL" ? "rtl" : "ltr");
 
   document.body.classList.remove("sapUiSizeCozy");
   document.body.classList.remove("sapUiSizeCompact");
@@ -63,7 +70,7 @@ export const globalTypes = {
   },
   rtl: {
     description: "Global rtl mode for components",
-    defaultValue: getRTL(),
+    defaultValue: "LTR",
     toolbar: {
       title: "Direction",
       icon: "",

apps/documentation/api-json.config.ts

@@ -7,6 +7,7 @@ export default {
     sources: [
       '@ui5/webcomponents-base/dist/custom-elements-internal.json',
       '@ui5/webcomponents-fiori/dist/custom-elements-internal.json',
+      '@ui5/webcomponents-compat/dist/custom-elements-internal.json',
       '@ui5/webcomponents/dist/custom-elements-internal.json'
     ]
   }),