chore: update @ui5/webcomponents to 2.0-rc.x

- fix runtime exceptions (unrelated to the upgrade, present in main) for form-assotiated components that used to call onChange and onTouched methods uncoditionally, while these methods are only present in form model context and missing in standard (non-form) usage
- build wrappers for "compat" (new) package as well
- adopt breaking changes in samples, stories
- add stories for new components (Form, DynamicPage, Text, Tokenizer)

.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'
     ]
   }),