@shortfuse/materialdesignweb 0.0.9 → 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 (392) hide show
  1. package/.browserslistrc +3 -0
  2. package/.eslintrc.json +146 -27
  3. package/.stylelintrc.json +598 -2
  4. package/.vscode/launch.json +20 -5
  5. package/.vscode/settings.json +3 -0
  6. package/.vscode/tasks.json +19 -10
  7. package/CHANGELOG.md +24 -0
  8. package/README.md +84 -2
  9. package/adapters/datatable/column.js +203 -0
  10. package/adapters/datatable/index.js +972 -0
  11. package/adapters/dom/index.js +601 -0
  12. package/adapters/list/index.js +69 -0
  13. package/adapters/search/index.js +521 -0
  14. package/components/appbar/_spec.scss +225 -0
  15. package/components/appbar/_theme.scss +0 -0
  16. package/components/appbar/index.scss +2 -0
  17. package/components/banner/_spec.scss +118 -0
  18. package/components/banner/_theme.scss +0 -0
  19. package/components/banner/index.scss +2 -0
  20. package/components/bottomnav/README.md +85 -0
  21. package/components/bottomnav/_spec.scss +157 -0
  22. package/components/bottomnav/_theme.scss +0 -0
  23. package/components/bottomnav/index.js +122 -0
  24. package/components/bottomnav/index.scss +2 -0
  25. package/components/bottomnav/item.js +89 -0
  26. package/components/{core/button → button}/README.md +16 -22
  27. package/components/button/_spec.scss +161 -0
  28. package/components/button/_theme.scss +65 -0
  29. package/components/button/index.eta +32 -0
  30. package/components/button/index.js +43 -0
  31. package/components/button/index.pug +18 -0
  32. package/components/button/index.scss +2 -0
  33. package/components/card/_spec.scss +249 -0
  34. package/components/card/_theme.scss +0 -0
  35. package/components/card/index.scss +2 -0
  36. package/components/chip/_spec.scss +134 -0
  37. package/components/chip/_theme.scss +177 -0
  38. package/components/chip/index.js +21 -0
  39. package/components/chip/index.scss +2 -0
  40. package/components/chip/item.js +20 -0
  41. package/components/datatable/_spec.scss +288 -0
  42. package/components/datatable/_theme.scss +154 -0
  43. package/components/datatable/cell.js +45 -0
  44. package/components/datatable/columnheader.js +47 -0
  45. package/components/datatable/index.js +388 -0
  46. package/components/datatable/index.scss +2 -0
  47. package/components/datatable/row.js +49 -0
  48. package/components/datatable/rowheader.js +18 -0
  49. package/components/dialog/_spec.scss +213 -0
  50. package/components/dialog/_theme.scss +0 -0
  51. package/components/dialog/index.js +627 -0
  52. package/components/dialog/index.scss +2 -0
  53. package/components/divider/_spec.scss +13 -0
  54. package/components/divider/_theme.scss +0 -0
  55. package/components/divider/index.scss +2 -0
  56. package/components/elevation/_spec.scss +9 -0
  57. package/components/elevation/_theme.scss +0 -0
  58. package/components/elevation/index.scss +2 -0
  59. package/components/fab/_spec.scss +222 -0
  60. package/components/fab/_theme.scss +0 -0
  61. package/components/fab/index.js +103 -0
  62. package/components/fab/index.scss +2 -0
  63. package/components/grid/_spec.scss +312 -0
  64. package/components/grid/_theme.scss +0 -0
  65. package/components/grid/index.scss +2 -0
  66. package/components/layout/_mixins.scss +33 -0
  67. package/components/layout/_spec.scss +1012 -0
  68. package/components/layout/_theme.scss +44 -0
  69. package/components/layout/index.js +464 -0
  70. package/components/layout/index.scss +2 -0
  71. package/components/list/_spec.scss +397 -0
  72. package/components/list/_theme.scss +111 -0
  73. package/components/list/content.js +110 -0
  74. package/components/list/index.js +260 -0
  75. package/components/list/index.scss +2 -0
  76. package/components/list/item.js +170 -0
  77. package/components/list/secondary.js +46 -0
  78. package/components/menu/_spec.scss +362 -0
  79. package/components/menu/_theme.scss +0 -0
  80. package/components/menu/index.js +721 -0
  81. package/components/menu/index.scss +2 -0
  82. package/components/menu/item.js +239 -0
  83. package/components/{core/progress/style.scss → progress/_spec.scss} +36 -25
  84. package/components/progress/_theme.scss +0 -0
  85. package/components/progress/index.js +36 -0
  86. package/components/progress/index.scss +2 -0
  87. package/components/selection/_spec.scss +386 -0
  88. package/components/selection/_theme.scss +166 -0
  89. package/components/selection/index.eta +60 -0
  90. package/components/selection/index.js +76 -0
  91. package/components/selection/index.pug +30 -0
  92. package/components/selection/index.scss +2 -0
  93. package/components/selection/input.js +56 -0
  94. package/components/selection/radiogroup.js +47 -0
  95. package/components/slider/_spec.scss +64 -0
  96. package/components/slider/_theme.scss +0 -0
  97. package/components/slider/index.scss +2 -0
  98. package/components/snackbar/_spec.scss +195 -0
  99. package/components/snackbar/_theme.scss +0 -0
  100. package/components/snackbar/index.js +344 -0
  101. package/components/snackbar/index.scss +2 -0
  102. package/components/tab/_spec.scss +235 -0
  103. package/components/tab/_theme.scss +0 -0
  104. package/components/tab/content.js +205 -0
  105. package/components/tab/index.js +260 -0
  106. package/components/tab/index.scss +2 -0
  107. package/components/tab/item.js +89 -0
  108. package/components/tab/list.js +210 -0
  109. package/components/tab/panel.js +54 -0
  110. package/components/template/_theme.scss +27 -0
  111. package/components/{core/textfield → textfield}/README.md +70 -50
  112. package/components/textfield/_mixins.scss +52 -0
  113. package/components/textfield/_spec.scss +809 -0
  114. package/components/textfield/_theme.scss +299 -0
  115. package/components/textfield/index.eta +74 -0
  116. package/components/textfield/index.js +168 -0
  117. package/components/textfield/index.pug +30 -0
  118. package/components/textfield/index.scss +2 -0
  119. package/components/tooltip/_spec.scss +188 -0
  120. package/components/tooltip/_theme.scss +0 -0
  121. package/components/tooltip/index.scss +2 -0
  122. package/components/type/_spec.scss +224 -0
  123. package/components/type/_theme.scss +0 -0
  124. package/components/type/index.scss +2 -0
  125. package/core/_breakpoint.scss +189 -0
  126. package/core/_elevation.scss +38 -0
  127. package/core/_length.scss +9 -0
  128. package/core/_motion.scss +31 -0
  129. package/core/_platform.scss +34 -0
  130. package/core/_type.scss +127 -0
  131. package/core/aria/attributes.js +141 -0
  132. package/core/aria/button.js +50 -0
  133. package/core/aria/keyboard.js +93 -0
  134. package/core/aria/rovingtabindex.js +178 -0
  135. package/core/aria/tab.js +60 -0
  136. package/core/color/_spec.scss +0 -0
  137. package/core/color/_theme.scss +390 -0
  138. package/core/color/index.scss +2 -0
  139. package/core/document/index.js +39 -0
  140. package/core/dom.js +271 -0
  141. package/core/overlay/_spec.scss +31 -0
  142. package/core/overlay/_theme.scss +171 -0
  143. package/core/overlay/index.js +108 -0
  144. package/core/overlay/index.scss +2 -0
  145. package/core/ripple/_spec.scss +197 -0
  146. package/core/ripple/_theme.scss +40 -0
  147. package/core/ripple/index.js +294 -0
  148. package/core/ripple/index.scss +2 -0
  149. package/core/theme/_config.scss +2 -0
  150. package/core/theme/_mixins.scss +172 -0
  151. package/{components/theming/palettes.scss → core/theme/_palettes.scss} +173 -150
  152. package/core/theme/_variables.scss +24 -0
  153. package/core/theme/index.js +50 -0
  154. package/core/throttler.js +42 -0
  155. package/core/transition/index.js +468 -0
  156. package/docs/_flex.scss +22 -0
  157. package/docs/_menuoptions.js +183 -0
  158. package/docs/_mixins.pug +155 -0
  159. package/docs/_partials/_androidnavbar.eta +5 -0
  160. package/docs/_partials/_androidstatusbar.eta +13 -0
  161. package/docs/_partials/_appbar.eta +29 -0
  162. package/docs/_partials/_buttontest.eta +31 -0
  163. package/docs/_partials/_header.eta +149 -0
  164. package/docs/_partials/_navlistitem.eta +16 -0
  165. package/docs/_partials/_target.eta +1 -0
  166. package/docs/_sample-utils.js +93 -0
  167. package/docs/_storage.js +33 -0
  168. package/docs/docs.scss +295 -0
  169. package/docs/index.eta +16 -0
  170. package/docs/index.js +0 -0
  171. package/docs/pages/appbar.eta +114 -0
  172. package/docs/pages/appbar.js +0 -0
  173. package/docs/pages/appbar.pug +78 -0
  174. package/docs/pages/bottomnav.eta +188 -0
  175. package/docs/pages/bottomnav.js +115 -0
  176. package/docs/pages/bottomnav.pug +137 -0
  177. package/docs/pages/button.eta +124 -0
  178. package/docs/pages/button.js +224 -0
  179. package/docs/pages/button.pug +121 -0
  180. package/docs/pages/card.eta +90 -0
  181. package/docs/pages/card.js +177 -0
  182. package/docs/pages/card.pug +74 -0
  183. package/docs/pages/chip.eta +122 -0
  184. package/docs/pages/chip.js +82 -0
  185. package/docs/pages/chip.pug +91 -0
  186. package/docs/pages/color.eta +143 -0
  187. package/docs/pages/color.js +262 -0
  188. package/docs/pages/color.pug +121 -0
  189. package/docs/pages/datatable.eta +323 -0
  190. package/docs/pages/datatable.js +164 -0
  191. package/docs/pages/datatable.pug +283 -0
  192. package/docs/pages/dialog.eta +186 -0
  193. package/docs/pages/dialog.js +177 -0
  194. package/docs/pages/dialog.pug +132 -0
  195. package/docs/pages/dom.eta +26 -0
  196. package/docs/pages/dom.js +143 -0
  197. package/docs/pages/dom.pug +22 -0
  198. package/docs/pages/elevation.eta +35 -0
  199. package/docs/pages/elevation.js +0 -0
  200. package/docs/pages/elevation.pug +25 -0
  201. package/docs/pages/fab.eta +99 -0
  202. package/docs/pages/fab.js +44 -0
  203. package/docs/pages/fab.pug +66 -0
  204. package/docs/pages/grid.eta +135 -0
  205. package/docs/pages/grid.js +128 -0
  206. package/docs/pages/grid.pug +95 -0
  207. package/docs/pages/layout.eta +8 -0
  208. package/docs/pages/layout.js +0 -0
  209. package/docs/pages/layout.pug +7 -0
  210. package/docs/pages/list.eta +465 -0
  211. package/docs/pages/list.js +9 -0
  212. package/docs/pages/list.pug +326 -0
  213. package/docs/pages/menu.eta +276 -0
  214. package/docs/pages/menu.js +217 -0
  215. package/docs/pages/menu.pug +205 -0
  216. package/docs/pages/overlay.eta +69 -0
  217. package/docs/pages/overlay.js +4 -0
  218. package/docs/pages/overlay.pug +55 -0
  219. package/docs/pages/progress.eta +23 -0
  220. package/docs/pages/progress.js +12 -0
  221. package/docs/pages/progress.pug +16 -0
  222. package/docs/pages/ripple.eta +27 -0
  223. package/docs/pages/ripple.js +4 -0
  224. package/docs/pages/ripple.pug +21 -0
  225. package/docs/pages/search.eta +246 -0
  226. package/docs/pages/search.js +243 -0
  227. package/docs/pages/search.pug +165 -0
  228. package/docs/pages/selection.eta +111 -0
  229. package/docs/pages/selection.js +13 -0
  230. package/docs/pages/selection.pug +74 -0
  231. package/docs/pages/slider.eta +23 -0
  232. package/docs/pages/slider.js +0 -0
  233. package/docs/pages/slider.pug +17 -0
  234. package/docs/pages/snackbar.eta +83 -0
  235. package/docs/pages/snackbar.js +158 -0
  236. package/docs/pages/snackbar.pug +60 -0
  237. package/docs/pages/tab.eta +421 -0
  238. package/docs/pages/tab.js +151 -0
  239. package/docs/pages/tab.pug +304 -0
  240. package/docs/pages/textfield.eta +486 -0
  241. package/docs/pages/textfield.js +254 -0
  242. package/docs/pages/textfield.pug +360 -0
  243. package/docs/pages/tooltip.eta +94 -0
  244. package/docs/pages/tooltip.js +0 -0
  245. package/docs/pages/tooltip.pug +78 -0
  246. package/docs/pages/transition.eta +117 -0
  247. package/docs/pages/transition.js +54 -0
  248. package/docs/pages/transition.pug +76 -0
  249. package/docs/pages/type.eta +31 -0
  250. package/docs/pages/type.js +0 -0
  251. package/docs/pages/type.pug +29 -0
  252. package/docs/postrender.js +39 -0
  253. package/docs/prerender.js +16 -0
  254. package/docs/pwa/_dialogs.eta +143 -0
  255. package/docs/pwa/_dialogs.pug +96 -0
  256. package/docs/pwa/_menus.eta +16 -0
  257. package/docs/pwa/_menus.pug +11 -0
  258. package/docs/pwa/pwa-prerender.js +3 -0
  259. package/docs/pwa/pwa.eta +480 -0
  260. package/docs/pwa/pwa.js +306 -0
  261. package/docs/pwa/pwa.pug +325 -0
  262. package/docs/pwa/pwa.scss +26 -0
  263. package/docs/spec.scss +26 -0
  264. package/docs/themes/_component-themes.scss +26 -0
  265. package/docs/themes/theme-colored-fallbacks.scss +17 -0
  266. package/docs/themes/theme-colored.scss +17 -0
  267. package/docs/themes/theme-default-fallbacks.scss +17 -0
  268. package/docs/themes/theme-default.scss +17 -0
  269. package/jsconfig.json +4 -2
  270. package/package.json +43 -28
  271. package/scripts/deploy-docs.sh +9 -0
  272. package/templates/index.eta +2 -0
  273. package/templates/index.pug +3 -0
  274. package/utils/function.js +3 -0
  275. package/webpack.config.cjs +257 -0
  276. package/components/_index.scss +0 -4
  277. package/components/all-components.scss +0 -14
  278. package/components/common/functions.scss +0 -173
  279. package/components/common/mixins.scss +0 -107
  280. package/components/common/motion.scss +0 -36
  281. package/components/common/ripple.scss +0 -92
  282. package/components/common/variables.scss +0 -48
  283. package/components/complex/dialog/style.scss +0 -159
  284. package/components/complex/dialog/theming.scss +0 -29
  285. package/components/complex/navdrawer/style.scss +0 -477
  286. package/components/complex/navdrawer/theming.scss +0 -58
  287. package/components/complex/search/index.js +0 -492
  288. package/components/core/bottomnav/README.md +0 -85
  289. package/components/core/bottomnav/index.js +0 -140
  290. package/components/core/bottomnav/style.scss +0 -173
  291. package/components/core/bottomnav/theming.scss +0 -42
  292. package/components/core/button/index.js +0 -52
  293. package/components/core/button/style.scss +0 -283
  294. package/components/core/button/theming.scss +0 -131
  295. package/components/core/list/index.js +0 -94
  296. package/components/core/list/style.scss +0 -269
  297. package/components/core/list/theming.scss +0 -74
  298. package/components/core/menu/index.js +0 -127
  299. package/components/core/menu/style.scss +0 -239
  300. package/components/core/menu/theming.scss +0 -55
  301. package/components/core/progress/index.js +0 -33
  302. package/components/core/selection/style.scss +0 -249
  303. package/components/core/selection/theming.scss +0 -49
  304. package/components/core/switch/style.scss +0 -3
  305. package/components/core/tab/index.js +0 -174
  306. package/components/core/tab/style.scss +0 -202
  307. package/components/core/tab/theming.scss +0 -43
  308. package/components/core/textfield/index.js +0 -169
  309. package/components/core/textfield/style.scss +0 -672
  310. package/components/core/textfield/theming.scss +0 -262
  311. package/components/core/toolbar/style.scss +0 -109
  312. package/components/core/toolbar/theming.scss +0 -28
  313. package/components/core/tooltip/style.scss +0 -127
  314. package/components/core/type/style.scss +0 -133
  315. package/components/core/type/theming.scss +0 -25
  316. package/components/index.js +0 -24
  317. package/components/template/theming.scss +0 -31
  318. package/components/theming/theming.scss +0 -504
  319. package/docs/bottomnav.html +0 -171
  320. package/docs/bottomnav.min.js +0 -383
  321. package/docs/button.html +0 -322
  322. package/docs/button.min.js +0 -251
  323. package/docs/components.min.css +0 -1
  324. package/docs/components.min.js +0 -83
  325. package/docs/dialog.html +0 -103
  326. package/docs/dialog.min.js +0 -160
  327. package/docs/docs.min.css +0 -1
  328. package/docs/docs.min.js +0 -83
  329. package/docs/index.html +0 -55
  330. package/docs/index.min.js +0 -83
  331. package/docs/list.html +0 -442
  332. package/docs/list.min.js +0 -312
  333. package/docs/menu.html +0 -185
  334. package/docs/menu.min.js +0 -370
  335. package/docs/navdrawer.html +0 -199
  336. package/docs/navdrawer.min.js +0 -244
  337. package/docs/progress.html +0 -75
  338. package/docs/progress.min.js +0 -162
  339. package/docs/search.html +0 -230
  340. package/docs/search.min.js +0 -1202
  341. package/docs/selection.html +0 -188
  342. package/docs/selection.min.js +0 -160
  343. package/docs/src/complex/dialog.js +0 -3
  344. package/docs/src/complex/dialog.pug +0 -44
  345. package/docs/src/complex/navdrawer.js +0 -82
  346. package/docs/src/complex/navdrawer.pug +0 -109
  347. package/docs/src/complex/search.js +0 -207
  348. package/docs/src/complex/search.pug +0 -143
  349. package/docs/src/components.scss +0 -1
  350. package/docs/src/core/bottomnav.js +0 -22
  351. package/docs/src/core/bottomnav.pug +0 -93
  352. package/docs/src/core/button.js +0 -16
  353. package/docs/src/core/button.pug +0 -73
  354. package/docs/src/core/list.js +0 -21
  355. package/docs/src/core/list.pug +0 -246
  356. package/docs/src/core/menu.js +0 -33
  357. package/docs/src/core/menu.pug +0 -108
  358. package/docs/src/core/progress.js +0 -11
  359. package/docs/src/core/progress.pug +0 -17
  360. package/docs/src/core/selection.js +0 -4
  361. package/docs/src/core/selection.pug +0 -92
  362. package/docs/src/core/tab.js +0 -21
  363. package/docs/src/core/tab.pug +0 -180
  364. package/docs/src/core/textfield.js +0 -15
  365. package/docs/src/core/textfield.pug +0 -274
  366. package/docs/src/core/toolbar.js +0 -4
  367. package/docs/src/core/toolbar.pug +0 -79
  368. package/docs/src/core/tooltip.js +0 -4
  369. package/docs/src/core/tooltip.pug +0 -76
  370. package/docs/src/core/type.js +0 -4
  371. package/docs/src/core/type.pug +0 -36
  372. package/docs/src/docs.scss +0 -200
  373. package/docs/src/index.pug +0 -5
  374. package/docs/src/mixins.pug +0 -72
  375. package/docs/src/targetHandler.js +0 -50
  376. package/docs/src/theming.ie11.scss +0 -35
  377. package/docs/src/theming.scss +0 -36
  378. package/docs/tab.html +0 -301
  379. package/docs/tab.min.js +0 -397
  380. package/docs/textfield.html +0 -476
  381. package/docs/textfield.min.js +0 -381
  382. package/docs/theming.ie11.min.css +0 -1
  383. package/docs/theming.ie11.min.js +0 -83
  384. package/docs/theming.min.css +0 -1
  385. package/docs/theming.min.js +0 -83
  386. package/docs/toolbar.html +0 -213
  387. package/docs/toolbar.min.js +0 -160
  388. package/docs/tooltip.html +0 -138
  389. package/docs/tooltip.min.js +0 -160
  390. package/docs/type.html +0 -94
  391. package/docs/type.min.js +0 -160
  392. package/webpack.config.js +0 -176
