@shortfuse/materialdesignweb 0.3.0 → 0.4.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 (398) hide show
  1. package/.eslintrc.json +136 -30
  2. package/.stylelintrc.json +6 -40
  3. package/.vscode/launch.json +20 -5
  4. package/CHANGELOG.md +24 -0
  5. package/README.md +12 -9
  6. package/adapters/datatable/column.js +82 -74
  7. package/adapters/datatable/index.js +173 -131
  8. package/adapters/dom/index.js +529 -75
  9. package/adapters/list/index.js +25 -12
  10. package/adapters/search/index.js +13 -13
  11. package/components/appbar/_spec.scss +87 -64
  12. package/components/appbar/index.scss +2 -2
  13. package/components/banner/_spec.scss +8 -8
  14. package/components/banner/index.scss +2 -2
  15. package/components/bottomnav/_spec.scss +22 -17
  16. package/components/bottomnav/index.js +61 -52
  17. package/components/bottomnav/index.scss +2 -2
  18. package/components/bottomnav/item.js +44 -25
  19. package/components/button/README.md +14 -14
  20. package/components/button/_spec.scss +23 -22
  21. package/components/button/_theme.scss +37 -21
  22. package/components/button/index.eta +32 -0
  23. package/components/button/index.js +12 -12
  24. package/components/button/index.scss +2 -2
  25. package/components/card/_spec.scss +40 -36
  26. package/components/card/index.scss +2 -2
  27. package/components/chip/_spec.scss +7 -8
  28. package/components/chip/_theme.scss +31 -31
  29. package/components/chip/index.js +3 -2
  30. package/components/chip/index.scss +2 -2
  31. package/components/chip/item.js +1 -16
  32. package/components/datatable/_spec.scss +71 -85
  33. package/components/datatable/_theme.scss +61 -156
  34. package/components/datatable/cell.js +45 -0
  35. package/components/datatable/columnheader.js +47 -0
  36. package/components/datatable/index.js +279 -366
  37. package/components/datatable/index.scss +2 -2
  38. package/components/datatable/row.js +49 -0
  39. package/components/datatable/rowheader.js +18 -0
  40. package/components/dialog/_spec.scss +61 -41
  41. package/components/dialog/index.js +325 -297
  42. package/components/dialog/index.scss +2 -2
  43. package/components/divider/_spec.scss +8 -6
  44. package/components/divider/index.scss +2 -2
  45. package/components/elevation/_spec.scss +2 -2
  46. package/components/elevation/index.scss +2 -2
  47. package/components/fab/_spec.scss +23 -24
  48. package/components/fab/index.js +50 -50
  49. package/components/fab/index.scss +2 -2
  50. package/components/grid/_spec.scss +33 -31
  51. package/components/grid/index.scss +2 -2
  52. package/components/layout/_mixins.scss +5 -5
  53. package/components/layout/_spec.scss +206 -176
  54. package/components/layout/_theme.scss +14 -16
  55. package/components/layout/index.js +181 -153
  56. package/components/layout/index.scss +2 -2
  57. package/components/list/_spec.scss +117 -104
  58. package/components/list/_theme.scss +31 -34
  59. package/components/list/content.js +68 -52
  60. package/components/list/index.js +194 -61
  61. package/components/list/index.scss +2 -2
  62. package/components/list/item.js +136 -12
  63. package/components/list/secondary.js +46 -0
  64. package/components/menu/_spec.scss +32 -19
  65. package/components/menu/index.js +242 -229
  66. package/components/menu/index.scss +2 -2
  67. package/components/menu/item.js +95 -110
  68. package/components/progress/_spec.scss +35 -27
  69. package/components/progress/index.js +21 -0
  70. package/components/progress/index.scss +2 -1
  71. package/components/selection/_spec.scss +242 -224
  72. package/components/selection/_theme.scss +100 -95
  73. package/components/selection/index.eta +60 -0
  74. package/components/selection/index.js +76 -0
  75. package/components/selection/index.pug +15 -8
  76. package/components/selection/index.scss +2 -2
  77. package/components/selection/input.js +56 -0
  78. package/components/selection/radiogroup.js +47 -0
  79. package/components/slider/_spec.scss +10 -8
  80. package/components/slider/index.scss +2 -2
  81. package/components/snackbar/_spec.scss +22 -21
  82. package/components/snackbar/index.js +102 -111
  83. package/components/snackbar/index.scss +2 -2
  84. package/components/tab/_spec.scss +20 -19
  85. package/components/tab/content.js +41 -40
  86. package/components/tab/index.js +192 -99
  87. package/components/tab/index.scss +2 -2
  88. package/components/tab/item.js +38 -55
  89. package/components/tab/list.js +96 -72
  90. package/components/tab/panel.js +12 -13
  91. package/components/template/_theme.scss +11 -11
  92. package/components/textfield/_mixins.scss +52 -0
  93. package/components/textfield/_spec.scss +215 -266
  94. package/components/textfield/_theme.scss +95 -72
  95. package/components/textfield/index.eta +74 -0
  96. package/components/textfield/index.js +63 -57
  97. package/components/textfield/index.scss +2 -2
  98. package/components/tooltip/_spec.scss +27 -25
  99. package/components/tooltip/index.scss +2 -2
  100. package/components/type/_spec.scss +51 -38
  101. package/components/type/index.scss +2 -2
  102. package/core/_breakpoint.scss +75 -91
  103. package/core/_elevation.scss +10 -10
  104. package/core/_length.scss +9 -0
  105. package/core/_motion.scss +14 -14
  106. package/core/_platform.scss +9 -15
  107. package/core/_type.scss +33 -32
  108. package/core/aria/attributes.js +125 -25
  109. package/core/aria/button.js +23 -23
  110. package/core/aria/keyboard.js +93 -0
  111. package/core/aria/rovingtabindex.js +69 -154
  112. package/core/aria/tab.js +31 -28
  113. package/core/color/_theme.scss +240 -280
  114. package/core/color/index.scss +2 -2
  115. package/core/document/index.js +39 -0
  116. package/core/dom.js +12 -12
  117. package/core/overlay/_spec.scss +0 -3
  118. package/core/overlay/_theme.scss +56 -74
  119. package/core/overlay/index.js +49 -18
  120. package/core/overlay/index.scss +2 -2
  121. package/core/ripple/_spec.scss +22 -39
  122. package/core/ripple/_theme.scss +13 -13
  123. package/core/ripple/index.js +137 -134
  124. package/core/ripple/index.scss +2 -2
  125. package/core/theme/_config.scss +2 -0
  126. package/core/theme/_mixins.scss +172 -0
  127. package/core/theme/_palettes.scss +155 -135
  128. package/core/theme/_variables.scss +24 -15
  129. package/core/theme/index.js +50 -0
  130. package/core/throttler.js +1 -1
  131. package/core/transition/index.js +36 -20
  132. package/{docs-src → docs}/_flex.scss +0 -0
  133. package/{docs-src → docs}/_menuoptions.js +21 -34
  134. package/{docs-src → docs}/_mixins.pug +39 -26
  135. package/docs/_partials/_androidnavbar.eta +5 -0
  136. package/docs/_partials/_androidstatusbar.eta +13 -0
  137. package/docs/_partials/_appbar.eta +29 -0
  138. package/docs/_partials/_buttontest.eta +31 -0
  139. package/docs/_partials/_header.eta +149 -0
  140. package/docs/_partials/_navlistitem.eta +16 -0
  141. package/docs/_partials/_target.eta +1 -0
  142. package/{docs-src → docs}/_sample-utils.js +8 -6
  143. package/{docs-src → docs}/_storage.js +0 -0
  144. package/{docs-src → docs}/docs.scss +5 -2
  145. package/docs/index.eta +16 -0
  146. package/{docs-src → docs}/index.js +0 -0
  147. package/docs/pages/appbar.eta +114 -0
  148. package/{docs-src/components → docs/pages}/appbar.js +0 -0
  149. package/{docs-src/components → docs/pages}/appbar.pug +15 -18
  150. package/docs/pages/bottomnav.eta +188 -0
  151. package/{docs-src/components → docs/pages}/bottomnav.js +23 -24
  152. package/{docs-src/components → docs/pages}/bottomnav.pug +4 -4
  153. package/docs/pages/button.eta +124 -0
  154. package/{docs-src/components → docs/pages}/button.js +19 -19
  155. package/{docs-src/components → docs/pages}/button.pug +15 -15
  156. package/docs/pages/card.eta +90 -0
  157. package/{docs-src/components → docs/pages}/card.js +3 -3
  158. package/{docs-src/components → docs/pages}/card.pug +7 -7
  159. package/docs/pages/chip.eta +122 -0
  160. package/{docs-src/components → docs/pages}/chip.js +3 -6
  161. package/{docs-src/components → docs/pages}/chip.pug +2 -2
  162. package/docs/pages/color.eta +143 -0
  163. package/{docs-src/core → docs/pages}/color.js +95 -20
  164. package/docs/pages/color.pug +121 -0
  165. package/docs/pages/datatable.eta +323 -0
  166. package/{docs-src/components → docs/pages}/datatable.js +26 -13
  167. package/docs/pages/datatable.pug +283 -0
  168. package/docs/pages/dialog.eta +186 -0
  169. package/{docs-src/components → docs/pages}/dialog.js +26 -13
  170. package/{docs-src/components → docs/pages}/dialog.pug +46 -28
  171. package/docs/pages/dom.eta +26 -0
  172. package/docs/pages/dom.js +143 -0
  173. package/docs/pages/dom.pug +22 -0
  174. package/docs/pages/elevation.eta +35 -0
  175. package/{docs-src/components → docs/pages}/elevation.js +0 -0
  176. package/{docs-src/components → docs/pages}/elevation.pug +0 -0
  177. package/docs/pages/fab.eta +99 -0
  178. package/{docs-src/components → docs/pages}/fab.js +3 -3
  179. package/{docs-src/components → docs/pages}/fab.pug +2 -2
  180. package/docs/pages/grid.eta +135 -0
  181. package/{docs-src/components → docs/pages}/grid.js +1 -1
  182. package/{docs-src/components → docs/pages}/grid.pug +3 -3
  183. package/docs/pages/layout.eta +8 -0
  184. package/{docs-src/components → docs/pages}/layout.js +0 -0
  185. package/{docs-src/components → docs/pages}/layout.pug +0 -0
  186. package/docs/pages/list.eta +465 -0
  187. package/{docs-src/components → docs/pages}/list.js +2 -2
  188. package/{docs-src/components → docs/pages}/list.pug +7 -14
  189. package/docs/pages/menu.eta +276 -0
  190. package/{docs-src/components → docs/pages}/menu.js +14 -10
  191. package/{docs-src/components → docs/pages}/menu.pug +0 -0
  192. package/docs/pages/overlay.eta +69 -0
  193. package/docs/pages/overlay.js +4 -0
  194. package/{docs-src/core → docs/pages}/overlay.pug +14 -11
  195. package/docs/pages/progress.eta +23 -0
  196. package/{docs-src/components → docs/pages}/progress.js +1 -1
  197. package/{docs-src/components → docs/pages}/progress.pug +1 -1
  198. package/docs/pages/ripple.eta +27 -0
  199. package/docs/pages/ripple.js +4 -0
  200. package/{docs-src/core → docs/pages}/ripple.pug +4 -4
  201. package/docs/pages/search.eta +246 -0
  202. package/{docs-src/components → docs/pages}/search.js +59 -42
  203. package/{docs-src/components → docs/pages}/search.pug +50 -51
  204. package/docs/pages/selection.eta +111 -0
  205. package/docs/pages/selection.js +13 -0
  206. package/docs/pages/selection.pug +74 -0
  207. package/docs/pages/slider.eta +23 -0
  208. package/{docs-src/components → docs/pages}/slider.js +0 -0
  209. package/{docs-src/components → docs/pages}/slider.pug +0 -0
  210. package/docs/pages/snackbar.eta +83 -0
  211. package/{docs-src/components → docs/pages}/snackbar.js +3 -3
  212. package/{docs-src/components → docs/pages}/snackbar.pug +0 -0
  213. package/docs/pages/tab.eta +421 -0
  214. package/{docs-src/components → docs/pages}/tab.js +18 -35
  215. package/{docs-src/components → docs/pages}/tab.pug +4 -4
  216. package/docs/pages/textfield.eta +486 -0
  217. package/{docs-src/components → docs/pages}/textfield.js +3 -4
  218. package/{docs-src/components → docs/pages}/textfield.pug +87 -35
  219. package/docs/pages/tooltip.eta +94 -0
  220. package/{docs-src/components → docs/pages}/tooltip.js +0 -0
  221. package/{docs-src/components → docs/pages}/tooltip.pug +0 -1
  222. package/docs/pages/transition.eta +117 -0
  223. package/{docs-src/core → docs/pages}/transition.js +7 -8
  224. package/{docs-src/core → docs/pages}/transition.pug +0 -0
  225. package/docs/pages/type.eta +31 -0
  226. package/{docs-src/components → docs/pages}/type.js +0 -0
  227. package/{docs-src/components → docs/pages}/type.pug +0 -1
  228. package/docs/postrender.js +39 -0
  229. package/{docs-src → docs}/prerender.js +3 -9
  230. package/docs/pwa/_dialogs.eta +143 -0
  231. package/docs/pwa/_dialogs.pug +96 -0
  232. package/docs/pwa/_menus.eta +16 -0
  233. package/{docs-src → docs}/pwa/_menus.pug +0 -0
  234. package/docs/pwa/pwa-prerender.js +3 -0
  235. package/docs/pwa/pwa.eta +480 -0
  236. package/docs/pwa/pwa.js +306 -0
  237. package/{docs-src → docs}/pwa/pwa.pug +166 -263
  238. package/docs/pwa/pwa.scss +26 -0
  239. package/docs/spec.scss +26 -0
  240. package/docs/themes/_component-themes.scss +26 -0
  241. package/docs/themes/theme-colored-fallbacks.scss +17 -0
  242. package/docs/themes/theme-colored.scss +17 -0
  243. package/docs/themes/theme-default-fallbacks.scss +17 -0
  244. package/docs/themes/theme-default.scss +17 -0
  245. package/jsconfig.json +4 -2
  246. package/package.json +40 -27
  247. package/scripts/deploy-docs.sh +9 -0
  248. package/templates/index.eta +2 -0
  249. package/utils/function.js +3 -0
  250. package/webpack.config.cjs +257 -0
  251. package/_spec.scss +0 -27
  252. package/_theme.scss +0 -27
  253. package/components/list/expander.js +0 -142
  254. package/components/list/itemgroup.js +0 -22
  255. package/core/theme/_builder.scss +0 -116
  256. package/core/theme/index.scss +0 -68
  257. package/docs/appbar.html +0 -1
  258. package/docs/appbar.min.js +0 -2
  259. package/docs/appbar.min.js.map +0 -1
  260. package/docs/bottomnav.html +0 -1
  261. package/docs/bottomnav.min.js +0 -2
  262. package/docs/bottomnav.min.js.map +0 -1
  263. package/docs/button.html +0 -1
  264. package/docs/button.min.js +0 -2
  265. package/docs/button.min.js.map +0 -1
  266. package/docs/card.html +0 -1
  267. package/docs/card.min.js +0 -2
  268. package/docs/card.min.js.map +0 -1
  269. package/docs/chip.html +0 -1
  270. package/docs/chip.min.js +0 -2
  271. package/docs/chip.min.js.map +0 -1
  272. package/docs/color.html +0 -1
  273. package/docs/color.min.js +0 -2
  274. package/docs/color.min.js.map +0 -1
  275. package/docs/datatable.html +0 -1
  276. package/docs/datatable.min.js +0 -2
  277. package/docs/datatable.min.js.map +0 -1
  278. package/docs/default.common.min.js +0 -2
  279. package/docs/default.common.min.js.map +0 -1
  280. package/docs/dialog.html +0 -1
  281. package/docs/dialog.min.js +0 -2
  282. package/docs/dialog.min.js.map +0 -1
  283. package/docs/docs.min.css +0 -1
  284. package/docs/docs.min.js +0 -2
  285. package/docs/docs.min.js.map +0 -1
  286. package/docs/elevation.html +0 -1
  287. package/docs/elevation.min.js +0 -2
  288. package/docs/elevation.min.js.map +0 -1
  289. package/docs/fab.html +0 -1
  290. package/docs/fab.min.js +0 -2
  291. package/docs/fab.min.js.map +0 -1
  292. package/docs/grid.html +0 -1
  293. package/docs/grid.min.js +0 -2
  294. package/docs/grid.min.js.map +0 -1
  295. package/docs/index.html +0 -1
  296. package/docs/index.min.js +0 -2
  297. package/docs/index.min.js.map +0 -1
  298. package/docs/ink.html +0 -1
  299. package/docs/ink.min.js +0 -2
  300. package/docs/ink.min.js.map +0 -1
  301. package/docs/layout.html +0 -1
  302. package/docs/layout.min.js +0 -2
  303. package/docs/layout.min.js.map +0 -1
  304. package/docs/list.html +0 -1
  305. package/docs/list.min.js +0 -2
  306. package/docs/list.min.js.map +0 -1
  307. package/docs/menu.html +0 -1
  308. package/docs/menu.min.js +0 -2
  309. package/docs/menu.min.js.map +0 -1
  310. package/docs/overlay.html +0 -1
  311. package/docs/overlay.min.js +0 -2
  312. package/docs/overlay.min.js.map +0 -1
  313. package/docs/prerender.common.min.js +0 -2
  314. package/docs/prerender.common.min.js.map +0 -1
  315. package/docs/prerender.min.js +0 -2
  316. package/docs/prerender.min.js.map +0 -1
  317. package/docs/progress.html +0 -1
  318. package/docs/progress.min.js +0 -2
  319. package/docs/progress.min.js.map +0 -1
  320. package/docs/pwa-prerender.min.js +0 -2
  321. package/docs/pwa-prerender.min.js.map +0 -1
  322. package/docs/pwa.html +0 -11
  323. package/docs/pwa.min.css +0 -1
  324. package/docs/pwa.min.js +0 -2
  325. package/docs/pwa.min.js.map +0 -1
  326. package/docs/ripple.html +0 -1
  327. package/docs/ripple.min.js +0 -2
  328. package/docs/ripple.min.js.map +0 -1
  329. package/docs/search.html +0 -1
  330. package/docs/search.min.js +0 -2
  331. package/docs/search.min.js.map +0 -1
  332. package/docs/selection.html +0 -1
  333. package/docs/selection.min.js +0 -2
  334. package/docs/selection.min.js.map +0 -1
  335. package/docs/slider.html +0 -1
  336. package/docs/slider.min.js +0 -2
  337. package/docs/slider.min.js.map +0 -1
  338. package/docs/snackbar.html +0 -1
  339. package/docs/snackbar.min.js +0 -2
  340. package/docs/snackbar.min.js.map +0 -1
  341. package/docs/spec.min.css +0 -1
  342. package/docs/spec.min.js +0 -2
  343. package/docs/spec.min.js.map +0 -1
  344. package/docs/surface.html +0 -1
  345. package/docs/surface.min.js +0 -2
  346. package/docs/surface.min.js.map +0 -1
  347. package/docs/tab.html +0 -1
  348. package/docs/tab.min.js +0 -2
  349. package/docs/tab.min.js.map +0 -1
  350. package/docs/textfield.html +0 -2
  351. package/docs/textfield.min.js +0 -2
  352. package/docs/textfield.min.js.map +0 -1
  353. package/docs/theme-colored-fallbacks.min.css +0 -1
  354. package/docs/theme-colored-fallbacks.min.js +0 -2
  355. package/docs/theme-colored-fallbacks.min.js.map +0 -1
  356. package/docs/theme-colored.min.css +0 -1
  357. package/docs/theme-colored.min.js +0 -2
  358. package/docs/theme-colored.min.js.map +0 -1
  359. package/docs/theme-default-fallbacks.min.css +0 -1
  360. package/docs/theme-default-fallbacks.min.js +0 -2
  361. package/docs/theme-default-fallbacks.min.js.map +0 -1
  362. package/docs/theme-default.min.css +0 -1
  363. package/docs/theme-default.min.js +0 -2
  364. package/docs/theme-default.min.js.map +0 -1
  365. package/docs/themes-fallbacks.min.css +0 -1
  366. package/docs/themes-fallbacks.min.js +0 -2
  367. package/docs/themes-fallbacks.min.js.map +0 -1
  368. package/docs/themes.min.css +0 -1
  369. package/docs/themes.min.js +0 -2
  370. package/docs/themes.min.js.map +0 -1
  371. package/docs/tooltip.html +0 -1
  372. package/docs/tooltip.min.js +0 -2
  373. package/docs/tooltip.min.js.map +0 -1
  374. package/docs/transition.html +0 -1
  375. package/docs/transition.min.js +0 -2
  376. package/docs/transition.min.js.map +0 -1
  377. package/docs/type.html +0 -1
  378. package/docs/type.min.js +0 -2
  379. package/docs/type.min.js.map +0 -1
  380. package/docs-src/components/datatable.pug +0 -327
  381. package/docs-src/components/selection.js +0 -9
  382. package/docs-src/components/selection.pug +0 -77
  383. package/docs-src/core/color.pug +0 -201
  384. package/docs-src/core/overlay.js +0 -4
  385. package/docs-src/core/ripple.js +0 -4
  386. package/docs-src/index.pug +0 -9
  387. package/docs-src/pwa/_dialogs.pug +0 -15
  388. package/docs-src/pwa/pwa-prerender.js +0 -3
  389. package/docs-src/pwa/pwa.js +0 -182
  390. package/docs-src/pwa/pwa.scss +0 -25
  391. package/docs-src/spec.scss +0 -1
  392. package/docs-src/themes/theme-colored-fallbacks.scss +0 -14
  393. package/docs-src/themes/theme-colored.scss +0 -14
  394. package/docs-src/themes/theme-default-fallbacks.scss +0 -14
  395. package/docs-src/themes/theme-default.scss +0 -14
  396. package/index.js +0 -51
  397. package/index.scss +0 -2
  398. package/webpack.config.js +0 -187
