@material/web 1.0.0 → 1.0.2-nightly.3d8c7ac.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 (376) hide show
  1. package/all.d.ts +2 -0
  2. package/all.js +2 -0
  3. package/all.js.map +1 -1
  4. package/button/elevated-button.js +5 -1
  5. package/button/elevated-button.js.map +1 -1
  6. package/button/internal/_elevation.scss +32 -32
  7. package/button/internal/_icon.scss +22 -23
  8. package/button/internal/_outlined-button.scss +21 -19
  9. package/button/internal/_shared.scss +84 -77
  10. package/button/internal/_touch-target.scss +4 -0
  11. package/button/internal/button.d.ts +7 -11
  12. package/button/internal/button.js +52 -38
  13. package/button/internal/button.js.map +1 -1
  14. package/button/internal/elevated-button.d.ts +1 -1
  15. package/button/internal/elevated-button.js +1 -1
  16. package/button/internal/elevated-button.js.map +1 -1
  17. package/button/internal/filled-button.d.ts +1 -1
  18. package/button/internal/filled-button.js +1 -1
  19. package/button/internal/filled-button.js.map +1 -1
  20. package/button/internal/filled-tonal-button.d.ts +1 -1
  21. package/button/internal/filled-tonal-button.js +1 -1
  22. package/button/internal/filled-tonal-button.js.map +1 -1
  23. package/button/internal/outlined-button.d.ts +1 -1
  24. package/button/internal/outlined-button.js +2 -2
  25. package/button/internal/outlined-button.js.map +1 -1
  26. package/button/internal/outlined-styles.css.js +1 -1
  27. package/button/internal/outlined-styles.css.js.map +1 -1
  28. package/button/internal/shared-elevation-styles.css.js +1 -1
  29. package/button/internal/shared-elevation-styles.css.js.map +1 -1
  30. package/button/internal/shared-styles.css.js +1 -1
  31. package/button/internal/shared-styles.css.js.map +1 -1
  32. package/checkbox/internal/_checkbox.scss +6 -0
  33. package/checkbox/internal/checkbox-styles.css.js +1 -1
  34. package/checkbox/internal/checkbox-styles.css.js.map +1 -1
  35. package/checkbox/internal/checkbox.d.ts +18 -25
  36. package/checkbox/internal/checkbox.js +43 -74
  37. package/checkbox/internal/checkbox.js.map +1 -1
  38. package/chips/filter-chip.js +5 -1
  39. package/chips/filter-chip.js.map +1 -1
  40. package/chips/harness.js.map +1 -1
  41. package/chips/input-chip.js +6 -1
  42. package/chips/input-chip.js.map +1 -1
  43. package/chips/internal/assist-chip.js +8 -4
  44. package/chips/internal/assist-chip.js.map +1 -1
  45. package/chips/internal/chip-set.js +6 -4
  46. package/chips/internal/chip-set.js.map +1 -1
  47. package/chips/internal/chip.d.ts +3 -0
  48. package/chips/internal/chip.js +7 -5
  49. package/chips/internal/chip.js.map +1 -1
  50. package/chips/internal/filter-chip.d.ts +2 -0
  51. package/chips/internal/filter-chip.js +11 -5
  52. package/chips/internal/filter-chip.js.map +1 -1
  53. package/chips/internal/input-chip.d.ts +2 -0
  54. package/chips/internal/input-chip.js +10 -4
  55. package/chips/internal/input-chip.js.map +1 -1
  56. package/chips/internal/multi-action-chip.js.map +1 -1
  57. package/chips/internal/trailing-icons.d.ts +1 -1
  58. package/chips/internal/trailing-icons.js +6 -5
  59. package/chips/internal/trailing-icons.js.map +1 -1
  60. package/common.d.ts +2 -0
  61. package/common.js +2 -0
  62. package/common.js.map +1 -1
  63. package/dialog/harness.js +1 -2
  64. package/dialog/harness.js.map +1 -1
  65. package/dialog/internal/_dialog.scss +1 -1
  66. package/dialog/internal/animations.js +14 -12
  67. package/dialog/internal/animations.js.map +1 -1
  68. package/dialog/internal/dialog-styles.css.js +1 -1
  69. package/dialog/internal/dialog-styles.css.js.map +1 -1
  70. package/dialog/internal/dialog.d.ts +6 -6
  71. package/dialog/internal/dialog.js +24 -24
  72. package/dialog/internal/dialog.js.map +1 -1
  73. package/fab/harness.js.map +1 -1
  74. package/fab/internal/_fab.scss +4 -0
  75. package/fab/internal/fab-styles.css.js +1 -1
  76. package/fab/internal/fab-styles.css.js.map +1 -1
  77. package/fab/internal/fab.js.map +1 -1
  78. package/fab/internal/shared.js +10 -11
  79. package/fab/internal/shared.js.map +1 -1
  80. package/field/harness.js.map +1 -1
  81. package/field/internal/_content.scss +185 -174
  82. package/field/internal/_filled-field.scss +147 -135
  83. package/field/internal/_label.scss +83 -72
  84. package/field/internal/_outlined-field.scss +276 -261
  85. package/field/internal/_supporting-text.scss +53 -42
  86. package/field/internal/field.js +26 -22
  87. package/field/internal/field.js.map +1 -1
  88. package/field/internal/filled-styles.css.js +1 -1
  89. package/field/internal/filled-styles.css.js.map +1 -1
  90. package/field/internal/outlined-styles.css.js +1 -1
  91. package/field/internal/outlined-styles.css.js.map +1 -1
  92. package/field/internal/shared-styles.css.js +1 -1
  93. package/field/internal/shared-styles.css.js.map +1 -1
  94. package/focus/internal/focus-ring.d.ts +2 -0
  95. package/focus/internal/focus-ring.js +3 -3
  96. package/focus/internal/focus-ring.js.map +1 -1
  97. package/icon/internal/_icon.scss +7 -4
  98. package/icon/internal/icon-styles.css.js +1 -1
  99. package/icon/internal/icon-styles.css.js.map +1 -1
  100. package/iconbutton/internal/icon-button.d.ts +9 -4
  101. package/iconbutton/internal/icon-button.js +35 -22
  102. package/iconbutton/internal/icon-button.js.map +1 -1
  103. package/internal/aria/aria.d.ts +4 -26
  104. package/internal/aria/aria.js +10 -28
  105. package/internal/aria/aria.js.map +1 -1
  106. package/internal/aria/delegate.js +2 -2
  107. package/internal/aria/delegate.js.map +1 -1
  108. package/internal/controller/attachable-controller.js +3 -5
  109. package/internal/controller/attachable-controller.js.map +1 -1
  110. package/internal/controller/form-submitter.d.ts +3 -5
  111. package/internal/controller/form-submitter.js +5 -7
  112. package/internal/controller/form-submitter.js.map +1 -1
  113. package/internal/controller/is-rtl.js +2 -2
  114. package/internal/controller/is-rtl.js.map +1 -1
  115. package/internal/controller/string-converter.js +1 -1
  116. package/internal/controller/string-converter.js.map +1 -1
  117. package/internal/motion/animation.js.map +1 -1
  118. package/labs/behaviors/element-internals.d.ts +45 -0
  119. package/labs/behaviors/element-internals.js +50 -0
  120. package/labs/behaviors/element-internals.js.map +1 -0
  121. package/labs/behaviors/focusable.d.ts +39 -0
  122. package/labs/behaviors/focusable.js +82 -0
  123. package/labs/behaviors/focusable.js.map +1 -0
  124. package/labs/behaviors/form-associated.d.ts +199 -0
  125. package/labs/behaviors/form-associated.js +155 -0
  126. package/labs/behaviors/form-associated.js.map +1 -0
  127. package/labs/behaviors/mixin.d.ts +54 -0
  128. package/labs/behaviors/mixin.js +7 -0
  129. package/labs/behaviors/mixin.js.map +1 -0
  130. package/labs/behaviors/validators/checkbox-validator.d.ts +32 -0
  131. package/labs/behaviors/validators/checkbox-validator.js +32 -0
  132. package/labs/behaviors/validators/checkbox-validator.js.map +1 -0
  133. package/labs/behaviors/validators/validator.d.ts +92 -0
  134. package/labs/behaviors/validators/validator.js +73 -0
  135. package/labs/behaviors/validators/validator.js.map +1 -0
  136. package/labs/card/_elevated-card.scss +6 -0
  137. package/labs/card/_filled-card.scss +6 -0
  138. package/labs/card/_outlined-card.scss +6 -0
  139. package/labs/card/elevated-card.d.ts +18 -0
  140. package/labs/card/elevated-card.js +21 -0
  141. package/labs/card/elevated-card.js.map +1 -0
  142. package/labs/card/filled-card.d.ts +18 -0
  143. package/labs/card/filled-card.js +21 -0
  144. package/labs/card/filled-card.js.map +1 -0
  145. package/labs/card/internal/_elevated-card.scss +35 -0
  146. package/labs/card/internal/_filled-card.scss +35 -0
  147. package/labs/card/internal/_outlined-card.scss +39 -0
  148. package/labs/card/internal/_shared.scss +40 -0
  149. package/labs/card/internal/card.d.ts +13 -0
  150. package/labs/card/internal/card.js +20 -0
  151. package/labs/card/internal/card.js.map +1 -0
  152. package/labs/card/internal/elevated-styles.css.js +9 -0
  153. package/labs/card/internal/elevated-styles.css.js.map +1 -0
  154. package/labs/card/internal/elevated-styles.scss +10 -0
  155. package/labs/card/internal/filled-styles.css.js +9 -0
  156. package/labs/card/internal/filled-styles.css.js.map +1 -0
  157. package/labs/card/internal/filled-styles.scss +10 -0
  158. package/labs/card/internal/outlined-styles.css.js +9 -0
  159. package/labs/card/internal/outlined-styles.css.js.map +1 -0
  160. package/labs/card/internal/outlined-styles.scss +10 -0
  161. package/labs/card/internal/shared-styles.css.js +9 -0
  162. package/labs/card/internal/shared-styles.css.js.map +1 -0
  163. package/labs/card/internal/shared-styles.scss +10 -0
  164. package/labs/card/outlined-card.d.ts +18 -0
  165. package/labs/card/outlined-card.js +21 -0
  166. package/labs/card/outlined-card.js.map +1 -0
  167. package/labs/item/internal/_item.scss +1 -1
  168. package/labs/item/internal/item-styles.css.js +1 -1
  169. package/labs/item/internal/item-styles.css.js.map +1 -1
  170. package/labs/item/internal/item.js +8 -8
  171. package/labs/item/internal/item.js.map +1 -1
  172. package/labs/navigationbar/internal/constants.js.map +1 -1
  173. package/labs/navigationbar/internal/navigation-bar.d.ts +3 -0
  174. package/labs/navigationbar/internal/navigation-bar.js +18 -11
  175. package/labs/navigationbar/internal/navigation-bar.js.map +1 -1
  176. package/labs/navigationdrawer/internal/navigation-drawer-modal.d.ts +3 -0
  177. package/labs/navigationdrawer/internal/navigation-drawer-modal.js +10 -3
  178. package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -1
  179. package/labs/navigationdrawer/internal/navigation-drawer.d.ts +3 -0
  180. package/labs/navigationdrawer/internal/navigation-drawer.js +8 -1
  181. package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -1
  182. package/labs/navigationtab/harness.js.map +1 -1
  183. package/labs/navigationtab/internal/navigation-tab.d.ts +6 -0
  184. package/labs/navigationtab/internal/navigation-tab.js +43 -27
  185. package/labs/navigationtab/internal/navigation-tab.js.map +1 -1
  186. package/labs/navigationtab/internal/state.js.map +1 -1
  187. package/labs/segmentedbutton/internal/segmented-button.d.ts +3 -0
  188. package/labs/segmentedbutton/internal/segmented-button.js +26 -12
  189. package/labs/segmentedbutton/internal/segmented-button.js.map +1 -1
  190. package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts +5 -0
  191. package/labs/segmentedbuttonset/internal/segmented-button-set.js +14 -9
  192. package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -1
  193. package/list/harness.d.ts +3 -2
  194. package/list/harness.js.map +1 -1
  195. package/list/internal/list-controller.d.ts +1 -1
  196. package/list/internal/list-controller.js +7 -3
  197. package/list/internal/list-controller.js.map +1 -1
  198. package/list/internal/list-navigation-helpers.js.map +1 -1
  199. package/list/internal/list.d.ts +2 -2
  200. package/list/internal/list.js +8 -6
  201. package/list/internal/list.js.map +1 -1
  202. package/list/internal/listitem/_list-item.scss +18 -0
  203. package/list/internal/listitem/harness.d.ts +3 -3
  204. package/list/internal/listitem/harness.js.map +1 -1
  205. package/list/internal/listitem/list-item-styles.css.js +1 -1
  206. package/list/internal/listitem/list-item-styles.css.js.map +1 -1
  207. package/list/internal/listitem/list-item.d.ts +3 -2
  208. package/list/internal/listitem/list-item.js +20 -21
  209. package/list/internal/listitem/list-item.js.map +1 -1
  210. package/list/list-item.d.ts +4 -12
  211. package/list/list-item.js +5 -14
  212. package/list/list-item.js.map +1 -1
  213. package/menu/harness.js.map +1 -1
  214. package/menu/internal/_menu.scss +20 -1
  215. package/menu/internal/controllers/menuItemController.d.ts +7 -0
  216. package/menu/internal/controllers/menuItemController.js +17 -4
  217. package/menu/internal/controllers/menuItemController.js.map +1 -1
  218. package/menu/internal/controllers/shared.d.ts +9 -1
  219. package/menu/internal/controllers/shared.js +4 -4
  220. package/menu/internal/controllers/shared.js.map +1 -1
  221. package/menu/internal/controllers/surfacePositionController.d.ts +16 -2
  222. package/menu/internal/controllers/surfacePositionController.js +134 -56
  223. package/menu/internal/controllers/surfacePositionController.js.map +1 -1
  224. package/menu/internal/controllers/typeaheadController.js +19 -14
  225. package/menu/internal/controllers/typeaheadController.js.map +1 -1
  226. package/menu/internal/menu-styles.css.js +1 -1
  227. package/menu/internal/menu-styles.css.js.map +1 -1
  228. package/menu/internal/menu.d.ts +55 -17
  229. package/menu/internal/menu.js +175 -88
  230. package/menu/internal/menu.js.map +1 -1
  231. package/menu/internal/menuitem/_menu-item.scss +24 -0
  232. package/menu/internal/menuitem/harness.d.ts +3 -1
  233. package/menu/internal/menuitem/harness.js.map +1 -1
  234. package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
  235. package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
  236. package/menu/internal/menuitem/menu-item.d.ts +3 -2
  237. package/menu/internal/menuitem/menu-item.js +20 -20
  238. package/menu/internal/menuitem/menu-item.js.map +1 -1
  239. package/menu/internal/submenu/sub-menu.d.ts +9 -8
  240. package/menu/internal/submenu/sub-menu.js +35 -22
  241. package/menu/internal/submenu/sub-menu.js.map +1 -1
  242. package/menu/internal/types.js.map +1 -1
  243. package/menu/menu-item.js +1 -2
  244. package/menu/menu-item.js.map +1 -1
  245. package/menu/menu.js +1 -2
  246. package/menu/menu.js.map +1 -1
  247. package/package.json +1 -1
  248. package/progress/internal/_circular-progress.scss +2 -2
  249. package/progress/internal/_linear-progress.scss +1 -1
  250. package/progress/internal/circular-progress-styles.css.js +1 -1
  251. package/progress/internal/circular-progress-styles.css.js.map +1 -1
  252. package/progress/internal/circular-progress.js +11 -10
  253. package/progress/internal/circular-progress.js.map +1 -1
  254. package/progress/internal/linear-progress-styles.css.js +1 -1
  255. package/progress/internal/linear-progress-styles.css.js.map +1 -1
  256. package/progress/internal/linear-progress.d.ts +1 -1
  257. package/progress/internal/linear-progress.js +3 -3
  258. package/progress/internal/linear-progress.js.map +1 -1
  259. package/progress/internal/progress.js +4 -2
  260. package/progress/internal/progress.js.map +1 -1
  261. package/radio/internal/_radio.scss +144 -123
  262. package/radio/internal/radio-styles.css.js +1 -1
  263. package/radio/internal/radio-styles.css.js.map +1 -1
  264. package/radio/internal/radio.d.ts +12 -23
  265. package/radio/internal/radio.js +31 -50
  266. package/radio/internal/radio.js.map +1 -1
  267. package/radio/internal/single-selection-controller.js +1 -1
  268. package/radio/internal/single-selection-controller.js.map +1 -1
  269. package/radio/radio.js +1 -2
  270. package/radio/radio.js.map +1 -1
  271. package/ripple/internal/ripple.js +21 -18
  272. package/ripple/internal/ripple.js.map +1 -1
  273. package/select/filled-select.js +1 -2
  274. package/select/filled-select.js.map +1 -1
  275. package/select/harness.js +1 -1
  276. package/select/harness.js.map +1 -1
  277. package/select/internal/_shared.scss +4 -0
  278. package/select/internal/select.d.ts +25 -34
  279. package/select/internal/select.js +101 -91
  280. package/select/internal/select.js.map +1 -1
  281. package/select/internal/selectoption/select-option.d.ts +8 -6
  282. package/select/internal/selectoption/select-option.js +25 -23
  283. package/select/internal/selectoption/select-option.js.map +1 -1
  284. package/select/internal/selectoption/selectOptionController.js +1 -1
  285. package/select/internal/selectoption/selectOptionController.js.map +1 -1
  286. package/select/internal/shared-styles.css.js +1 -1
  287. package/select/internal/shared-styles.css.js.map +1 -1
  288. package/select/outlined-select.js +1 -2
  289. package/select/outlined-select.js.map +1 -1
  290. package/select/select-option.js +1 -2
  291. package/select/select-option.js.map +1 -1
  292. package/slider/harness.js +5 -5
  293. package/slider/harness.js.map +1 -1
  294. package/slider/internal/_slider.scss +68 -30
  295. package/slider/internal/slider-styles.css.js +1 -1
  296. package/slider/internal/slider-styles.css.js.map +1 -1
  297. package/slider/internal/slider.d.ts +16 -25
  298. package/slider/internal/slider.js +111 -115
  299. package/slider/internal/slider.js.map +1 -1
  300. package/switch/internal/_handle.scss +159 -141
  301. package/switch/internal/_icon.scss +95 -72
  302. package/switch/internal/_switch.scss +90 -95
  303. package/switch/internal/_track.scss +110 -77
  304. package/switch/internal/switch-styles.css.js +1 -1
  305. package/switch/internal/switch-styles.css.js.map +1 -1
  306. package/switch/internal/switch.d.ts +11 -27
  307. package/switch/internal/switch.js +40 -80
  308. package/switch/internal/switch.js.map +1 -1
  309. package/switch/switch.js +1 -2
  310. package/switch/switch.js.map +1 -1
  311. package/tabs/harness.js +3 -3
  312. package/tabs/harness.js.map +1 -1
  313. package/tabs/internal/_tab.scss +27 -35
  314. package/tabs/internal/primary-tab.d.ts +0 -2
  315. package/tabs/internal/tab-styles.css.js +1 -1
  316. package/tabs/internal/tab-styles.css.js.map +1 -1
  317. package/tabs/internal/tab.d.ts +10 -5
  318. package/tabs/internal/tab.js +43 -22
  319. package/tabs/internal/tab.js.map +1 -1
  320. package/tabs/internal/tabs.d.ts +7 -4
  321. package/tabs/internal/tabs.js +23 -22
  322. package/tabs/internal/tabs.js.map +1 -1
  323. package/textfield/filled-text-field.js +1 -2
  324. package/textfield/filled-text-field.js.map +1 -1
  325. package/textfield/harness.js +3 -2
  326. package/textfield/harness.js.map +1 -1
  327. package/textfield/internal/text-field.d.ts +33 -18
  328. package/textfield/internal/text-field.js +96 -58
  329. package/textfield/internal/text-field.js.map +1 -1
  330. package/textfield/outlined-text-field.js +1 -2
  331. package/textfield/outlined-text-field.js.map +1 -1
  332. package/tokens/_index.scss +3 -0
  333. package/tokens/_md-comp-elevated-card.scss +63 -0
  334. package/tokens/_md-comp-filled-card.scss +63 -0
  335. package/tokens/_md-comp-icon.scss +2 -0
  336. package/tokens/_md-comp-outlined-card.scss +69 -0
  337. package/tokens/_md-comp-test-table.scss +1 -0
  338. package/internal/controller/element-internals.d.ts +0 -35
  339. package/internal/controller/element-internals.js +0 -24
  340. package/internal/controller/element-internals.js.map +0 -1
  341. package/list/internal/listitem/forced-colors-styles.css.js +0 -9
  342. package/list/internal/listitem/forced-colors-styles.css.js.map +0 -1
  343. package/list/internal/listitem/forced-colors-styles.scss +0 -19
  344. package/menu/internal/forced-colors-styles.css.js +0 -9
  345. package/menu/internal/forced-colors-styles.css.js.map +0 -1
  346. package/menu/internal/forced-colors-styles.scss +0 -12
  347. package/menu/internal/menuitem/forced-colors-styles.css.js +0 -9
  348. package/menu/internal/menuitem/forced-colors-styles.css.js.map +0 -1
  349. package/menu/internal/menuitem/forced-colors-styles.scss +0 -26
  350. package/radio/internal/forced-colors-styles.css.js +0 -9
  351. package/radio/internal/forced-colors-styles.css.js.map +0 -1
  352. package/radio/internal/forced-colors-styles.scss +0 -29
  353. package/select/internal/filled-forced-colors-styles.css.d.ts +0 -1
  354. package/select/internal/filled-forced-colors-styles.css.js +0 -9
  355. package/select/internal/filled-forced-colors-styles.css.js.map +0 -1
  356. package/select/internal/filled-forced-colors-styles.scss +0 -29
  357. package/select/internal/outlined-forced-colors-styles.css.d.ts +0 -1
  358. package/select/internal/outlined-forced-colors-styles.css.js +0 -9
  359. package/select/internal/outlined-forced-colors-styles.css.js.map +0 -1
  360. package/select/internal/outlined-forced-colors-styles.scss +0 -29
  361. package/switch/internal/forced-colors-styles.css.d.ts +0 -1
  362. package/switch/internal/forced-colors-styles.css.js +0 -9
  363. package/switch/internal/forced-colors-styles.css.js.map +0 -1
  364. package/switch/internal/forced-colors-styles.scss +0 -42
  365. package/textfield/internal/filled-forced-colors-styles.css.d.ts +0 -1
  366. package/textfield/internal/filled-forced-colors-styles.css.js +0 -9
  367. package/textfield/internal/filled-forced-colors-styles.css.js.map +0 -1
  368. package/textfield/internal/filled-forced-colors-styles.scss +0 -29
  369. package/textfield/internal/outlined-forced-colors-styles.css.d.ts +0 -1
  370. package/textfield/internal/outlined-forced-colors-styles.css.js +0 -9
  371. package/textfield/internal/outlined-forced-colors-styles.css.js.map +0 -1
  372. package/textfield/internal/outlined-forced-colors-styles.scss +0 -29
  373. /package/{list/internal/listitem/forced-colors-styles.css.d.ts → labs/card/internal/elevated-styles.css.d.ts} +0 -0
  374. /package/{menu/internal/forced-colors-styles.css.d.ts → labs/card/internal/filled-styles.css.d.ts} +0 -0
  375. /package/{menu/internal/menuitem/forced-colors-styles.css.d.ts → labs/card/internal/outlined-styles.css.d.ts} +0 -0
  376. /package/{radio/internal/forced-colors-styles.css.d.ts → labs/card/internal/shared-styles.css.d.ts} +0 -0
