@material/web 2.4.2-nightly.593705e.0 → 2.4.2-nightly.69624cd.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/button/internal/button.d.ts +0 -4
  2. package/button/internal/button.js.map +1 -1
  3. package/checkbox/internal/checkbox.d.ts +2 -2
  4. package/checkbox/internal/checkbox.js.map +1 -1
  5. package/chips/internal/chip.d.ts +2 -0
  6. package/icon/internal/icon.d.ts +1 -1
  7. package/icon/internal/icon.js +1 -1
  8. package/icon/internal/icon.js.map +1 -1
  9. package/iconbutton/internal/icon-button.d.ts +0 -4
  10. package/iconbutton/internal/icon-button.js.map +1 -1
  11. package/internal/aria/aria.d.ts +1 -1
  12. package/internal/events/dispatch-hooks.js +31 -35
  13. package/internal/events/dispatch-hooks.js.map +1 -1
  14. package/labs/behaviors/form-associated.d.ts +0 -22
  15. package/labs/behaviors/form-associated.js +0 -11
  16. package/labs/behaviors/form-associated.js.map +1 -1
  17. package/labs/gb/components/button/_button-tokens.scss +30 -30
  18. package/labs/gb/components/button/button.css +1 -1
  19. package/labs/gb/components/button/button.css.map +1 -1
  20. package/labs/gb/components/button/button.cssresult.js +1 -1
  21. package/labs/gb/components/button/button.cssresult.js.map +1 -1
  22. package/labs/gb/components/button/button.d.ts +1 -16
  23. package/labs/gb/components/button/button.js +10 -33
  24. package/labs/gb/components/button/button.js.map +1 -1
  25. package/labs/gb/components/button/button.scss +25 -25
  26. package/labs/gb/components/button/md-button.d.ts +1 -1
  27. package/labs/gb/components/button/md-button.js +9 -9
  28. package/labs/gb/components/button/md-button.js.map +1 -1
  29. package/labs/gb/components/card/card.d.ts +1 -11
  30. package/labs/gb/components/card/card.js +6 -13
  31. package/labs/gb/components/card/card.js.map +1 -1
  32. package/labs/gb/components/card/md-card.js +6 -6
  33. package/labs/gb/components/card/md-card.js.map +1 -1
  34. package/labs/gb/components/checkbox/checkbox.css +1 -1
  35. package/labs/gb/components/checkbox/checkbox.css.map +1 -1
  36. package/labs/gb/components/checkbox/checkbox.cssresult.js +1 -1
  37. package/labs/gb/components/checkbox/checkbox.cssresult.js.map +1 -1
  38. package/labs/gb/components/checkbox/checkbox.d.ts +1 -16
  39. package/labs/gb/components/checkbox/checkbox.js +8 -31
  40. package/labs/gb/components/checkbox/checkbox.js.map +1 -1
  41. package/labs/gb/components/checkbox/checkbox.scss +13 -13
  42. package/labs/gb/components/checkbox/md-checkbox.d.ts +4 -4
  43. package/labs/gb/components/checkbox/md-checkbox.js +10 -10
  44. package/labs/gb/components/checkbox/md-checkbox.js.map +1 -1
  45. package/labs/gb/components/divider/divider.d.ts +1 -11
  46. package/labs/gb/components/divider/divider.js +4 -11
  47. package/labs/gb/components/divider/divider.js.map +1 -1
  48. package/labs/gb/components/fab/fab.d.ts +1 -16
  49. package/labs/gb/components/fab/fab.js +8 -31
  50. package/labs/gb/components/fab/fab.js.map +1 -1
  51. package/labs/gb/components/fab/md-fab.js +4 -4
  52. package/labs/gb/components/fab/md-fab.js.map +1 -1
  53. package/labs/gb/components/focus/focus-ring.js +1 -1
  54. package/labs/gb/components/focus/focus-ring.js.map +1 -1
  55. package/labs/gb/components/iconbutton/_icon-button-tokens.scss +202 -0
  56. package/labs/gb/components/iconbutton/icon-button.css +4 -0
  57. package/labs/gb/components/iconbutton/icon-button.css.map +1 -0
  58. package/labs/gb/components/iconbutton/icon-button.cssresult.d.ts +3 -0
  59. package/labs/gb/components/iconbutton/icon-button.cssresult.js +14 -0
  60. package/labs/gb/components/iconbutton/icon-button.cssresult.js.map +1 -0
  61. package/labs/gb/components/iconbutton/icon-button.d.ts +97 -0
  62. package/labs/gb/components/iconbutton/icon-button.js +122 -0
  63. package/labs/gb/components/iconbutton/icon-button.js.map +1 -0
  64. package/labs/gb/components/iconbutton/icon-button.scss +153 -0
  65. package/labs/gb/components/iconbutton/md-icon-button.d.ts +73 -0
  66. package/labs/gb/components/iconbutton/md-icon-button.js +176 -0
  67. package/labs/gb/components/iconbutton/md-icon-button.js.map +1 -0
  68. package/labs/gb/components/list/_list-tokens.scss +102 -0
  69. package/labs/gb/components/list/list.css +4 -0
  70. package/labs/gb/components/list/list.css.map +1 -0
  71. package/labs/gb/components/list/list.cssresult.d.ts +3 -0
  72. package/labs/gb/components/list/list.cssresult.js +14 -0
  73. package/labs/gb/components/list/list.cssresult.js.map +1 -0
  74. package/labs/gb/components/list/list.d.ts +103 -0
  75. package/labs/gb/components/list/list.js +109 -0
  76. package/labs/gb/components/list/list.js.map +1 -0
  77. package/labs/gb/components/list/list.scss +212 -0
  78. package/labs/gb/components/list/md-list-item.d.ts +44 -0
  79. package/labs/gb/components/list/md-list-item.js +122 -0
  80. package/labs/gb/components/list/md-list-item.js.map +1 -0
  81. package/labs/gb/components/list/md-list.d.ts +26 -0
  82. package/labs/gb/components/list/md-list.js +51 -0
  83. package/labs/gb/components/list/md-list.js.map +1 -0
  84. package/labs/gb/components/menu/_menu-tokens.scss +128 -0
  85. package/labs/gb/components/menu/md-menu-group.d.ts +26 -0
  86. package/labs/gb/components/menu/md-menu-group.js +65 -0
  87. package/labs/gb/components/menu/md-menu-group.js.map +1 -0
  88. package/labs/gb/components/menu/md-menu-item.d.ts +30 -0
  89. package/labs/gb/components/menu/md-menu-item.js +165 -0
  90. package/labs/gb/components/menu/md-menu-item.js.map +1 -0
  91. package/labs/gb/components/menu/md-menu.d.ts +28 -0
  92. package/labs/gb/components/menu/md-menu.js +141 -0
  93. package/labs/gb/components/menu/md-menu.js.map +1 -0
  94. package/labs/gb/components/menu/menu.css +4 -0
  95. package/labs/gb/components/menu/menu.css.map +1 -0
  96. package/labs/gb/components/menu/menu.cssresult.d.ts +3 -0
  97. package/labs/gb/components/menu/menu.cssresult.js +14 -0
  98. package/labs/gb/components/menu/menu.cssresult.js.map +1 -0
  99. package/labs/gb/components/menu/menu.d.ts +117 -0
  100. package/labs/gb/components/menu/menu.js +107 -0
  101. package/labs/gb/components/menu/menu.js.map +1 -0
  102. package/labs/gb/components/menu/menu.scss +171 -0
  103. package/labs/gb/components/radio/md-radio.d.ts +4 -4
  104. package/labs/gb/components/radio/md-radio.js +11 -11
  105. package/labs/gb/components/radio/md-radio.js.map +1 -1
  106. package/labs/gb/components/radio/radio.css +1 -1
  107. package/labs/gb/components/radio/radio.css.map +1 -1
  108. package/labs/gb/components/radio/radio.cssresult.js +1 -1
  109. package/labs/gb/components/radio/radio.cssresult.js.map +1 -1
  110. package/labs/gb/components/radio/radio.d.ts +1 -14
  111. package/labs/gb/components/radio/radio.js +8 -23
  112. package/labs/gb/components/radio/radio.js.map +1 -1
  113. package/labs/gb/components/radio/radio.scss +4 -5
  114. package/labs/gb/components/ripple/ripple.d.ts +1 -10
  115. package/labs/gb/components/ripple/ripple.js +28 -32
  116. package/labs/gb/components/ripple/ripple.js.map +1 -1
  117. package/labs/gb/components/shared/directives.d.ts +93 -0
  118. package/labs/gb/components/shared/directives.js +111 -0
  119. package/labs/gb/components/shared/directives.js.map +1 -0
  120. package/labs/gb/components/shared/has-slotted.d.ts +10 -0
  121. package/labs/gb/components/shared/has-slotted.js +19 -0
  122. package/labs/gb/components/shared/has-slotted.js.map +1 -0
  123. package/labs/gb/components/shared/pseudo-classes.d.ts +7 -0
  124. package/labs/gb/components/shared/pseudo-classes.js +9 -0
  125. package/labs/gb/components/shared/pseudo-classes.js.map +1 -1
  126. package/labs/gb/components/switch/_switch-tokens.scss +56 -0
  127. package/labs/gb/components/switch/md-switch.d.ts +66 -0
  128. package/labs/gb/components/switch/md-switch.js +162 -0
  129. package/labs/gb/components/switch/md-switch.js.map +1 -0
  130. package/labs/gb/components/switch/switch.css +4 -0
  131. package/labs/gb/components/switch/switch.css.map +1 -0
  132. package/labs/gb/components/switch/switch.cssresult.d.ts +3 -0
  133. package/labs/gb/components/switch/switch.cssresult.js +14 -0
  134. package/labs/gb/components/switch/switch.cssresult.js.map +1 -0
  135. package/labs/gb/components/switch/switch.d.ts +54 -0
  136. package/labs/gb/components/switch/switch.js +85 -0
  137. package/labs/gb/components/switch/switch.js.map +1 -0
  138. package/labs/gb/components/switch/switch.scss +109 -0
  139. package/labs/gb/styles/icon/md-icon.css +1 -1
  140. package/labs/gb/styles/icon/md-icon.css.map +1 -1
  141. package/labs/gb/styles/icon/md-icon.cssresult.js +1 -1
  142. package/labs/gb/styles/icon/md-icon.cssresult.js.map +1 -1
  143. package/labs/gb/styles/icon/md-icon.d.ts +20 -0
  144. package/labs/gb/styles/icon/md-icon.js +24 -0
  145. package/labs/gb/styles/icon/md-icon.js.map +1 -0
  146. package/labs/gb/styles/icon/md-icon.scss +2 -1
  147. package/labs/gb/styles/m3.css +5 -2
  148. package/labs/gb/styles/m3.css.map +1 -1
  149. package/labs/gb/styles/m3.cssresult.js +5 -2
  150. package/labs/gb/styles/m3.cssresult.js.map +1 -1
  151. package/labs/gb/styles/m3.scss +1 -0
  152. package/labs/gb/styles/space/md-space-tokens.css +4 -0
  153. package/labs/gb/styles/space/md-space-tokens.css.map +1 -0
  154. package/labs/gb/styles/space/md-space-tokens.cssresult.d.ts +3 -0
  155. package/labs/gb/styles/space/md-space-tokens.cssresult.js +14 -0
  156. package/labs/gb/styles/space/md-space-tokens.cssresult.js.map +1 -0
  157. package/labs/gb/styles/space/md-space-tokens.scss +28 -0
  158. package/labs/gb/styles/tailwind.css +4 -0
  159. package/labs/gb/styles/tailwind.css.map +1 -0
  160. package/labs/gb/styles/tailwind.cssresult.d.ts +3 -0
  161. package/labs/gb/styles/tailwind.cssresult.js +14 -0
  162. package/labs/gb/styles/tailwind.cssresult.js.map +1 -0
  163. package/labs/gb/styles/tailwind.scss +244 -0
  164. package/labs/gb/styles/typography/internal/_typography-tokens.scss +85 -16
  165. package/labs/gb/styles/typography/md-typography-tokens.css +1 -1
  166. package/labs/gb/styles/typography/md-typography-tokens.css.map +1 -1
  167. package/labs/gb/styles/typography/md-typography-tokens.cssresult.js +1 -1
  168. package/labs/gb/styles/typography/md-typography-tokens.cssresult.js.map +1 -1
  169. package/list/internal/listitem/list-item.d.ts +2 -0
  170. package/menu/internal/menuitem/menu-item.d.ts +2 -0
  171. package/package.json +7 -3
  172. package/radio/internal/radio.d.ts +0 -2
  173. package/radio/internal/radio.js.map +1 -1
  174. package/select/internal/select.d.ts +2 -2
  175. package/select/internal/select.js.map +1 -1
  176. package/select/internal/selectoption/select-option.d.ts +2 -0
  177. package/slider/internal/slider.d.ts +0 -2
  178. package/slider/internal/slider.js.map +1 -1
  179. package/switch/internal/_switch.scss +1 -0
  180. package/switch/internal/switch-styles.css +1 -1
  181. package/switch/internal/switch-styles.css.map +1 -1
  182. package/switch/internal/switch-styles.cssresult.js +1 -1
  183. package/switch/internal/switch-styles.cssresult.js.map +1 -1
  184. package/switch/internal/switch.d.ts +0 -2
  185. package/switch/internal/switch.js.map +1 -1