package/docs/tab.html DELETED
@@ -1 +0,0 @@
1
- <!DOCTYPE html><html class="mdw-layout mdw-theme" lang="en"><head><title>Material Design Web</title><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="Material Design Web - CSS/JS Framework" name="description"><meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"><meta name="theme-color" content="#C2185B"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:300,400,500"><link rel="stylesheet" href="docs.min.css"><link rel="stylesheet" href="spec.min.css"><link rel="stylesheet" href="theme-default.min.css"><link rel="stylesheet" href="theme-default-fallbacks.min.css" media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)"><link rel="stylesheet" disabled href="theme-colored.min.css" title="alt"><link rel="stylesheet" disabled href="theme-colored-fallbacks.min.css" media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)" title="alt"><script src="prerender.common.min.js"></script><script src="prerender.min.js"></script></head><body class="mdw-layout__body mdw-theme" mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal"><div class="mdw-layout__menus"></div><div class="mdw-layout__dialogs"></div><nav class="mdw-layout__navdrawer"><div class="mdw-layout__sheet-content mdw-theme" mdw-surface="background" mdw-border-ink><ul class="mdw-list" role="tree"><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="index.html" mdw-ink="default"><div class="mdw-list__text">Home</div></a></li><li class="mdw-list__expander mdw-theme" aria-expanded="true"><span class="mdw-list__expander-content mdw-list__subheader"><div class="mdw-list__text mdw-theme" mdw-ink="medium">Core</div><div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div></span><ul class="mdw-list__item-group" role="group"><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="color.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">compare</div><div class="mdw-list__text"><div class="mdw-list__text-block">Color</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="overlay.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">tonality</div><div class="mdw-list__text"><div class="mdw-list__text-block">Overlay</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="ripple.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">center_focus_strong</div><div class="mdw-list__text"><div class="mdw-list__text-block">Ripple</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="transition.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">open_in_new</div><div class="mdw-list__text"><div class="mdw-list__text-block">Transition</div></div></a></li></ul></li><li class="mdw-list__expander mdw-theme" aria-expanded="true"><span class="mdw-list__expander-content mdw-list__subheader"><div class="mdw-list__text mdw-theme" mdw-ink="medium">Components</div><div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div></span><ul class="mdw-list__item-group" role="group"><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="appbar.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">web_asset</div><div class="mdw-list__text"><div class="mdw-list__text-block">App Bar</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="bottomnav.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">call_to_action</div><div class="mdw-list__text"><div class="mdw-list__text-block">Bottom Navigation</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="button.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">crop_landscape</div><div class="mdw-list__text"><div class="mdw-list__text-block">Button</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="card.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">crop_square</div><div class="mdw-list__text"><div class="mdw-list__text-block">Card</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="chip.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">check_circle</div><div class="mdw-list__text"><div class="mdw-list__text-block">Chip</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="datatable.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">format_align_justify</div><div class="mdw-list__text"><div class="mdw-list__text-block">Data Table</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="dialog.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">select_all</div><div class="mdw-list__text"><div class="mdw-list__text-block">Dialog</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="elevation.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">layers</div><div class="mdw-list__text"><div class="mdw-list__text-block">Elevation</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="fab.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">add_circle</div><div class="mdw-list__text"><div class="mdw-list__text-block">Floating Action Button</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="grid.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">view_compact</div><div class="mdw-list__text"><div class="mdw-list__text-block">Grid</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="layout.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">view_quilt</div><div class="mdw-list__text"><div class="mdw-list__text-block">Layout</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="list.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">view_list</div><div class="mdw-list__text"><div class="mdw-list__text-block">List</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="menu.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">picture_in_picture</div><div class="mdw-list__text"><div class="mdw-list__text-block">Menu</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="progress.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">timelapse</div><div class="mdw-list__text"><div class="mdw-list__text-block">Progress</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="search.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">search</div><div class="mdw-list__text"><div class="mdw-list__text-block">Search</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="selection.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">toggle_on</div><div class="mdw-list__text"><div class="mdw-list__text-block">Selection</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="slider.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">tune</div><div class="mdw-list__text"><div class="mdw-list__text-block">Slider</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="snackbar.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">video_label</div><div class="mdw-list__text"><div class="mdw-list__text-block">Snackbar</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-current="page" aria-selected="true" href="tab.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">tab</div><div class="mdw-list__text"><div class="mdw-list__text-block">Tab</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="textfield.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">text_fields</div><div class="mdw-list__text"><div class="mdw-list__text-block">Text Field</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="tooltip.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">info</div><div class="mdw-list__text"><div class="mdw-list__text-block">Tooltip</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="type.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">font_download</div><div class="mdw-list__text"><div class="mdw-list__text-block">Typography</div></div></a></li></ul></li></ul></div></nav><div class="mdw-layout__scrim"></div><div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark><div class="mdw-layout__appbar-shape"></div><div class="mdw-appbar__action"><div class="mdw-appbar__start"><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle" mdw-icon="" tabindex="0" href="#docs-navdrawer">menu</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div></div></div><div class="mdw-appbar__title">tab</div><div class="mdw-appbar__end" id="docs-menu-buttons"><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="altThemeButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">palette</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div></div><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="darkModeButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">brightness_3</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div></div><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="rtlButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">format_align_right</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div></div><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="largeFontButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">format_size</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div></div></div></div></div><div class="mdw-layout__fab"></div><div class="mdw-layout__snackbar"></div><div class="mdw-layout__content"><div class="mdw-layout__content-page"><div class="mdw-grid docs-tab" mdw-margin-top mdw-margin-bottom mdw-stretch><div class="mdw-grid__item" mdw-colspan="100%"><h5 class="mdw-type" mdw-baseline-next="36">Tabs make it easy to explore and switch between different views.</h5><p class="mdw-type">Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.</p></div><div class="mdw-grid__item" mdw-colspan="8"><div class="mdw-grid__content"><div class="component-sample"><div class="component-sample__container"><div class="mdw-tab"><div class="mdw-tab__list"><div class="mdw-tab__item mdw-theme" mdw-ink="secondary A200" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">looks_one</div><div class="mdw-tab__label">Tab Item One</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="secondary A200" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">looks_two</div><div class="mdw-tab__label">Tab Item Two</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="secondary A200" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">looks_3</div><div class="mdw-tab__label">Tab Item Three</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="secondary A200"></div></div><div class="mdw-tab__content mdw-theme" mdw-surface="gray 800" mdw-dark><div class="mdw-tab__panel"><div style="min-height:200px;padding:20px"><p>Sample Content One</p><a class="mdw-button mdw-overlay mdw-ripple mdw-theme" mdw-border-ink="" tabindex="0">Unfocusable when inactive</a><p>HTML Ordered List with (#) representing DOM position</p><ol><li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li><li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li><li>(3) Always visible</li><li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li><li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li><li>(6) Always visible</li></ol></div></div><div class="mdw-tab__panel"><div style="min-height:200px;padding:20px"><p>Sample Content Two</p><a class="mdw-button mdw-overlay mdw-ripple mdw-theme" mdw-border-ink="" tabindex="0">Unfocusable when inactive</a><p>HTML Ordered List with (#) representing DOM position</p><ol><li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li><li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li><li>(3) Always visible</li><li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li><li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li><li>(6) Always visible</li></ol></div></div><div class="mdw-tab__panel"><div style="min-height:200px;padding:20px"><p>Sample Content Three</p><a class="mdw-button mdw-overlay mdw-ripple mdw-theme" mdw-border-ink="" tabindex="0">Unfocusable when inactive</a><p>HTML Ordered List with (#) representing DOM position</p><ol><li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li><li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li><li>(3) Always visible</li><li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li><li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li><li>(6) Always visible</li></ol></div></div></div></div></div></div></div></div><div class="mdw-grid__item" mdw-colspan="4"><div class="mdw-type" mdw-style="subtitle">Javascript</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="javascript" value="required"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Required</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" disabled="" aria-disabled="true" name="javascript" value="optional"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Optional</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" disabled="" aria-disabled="true" name="javascript" value="none"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">None</div></label></div><div class="mdw-type" mdw-style="subtitle">Ink</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="default"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Default</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="primary 400"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Primary A400</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="ink" value="secondary A200"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Secondary A200</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="warn"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Warn</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="purple A400"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Purple A400</div></label></div><div class="mdw-type" mdw-style="subtitle">Surface</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="surface" value="none"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">None</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="surface" value="primary dark"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Primary (Dark)</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="surface" value="secondary 100 dark"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Secondary 100 (Dark)</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="surface" value="warn 200 light"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Warn 200 (Light)</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="surface" value="dark 700 dark"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Green 700 (Dark)</div></label></div><div class="mdw-type" mdw-style="subtitle">Scrollable</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" checked="" name="content-scrollable"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Content</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="tabs-scrollable"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Tabs</div></label></div></div><div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0"></div><div class="mdw-grid__item" mdw-colspan="8"><h6 class="mdw-type">HTML Code</h6><div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink><a class="mdw-button mdw-overlay mdw-ripple mdw-theme" mdw-ink="secondary" mdw-icon="" tabindex="0" id="usePug" aria-pressed="false" mdw-overlay-off="activated">PUG</a></div></div><div class="mdw-grid__item" mdw-colspan="4"><h6 class="mdw-type">Javascript Code</h6><div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div></div><div class="mdw-grid__item" mdw-colspan="100%"><h6 class="mdw-type">Samples</h6></div><div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4"><div class="render-fill"><div class="mdw-tab"><div class="mdw-tab__list mdw-theme" mdw-surface="cyan 500" mdw-dark><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item One</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Two</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Three</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div></div><div class="mdw-tab__content"><div class="mdw-tab__panel">Item One</div><div class="mdw-tab__panel">Item Two</div><div class="mdw-tab__panel">Item Three</div></div></div></div></div><div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="cyan 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark mdw-prominent><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Page title</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab"><div class="mdw-tab__list"><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item One</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Two</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Three</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div></div></div></div><div class="content"></div></div></div><div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="cyan 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-tab"><div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Page title</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab__list"><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item One</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Two</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Three</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div></div></div><div class="mdw-tab__content"><div class="mdw-tab__panel">Item One</div><div class="mdw-tab__panel">Item Two</div><div class="mdw-tab__panel">Item Three</div></div></div></div></div><div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="background 600" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-tab"><div class="mdw-tab__list-wrapper mdw-appbar"><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Page title</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab__list"><div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium"><div class="mdw-tab__label">Item One</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Two</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium"><div class="mdw-tab__label">Item Three</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="cyan A700"></div></div></div><div class="mdw-tab__content"><div class="mdw-tab__panel">Item One</div><div class="mdw-tab__panel">Item Two</div><div class="mdw-tab__panel">Item Three</div></div></div></div></div><div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="cyan 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Page title</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab"><div class="mdw-tab__list"><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">phone</div><div class="mdw-tab__label">Recents</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">favorite</div><div class="mdw-tab__label">Favorites</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">person_pin</div><div class="mdw-tab__label">Nearby</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div></div></div></div><div class="content"></div></div></div><div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="background 600" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar"><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Page title</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab"><div class="mdw-tab__list"><div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">phone</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">favorite</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">person_pin</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="cyan A700"></div></div></div></div><div class="content"></div></div></div><div class="mdw-grid__item display-flex" mdw-colspan="100%"><div class="display-flex" flex-column style="width:100%;padding:24px;box-sizing:border-box"><div class="androidstatusbar mdw-theme" mdw-surface="cyan 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-tab"><div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Clustered</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab__list" style="align-self:center"><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">phone</div><div class="mdw-tab__label">Recents</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">favorite</div><div class="mdw-tab__label">Favorites</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">person_pin</div><div class="mdw-tab__label">Nearby</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div></div></div><div class="mdw-tab__content"><div class="mdw-tab__panel">Recents</div><div class="mdw-tab__panel">Favorites</div><div class="mdw-tab__panel">Nearby</div></div></div></div></div><div class="mdw-grid__item" mdw-colspan="100%"><div class="mdw-grid__content js"><div class="androidstatusbar mdw-theme" mdw-surface="cyan 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-tab"><div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">menu</a></div><div class="mdw-appbar__title">Scrollable</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div><div class="mdw-tab__list" mdw-scrollable><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">phone</div><div class="mdw-tab__label">Recents</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">favorite</div><div class="mdw-tab__label">My Oversized Favorites Tab</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">person_pin</div><div class="mdw-tab__label">Nearby</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">edit</div><div class="mdw-tab__label">Edit</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">clear</div><div class="mdw-tab__label">Clear</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">search</div><div class="mdw-tab__label">Search</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">restore</div><div class="mdw-tab__label">Restore</div></div><div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium"><div class="mdw-tab__icon material-icons">stars</div><div class="mdw-tab__label">Stars</div></div><div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div></div></div><div class="mdw-tab__content"><div class="mdw-tab__panel">1</div><div class="mdw-tab__panel">2</div><div class="mdw-tab__panel">3</div><div class="mdw-tab__panel">4</div><div class="mdw-tab__panel">5</div><div class="mdw-tab__panel">6</div><div class="mdw-tab__panel">7</div><div class="mdw-tab__panel">8</div></div></div></div></div></div><script src="tab.min.js"></script></div></div></body><script src="default.common.min.js"></script></html>
package/docs/tab.min.js DELETED
@@ -1,2 +0,0 @@
1
- !function(e){function t(t){for(var a,s,l=t[0],o=t[1],d=t[2],u=0,c=[];u<l.length;u++)s=l[u],n[s]&&c.push(n[s][0]),n[s]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(m&&m(t);c.length;)c.shift()();return i.push.apply(i,d||[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],a=!0,l=1;l<r.length;l++){var o=r[l];0!==n[o]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=r[0]))}return e}var a={},n={29:0},i=[];function s(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,s),r.l=!0,r.exports}s.m=e,s.c=a,s.d=function(e,t,r){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(r,a,function(t){return e[t]}.bind(null,a));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="";var l=window.webpackJsonp=window.webpackJsonp||[],o=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var m=o;i.push([88,1,0]),r()}({107:function(e,t,r){"use strict";r.r(t);var a=r(3),n=r(0);function i(e){e.setAttribute("role","tabpanel"),e.hasAttribute("aria-expanded")?e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden",l(e)?"false":"true"):(e.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}function s(e){e.hasAttribute("aria-expanded")?e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden",l(e)?"false":"true"):(e.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}function l(e){return"true"===e.getAttribute("aria-expanded")}function o(e,t){e.setAttribute("aria-expanded",t?"true":"false")}function d(e,t){e.setAttribute("aria-hidden",t?"true":"false")}var m="mdw:tabcontent-scroll";function u(e){if(!(e.ctrlKey||e.shiftKey||e.altKey||e.metaKey))switch(e.key){case"ArrowLeft":case"ArrowRight":case"Left":case"Right":e.preventDefault()}}function c(e){var t=e.currentTarget;if(!t.hasAttribute("mdw-no-scroll")){var r=Object(n.g)(),a=t.scrollLeft/t.clientWidth,i=Math.floor(a),s=a-i;Object(n.j)(t.children,function(e,r){return t.scrollLeft===e.offsetLeft&&(i=r,s=0,!0)});var l,u,c,b,f,v=0===s,w=!1,g=!1;if(r){var h=t.children.length-1;f=h-i,u=t.children.item(h-(i-1)),l=t.children.item(h-(i+1)),c=t.children.item(h-(i+2)),s<.5?(w=!0,b=h-i):(g=!0,b=h-(i+1))}else f=i,l=t.children.item(i+1),u=t.children.item(i-1),c=t.children.item(i+2),s<.5?(w=!0,b=i):(g=!0,b=i+1);var _=t.children.item(f),A=t.getAttribute("mdw-target-index"),y=null==A?null:parseInt(A,10),p=null;null==y?(o(_,w),l&&o(l,g),p=b):y===b&&t.removeAttribute("mdw-target-index"),d(_,!1),u&&d(u,v||!w),l&&d(l,v),c&&d(c,v||!g),Object(n.b)(t,m,{newSelectedIndex:p,leftPanelIndex:f,visibilityPercentage:s})}}function b(e,t){var r,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"smooth",i=null,s=null,m=[];if(Object(n.h)(e.getElementsByClassName("mdw-tab__panel"),function(e,a){null==i&&l(e)&&(i=a),t===e||t===a?(o(e,!0),d(e,!1),r=e,s=a):m.push(e)}),r){m.forEach(function(e){return o(e,!1)});var u=Object(n.g)(),c=u?r.parentElement.scrollWidth+r.offsetLeft-r.offsetWidth:r.offsetLeft;a&&r.parentElement.scrollLeft!==c?a&&r&&(null==s?e.removeAttribute("mdw-target-index"):e.setAttribute("mdw-target-index",s.toString(10)),Object(n.l)(r,"smooth"===a,u)):m.forEach(function(e){return d(e,!0)})}}var f=r(9),v=r(2),w=r(14),g=r(4),h=r(1);function _(e){e.classList.add("mdw-overlay"),e.hasAttribute("mdw-overlay-off")||e.setAttribute("mdw-overlay-off","selected"),e.hasAttribute("mdw-overlay-default")||e.setAttribute("mdw-overlay-default","medium"),g.a(e),e.classList.add("mdw-ripple"),h.a(e),function(e){!function(e){w.a(e),Object(n.h)(e.getElementsByClassName("mdw-tab__icon"),function(e){return e.setAttribute("aria-hidden","true")})}(e)}(e)}function A(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];Object(f.b)(e,"true",r),t&&y(e,r)}function y(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];Object(n.i)(e,function(e){e.classList.contains("mdw-tab__item")&&Object(f.b)(e,"false",t)})}function p(e){!function(e){w.b(e)}(e),h.b(e),g.b(e)}var E="mdw:tablistselectionchanged";function j(e){var t=e.currentTarget,r=e.target;v.e(t.querySelectorAll('[role="tab"]'),[r])}function O(e){var t=e.currentTarget;v.f(t.querySelectorAll('[role="tab"]'))}function L(e){var t=e.currentTarget;v.g(t.querySelectorAll('[role="tab"]'))}function B(e,t,r){var a=arguments.length>3&&void 0!==arguments[3]&&arguments[3],n=e.getElementsByClassName("mdw-tab__indicator")[0];if(n){var i=e.getElementsByClassName("mdw-tab__item"),s=t instanceof Element?t:i.item(t),l=s.offsetLeft,o=l+s.offsetWidth;if(r>0){l+=r*s.offsetWidth;var d=s.nextElementSibling;d.classList.contains("mdw-tab__item")||(d=s.previousElementSibling),o=d.offsetLeft+r*d.offsetWidth}var m=Math.abs(o-l);n.style.setProperty("transform","translateX(".concat(l,"px) scaleX(").concat(m/1e3,")")),a?n.setAttribute("mdw-animate",""):n.removeAttribute("mdw-animate")}}function C(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=arguments.length>3&&void 0!==arguments[3]&&arguments[3];e.setAttribute("mdw-selected-index",t.toString(10));var i=e.getElementsByClassName("mdw-tab__item");if(r)Object(n.h)(i,function(r,i){var s,l;t===i?(A(r,!1,a),e.hasAttribute("mdw-scrollable")&&Object(n.l)(r,!0)):(s=r,l=a,Object(f.b)(s,"false",l))});else{var s=i.item(t);s&&A(s,!1,a)}}function N(e){var t=e.target;"true"===t.getAttribute("aria-selected")&&(y(t,!1),Object(n.b)(t,E))}var x=5;function S(e){var t=e.getElementsByClassName("mdw-tab__list")[0];t&&function(e){var t=e.getElementsByClassName("mdw-tab__indicator")[0];t||((t=document.createElement("div")).classList.add("mdw-tab__indicator"),e.appendChild(t)),e.classList.add("mdw-overlay__group"),Object(n.h)(e.getElementsByClassName("mdw-tab__item"),_),e.addEventListener(f.a,N,Object(n.e)()),function(e){if(!e.hasAttribute("mdw-no-aria")){e.setAttribute("role","tablist"),e.setAttribute("aria-multiselectable","false"),e.setAttribute("aria-orientation","horizontal");var t=e.getElementsByClassName("mdw-tab__indicator")[0];t&&t.setAttribute("role","presentation")}}(e),v.h(e,'[role="tab"]'),v.h(e,'[role="tab"]'),e.addEventListener(v.b,O),e.addEventListener(v.a,L),e.addEventListener(v.c,j)}(t);var r=e.getElementsByClassName("mdw-tab__content")[0];r&&function(e){e.addEventListener("scroll",c,Object(n.e)()),Object(n.h)(e.getElementsByClassName("mdw-tab__panel"),i),e.addEventListener("keydown",u)}(r),e.addEventListener(m,z,Object(n.e)()),e.addEventListener(E,k,Object(n.e)());var a,s=e.getElementsByClassName("mdw-tab__item");Object(n.h)(s,function(e){"true"===e.getAttribute("aria-selected")&&(a=e)}),!a&&s.length&&(a=s[0]),a&&(A(a,!0,!0),T(e))}function k(e){var t=e.currentTarget,r=e.target,a=t.getElementsByClassName("mdw-tab__content")[0];if(a){for(var n=0,i=r.previousElementSibling;i;)i=i.previousElementSibling,n+=1;if(!a.hasAttribute("mdw-no-scroll"))return void b(a,n,"smooth");b(a,n,!0)}var s=t.getElementsByClassName("mdw-tab__list")[0];s&&B(s,r,0,!0)}function P(e){var t=e.getElementsByClassName("mdw-tab__list")[0];t&&function(e){Object(n.h)(e.getElementsByClassName("mdw-tab__item"),p),e.removeEventListener(f.a,N),v.d(e,"mdw-tab__item")}(t);var r=e.getElementsByClassName("mdw-tab__content")[0];r&&function(e){e.removeEventListener("keydown",u),e.removeAttribute("mdw-selected-index"),e.removeEventListener("scroll",c),Object(n.h)(e.getElementsByClassName("mdw-tab__panel"),s)}(r),e.removeEventListener(m,z),e.removeEventListener(E,k),e.removeAttribute("mdw-resize-stage")}function T(e){var t=0;e.setAttribute("mdw-resize-stage",t.toString()),Object(n.k)(function r(){if(e.hasAttribute("mdw-resize-stage")&&e.getAttribute("mdw-resize-stage")===t.toString()){if(t+=1,e.setAttribute("mdw-resize-stage",t.toString()),t===x){var a=e.getElementsByClassName("mdw-tab__content")[0];if(a&&!a.hasAttribute("mdw-no-scroll")){var i=a.querySelector('.mdw-tab__panel[aria-expanded="true"]');i&&b(a,i,!0)}}else if(t===2*x){var s=e.getElementsByClassName("mdw-tab__list")[0];if(s){var l=s.querySelector('.mdw-tab__item[aria-selected="true"]');l&&B(s,l,0)}return void e.removeAttribute("mdw-resize-stage")}Object(n.k)(r)}})}function z(e){var t=e.currentTarget;if(!t.hasAttribute("mdw-resize-stage")){var r=e.detail,a=t.getElementsByClassName("mdw-tab__list")[0];a&&(B(a,r.leftPanelIndex,r.visibilityPercentage),null!=r.newSelectedIndex&&C(a,r.newSelectedIndex,!0))}}var q,I,M=r(6);function W(){Object(n.h)(document.getElementsByClassName("mdw-tab"),T)}function K(){P(q);var e=q.getElementsByClassName("mdw-tab__list")[0];e.removeAttribute("role"),e.classList.remove("mdw-overlay__group"),e.removeAttribute("aria-orientation"),e.removeAttribute("aria-multiselectable"),Object(n.h)(q.getElementsByClassName("mdw-tab__item"),function(e){e.classList.remove("mdw-overlay"),e.classList.remove("mdw-ripple"),e.removeAttribute("mdw-overlay-off"),e.removeAttribute("role"),e.removeAttribute("tabindex"),e.removeAttribute("aria-selected")}),Object(n.h)(q.getElementsByClassName("mdw-tab__icon"),function(e){e.removeAttribute("aria-hidden")});var t=q.getElementsByClassName("mdw-tab__indicator")[0];t.removeAttribute("role"),t.removeAttribute("style"),Object(n.h)(q.getElementsByClassName("mdw-tab__panel"),function(e){e.removeAttribute("role"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-hidden")});var r=document.getElementsByClassName("component-html")[0];Object(n.m)(r,Object(M.a)(q,"true"===document.getElementById("usePug").getAttribute("aria-pressed"))),S(q),document.getElementsByClassName("component-js")[0].textContent=["mdw.Tab.attach(tabElement);","","window.addEventListener('resize', () => mdw.Tab.onResize(tabElement));"].join("\n")}function R(e){var t=e.currentTarget,r=t.name,a=t.value,n=t.checked,i=q.querySelector(".mdw-tab__list");switch(r){case"framework":a;break;case"ink":switch(a){case"default":i.removeAttribute("mdw-ink");break;default:i.setAttribute("mdw-ink",a)}break;case"surface":switch(a){case"none":i.removeAttribute("mdw-surface"),i.removeAttribute("mdw-light"),i.removeAttribute("mdw-dark");break;default:i.setAttribute("mdw-surface",a.replace(/ (light|dark)/,"")),-1===a.indexOf(" light")?i.removeAttribute("mdw-light"):i.setAttribute("mdw-light",""),-1===a.indexOf(" dark")?i.removeAttribute("mdw-dark"):i.setAttribute("mdw-dark",""),"none"===a?i.classList.remove("mdw-theme"):i.classList.add("mdw-theme")}break;case"tabs-scrollable":n?q.getElementsByClassName("mdw-tab__list")[0].setAttribute("mdw-scrollable",""):q.getElementsByClassName("mdw-tab__list")[0].removeAttribute("mdw-scrollable");break;case"content-scrollable":n?q.getElementsByClassName("mdw-tab__content")[0].removeAttribute("mdw-no-scroll"):q.getElementsByClassName("mdw-tab__content")[0].setAttribute("mdw-no-scroll","")}K()}Object(n.h)(document.getElementsByClassName("mdw-tab"),S),window.addEventListener("resize",W),Object(n.h)(document.getElementsByTagName("form"),function(e){e.reset()}),I=document.getElementById("usePug"),a.a(I),I.addEventListener("click",function(){"true"===I.getAttribute("aria-pressed")?I.setAttribute("aria-pressed","false"):I.setAttribute("aria-pressed","true"),K()}),q=document.querySelector(".component-sample .mdw-tab"),Object(n.h)(document.querySelectorAll("input[name]"),function(e){e.addEventListener("change",R)}),K()},88:function(e,t,r){r(107),e.exports=r(89)},89:function(e,t,r){e.exports=r.p+"tab.html"}});
2
- //# sourceMappingURL=tab.min.js.map
package/docs/tab.min.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///../components/tab/panel.js","webpack:///../components/tab/content.js","webpack:///../components/tab/item.js","webpack:///../components/tab/list.js","webpack:///../components/tab/index.js","webpack:///./components/tab.js","webpack:///./components/tab.pug"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","29","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","attach","tabPanelElement","setAttribute","hasAttribute","isExpanded","detach","getAttribute","setExpanded","setHidden","SCROLL_EVENT","onKeyDown","event","ctrlKey","shiftKey","altKey","metaKey","preventDefault","onTabContentScroll","tabContentElement","currentTarget","isPageRtl","isRtl","scrollPoint","scrollLeft","clientWidth","visibleIndex","Math","floor","visibilityPercentage","iterateSomeOfArrayLike","children","panel","index","offsetLeft","rightPanel","leftPeekPanel","rightPeekPanel","selectedIndex","leftPanelIndex","isResting","leftSelected","rightSelected","lastIndex","item","leftPanel","currentTargetIndexString","currentTargetIndex","parseInt","newSelectedIndex","TabPanel","removeAttribute","dispatchDomEvent","selectPanel","panelElement","scrollToPanel","arguments","undefined","currentSelectedIndex","panelIndex","otherPanels","iterateArrayLike","getElementsByClassName","el","forEach","sibling","targetScrollLeft","parentElement","scrollWidth","offsetWidth","toString","scrollToElement","element","classList","add","Overlay","Ripple","AriaTab","attachAria","attachCore","selectTabItem","tabItemElement","deselectSiblings","dispatchEvents","setSelected","deselectTabItemSiblings","selectedTabItemElement","iterateElementSiblings","contains","detachCore","SELECTION_CHANGED_EVENT","onTabIndexZeroed","tabListElement","currentItem","target","RovingTabIndex","querySelectorAll","onForwardsRequested","onBackwardsRequested","setIndicatorPosition","percentage","animate","indicatorElement","items","leftItem","Element","left","right","nextItem","nextElementSibling","previousElementSibling","width","abs","style","setProperty","concat","selectItemAtIndex","tabItemIndex","dispatchEvent","TabItem","onSelectedChangedEvent","itemElement","RESIZE_WAIT_FRAMES","tabElement","document","createElement","appendChild","addEventListener","AriaAttributes","getPassiveEventListenerOption","setupARIA","TabList","TabContent","onTabListSelectionChanged","selectedItem","onResize","previous","removeEventListener","stage","nextTick","performResize","relatedPanel","querySelector","relatedItem","detail","sampleComponent","pugButton","onWindowResize","Tab","updateSampleCode","tabList","remove","indicator","htmlCodeElement","setTextNode","convertElementToCode","getElementById","textContent","join","onOptionChange","inputElement","checked","replace","indexOf","getElementsByTagName","formElement","reset","Button"],"mappings":"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","file":"tab.min.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t29: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([88,1,0]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","// https://www.w3.org/TR/wai-aria-1.1/#tabpanel\n\n/**\n * @param {Element} tabPanelElement\n * @return {void}\n */\nexport function attach(tabPanelElement) {\n tabPanelElement.setAttribute('role', 'tabpanel');\n if (!tabPanelElement.hasAttribute('aria-expanded')) {\n tabPanelElement.setAttribute('aria-expanded', 'false');\n tabPanelElement.setAttribute('aria-hidden', 'true');\n } else if (!tabPanelElement.hasAttribute('aria-hidden')) {\n tabPanelElement.setAttribute('aria-hidden', isExpanded(tabPanelElement) ? 'false' : 'true');\n }\n}\n\n/**\n * @param {Element} tabPanelElement\n * @return {void}\n */\nexport function detach(tabPanelElement) {\n if (!tabPanelElement.hasAttribute('aria-expanded')) {\n tabPanelElement.setAttribute('aria-expanded', 'false');\n tabPanelElement.setAttribute('aria-hidden', 'true');\n } else if (!tabPanelElement.hasAttribute('aria-hidden')) {\n tabPanelElement.setAttribute('aria-hidden', isExpanded(tabPanelElement) ? 'false' : 'true');\n }\n}\n\n/**\n * @param {Element} tabPanelElement\n * @return {boolean}\n */\nexport function isExpanded(tabPanelElement) {\n return tabPanelElement.getAttribute('aria-expanded') === 'true';\n}\n\n/**\n * @param {Element} tabPanelElement\n * @param {boolean} value\n * @return {void}\n */\nexport function setExpanded(tabPanelElement, value) {\n tabPanelElement.setAttribute('aria-expanded', value ? 'true' : 'false');\n}\n\n/**\n * Hide element to avoid tabbing into next panel\n * @param {Element} tabPanelElement\n * @param {boolean} value\n * @return {void}\n */\nexport function setHidden(tabPanelElement, value) {\n tabPanelElement.setAttribute('aria-hidden', value ? 'true' : 'false');\n}\n","import {\n iterateArrayLike,\n nextTick,\n scrollToElement,\n dispatchDomEvent,\n getPassiveEventListenerOption,\n isRtl,\n iterateSomeOfArrayLike,\n} from '../../core/dom';\nimport * as TabPanel from './panel';\n\nexport const SCROLL_EVENT = 'mdw:tabcontent-scroll';\n\n/**\n * @param {Element} tabContentElement\n * @return {void}\n */\nexport function attach(tabContentElement) {\n tabContentElement.addEventListener('scroll', onTabContentScroll, getPassiveEventListenerOption());\n iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.attach);\n tabContentElement.addEventListener('keydown', onKeyDown);\n}\n\n/**\n * @param {Element} tabContentElement\n * @return {void}\n */\nexport function detach(tabContentElement) {\n tabContentElement.removeEventListener('keydown', onKeyDown);\n tabContentElement.removeAttribute('mdw-selected-index');\n tabContentElement.removeEventListener('scroll', onTabContentScroll);\n iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), TabPanel.detach);\n}\n\n/**\n * Prevent scrolling with keyboard\n * @param {KeyboardEvent} event\n * @return {void}\n */\nfunction onKeyDown(event) {\n if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {\n return;\n }\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'Left':\n case 'Right':\n event.preventDefault();\n break;\n default:\n }\n}\n\n\n/**\n * @param {Event} event\n * @return {void}\n */\nexport function onTabContentScroll(event) {\n /** @type {HTMLElement} */\n const tabContentElement = (event.currentTarget);\n if (tabContentElement.hasAttribute('mdw-no-scroll')) {\n return;\n }\n const isPageRtl = isRtl();\n const scrollPoint = tabContentElement.scrollLeft / tabContentElement.clientWidth;\n let visibleIndex = Math.floor(scrollPoint);\n let visibilityPercentage = scrollPoint - visibleIndex;\n\n // Percentage may be incorrect due to floating point rounding errors\n // Compare of integer values provided by browser\n iterateSomeOfArrayLike(tabContentElement.children, ((panel, index) => {\n if (tabContentElement.scrollLeft === panel.offsetLeft) {\n visibleIndex = index;\n visibilityPercentage = 0;\n return true;\n }\n return false;\n }));\n\n const isResting = visibilityPercentage === 0;\n let rightPanel;\n let leftPeekPanel;\n let rightPeekPanel;\n let leftSelected = false;\n let rightSelected = false;\n let selectedIndex;\n let leftPanelIndex;\n if (isPageRtl) {\n const lastIndex = tabContentElement.children.length - 1;\n leftPanelIndex = lastIndex - visibleIndex;\n leftPeekPanel = tabContentElement.children.item(lastIndex - (visibleIndex - 1));\n rightPanel = tabContentElement.children.item(lastIndex - (visibleIndex + 1));\n rightPeekPanel = tabContentElement.children.item(lastIndex - (visibleIndex + 2));\n if (visibilityPercentage < 0.5) {\n leftSelected = true;\n selectedIndex = lastIndex - visibleIndex;\n } else {\n rightSelected = true;\n selectedIndex = lastIndex - (visibleIndex + 1);\n }\n } else {\n leftPanelIndex = visibleIndex;\n rightPanel = tabContentElement.children.item(visibleIndex + 1);\n leftPeekPanel = tabContentElement.children.item(visibleIndex - 1);\n rightPeekPanel = tabContentElement.children.item(visibleIndex + 2);\n if (visibilityPercentage < 0.5) {\n leftSelected = true;\n selectedIndex = visibleIndex;\n } else {\n rightSelected = true;\n selectedIndex = visibleIndex + 1;\n }\n }\n /** @type {HTMLElement} */\n const leftPanel = (tabContentElement.children.item(leftPanelIndex));\n\n const currentTargetIndexString = tabContentElement.getAttribute('mdw-target-index');\n const currentTargetIndex = currentTargetIndexString == null\n ? null : parseInt(currentTargetIndexString, 10);\n\n let newSelectedIndex = null;\n if (currentTargetIndex == null) {\n TabPanel.setExpanded(leftPanel, leftSelected);\n if (rightPanel) {\n TabPanel.setExpanded(rightPanel, rightSelected);\n }\n newSelectedIndex = selectedIndex;\n } else if (currentTargetIndex === selectedIndex) {\n tabContentElement.removeAttribute('mdw-target-index');\n }\n\n\n TabPanel.setHidden(leftPanel, false);\n if (leftPeekPanel) {\n TabPanel.setHidden(leftPeekPanel, isResting || !leftSelected);\n }\n if (rightPanel) {\n TabPanel.setHidden(rightPanel, isResting);\n }\n if (rightPeekPanel) {\n TabPanel.setHidden(rightPeekPanel, isResting || !rightSelected);\n }\n\n dispatchDomEvent(tabContentElement, SCROLL_EVENT, {\n newSelectedIndex,\n leftPanelIndex,\n visibilityPercentage,\n });\n}\n\n/**\n * @param {HTMLElement} tabContentElement\n * @param {HTMLElement|number} panel element or index\n * @param {true|false|'smooth'} [scrollToPanel='smooth']\n * @return {void}\n */\nexport function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth') {\n /** @type {HTMLElement} */\n let panelElement;\n /** @type {number} */\n let currentSelectedIndex = null;\n /** @type {number} */\n let panelIndex = null;\n const otherPanels = [];\n iterateArrayLike(tabContentElement.getElementsByClassName('mdw-tab__panel'), (el, index) => {\n if (currentSelectedIndex == null && TabPanel.isExpanded(el)) {\n currentSelectedIndex = index;\n }\n if (panel === el || panel === index) {\n TabPanel.setExpanded(el, true);\n TabPanel.setHidden(el, false);\n /** @type {HTMLElement} */\n panelElement = (el);\n panelIndex = index;\n } else {\n otherPanels.push(el);\n }\n });\n if (!panelElement) {\n // Invalid index or panel not in tabcontent\n return;\n }\n otherPanels.forEach(sibling => TabPanel.setExpanded(sibling, false));\n\n const isPageRtl = isRtl();\n const targetScrollLeft = isPageRtl\n ? panelElement.parentElement.scrollWidth + panelElement.offsetLeft - panelElement.offsetWidth\n : panelElement.offsetLeft;\n if (!scrollToPanel || panelElement.parentElement.scrollLeft === targetScrollLeft) {\n // No scrolling, hide others\n otherPanels.forEach(sibling => TabPanel.setHidden(sibling, true));\n return;\n }\n if (scrollToPanel && panelElement) {\n if (panelIndex == null) {\n tabContentElement.removeAttribute('mdw-target-index');\n } else {\n tabContentElement.setAttribute('mdw-target-index', panelIndex.toString(10));\n }\n scrollToElement(panelElement, scrollToPanel === 'smooth', isPageRtl);\n }\n}\n","// https://www.w3.org/TR/wai-aria-1.1/#tab\n\nimport * as AriaTab from '../../core/aria/tab';\nimport { iterateArrayLike, iterateElementSiblings } from '../../core/dom';\nimport * as Overlay from '../../core/overlay/index';\nimport * as Ripple from '../../core/ripple/index';\nimport { setSelected } from '../../core/aria/attributes';\n\n/**\n * @param {Element} element\n * @return {void}\n */\nexport function attach(element) {\n element.classList.add('mdw-overlay');\n if (!element.hasAttribute('mdw-overlay-off')) {\n element.setAttribute('mdw-overlay-off', 'selected');\n }\n if (!element.hasAttribute('mdw-overlay-default')) {\n element.setAttribute('mdw-overlay-default', 'medium');\n }\n Overlay.attach(element);\n\n element.classList.add('mdw-ripple');\n Ripple.attach(element);\n\n attachCore(element);\n}\n\n/**\n * @param {Element} tabItemElement\n * @param {boolean} [deselectSiblings=true]\n * @param {boolean} [dispatchEvents=false]\n * @return {void}\n */\nexport function selectTabItem(tabItemElement, deselectSiblings = true, dispatchEvents = false) {\n setSelected(tabItemElement, 'true', dispatchEvents);\n if (deselectSiblings) {\n deselectTabItemSiblings(tabItemElement, dispatchEvents);\n }\n}\n\n/**\n * @param {Element} tabItemElement\n * @param {boolean} [dispatchEvent=false]\n * @return {void}\n */\nexport function deselectTabItem(tabItemElement, dispatchEvent) {\n setSelected(tabItemElement, 'false', dispatchEvent);\n}\n\n/**\n * @param {Element} selectedTabItemElement\n * @param {boolean} [dispatchEvents=false]\n * @return {void}\n */\nexport function deselectTabItemSiblings(selectedTabItemElement, dispatchEvents = false) {\n iterateElementSiblings(selectedTabItemElement, (sibling) => {\n if (sibling.classList.contains('mdw-tab__item')) {\n setSelected(sibling, 'false', dispatchEvents);\n }\n });\n}\n\n/**\n * @param {Element} element\n * @return {void}\n */\nexport function attachCore(element) {\n attachAria(element);\n}\n\n/**\n * @param {Element} element\n * @return {void}\n */\nexport function attachAria(element) {\n AriaTab.attach(element);\n iterateArrayLike(element.getElementsByClassName('mdw-tab__icon'),\n el => el.setAttribute('aria-hidden', 'true'));\n}\n\n/**\n * @param {Element} element\n * @return {void}\n */\nexport function detachAria(element) {\n AriaTab.attach(element);\n}\n\n/**\n * @param {Element} element\n * @return {void}\n */\nexport function detachCore(element) {\n AriaTab.detach(element);\n}\n\n/**\n * @param {Element} element\n * @return {void}\n */\nexport function detach(element) {\n detachCore(element);\n Ripple.detach(element);\n Overlay.detach(element);\n}\n","// https://www.w3.org/TR/wai-aria-practices/#tabpanel\n\nimport {\n iterateArrayLike, dispatchDomEvent, getPassiveEventListenerOption, scrollToElement,\n} from '../../core/dom';\n\nimport * as AriaAttributes from '../../core/aria/attributes';\nimport * as RovingTabIndex from '../../core/aria/rovingtabindex';\nimport * as TabItem from './item';\n\nexport const SELECTION_CHANGED_EVENT = 'mdw:tablistselectionchanged';\n\n/**\n * @param {Element} tabListElement\n * @return {void}\n */\nexport function attach(tabListElement) {\n let indicatorElement = tabListElement.getElementsByClassName('mdw-tab__indicator')[0];\n if (!indicatorElement) {\n indicatorElement = document.createElement('div');\n indicatorElement.classList.add('mdw-tab__indicator');\n tabListElement.appendChild(indicatorElement);\n }\n\n tabListElement.classList.add('mdw-overlay__group');\n iterateArrayLike(tabListElement.getElementsByClassName('mdw-tab__item'), TabItem.attach);\n tabListElement.addEventListener(AriaAttributes.SELECTED_CHANGED_EVENT, onSelectedChangedEvent, getPassiveEventListenerOption());\n setupARIA(tabListElement);\n RovingTabIndex.setupTabIndexes(tabListElement, '[role=\"tab\"]');\n RovingTabIndex.setupTabIndexes(tabListElement, '[role=\"tab\"]');\n tabListElement.addEventListener(RovingTabIndex.FORWARDS_REQUESTED, onForwardsRequested);\n tabListElement.addEventListener(RovingTabIndex.BACKWARDS_REQUESTED, onBackwardsRequested);\n tabListElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nfunction onTabIndexZeroed(event) {\n /** @type {HTMLElement} */\n const tabListElement = (event.currentTarget);\n /** @type {HTMLElement} */\n const currentItem = (event.target);\n RovingTabIndex.removeTabIndex(tabListElement.querySelectorAll('[role=\"tab\"]'), [currentItem]);\n}\n/**\n * @param {Event} event\n * @return {void}\n */\nfunction onForwardsRequested(event) {\n /** @type {HTMLElement} */\n const tabListElement = (event.currentTarget);\n RovingTabIndex.selectNext(tabListElement.querySelectorAll('[role=\"tab\"]'));\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nfunction onBackwardsRequested(event) {\n /** @type {HTMLElement} */\n const tabListElement = (event.currentTarget);\n RovingTabIndex.selectPrevious(tabListElement.querySelectorAll('[role=\"tab\"]'));\n}\n\n/**\n * @param {Element} tabListElement\n * @return {void}\n */\nexport function setupARIA(tabListElement) {\n if (tabListElement.hasAttribute('mdw-no-aria')) {\n return;\n }\n tabListElement.setAttribute('role', 'tablist');\n tabListElement.setAttribute('aria-multiselectable', 'false');\n tabListElement.setAttribute('aria-orientation', 'horizontal');\n const indicatorElement = tabListElement.getElementsByClassName('mdw-tab__indicator')[0];\n if (indicatorElement) {\n indicatorElement.setAttribute('role', 'presentation');\n }\n}\n\n/**\n * @param {Element} tabListElement\n * @return {void}\n */\nexport function detach(tabListElement) {\n iterateArrayLike(tabListElement.getElementsByClassName('mdw-tab__item'), TabItem.detach);\n tabListElement.removeEventListener(AriaAttributes.SELECTED_CHANGED_EVENT, onSelectedChangedEvent);\n RovingTabIndex.detach(tabListElement, 'mdw-tab__item');\n}\n\n\n/**\n * @param {Element} tabListElement\n * @return {void}\n */\nexport function removeSelection(tabListElement) {\n return iterateArrayLike(\n tabListElement.querySelectorAll('mdw-tab__item[aria-selected=\"true\"]'),\n item => item.setAttribute('aria-selected', 'false')\n );\n}\n\n/**\n * @param {Element} tabListElement\n * @param {Element|number} item element or index\n * @param {number} [percentage=0]\n * @param {boolean} [animate=false]\n * @return {void}\n */\nexport function setIndicatorPosition(tabListElement, item, percentage, animate = false) {\n /** @type {HTMLElement} */\n const indicatorElement = (tabListElement.getElementsByClassName('mdw-tab__indicator')[0]);\n if (!indicatorElement) {\n return;\n }\n const items = tabListElement.getElementsByClassName('mdw-tab__item');\n /** @type {HTMLElement} */\n const leftItem = (item instanceof Element ? item : items.item(item));\n let left = leftItem.offsetLeft;\n let right = left + leftItem.offsetWidth;\n\n if (percentage > 0) {\n left += (percentage * leftItem.offsetWidth);\n let nextItem = (leftItem.nextElementSibling);\n if (!nextItem.classList.contains('mdw-tab__item')) {\n // RTL\n nextItem = leftItem.previousElementSibling;\n }\n right = nextItem.offsetLeft + (percentage * nextItem.offsetWidth);\n }\n\n // RTL is inversed\n const width = Math.abs(right - left);\n indicatorElement.style.setProperty('transform', `translateX(${left}px) scaleX(${width / 1000})`);\n if (animate) {\n indicatorElement.setAttribute('mdw-animate', '');\n } else {\n indicatorElement.removeAttribute('mdw-animate');\n }\n}\n\n/**\n * @param {Element} tabListElement\n * @param {number} tabItemIndex\n * @param {boolean} [deselectSiblings=true]\n * @param {boolean} [dispatchEvents=false]\n * @return {void}\n */\nexport function selectItemAtIndex(tabListElement, tabItemIndex, deselectSiblings = true, dispatchEvents = false) {\n tabListElement.setAttribute('mdw-selected-index', tabItemIndex.toString(10));\n const items = tabListElement.getElementsByClassName('mdw-tab__item');\n if (!deselectSiblings) {\n const item = items.item(tabItemIndex);\n if (item) {\n TabItem.selectTabItem(item, false, dispatchEvents);\n }\n return;\n }\n iterateArrayLike(items, (el, index) => {\n if (tabItemIndex === index) {\n TabItem.selectTabItem(el, false, dispatchEvents);\n if (tabListElement.hasAttribute('mdw-scrollable')) {\n scrollToElement(el, true);\n }\n } else {\n TabItem.deselectTabItem(el, dispatchEvents);\n }\n });\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nexport function onSelectedChangedEvent(event) {\n /** @type {HTMLElement} */\n const itemElement = (event.target);\n if (itemElement.getAttribute('aria-selected') !== 'true') {\n return;\n }\n TabItem.deselectTabItemSiblings(itemElement, false);\n dispatchDomEvent(itemElement, SELECTION_CHANGED_EVENT);\n}\n","import {\n iterateArrayLike,\n nextTick,\n getPassiveEventListenerOption,\n} from '../../core/dom';\n\nimport * as TabContent from './content';\nimport * as TabList from './list';\nimport * as TabItem from './item';\n\nconst RESIZE_WAIT_FRAMES = 5;\n\n/**\n * @param {Element} tabElement\n * @return {void}\n */\nexport function attach(tabElement) {\n const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];\n if (tabListElement) {\n TabList.attach(tabListElement);\n }\n\n const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];\n if (tabContentElement) {\n TabContent.attach(tabContentElement);\n }\n\n tabElement.addEventListener(TabContent.SCROLL_EVENT, onTabContentScroll, getPassiveEventListenerOption());\n tabElement.addEventListener(TabList.SELECTION_CHANGED_EVENT, onTabListSelectionChanged, getPassiveEventListenerOption());\n\n const items = tabElement.getElementsByClassName('mdw-tab__item');\n\n let selectedItem;\n iterateArrayLike(items, (itemElement) => {\n if (itemElement.getAttribute('aria-selected') === 'true') {\n selectedItem = itemElement;\n }\n });\n if (!selectedItem && items.length) {\n selectedItem = items[0];\n }\n if (selectedItem) {\n TabItem.selectTabItem(selectedItem, true, true);\n onResize(tabElement);\n }\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nexport function onTabListSelectionChanged(event) {\n /** @type {HTMLElement} */\n const tabElement = (event.currentTarget);\n /** @type {HTMLElement} */\n const tabItemElement = (event.target);\n /** @type {HTMLElement} */\n const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);\n if (tabContentElement) {\n let index = 0;\n let previous = tabItemElement.previousElementSibling;\n while (previous) {\n previous = previous.previousElementSibling;\n index += 1;\n }\n if (!tabContentElement.hasAttribute('mdw-no-scroll')) {\n TabContent.selectPanel(tabContentElement, index, 'smooth');\n return;\n }\n TabContent.selectPanel(tabContentElement, index, true);\n }\n\n const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];\n if (tabListElement) {\n TabList.setIndicatorPosition(tabListElement, tabItemElement, 0, true);\n }\n}\n\n/**\n * @param {Element} tabElement\n * @return {void}\n */\nexport function detach(tabElement) {\n const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];\n if (tabListElement) {\n TabList.detach(tabListElement);\n }\n\n const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];\n if (tabContentElement) {\n TabContent.detach(tabContentElement);\n }\n\n tabElement.removeEventListener(TabContent.SCROLL_EVENT, onTabContentScroll);\n tabElement.removeEventListener(TabList.SELECTION_CHANGED_EVENT, onTabListSelectionChanged);\n tabElement.removeAttribute('mdw-resize-stage');\n}\n\n/**\n * @param {Element} tabElement\n * @return {void}\n */\nexport function onResize(tabElement) {\n let stage = 0;\n tabElement.setAttribute('mdw-resize-stage', stage.toString());\n /** @return {void} */\n function performResize() {\n if (!tabElement.hasAttribute('mdw-resize-stage')) {\n // Skip resize\n return;\n }\n const attrStage = tabElement.getAttribute('mdw-resize-stage');\n if (attrStage !== stage.toString()) {\n // Off-sync due to another resize event\n return;\n }\n stage += 1;\n tabElement.setAttribute('mdw-resize-stage', stage.toString());\n if (stage === RESIZE_WAIT_FRAMES) {\n /** @type {HTMLElement} */\n const tabContentElement = (tabElement.getElementsByClassName('mdw-tab__content')[0]);\n if (tabContentElement && !tabContentElement.hasAttribute('mdw-no-scroll')) {\n /** @type {HTMLElement} */\n const relatedPanel = (tabContentElement.querySelector('.mdw-tab__panel[aria-expanded=\"true\"]'));\n if (relatedPanel) {\n TabContent.selectPanel(tabContentElement, relatedPanel, true);\n }\n }\n } else if (stage === RESIZE_WAIT_FRAMES * 2) {\n /** @type {HTMLElement} */\n const tabListElement = (tabElement.getElementsByClassName('mdw-tab__list')[0]);\n if (tabListElement) {\n /** @type {HTMLElement} */\n const relatedItem = (tabListElement.querySelector('.mdw-tab__item[aria-selected=\"true\"]'));\n if (relatedItem) {\n TabList.setIndicatorPosition(tabListElement, relatedItem, 0);\n }\n }\n tabElement.removeAttribute('mdw-resize-stage');\n return;\n }\n\n nextTick(performResize);\n }\n nextTick(performResize);\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nexport function onTabContentScroll(event) {\n /** @type {HTMLElement} */\n const tabElement = (event.currentTarget);\n if (tabElement.hasAttribute('mdw-resize-stage')) {\n return;\n }\n const { detail } = event;\n const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];\n if (!tabListElement) {\n return;\n }\n TabList.setIndicatorPosition(tabListElement, detail.leftPanelIndex, detail.visibilityPercentage);\n if (detail.newSelectedIndex != null) {\n TabList.selectItemAtIndex(tabListElement, detail.newSelectedIndex, true);\n }\n}\n","import * as Button from '../../components/button/index';\nimport * as Tab from '../../components/tab/index';\nimport { convertElementToCode, changeElementTagName } from '../_sample-utils';\nimport { iterateArrayLike, setTextNode } from '../../core/dom';\n\n/** @type {HTMLElement} */\nlet sampleComponent;\n\n/** @return {void} */\nfunction onWindowResize() {\n iterateArrayLike(document.getElementsByClassName('mdw-tab'), Tab.onResize);\n}\n\n/** @return {void} */\nfunction setupPugButton() {\n const pugButton = document.getElementById('usePug');\n Button.attach(pugButton);\n pugButton.addEventListener('click', () => {\n if (pugButton.getAttribute('aria-pressed') === 'true') {\n pugButton.setAttribute('aria-pressed', 'false');\n } else {\n pugButton.setAttribute('aria-pressed', 'true');\n }\n updateSampleCode();\n });\n}\n\n/** @return {void} */\nfunction updateSampleCode() {\n // Strip automatic attributes and classes\n Tab.detach(sampleComponent);\n const tabList = sampleComponent.getElementsByClassName('mdw-tab__list')[0];\n tabList.removeAttribute('role');\n tabList.classList.remove('mdw-overlay__group');\n tabList.removeAttribute('aria-orientation');\n tabList.removeAttribute('aria-multiselectable');\n iterateArrayLike(sampleComponent.getElementsByClassName('mdw-tab__item'), (el) => {\n el.classList.remove('mdw-overlay');\n el.classList.remove('mdw-ripple');\n el.removeAttribute('mdw-overlay-off');\n el.removeAttribute('role');\n el.removeAttribute('tabindex');\n el.removeAttribute('aria-selected');\n });\n iterateArrayLike(sampleComponent.getElementsByClassName('mdw-tab__icon'), (el) => {\n el.removeAttribute('aria-hidden');\n });\n const indicator = sampleComponent.getElementsByClassName('mdw-tab__indicator')[0];\n indicator.removeAttribute('role');\n indicator.removeAttribute('style');\n iterateArrayLike(sampleComponent.getElementsByClassName('mdw-tab__panel'), (el) => {\n el.removeAttribute('role');\n el.removeAttribute('aria-expanded');\n el.removeAttribute('aria-hidden');\n });\n\n const htmlCodeElement = document.getElementsByClassName('component-html')[0];\n setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,\n document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));\n\n Tab.attach(sampleComponent);\n\n const jsCodeElement = document.getElementsByClassName('component-js')[0];\n jsCodeElement.textContent = [\n 'mdw.Tab.attach(tabElement);',\n '',\n \"window.addEventListener('resize', () => mdw.Tab.onResize(tabElement));\",\n ].join('\\n');\n}\n\n/** @return {void} */\nfunction initializeSampleComponents() {\n iterateArrayLike(document.getElementsByClassName('mdw-tab'), Tab.attach);\n window.addEventListener('resize', onWindowResize);\n iterateArrayLike(document.getElementsByTagName('form'), (formElement) => {\n formElement.reset();\n });\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nfunction onOptionChange(event) {\n /** @type {HTMLInputElement} */\n const inputElement = (event.currentTarget);\n const { name, value, checked } = inputElement;\n const tabListElement = sampleComponent.querySelector('.mdw-tab__list');\n\n switch (name) {\n case 'framework':\n switch (value) {\n case 'javascript':\n break;\n case 'css':\n break;\n default:\n }\n break;\n case 'ink':\n switch (value) {\n case 'default':\n tabListElement.removeAttribute('mdw-ink');\n break;\n default:\n tabListElement.setAttribute('mdw-ink', value);\n break;\n }\n break;\n case 'surface':\n switch (value) {\n case 'none':\n tabListElement.removeAttribute('mdw-surface');\n tabListElement.removeAttribute('mdw-light');\n tabListElement.removeAttribute('mdw-dark');\n break;\n default:\n tabListElement.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));\n if (value.indexOf(' light') === -1) {\n tabListElement.removeAttribute('mdw-light');\n } else {\n tabListElement.setAttribute('mdw-light', '');\n }\n if (value.indexOf(' dark') === -1) {\n tabListElement.removeAttribute('mdw-dark');\n } else {\n tabListElement.setAttribute('mdw-dark', '');\n }\n if (value === 'none') {\n tabListElement.classList.remove('mdw-theme');\n } else {\n tabListElement.classList.add('mdw-theme');\n }\n break;\n }\n break;\n case 'tabs-scrollable':\n if (checked) {\n sampleComponent.getElementsByClassName('mdw-tab__list')[0].setAttribute('mdw-scrollable', '');\n } else {\n sampleComponent.getElementsByClassName('mdw-tab__list')[0].removeAttribute('mdw-scrollable');\n }\n break;\n case 'content-scrollable': {\n if (checked) {\n sampleComponent.getElementsByClassName('mdw-tab__content')[0].removeAttribute('mdw-no-scroll');\n } else {\n sampleComponent.getElementsByClassName('mdw-tab__content')[0].setAttribute('mdw-no-scroll', '');\n }\n break;\n }\n default:\n }\n updateSampleCode();\n}\n\n/** @return {void} */\nfunction setupComponentOptions() {\n setupPugButton();\n sampleComponent = document.querySelector('.component-sample .mdw-tab');\n iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {\n el.addEventListener('change', onOptionChange);\n });\n}\n\ninitializeSampleComponents();\nsetupComponentOptions();\nupdateSampleCode();\n","module.exports = __webpack_public_path__ + \"tab.html\";"],"sourceRoot":""}
package/docs/textfield.html DELETED
@@ -1,2 +0,0 @@
1
- <!DOCTYPE html><html class="mdw-layout mdw-theme" lang="en"><head><title>Material Design Web</title><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="Material Design Web - CSS/JS Framework" name="description"><meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"><meta name="theme-color" content="#C2185B"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:300,400,500"><link rel="stylesheet" href="docs.min.css"><link rel="stylesheet" href="spec.min.css"><link rel="stylesheet" href="theme-default.min.css"><link rel="stylesheet" href="theme-default-fallbacks.min.css" media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)"><link rel="stylesheet" disabled href="theme-colored.min.css" title="alt"><link rel="stylesheet" disabled href="theme-colored-fallbacks.min.css" media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)" title="alt"><script src="prerender.common.min.js"></script><script src="prerender.min.js"></script></head><body class="mdw-layout__body mdw-theme" mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal"><div class="mdw-layout__menus"></div><div class="mdw-layout__dialogs"></div><nav class="mdw-layout__navdrawer"><div class="mdw-layout__sheet-content mdw-theme" mdw-surface="background" mdw-border-ink><ul class="mdw-list" role="tree"><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="index.html" mdw-ink="default"><div class="mdw-list__text">Home</div></a></li><li class="mdw-list__expander mdw-theme" aria-expanded="true"><span class="mdw-list__expander-content mdw-list__subheader"><div class="mdw-list__text mdw-theme" mdw-ink="medium">Core</div><div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div></span><ul class="mdw-list__item-group" role="group"><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="color.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">compare</div><div class="mdw-list__text"><div class="mdw-list__text-block">Color</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="overlay.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">tonality</div><div class="mdw-list__text"><div class="mdw-list__text-block">Overlay</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="ripple.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">center_focus_strong</div><div class="mdw-list__text"><div class="mdw-list__text-block">Ripple</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="transition.html" mdw-ink="primary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">open_in_new</div><div class="mdw-list__text"><div class="mdw-list__text-block">Transition</div></div></a></li></ul></li><li class="mdw-list__expander mdw-theme" aria-expanded="true"><span class="mdw-list__expander-content mdw-list__subheader"><div class="mdw-list__text mdw-theme" mdw-ink="medium">Components</div><div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div></span><ul class="mdw-list__item-group" role="group"><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="appbar.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">web_asset</div><div class="mdw-list__text"><div class="mdw-list__text-block">App Bar</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="bottomnav.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">call_to_action</div><div class="mdw-list__text"><div class="mdw-list__text-block">Bottom Navigation</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="button.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">crop_landscape</div><div class="mdw-list__text"><div class="mdw-list__text-block">Button</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="card.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">crop_square</div><div class="mdw-list__text"><div class="mdw-list__text-block">Card</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="chip.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">check_circle</div><div class="mdw-list__text"><div class="mdw-list__text-block">Chip</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="datatable.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">format_align_justify</div><div class="mdw-list__text"><div class="mdw-list__text-block">Data Table</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="dialog.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">select_all</div><div class="mdw-list__text"><div class="mdw-list__text-block">Dialog</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="elevation.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">layers</div><div class="mdw-list__text"><div class="mdw-list__text-block">Elevation</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="fab.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">add_circle</div><div class="mdw-list__text"><div class="mdw-list__text-block">Floating Action Button</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="grid.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">view_compact</div><div class="mdw-list__text"><div class="mdw-list__text-block">Grid</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="layout.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">view_quilt</div><div class="mdw-list__text"><div class="mdw-list__text-block">Layout</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="list.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">view_list</div><div class="mdw-list__text"><div class="mdw-list__text-block">List</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="menu.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">picture_in_picture</div><div class="mdw-list__text"><div class="mdw-list__text-block">Menu</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="progress.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">timelapse</div><div class="mdw-list__text"><div class="mdw-list__text-block">Progress</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="search.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">search</div><div class="mdw-list__text"><div class="mdw-list__text-block">Search</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="selection.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">toggle_on</div><div class="mdw-list__text"><div class="mdw-list__text-block">Selection</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="slider.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">tune</div><div class="mdw-list__text"><div class="mdw-list__text-block">Slider</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="snackbar.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">video_label</div><div class="mdw-list__text"><div class="mdw-list__text-block">Snackbar</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="tab.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">tab</div><div class="mdw-list__text"><div class="mdw-list__text-block">Tab</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-current="page" aria-selected="true" href="textfield.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">text_fields</div><div class="mdw-list__text"><div class="mdw-list__text-block">Text Field</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="tooltip.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">info</div><div class="mdw-list__text"><div class="mdw-list__text-block">Tooltip</div></div></a></li><li class="mdw-list__item"><a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" aria-selected="false" href="type.html" mdw-ink="secondary contrast"><div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">font_download</div><div class="mdw-list__text"><div class="mdw-list__text-block">Typography</div></div></a></li></ul></li></ul></div></nav><div class="mdw-layout__scrim"></div><div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark><div class="mdw-layout__appbar-shape"></div><div class="mdw-appbar__action"><div class="mdw-appbar__start"><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle" mdw-icon="" tabindex="0" href="#docs-navdrawer">menu</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div></div></div><div class="mdw-appbar__title">textfield</div><div class="mdw-appbar__end" id="docs-menu-buttons"><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="altThemeButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">palette</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div></div><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="darkModeButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">brightness_3</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div></div><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="rtlButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">format_align_right</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div></div><div class="mdw-tooltip__wrapper"><a class="mdw-button mdw-overlay mdw-ripple mdw-tooltip__target material-icons" mdw-icon="" tabindex="0" id="largeFontButton" mdw-overlay-default="medium" mdw-overlay-activated="off" aria-pressed="false">format_size</a><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div></div></div></div></div><div class="mdw-layout__fab"></div><div class="mdw-layout__snackbar"></div><div class="mdw-layout__content"><div class="mdw-layout__content-page"><div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch><div class="mdw-grid__item" mdw-colspan="100%"><h5 class="mdw-type" mdw-baseline-next="36">Text fields allow users to input, edit, and select text.</h5><p class="mdw-type">Text fields typically reside in forms but can appear in other places, like dialog boxes and search.</p></div><div class="mdw-grid__item" mdw-colspan="4"><div class="mdw-grid__content"><div class="component-sample"><div class="component-sample__container"><label class="mdw-textfield mdw-theme" mdw-ink="primary"><input class="mdw-textfield__input" placeholder="Placeholder"><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Label</div></div></div></label></div></div></div></div><div class="mdw-grid__item" mdw-colspan="8"><div class="mdw-type" mdw-style="subtitle">Javascript</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" disabled="" aria-disabled="true" name="javascript" value="required"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Required</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="javascript" value="optional"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Optional</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="javascript" value="none"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">None</div></label></div><div class="mdw-type" mdw-style="subtitle">Field type</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="field-type" value="single-line"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Single-line</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="field-type" value="text-area"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Text area</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="field-type" value="dropdown"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Dropdown</div></label></div><div class="mdw-type" mdw-style="subtitle">Style</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="style" value="filled"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Filled</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="style" value="outlined"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Outlined</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="style" value="solo"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Solo</div></label></div><div class="mdw-type" mdw-style="subtitle">Options</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="signifier"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Signifier</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="prefix"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Prefix</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="suffix"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Suffix</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="helper-text"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Helper Text</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="error-text"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Error Text</div></label></div><div class="mdw-type" mdw-style="subtitle">Ink</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="none"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Default</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" checked="" name="ink" value="primary"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Primary</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="secondary"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Secondary</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="radio" name="ink" value="green A700"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Green A700</div></label></div><div class="mdw-type" mdw-style="subtitle">Attributes</div><div class="docs-option-list"><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" checked="" name="autosize"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Autosize</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="disabled"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Disabled</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="4minlength"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">4 Min Length</div></label><label class="mdw-selection mdw-theme" mdw-ink="secondary"><input class="mdw-selection__input mdw-overlay" type="checkbox" name="required"/><div class="mdw-selection__icon"></div><div class="mdw-selection__label">Required</div></label></div></div><div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0"></div><div class="mdw-grid__item" mdw-colspan="6"><h6 class="mdw-type">HTML Code</h6><div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink></div></div><div class="mdw-grid__item" mdw-colspan="6"><h6 class="mdw-type">Javascript Code</h6><div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div></div><div class="mdw-grid__item" mdw-colspan="100%"><h6 class="mdw-type">Samples</h6></div><div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title">Application</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0" mdw-more-button="mdw-more-button">more_vert</a></div></div></div><div class="content" style="padding:0px 16px"><label class="mdw-textfield mdw-type mdw-theme" mdw-ink="primary" mdw-style="h4"><input class="mdw-textfield__input" value="Vintage 50" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Title</div></div></div></label><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="primary" style="width:88px"><input class="mdw-textfield__input" type="text" placeholder=" "><div class="mdw-textfield__prefix">$</div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Price</div></div></div></label><label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary"><input class="mdw-textfield__input" type="text" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Location (optional)</div></div></div></label></div><label class="mdw-textfield mdw-theme" mdw-ink="primary"><input class="mdw-textfield__input" placeholder="text" type="text"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Description</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="primary"><div class="mdw-textfield__signifier material-icons">security</div><input class="mdw-textfield__input" minlength="8" placeholder="••••••••" required="" type="password"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Password text field with signifier and overflowing label *</div></div></div><div class="mdw-textfield__helper-text">At least 8 characters</div><div class="mdw-textfield__error-text">Error: Password of at least 8 characters required.</div></label><label class="mdw-textfield mdw-theme" mdw-ink="primary"><input class="mdw-textfield__input" disabled="" placeholder=" " type="text" value="filled"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Disabled Filled with Suffix</div></div></div><div class="mdw-textfield__suffix">lbs</div><div class="mdw-textfield__helper-text">Disabled Helper Text</div></label></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="secondary 300" mdw-light=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="secondary A100" mdw-light=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title"></div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a></div></div></div><form class="content" style="padding:0px 16px"><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><input class="mdw-textfield__input" placeholder=" " required="" type="text"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Name *</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><input class="mdw-textfield__input" placeholder=" " type="text"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Address</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><input class="mdw-textfield__input" placeholder=" " type="text"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">City</div></div></div></label><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:88px"><input class="mdw-textfield__input" type="text" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">State</div></div></div></label><label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary"><input class="mdw-textfield__input" type="text" placeholder=" " required><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Zip code *</div></div></div></label></div><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><input class="mdw-textfield__input" placeholder=" " type="text"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Phone number</div></div></div></label><p class="mdw-type">* Required fields</p></form><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="secondary 800" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="secondary A700" mdw-dark=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title"></div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">search</a></div></div></div><form class="content" style="padding:8px 16px"><div class="display-flex" style="margin-bottom:-32px;margin-top:-24px;" flex-justify-content="center"><i class="material-icons" style="color:#ccc;font-size:256px">person</i></div><div class="horizontal-controls"><label class="mdw-textfield flex-1 mdw-theme" mdw-ink="secondary"><div class="mdw-textfield__signifier material-icons">person</div><input class="mdw-textfield__input" type="text" placeholder=" " value="Ali Connors"><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Name</div></div></div></label></div><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><div class="mdw-textfield__signifier material-icons">phone</div><input class="mdw-textfield__input" placeholder=" " type="phone" value="65"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Phone number</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;"><select class="mdw-textfield__input" type="phone"><option value="">Unknown</option><option value="Mobile">Mobile</option><option value="Home">Home</option><option value="Work">Work</option></select><div class="mdw-textfield__icon" mdw-dropdown></div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Phone Type</div></div></div></label></div><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><div class="mdw-textfield__signifier material-icons">email</div><input class="mdw-textfield__input" placeholder=" " type="email"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Email</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;"><select class="mdw-textfield__input" type="phone"><option value="">Unknown</option><option value="">Unknown</option><option value="Personal">Personal</option><option value="Business">Business</option></select><div class="mdw-textfield__icon" mdw-dropdown></div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Email type</div></div></div></label></div><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><div class="mdw-textfield__signifier material-icons">place</div><input class="mdw-textfield__input" placeholder=" " type="address"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Address</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px"><select class="mdw-textfield__input" type="phone"><option value="Home">Home</option><option value="Work">Work</option></select><div class="mdw-textfield__icon" mdw-dropdown></div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Address type</div></div></div></label></div></form><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title"></div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">done</a></div></div></div><div class="content" style="padding:8px 16px"><label class="mdw-textfield mdw-theme" mdw-outlined="mdw-outlined" mdw-ink="primary"><input class="mdw-textfield__input" placeholder=" " type="text" value="Vintage 50's Dress"/><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Title</div></div></div><div class="mdw-textfield__helper-text">Helper</div></label><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined style="width:88px"><input class="mdw-textfield__input" value="10.00" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Price</div></div></div><div class="mdw-textfield__prefix">$</div><div class="mdw-textfield__helper-text">Helper</div></label><label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary" mdw-outlined><input class="mdw-textfield__input" value="Hanover" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Location (optional)</div></div></div><div class="mdw-textfield__helper-text">Helper</div></label></div><label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined><textarea class="mdw-textfield__input" placeholder=" " rows="3">Unique and rare dress from 1952. Made out of washed cotton with front pockets. Sleeveless with button closures.</textarea><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Description</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined><div class="mdw-textfield__signifier material-icons">security</div><input class="mdw-textfield__input" type="password" placeholder="••••••••" required minlength="8"><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Password text field with signifier and overflowing label *</div></div></div><div class="mdw-textfield__helper-text">At least 8 characters</div><div class="mdw-textfield__error-text">Error: Password of at least 8 characters required.</div></label><label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined style="max-width:150px"><input class="mdw-textfield__input" type="text" placeholder=" " disabled value="filled"><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Disabled Filled with Suffix</div></div></div><div class="mdw-textfield__suffix">lbs</div><div class="mdw-textfield__helper-text">Disabled Helper Text</div></label></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="amber 600" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="amber A400" mdw-dark=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title"></div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">done</a></div></div></div><div class="content" style="padding:0 16px"><label class="mdw-textfield mdw-theme" mdw-ink="amber A700"><input class="mdw-textfield__input" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Name</div></div></div><div class="mdw-textfield__error-text">spacer</div></label><label class="mdw-textfield mdw-theme" mdw-ink="amber A700"><textarea class="mdw-textfield__input" placeholder=" " rows="5"></textarea><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Message</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="deeppurple A400" mdw-outlined><textarea class="mdw-textfield__input" placeholder=" " rows="5"></textarea><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Message</div></div></div></label></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="amber A700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="amber A400" mdw-dark=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title"></div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">done</a></div></div></div><div class="content" style="padding:0 16px"><label class="mdw-textfield mdw-theme" mdw-ink="amber A700"><input class="mdw-textfield__input" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Name</div></div></div><div class="mdw-textfield__error-text">spacer</div></label><label class="mdw-textfield mdw-theme" mdw-ink="amber A700"><textarea class="mdw-textfield__input" placeholder=" " rows="5" required>Just wanted to let you kn</textarea><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Message *</div></div></div><div class="mdw-textfield__helper-text">Helper text.</div><div class="mdw-textfield__error-text">Error: Required.</div></label><label class="mdw-textfield"><textarea class="mdw-textfield__input mdw-theme" mdw-ink="amber A700" placeholder=" " rows="5" disabled>This textarea is disabled.</textarea><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Message *</div></div></div><div class="mdw-textfield__helper-text">Helper text.</div><div class="mdw-textfield__error-text">Error: Required.</div></label></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item js" mdw-colspan="4"><div class="render-fill"><div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark=""><div>12:30</div><i class="material-icons" style="letter-spacing:2px;padding:0 2px">&#xE1BA;&#xE1C8;&#xE1A4;</i></div><div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark=""><div class="mdw-appbar__action"><div class="mdw-appbar__start"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">arrow_back</a></div><div class="mdw-appbar__title">With Javascript</div><div class="mdw-appbar__end"><a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon="" tabindex="0">done</a></div></div></div><div class="content" style="padding:8px 16px"><label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined><input class="mdw-textfield__input" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Title</div></div></div><div class="mdw-textfield__helper-text">Helper</div></label><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="primary" style="width:88px"><input class="mdw-textfield__input" value="10.00" placeholder=" "><div class="mdw-textfield__prefix">$</div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Price</div></div></div><div class="mdw-textfield__helper-text">Helper</div></label><label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary"><input class="mdw-textfield__input" placeholder=" "><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Location (optional)</div></div></div><div class="mdw-textfield__helper-text">Helper</div></label></div><label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-autosize><textarea class="mdw-textfield__input" placeholder=" " rows="4">Unique and rare dress from 1952. Made out of washed cotton with front pockets. Sleeveless with button closures.
2
- (Erase Me)</textarea><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Description</div></div></div></label><div class="horizontal-controls"><label class="mdw-textfield mdw-theme" mdw-ink="secondary"><input class="mdw-textfield__input" type="phone" placeholder=" " value="65"><div class="mdw-textfield__signifier material-icons">phone</div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Name</div></div></div></label><label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px"><select class="mdw-textfield__input" type="phone"><option value="">Unknown</option><option value="Mobile">Mobile</option><option value="Home">Home</option><option value="Work">Work</option></select><div class="mdw-textfield__icon" mdw-dropdown></div><div class="mdw-textfield__border"><div class="mdw-textfield__outline-gap"><div class="mdw-textfield__label">Phone Type</div></div></div></label></div></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div></div><div class="mdw-grid__item" mdw-colspan="4"></div><div class="mdw-grid__item" mdw-colspan="4"></div></div><script src="textfield.min.js"></script></div></div></body><script src="default.common.min.js"></script></html>
package/docs/textfield.min.js DELETED
@@ -1,2 +0,0 @@
1
- !function(e){function t(t){for(var r,l,d=t[0],o=t[1],s=t[2],u=0,c=[];u<d.length;u++)l=d[u],i[l]&&c.push(i[l][0]),i[l]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);for(m&&m(t);c.length;)c.shift()();return a.push.apply(a,s||[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],r=!0,d=1;d<n.length;d++){var o=n[d];0!==i[o]&&(r=!1)}r&&(a.splice(t--,1),e=l(l.s=n[0]))}return e}var r={},i={30:0},a=[];function l(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=r,l.d=function(e,t,n){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)l.d(n,r,function(t){return e[t]}.bind(null,r));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="";var d=window.webpackJsonp=window.webpackJsonp||[],o=d.push.bind(d);d.push=t,d=d.slice();for(var s=0;s<d.length;s++)t(d[s]);var m=o;a.push([90,1,0]),n()}({90:function(e,t,n){n(91),e.exports=n(92)},91:function(e,t,n){"use strict";n.r(t);var r,i=n(0),a=n(11),l=n(6);function d(){var e=document.querySelector('input[name="javascript"][value="required"]').checked,t=document.querySelector('input[name="javascript"][value="optional"]').checked,n=document.querySelector('input[name="autosize"]').checked,i=document.querySelector('input[name="field-type"][value="text-area"]').checked,d=e||t;n&&d&&i?r.setAttribute("mdw-autosize",""):r.removeAttribute("mdw-autosize"),r.getElementsByClassName("mdw-textfield__input")[0].removeAttribute("style"),a.b(r),document.getElementsByClassName("component-html")[0].textContent=Object(l.a)(r),d&&a.a(r),document.getElementsByClassName("component-js")[0].textContent="mdw.TextField.attach(element);"}function o(e){var t,n,i,a,l,o=e.target,s=o.name,m=o.value,u=o.checked,c=r.getElementsByClassName("mdw-textfield__input")[0],p=c.tagName.toLowerCase();switch(s){case"field-type":switch(m){default:case"single-type":r.removeAttribute("mdw-autosize"),p="input";break;case"text-area":p="textarea";break;case"dropdown":r.removeAttribute("mdw-autosize"),p="select"}break;case"style":switch(m){default:case"filled":r.removeAttribute("mdw-outlined"),r.removeAttribute("mdw-solo");break;case"outlined":r.setAttribute("mdw-outlined",""),r.removeAttribute("mdw-solo");break;case"solo":r.removeAttribute("mdw-outlined"),r.setAttribute("mdw-solo","")}break;case"box":u?r.setAttribute("mdw-box",""):r.removeAttribute("mdw-box");break;case"outlined":u?r.setAttribute("mdw-outlined",""):r.removeAttribute("mdw-outlined");break;case"disabled":u?r.getElementsByClassName("mdw-textfield__input")[0].setAttribute("disabled",""):r.getElementsByClassName("mdw-textfield__input")[0].removeAttribute("disabled");break;case"4minlength":u?r.getElementsByClassName("mdw-textfield__input")[0].setAttribute("minlength","4"):r.getElementsByClassName("mdw-textfield__input")[0].removeAttribute("minlength");break;case"required":u?r.getElementsByClassName("mdw-textfield__input")[0].setAttribute("required",""):r.getElementsByClassName("mdw-textfield__input")[0].removeAttribute("required");break;case"prefix":i=r.getElementsByClassName("mdw-textfield__prefix")[0],u?i||((i=document.createElement("div")).classList.add("mdw-textfield__prefix"),i.textContent="$",r.appendChild(i)):i&&i.parentElement.removeChild(i);break;case"suffix":a=r.getElementsByClassName("mdw-textfield__suffix")[0],u?a||((a=document.createElement("div")).classList.add("mdw-textfield__suffix"),a.textContent="lbs",r.appendChild(a)):a&&a.parentElement.removeChild(a);break;case"signifier":l=r.getElementsByClassName("mdw-textfield__signifier")[0],u?l||((l=document.createElement("div")).classList.add("mdw-textfield__signifier"),l.classList.add("material-icons"),l.textContent="security",c.nextElementSibling?r.insertBefore(l,c.nextElementSibling):r.appendChild(l)):l&&l.parentElement.removeChild(l);break;case"helper-text":t=r.getElementsByClassName("mdw-textfield__helper-text")[0],u?t||((t=document.createElement("div")).classList.add("mdw-textfield__helper-text"),t.textContent="Helper text.",r.appendChild(t)):t&&t.parentElement.removeChild(t);break;case"error-text":n=r.getElementsByClassName("mdw-textfield__error-text")[0],u?n||((n=document.createElement("div")).classList.add("mdw-textfield__error-text"),n.textContent="Error text.",r.appendChild(n)):n&&n.parentElement.removeChild(n);break;case"ink":switch(m){case"none":r.removeAttribute("mdw-ink");break;default:r.setAttribute("mdw-ink",m)}}if(c.tagName.toLowerCase()!==p){for(var f=document.createElement(p),b=c.attributes.length-1;b>=0;b-=1){var x=c.attributes.item(b);f.attributes.setNamedItem(x.cloneNode())}c.parentElement.replaceChild(f,c),c=f;var v=r.getElementsByClassName("mdw-textfield__icon")[0];if("select"===p){var w=document.createElement("option");w.setAttribute("value",""),w.textContent="Empty";var h=document.createElement("option");h.setAttribute("value","option1"),h.textContent="Option 1";var _=document.createElement("option");_.setAttribute("value","option2"),_.textContent="Option 2",c.appendChild(w),c.appendChild(h),c.appendChild(_),v||((v=document.createElement("div")).classList.add("mdw-textfield__icon"),v.setAttribute("mdw-dropdown",""),r.appendChild(v))}else v&&v.parentElement.removeChild(v)}c.removeAttribute("rows"),d()}Object(i.h)(document.querySelectorAll(".js .mdw-textfield"),a.a),r=document.querySelector(".component-sample .mdw-textfield"),Object(i.h)(document.querySelectorAll("input[name]"),function(e){e.addEventListener("change",o)}),d()},92:function(e,t,n){e.exports=n.p+"textfield.html"}});
2
- //# sourceMappingURL=textfield.min.js.map
package/docs/textfield.min.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./components/textfield.js","webpack:///./components/textfield.pug"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","30","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","__webpack_exports__","sampleComponent","_core_dom__WEBPACK_IMPORTED_MODULE_0__","_components_textfield_index__WEBPACK_IMPORTED_MODULE_1__","_sample_utils__WEBPACK_IMPORTED_MODULE_2__","updateSampleCode","jsRequired","document","querySelector","checked","jsOptional","useAutoSize","isTextArea","useJS","setAttribute","removeAttribute","getElementsByClassName","TextField","textContent","convertElementToCode","onOptionChange","event","helperText","errorText","prefixText","suffixText","signifierElement","_event$target","target","inputElement","desiredTagName","tagName","toLowerCase","createElement","classList","add","appendChild","parentElement","removeChild","nextElementSibling","insertBefore","newElement","attributes","attr","item","setNamedItem","cloneNode","replaceChild","dropdown","option1","option2","option3","iterateArrayLike","querySelectorAll","el","addEventListener"],"mappings":"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","file":"textfield.min.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t30: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([90,1,0]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import { iterateArrayLike } from '../../core/dom';\nimport * as TextField from '../../components/textfield/index';\n\nimport { convertElementToCode } from '../_sample-utils';\n\n/** @return {void} */\nfunction initializeSampleComponents() {\n iterateArrayLike(document.querySelectorAll('.js .mdw-textfield'), TextField.attach);\n}\n\n/** @type {HTMLElement} */\nlet sampleComponent;\n\n/** @return {void} */\nfunction updateSampleCode() {\n const jsRequired = document.querySelector('input[name=\"javascript\"][value=\"required\"]').checked;\n const jsOptional = document.querySelector('input[name=\"javascript\"][value=\"optional\"]').checked;\n const useAutoSize = document.querySelector('input[name=\"autosize\"]').checked;\n const isTextArea = document.querySelector('input[name=\"field-type\"][value=\"text-area\"]').checked;\n const useJS = jsRequired || jsOptional;\n if (useAutoSize && useJS && isTextArea) {\n sampleComponent.setAttribute('mdw-autosize', '');\n } else {\n sampleComponent.removeAttribute('mdw-autosize');\n }\n // Remove resize values\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('style');\n\n // Strip JS related elements and attributes\n TextField.detach(sampleComponent);\n\n const htmlCodeElement = document.getElementsByClassName('component-html')[0];\n htmlCodeElement.textContent = convertElementToCode(sampleComponent);\n\n // Reattach JS if requested\n if (useJS) {\n TextField.attach(sampleComponent);\n }\n\n const jsCodeElement = document.getElementsByClassName('component-js')[0];\n jsCodeElement.textContent = 'mdw.TextField.attach(element);';\n}\n\n/**\n * @param {Event} event\n * @return {void}\n */\nfunction onOptionChange(event) {\n const { name, value, checked } = event.target;\n let inputElement = sampleComponent.getElementsByClassName('mdw-textfield__input')[0];\n let desiredTagName = inputElement.tagName.toLowerCase();\n let helperText;\n let errorText;\n let prefixText;\n let suffixText;\n let signifierElement;\n switch (name) {\n case 'field-type':\n switch (value) {\n default:\n case 'single-type':\n sampleComponent.removeAttribute('mdw-autosize');\n desiredTagName = 'input';\n break;\n case 'text-area':\n desiredTagName = 'textarea';\n break;\n case 'dropdown':\n sampleComponent.removeAttribute('mdw-autosize');\n desiredTagName = 'select';\n break;\n }\n break;\n case 'style':\n switch (value) {\n default:\n case 'filled':\n sampleComponent.removeAttribute('mdw-outlined');\n sampleComponent.removeAttribute('mdw-solo');\n break;\n case 'outlined':\n sampleComponent.setAttribute('mdw-outlined', '');\n sampleComponent.removeAttribute('mdw-solo');\n break;\n case 'solo':\n sampleComponent.removeAttribute('mdw-outlined');\n sampleComponent.setAttribute('mdw-solo', '');\n break;\n }\n break;\n case 'box':\n if (checked) {\n sampleComponent.setAttribute('mdw-box', '');\n } else {\n sampleComponent.removeAttribute('mdw-box');\n }\n break;\n case 'outlined':\n if (checked) {\n sampleComponent.setAttribute('mdw-outlined', '');\n } else {\n sampleComponent.removeAttribute('mdw-outlined');\n }\n break;\n case 'disabled':\n if (checked) {\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('disabled', '');\n } else {\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('disabled');\n }\n break;\n case '4minlength':\n if (checked) {\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('minlength', '4');\n } else {\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('minlength');\n }\n break;\n case 'required':\n if (checked) {\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('required', '');\n } else {\n sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('required');\n }\n break;\n case 'prefix':\n prefixText = sampleComponent.getElementsByClassName('mdw-textfield__prefix')[0];\n if (checked) {\n if (!prefixText) {\n prefixText = document.createElement('div');\n prefixText.classList.add('mdw-textfield__prefix');\n prefixText.textContent = '$';\n sampleComponent.appendChild(prefixText);\n }\n } else if (prefixText) {\n prefixText.parentElement.removeChild(prefixText);\n }\n break;\n case 'suffix':\n suffixText = sampleComponent.getElementsByClassName('mdw-textfield__suffix')[0];\n if (checked) {\n if (!suffixText) {\n suffixText = document.createElement('div');\n suffixText.classList.add('mdw-textfield__suffix');\n suffixText.textContent = 'lbs';\n sampleComponent.appendChild(suffixText);\n }\n } else if (suffixText) {\n suffixText.parentElement.removeChild(suffixText);\n }\n break;\n case 'signifier':\n signifierElement = sampleComponent.getElementsByClassName('mdw-textfield__signifier')[0];\n if (checked) {\n if (!signifierElement) {\n signifierElement = document.createElement('div');\n signifierElement.classList.add('mdw-textfield__signifier');\n signifierElement.classList.add('material-icons');\n signifierElement.textContent = 'security';\n if (inputElement.nextElementSibling) {\n sampleComponent.insertBefore(signifierElement, inputElement.nextElementSibling);\n } else {\n sampleComponent.appendChild(signifierElement);\n }\n }\n } else if (signifierElement) {\n signifierElement.parentElement.removeChild(signifierElement);\n }\n break;\n case 'helper-text':\n helperText = sampleComponent.getElementsByClassName('mdw-textfield__helper-text')[0];\n if (checked) {\n if (!helperText) {\n helperText = document.createElement('div');\n helperText.classList.add('mdw-textfield__helper-text');\n helperText.textContent = 'Helper text.';\n sampleComponent.appendChild(helperText);\n }\n } else if (helperText) {\n helperText.parentElement.removeChild(helperText);\n }\n break;\n case 'error-text':\n errorText = sampleComponent.getElementsByClassName('mdw-textfield__error-text')[0];\n if (checked) {\n if (!errorText) {\n errorText = document.createElement('div');\n errorText.classList.add('mdw-textfield__error-text');\n errorText.textContent = 'Error text.';\n sampleComponent.appendChild(errorText);\n }\n } else if (errorText) {\n errorText.parentElement.removeChild(errorText);\n }\n break;\n case 'ink':\n switch (value) {\n case 'none':\n sampleComponent.removeAttribute('mdw-ink');\n break;\n default:\n sampleComponent.setAttribute('mdw-ink', value);\n break;\n }\n break;\n default:\n }\n\n if (inputElement.tagName.toLowerCase() !== desiredTagName) {\n const newElement = document.createElement(desiredTagName);\n for (let i = inputElement.attributes.length - 1; i >= 0; i -= 1) {\n const attr = inputElement.attributes.item(i);\n newElement.attributes.setNamedItem(attr.cloneNode());\n }\n inputElement.parentElement.replaceChild(newElement, inputElement);\n inputElement = newElement;\n let dropdown = sampleComponent.getElementsByClassName('mdw-textfield__icon')[0];\n if (desiredTagName === 'select') {\n const option1 = document.createElement('option');\n option1.setAttribute('value', '');\n option1.textContent = 'Empty';\n const option2 = document.createElement('option');\n option2.setAttribute('value', 'option1');\n option2.textContent = 'Option 1';\n const option3 = document.createElement('option');\n option3.setAttribute('value', 'option2');\n option3.textContent = 'Option 2';\n inputElement.appendChild(option1);\n inputElement.appendChild(option2);\n inputElement.appendChild(option3);\n if (!dropdown) {\n dropdown = document.createElement('div');\n dropdown.classList.add('mdw-textfield__icon');\n dropdown.setAttribute('mdw-dropdown', '');\n sampleComponent.appendChild(dropdown);\n }\n } else if (dropdown) {\n dropdown.parentElement.removeChild(dropdown);\n }\n }\n inputElement.removeAttribute('rows');\n updateSampleCode();\n}\n\n/** @return {void} */\nfunction setupComponentOptions() {\n sampleComponent = document.querySelector('.component-sample .mdw-textfield');\n iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {\n el.addEventListener('change', onOptionChange);\n });\n}\n\ninitializeSampleComponents();\nsetupComponentOptions();\nupdateSampleCode();\n","module.exports = __webpack_public_path__ + \"textfield.html\";"],"sourceRoot":""}