diff --git a/generator/builder.sc b/generator/builder.sc index a167a61..71d009b 100644 --- a/generator/builder.sc +++ b/generator/builder.sc @@ -1,7 +1,7 @@ /** Code generator - * - * These classes turn component definitions into Scala code. - */ + * + * These classes turn component definitions into Scala code. + */ import $file.definition @@ -10,20 +10,20 @@ import definition._ case class GitHubRepository(owner: String, repository: String) class SBTProjectBuilder( - col: WebComponentCollection, - organization: String, - version: String, - publishTo: GitHubRepository -) { - def name = s"laminar-web-components-${col.packageName}" + col: WebComponentCollection, + organization: String, + version: String, + publishTo: GitHubRepository, + ) { + def name = s"laminar-web-components-${col.packageName}" - def buildNpmDep(p: NpmPackage) = s"""npmDependencies in Compile += "${p.name}" -> "${p.version}"""" + def buildNpmDep(p: NpmPackage) = s"""npmDependencies in Compile += "${p.name}" -> "${p.version}"""" - def getNpmDeps(comp: WebComponent): Seq[NpmPackage] = Seq(comp.npmPackage) ++ comp.subComponents.flatMap(getNpmDeps) + def getNpmDeps(comp: WebComponent): Seq[NpmPackage] = Seq(comp.npmPackage) ++ comp.subComponents.flatMap(getNpmDeps) - def buildNPMDeps = col.components.flatMap(getNpmDeps).distinct.map(buildNpmDep).mkString("\n\n") + def buildNPMDeps = col.components.flatMap(getNpmDeps).distinct.map(buildNpmDep).mkString("\n\n") - def build = s""" + def build = s""" enablePlugins(ScalaJSPlugin) enablePlugins(ScalaJSBundlerPlugin) @@ -98,6 +98,8 @@ class CollectionBuilder(col: WebComponentCollection, organization: String) { import scala.scalajs.js import scala.scalajs.js.annotation.JSImport + object ElementAsIsCodec extends AsIsCodec[HtmlElement] + ${buildStylesObject(col.globalCssProperties, docLink)} ${col.components.map(c => new Builder(c).build).mkString("\n")} @@ -115,6 +117,7 @@ class Builder(comp: WebComponent) { case WebComponentFieldType.Boolean => "Boolean" case WebComponentFieldType.Number => "Double" case WebComponentFieldType.String => "String" + case WebComponentFieldType.Element => "HtmlElement" } def propCodec(wctype: WebComponentFieldType) = @@ -123,6 +126,7 @@ class Builder(comp: WebComponent) { case WebComponentFieldType.Boolean => "BooleanAsIsCodec" case WebComponentFieldType.Number => "DoubleAsIsCodec" case WebComponentFieldType.String => "StringAsIsCodec" + case WebComponentFieldType.Element => "ElementAsIsCodec" } def buildMethodSignature(m: Method) = s""" diff --git a/generator/definition.sc b/generator/definition.sc index ca53ab4..ef50e8c 100644 --- a/generator/definition.sc +++ b/generator/definition.sc @@ -1,29 +1,29 @@ /** Web Component Data Model - * - * These case classes describe web components - their tags, properties, etc. - */ + * + * These case classes describe web components - their tags, properties, etc. + */ case class WebComponentCollection( - packageName: String, - components: Seq[WebComponent], - link: String, - globalCssProperties: Seq[CSSProperty], -) + packageName: String, + components: Seq[WebComponent], + link: String, + globalCssProperties: Seq[CSSProperty], + ) case class WebComponent( - tag: String, - description: String, - link: String, - npmPackage: NpmPackage, - jsImport: String, - slots: Slots = Slots(None, Seq.empty), - properties: Seq[Property] = Seq.empty, - methods: Seq[Method] = Seq.empty, - events: Seq[Event] = Seq.empty, - cssProperties: Seq[CSSProperty] = Seq.empty, - subComponents: Seq[WebComponent] = Seq.empty, -) + tag: String, + description: String, + link: String, + npmPackage: NpmPackage, + jsImport: String, + slots: Slots = Slots(None, Seq.empty), + properties: Seq[Property] = Seq.empty, + methods: Seq[Method] = Seq.empty, + events: Seq[Event] = Seq.empty, + cssProperties: Seq[CSSProperty] = Seq.empty, + subComponents: Seq[WebComponent] = Seq.empty, + ) case class NpmPackage(name: String, version: String) @@ -32,41 +32,42 @@ object WebComponentFieldType { case object String extends WebComponentFieldType case object Boolean extends WebComponentFieldType case object Number extends WebComponentFieldType + case object Element extends WebComponentFieldType case object Any extends WebComponentFieldType } case class Property( - name: String, - tpe: WebComponentFieldType, - description: String, - isReadOnly: Boolean = false, // TODO: update definitions to reflect this -) + name: String, + tpe: WebComponentFieldType, + description: String, + isReadOnly: Boolean = false, // TODO: update definitions to reflect this + ) case class Method( - name: String, - description: String, - // TODO: support parameters and return values -) + name: String, + description: String, + // TODO: support parameters and return values + ) case class Event( - name: String, - description: String, - // TODO: support details -) + name: String, + description: String, + // TODO: support details + ) case class Slots(default: Option[DefaultSlot], named: Seq[NamedSlot]) case class NamedSlot( - name: String, - description: String, -) + name: String, + description: String, + ) case class DefaultSlot( - description: String, -) + description: String, + ) case class CSSProperty( - name: String, - description: String, - // TODO: support defaults and maybe types -) + name: String, + description: String, + // TODO: support defaults and maybe types + ) diff --git a/generator/material.sc b/generator/material.sc index e96b140..80e7c3c 100644 --- a/generator/material.sc +++ b/generator/material.sc @@ -1,5 +1,5 @@ /** Web Component definitions for Google's Material Web Components - */ + */ import $file.definition @@ -1457,7 +1457,7 @@ val componentCollection = WebComponentCollection( ), Property( name = "anchor", - tpe = WebComponentFieldType.Any, + tpe = WebComponentFieldType.Element, description = "Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both mwc-menu and the anchor should share a parent with position:relative. Changing anchor typically requires absolute or fixed.", ), diff --git a/material/src/main/scala/material.scala b/material/src/main/scala/material.scala index 9ec9d2e..ce9d062 100644 --- a/material/src/main/scala/material.scala +++ b/material/src/main/scala/material.scala @@ -1,2330 +1,2876 @@ -/** material - * - * @see Component Collection Documentation - */ -package com.github.uosis.laminar.webcomponents.material { - import com.raquo.domtypes.generic.codecs._ - import com.raquo.laminar.api.L._ - import com.raquo.laminar.builders.HtmlTag - import com.raquo.laminar.keys.{ReactiveHtmlAttr, ReactiveProp, ReactiveStyle} - import com.raquo.laminar.nodes.ReactiveHtmlElement + /** material + * + * @see Component Collection Documentation + */ + package com.github.uosis.laminar.webcomponents.material { - import org.scalajs.dom + import com.raquo.domtypes.generic.codecs._ + import com.raquo.laminar.api.L._ + import com.raquo.laminar.builders.HtmlTag + import com.raquo.laminar.keys.{ReactiveHtmlAttr, ReactiveProp, ReactiveStyle} + import com.raquo.laminar.nodes.ReactiveHtmlElement - import scala.scalajs.js - import scala.scalajs.js.annotation.JSImport + import org.scalajs.dom - object styles { - import com.raquo.domtypes.generic.keys.Style + import scala.scalajs.js + import scala.scalajs.js.annotation.JSImport - /** The theme primary color. - * - * @see Component Collection Documentation - */ - val themePrimary = new ReactiveStyle(new Style("--mdc-theme-primary", "--mdc-theme-primary")) + object ElementAsIsCodec extends AsIsCodec[HtmlElement] - /** The theme error color - * - * @see Component Collection Documentation - */ - val themeError = new ReactiveStyle(new Style("--mdc-theme-error", "--mdc-theme-error")) + + object styles { + import com.raquo.domtypes.generic.keys.Style - /** The theme secondary color. - * - * @see Component Collection Documentation - */ - val themeSecondary = new ReactiveStyle(new Style("--mdc-theme-secondary", "--mdc-theme-secondary")) + + /** The theme primary color. + * + * @see Component Collection Documentation + */ + val themePrimary = new ReactiveStyle(new Style("--mdc-theme-primary", "--mdc-theme-primary")) + - /** The theme surface color. - * - * @see Component Collection Documentation - */ - val themeSurface = new ReactiveStyle(new Style("--mdc-theme-surface", "--mdc-theme-surface")) + /** The theme error color + * + * @see Component Collection Documentation + */ + val themeError = new ReactiveStyle(new Style("--mdc-theme-error", "--mdc-theme-error")) + - /** The theme background color. - * - * @see Component Collection Documentation - */ - val themeBackground = new ReactiveStyle(new Style("--mdc-theme-background", "--mdc-theme-background")) + /** The theme secondary color. + * + * @see Component Collection Documentation + */ + val themeSecondary = new ReactiveStyle(new Style("--mdc-theme-secondary", "--mdc-theme-secondary")) + - /** Text and icons on top of a theme primary color background. - * - * @see Component Collection Documentation - */ - val themeOnPrimary = new ReactiveStyle(new Style("--mdc-theme-on-primary", "--mdc-theme-on-primary")) + /** The theme surface color. + * + * @see Component Collection Documentation + */ + val themeSurface = new ReactiveStyle(new Style("--mdc-theme-surface", "--mdc-theme-surface")) + - /** Text and icons on top of a theme secondary color background. - * - * @see Component Collection Documentation - */ - val themeOnSecondary = new ReactiveStyle(new Style("--mdc-theme-on-secondary", "--mdc-theme-on-secondary")) + /** The theme background color. + * + * @see Component Collection Documentation + */ + val themeBackground = new ReactiveStyle(new Style("--mdc-theme-background", "--mdc-theme-background")) + - /** Text and icons on top of a theme surface color background. - * - * @see Component Collection Documentation - */ - val themeOnSurface = new ReactiveStyle(new Style("--mdc-theme-on-surface", "--mdc-theme-on-surface")) + /** Text and icons on top of a theme primary color background. + * + * @see Component Collection Documentation + */ + val themeOnPrimary = new ReactiveStyle(new Style("--mdc-theme-on-primary", "--mdc-theme-on-primary")) + - } + /** Text and icons on top of a theme secondary color background. + * + * @see Component Collection Documentation + */ + val themeOnSecondary = new ReactiveStyle(new Style("--mdc-theme-on-secondary", "--mdc-theme-on-secondary")) + - /** mwc-button - * - * Buttons allow users to take actions, and make choices, with a single tap. - * - * {@literal @material/mwc-button@0.18.0} - * - * @see Component Documentation - */ - object Button { + /** Text and icons on top of a theme surface color background. + * + * @see Component Collection Documentation + */ + val themeOnSurface = new ReactiveStyle(new Style("--mdc-theme-on-surface", "--mdc-theme-on-surface")) + + } + + + /** mwc-button + * + * Buttons allow users to take actions, and make choices, with a single tap. + * + * {@literal @material/mwc-button@0.18.0} + * + * @see Component Documentation + */ + object Button { + @js.native trait RawElement extends js.Object { + + /** Icon to display, and `aria-label` value when `label` is not defined. + * + * @see Component Documentation + */ + def `icon`: String + + + /** Label to display for the button, and `aria-label`. + * + * @see Component Documentation + */ + def `label`: String + + + /** Creates a contained button that is elevated above the surface. + * + * @see Component Documentation + */ + def `raised`: Boolean + + + /** Creates a contained button that is flush with the surface. + * + * @see Component Documentation + */ + def `unelevated`: Boolean + + + /** Creates an outlined button that is flush with the surface. + * + * @see Component Documentation + */ + def `outlined`: Boolean + + + /** Makes the button text and container slightly smaller. + * + * @see Component Documentation + */ + def `dense`: Boolean + + + /** Disabled buttons cannot be interacted with and have no visual interaction effect. + * + * @see Component Documentation + */ + def `disabled`: Boolean + - /** Icon to display, and `aria-label` value when `label` is not defined. - * - * @see Component Documentation - */ - def `icon`: String - - /** Label to display for the button, and `aria-label`. - * - * @see Component Documentation - */ - def `label`: String - - /** Creates a contained button that is elevated above the surface. - * - * @see Component Documentation - */ - def `raised`: Boolean - - /** Creates a contained button that is flush with the surface. - * - * @see Component Documentation - */ - def `unelevated`: Boolean - - /** Creates an outlined button that is flush with the surface. - * - * @see Component Documentation - */ - def `outlined`: Boolean - - /** Makes the button text and container slightly smaller. - * - * @see Component Documentation - */ - def `dense`: Boolean - - /** Disabled buttons cannot be interacted with and have no visual interaction effect. - * - * @see Component Documentation - */ - def `disabled`: Boolean - - /** When `true`, `icon` will be displayed _after_ `label`. - * - * @see Component Documentation - */ - def `trailingIcon`: Boolean + /** When `true`, `icon` will be displayed _after_ `label`. + * + * @see Component Documentation + */ + def `trailingIcon`: Boolean + + } + + @js.native @JSImport("@material/mwc-button", JSImport.Default) object RawImport extends js.Object {} RawImport // needed because objects are lazy + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] type ModFunction = Button.type => Mod[El] + + private val tag = new HtmlTag[Ref]("mwc-button", void = false) + + object slots { + + /** Default content to display between both icons and after label. NOTE: It is highly recommended to set the label property instead of projecting text as it will also set the aria-label + * + * @see Component Documentation + */ + def default(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "")) + - /** Default content to display between both icons and after label. NOTE: It is highly recommended to set the label property instead of projecting text as it will also set the aria-label - * - * @see Component Documentation - */ - def default(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "")) - - /** Leading icon. Overrides icon property. Use label or the icon property to set the aria-label. - * - * @see Component Documentation - */ - def icon(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "icon")) - - /** Icon to show after the label. Overrides trailingIcon property. Use label or the trailingIcon property to set the aria-label. - * - * @see Component Documentation - */ - def trailingIcon(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "trailingIcon")) - - } - - /** Icon to display, and `aria-label` value when `label` is not defined. + + /** Leading icon. Overrides icon property. Use label or the icon property to set the aria-label. * * @see Component Documentation */ - val `icon` = new ReactiveProp("icon", StringAsIsCodec) + def icon(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "icon")) + - /** Label to display for the button, and `aria-label`. + /** Icon to show after the label. Overrides trailingIcon property. Use label or the trailingIcon property to set the aria-label. * * @see Component Documentation */ - val `label` = new ReactiveProp("label", StringAsIsCodec) + def trailingIcon(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "trailingIcon")) + + } + - /** Creates a contained button that is elevated above the surface. - * - * @see Component Documentation - */ - val `raised` = new ReactiveProp("raised", BooleanAsIsCodec) + + /** Icon to display, and `aria-label` value when `label` is not defined. + * + * @see Component Documentation + */ + val `icon` = new ReactiveProp("icon", StringAsIsCodec) + - /** Creates a contained button that is flush with the surface. - * - * @see Component Documentation - */ - val `unelevated` = new ReactiveProp("unelevated", BooleanAsIsCodec) + /** Label to display for the button, and `aria-label`. + * + * @see Component Documentation + */ + val `label` = new ReactiveProp("label", StringAsIsCodec) + - /** Creates an outlined button that is flush with the surface. - * - * @see Component Documentation - */ - val `outlined` = new ReactiveProp("outlined", BooleanAsIsCodec) + /** Creates a contained button that is elevated above the surface. + * + * @see Component Documentation + */ + val `raised` = new ReactiveProp("raised", BooleanAsIsCodec) + - /** Makes the button text and container slightly smaller. - * - * @see Component Documentation - */ - val `dense` = new ReactiveProp("dense", BooleanAsIsCodec) + /** Creates a contained button that is flush with the surface. + * + * @see Component Documentation + */ + val `unelevated` = new ReactiveProp("unelevated", BooleanAsIsCodec) + - /** Disabled buttons cannot be interacted with and have no visual interaction effect. - * - * @see Component Documentation - */ - val `disabled` = new ReactiveProp("disabled", BooleanAsIsCodec) + /** Creates an outlined button that is flush with the surface. + * + * @see Component Documentation + */ + val `outlined` = new ReactiveProp("outlined", BooleanAsIsCodec) + - /** When `true`, `icon` will be displayed _after_ `label`. - * - * @see Component Documentation - */ - val `trailingIcon` = new ReactiveProp("trailingIcon", BooleanAsIsCodec) + /** Makes the button text and container slightly smaller. + * + * @see Component Documentation + */ + val `dense` = new ReactiveProp("dense", BooleanAsIsCodec) + + + /** Disabled buttons cannot be interacted with and have no visual interaction effect. + * + * @see Component Documentation + */ + val `disabled` = new ReactiveProp("disabled", BooleanAsIsCodec) + + + /** When `true`, `icon` will be displayed _after_ `label`. + * + * @see Component Documentation + */ + val `trailingIcon` = new ReactiveProp("trailingIcon", BooleanAsIsCodec) + + + + object styles { - import com.raquo.domtypes.generic.keys.Style - - /** Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted). - * - * @see Component Documentation - */ - val buttonHorizontalPadding = new ReactiveStyle( - new Style("--mdc-button-horizontal-padding", "--mdc-button-horizontal-padding"), - ) - - /** `width` of the outline of an outlined button and attempts to keep the component size constant. - * - * @see Component Documentation - */ - val buttonOutlineWidth = new ReactiveStyle(new Style("--mdc-button-outline-width", "--mdc-button-outline-width")) - - /** Color of the outline of an outlined element. - * - * @see Component Documentation - */ - val buttonOutlineColor = new ReactiveStyle(new Style("--mdc-button-outline-color", "--mdc-button-outline-color")) - - /** Background fill color of a disabled raised or unelevated button. - * - * @see Component Documentation - */ - val buttonDisabledFillColor = new ReactiveStyle( - new Style("--mdc-button-disabled-fill-color", "--mdc-button-disabled-fill-color"), - ) - - /** Text color of a disabled button as well as the outline color of a disabled outlined button. - * - * @see Component Documentation - */ - val buttonDisabledInkColor = new ReactiveStyle( - new Style("--mdc-button-disabled-ink-color", "--mdc-button-disabled-ink-color"), - ) - - /** Sets the color of the outline of a disabled outlined button. - * - * @see Component Documentation - */ - val buttonDisabledOutlineColor = new ReactiveStyle( - new Style("--mdc-button-disabled-outline-color", "--mdc-button-disabled-outline-color"), - ) - - /** Sets the box shadow of the raised button. - * - * @see Component Documentation - */ - val buttonRaisedBoxShadow = new ReactiveStyle( - new Style("--mdc-button-raised-box-shadow", "--mdc-button-raised-box-shadow"), - ) - - /** Sets the box shadow of the raised button when focused or hovered. - * - * @see Component Documentation - */ - val buttonRaisedBoxShadowHover = new ReactiveStyle( - new Style("--mdc-button-raised-box-shadow-hover", "--mdc-button-raised-box-shadow-hover"), - ) - - /** Sets the box shadow of the raised button when active. - * - * @see Component Documentation - */ - val buttonRaisedBoxShadowActive = new ReactiveStyle( - new Style("--mdc-button-raised-box-shadow-active", "--mdc-button-raised-box-shadow-active"), - ) - - /** Sets the box shadow of the raised button when disabled. - * - * @see Component Documentation - */ - val buttonRaisedBoxShadowDisabled = new ReactiveStyle( - new Style("--mdc-button-raised-box-shadow-disabled", "--mdc-button-raised-box-shadow-disabled"), - ) + import com.raquo.domtypes.generic.keys.Style - } + + /** Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted). + * + * @see Component Documentation + */ + val buttonHorizontalPadding = new ReactiveStyle(new Style("--mdc-button-horizontal-padding", "--mdc-button-horizontal-padding")) + + + /** `width` of the outline of an outlined button and attempts to keep the component size constant. + * + * @see Component Documentation + */ + val buttonOutlineWidth = new ReactiveStyle(new Style("--mdc-button-outline-width", "--mdc-button-outline-width")) + + + /** Color of the outline of an outlined element. + * + * @see Component Documentation + */ + val buttonOutlineColor = new ReactiveStyle(new Style("--mdc-button-outline-color", "--mdc-button-outline-color")) + + + /** Background fill color of a disabled raised or unelevated button. + * + * @see Component Documentation + */ + val buttonDisabledFillColor = new ReactiveStyle(new Style("--mdc-button-disabled-fill-color", "--mdc-button-disabled-fill-color")) + + + /** Text color of a disabled button as well as the outline color of a disabled outlined button. + * + * @see Component Documentation + */ + val buttonDisabledInkColor = new ReactiveStyle(new Style("--mdc-button-disabled-ink-color", "--mdc-button-disabled-ink-color")) + + + /** Sets the color of the outline of a disabled outlined button. + * + * @see Component Documentation + */ + val buttonDisabledOutlineColor = new ReactiveStyle(new Style("--mdc-button-disabled-outline-color", "--mdc-button-disabled-outline-color")) + + + /** Sets the box shadow of the raised button. + * + * @see Component Documentation + */ + val buttonRaisedBoxShadow = new ReactiveStyle(new Style("--mdc-button-raised-box-shadow", "--mdc-button-raised-box-shadow")) + + + /** Sets the box shadow of the raised button when focused or hovered. + * + * @see Component Documentation + */ + val buttonRaisedBoxShadowHover = new ReactiveStyle(new Style("--mdc-button-raised-box-shadow-hover", "--mdc-button-raised-box-shadow-hover")) + + + /** Sets the box shadow of the raised button when active. + * + * @see Component Documentation + */ + val buttonRaisedBoxShadowActive = new ReactiveStyle(new Style("--mdc-button-raised-box-shadow-active", "--mdc-button-raised-box-shadow-active")) + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(Button)): _*) + /** Sets the box shadow of the raised button when disabled. + * + * @see Component Documentation + */ + val buttonRaisedBoxShadowDisabled = new ReactiveStyle(new Style("--mdc-button-raised-box-shadow-disabled", "--mdc-button-raised-box-shadow-disabled")) + } + + + def apply(mods: ModFunction*): El = { + tag(mods.map(_(Button)): _*) + } - } - /** mwc-checkbox - * - * Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. - * - * {@literal @material/mwc-checkbox@0.18.0} - * - * @see Component Documentation - */ - object Checkbox { + + } + + /** mwc-checkbox + * + * Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. + * + * {@literal @material/mwc-checkbox@0.18.0} + * + * @see Component Documentation + */ + object Checkbox { + @js.native trait RawElement extends js.Object { + + /** Whether the checkbox is checked. + * + * @see Component Documentation + */ + def `checked`: Boolean + + + /** When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked. + * + * @see Component Documentation + */ + def `indeterminate`: Boolean + + + /** When `true`, the checkbox cannot be interacted with, and renders in muted colors. + * + * @see Component Documentation + */ + def `disabled`: Boolean + + + /** The value that will be included if the checkbox is submitted in a form. + * + * @see Component Documentation + */ + def `value`: String + - /** Whether the checkbox is checked. - * - * @see Component Documentation - */ - def `checked`: Boolean - - /** When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked. - * - * @see Component Documentation - */ - def `indeterminate`: Boolean - - /** When `true`, the checkbox cannot be interacted with, and renders in muted colors. - * - * @see Component Documentation - */ - def `disabled`: Boolean - - /** The value that will be included if the checkbox is submitted in a form. - * - * @see Component Documentation - */ - def `value`: String - - /** When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch. - * - * @see Component Documentation - */ - def `reducedTouchTarget`: Boolean + /** When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch. + * + * @see Component Documentation + */ + def `reducedTouchTarget`: Boolean + + } + + @js.native @JSImport("@material/mwc-checkbox", JSImport.Default) object RawImport extends js.Object {} RawImport // needed because objects are lazy + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] type ModFunction = Checkbox.type => Mod[El] + + private val tag = new HtmlTag[Ref]("mwc-checkbox", void = false) + - object slots {} + + object slots { + - /** Whether the checkbox is checked. - * - * @see Component Documentation - */ - val `checked` = new ReactiveProp("checked", BooleanAsIsCodec) + + } + - /** When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked. - * - * @see Component Documentation - */ - val `indeterminate` = new ReactiveProp("indeterminate", BooleanAsIsCodec) + + /** Whether the checkbox is checked. + * + * @see Component Documentation + */ + val `checked` = new ReactiveProp("checked", BooleanAsIsCodec) + - /** When `true`, the checkbox cannot be interacted with, and renders in muted colors. - * - * @see Component Documentation - */ - val `disabled` = new ReactiveProp("disabled", BooleanAsIsCodec) + /** When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked. + * + * @see Component Documentation + */ + val `indeterminate` = new ReactiveProp("indeterminate", BooleanAsIsCodec) + - /** The value that will be included if the checkbox is submitted in a form. - * - * @see Component Documentation - */ - val `value` = new ReactiveProp("value", StringAsIsCodec) + /** When `true`, the checkbox cannot be interacted with, and renders in muted colors. + * + * @see Component Documentation + */ + val `disabled` = new ReactiveProp("disabled", BooleanAsIsCodec) + - /** When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch. - * - * @see Component Documentation - */ - val `reducedTouchTarget` = new ReactiveProp("reducedTouchTarget", BooleanAsIsCodec) + /** The value that will be included if the checkbox is submitted in a form. + * + * @see Component Documentation + */ + val `value` = new ReactiveProp("value", StringAsIsCodec) + - /** Fired when the user modifies the checkbox checked or indeterminate states from an input device interaction. Note that, like native , the change event is not fired when the checked or indeterminate properties are set from JavaScript. - * - * @see Component Documentation - */ - val onChange = new EventProp[dom.Event]("change") + /** When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch. + * + * @see Component Documentation + */ + val `reducedTouchTarget` = new ReactiveProp("reducedTouchTarget", BooleanAsIsCodec) + + + + /** Fired when the user modifies the checkbox checked or indeterminate states from an input device interaction. Note that, like native , the change event is not fired when the checked or indeterminate properties are set from JavaScript. + * + * @see Component Documentation + */ + val onChange = new EventProp[dom.Event]("change") + + object styles { - import com.raquo.domtypes.generic.keys.Style - - /** Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled). - * - * @see Component Documentation - */ - val checkboxInkColor = new ReactiveStyle(new Style("--mdc-checkbox-ink-color", "--mdc-checkbox-ink-color")) - - /** Color of the unchecked box. - * - * @see Component Documentation - */ - val checkboxUncheckedColor = new ReactiveStyle( - new Style("--mdc-checkbox-unchecked-color", "--mdc-checkbox-unchecked-color"), - ) - - /** Color of the checkbox box and fill when disabled. - * - * @see Component Documentation - */ - val checkboxDisabledColor = new ReactiveStyle( - new Style("--mdc-checkbox-disabled-color", "--mdc-checkbox-disabled-color"), - ) + import com.raquo.domtypes.generic.keys.Style - } + + /** Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled). + * + * @see Component Documentation + */ + val checkboxInkColor = new ReactiveStyle(new Style("--mdc-checkbox-ink-color", "--mdc-checkbox-ink-color")) + + + /** Color of the unchecked box. + * + * @see Component Documentation + */ + val checkboxUncheckedColor = new ReactiveStyle(new Style("--mdc-checkbox-unchecked-color", "--mdc-checkbox-unchecked-color")) + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(Checkbox)): _*) + /** Color of the checkbox box and fill when disabled. + * + * @see Component Documentation + */ + val checkboxDisabledColor = new ReactiveStyle(new Style("--mdc-checkbox-disabled-color", "--mdc-checkbox-disabled-color")) + } + + + def apply(mods: ModFunction*): El = { + tag(mods.map(_(Checkbox)): _*) + } - } - /** mwc-circular-progress - * - * Progress indicators express an unspecified wait time or display the length of a process. - * - * {@literal @material/mwc-circular-progress@0.18.0} - * - * @see Component Documentation - */ - object CircularProgress { + + } + + /** mwc-circular-progress + * + * Progress indicators express an unspecified wait time or display the length of a process. + * + * {@literal @material/mwc-circular-progress@0.18.0} + * + * @see Component Documentation + */ + object CircularProgress { + @js.native trait RawElement extends js.Object { + + /** Sets the circular-progress into its indeterminate state. + * + * @see Component Documentation + */ + def `indeterminate`: Boolean + + + /** Sets the progress bar's value. Value should be between [0, 1]. + * + * @see Component Documentation + */ + def `progress`: Double + + + /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. + * + * @see Component Documentation + */ + def `density`: Double + + + /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. + * + * @see Component Documentation + */ + def `closed`: Boolean + - /** Sets the circular-progress into its indeterminate state. - * - * @see Component Documentation - */ - def `indeterminate`: Boolean - - /** Sets the progress bar's value. Value should be between [0, 1]. - * - * @see Component Documentation - */ - def `progress`: Double - - /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. - * - * @see Component Documentation - */ - def `density`: Double - - /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. - * - * @see Component Documentation - */ - def `closed`: Boolean - - /** Sets CircularProgress.closed to false - * - * @see Component Documentation - */ - def open(): Unit - - /** Sets CircularProgress.closed to true - * - * @see Component Documentation - */ - def close(): Unit + + /** Sets CircularProgress.closed to false + * + * @see Component Documentation + */ + def open(): Unit + + /** Sets CircularProgress.closed to true + * + * @see Component Documentation + */ + def close(): Unit + } + + @js.native @JSImport("@material/mwc-circular-progress", JSImport.Default) object RawImport extends js.Object {} RawImport // needed because objects are lazy + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] type ModFunction = CircularProgress.type => Mod[El] + + private val tag = new HtmlTag[Ref]("mwc-circular-progress", void = false) + - object slots {} + + object slots { + - /** Sets the circular-progress into its indeterminate state. - * - * @see Component Documentation - */ - val `indeterminate` = new ReactiveProp("indeterminate", BooleanAsIsCodec) + + } + - /** Sets the progress bar's value. Value should be between [0, 1]. - * - * @see Component Documentation - */ - val `progress` = new ReactiveProp("progress", DoubleAsIsCodec) + + /** Sets the circular-progress into its indeterminate state. + * + * @see Component Documentation + */ + val `indeterminate` = new ReactiveProp("indeterminate", BooleanAsIsCodec) + - /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. - * - * @see Component Documentation - */ - val `density` = new ReactiveProp("density", DoubleAsIsCodec) + /** Sets the progress bar's value. Value should be between [0, 1]. + * + * @see Component Documentation + */ + val `progress` = new ReactiveProp("progress", DoubleAsIsCodec) + - /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. - * - * @see Component Documentation - */ - val `closed` = new ReactiveProp("closed", BooleanAsIsCodec) + /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. + * + * @see Component Documentation + */ + val `density` = new ReactiveProp("density", DoubleAsIsCodec) + + + /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. + * + * @see Component Documentation + */ + val `closed` = new ReactiveProp("closed", BooleanAsIsCodec) + + + + object styles { - import com.raquo.domtypes.generic.keys.Style + import com.raquo.domtypes.generic.keys.Style + } + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(CircularProgress)): _*) - } + def apply(mods: ModFunction*): El = { + tag(mods.map(_(CircularProgress)): _*) + } - } - /** mwc-circular-progress-four-color - * - * Progress indicators express an unspecified wait time or display the length of a process. - * - * {@literal @material/mwc-circular-progress-four-color@0.18.0} - * - * @see Component Documentation - */ - object CircularProgressFourColor { + + } + + /** mwc-circular-progress-four-color + * + * Progress indicators express an unspecified wait time or display the length of a process. + * + * {@literal @material/mwc-circular-progress-four-color@0.18.0} + * + * @see Component Documentation + */ + object CircularProgressFourColor { + @js.native trait RawElement extends js.Object { + + /** Sets the circular-progress into its indeterminate state. + * + * @see Component Documentation + */ + def `indeterminate`: Boolean + + + /** Sets the progress bar's value. Value should be between [0, 1]. + * + * @see Component Documentation + */ + def `progress`: Double + + + /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. + * + * @see Component Documentation + */ + def `density`: Double + + + /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. + * + * @see Component Documentation + */ + def `closed`: Boolean + - /** Sets the circular-progress into its indeterminate state. - * - * @see Component Documentation - */ - def `indeterminate`: Boolean - - /** Sets the progress bar's value. Value should be between [0, 1]. - * - * @see Component Documentation - */ - def `progress`: Double - - /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. - * - * @see Component Documentation - */ - def `density`: Double - - /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. - * - * @see Component Documentation - */ - def `closed`: Boolean - - /** Sets CircularProgress.closed to false - * - * @see Component Documentation - */ - def open(): Unit - - /** Sets CircularProgress.closed to true - * - * @see Component Documentation - */ - def close(): Unit + + /** Sets CircularProgress.closed to false + * + * @see Component Documentation + */ + def open(): Unit + + /** Sets CircularProgress.closed to true + * + * @see Component Documentation + */ + def close(): Unit + } + + @js.native @JSImport("@material/mwc-circular-progress-four-color", JSImport.Default) object RawImport extends js.Object {} RawImport // needed because objects are lazy + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] type ModFunction = CircularProgressFourColor.type => Mod[El] + + private val tag = new HtmlTag[Ref]("mwc-circular-progress-four-color", void = false) + - object slots {} + + object slots { + - /** Sets the circular-progress into its indeterminate state. - * - * @see Component Documentation - */ - val `indeterminate` = new ReactiveProp("indeterminate", BooleanAsIsCodec) + + } + - /** Sets the progress bar's value. Value should be between [0, 1]. - * - * @see Component Documentation - */ - val `progress` = new ReactiveProp("progress", DoubleAsIsCodec) + + /** Sets the circular-progress into its indeterminate state. + * + * @see Component Documentation + */ + val `indeterminate` = new ReactiveProp("indeterminate", BooleanAsIsCodec) + - /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. - * - * @see Component Documentation - */ - val `density` = new ReactiveProp("density", DoubleAsIsCodec) + /** Sets the progress bar's value. Value should be between [0, 1]. + * + * @see Component Documentation + */ + val `progress` = new ReactiveProp("progress", DoubleAsIsCodec) + - /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. - * - * @see Component Documentation - */ - val `closed` = new ReactiveProp("closed", BooleanAsIsCodec) + /** Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically. + * + * @see Component Documentation + */ + val `density` = new ReactiveProp("density", DoubleAsIsCodec) + + /** Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished. + * + * @see Component Documentation + */ + val `closed` = new ReactiveProp("closed", BooleanAsIsCodec) + + + + + object styles { - import com.raquo.domtypes.generic.keys.Style - - /** Sets the first of the four rotating colors. - * - * @see Component Documentation - */ - val circularProgressBarColor1 = new ReactiveStyle( - new Style("--mdc-circular-progress-bar-color-1", "--mdc-circular-progress-bar-color-1"), - ) - - /** Sets the second of the four rotating colors. - * - * @see Component Documentation - */ - val circularProgressBarColor2 = new ReactiveStyle( - new Style("--mdc-circular-progress-bar-color-2", "--mdc-circular-progress-bar-color-2"), - ) - - /** Sets the third of the four rotating colors. - * - * @see Component Documentation - */ - val circularProgressBarColor3 = new ReactiveStyle( - new Style("--mdc-circular-progress-bar-color-3", "--mdc-circular-progress-bar-color-3"), - ) - - /** Sets the last of the four rotating colors. - * - * @see Component Documentation - */ - val circularProgressBarColor4 = new ReactiveStyle( - new Style("--mdc-circular-progress-bar-color-4", "--mdc-circular-progress-bar-color-4"), - ) + import com.raquo.domtypes.generic.keys.Style - } + + /** Sets the first of the four rotating colors. + * + * @see Component Documentation + */ + val circularProgressBarColor1 = new ReactiveStyle(new Style("--mdc-circular-progress-bar-color-1", "--mdc-circular-progress-bar-color-1")) + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(CircularProgressFourColor)): _*) + /** Sets the second of the four rotating colors. + * + * @see Component Documentation + */ + val circularProgressBarColor2 = new ReactiveStyle(new Style("--mdc-circular-progress-bar-color-2", "--mdc-circular-progress-bar-color-2")) + + + /** Sets the third of the four rotating colors. + * + * @see Component Documentation + */ + val circularProgressBarColor3 = new ReactiveStyle(new Style("--mdc-circular-progress-bar-color-3", "--mdc-circular-progress-bar-color-3")) + + + /** Sets the last of the four rotating colors. + * + * @see Component Documentation + */ + val circularProgressBarColor4 = new ReactiveStyle(new Style("--mdc-circular-progress-bar-color-4", "--mdc-circular-progress-bar-color-4")) + } + - } + def apply(mods: ModFunction*): El = { + tag(mods.map(_(CircularProgressFourColor)): _*) + } - /** mwc-dialog - * - * Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. - * - * {@literal @material/mwc-dialog@0.18.0} - * - * @see Component Documentation - */ - object Dialog { + + } + + + /** mwc-dialog + * + * Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. + * + * {@literal @material/mwc-dialog@0.18.0} + * + * @see Component Documentation + */ + object Dialog { + @js.native trait RawElement extends js.Object { + + /** Whether the dialog should open. + * + * @see Component Documentation + */ + def `open`: Boolean + + + /** Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in. + * + * @see Component Documentation + */ + def `hideActions`: Boolean + + + /** Whether to stack the action buttons. + * + * @see Component Documentation + */ + def `stacked`: Boolean + + + /** Heading text of the dialog. + * + * @see Component Documentation + */ + def `heading`: String + + + /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). + * + * @see Component Documentation + */ + def `scrimClickAction`: String + + + /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)). + * + * @see Component Documentation + */ + def `escapeKeyAction`: String + + + /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)). + * + * @see Component Documentation + */ + def `defaultAction`: String + + + /** _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)). + * + * @see Component Documentation + */ + def `actionAttribute`: String + + + /** _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open. + * + * @see Component Documentation + */ + def `initialFocusAttribute`: String + + + + /** Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly. + * + * @see Component Documentation + */ + def forceLayout(): Unit + + + /** Focuses on the initial focus element if defined (see [focus section](#focus)). + * + * @see Component Documentation + */ + def focus(): Unit + - /** Whether the dialog should open. - * - * @see Component Documentation - */ - def `open`: Boolean - - /** Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in. - * - * @see Component Documentation - */ - def `hideActions`: Boolean - - /** Whether to stack the action buttons. - * - * @see Component Documentation - */ - def `stacked`: Boolean - - /** Heading text of the dialog. - * - * @see Component Documentation - */ - def `heading`: String - - /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). - * - * @see Component Documentation - */ - def `scrimClickAction`: String - - /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)). - * - * @see Component Documentation - */ - def `escapeKeyAction`: String - - /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)). - * - * @see Component Documentation - */ - def `defaultAction`: String - - /** _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)). - * - * @see Component Documentation - */ - def `actionAttribute`: String - - /** _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open. - * - * @see Component Documentation - */ - def `initialFocusAttribute`: String - - /** Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly. - * - * @see Component Documentation - */ - def forceLayout(): Unit - - /** Focuses on the initial focus element if defined (see [focus section](#focus)). - * - * @see Component Documentation - */ - def focus(): Unit - - /** Blurs the active element. - * - * @see Component Documentation - */ - def blur(): Unit - - /** Opens the dialog. - * - * @see Component Documentation - */ - def show(): Unit - - /** Closes the dialog. - * - * @see Component Documentation - */ - def close(): Unit + /** Blurs the active element. + * + * @see Component Documentation + */ + def blur(): Unit + + + /** Opens the dialog. + * + * @see Component Documentation + */ + def show(): Unit + + /** Closes the dialog. + * + * @see Component Documentation + */ + def close(): Unit + } + + @js.native @JSImport("@material/mwc-dialog", JSImport.Default) object RawImport extends js.Object {} RawImport // needed because objects are lazy + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] type ModFunction = Dialog.type => Mod[El] + + private val tag = new HtmlTag[Ref]("mwc-dialog", void = false) + + object slots { + + /** Content to display in the dialog's content area. + * + * @see Component Documentation + */ + def default(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "")) + - /** Content to display in the dialog's content area. - * - * @see Component Documentation - */ - def default(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "")) - - /** A focusable and clickable target. Typically a button such as . Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when Enter key is pressed in the dialog. - * - * @see Component Documentation - */ - def primaryAction(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "primaryAction")) - - /** A focusable and clickable target. Typically a button such as . Placed immediately to the left of the primaryAction (LTR) or below when stacked. - * - * @see Component Documentation - */ - def secondaryAction(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "secondaryAction")) - - } - - /** Whether the dialog should open. + + /** A focusable and clickable target. Typically a button such as . Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when Enter key is pressed in the dialog. * * @see Component Documentation */ - val `open` = new ReactiveProp("open", BooleanAsIsCodec) + def primaryAction(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "primaryAction")) + - /** Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in. + /** A focusable and clickable target. Typically a button such as . Placed immediately to the left of the primaryAction (LTR) or below when stacked. * * @see Component Documentation */ - val `hideActions` = new ReactiveProp("hideActions", BooleanAsIsCodec) + def secondaryAction(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "secondaryAction")) + + } + - /** Whether to stack the action buttons. - * - * @see Component Documentation - */ - val `stacked` = new ReactiveProp("stacked", BooleanAsIsCodec) + + /** Whether the dialog should open. + * + * @see Component Documentation + */ + val `open` = new ReactiveProp("open", BooleanAsIsCodec) + - /** Heading text of the dialog. - * - * @see Component Documentation - */ - val `heading` = new ReactiveProp("heading", StringAsIsCodec) + /** Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in. + * + * @see Component Documentation + */ + val `hideActions` = new ReactiveProp("hideActions", BooleanAsIsCodec) + - /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). - * - * @see Component Documentation - */ - val `scrimClickAction` = new ReactiveProp("scrimClickAction", StringAsIsCodec) + /** Whether to stack the action buttons. + * + * @see Component Documentation + */ + val `stacked` = new ReactiveProp("stacked", BooleanAsIsCodec) + - /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)). - * - * @see Component Documentation - */ - val `escapeKeyAction` = new ReactiveProp("escapeKeyAction", StringAsIsCodec) + /** Heading text of the dialog. + * + * @see Component Documentation + */ + val `heading` = new ReactiveProp("heading", StringAsIsCodec) + - /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)). - * - * @see Component Documentation - */ - val `defaultAction` = new ReactiveProp("defaultAction", StringAsIsCodec) + /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). + * + * @see Component Documentation + */ + val `scrimClickAction` = new ReactiveProp("scrimClickAction", StringAsIsCodec) + - /** _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)). - * - * @see Component Documentation - */ - val `actionAttribute` = new ReactiveProp("actionAttribute", StringAsIsCodec) + /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)). + * + * @see Component Documentation + */ + val `escapeKeyAction` = new ReactiveProp("escapeKeyAction", StringAsIsCodec) + - /** _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open. - * - * @see Component Documentation - */ - val `initialFocusAttribute` = new ReactiveProp("initialFocusAttribute", StringAsIsCodec) + /** _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)). + * + * @see Component Documentation + */ + val `defaultAction` = new ReactiveProp("defaultAction", StringAsIsCodec) + - /** Fired when the dialog is beginning to open. - * - * @see Component Documentation - */ - val onOpening = new EventProp[dom.Event]("opening") + /** _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)). + * + * @see Component Documentation + */ + val `actionAttribute` = new ReactiveProp("actionAttribute", StringAsIsCodec) + - /** Fired once the dialog is finished opening (after animation). - * - * @see Component Documentation - */ - val onOpened = new EventProp[dom.Event]("opened") + /** _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open. + * + * @see Component Documentation + */ + val `initialFocusAttribute` = new ReactiveProp("initialFocusAttribute", StringAsIsCodec) + - /** Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)). - * - * @see Component Documentation - */ - val onClosing = new EventProp[dom.Event]("closing") + + /** Fired when the dialog is beginning to open. + * + * @see Component Documentation + */ + val onOpening = new EventProp[dom.Event]("opening") + - /** Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)) - * - * @see Component Documentation - */ - val onClosed = new EventProp[dom.Event]("closed") + /** Fired once the dialog is finished opening (after animation). + * + * @see Component Documentation + */ + val onOpened = new EventProp[dom.Event]("opened") + + + /** Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)). + * + * @see Component Documentation + */ + val onClosing = new EventProp[dom.Event]("closing") + + + /** Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)) + * + * @see Component Documentation + */ + val onClosed = new EventProp[dom.Event]("closed") + + object styles { - import com.raquo.domtypes.generic.keys.Style - - /** Corner radius of the dialog surface. - * - * @see Component Documentation - */ - val shapeMedium = new ReactiveStyle(new Style("--mdc-shape-medium", "--mdc-shape-medium")) - - /** Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent). - * - * @see Component Documentation - */ - val dialogScrimColor = new ReactiveStyle(new Style("--mdc-dialog-scrim-color", "--mdc-dialog-scrim-color")) - - /** Color of the heading text. - * - * @see Component Documentation - */ - val dialogHeadingInkColor = new ReactiveStyle( - new Style("--mdc-dialog-heading-ink-color", "--mdc-dialog-heading-ink-color"), - ) - - /** Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root). - * - * @see Component Documentation - */ - val dialogContentInkColor = new ReactiveStyle( - new Style("--mdc-dialog-content-ink-color", "--mdc-dialog-content-ink-color"), - ) - - /** Color of the dividers present when dialog is scrollable. - * - * @see Component Documentation - */ - val dialogScrollDividerColor = new ReactiveStyle( - new Style("--mdc-dialog-scroll-divider-color", "--mdc-dialog-scroll-divider-color"), - ) - - /** min-width ofthe dialog surface. - * - * @see Component Documentation - */ - val dialogMinWidth = new ReactiveStyle(new Style("--mdc-dialog-min-width", "--mdc-dialog-min-width")) - - /** max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`). - * - * @see Component Documentation - */ - val dialogMaxWidth = new ReactiveStyle(new Style("--mdc-dialog-max-width", "--mdc-dialog-max-width")) - - /** Max height of the dialog surface. - * - * @see Component Documentation - */ - val dialogMaxHeight = new ReactiveStyle(new Style("--mdc-dialog-max-height", "--mdc-dialog-max-height")) - - /** Sets the box shadow of the dialog. - * - * @see Component Documentation - */ - val dialogBoxShadow = new ReactiveStyle(new Style("--mdc-dialog-box-shadow", "--mdc-dialog-box-shadow")) + import com.raquo.domtypes.generic.keys.Style - } + + /** Corner radius of the dialog surface. + * + * @see Component Documentation + */ + val shapeMedium = new ReactiveStyle(new Style("--mdc-shape-medium", "--mdc-shape-medium")) + + + /** Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent). + * + * @see Component Documentation + */ + val dialogScrimColor = new ReactiveStyle(new Style("--mdc-dialog-scrim-color", "--mdc-dialog-scrim-color")) + + + /** Color of the heading text. + * + * @see Component Documentation + */ + val dialogHeadingInkColor = new ReactiveStyle(new Style("--mdc-dialog-heading-ink-color", "--mdc-dialog-heading-ink-color")) + + + /** Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root). + * + * @see Component Documentation + */ + val dialogContentInkColor = new ReactiveStyle(new Style("--mdc-dialog-content-ink-color", "--mdc-dialog-content-ink-color")) + + + /** Color of the dividers present when dialog is scrollable. + * + * @see Component Documentation + */ + val dialogScrollDividerColor = new ReactiveStyle(new Style("--mdc-dialog-scroll-divider-color", "--mdc-dialog-scroll-divider-color")) + + + /** min-width ofthe dialog surface. + * + * @see Component Documentation + */ + val dialogMinWidth = new ReactiveStyle(new Style("--mdc-dialog-min-width", "--mdc-dialog-min-width")) + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(Dialog)): _*) + /** max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`). + * + * @see Component Documentation + */ + val dialogMaxWidth = new ReactiveStyle(new Style("--mdc-dialog-max-width", "--mdc-dialog-max-width")) + + + /** Max height of the dialog surface. + * + * @see Component Documentation + */ + val dialogMaxHeight = new ReactiveStyle(new Style("--mdc-dialog-max-height", "--mdc-dialog-max-height")) + + + /** Sets the box shadow of the dialog. + * + * @see Component Documentation + */ + val dialogBoxShadow = new ReactiveStyle(new Style("--mdc-dialog-box-shadow", "--mdc-dialog-box-shadow")) + } + - } + def apply(mods: ModFunction*): El = { + tag(mods.map(_(Dialog)): _*) + } - /** mwc-drawer - * - * The Navigation Drawer is used to organize access to destinations and other functionality on an app. - * - * {@literal @material/mwc-drawer@0.18.0} - * - * @see Component Documentation - */ - object Drawer { + + } + + + /** mwc-drawer + * + * The Navigation Drawer is used to organize access to destinations and other functionality on an app. + * + * {@literal @material/mwc-drawer@0.18.0} + * + * @see Component Documentation + */ + object Drawer { + @js.native trait RawElement extends js.Object { + + /** Whether the dialog is open + * + * @see Component Documentation + */ + def `open`: Boolean + - /** Whether the dialog is open - * - * @see Component Documentation - */ - def `open`: Boolean - - /** When `true`, displays the `title`, `subtitle`, and `header` slots. - * - * @see Component Documentation - */ - def `hasHeader`: Boolean + /** When `true`, displays the `title`, `subtitle`, and `header` slots. + * + * @see Component Documentation + */ + def `hasHeader`: Boolean + - /** When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content. - * - * @see Component Documentation - */ - def `type`: String + /** When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content. + * + * @see Component Documentation + */ + def `type`: String + + } + + @js.native @JSImport("@material/mwc-drawer", JSImport.Default) object RawImport extends js.Object {} RawImport // needed because objects are lazy + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] type ModFunction = Drawer.type => Mod[El] + + private val tag = new HtmlTag[Ref]("mwc-drawer", void = false) + + object slots { + + /** Elements to display under the header in drawer. + * + * @see Component Documentation + */ + def default(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "")) + - /** Elements to display under the header in drawer. - * - * @see Component Documentation - */ - def default(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "")) - - /** Header title to display in the drawer when `hasHeader` is true. - * - * @see Component Documentation - */ - def title(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "title")) - - /** Header subtitle to display in the drawer when `hasHeader` is true. - * - * @see Component Documentation - */ - def subtitle(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "subtitle")) - - /** Additional header elements to display in the drawer. - * - * @see Component Documentation - */ - def header(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "header")) - - /** Elements to display in the 'app content' to the right of, or under, the drawer. - * - * @see Component Documentation - */ - def appContent(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "appContent")) - - } - - /** Whether the dialog is open - * - * @see Component Documentation - */ - val `open` = new ReactiveProp("open", BooleanAsIsCodec) - - /** When `true`, displays the `title`, `subtitle`, and `header` slots. + + /** Header title to display in the drawer when `hasHeader` is true. * * @see Component Documentation */ - val `hasHeader` = new ReactiveProp("hasHeader", BooleanAsIsCodec) + def title(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "title")) + - /** When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content. + /** Header subtitle to display in the drawer when `hasHeader` is true. * * @see Component Documentation */ - val `type` = new ReactiveProp("type", StringAsIsCodec) + def subtitle(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "subtitle")) + - /** Fired when the drawer opens. + /** Additional header elements to display in the drawer. * * @see Component Documentation */ - val onOpened = new EventProp[dom.Event]("MDCDrawer:opened") + def header(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "header")) + - /** Fired when the drawer closes. + /** Elements to display in the 'app content' to the right of, or under, the drawer. * * @see Component Documentation */ - val onClosed = new EventProp[dom.Event]("MDCDrawer:closed") - - object styles { - import com.raquo.domtypes.generic.keys.Style - - /** Width of the side drawer when opened. - * - * @see Component Documentation - */ - val drawerWidth = new ReactiveStyle(new Style("--mdc-drawer-width", "--mdc-drawer-width")) - + def appContent(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "appContent")) + } + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(Drawer)): _*) - } - - } - - /** mwc-fab - * - * A floating action button (FAB) represents the primary action of a screen. - * - * {@literal @material/mwc-fab@0.18.0} - * - * @see Component Documentation - */ - object Fab { + + /** Whether the dialog is open + * + * @see Component Documentation + */ + val `open` = new ReactiveProp("open", BooleanAsIsCodec) + - @js.native - trait RawElement extends js.Object { + /** When `true`, displays the `title`, `subtitle`, and `header` slots. + * + * @see Component Documentation + */ + val `hasHeader` = new ReactiveProp("hasHeader", BooleanAsIsCodec) + - /** The icon to display. - * - * @see Component Documentation - */ - def `icon`: String - - /** The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts. - * - * @see Component Documentation - */ - def `label`: String - - /** Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`. - * - * @see Component Documentation - */ - def `mini`: Boolean - - /** Sets the minimum touch target of the default-sized mini fab to recommended 48x48px. - * - * @see Component Documentation - */ - def `reducedTouchTarget`: Boolean - - /** Enable the *extended* layout which includes a text label. Defaults to `false`. - * - * @see Component Documentation - */ - def `extended`: Boolean - - /** When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`. - * - * @see Component Documentation - */ - def `showIconAtEnd`: Boolean + /** When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content. + * + * @see Component Documentation + */ + val `type` = new ReactiveProp("type", StringAsIsCodec) + - } + + /** Fired when the drawer opens. + * + * @see Component Documentation + */ + val onOpened = new EventProp[dom.Event]("MDCDrawer:opened") + - @js.native - @JSImport("@material/mwc-fab", JSImport.Default) - object RawImport extends js.Object {} - RawImport // needed because objects are lazy + /** Fired when the drawer closes. + * + * @see Component Documentation + */ + val onClosed = new EventProp[dom.Event]("MDCDrawer:closed") + - type Ref = dom.html.Element with RawElement - type El = ReactiveHtmlElement[Ref] - type ModFunction = Fab.type => Mod[El] + + object styles { + import com.raquo.domtypes.generic.keys.Style - private val tag = new HtmlTag[Ref]("mwc-fab", void = false) + + /** Width of the side drawer when opened. + * + * @see Component Documentation + */ + val drawerWidth = new ReactiveStyle(new Style("--mdc-drawer-width", "--mdc-drawer-width")) + + } + - object slots { + def apply(mods: ModFunction*): El = { + tag(mods.map(_(Drawer)): _*) + } - /** An icon to be slotted into the fab. Note: the label property should still be set for button accessibility. - * - * @see Component Documentation - */ - def icon(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "icon")) + } + - /** The icon to display. + /** mwc-fab * - * @see Component Documentation - */ - val `icon` = new ReactiveProp("icon", StringAsIsCodec) - - /** The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts. + * A floating action button (FAB) represents the primary action of a screen. * - * @see Component Documentation - */ - val `label` = new ReactiveProp("label", StringAsIsCodec) - - /** Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`. + * {@literal @material/mwc-fab@0.18.0} * * @see Component Documentation */ - val `mini` = new ReactiveProp("mini", BooleanAsIsCodec) + object Fab { + + @js.native + trait RawElement extends js.Object { + + /** The icon to display. + * + * @see Component Documentation + */ + def `icon`: String + - /** Sets the minimum touch target of the default-sized mini fab to recommended 48x48px. - * - * @see Component Documentation - */ - val `reducedTouchTarget` = new ReactiveProp("reducedTouchTarget", BooleanAsIsCodec) + /** The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts. + * + * @see Component Documentation + */ + def `label`: String + - /** Enable the *extended* layout which includes a text label. Defaults to `false`. - * - * @see Component Documentation - */ - val `extended` = new ReactiveProp("extended", BooleanAsIsCodec) + /** Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`. + * + * @see Component Documentation + */ + def `mini`: Boolean + + + /** Sets the minimum touch target of the default-sized mini fab to recommended 48x48px. + * + * @see Component Documentation + */ + def `reducedTouchTarget`: Boolean + + + /** Enable the *extended* layout which includes a text label. Defaults to `false`. + * + * @see Component Documentation + */ + def `extended`: Boolean + + + /** When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`. + * + * @see Component Documentation + */ + def `showIconAtEnd`: Boolean + + + + } + + + + @js.native + @JSImport("@material/mwc-fab", JSImport.Default) + object RawImport extends js.Object {} + RawImport // needed because objects are lazy + + + + type Ref = dom.html.Element with RawElement + type El = ReactiveHtmlElement[Ref] + type ModFunction = Fab.type => Mod[El] + - /** When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`. + + private val tag = new HtmlTag[Ref]("mwc-fab", void = false) + + + + object slots { + + + + /** An icon to be slotted into the fab. Note: the label property should still be set for button accessibility. * * @see Component Documentation */ - val `showIconAtEnd` = new ReactiveProp("showIconAtEnd", BooleanAsIsCodec) + def icon(els: HtmlElement*): Seq[HtmlElement] = els.map(_.amend(slot := "icon")) + + } + + + + /** The icon to display. + * + * @see Component Documentation + */ + val `icon` = new ReactiveProp("icon", StringAsIsCodec) + + + /** The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts. + * + * @see Component Documentation + */ + val `label` = new ReactiveProp("label", StringAsIsCodec) + + + /** Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`. + * + * @see Component Documentation + */ + val `mini` = new ReactiveProp("mini", BooleanAsIsCodec) + + + /** Sets the minimum touch target of the default-sized mini fab to recommended 48x48px. + * + * @see Component Documentation + */ + val `reducedTouchTarget` = new ReactiveProp("reducedTouchTarget", BooleanAsIsCodec) + + + /** Enable the *extended* layout which includes a text label. Defaults to `false`. + * + * @see Component Documentation + */ + val `extended` = new ReactiveProp("extended", BooleanAsIsCodec) + + + /** When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`. + * + * @see Component Documentation + */ + val `showIconAtEnd` = new ReactiveProp("showIconAtEnd", BooleanAsIsCodec) + + + + object styles { - import com.raquo.domtypes.generic.keys.Style - - /** Font to use for the icon. - * - * @see Component Documentation - */ - val iconFont = new ReactiveStyle(new Style("--mdc-icon-font", "--mdc-icon-font")) - - /** Foreground color of the label and icon. - * - * @see Component Documentation - */ - val themeOnSecondary = new ReactiveStyle(new Style("--mdc-theme-on-secondary", "--mdc-theme-on-secondary")) - - /** Background color of the FAB. - * - * @see Component Documentation - */ - val themeSecondary = new ReactiveStyle(new Style("--mdc-theme-secondary", "--mdc-theme-secondary")) - - /** Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active. - * - * @see Component Documentation - */ - val fabBoxShadow = new ReactiveStyle(new Style("--mdc-fab-box-shadow", "--mdc-fab-box-shadow")) + import com.raquo.domtypes.generic.keys.Style - } + + /** Font to use for the icon. + * + * @see Component Documentation + */ + val iconFont = new ReactiveStyle(new Style("--mdc-icon-font", "--mdc-icon-font")) + + + /** Foreground color of the label and icon. + * + * @see Component Documentation + */ + val themeOnSecondary = new ReactiveStyle(new Style("--mdc-theme-on-secondary", "--mdc-theme-on-secondary")) + + + /** Background color of the FAB. + * + * @see Component Documentation + */ + val themeSecondary = new ReactiveStyle(new Style("--mdc-theme-secondary", "--mdc-theme-secondary")) + - def apply(mods: ModFunction*): El = { - tag(mods.map(_(Fab)): _*) + /** Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active. + * + * @see Component Documentation + */ + val fabBoxShadow = new ReactiveStyle(new Style("--mdc-fab-box-shadow", "--mdc-fab-box-shadow")) + } + - } + def apply(mods: ModFunction*): El = { + tag(mods.map(_(Fab)): _*) + } - /** mwc-formfield - * - * A form field is a text caption for MWC input elements including , , and . It is equivalent to the native