⬆️ Bump to sap 1.22

demo/package.json

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

demo/src/main/scala/demo/BadgeExample.scala

@@ -7,18 +7,22 @@ import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}
 
 object BadgeExample extends Example("Badge") {
 
-  private val someTexts = List(
-    "Hello",
-    "3",
-    "I'm cool",
-    "Some value",
-    "Mathematics",
-    "available 2",
-    "some stuff that is nice",
-    "8",
-    "there you go",
-    "the last"
-  )
+  private val someTexts = LazyList
+    .continually(
+      List(
+        "Hello",
+        "3",
+        "I'm cool",
+        "Some value",
+        "Mathematics",
+        "available 2",
+        "some stuff that is nice",
+        "8",
+        "there you go",
+        "the last"
+      )
+    )
+    .flatten
 
   def component(using
       demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo
@@ -29,6 +33,9 @@ object BadgeExample extends Example("Badge") {
         ColourScheme.allValues
           .zip(someTexts)
           .map((colourScheme, text) => Badge(_.colourScheme := colourScheme, text)),
+        BadgeDesign.allValues
+          .zip(someTexts)
+          .map((design, text) => Badge(_.design := design, text)),
         Badge(width := "200px", "This text is very long and it will be truncated with ellipsis")
       )
       //-- End

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala

@@ -12,6 +12,7 @@ import org.scalajs.dom
 import scala.scalajs.js
 import scala.scalajs.js.annotation.JSImport
 import be.doeraene.webcomponents.WebComponent
+import be.doeraene.webcomponents.ui5.configkeys.BadgeDesign
 
 /** The ui5-badge is a small non-interactive component which contains text information and color chosen from a list of
   * predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state,
@@ -37,6 +38,7 @@ object Badge extends WebComponent {
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-badge")
 
   lazy val colourScheme: HtmlAttr[ColourScheme] = htmlAttr("color-scheme", ColourScheme.AsStringCodec)
+  lazy val design: HtmlAttr[BadgeDesign]        = htmlAttr("design", BadgeDesign.AsStringCodec)
 
   object slots {
     // note that unlike most elements that have an attribute Icon, this element has a slot icon instead.

web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala

@@ -39,6 +39,7 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha
 
   lazy val checked: HtmlAttr[Boolean]       = htmlAttr("checked", BooleanAsAttrPresenceCodec)
   lazy val disabled: HtmlAttr[Boolean]      = htmlAttr("disabled", BooleanAsAttrPresenceCodec)
+  lazy val displayOnly: HtmlAttr[Boolean]   = htmlAttr("display-only", BooleanAsAttrPresenceCodec)
   lazy val indeterminate: HtmlAttr[Boolean] = htmlAttr("indeterminate", BooleanAsAttrPresenceCodec)
   lazy val readonly: HtmlAttr[Boolean]      = htmlAttr("readonly", BooleanAsAttrPresenceCodec)
   lazy val required: HtmlAttr[Boolean]      = htmlAttr("required", BooleanAsAttrPresenceCodec)

web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala

@@ -15,6 +15,7 @@ import scala.scalajs.js
 import scala.scalajs.js.annotation.JSImport
 import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget
 import be.doeraene.webcomponents.WebComponent
+import scala.scalajs.js.annotation.JSName
 
 /** The ui5-date-picker component provides an input field with assigned calendar which opens on user action.
   *
@@ -93,6 +94,20 @@ object DatePicker extends WebComponent with HasAccessibleName with HasName with
       def valid: Boolean
     }
 
+    @js.native
+    trait DatePickerValueStateChangeEventDetail extends js.Object {
+      def valid: Boolean = js.native
+
+      @JSName("valueState")
+      def valueStateJS: String = js.native
+    }
+
+    object DatePickerValueStateChangeEventDetail {
+      extension (detail: DatePickerValueStateChangeEventDetail) {
+        def valueState: ValueState = ValueState.AsStringCodec.decode(detail.valueStateJS)
+      }
+    }
+
     val onChange = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[DateEventData]]("change")
     val onInput  = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[DateEventData]]("input")
 
@@ -101,6 +116,12 @@ object DatePicker extends WebComponent with HasAccessibleName with HasName with
 
     val onValidDateInput: EventProcessor[EventWithPreciseTarget[Ref] & HasDetail[DateEventData], String] =
       onInput.map(_.detail).filter(_.valid).map(_.value)
+
+    val onValueStateChange =
+      new EventProp[EventWithPreciseTarget[Ref] & HasDetail[DatePickerValueStateChangeEventDetail]](
+        "value-state-change"
+      )
+
   }
 
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala

@@ -80,6 +80,8 @@ object ShellBar extends WebComponent with HasIcon {
       new EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasTargetRef[dom.HTMLElement]]]("notifications-click")
     val onProductSwitchClick =
       new EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasTargetRef[dom.HTMLElement]]]("product-switch-click")
+    val onSearchButtonClick =
+      new EventProp[EventWithPreciseTarget[Ref]]("search-button-click")
   }
 
   object slots {

web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BadgeDesign.scala

@@ -0,0 +1,24 @@
+package be.doeraene.webcomponents.ui5.configkeys
+
+import com.raquo.laminar.codecs.Codec
+import scala.deriving.Mirror
+
+/** Defines the component design.
+  */
+sealed trait BadgeDesign
+
+object BadgeDesign extends EnumerationString[BadgeDesign] {
+  case object Set1        extends BadgeDesign
+  case object Set2        extends BadgeDesign
+  case object Set3        extends BadgeDesign
+  case object Neutral     extends BadgeDesign
+  case object Information extends BadgeDesign
+  case object Positive    extends BadgeDesign
+  case object Negative    extends BadgeDesign
+  case object Critical    extends BadgeDesign
+
+  val allValues: List[BadgeDesign] = List(Set1, Set2, Set3, Neutral, Information, Positive, Negative, Critical)
+
+  def valueOf(value: BadgeDesign): String = value.toString
+
+}

web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/EnumerationString.scala

@@ -1,6 +1,7 @@
 package be.doeraene.webcomponents.ui5.configkeys
 
 import com.raquo.laminar.codecs.Codec
+import scala.deriving.Mirror
 
 trait EnumerationString[Value] {