package/docs/pages/tab.eta ADDED
@@ -0,0 +1,421 @@
1
+ <% var T = '../../templates/index.eta' %>
2
+ <% layout('../_partials/_header.eta', {page: 'tab'}) %>
3
+ <div class="mdw-grid docs-tab" mdw-margin-top mdw-margin-bottom mdw-stretch>
4
+ <div class="mdw-grid__item" mdw-colspan="100%">
5
+ <h5 class="mdw-type" mdw-baseline-next="36">Tabs make it easy to explore and switch between different views.</h5>
6
+ <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>
7
+ </div>
8
+ <div class="mdw-grid__item" mdw-colspan="8">
9
+ <div class="mdw-grid__content">
10
+ <div class="component-sample">
11
+ <div class="component-sample__container">
12
+ <div class="mdw-tab">
13
+ <div class="mdw-tab__list">
14
+ <div class="mdw-tab__item mdw-theme mdw-overlay" mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="true">
15
+ <div class="mdw-tab__icon material-icons">looks_one</div>
16
+ <div class="mdw-tab__label">Tab Item One</div>
17
+ </div>
18
+ <div class="mdw-tab__item mdw-theme mdw-overlay" mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="false">
19
+ <div class="mdw-tab__icon material-icons">looks_two</div>
20
+ <div class="mdw-tab__label">Tab Item Two</div>
21
+ </div>
22
+ <div class="mdw-tab__item mdw-theme mdw-overlay" mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="false">
23
+ <div class="mdw-tab__icon material-icons">looks_3</div>
24
+ <div class="mdw-tab__label">Tab Item Three</div>
25
+ </div>
26
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="secondary A200"></div>
27
+ </div>
28
+ <div class="mdw-tab__content mdw-theme" mdw-surface="gray 800" mdw-dark>
29
+ <div class="mdw-tab__panel">
30
+ <div style="min-height:200px;padding:20px;">
31
+ <p>Sample Content One</p>
32
+ <%~ includeFile(T, { button: { borderInk:true , text:'Unfocusable when inactive' }}) %>
33
+ <p>HTML Ordered List with (#) representing DOM position</p>
34
+ <ol>
35
+ <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
36
+ <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
37
+ <li>(3) Always visible</li>
38
+ <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
39
+ <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
40
+ <li>(6) Always visible</li>
41
+ </ol>
42
+ </div>
43
+ </div>
44
+ <div class="mdw-tab__panel">
45
+ <div style="min-height:200px;padding:20px;">
46
+ <p>Sample Content Two</p>
47
+ <%~ includeFile(T, { button: { borderInk:true , text:'Unfocusable when inactive' }}) %>
48
+ <p>HTML Ordered List with (#) representing DOM position</p>
49
+ <ol>
50
+ <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
51
+ <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
52
+ <li>(3) Always visible</li>
53
+ <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
54
+ <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
55
+ <li>(6) Always visible</li>
56
+ </ol>
57
+ </div>
58
+ </div>
59
+ <div class="mdw-tab__panel">
60
+ <div style="min-height:200px;padding:20px;">
61
+ <p>Sample Content Three</p>
62
+ <%~ includeFile(T, { button: { borderInk:true , text:'Unfocusable when inactive' }}) %>
63
+ <p>HTML Ordered List with (#) representing DOM position</p>
64
+ <ol>
65
+ <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
66
+ <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
67
+ <li>(3) Always visible</li>
68
+ <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
69
+ <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
70
+ <li>(6) Always visible</li>
71
+ </ol>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ <div class="mdw-grid__item" mdw-colspan="4">
81
+ <div class="mdw-type" mdw-style="subtitle">Javascript</div>
82
+ <div class="docs-option-list">
83
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'required', checked:true, text:'Required' }}) %>
84
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', disabled:true, text:'Optional' }}) %>
85
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', disabled:true, text:'None' }}) %>
86
+ </div>
87
+ <div class="mdw-type" mdw-style="subtitle">Ink</div>
88
+ <div class="docs-option-list">
89
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'default', text:'Default' }}) %>
90
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'primary A400', text:'Primary A400' }}) %>
91
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'secondary A200', checked:true, text:'Secondary A200' }}) %>
92
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'warn', text:'Warn' }}) %>
93
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'purple A400', text:'Purple A400' }}) %>
94
+ </div>
95
+ <div class="mdw-type" mdw-style="subtitle">Surface</div>
96
+ <div class="docs-option-list">
97
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'none', checked:true, text:'None' }}) %>
98
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'primary dark', text:'Primary (Dark)' }}) %>
99
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'secondary 100 dark', text:'Secondary 100 (Dark)' }}) %>
100
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'warn 200 light', text:'Warn 200 (Light)' }}) %>
101
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'dark 700 dark', text:'Green 700 (Dark)' }}) %>
102
+ </div>
103
+ <div class="mdw-type" mdw-style="subtitle">Scrollable</div>
104
+ <div class="docs-option-list">
105
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'content-scrollable', checked:true, text:'Content' }}) %>
106
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'tabs-scrollable', text:'Tabs' }}) %>
107
+ </div>
108
+ </div>
109
+ <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
110
+ <div class="mdw-grid__item" mdw-colspan="8">
111
+ <h6 class="mdw-type">HTML Code</h6>
112
+ <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink>
113
+ <%~ includeFile(T, {button: { icon: true, ink:'secondary', attributes: { 'aria-pressed':'false', 'mdw-overlay-off':'activated' }, text:'PUG', id:'usePug' }}) %>
114
+ </div>
115
+ </div>
116
+ <div class="mdw-grid__item" mdw-colspan="4">
117
+ <h6 class="mdw-type">Javascript Code</h6>
118
+ <div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div>
119
+ </div>
120
+ <div class="mdw-grid__item" mdw-colspan="100%">
121
+ <h6 class="mdw-type">Samples</h6>
122
+ </div>
123
+ <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
124
+ <div class="render-fill">
125
+ <div class="mdw-tab">
126
+ <div class="mdw-tab__list mdw-theme" mdw-surface="cyan 500" mdw-dark>
127
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
128
+ <div class="mdw-tab__label">Item One</div>
129
+ </div>
130
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
131
+ <div class="mdw-tab__label">Item Two</div>
132
+ </div>
133
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
134
+ <div class="mdw-tab__label">Item Three</div>
135
+ </div>
136
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
137
+ </div>
138
+ <div class="mdw-tab__content">
139
+ <div class="mdw-tab__panel">Item One</div>
140
+ <div class="mdw-tab__panel">Item Two</div>
141
+ <div class="mdw-tab__panel">Item Three</div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
147
+ <div class="render-fill">
148
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
149
+ <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark mdw-prominent>
150
+ <div class="mdw-appbar__action">
151
+ <div class="mdw-appbar__start">
152
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
153
+ </div>
154
+ <div class="mdw-appbar__title">Page title</div>
155
+ <div class="mdw-appbar__end">
156
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
157
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
158
+ </div>
159
+ </div>
160
+ <div class="mdw-tab">
161
+ <div class="mdw-tab__list">
162
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
163
+ <div class="mdw-tab__label">Item One</div>
164
+ </div>
165
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
166
+ <div class="mdw-tab__label">Item Two</div>
167
+ </div>
168
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
169
+ <div class="mdw-tab__label">Item Three</div>
170
+ </div>
171
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="content"></div>
176
+ </div>
177
+ </div>
178
+ <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
179
+ <div class="render-fill">
180
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
181
+ <div class="mdw-tab">
182
+ <div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
183
+ <div class="mdw-appbar__action">
184
+ <div class="mdw-appbar__start">
185
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
186
+ </div>
187
+ <div class="mdw-appbar__title">Page title</div>
188
+ <div class="mdw-appbar__end">
189
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
190
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
191
+ </div>
192
+ </div>
193
+ <div class="mdw-tab__list">
194
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
195
+ <div class="mdw-tab__label">Item One</div>
196
+ </div>
197
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
198
+ <div class="mdw-tab__label">Item Two</div>
199
+ </div>
200
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
201
+ <div class="mdw-tab__label">Item Three</div>
202
+ </div>
203
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
204
+ </div>
205
+ </div>
206
+ <div class="mdw-tab__content">
207
+ <div class="mdw-tab__panel">Item One</div>
208
+ <div class="mdw-tab__panel">Item Two</div>
209
+ <div class="mdw-tab__panel">Item Three</div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
215
+ <div class="render-fill">
216
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 600', dark:true }) %>
217
+ <div class="mdw-tab">
218
+ <div class="mdw-tab__list-wrapper mdw-appbar">
219
+ <div class="mdw-appbar__action">
220
+ <div class="mdw-appbar__start">
221
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
222
+ </div>
223
+ <div class="mdw-appbar__title">Page title</div>
224
+ <div class="mdw-appbar__end">
225
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
226
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
227
+ </div>
228
+ </div>
229
+ <div class="mdw-tab__list">
230
+ <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
231
+ <div class="mdw-tab__label">Item One</div>
232
+ </div>
233
+ <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
234
+ <div class="mdw-tab__label">Item Two</div>
235
+ </div>
236
+ <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
237
+ <div class="mdw-tab__label">Item Three</div>
238
+ </div>
239
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="cyan A700"></div>
240
+ </div>
241
+ </div>
242
+ <div class="mdw-tab__content">
243
+ <div class="mdw-tab__panel">Item One</div>
244
+ <div class="mdw-tab__panel">Item Two</div>
245
+ <div class="mdw-tab__panel">Item Three</div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
251
+ <div class="render-fill">
252
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
253
+ <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
254
+ <div class="mdw-appbar__action">
255
+ <div class="mdw-appbar__start">
256
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
257
+ </div>
258
+ <div class="mdw-appbar__title">Page title</div>
259
+ <div class="mdw-appbar__end">
260
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
261
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
262
+ </div>
263
+ </div>
264
+ <div class="mdw-tab">
265
+ <div class="mdw-tab__list">
266
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
267
+ <div class="mdw-tab__icon material-icons">phone</div>
268
+ <div class="mdw-tab__label">Recents</div>
269
+ </div>
270
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
271
+ <div class="mdw-tab__icon material-icons">favorite</div>
272
+ <div class="mdw-tab__label">Favorites</div>
273
+ </div>
274
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
275
+ <div class="mdw-tab__icon material-icons">person_pin</div>
276
+ <div class="mdw-tab__label">Nearby</div>
277
+ </div>
278
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ <div class="content"></div>
283
+ </div>
284
+ </div>
285
+ <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
286
+ <div class="render-fill">
287
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 600', dark:true }) %>
288
+ <div class="mdw-appbar">
289
+ <div class="mdw-appbar__action">
290
+ <div class="mdw-appbar__start">
291
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
292
+ </div>
293
+ <div class="mdw-appbar__title">Page title</div>
294
+ <div class="mdw-appbar__end">
295
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
296
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
297
+ </div>
298
+ </div>
299
+ <div class="mdw-tab">
300
+ <div class="mdw-tab__list">
301
+ <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
302
+ <div class="mdw-tab__icon material-icons">phone</div>
303
+ </div>
304
+ <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
305
+ <div class="mdw-tab__icon material-icons">favorite</div>
306
+ </div>
307
+ <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
308
+ <div class="mdw-tab__icon material-icons">person_pin</div>
309
+ </div>
310
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="cyan A700"></div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="content"></div>
315
+ </div>
316
+ </div>
317
+ <div class="mdw-grid__item display-flex" mdw-colspan="100%">
318
+ <div class="display-flex" flex-column style="width:100%;padding:24px;box-sizing:border-box;">
319
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
320
+ <div class="mdw-tab">
321
+ <div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
322
+ <div class="mdw-appbar__action">
323
+ <div class="mdw-appbar__start">
324
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
325
+ </div>
326
+ <div class="mdw-appbar__title">Clustered</div>
327
+ <div class="mdw-appbar__end">
328
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
329
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
330
+ </div>
331
+ </div>
332
+ <div class="mdw-tab__list" style="align-self:center;">
333
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
334
+ <div class="mdw-tab__icon material-icons">phone</div>
335
+ <div class="mdw-tab__label">Recents</div>
336
+ </div>
337
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
338
+ <div class="mdw-tab__icon material-icons">favorite</div>
339
+ <div class="mdw-tab__label">Favorites</div>
340
+ </div>
341
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
342
+ <div class="mdw-tab__icon material-icons">person_pin</div>
343
+ <div class="mdw-tab__label">Nearby</div>
344
+ </div>
345
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
346
+ </div>
347
+ </div>
348
+ <div class="mdw-tab__content">
349
+ <div class="mdw-tab__panel">Recents</div>
350
+ <div class="mdw-tab__panel">Favorites</div>
351
+ <div class="mdw-tab__panel">Nearby</div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ <div class="mdw-grid__item" mdw-colspan="100%">
357
+ <div class="mdw-grid__content js">
358
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
359
+ <div class="mdw-tab">
360
+ <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
361
+ <div class="mdw-appbar__action">
362
+ <div class="mdw-appbar__start">
363
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'menu' }}) %>
364
+ </div>
365
+ <div class="mdw-appbar__title">Scrollable</div>
366
+ <div class="mdw-appbar__end">
367
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'search' }}) %>
368
+ <%~ includeFile(T, { button: { icon:true , class:'material-icons', text:'more_vert' }}) %>
369
+ </div>
370
+ </div>
371
+ <div class="mdw-tab__list" mdw-scrollable>
372
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
373
+ <div class="mdw-tab__icon material-icons">phone</div>
374
+ <div class="mdw-tab__label">Recents</div>
375
+ </div>
376
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
377
+ <div class="mdw-tab__icon material-icons">favorite</div>
378
+ <div class="mdw-tab__label">My Oversized Favorites Tab</div>
379
+ </div>
380
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
381
+ <div class="mdw-tab__icon material-icons">person_pin</div>
382
+ <div class="mdw-tab__label">Nearby</div>
383
+ </div>
384
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
385
+ <div class="mdw-tab__icon material-icons">edit</div>
386
+ <div class="mdw-tab__label">Edit</div>
387
+ </div>
388
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
389
+ <div class="mdw-tab__icon material-icons">clear</div>
390
+ <div class="mdw-tab__label">Clear</div>
391
+ </div>
392
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
393
+ <div class="mdw-tab__icon material-icons">search</div>
394
+ <div class="mdw-tab__label">Search</div>
395
+ </div>
396
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
397
+ <div class="mdw-tab__icon material-icons">restore</div>
398
+ <div class="mdw-tab__label">Restore</div>
399
+ </div>
400
+ <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
401
+ <div class="mdw-tab__icon material-icons">stars</div>
402
+ <div class="mdw-tab__label">Stars</div>
403
+ </div>
404
+ <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
405
+ </div>
406
+ </div>
407
+ <div class="mdw-tab__content">
408
+ <div class="mdw-tab__panel">1</div>
409
+ <div class="mdw-tab__panel">2</div>
410
+ <div class="mdw-tab__panel">3</div>
411
+ <div class="mdw-tab__panel">4</div>
412
+ <div class="mdw-tab__panel">5</div>
413
+ <div class="mdw-tab__panel">6</div>
414
+ <div class="mdw-tab__panel">7</div>
415
+ <div class="mdw-tab__panel">8</div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ <script src="tab.min.js"></script>
package/docs/pages/tab.js ADDED
@@ -0,0 +1,151 @@
1
+ import * as Button from '../../components/button/index.js';
2
+ import * as Tab from '../../components/tab/index.js';
3
+ import { iterateArrayLike, setTextNode } from '../../core/dom.js';
4
+ import { convertElementToCode } from '../_sample-utils.js';
5
+
6
+ /** @type {HTMLElement} */
7
+ let sampleComponent;
8
+
9
+ /** @return {void} */
10
+ function onWindowResize() {
11
+ iterateArrayLike(document.getElementsByClassName('mdw-tab'), Tab.onResize);
12
+ }
13
+
14
+ /** @return {void} */
15
+ function updateSampleCode() {
16
+ // Strip automatic attributes and classes
17
+ Tab.detach(sampleComponent);
18
+ iterateArrayLike(sampleComponent.getElementsByClassName('mdw-tab__item'), (el) => {
19
+ el.classList.remove('mdw-overlay');
20
+ el.classList.remove('mdw-ripple');
21
+ el.removeAttribute('mdw-overlay-off');
22
+ });
23
+ const indicator = sampleComponent.getElementsByClassName('mdw-tab__indicator')[0];
24
+ indicator.removeAttribute('style');
25
+
26
+ const htmlCodeElement = document.getElementsByClassName('component-html')[0];
27
+ setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
28
+ document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
29
+
30
+ Tab.attach(sampleComponent);
31
+
32
+ const jsCodeElement = document.getElementsByClassName('component-js')[0];
33
+ jsCodeElement.textContent = [
34
+ 'mdw.Tab.attach(tabElement);',
35
+ '',
36
+ "window.addEventListener('resize', () => mdw.Tab.onResize(tabElement));",
37
+ ].join('\n');
38
+ }
39
+
40
+ /** @return {void} */
41
+ function setupPugButton() {
42
+ const pugButton = document.getElementById('usePug');
43
+ Button.attach(pugButton);
44
+ pugButton.addEventListener('click', () => {
45
+ if (pugButton.getAttribute('aria-pressed') === 'true') {
46
+ pugButton.setAttribute('aria-pressed', 'false');
47
+ } else {
48
+ pugButton.setAttribute('aria-pressed', 'true');
49
+ }
50
+ updateSampleCode();
51
+ });
52
+ }
53
+
54
+ /** @return {void} */
55
+ function initializeSampleComponents() {
56
+ iterateArrayLike(document.getElementsByClassName('mdw-tab'), Tab.attach);
57
+ window.addEventListener('resize', onWindowResize);
58
+ iterateArrayLike(document.getElementsByTagName('form'), (formElement) => {
59
+ formElement.reset();
60
+ });
61
+ }
62
+
63
+ /**
64
+ * @param {Event} event
65
+ * @return {void}
66
+ */
67
+ function onOptionChange(event) {
68
+ /** @type {HTMLInputElement} */
69
+ const inputElement = (event.currentTarget);
70
+ const { name, value, checked } = inputElement;
71
+ const tabListElement = sampleComponent.querySelector('.mdw-tab__list');
72
+
73
+ switch (name) {
74
+ case 'framework':
75
+ switch (value) {
76
+ case 'javascript':
77
+ break;
78
+ case 'css':
79
+ break;
80
+ default:
81
+ }
82
+ break;
83
+ case 'ink':
84
+ switch (value) {
85
+ case 'default':
86
+ tabListElement.removeAttribute('mdw-ink');
87
+ break;
88
+ default:
89
+ tabListElement.setAttribute('mdw-ink', value);
90
+ break;
91
+ }
92
+ break;
93
+ case 'surface':
94
+ switch (value) {
95
+ case 'none':
96
+ tabListElement.removeAttribute('mdw-surface');
97
+ tabListElement.removeAttribute('mdw-light');
98
+ tabListElement.removeAttribute('mdw-dark');
99
+ break;
100
+ default:
101
+ tabListElement.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
102
+ if (value.indexOf(' light') === -1) {
103
+ tabListElement.removeAttribute('mdw-light');
104
+ } else {
105
+ tabListElement.setAttribute('mdw-light', '');
106
+ }
107
+ if (value.indexOf(' dark') === -1) {
108
+ tabListElement.removeAttribute('mdw-dark');
109
+ } else {
110
+ tabListElement.setAttribute('mdw-dark', '');
111
+ }
112
+ if (value === 'none') {
113
+ tabListElement.classList.remove('mdw-theme');
114
+ } else {
115
+ tabListElement.classList.add('mdw-theme');
116
+ }
117
+ break;
118
+ }
119
+ break;
120
+ case 'tabs-scrollable':
121
+ if (checked) {
122
+ sampleComponent.getElementsByClassName('mdw-tab__list')[0].setAttribute('mdw-scrollable', '');
123
+ } else {
124
+ sampleComponent.getElementsByClassName('mdw-tab__list')[0].removeAttribute('mdw-scrollable');
125
+ }
126
+ break;
127
+ case 'content-scrollable': {
128
+ if (checked) {
129
+ sampleComponent.getElementsByClassName('mdw-tab__content')[0].removeAttribute('mdw-no-scroll');
130
+ } else {
131
+ sampleComponent.getElementsByClassName('mdw-tab__content')[0].setAttribute('mdw-no-scroll', '');
132
+ }
133
+ break;
134
+ }
135
+ default:
136
+ }
137
+ updateSampleCode();
138
+ }
139
+
140
+ /** @return {void} */
141
+ function setupComponentOptions() {
142
+ setupPugButton();
143
+ sampleComponent = document.querySelector('.component-sample .mdw-tab');
144
+ iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
145
+ el.addEventListener('change', onOptionChange);
146
+ });
147
+ }
148
+
149
+ initializeSampleComponents();
150
+ setupComponentOptions();
151
+ updateSampleCode();