⬆️ Bump to SAP ui5 2.0 and adapted breaking change

Followed all the breaking changes documented [here](https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2/).

README.md

@@ -37,6 +37,10 @@ Using these bindings with an earlier version of UI5 will probably show stuff tha
 
 Important: this is only the "Scala part" of the installation. We do *not* manage the dependencies to the npm library itself. See the "How to use" section below.
 
+## Migration to Version 2.x
+
+Please review our [migration note](./VERSION2MIGRATION.md).
+
 ### Note on the Laminar version
 
 This library is built against a certain version of Laminar, but it is set as "provided". That means that you have to depend on Laminar yourself, but (for a large deal) you are not bound to the specific version used here.

VERSION2MIGRATION.md

@@ -0,0 +1,18 @@
+# Version 2.0 migration
+
+This file contains information about the migration from SAP versions 1.x to SAP version 2.0. We tried our best to not disrupt your Scala source files (only deprecation warning will be emitted in a lot of cases), but some things could not be moved automatically due to a consistent change in the behaviour.
+
+> To actively see the deprecation messages when compiling, you need to add `scalacOptions += "-deprecation"` in your `build.sbt` file.
+> 
+> If you furthermore wants them to be compilation errors, so that you are forced to tackle them, you can add `scalacOptions += "-Xfatal-warnings"` as well
+
+For most changes actually *requiring* you to make a change, you will have a compile error with a message explaning what you need to do. For comprehensive understanding, though, we refer to [SAP's migration guide](https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2).
+
+Despite that, some changes live outside of these compiler messages, and we highlight them below. **Please make sure to review them!**
+
+## 🚨 Breaking changes requiring your attention
+
+1. Table has changed, and requires a new npm package import. If you were using the `Table` component, you need to add this extra package import in your `package.json`: `"@ui5/webcomponents-compat": "2.0.1"`.
+2. The default value of wrapping types has been switch. if you want to have word wrapping, you now need to actively add `_.wrappingType := WrappingType.None`
+3. In ComboBox with groups, grouping is now done via nesting of items inside the groups, rather than a flat structure
+

demo/package.json

@@ -12,9 +12,10 @@
     "vite-plugin-html": "3.2.0"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.24.7",
-    "@ui5/webcomponents-fiori": "1.24.7",
-    "@ui5/webcomponents-icons": "1.24.7",
+    "@ui5/webcomponents": "2.0.1",
+    "@ui5/webcomponents-fiori": "2.0.1",
+    "@ui5/webcomponents-icons": "2.0.1",
+    "@ui5/webcomponents-compat": "2.0.1",
     "highlight.js": "^11.6.0"
   }
 }

demo/src/main/scala/demo/BarcodeScannerDialogExample.scala