@@ -6,26 +6,30 @@
6
6
  import '../../focus/md-focus-ring.js';
7
7
  import '../../ripple/ripple.js';
8
8
  import { LitElement, PropertyValues } from 'lit';
9
+ import { getFormState, getFormValue } from '../../labs/behaviors/form-associated.js';
10
+ declare const checkboxBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
9
11
  /**
10
12
  * A checkbox component.
13
+ *
14
+ *
15
+ * @fires change {Event} The native `change` event on
16
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
17
+ * --bubbles
18
+ * @fires input {InputEvent} The native `input` event on
19
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
20
+ * --bubbles --composed
11
21
  */
12
- export declare class Checkbox extends LitElement {
22
+ export declare class Checkbox extends checkboxBaseClass {
13
23
  /** @nocollapse */
14
24
  static shadowRootOptions: {
15
25
  delegatesFocus: boolean;
16
26
  mode: ShadowRootMode;
17
27
  slotAssignment?: SlotAssignmentMode;
18
28
  };
19
- /** @nocollapse */
20
- static readonly formAssociated = true;
21
29
  /**
22
30
  * Whether or not the checkbox is selected.
23
31
  */
24
32
  checked: boolean;
25
- /**
26
- * Whether or not the checkbox is disabled.
27
- */
28
- disabled: boolean;
29
33
  /**
30
34
  * Whether or not the checkbox is indeterminate.
31
35
  *
@@ -45,19 +49,6 @@ export declare class Checkbox extends LitElement {
45
49
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
46
50
  */
47
51
  value: string;
48
- /**
49
- * The HTML name to use in form submission.
50
- */
51
- get name(): string;
52
- set name(name: string);
53
- /**
54
- * The associated form element with which this element's value will submit.
55
- */
56
- get form(): HTMLFormElement;
57
- /**
58
- * The labels this element is associated with.
59
- */
60
- get labels(): NodeList;
61
52
  /**
62
53
  * Returns a ValidityState object that represents the validity states of the
63
54
  * checkbox.
@@ -85,8 +76,7 @@ export declare class Checkbox extends LitElement {
85
76
  private prevDisabled;
86
77
  private prevIndeterminate;
87
78
  private readonly input;
88
- private hasCustomValidityError;
89
- private readonly internals;
79
+ private customValidityError;
90
80
  constructor();
91
81
  /**
92
82
  * Checks the checkbox's native validation and returns whether or not the
@@ -130,9 +120,12 @@ export declare class Checkbox extends LitElement {
130
120
  protected updated(): void;
131
121
  private handleChange;
132
122
  private syncValidity;
133
- private getInput;
134
- /** @private */
123
+ disabled: boolean;
124
+ name: string;
125
+ [getFormValue](): string;
126
+ [getFormState](): string;
135
127
  formResetCallback(): void;
136
- /** @private */
137
128
  formStateRestoreCallback(state: string): void;
129
+ private readonly validator;
138
130
  }
131
+ export {};
@@ -10,32 +10,24 @@ import { html, isServer, LitElement, nothing } from 'lit';
10
10
  import { property, query, state } from 'lit/decorators.js';
11
11
  import { classMap } from 'lit/directives/class-map.js';
12
12
  import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
13
- import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../internal/controller/events.js';
13
+ import { dispatchActivationClick, isActivationClick, redispatchEvent, } from '../../internal/controller/events.js';
14
+ import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
15
+ import { getFormState, getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
16
+ import { CheckboxValidator } from '../../labs/behaviors/validators/checkbox-validator.js';
17
+ // Separate variable needed for closure.
18
+ const checkboxBaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
14
19
  /**
15
20
  * A checkbox component.
21
+ *
22
+ *
23
+ * @fires change {Event} The native `change` event on
24
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
25
+ * --bubbles
26
+ * @fires input {InputEvent} The native `input` event on
27
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
28
+ * --bubbles --composed
16
29
  */
17
- export class Checkbox extends LitElement {
18
- /**
19
- * The HTML name to use in form submission.
20
- */
21
- get name() {
22
- return this.getAttribute('name') ?? '';
23
- }
24
- set name(name) {
25
- this.setAttribute('name', name);
26
- }
27
- /**
28
- * The associated form element with which this element's value will submit.
29
- */
30
- get form() {
31
- return this.internals.form;
32
- }
33
- /**
34
- * The labels this element is associated with.
35
- */
36
- get labels() {
37
- return this.internals.labels;
38
- }
30
+ export class Checkbox extends checkboxBaseClass {
39
31
  /**
40
32
  * Returns a ValidityState object that represents the validity states of the
41
33
  * checkbox.
@@ -47,7 +39,7 @@ export class Checkbox extends LitElement {
47
39
  */
48
40
  get validity() {
49
41
  this.syncValidity();
50
- return this.internals.validity;
42
+ return this[internals].validity;
51
43
  }
52
44
  /**
53
45
  * Returns the native validation error message.
@@ -56,7 +48,7 @@ export class Checkbox extends LitElement {
56
48
  */
57
49
  get validationMessage() {
58
50
  this.syncValidity();
59
- return this.internals.validationMessage;
51
+ return this[internals].validationMessage;
60
52
  }
61
53
  /**
62
54
  * Returns whether an element will successfully validate based on forms
@@ -66,7 +58,7 @@ export class Checkbox extends LitElement {
66
58
  */
67
59
  get willValidate() {
68
60
  this.syncValidity();
69
- return this.internals.willValidate;
61
+ return this[internals].willValidate;
70
62
  }
71
63
  constructor() {
72
64
  super();
@@ -74,10 +66,6 @@ export class Checkbox extends LitElement {
74
66
  * Whether or not the checkbox is selected.
75
67
  */
76
68
  this.checked = false;
77
- /**
78
- * Whether or not the checkbox is disabled.
79
- */
80
- this.disabled = false;
81
69
  /**
82
70
  * Whether or not the checkbox is indeterminate.
83
71
  *
@@ -101,9 +89,9 @@ export class Checkbox extends LitElement {
101
89
  this.prevDisabled = false;
102
90
  this.prevIndeterminate = false;
103
91
  // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
104
- // Replace with this.internals.validity.customError when resolved.
105
- this.hasCustomValidityError = false;
106
- this.internals = this /* needed for closure */.attachInternals();
92
+ // Replace with this[internals].validity.customError when resolved.
93
+ this.customValidityError = '';
94
+ this.validator = new CheckboxValidator(() => this);
107
95
  if (!isServer) {
108
96
  this.addEventListener('click', (event) => {
109
97
  if (!isActivationClick(event)) {
@@ -126,7 +114,7 @@ export class Checkbox extends LitElement {
126
114
  */
127
115
  checkValidity() {
128
116
  this.syncValidity();
129
- return this.internals.checkValidity();
117
+ return this[internals].checkValidity();
130
118
  }
131
119
  /**
132
120
  * Checks the checkbox's native validation and returns whether or not the
@@ -143,7 +131,7 @@ export class Checkbox extends LitElement {
143
131
  */
144
132
  reportValidity() {
145
133
  this.syncValidity();
146
- return this.internals.reportValidity();
134
+ return this[internals].reportValidity();
147
135
  }
148
136
  /**
149
137
  * Sets the checkbox's native validation error message. This is used to
@@ -157,20 +145,18 @@ export class Checkbox extends LitElement {
157
145
  * @param error The error message to display.
158
146
  */
159
147
  setCustomValidity(error) {
160
- this.hasCustomValidityError = !!error;
161
- this.internals.setValidity({ customError: !!error }, error, this.getInput());
148
+ this.customValidityError = error;
149
+ this.syncValidity();
162
150
  }
163
151
  update(changed) {
164
- if (changed.has('checked') || changed.has('disabled') ||
152
+ if (changed.has('checked') ||
153
+ changed.has('disabled') ||
165
154
  changed.has('indeterminate')) {
166
155
  this.prevChecked = changed.get('checked') ?? this.checked;
167
156
  this.prevDisabled = changed.get('disabled') ?? this.disabled;
168
157
  this.prevIndeterminate =
169
158
  changed.get('indeterminate') ?? this.indeterminate;
170
159
  }
171
- const shouldAddFormValue = this.checked && !this.indeterminate;
172
- const state = String(this.checked);
173
- this.internals.setFormValue(shouldAddFormValue ? this.value : null, state);
174
160
  super.update(changed);
175
161
  }
176
162
  render() {
@@ -196,7 +182,8 @@ export class Checkbox extends LitElement {
196
182
  // form.reportValidity() to work in Chrome.
197
183
  return html `
198
184
  <div class="container ${containerClasses}">
199
- <input type="checkbox"
185
+ <input
186
+ type="checkbox"
200
187
  id="input"
201
188
  aria-checked=${isIndeterminate ? 'mixed' : nothing}
202
189
  aria-label=${ariaLabel || nothing}
@@ -205,8 +192,7 @@ export class Checkbox extends LitElement {
205
192
  ?required=${this.required}
206
193
  .indeterminate=${this.indeterminate}
207
194
  .checked=${this.checked}
208
- @change=${this.handleChange}
209
- >
195
+ @change=${this.handleChange} />
210
196
 
211
197
  <div class="outline"></div>
212
198
  <div class="background"></div>
@@ -231,38 +217,26 @@ export class Checkbox extends LitElement {
231
217
  redispatchEvent(this, event);
232
218
  }
233
219
  syncValidity() {
234
- // Sync the internal <input>'s validity and the host's ElementInternals
235
- // validity. We do this to re-use native `<input>` validation messages.
236
- const input = this.getInput();
237
- if (this.hasCustomValidityError) {
238
- input.setCustomValidity(this.internals.validationMessage);
239
- }
240
- else {
241
- input.setCustomValidity('');
242
- }
243
- this.internals.setValidity(input.validity, input.validationMessage, this.getInput());
220
+ const { validity, validationMessage } = this.validator.getValidity();
221
+ this[internals].setValidity({
222
+ ...validity,
223
+ customError: !!this.customValidityError,
224
+ }, this.customValidityError || validationMessage, this.input ?? undefined);
244
225
  }
245
- getInput() {
246
- if (!this.input) {
247
- // If the input is not yet defined, synchronously render.
248
- this.connectedCallback();
249
- this.performUpdate();
226
+ [getFormValue]() {
227
+ if (!this.checked || this.indeterminate) {
228
+ return null;
250
229
  }
251
- if (this.isUpdatePending) {
252
- // If there are pending updates, synchronously perform them. This ensures
253
- // that constraint validation properties (like `required`) are synced
254
- // before interacting with input APIs that depend on them.
255
- this.scheduleUpdate();
256
- }
257
- return this.input;
230
+ return this.value;
231
+ }
232
+ [getFormState]() {
233
+ return String(this.checked);
258
234
  }
259
- /** @private */
260
235
  formResetCallback() {
261
236
  // The checked property does not reflect, so the original attribute set by
262
237
  // the user is used to determine the default value.
263
238
  this.checked = this.hasAttribute('checked');
264
239
  }
265
- /** @private */
266
240
  formStateRestoreCallback(state) {
267
241
  this.checked = state === 'true';
268
242
  }
@@ -273,16 +247,11 @@ export class Checkbox extends LitElement {
273
247
  /** @nocollapse */
274
248
  Checkbox.shadowRootOptions = {
275
249
  ...LitElement.shadowRootOptions,
276
- delegatesFocus: true
250
+ delegatesFocus: true,
277
251
  };
278
- /** @nocollapse */
279
- Checkbox.formAssociated = true;
280
252
  __decorate([
281
253
  property({ type: Boolean })
282
254
  ], Checkbox.prototype, "checked", void 0);
283
- __decorate([
284
- property({ type: Boolean, reflect: true })
285
- ], Checkbox.prototype, "disabled", void 0);
286
255
  __decorate([
287
256
  property({ type: Boolean })
288
257
  ], Checkbox.prototype, "indeterminate", void 0);
@@ -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 {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\n/**\n * A checkbox component.\n */\nexport class Checkbox extends LitElement {\n static {\n requestUpdateOnAriaChange(Checkbox);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\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 disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = 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 /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * Returns a ValidityState object that represents the validity states of the\n * checkbox.\n *\n * Note that checkboxes will only set `valueMissing` if `required` and not\n * checked.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n /**\n * Returns the native validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get willValidate() {\n this.syncValidity();\n return this.internals.willValidate;\n }\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 // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432\n // Replace with this.internals.validity.customError when resolved.\n private hasCustomValidityError = false;\n private readonly internals =\n (this as HTMLElement /* needed for closure */).attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input!);\n });\n }\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * The `validationMessage` is reported to the user by the browser. Use\n * `setCustomValidity()` to customize the `validationMessage`.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n reportValidity() {\n this.syncValidity();\n return this.internals.reportValidity();\n }\n\n /**\n * Sets the checkbox's native validation error message. This is used to\n * customize `validationMessage`.\n *\n * When the error is not an empty string, the checkbox is considered invalid\n * and `validity.customError` will be true.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n *\n * @param error The error message to display.\n */\n setCustomValidity(error: string) {\n this.hasCustomValidityError = !!error;\n this.internals.setValidity({customError: !!error}, error, this.getInput());\n }\n\n protected override update(changed: PropertyValues<Checkbox>) {\n if (changed.has('checked') || changed.has('disabled') ||\n changed.has('indeterminate')) {\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 const shouldAddFormValue = this.checked && !this.indeterminate;\n const state = String(this.checked);\n this.internals.setFormValue(shouldAddFormValue ? this.value : null, state);\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 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 @change=${this.handleChange}\n >\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 protected override updated() {\n // Sync validity when properties change, since validation properties may\n // have changed.\n this.syncValidity();\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n\n redispatchEvent(this, event);\n }\n\n private syncValidity() {\n // Sync the internal <input>'s validity and the host's ElementInternals\n // validity. We do this to re-use native `<input>` validation messages.\n const input = this.getInput();\n if (this.hasCustomValidityError) {\n input.setCustomValidity(this.internals.validationMessage);\n } else {\n input.setCustomValidity('');\n }\n\n this.internals.setValidity(\n input.validity, input.validationMessage, this.getInput());\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n this.connectedCallback();\n this.performUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n /** @private */\n 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 /** @private */\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\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 {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n redispatchEvent,\n} from '../../internal/controller/events.js';\nimport {\n internals,\n mixinElementInternals,\n} 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 = mixinFormAssociated(\n mixinElementInternals(LitElement),\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 static {\n requestUpdateOnAriaChange(Checkbox);\n }\n\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 /**\n * Returns a ValidityState object that represents the validity states of the\n * checkbox.\n *\n * Note that checkboxes will only set `valueMissing` if `required` and not\n * checked.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n get validity() {\n this.syncValidity();\n return this[internals].validity;\n }\n\n /**\n * Returns the native validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get validationMessage() {\n this.syncValidity();\n return this[internals].validationMessage;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get willValidate() {\n this.syncValidity();\n return this[internals].willValidate;\n }\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 // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432\n // Replace with this[internals].validity.customError when resolved.\n private customValidityError = '';\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input!);\n });\n }\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n checkValidity() {\n this.syncValidity();\n return this[internals].checkValidity();\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * The `validationMessage` is reported to the user by the browser. Use\n * `setCustomValidity()` to customize the `validationMessage`.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n reportValidity() {\n this.syncValidity();\n return this[internals].reportValidity();\n }\n\n /**\n * Sets the checkbox's native validation error message. This is used to\n * customize `validationMessage`.\n *\n * When the error is not an empty string, the checkbox is considered invalid\n * and `validity.customError` will be true.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n *\n * @param error The error message to display.\n */\n setCustomValidity(error: string) {\n this.customValidityError = error;\n this.syncValidity();\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 @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 protected override updated() {\n // Sync validity when properties change, since validation properties may\n // have changed.\n this.syncValidity();\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n\n redispatchEvent(this, event);\n }\n\n private syncValidity() {\n const {validity, validationMessage} = this.validator.getValidity();\n this[internals].setValidity(\n {\n ...validity,\n customError: !!this.customValidityError,\n },\n this.customValidityError || validationMessage,\n this.input ?? undefined,\n );\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 private readonly validator = new CheckboxValidator(() => this);\n}\n"]}
@@ -20,7 +20,11 @@ import { styles as trailingIconStyles } from './internal/trailing-icon-styles.cs
20
20
  export let MdFilterChip = class MdFilterChip extends FilterChip {
21
21
  };
22
22
  MdFilterChip.styles = [
23
- sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles
23
+ sharedStyles,
24
+ elevatedStyles,
25
+ trailingIconStyles,
26
+ selectableStyles,
27
+ styles,
24
28
  ];
25
29
  MdFilterChip = __decorate([
26
30
  customElement('md-filter-chip')
@@ -1 +1 @@
1
- {"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG;IACvB,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM;CAC3E,AAFqB,CAEpB;AAHS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAIxB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {FilterChip} from './internal/filter-chip.js';\nimport {styles} from './internal/filter-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filter-chip': MdFilterChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filter-chip')\nexport class MdFilterChip extends FilterChip {\n static override styles = [\n sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles\n ];\n}\n"]}
1
+ {"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG;IACvB,YAAY;IACZ,cAAc;IACd,kBAAkB;IAClB,gBAAgB;IAChB,MAAM;CACP,AANqB,CAMpB;AAPS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAQxB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {FilterChip} from './internal/filter-chip.js';\nimport {styles} from './internal/filter-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filter-chip': MdFilterChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filter-chip')\nexport class MdFilterChip extends FilterChip {\n static override styles = [\n sharedStyles,\n elevatedStyles,\n trailingIconStyles,\n selectableStyles,\n styles,\n ];\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAA9C;;QACE,WAAM,GAAyB,SAAS,CAAC;IA8B3C,CAAC;IA5BoB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAI,CAAC,OAAyC,CAAC;QACnE,MAAM,aAAa,GAAG,SAAS;YAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,IAAI,SAAS,EAAE,CAAC,CAAC;QACxE,4CAA4C;QAC5C,MAAM,EAAC,cAAc,EAAC,GAClB,IAAI,CAAC,OAAgD,CAAC;QAE1D,0EAA0E;QAC1E,yEAAyE;QACzE,UAAU;QACV,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,CAAC,aAAa,EAAE;YAChD,IAAI,CAAC,cAAc,EAAE;gBACnB,MAAM,IAAI,KAAK,CACX,mFAAmF,CAAC,CAAC;aAC1F;YAED,OAAO,cAAc,CAAC;SACvB;QAED,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,IAAI,KAAK,CACX,iFAAiF,CAAC,CAAC;SACxF;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Chip} from './internal/chip.js';\n\n/**\n * Test harness for chips.\n */\nexport class ChipHarness extends Harness<Chip> {\n action: 'primary'|'trailing' = 'primary';\n\n protected override async getInteractiveElement() {\n await this.element.updateComplete;\n const {primaryId} = this.element as unknown as {primaryId: string};\n const primaryAction = primaryId &&\n this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);\n // Retrieve MultiActionChip's trailingAction\n const {trailingAction} =\n this.element as {trailingAction?: HTMLElement | null};\n\n // Default to trailing action if there isn't a primary action and the user\n // didn't explicitly set `harness.action = 'trailing'` (remove-only input\n // chips).\n if (this.action === 'trailing' || !primaryAction) {\n if (!trailingAction) {\n throw new Error(\n '`ChipHarness.action` is \"trailing\", but the chip does not have a trailing action.');\n }\n\n return trailingAction;\n }\n\n if (!primaryAction) {\n throw new Error(\n '`ChipHarness.action` is \"primary\", but the chip does not have a primary action.');\n }\n\n return primaryAction;\n }\n}\n"]}
1
+ {"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAA9C;;QACE,WAAM,GAA2B,SAAS,CAAC;IAkC7C,CAAC;IAhCoB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAI,CAAC,OAAyC,CAAC;QACnE,MAAM,aAAa,GACjB,SAAS;YACT,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,IAAI,SAAS,EAAE,CAAC,CAAC;QACtE,4CAA4C;QAC5C,MAAM,EAAC,cAAc,EAAC,GAAG,IAAI,CAAC,OAE7B,CAAC;QAEF,0EAA0E;QAC1E,yEAAyE;QACzE,UAAU;QACV,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,CAAC,aAAa,EAAE;YAChD,IAAI,CAAC,cAAc,EAAE;gBACnB,MAAM,IAAI,KAAK,CACb,mFAAmF,CACpF,CAAC;aACH;YAED,OAAO,cAAc,CAAC;SACvB;QAED,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,IAAI,KAAK,CACb,iFAAiF,CAClF,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Chip} from './internal/chip.js';\n\n/**\n * Test harness for chips.\n */\nexport class ChipHarness extends Harness<Chip> {\n action: 'primary' | 'trailing' = 'primary';\n\n protected override async getInteractiveElement() {\n await this.element.updateComplete;\n const {primaryId} = this.element as unknown as {primaryId: string};\n const primaryAction =\n primaryId &&\n this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);\n // Retrieve MultiActionChip's trailingAction\n const {trailingAction} = this.element as {\n trailingAction?: HTMLElement | null;\n };\n\n // Default to trailing action if there isn't a primary action and the user\n // didn't explicitly set `harness.action = 'trailing'` (remove-only input\n // chips).\n if (this.action === 'trailing' || !primaryAction) {\n if (!trailingAction) {\n throw new Error(\n '`ChipHarness.action` is \"trailing\", but the chip does not have a trailing action.',\n );\n }\n\n return trailingAction;\n }\n\n if (!primaryAction) {\n throw new Error(\n '`ChipHarness.action` is \"primary\", but the chip does not have a primary action.',\n );\n }\n\n return primaryAction;\n }\n}\n"]}
@@ -18,7 +18,12 @@ import { styles as trailingIconStyles } from './internal/trailing-icon-styles.cs
18
18
  */
19
19
  export let MdInputChip = class MdInputChip extends InputChip {
20
20
  };
21
- MdInputChip.styles = [sharedStyles, trailingIconStyles, selectableStyles, styles];
21
+ MdInputChip.styles = [
22
+ sharedStyles,
23
+ trailingIconStyles,
24
+ selectableStyles,
25
+ styles,
26
+ ];
22
27
  MdInputChip = __decorate([
23
28
  customElement('md-input-chip')
24
29
  ], MdInputChip);
@@ -1 +1 @@
1
- {"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,WAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAClB,CAAC,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,CAAC,AAD1C,CAC2C;AAFtD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAGvB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles} from './internal/input-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-input-chip': MdInputChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n static override styles =\n [sharedStyles, trailingIconStyles, selectableStyles, styles];\n}\n"]}
1
+ {"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,WAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG;IACvB,YAAY;IACZ,kBAAkB;IAClB,gBAAgB;IAChB,MAAM;CACP,AALqB,CAKpB;AANS,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAOvB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles} from './internal/input-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-input-chip': MdInputChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n static override styles = [\n sharedStyles,\n trailingIconStyles,\n selectableStyles,\n styles,\n ];\n}\n"]}
@@ -38,21 +38,25 @@ export class AssistChip extends Chip {
38
38
  const { ariaLabel } = this;
39
39
  if (this.href) {
40
40
  return html `
41
- <a class="primary action"
41
+ <a
42
+ class="primary action"
42
43
  id="link"
43
44
  aria-label=${ariaLabel || nothing}
44
45
  href=${this.href}
45
46
  target=${this.target || nothing}
46
- >${content}</a>
47
+ >${content}</a
48
+ >
47
49
  `;
48
50
  }
49
51
  return html `
50
- <button class="primary action"
52
+ <button
53
+ class="primary action"
51
54
  id="button"
52
55
  aria-label=${ariaLabel || nothing}
53
56
  ?disabled=${this.disabled && !this.alwaysFocusable}
54
57
  type="button"
55
- >${content}</button>
58
+ >${content}</button
59
+ >
56
60
  `;
57
61
  }
58
62
  renderOutline() {
@@ -1 +1 @@
1
- {"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAyC,EAAE,CAAC;IAmDhE,CAAC;IAjDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,cAAc;QACnC,gCAAgC;QAChC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;IACrC,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,gCAAgC;YAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;uBAGM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;WAC9B,OAAO;OACX,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;;SAEjD,OAAO;KACX,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AArD4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAAmD","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n @property({type: Boolean}) elevated = false;\n @property() href = '';\n @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n\n protected get primaryId() {\n return this.href ? 'link' : 'button';\n }\n\n protected override get rippleDisabled() {\n // Link chips cannot be disabled\n return !this.href && this.disabled;\n }\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n // Link chips cannot be disabled\n disabled: !this.href && this.disabled,\n elevated: this.elevated,\n link: !!this.href,\n };\n }\n\n protected override renderPrimaryAction(content: unknown) {\n const {ariaLabel} = this as ARIAMixinStrict;\n if (this.href) {\n return html`\n <a class=\"primary action\"\n id=\"link\"\n aria-label=${ariaLabel || nothing}\n href=${this.href}\n target=${this.target || nothing}\n >${content}</a>\n `;\n }\n\n return html`\n <button class=\"primary action\"\n id=\"button\"\n aria-label=${ariaLabel || nothing}\n ?disabled=${this.disabled && !this.alwaysFocusable}\n type=\"button\"\n >${content}</button>\n `;\n }\n\n protected override renderOutline() {\n if (this.elevated) {\n return html`<md-elevation></md-elevation>`;\n }\n\n return super.renderOutline();\n }\n}\n"]}
1
+ {"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAiD,EAAE,CAAC;IAuDxE,CAAC;IArDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,cAAc;QACnC,gCAAgC;QAChC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;IACrC,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,gCAAgC;YAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;;uBAIM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;aAC5B,OAAO;;OAEb,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;;WAE/C,OAAO;;KAEb,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AAzD4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAA2D","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n @property({type: Boolean}) elevated = false;\n @property() href = '';\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n protected get primaryId() {\n return this.href ? 'link' : 'button';\n }\n\n protected override get rippleDisabled() {\n // Link chips cannot be disabled\n return !this.href && this.disabled;\n }\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n // Link chips cannot be disabled\n disabled: !this.href && this.disabled,\n elevated: this.elevated,\n link: !!this.href,\n };\n }\n\n protected override renderPrimaryAction(content: unknown) {\n const {ariaLabel} = this as ARIAMixinStrict;\n if (this.href) {\n return html`\n <a\n class=\"primary action\"\n id=\"link\"\n aria-label=${ariaLabel || nothing}\n href=${this.href}\n target=${this.target || nothing}\n >${content}</a\n >\n `;\n }\n\n return html`\n <button\n class=\"primary action\"\n id=\"button\"\n aria-label=${ariaLabel || nothing}\n ?disabled=${this.disabled && !this.alwaysFocusable}\n type=\"button\"\n >${content}</button\n >\n `;\n }\n\n protected override renderOutline() {\n if (this.elevated) {\n return html`<md-elevation></md-elevation>`;\n }\n\n return super.renderOutline();\n }\n}\n"]}
@@ -6,7 +6,7 @@
6
6
  import { __decorate } from "tslib";
7
7
  import { html, isServer, LitElement } from 'lit';
8
8
  import { queryAssignedElements } from 'lit/decorators.js';
9
- import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
9
+ import { polyfillARIAMixin, polyfillElementInternalsAria, } from '../../internal/aria/aria.js';
10
10
  import { Chip } from './chip.js';
11
11
  /**
12
12
  * A chip set component.
@@ -17,7 +17,9 @@ export class ChipSet extends LitElement {
17
17
  }
18
18
  constructor() {
19
19
  super();
20
- this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
20
+ this.internals = polyfillElementInternalsAria(this,
21
+ // Cast needed for closure
22
+ this.attachInternals());
21
23
  if (!isServer) {
22
24
  this.addEventListener('focusin', this.updateTabIndices.bind(this));
23
25
  this.addEventListener('update-focus', this.updateTabIndices.bind(this));
@@ -53,7 +55,7 @@ export class ChipSet extends LitElement {
53
55
  // Check if moving forwards or backwards
54
56
  const isRtl = getComputedStyle(this).direction === 'rtl';
55
57
  const forwards = isRtl ? isLeft : isRight;
56
- const focusedChip = chips.find(chip => chip.matches(':focus-within'));
58
+ const focusedChip = chips.find((chip) => chip.matches(':focus-within'));
57
59
  if (!focusedChip) {
58
60
  // If there is not already a chip focused, select the first or last chip
59
61
  // based on the direction we're traveling.
@@ -122,7 +124,7 @@ export class ChipSet extends LitElement {
122
124
  }
123
125
  }
124
126
  (() => {
125
- setupHostAria(ChipSet, { focusable: false });
127
+ polyfillARIAMixin(ChipSet);
126
128
  })();
127
129
  __decorate([
128
130
  queryAssignedElements()
@@ -1 +1 @@
1
- {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["chip-set.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 {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n static {\n setupHostAria(ChipSet, {focusable: false});\n }\n\n get chips() {\n return this.childElements.filter(\n (child): child is Chip => child instanceof Chip);\n }\n\n @queryAssignedElements() private readonly childElements!: HTMLElement[];\n private readonly internals = polyfillElementInternalsAria(\n this, (this as HTMLElement /* needed for closure */).attachInternals());\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('focusin', this.updateTabIndices.bind(this));\n this.addEventListener('update-focus', this.updateTabIndices.bind(this));\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n this.internals.role = 'toolbar';\n }\n }\n\n protected override render() {\n return html`<slot @slotchange=${this.updateTabIndices}></slot>`;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n const isHome = event.key === 'Home';\n const isEnd = event.key === 'End';\n // Ignore non-navigation keys\n if (!isLeft && !isRight && !isHome && !isEnd) {\n return;\n }\n\n const {chips} = this as {chips: MaybeMultiActionChip[]};\n // Don't try to select another chip if there aren't any.\n if (chips.length < 2) {\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n\n if (isHome || isEnd) {\n const index = isHome ? 0 : chips.length - 1;\n chips[index].focus({trailing: isEnd});\n this.updateTabIndices();\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const focusedChip = chips.find(chip => chip.matches(':focus-within'));\n if (!focusedChip) {\n // If there is not already a chip focused, select the first or last chip\n // based on the direction we're traveling.\n const nextChip = forwards ? chips[0] : chips[chips.length - 1];\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n return;\n }\n\n const currentIndex = chips.indexOf(focusedChip);\n let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;\n // Search for the next sibling that is not disabled to select.\n // If we return to the host index, there is nothing to select.\n while (nextIndex !== currentIndex) {\n if (nextIndex >= chips.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = chips.length - 1;\n }\n\n // Check if the next sibling is disabled. If so,\n // move the index and continue searching.\n //\n // Some toolbar items may be focusable when disabled for increased\n // visibility.\n const nextChip = chips[nextIndex];\n if (nextChip.disabled && !nextChip.alwaysFocusable) {\n if (forwards) {\n nextIndex++;\n } else {\n nextIndex--;\n }\n\n continue;\n }\n\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n break;\n }\n }\n\n private updateTabIndices() {\n // The chip that should be focusable is either the chip that currently has\n // focus or the first chip that can be focused.\n const {chips} = this;\n let chipToFocus: Chip|undefined;\n for (const chip of chips) {\n const isChipFocusable = chip.alwaysFocusable || !chip.disabled;\n const chipIsFocused = chip.matches(':focus-within');\n if (chipIsFocused && isChipFocusable) {\n // Found the first chip that is actively focused. This overrides the\n // first focusable chip found.\n chipToFocus = chip;\n continue;\n }\n\n if (isChipFocusable && !chipToFocus) {\n chipToFocus = chip;\n }\n\n // Disable non-focused chips. If we disable all of them, we'll grant focus\n // to the first focusable child that was found.\n chip.tabIndex = -1;\n }\n\n if (chipToFocus) {\n chipToFocus.tabIndex = 0;\n }\n }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n focus(options?: FocusOptions&{trailing?: boolean}): void;\n}\n"]}
1
+ {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["chip-set.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 {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {\n polyfillARIAMixin,\n polyfillElementInternalsAria,\n} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n static {\n polyfillARIAMixin(ChipSet);\n }\n\n get chips() {\n return this.childElements.filter(\n (child): child is Chip => child instanceof Chip,\n );\n }\n\n @queryAssignedElements() private readonly childElements!: HTMLElement[];\n private readonly internals = polyfillElementInternalsAria(\n this,\n // Cast needed for closure\n (this as HTMLElement).attachInternals(),\n );\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('focusin', this.updateTabIndices.bind(this));\n this.addEventListener('update-focus', this.updateTabIndices.bind(this));\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n this.internals.role = 'toolbar';\n }\n }\n\n protected override render() {\n return html`<slot @slotchange=${this.updateTabIndices}></slot>`;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n const isHome = event.key === 'Home';\n const isEnd = event.key === 'End';\n // Ignore non-navigation keys\n if (!isLeft && !isRight && !isHome && !isEnd) {\n return;\n }\n\n const {chips} = this as {chips: MaybeMultiActionChip[]};\n // Don't try to select another chip if there aren't any.\n if (chips.length < 2) {\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n\n if (isHome || isEnd) {\n const index = isHome ? 0 : chips.length - 1;\n chips[index].focus({trailing: isEnd});\n this.updateTabIndices();\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const focusedChip = chips.find((chip) => chip.matches(':focus-within'));\n if (!focusedChip) {\n // If there is not already a chip focused, select the first or last chip\n // based on the direction we're traveling.\n const nextChip = forwards ? chips[0] : chips[chips.length - 1];\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n return;\n }\n\n const currentIndex = chips.indexOf(focusedChip);\n let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;\n // Search for the next sibling that is not disabled to select.\n // If we return to the host index, there is nothing to select.\n while (nextIndex !== currentIndex) {\n if (nextIndex >= chips.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = chips.length - 1;\n }\n\n // Check if the next sibling is disabled. If so,\n // move the index and continue searching.\n //\n // Some toolbar items may be focusable when disabled for increased\n // visibility.\n const nextChip = chips[nextIndex];\n if (nextChip.disabled && !nextChip.alwaysFocusable) {\n if (forwards) {\n nextIndex++;\n } else {\n nextIndex--;\n }\n\n continue;\n }\n\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n break;\n }\n }\n\n private updateTabIndices() {\n // The chip that should be focusable is either the chip that currently has\n // focus or the first chip that can be focused.\n const {chips} = this;\n let chipToFocus: Chip | undefined;\n for (const chip of chips) {\n const isChipFocusable = chip.alwaysFocusable || !chip.disabled;\n const chipIsFocused = chip.matches(':focus-within');\n if (chipIsFocused && isChipFocusable) {\n // Found the first chip that is actively focused. This overrides the\n // first focusable chip found.\n chipToFocus = chip;\n continue;\n }\n\n if (isChipFocusable && !chipToFocus) {\n chipToFocus = chip;\n }\n\n // Disable non-focused chips. If we disable all of them, we'll grant focus\n // to the first focusable child that was found.\n chip.tabIndex = -1;\n }\n\n if (chipToFocus) {\n chipToFocus.tabIndex = 0;\n }\n }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n focus(options?: FocusOptions & {trailing?: boolean}): void;\n}\n"]}
@@ -9,6 +9,8 @@ import { LitElement, PropertyValues, TemplateResult } from 'lit';
9
9
  import { ClassInfo } from 'lit/directives/class-map.js';
10
10
  /**
11
11
  * A chip component.
12
+ *
13
+ * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles
12
14
  */
13
15
  export declare abstract class Chip extends LitElement {
14
16
  /** @nocollapse */
@@ -37,6 +39,7 @@ export declare abstract class Chip extends LitElement {
37
39
  label: string;
38
40
  /**
39
41
  * The `id` of the action the primary focus ring and ripple are for.
42
+ * TODO(b/310046938): use the same id for both elements
40
43
  */
41
44
  protected abstract readonly primaryId: string;
42
45
  /**