be.doeraene.webcomponents.ui5.AvatarGroup.scala Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of web-components-ui5_sjs1_3 Show documentation

Laminar bindings for the web-component library UI5 from SAP

There is a newer version: 2.0.0

Show newest version

package be.doeraene.webcomponents.ui5

import be.doeraene.webcomponents.ui5.configkeys.AvatarGroupType
import be.doeraene.webcomponents.ui5.internal.Slot
import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
import com.raquo.laminar.api.L.*
import com.raquo.laminar.tags.CustomHtmlTag
import com.raquo.laminar.keys.HtmlAttr
import com.raquo.laminar.nodes.ReactiveHtmlElement
import org.scalajs.dom

import scala.scalajs.js
import scala.scalajs.js.annotation.{JSImport, JSName}
import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget
import be.doeraene.webcomponents.ui5.eventtypes.HasDetail
import be.doeraene.webcomponents.WebComponent

/** Displays a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars,
  * such as, project team members or employees. The component allows you to display the avatars in different sizes,
  * depending on your use case.
  *
  * @see
  *   the doc for more
  *   information.
  */
object AvatarGroup extends WebComponent {

  @js.native
  trait RawElement extends js.Object {
    @JSName("colorScheme")
    def colourSchemeJS: js.Array[String] = js.native

    @JSName("hiddenItems")
    def hiddenItemsJS: js.Array[Avatar.Ref] = js.native
  }

  object RawElement {
    extension (element: RawElement)
      def colourScheme: List[String]    = element.colourSchemeJS.toList
      def hiddenItems: List[Avatar.Ref] = element.hiddenItemsJS.toList
  }

  @js.native
  @JSImport("@ui5/webcomponents/dist/AvatarGroup.js", JSImport.Default)
  object RawImport extends js.Object

  // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
  used(RawImport)

  type Ref = dom.html.Element with RawElement

  protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-avatar-group")

  lazy val tpe: HtmlAttr[AvatarGroupType] = htmlAttr("type", AvatarGroupType.AsStringCodec)

  object slots {
    val overflowButton: Slot = Slot("overflowButton")
  }

  object events {
    trait AvatarClickInfo extends js.Object {
      def targetRef: dom.HTMLElement
      def overflowButtonClicked: Boolean
    }

    val onClick: EventProp[EventWithPreciseTarget[Ref] with HasDetail[AvatarClickInfo]] = new EventProp("click")

    val onOverflow: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("overflow")
  }

  def avatar: Avatar.type = Avatar

}