@@ -27,14 +27,13 @@ object BarcodeScannerDialogExample extends Example("BarcodeScannerDialog") {
 
       div(
         BarcodeScannerDialog(
-          _.showOnEvents(openScannerBus.events),
-          _.closeOnEvents(barcodeScanEvents),
+          _.open <-- EventStream.merge(openScannerBus.events.mapTo(true), barcodeScanEvents.mapTo(false)),
           _.events.onScanSuccess.map(_.detail) --> barcodeScanSuccessBus.writer,
           _.events.onScanError.map(_.detail) --> barcodeScanFailedBus.writer
         ),
         Title.h3("Click on the button below and show a QR code to the camera:"),
         Button(
-          _.icon := IconName.camera,
+          _.icon    := IconName.camera,
           _.tooltip := "Start Camera",
           "Scan",
           _.events.onClick.mapTo(()) --> openScannerBus.writer

demo/src/main/scala/demo/BreadcrumbsExample.scala

@@ -13,7 +13,7 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
       //-- Begin: Standard Breadcrumbs
       Breadcrumbs(
         _.Item(
-          _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
+          _.href   := "https://github.com/sherpal/LaminarSAPUI5Bindings",
           _.target := LinkTarget._blank,
           "Root page"
         ),
@@ -28,7 +28,7 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
       Breadcrumbs(
         _.design := BreadcrumbsDesign.NoCurrentPage,
         _.Item(
-          _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
+          _.href   := "https://github.com/sherpal/LaminarSAPUI5Bindings",
           _.target := LinkTarget._blank,
           "Root page"
         ),
@@ -41,9 +41,9 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
       div(
         BreadcrumbsSeparatorStyle.allValues.map(separatorStyle =>
           Breadcrumbs(
-            _.separatorStyle := separatorStyle,
+            _.separators := separatorStyle,
             _.Item(
-              _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
+              _.href   := "https://github.com/sherpal/LaminarSAPUI5Bindings",
               _.target := LinkTarget._blank,
               "Root page"
             ),

demo/src/main/scala/demo/CalendarExample.scala

@@ -16,10 +16,10 @@ object CalendarExample extends Example("Calendar") {
       div(
         Label(child.text <-- maybeSelectedDateVar.signal.map {
           case None       => "No selected date yet."
-          case Some(info) => s"Selected dates: ${info.values.zip(info.dates).mkString(", ")}."
+          case Some(info) => s"Selected dates: ${info.selectedValues.zip(info.selectedDates).mkString(", ")}."
         }),
         br(),
-        Calendar(_.events.onSelectedDatesChange.map(_.detail) --> maybeSelectedDateVar.writer.contramapSome)
+        Calendar(_.events.onSelectionChange.map(_.detail) --> maybeSelectedDateVar.writer.contramapSome)
       )
       //-- End
     },

demo/src/main/scala/demo/CardExample.scala

@@ -41,47 +41,55 @@ object CardExample extends Example("Card") {
         Card(
           className := medium,
           _.slots.header := Card.header(
-            _.titleText := "Magic Mana Symbols",
-            _.subtitleText := "All of them",
-            _.status := "3 of 6",
-            _.slots.avatar := Icon(_.name := IconName.group),
-            _.slots.action := Button(_.design := ButtonDesign.Transparent, "View All")
+            _.titleText      := "Magic Mana Symbols",
+            _.subtitleText   := "All of them",
+            _.additionalText := "3 of 6",
+            _.slots.avatar   := Icon(_.name := IconName.group),
+            _.slots.action   := Button(_.design := ButtonDesign.Transparent, "View All")
           ),
           div(
             className := cardContentClassName,
             UList(
               _.separators := ListSeparator.None,
-              width := "100%",
+              width        := "100%",
               marginBottom := "0.75rem",
               MTG.manaSymbolsNames
                 .zip(MTG.manaSymbolsShortNames)
                 .take(3)
                 .map((name, shortName) =>
-                  UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, name)
+                  UList.item(
+                    _.slots.image := Avatar(img(src := MTG.manaSymbolsRefs(shortName))),
+                    _.description := name,
+                    name
+                  )
                 )
             )
           )
         ),
         Card(
           className := medium,
           _.slots.header := Card.header(
-            _.titleText := "This header is interactive",
-            _.interactive := true,
-            _.subtitleText := "Click, press Enter or Space",
-            _.status := "3 of 6",
-            _.slots.avatar := Icon(_.name := IconName.group)
+            _.titleText      := "This header is interactive",
+            _.interactive    := true,
+            _.subtitleText   := "Click, press Enter or Space",
+            _.additionalText := "3 of 6",
+            _.slots.avatar   := Icon(_.name := IconName.group)
           ),
           div(
             className := cardContentClassName,
             UList(
               _.separators := ListSeparator.None,
-              width := "100%",
+              width        := "100%",
               marginBottom := "0.75rem",
               MTG.manaSymbolsNames
                 .zip(MTG.manaSymbolsShortNames)
                 .drop(3)
                 .map((name, shortName) =>
-                  UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, name)
+                  UList.item(
+                    _.slots.image := Avatar(img(src := MTG.manaSymbolsRefs(shortName))),
+                    _.description := name,
+                    name
+                  )
                 )
             )
           )
@@ -99,15 +107,15 @@ object CardExample extends Example("Card") {
             |""".stripMargin),
         Card(
           _.slots.header := Card
-            .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.status := "3 of 15"),
+            .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.additionalText := "3 of 15"),
           Table(
-            className := contentPadding,
+            className       := contentPadding,
             _.slots.columns := TableColumn(Label("Sales Order")),
             _.slots.columns := TableColumn(Label("Customer")),
             _.slots.columns := TableColumn(Label("Net Amount")),
             _.slots.columns := TableColumn(
-              _.minWidth := 450,
-              _.popinText := "Status",
+              _.minWidth    := 450,
+              _.popinText   := "Status",
               _.demandPopin := true,
               Label("Status")
             ),

demo/src/main/scala/demo/CarouselExample.scala

@@ -8,14 +8,10 @@ import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub, MTG}
 object CarouselExample extends Example("Carousel") {
 
   //-- Begin Common
-  private def threeMagicWallpapers = List(
-    img(
-      src := "https://media.magic.wizards.com/images/wallpaper/senseis-divining-top-2x2-background-1280x960.jpg"
-    ),
-    img(src := "https://media.magic.wizards.com/images/wallpaper/mana-vault-2x2-background-1280x960.jpg"),
-    img(
-      src := "https://media.magic.wizards.com/images/wallpaper/sparas_headquarters_kieran_yanner_1280x960_poozxbqpcw.jpg"
-    )
+  private def threeMagicCards = List(
+    img(src := MTG.cardImages("Black Lotus")),
+    img(src := MTG.cardImages("Ancestral Recall")),
+    img(src := MTG.cardImages("Time Walk"))
   )
   //-- End Common
 
@@ -29,23 +25,25 @@ object CarouselExample extends Example("Carousel") {
     |""".stripMargin),
     DemoPanel("Carousel With Single Item per Page")(
       //-- Begin: Carousel With Single Item per Page
-      Carousel(threeMagicWallpapers*)
+      Carousel(threeMagicCards*)
       //-- End
     ),
     DemoPanel("Carousel with Multiple items per Page")(
       //-- Begin: Carousel with Multiple items per Page
       Carousel(
-        _.itemsPerPageS := 1,
-        _.itemsPerPageM := 2,
-        _.itemsPerPageL := 2,
+        _.itemsPerPage := Carousel.ItemsPerPage(1, 2, 2, 2),
+        // Before Version 2.0.0:
+        // _.itemsPerPageS := 1,
+        // _.itemsPerPageM := 2,
+        // _.itemsPerPageL := 2,
         MTG.manaSymbolsShortNames.map(name => img(src := MTG.manaSymbolsRefs(name), alt := name))
       )
       //-- End
     ),
     DemoPanel("Carousel With Arrow Placement and Cyclic")(
       //-- Begin: Carousel With Arrow Placement and Cyclic
       Carousel(
-        threeMagicWallpapers ++ List(_.arrowsPlacement := CarouselArrowsPlacement.Navigation, _.cyclic := true)*
+        threeMagicCards ++ List(_.arrowsPlacement := CarouselArrowsPlacement.Navigation, _.cyclic := true)*
       )
       //-- End
     ),