@@ -13,10 +13,6 @@ declare const buttonBaseClass: import("../../labs/behaviors/mixin.js").MixinRetu
13
13
  export declare abstract class Button extends buttonBaseClass {
14
14
  /** @nocollapse */
15
15
  static shadowRootOptions: ShadowRootInit;
16
- /**
17
- * Whether or not the button is disabled.
18
- */
19
- disabled: boolean;
20
16
  /**
21
17
  * Whether or not the button is "soft-disabled" (disabled but still
22
18
  * focusable).
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n /**\n * Whether or not the button is disabled.\n */\n declare disabled: boolean; // for jsdoc until lit-analyzer is updated\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n *\n * Use this when a button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n * If not specified, the browser will determine a filename.\n * This is only applicable when the button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n trailingIcon = false;\n\n /**\n * Whether to display the icon or not.\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n false;\n\n @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', this.handleClick.bind(this));\n }\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n protected override render() {\n const isRippleDisabled = this.disabled || this.softDisabled;\n const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n // the same ID for different elements, so we change the ID instead.\n const buttonId = this.href ? 'link' : 'button';\n return html`\n ${this.renderElevationOrOutline?.()}\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n <md-ripple\n part=\"ripple\"\n for=${buttonId}\n ?disabled=\"${isRippleDisabled}\"></md-ripple>\n ${buttonOrLink}\n `;\n }\n\n // Buttons can override this to add elevation or an outline. Use this and\n // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n // or `<div class=\"outline\">` (for outlined buttons).\n // Text buttons that have neither do not need to implement this.\n protected renderElevationOrOutline?(): unknown;\n\n private renderButton() {\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n return html`<button\n id=\"button\"\n class=\"button\"\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\">\n ${this.renderContent()}\n </button>`;\n }\n\n private renderLink() {\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n return html`<a\n id=\"link\"\n class=\"button\"\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=\"${this.disabled && !this.softDisabled ? -1 : nothing}\"\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n >${this.renderContent()}\n </a>`;\n }\n\n private renderContent() {\n const icon = html`<slot\n name=\"icon\"\n @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n return html`\n <span class=\"touch\"></span>\n ${this.trailingIcon ? nothing : icon}\n <span class=\"label\"><slot></slot></span>\n ${this.trailingIcon ? icon : nothing}\n `;\n }\n\n private handleClick(event: MouseEvent) {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href)) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.buttonElement);\n }\n\n private handleSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n"]}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n *\n * Use this when a button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n * If not specified, the browser will determine a filename.\n * This is only applicable when the button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n trailingIcon = false;\n\n /**\n * Whether to display the icon or not.\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n false;\n\n @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', this.handleClick.bind(this));\n }\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n protected override render() {\n const isRippleDisabled = this.disabled || this.softDisabled;\n const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n // the same ID for different elements, so we change the ID instead.\n const buttonId = this.href ? 'link' : 'button';\n return html`\n ${this.renderElevationOrOutline?.()}\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n <md-ripple\n part=\"ripple\"\n for=${buttonId}\n ?disabled=\"${isRippleDisabled}\"></md-ripple>\n ${buttonOrLink}\n `;\n }\n\n // Buttons can override this to add elevation or an outline. Use this and\n // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n // or `<div class=\"outline\">` (for outlined buttons).\n // Text buttons that have neither do not need to implement this.\n protected renderElevationOrOutline?(): unknown;\n\n private renderButton() {\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n return html`<button\n id=\"button\"\n class=\"button\"\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\">\n ${this.renderContent()}\n </button>`;\n }\n\n private renderLink() {\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n return html`<a\n id=\"link\"\n class=\"button\"\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=\"${this.disabled && !this.softDisabled ? -1 : nothing}\"\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n >${this.renderContent()}\n </a>`;\n }\n\n private renderContent() {\n const icon = html`<slot\n name=\"icon\"\n @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n return html`\n <span class=\"touch\"></span>\n ${this.trailingIcon ? nothing : icon}\n <span class=\"label\"><slot></slot></span>\n ${this.trailingIcon ? icon : nothing}\n `;\n }\n\n private handleClick(event: MouseEvent) {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href)) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.buttonElement);\n }\n\n private handleSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n"]}
@@ -25,6 +25,8 @@ export declare class Checkbox extends checkboxBaseClass {
25
25
  /** @nocollapse */
26
26
  static shadowRootOptions: {
27
27
  delegatesFocus: boolean;
28
+ clonable?: boolean;
29
+ customElementRegistry?: CustomElementRegistry;
28
30
  mode: ShadowRootMode;
29
31
  serializable?: boolean;
30
32
  slotAssignment?: SlotAssignmentMode;
@@ -61,8 +63,6 @@ export declare class Checkbox extends checkboxBaseClass {
61
63
  protected render(): import("lit-html").TemplateResult<1>;
62
64
  private handleInput;
63
65
  private handleChange;
64
- disabled: boolean;
65
- name: string;
66
66
  [getFormValue](): string;
67
67
  [getFormState](): string;
68
68
  formResetCallback(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n @state() private prevChecked = false;\n @state() private prevDisabled = false;\n @state() private prevIndeterminate = false;\n @query('input') private readonly input!: HTMLInputElement | null;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event) || !this.input) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input);\n });\n }\n }\n\n protected override update(changed: PropertyValues<Checkbox>) {\n if (\n changed.has('checked') ||\n changed.has('disabled') ||\n changed.has('indeterminate')\n ) {\n this.prevChecked = changed.get('checked') ?? this.checked;\n this.prevDisabled = changed.get('disabled') ?? this.disabled;\n this.prevIndeterminate =\n changed.get('indeterminate') ?? this.indeterminate;\n }\n\n super.update(changed);\n }\n\n protected override render() {\n const prevNone = !this.prevChecked && !this.prevIndeterminate;\n const prevChecked = this.prevChecked && !this.prevIndeterminate;\n const prevIndeterminate = this.prevIndeterminate;\n const isChecked = this.checked && !this.indeterminate;\n const isIndeterminate = this.indeterminate;\n\n const containerClasses = classMap({\n 'disabled': this.disabled,\n 'selected': isChecked || isIndeterminate,\n 'unselected': !isChecked && !isIndeterminate,\n 'checked': isChecked,\n 'indeterminate': isIndeterminate,\n 'prev-unselected': prevNone,\n 'prev-checked': prevChecked,\n 'prev-indeterminate': prevIndeterminate,\n 'prev-disabled': this.prevDisabled,\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n // Note: <input> needs to be rendered before the <svg> for\n // form.reportValidity() to work in Chrome.\n return html`\n <div class=\"container ${containerClasses}\">\n <input\n type=\"checkbox\"\n id=\"input\"\n aria-checked=${isIndeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @input=${this.handleInput}\n @change=${this.handleChange} />\n\n <div class=\"outline\"></div>\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <rect class=\"mark short\" />\n <rect class=\"mark long\" />\n </svg>\n </div>\n `;\n }\n\n private handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n private handleChange(event: Event) {\n // <input> 'change' event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n // Writable mixin properties for lit-html binding, needed for lit-analyzer\n declare disabled: boolean;\n declare name: string;\n\n override [getFormValue]() {\n if (!this.checked || this.indeterminate) {\n return null;\n }\n\n return this.value;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => this);\n }\n\n override [getValidityAnchor]() {\n return this.input;\n }\n}\n"]}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n @state() private prevChecked = false;\n @state() private prevDisabled = false;\n @state() private prevIndeterminate = false;\n @query('input') private readonly input!: HTMLInputElement | null;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event) || !this.input) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input);\n });\n }\n }\n\n protected override update(changed: PropertyValues<Checkbox>) {\n if (\n changed.has('checked') ||\n changed.has('disabled') ||\n changed.has('indeterminate')\n ) {\n this.prevChecked = changed.get('checked') ?? this.checked;\n this.prevDisabled = changed.get('disabled') ?? this.disabled;\n this.prevIndeterminate =\n changed.get('indeterminate') ?? this.indeterminate;\n }\n\n super.update(changed);\n }\n\n protected override render() {\n const prevNone = !this.prevChecked && !this.prevIndeterminate;\n const prevChecked = this.prevChecked && !this.prevIndeterminate;\n const prevIndeterminate = this.prevIndeterminate;\n const isChecked = this.checked && !this.indeterminate;\n const isIndeterminate = this.indeterminate;\n\n const containerClasses = classMap({\n 'disabled': this.disabled,\n 'selected': isChecked || isIndeterminate,\n 'unselected': !isChecked && !isIndeterminate,\n 'checked': isChecked,\n 'indeterminate': isIndeterminate,\n 'prev-unselected': prevNone,\n 'prev-checked': prevChecked,\n 'prev-indeterminate': prevIndeterminate,\n 'prev-disabled': this.prevDisabled,\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n // Note: <input> needs to be rendered before the <svg> for\n // form.reportValidity() to work in Chrome.\n return html`\n <div class=\"container ${containerClasses}\">\n <input\n type=\"checkbox\"\n id=\"input\"\n aria-checked=${isIndeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @input=${this.handleInput}\n @change=${this.handleChange} />\n\n <div class=\"outline\"></div>\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <rect class=\"mark short\" />\n <rect class=\"mark long\" />\n </svg>\n </div>\n `;\n }\n\n private handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n private handleChange(event: Event) {\n // <input> 'change' event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n override [getFormValue]() {\n if (!this.checked || this.indeterminate) {\n return null;\n }\n\n return this.value;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => this);\n }\n\n override [getValidityAnchor]() {\n return this.input;\n }\n}\n"]}
@@ -17,6 +17,8 @@ export declare abstract class Chip extends chipBaseClass {
17
17
  /** @nocollapse */
18
18
  static shadowRootOptions: {
19
19
  delegatesFocus: boolean;
20
+ clonable?: boolean;
21
+ customElementRegistry?: CustomElementRegistry;
20
22
  mode: ShadowRootMode;
21
23
  serializable?: boolean;
22
24
  slotAssignment?: SlotAssignmentMode;
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { LitElement } from 'lit';
7
7
  /**
8
- * TODO(b/265336902): add docs
8
+ * An icon element.
9
9
  */
10
10
  export declare class Icon extends LitElement {
11
11
  protected render(): import("lit-html").TemplateResult<1>;
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { html, LitElement } from 'lit';
7
7
  /**
8
- * TODO(b/265336902): add docs
8
+ * An icon element.
9
9
  */
10
10
  export class Icon extends LitElement {
11
11
  render() {
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IACf,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QACpD,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;YAC3B,wEAAwE;YACxE,8BAA8B;YAC9B,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACpC,OAAO;QACT,CAAC;QAED,wEAAwE;QACxE,4BAA4B;QAC5B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * TODO(b/265336902): add docs\n */\nexport class Icon extends LitElement {\n protected override render() {\n return html`<slot></slot>`;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n const ariaHidden = this.getAttribute('aria-hidden');\n if (ariaHidden === 'false') {\n // Allow the user to set `aria-hidden=\"false\"` to create an icon that is\n // announced by screenreaders.\n this.removeAttribute('aria-hidden');\n return;\n }\n\n // Needed for VoiceOver, which will create a \"group\" if the element is a\n // sibling to other content.\n this.setAttribute('aria-hidden', 'true');\n }\n}\n"]}
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IACf,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QACpD,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;YAC3B,wEAAwE;YACxE,8BAA8B;YAC9B,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACpC,OAAO;QACT,CAAC;QAED,wEAAwE;QACxE,4BAA4B;QAC5B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * An icon element.\n */\nexport class Icon extends LitElement {\n protected override render() {\n return html`<slot></slot>`;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n const ariaHidden = this.getAttribute('aria-hidden');\n if (ariaHidden === 'false') {\n // Allow the user to set `aria-hidden=\"false\"` to create an icon that is\n // announced by screenreaders.\n this.removeAttribute('aria-hidden');\n return;\n }\n\n // Needed for VoiceOver, which will create a \"group\" if the element is a\n // sibling to other content.\n this.setAttribute('aria-hidden', 'true');\n }\n}\n"]}
@@ -18,10 +18,6 @@ declare const iconButtonBaseClass: import("../../labs/behaviors/mixin.js").Mixin
18
18
  export declare class IconButton extends iconButtonBaseClass {
19
19
  /** @nocollapse */
20
20
  static shadowRootOptions: ShadowRootInit;
21
- /**
22
- * Disables the icon button and makes it non-interactive.
23
- */
24
- disabled: boolean;
25
21
  /**
26
22
  * "Soft-disables" the icon button (disabled but still focusable).
27
23
  *
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A button for rendering icons.\n *\n * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles\n * --composed\n * @fires change {Event} Dispatched when a toggle button toggles --bubbles\n */\nexport class IconButton extends iconButtonBaseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n declare disabled: boolean; // for jsdoc until lit-analyzer is updated\n\n /**\n * \"Soft-disables\" the icon button (disabled but still focusable).\n *\n * Use this when an icon button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean, attribute: 'flip-icon-in-rtl'})\n flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n * If not specified, the browser will determine a filename.\n * This is only applicable when the icon button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target: LinkTarget | '' = '';\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({type: Boolean}) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the selected icon, or the default icon If no `slot=\"selected\"`\n * icon is provided.\n */\n @property({type: Boolean, reflect: true}) selected = false;\n\n @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n constructor() {\n super();\n if (isServer) return;\n setupDispatchHooks(this, 'click');\n this.addEventListener('click', (event) => {\n // If the button is soft-disabled or a disabled link, we need to\n // explicitly prevent the click from propagating to other event listeners\n // as well as prevent the default action. This is because the underlying\n // `<button>` or `<a>` element is not actually `:disabled`.\n if (this.softDisabled || (this.disabled && this.href)) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n // Save current selected state to toggle, since an external event listener\n // may also change the selected state on click.\n const wasSelected = this.selected;\n afterDispatch(event, () => {\n if (!this.toggle || this.disabled || event.defaultPrevented) {\n return;\n }\n\n this.selected = !wasSelected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n });\n });\n }\n\n protected override willUpdate() {\n // Link buttons cannot be disabled or soft-disabled.\n if (this.href) {\n this.disabled = false;\n this.softDisabled = false;\n }\n }\n\n protected override render() {\n const tag = this.href ? literal`div` : literal`button`;\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;\n const ariaPressedValue = !this.toggle ? nothing : this.selected;\n let ariaLabelValue: string | null | typeof nothing = nothing;\n if (!this.href) {\n ariaLabelValue =\n hasToggledAriaLabel && this.selected\n ? this.ariaLabelSelected\n : ariaLabel;\n }\n return staticHtml`<${tag}\n class=\"icon-button ${classMap(this.getRenderClasses())}\"\n id=\"button\"\n aria-label=\"${ariaLabelValue || nothing}\"\n aria-haspopup=\"${(!this.href && ariaHasPopup) || nothing}\"\n aria-expanded=\"${(!this.href && ariaExpanded) || nothing}\"\n aria-pressed=\"${ariaPressedValue}\"\n aria-disabled=${(!this.href && this.softDisabled) || nothing}\n ?disabled=\"${!this.href && this.disabled}\">\n ${this.renderFocusRing()}\n ${this.renderRipple()}\n ${!this.selected ? this.renderIcon() : nothing}\n ${this.selected ? this.renderSelectedIcon() : nothing}\n ${this.href ? this.renderLink() : this.renderTouchTarget()}\n </${tag}>`;\n }\n\n private renderLink() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <a\n class=\"link\"\n id=\"link\"\n href=\"${this.href}\"\n download=\"${this.download || nothing}\"\n target=\"${this.target || nothing}\"\n aria-label=\"${ariaLabel || nothing}\">\n ${this.renderTouchTarget()}\n </a>\n `;\n }\n\n protected getRenderClasses() {\n return {\n 'flip-icon': this.flipIcon,\n 'selected': this.toggle && this.selected,\n };\n }\n\n private renderIcon() {\n return html`<span class=\"icon\"><slot></slot></span>`;\n }\n\n private renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<span class=\"icon icon--selected\"\n ><slot name=\"selected\"><slot></slot></slot\n ></span>`;\n }\n\n private renderTouchTarget() {\n return html`<span class=\"touch\"></span>`;\n }\n\n private renderFocusRing() {\n // TODO(b/310046938): use the same id for both elements\n return html`<md-focus-ring\n part=\"focus-ring\"\n for=${this.href ? 'link' : 'button'}></md-focus-ring>`;\n }\n\n private renderRipple() {\n const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);\n // TODO(b/310046938): use the same id for both elements\n return html`<md-ripple\n for=${this.href ? 'link' : nothing}\n ?disabled=\"${isRippleDisabled}\"></md-ripple>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n}\n"]}
1
+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A button for rendering icons.\n *\n * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles\n * --composed\n * @fires change {Event} Dispatched when a toggle button toggles --bubbles\n */\nexport class IconButton extends iconButtonBaseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n /**\n * \"Soft-disables\" the icon button (disabled but still focusable).\n *\n * Use this when an icon button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean, attribute: 'flip-icon-in-rtl'})\n flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n * If not specified, the browser will determine a filename.\n * This is only applicable when the icon button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target: LinkTarget | '' = '';\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({type: Boolean}) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the selected icon, or the default icon If no `slot=\"selected\"`\n * icon is provided.\n */\n @property({type: Boolean, reflect: true}) selected = false;\n\n @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n constructor() {\n super();\n if (isServer) return;\n setupDispatchHooks(this, 'click');\n this.addEventListener('click', (event) => {\n // If the button is soft-disabled or a disabled link, we need to\n // explicitly prevent the click from propagating to other event listeners\n // as well as prevent the default action. This is because the underlying\n // `<button>` or `<a>` element is not actually `:disabled`.\n if (this.softDisabled || (this.disabled && this.href)) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n // Save current selected state to toggle, since an external event listener\n // may also change the selected state on click.\n const wasSelected = this.selected;\n afterDispatch(event, () => {\n if (!this.toggle || this.disabled || event.defaultPrevented) {\n return;\n }\n\n this.selected = !wasSelected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n });\n });\n }\n\n protected override willUpdate() {\n // Link buttons cannot be disabled or soft-disabled.\n if (this.href) {\n this.disabled = false;\n this.softDisabled = false;\n }\n }\n\n protected override render() {\n const tag = this.href ? literal`div` : literal`button`;\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;\n const ariaPressedValue = !this.toggle ? nothing : this.selected;\n let ariaLabelValue: string | null | typeof nothing = nothing;\n if (!this.href) {\n ariaLabelValue =\n hasToggledAriaLabel && this.selected\n ? this.ariaLabelSelected\n : ariaLabel;\n }\n return staticHtml`<${tag}\n class=\"icon-button ${classMap(this.getRenderClasses())}\"\n id=\"button\"\n aria-label=\"${ariaLabelValue || nothing}\"\n aria-haspopup=\"${(!this.href && ariaHasPopup) || nothing}\"\n aria-expanded=\"${(!this.href && ariaExpanded) || nothing}\"\n aria-pressed=\"${ariaPressedValue}\"\n aria-disabled=${(!this.href && this.softDisabled) || nothing}\n ?disabled=\"${!this.href && this.disabled}\">\n ${this.renderFocusRing()}\n ${this.renderRipple()}\n ${!this.selected ? this.renderIcon() : nothing}\n ${this.selected ? this.renderSelectedIcon() : nothing}\n ${this.href ? this.renderLink() : this.renderTouchTarget()}\n </${tag}>`;\n }\n\n private renderLink() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <a\n class=\"link\"\n id=\"link\"\n href=\"${this.href}\"\n download=\"${this.download || nothing}\"\n target=\"${this.target || nothing}\"\n aria-label=\"${ariaLabel || nothing}\">\n ${this.renderTouchTarget()}\n </a>\n `;\n }\n\n protected getRenderClasses() {\n return {\n 'flip-icon': this.flipIcon,\n 'selected': this.toggle && this.selected,\n };\n }\n\n private renderIcon() {\n return html`<span class=\"icon\"><slot></slot></span>`;\n }\n\n private renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<span class=\"icon icon--selected\"\n ><slot name=\"selected\"><slot></slot></slot\n ></span>`;\n }\n\n private renderTouchTarget() {\n return html`<span class=\"touch\"></span>`;\n }\n\n private renderFocusRing() {\n // TODO(b/310046938): use the same id for both elements\n return html`<md-focus-ring\n part=\"focus-ring\"\n for=${this.href ? 'link' : 'button'}></md-focus-ring>`;\n }\n\n private renderRipple() {\n const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);\n // TODO(b/310046938): use the same id for both elements\n return html`<md-ripple\n for=${this.href ? 'link' : nothing}\n ?disabled=\"${isRippleDisabled}\"></md-ripple>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n}\n"]}
@@ -18,7 +18,7 @@ export type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;
18
18
  /**
19
19
  * Accessibility Object Model aria attributes.
20
20
  */
21
- export declare const ARIA_ATTRIBUTES: ("role" | "aria-hidden" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-current" | "aria-description" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
21
+ export declare const ARIA_ATTRIBUTES: ("role" | "aria-hidden" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
22
22
  /**
23
23
  * Checks if an attribute is one of the AOM aria attributes.
24
24
  *
@@ -67,7 +67,7 @@ export function afterDispatch(event, callback) {
67
67
  if (!hooks) {
68
68
  throw new Error(`'${event.type}' event needs setupDispatchHooks().`);
69
69
  }
70
- hooks.addEventListener('after', callback);
70
+ hooks.addEventListener('after', callback, { once: true });
71
71
  }
72
72
  /**
73
73
  * A lookup map of elements and event types that have a dispatch hook listener
@@ -106,48 +106,44 @@ export function setupDispatchHooks(element, ...eventTypes) {
106
106
  }
107
107
  for (const eventType of eventTypes) {
108
108
  // Don't register multiple dispatch hook listeners. A second registration
109
- // would lead to the second listener re-dispatching a re-dispatched event,
110
- // which can cause an infinite loop inside the other one.
109
+ // would lead to the second listener calling `afterDispatch()` hooks twice.
111
110
  if (typesAlreadySetUp.has(eventType)) {
112
111
  continue;
113
112
  }
114
- // When we re-dispatch the event, it's going to immediately trigger this
115
- // listener again. Use a flag to ignore it.
116
- let isRedispatching = false;
117
113
  element.addEventListener(eventType, (event) => {
118
- if (isRedispatching) {
119
- return;
120
- }
121
- // Do not let the event propagate to any other listener (not just
122
- // bubbling listeners with `stopPropagation()`).
123
- event.stopImmediatePropagation();
124
- // Make a copy.
125
- const eventCopy = Reflect.construct(event.constructor, [
126
- event.type,
127
- event,
128
- ]);
129
114
  // Add hooks onto the event.
130
115
  const hooks = new EventTarget();
131
- eventCopy[dispatchHooks] = hooks;
132
- // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
133
- // need to add the hooks to the copy before it's dispatched.
134
- isRedispatching = true;
135
- const composedPathIncludesAnchor = event
136
- .composedPath()
137
- .some((el) => el?.matches?.('a'));
138
- if (event.type === 'click' && composedPathIncludesAnchor) {
139
- // For legacy reasons, synthetic click events dispatching on
140
- // HTMLAnchorElement will trigger link behavior. Prevent this since
141
- // we will dispatch a copy of the same click event.
142
- event.preventDefault();
116
+ event[dispatchHooks] = hooks;
117
+ const cleanupLastNodeListener = new AbortController();
118
+ const callAfterDispatch = () => {
119
+ cleanupLastNodeListener.abort();
120
+ hooks.dispatchEvent(new Event('after'));
121
+ };
122
+ const patchStopPropagation = (superMethod) => {
123
+ return function () {
124
+ superMethod.call(this);
125
+ // Synchronously call afterDispatch() hooks when interrupted.
126
+ callAfterDispatch();
127
+ };
128
+ };
129
+ event.stopPropagation = patchStopPropagation(event.stopPropagation);
130
+ event.stopImmediatePropagation = patchStopPropagation(event.stopImmediatePropagation);
131
+ // Add an event listener to detect the end of the event's propagation.
132
+ const composedPath = event.composedPath();
133
+ let lastNodeForEvent;
134
+ if (event.composed && event.bubbles) {
135
+ lastNodeForEvent = composedPath[composedPath.length - 1];
136
+ }
137
+ else if (!event.bubbles) {
138
+ lastNodeForEvent = composedPath[0];
143
139
  }
144
- const dispatched = event.composedPath()[0].dispatchEvent(eventCopy);
145
- isRedispatching = false;
146
- if (!dispatched) {
147
- event.preventDefault();
140
+ else {
141
+ lastNodeForEvent = composedPath[0].getRootNode();
148
142
  }
149
- // Synchronously call afterDispatch() hooks.
150
- hooks.dispatchEvent(new Event('after'));
143
+ lastNodeForEvent.addEventListener(eventType, () => {
144
+ // Synchronously call afterDispatch() hooks.
145
+ callAfterDispatch();
146
+ }, { once: true, signal: cleanupLastNodeListener.signal });
151
147
  }, {
152
148
  // Ensure this listener runs before other listeners.
153
149
  // `setupDispatchHooks()` should be called in constructors to also
@@ -1 +1 @@
1
- {"version":3,"file":"dispatch-hooks.js","sourceRoot":"","sources":["dispatch-hooks.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A symbol used to access dispatch hooks on an event.\n */\nconst dispatchHooks = Symbol('dispatchHooks');\n\n/**\n * An `Event` with additional symbols for dispatch hooks.\n */\ninterface EventWithDispatchHooks extends Event {\n [dispatchHooks]: EventTarget;\n}\n\n/**\n * Add a hook for an event that is called after the event is dispatched and\n * propagates to other event listeners.\n *\n * This is useful for behaviors that need to check if an event is canceled.\n *\n * The callback is invoked synchronously, which allows for better integration\n * with synchronous platform APIs (like `<form>` or `<label>` clicking).\n *\n * Note: `setupDispatchHooks()` must be called on the element before adding any\n * other event listeners. Call it in the constructor of an element or\n * controller.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n * constructor() {\n * super();\n * setupDispatchHooks(this, 'click');\n * this.addEventListener('click', event => {\n * afterDispatch(event, () => {\n * if (event.defaultPrevented) {\n * return\n * }\n *\n * // ... perform logic\n * });\n * });\n * }\n * }\n * ```\n *\n * @example\n * ```ts\n * class MyController implements ReactiveController {\n * constructor(host: ReactiveElement) {\n * // setupDispatchHooks() may be called multiple times for the same\n * // element and events, making it safe for multiple controllers to use it.\n * setupDispatchHooks(host, 'click');\n * host.addEventListener('click', event => {\n * afterDispatch(event, () => {\n * if (event.defaultPrevented) {\n * return;\n * }\n *\n * // ... perform logic\n * });\n * });\n * }\n * }\n * ```\n *\n * @param event The event to add a hook to.\n * @param callback A hook that is called after the event finishes dispatching.\n */\nexport function afterDispatch(event: Event, callback: () => void) {\n const hooks = (event as EventWithDispatchHooks)[dispatchHooks];\n if (!hooks) {\n throw new Error(`'${event.type}' event needs setupDispatchHooks().`);\n }\n\n hooks.addEventListener('after', callback);\n}\n\n/**\n * A lookup map of elements and event types that have a dispatch hook listener\n * set up. Used to ensure we don't set up multiple hook listeners on the same\n * element for the same event.\n */\nconst ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap<Element, Set<string>>();\n\n/**\n * Sets up an element to add dispatch hooks to given event types. This must be\n * called before adding any event listeners that need to use dispatch hooks\n * like `afterDispatch()`.\n *\n * This function is safe to call multiple times with the same element or event\n * types. Call it in the constructor of elements, mixins, and controllers to\n * ensure it is set up before external listeners.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n * constructor() {\n * super();\n * setupDispatchHooks(this, 'click');\n * this.addEventListener('click', this.listenerUsingAfterDispatch);\n * }\n * }\n * ```\n *\n * @param element The element to set up event dispatch hooks for.\n * @param eventTypes The event types to add dispatch hooks to.\n */\nexport function setupDispatchHooks(\n element: Element,\n ...eventTypes: [string, ...string[]]\n) {\n let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);\n if (!typesAlreadySetUp) {\n typesAlreadySetUp = new Set();\n ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);\n }\n\n for (const eventType of eventTypes) {\n // Don't register multiple dispatch hook listeners. A second registration\n // would lead to the second listener re-dispatching a re-dispatched event,\n // which can cause an infinite loop inside the other one.\n if (typesAlreadySetUp.has(eventType)) {\n continue;\n }\n\n // When we re-dispatch the event, it's going to immediately trigger this\n // listener again. Use a flag to ignore it.\n let isRedispatching = false;\n element.addEventListener(\n eventType,\n (event: Event) => {\n if (isRedispatching) {\n return;\n }\n\n // Do not let the event propagate to any other listener (not just\n // bubbling listeners with `stopPropagation()`).\n event.stopImmediatePropagation();\n // Make a copy.\n const eventCopy = Reflect.construct(event.constructor, [\n event.type,\n event,\n ]);\n\n // Add hooks onto the event.\n const hooks = new EventTarget();\n (eventCopy as EventWithDispatchHooks)[dispatchHooks] = hooks;\n\n // Re-dispatch the event. We can't reuse `redispatchEvent()` since we\n // need to add the hooks to the copy before it's dispatched.\n isRedispatching = true;\n const composedPathIncludesAnchor = event\n .composedPath()\n .some((el) => (el as Partial<HTMLElement>)?.matches?.('a'));\n if (event.type === 'click' && composedPathIncludesAnchor) {\n // For legacy reasons, synthetic click events dispatching on\n // HTMLAnchorElement will trigger link behavior. Prevent this since\n // we will dispatch a copy of the same click event.\n event.preventDefault();\n }\n const dispatched = event.composedPath()[0].dispatchEvent(eventCopy);\n isRedispatching = false;\n if (!dispatched) {\n event.preventDefault();\n }\n\n // Synchronously call afterDispatch() hooks.\n hooks.dispatchEvent(new Event('after'));\n },\n {\n // Ensure this listener runs before other listeners.\n // `setupDispatchHooks()` should be called in constructors to also\n // ensure they run before any other externally-added capture listeners.\n capture: true,\n },\n );\n\n typesAlreadySetUp.add(eventType);\n }\n}\n"]}
1
+ {"version":3,"file":"dispatch-hooks.js","sourceRoot":"","sources":["dispatch-hooks.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A symbol used to access dispatch hooks on an event.\n */\nconst dispatchHooks = Symbol('dispatchHooks');\n\n/**\n * An `Event` with additional symbols for dispatch hooks.\n */\ninterface EventWithDispatchHooks extends Event {\n [dispatchHooks]: EventTarget;\n}\n\n/**\n * Add a hook for an event that is called after the event is dispatched and\n * propagates to other event listeners.\n *\n * This is useful for behaviors that need to check if an event is canceled.\n *\n * The callback is invoked synchronously, which allows for better integration\n * with synchronous platform APIs (like `<form>` or `<label>` clicking).\n *\n * Note: `setupDispatchHooks()` must be called on the element before adding any\n * other event listeners. Call it in the constructor of an element or\n * controller.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n * constructor() {\n * super();\n * setupDispatchHooks(this, 'click');\n * this.addEventListener('click', event => {\n * afterDispatch(event, () => {\n * if (event.defaultPrevented) {\n * return\n * }\n *\n * // ... perform logic\n * });\n * });\n * }\n * }\n * ```\n *\n * @example\n * ```ts\n * class MyController implements ReactiveController {\n * constructor(host: ReactiveElement) {\n * // setupDispatchHooks() may be called multiple times for the same\n * // element and events, making it safe for multiple controllers to use it.\n * setupDispatchHooks(host, 'click');\n * host.addEventListener('click', event => {\n * afterDispatch(event, () => {\n * if (event.defaultPrevented) {\n * return;\n * }\n *\n * // ... perform logic\n * });\n * });\n * }\n * }\n * ```\n *\n * @param event The event to add a hook to.\n * @param callback A hook that is called after the event finishes dispatching.\n */\nexport function afterDispatch(event: Event, callback: () => void) {\n const hooks = (event as EventWithDispatchHooks)[dispatchHooks];\n if (!hooks) {\n throw new Error(`'${event.type}' event needs setupDispatchHooks().`);\n }\n\n hooks.addEventListener('after', callback, {once: true});\n}\n\n/**\n * A lookup map of elements and event types that have a dispatch hook listener\n * set up. Used to ensure we don't set up multiple hook listeners on the same\n * element for the same event.\n */\nconst ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap<Element, Set<string>>();\n\n/**\n * Sets up an element to add dispatch hooks to given event types. This must be\n * called before adding any event listeners that need to use dispatch hooks\n * like `afterDispatch()`.\n *\n * This function is safe to call multiple times with the same element or event\n * types. Call it in the constructor of elements, mixins, and controllers to\n * ensure it is set up before external listeners.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n * constructor() {\n * super();\n * setupDispatchHooks(this, 'click');\n * this.addEventListener('click', this.listenerUsingAfterDispatch);\n * }\n * }\n * ```\n *\n * @param element The element to set up event dispatch hooks for.\n * @param eventTypes The event types to add dispatch hooks to.\n */\nexport function setupDispatchHooks(\n element: Element,\n ...eventTypes: [string, ...string[]]\n) {\n let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);\n if (!typesAlreadySetUp) {\n typesAlreadySetUp = new Set();\n ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);\n }\n\n for (const eventType of eventTypes) {\n // Don't register multiple dispatch hook listeners. A second registration\n // would lead to the second listener calling `afterDispatch()` hooks twice.\n if (typesAlreadySetUp.has(eventType)) {\n continue;\n }\n\n element.addEventListener(\n eventType,\n (event: Event) => {\n // Add hooks onto the event.\n const hooks = new EventTarget();\n (event as EventWithDispatchHooks)[dispatchHooks] = hooks;\n\n const cleanupLastNodeListener = new AbortController();\n const callAfterDispatch = () => {\n cleanupLastNodeListener.abort();\n hooks.dispatchEvent(new Event('after'));\n };\n\n const patchStopPropagation = (\n superMethod: Event['stopPropagation'],\n ) => {\n return function (this: Event) {\n superMethod.call(this);\n // Synchronously call afterDispatch() hooks when interrupted.\n callAfterDispatch();\n };\n };\n\n event.stopPropagation = patchStopPropagation(event.stopPropagation);\n event.stopImmediatePropagation = patchStopPropagation(\n event.stopImmediatePropagation,\n );\n\n // Add an event listener to detect the end of the event's propagation.\n const composedPath = event.composedPath();\n let lastNodeForEvent: EventTarget;\n if (event.composed && event.bubbles) {\n lastNodeForEvent = composedPath[composedPath.length - 1];\n } else if (!event.bubbles) {\n lastNodeForEvent = composedPath[0];\n } else {\n lastNodeForEvent = (composedPath[0] as Element).getRootNode();\n }\n\n lastNodeForEvent.addEventListener(\n eventType,\n () => {\n // Synchronously call afterDispatch() hooks.\n callAfterDispatch();\n },\n {once: true, signal: cleanupLastNodeListener.signal},\n );\n },\n {\n // Ensure this listener runs before other listeners.\n // `setupDispatchHooks()` should be called in constructors to also\n // ensure they run before any other externally-added capture listeners.\n capture: true,\n },\n );\n\n typesAlreadySetUp.add(eventType);\n }\n}\n"]}
@@ -8,17 +8,6 @@ import { WithElementInternals } from './element-internals.js';
8
8
  import { MixinBase, MixinReturn } from './mixin.js';
9
9
  /**
10
10
  * A form-associated element.
11
- *
12
- * IMPORTANT: Requires declares for lit-analyzer
13
- * @example
14
- * ```ts
15
- * const base = mixinFormAssociated(mixinElementInternals(LitElement));
16
- * class MyControl extends base {
17
- * // Writable mixin properties for lit-html binding, needed for lit-analyzer
18
- * declare disabled: boolean;
19
- * declare name: string;
20
- * }
21
- * ```
22
11
  */
23
12
  export interface FormAssociated {
24
13
  /**
@@ -168,17 +157,6 @@ export declare const getFormState: unique symbol;
168
157
  * }
169
158
  * ```
170
159
  *
171
- * IMPORTANT: Requires declares for lit-analyzer
172
- * @example
173
- * ```ts
174
- * const base = mixinFormAssociated(mixinElementInternals(LitElement));
175
- * class MyControl extends base {
176
- * // Writable mixin properties for lit-html binding, needed for lit-analyzer
177
- * declare disabled: boolean;
178
- * declare name: string;
179
- * }
180
- * ```
181
- *
182
160
  * @param base The class to mix functionality into. The base class must use
183
161
  * `mixinElementInternals()`.
184
162
  * @return The provided class with `FormAssociated` mixed in.
@@ -77,17 +77,6 @@ export const getFormState = Symbol('getFormState');
77
77
  * }
78
78
  * ```
79
79
  *
80
- * IMPORTANT: Requires declares for lit-analyzer
81
- * @example
82
- * ```ts
83
- * const base = mixinFormAssociated(mixinElementInternals(LitElement));
84
- * class MyControl extends base {
85
- * // Writable mixin properties for lit-html binding, needed for lit-analyzer
86
- * declare disabled: boolean;
87
- * declare name: string;
88
- * }
89
- * ```
90
- *
91
80
  * @param base The class to mix functionality into. The base class must use
92
81
  * `mixinElementInternals()`.
93
82
  * @return The provided class with `FormAssociated` mixed in.
@@ -1 +1 @@
1
- {"version":3,"file":"form-associated.js","sourceRoot":"","sources":["form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, PropertyDeclaration} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A form-associated element.\n *\n * IMPORTANT: Requires declares for lit-analyzer\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n * class MyControl extends base {\n * // Writable mixin properties for lit-html binding, needed for lit-analyzer\n * declare disabled: boolean;\n * declare name: string;\n * }\n * ```\n */\nexport interface FormAssociated {\n /**\n * The associated form element with which this element's value will submit.\n */\n readonly form: HTMLFormElement | null;\n\n /**\n * The labels this element is associated with.\n */\n readonly labels: NodeList;\n\n /**\n * The HTML name to use in form submission.\n */\n name: string;\n\n /**\n * Whether or not the element is disabled.\n */\n disabled: boolean;\n\n /**\n * Gets the current form value of a component. Defaults to the component's\n * `value` attribute.\n *\n * @return The current form value.\n */\n [getFormValue](): FormValue | null;\n\n /**\n * Gets the current form state of a component. Defaults to the component's\n * `[getFormValue]()` result.\n *\n * Use this when the state of an element is different from its value, such as\n * checkboxes (internal boolean state and a user string value).\n *\n * @return The current form state, defaults to the form value.\n */\n [getFormState](): FormValue | null;\n\n /**\n * A callback for when a form component should be disabled or enabled. This\n * can be called in a variety of situations, such as disabled `<fieldset>`s.\n *\n * @param disabled Whether or not the form control should be disabled.\n */\n formDisabledCallback(disabled: boolean): void;\n\n /**\n * An optional callback for when the form requests to reset its value.\n * Typically, the default value that is reset is represented in the attribute\n * of an element.\n *\n * This means the attribute used for the value should not update as the value\n * changes. For example, a checkbox should not change its default `checked`\n * attribute when selected. Ensure form values do not reflect.\n */\n formResetCallback?(): void;\n\n /**\n * An optional callback for when the form restores the state of a component.\n * For example, when a page is reloaded or forms are autofilled.\n *\n * @param state The state to restore, or null to reset the form control's\n * value.\n * @param reason The reason state was restored, either `'restore'` or\n * `'autocomplete'`.\n */\n formStateRestoreCallback?(\n state: FormRestoreState | null,\n reason: FormRestoreReason,\n ): void;\n\n /**\n * An optional callback for when the associated form changes.\n *\n * @param form The new associated form, or `null` if there is none.\n */\n formAssociatedCallback?(form: HTMLFormElement | null): void;\n}\n\n/**\n * The constructor of a `FormAssociated` element.\n */\nexport interface FormAssociatedConstructor {\n /**\n * Indicates that an element is participating in form association.\n */\n readonly formAssociated: true;\n}\n\n/**\n * A symbol property to retrieve the form value for an element.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A symbol property to retrieve the form state for an element.\n */\nexport const getFormState = Symbol('getFormState');\n\n/**\n * Mixes in form-associated behavior for a class. This allows an element to add\n * values to `<form>` elements.\n *\n * Implementing classes should provide a `[formValue]` to return the current\n * value of the element, as well as reset and restore callbacks.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyControl extends base {\n * \\@property()\n * value = '';\n *\n * override [getFormValue]() {\n * return this.value;\n * }\n *\n * override formResetCallback() {\n * const defaultValue = this.getAttribute('value');\n * this.value = defaultValue;\n * }\n *\n * override formStateRestoreCallback(state: string) {\n * this.value = state;\n * }\n * }\n * ```\n *\n * Elements may optionally provide a `[formState]` if their values do not\n * represent the state of the component.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyCheckbox extends base {\n * \\@property()\n * value = 'on';\n *\n * \\@property({type: Boolean})\n * checked = false;\n *\n * override [getFormValue]() {\n * return this.checked ? this.value : null;\n * }\n *\n * override [getFormState]() {\n * return String(this.checked);\n * }\n *\n * override formResetCallback() {\n * const defaultValue = this.hasAttribute('checked');\n * this.checked = defaultValue;\n * }\n *\n * override formStateRestoreCallback(state: string) {\n * this.checked = Boolean(state);\n * }\n * }\n * ```\n *\n * IMPORTANT: Requires declares for lit-analyzer\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n * class MyControl extends base {\n * // Writable mixin properties for lit-html binding, needed for lit-analyzer\n * declare disabled: boolean;\n * declare name: string;\n * }\n * ```\n *\n * @param base The class to mix functionality into. The base class must use\n * `mixinElementInternals()`.\n * @return The provided class with `FormAssociated` mixed in.\n */\nexport function mixinFormAssociated<\n T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T & FormAssociatedConstructor, FormAssociated> {\n abstract class FormAssociatedElement extends base implements FormAssociated {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n get form() {\n return this[internals].form;\n }\n\n get labels() {\n return this[internals].labels;\n }\n\n // Use @property for the `name` and `disabled` properties to add them to the\n // `observedAttributes` array and trigger `attributeChangedCallback()`.\n //\n // We don't use Lit's default getter/setter (`noAccessor: true`) because\n // the attributes need to be updated synchronously to work with synchronous\n // form APIs, and Lit updates attributes async by default.\n @property({noAccessor: true})\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n // Note: setting name to null or empty does not remove the attribute.\n this.setAttribute('name', name);\n // We don't need to call `requestUpdate()` since it's called synchronously\n // in `attributeChangedCallback()`.\n }\n\n @property({type: Boolean, noAccessor: true})\n get disabled() {\n return this.hasAttribute('disabled');\n }\n set disabled(disabled: boolean) {\n // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or\n // `undefined` sets the attribute to `false`.\n this.toggleAttribute('disabled', Boolean(disabled));\n // We don't need to call `requestUpdate()` since it's called synchronously\n // in `attributeChangedCallback()`.\n }\n\n override attributeChangedCallback(\n name: string,\n old: string | null,\n value: string | null,\n ) {\n // Manually `requestUpdate()` for `name` and `disabled` when their\n // attribute or property changes.\n // The properties update their attributes, so this callback is invoked\n // immediately when the properties are set. We call `requestUpdate()` here\n // instead of letting Lit set the properties from the attribute change.\n // That would cause the properties to re-set the attribute and invoke this\n // callback again in a loop. This leads to stale state when Lit tries to\n // determine if a property changed or not.\n if (name === 'name' || name === 'disabled') {\n // Disabled's value is only false if the attribute is missing and null.\n const oldValue = name === 'disabled' ? old !== null : old;\n // Trigger a lit update when the attribute changes.\n this.requestUpdate(name, oldValue);\n return;\n }\n\n super.attributeChangedCallback(name, old, value);\n }\n\n override requestUpdate(\n name?: PropertyKey,\n oldValue?: unknown,\n options?: PropertyDeclaration,\n ) {\n super.requestUpdate(name, oldValue, options);\n // If any properties change, update the form value, which may have changed\n // as well.\n // Update the form value synchronously in `requestUpdate()` rather than\n // `update()` or `updated()`, which are async. This is necessary to ensure\n // that form data is updated in time for synchronous event listeners.\n this[internals].setFormValue(this[getFormValue](), this[getFormState]());\n }\n\n [getFormValue](): FormValue | null {\n return this.getAttribute('value');\n }\n\n [getFormState](): FormValue | null {\n return this[getFormValue]();\n }\n\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n }\n\n return FormAssociatedElement;\n}\n\n/**\n * A value that can be provided for form submission and state.\n */\nexport type FormValue = File | string | FormData;\n\n/**\n * A value to be restored for a component's form value. If a component's form\n * state is a `FormData` object, its entry list of name and values will be\n * provided.\n */\nexport type FormRestoreState =\n | File\n | string\n | Array<[string, FormDataEntryValue]>;\n\n/**\n * The reason a form component is being restored for, either `'restore'` for\n * browser restoration or `'autocomplete'` for restoring user values.\n */\nexport type FormRestoreReason = 'restore' | 'autocomplete';\n"]}
1
+ {"version":3,"file":"form-associated.js","sourceRoot":"","sources":["form-associated.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,SAAS,EAAuB,MAAM,wBAAwB,CAAC;AAiGvE;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,MAAM,UAAU,mBAAmB,CAEjC,IAAO;IACP,MAAe,qBAAsB,SAAQ,IAAI;QAI/C,IAAI,IAAI;YACN,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC;QAC9B,CAAC;QAED,IAAI,MAAM;YACR,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC;QAChC,CAAC;QAED,4EAA4E;QAC5E,uEAAuE;QACvE,EAAE;QACF,wEAAwE;QACxE,2EAA2E;QAC3E,0DAA0D;QAE1D,IAAI,IAAI;YACN,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACzC,CAAC;QACD,IAAI,IAAI,CAAC,IAAY;YACnB,qEAAqE;YACrE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAChC,0EAA0E;YAC1E,mCAAmC;QACrC,CAAC;QAGD,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;QACD,IAAI,QAAQ,CAAC,QAAiB;YAC5B,uEAAuE;YACvE,6CAA6C;YAC7C,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;YACpD,0EAA0E;YAC1E,mCAAmC;QACrC,CAAC;QAEQ,wBAAwB,CAC/B,IAAY,EACZ,GAAkB,EAClB,KAAoB;YAEpB,kEAAkE;YAClE,iCAAiC;YACjC,sEAAsE;YACtE,0EAA0E;YAC1E,uEAAuE;YACvE,0EAA0E;YAC1E,wEAAwE;YACxE,0CAA0C;YAC1C,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC3C,uEAAuE;gBACvE,MAAM,QAAQ,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC1D,mDAAmD;gBACnD,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;gBACnC,OAAO;YACT,CAAC;YAED,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QACnD,CAAC;QAEQ,aAAa,CACpB,IAAkB,EAClB,QAAkB,EAClB,OAA6B;YAE7B,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC7C,0EAA0E;YAC1E,WAAW;YACX,uEAAuE;YACvE,0EAA0E;YAC1E,qEAAqE;YACrE,IAAI,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAC3E,CAAC;QAED,CAAC,YAAY,CAAC;YACZ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;QAED,CAAC,YAAY,CAAC;YACZ,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;QAC9B,CAAC;QAED,oBAAoB,CAAC,QAAiB;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;;IAxFD,kBAAkB;IACF,oCAAc,GAAG,IAAI,CAAC;IAiBtC;QADC,QAAQ,CAAC,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC;qDAG5B;IASD;QADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;yDAG3C;IA4DH,OAAO,qBAAqB,CAAC;AAC/B,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, PropertyDeclaration} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A form-associated element.\n */\nexport interface FormAssociated {\n /**\n * The associated form element with which this element's value will submit.\n */\n readonly form: HTMLFormElement | null;\n\n /**\n * The labels this element is associated with.\n */\n readonly labels: NodeList;\n\n /**\n * The HTML name to use in form submission.\n */\n name: string;\n\n /**\n * Whether or not the element is disabled.\n */\n disabled: boolean;\n\n /**\n * Gets the current form value of a component. Defaults to the component's\n * `value` attribute.\n *\n * @return The current form value.\n */\n [getFormValue](): FormValue | null;\n\n /**\n * Gets the current form state of a component. Defaults to the component's\n * `[getFormValue]()` result.\n *\n * Use this when the state of an element is different from its value, such as\n * checkboxes (internal boolean state and a user string value).\n *\n * @return The current form state, defaults to the form value.\n */\n [getFormState](): FormValue | null;\n\n /**\n * A callback for when a form component should be disabled or enabled. This\n * can be called in a variety of situations, such as disabled `<fieldset>`s.\n *\n * @param disabled Whether or not the form control should be disabled.\n */\n formDisabledCallback(disabled: boolean): void;\n\n /**\n * An optional callback for when the form requests to reset its value.\n * Typically, the default value that is reset is represented in the attribute\n * of an element.\n *\n * This means the attribute used for the value should not update as the value\n * changes. For example, a checkbox should not change its default `checked`\n * attribute when selected. Ensure form values do not reflect.\n */\n formResetCallback?(): void;\n\n /**\n * An optional callback for when the form restores the state of a component.\n * For example, when a page is reloaded or forms are autofilled.\n *\n * @param state The state to restore, or null to reset the form control's\n * value.\n * @param reason The reason state was restored, either `'restore'` or\n * `'autocomplete'`.\n */\n formStateRestoreCallback?(\n state: FormRestoreState | null,\n reason: FormRestoreReason,\n ): void;\n\n /**\n * An optional callback for when the associated form changes.\n *\n * @param form The new associated form, or `null` if there is none.\n */\n formAssociatedCallback?(form: HTMLFormElement | null): void;\n}\n\n/**\n * The constructor of a `FormAssociated` element.\n */\nexport interface FormAssociatedConstructor {\n /**\n * Indicates that an element is participating in form association.\n */\n readonly formAssociated: true;\n}\n\n/**\n * A symbol property to retrieve the form value for an element.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A symbol property to retrieve the form state for an element.\n */\nexport const getFormState = Symbol('getFormState');\n\n/**\n * Mixes in form-associated behavior for a class. This allows an element to add\n * values to `<form>` elements.\n *\n * Implementing classes should provide a `[formValue]` to return the current\n * value of the element, as well as reset and restore callbacks.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyControl extends base {\n * \\@property()\n * value = '';\n *\n * override [getFormValue]() {\n * return this.value;\n * }\n *\n * override formResetCallback() {\n * const defaultValue = this.getAttribute('value');\n * this.value = defaultValue;\n * }\n *\n * override formStateRestoreCallback(state: string) {\n * this.value = state;\n * }\n * }\n * ```\n *\n * Elements may optionally provide a `[formState]` if their values do not\n * represent the state of the component.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyCheckbox extends base {\n * \\@property()\n * value = 'on';\n *\n * \\@property({type: Boolean})\n * checked = false;\n *\n * override [getFormValue]() {\n * return this.checked ? this.value : null;\n * }\n *\n * override [getFormState]() {\n * return String(this.checked);\n * }\n *\n * override formResetCallback() {\n * const defaultValue = this.hasAttribute('checked');\n * this.checked = defaultValue;\n * }\n *\n * override formStateRestoreCallback(state: string) {\n * this.checked = Boolean(state);\n * }\n * }\n * ```\n *\n * @param base The class to mix functionality into. The base class must use\n * `mixinElementInternals()`.\n * @return The provided class with `FormAssociated` mixed in.\n */\nexport function mixinFormAssociated<\n T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T & FormAssociatedConstructor, FormAssociated> {\n abstract class FormAssociatedElement extends base implements FormAssociated {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n get form() {\n return this[internals].form;\n }\n\n get labels() {\n return this[internals].labels;\n }\n\n // Use @property for the `name` and `disabled` properties to add them to the\n // `observedAttributes` array and trigger `attributeChangedCallback()`.\n //\n // We don't use Lit's default getter/setter (`noAccessor: true`) because\n // the attributes need to be updated synchronously to work with synchronous\n // form APIs, and Lit updates attributes async by default.\n @property({noAccessor: true})\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n // Note: setting name to null or empty does not remove the attribute.\n this.setAttribute('name', name);\n // We don't need to call `requestUpdate()` since it's called synchronously\n // in `attributeChangedCallback()`.\n }\n\n @property({type: Boolean, noAccessor: true})\n get disabled() {\n return this.hasAttribute('disabled');\n }\n set disabled(disabled: boolean) {\n // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or\n // `undefined` sets the attribute to `false`.\n this.toggleAttribute('disabled', Boolean(disabled));\n // We don't need to call `requestUpdate()` since it's called synchronously\n // in `attributeChangedCallback()`.\n }\n\n override attributeChangedCallback(\n name: string,\n old: string | null,\n value: string | null,\n ) {\n // Manually `requestUpdate()` for `name` and `disabled` when their\n // attribute or property changes.\n // The properties update their attributes, so this callback is invoked\n // immediately when the properties are set. We call `requestUpdate()` here\n // instead of letting Lit set the properties from the attribute change.\n // That would cause the properties to re-set the attribute and invoke this\n // callback again in a loop. This leads to stale state when Lit tries to\n // determine if a property changed or not.\n if (name === 'name' || name === 'disabled') {\n // Disabled's value is only false if the attribute is missing and null.\n const oldValue = name === 'disabled' ? old !== null : old;\n // Trigger a lit update when the attribute changes.\n this.requestUpdate(name, oldValue);\n return;\n }\n\n super.attributeChangedCallback(name, old, value);\n }\n\n override requestUpdate(\n name?: PropertyKey,\n oldValue?: unknown,\n options?: PropertyDeclaration,\n ) {\n super.requestUpdate(name, oldValue, options);\n // If any properties change, update the form value, which may have changed\n // as well.\n // Update the form value synchronously in `requestUpdate()` rather than\n // `update()` or `updated()`, which are async. This is necessary to ensure\n // that form data is updated in time for synchronous event listeners.\n this[internals].setFormValue(this[getFormValue](), this[getFormState]());\n }\n\n [getFormValue](): FormValue | null {\n return this.getAttribute('value');\n }\n\n [getFormState](): FormValue | null {\n return this[getFormValue]();\n }\n\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n }\n\n return FormAssociatedElement;\n}\n\n/**\n * A value that can be provided for form submission and state.\n */\nexport type FormValue = File | string | FormData;\n\n/**\n * A value to be restored for a component's form value. If a component's form\n * state is a `FormData` object, its entry list of name and values will be\n * provided.\n */\nexport type FormRestoreState =\n | File\n | string\n | Array<[string, FormDataEntryValue]>;\n\n/**\n * The reason a form component is being restored for, either `'restore'` for\n * browser restoration or `'autocomplete'` for restoring user values.\n */\nexport type FormRestoreReason = 'restore' | 'autocomplete';\n"]}