@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/textfield.eta ADDED
@@ -0,0 +1,486 @@
1
+ <% var T = '../../templates/index.eta' %>
2
+ <% layout('../_partials/_header.eta', {page: 'textfield'}) %>
3
+ <div class="mdw-grid" 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">Text fields allow users to input, edit, and select text.</h5>
6
+ <p class="mdw-type">Text fields typically reside in forms but can appear in other places, like dialog boxes and search.</p>
7
+ </div>
8
+ <div class="mdw-grid__item" mdw-colspan="4">
9
+ <div class="mdw-grid__content">
10
+ <div class="component-sample">
11
+ <div class="component-sample__container">
12
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary">
13
+ <input class="mdw-textfield__input" placeholder="Placeholder" />
14
+ <div class="mdw-textfield__border">
15
+ <div class="mdw-textfield__outline-gap">
16
+ <div class="mdw-textfield__label">Label</div>
17
+ </div>
18
+ </div>
19
+ </label>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ <div class="mdw-grid__item" mdw-colspan="8">
25
+ <div class="mdw-type" mdw-style="subtitle">Javascript</div>
26
+ <div class="docs-option-list">
27
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true, text:'Required' }}) %>
28
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true, text:'Optional' }}) %>
29
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', text:'None' }}) %>
30
+ </div>
31
+ <div class="mdw-type" mdw-style="subtitle">Field type</div>
32
+ <div class="docs-option-list">
33
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'field-type', type:'radio', value:'single-line', checked:true, text:'Single-line' }}) %>
34
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'field-type', type:'radio', value:'text-area', text:'Text area' }}) %>
35
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'field-type', type:'radio', value:'dropdown', text:'Dropdown' }}) %>
36
+ </div>
37
+ <div class="mdw-type" mdw-style="subtitle">Style</div>
38
+ <div class="docs-option-list">
39
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'filled', checked:true, text:'Filled' }}) %>
40
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'outlined', text:'Outlined' }}) %>
41
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'solo', text:'Solo' }}) %>
42
+ </div>
43
+ <div class="mdw-type" mdw-style="subtitle">Options</div>
44
+ <div class="docs-option-list">
45
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'signifier', text:'Signifier' }}) %>
46
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'prefix', text:'Prefix' }}) %>
47
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'suffix', text:'Suffix' }}) %>
48
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'helper-text', text:'Helper Text' }}) %>
49
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'error-text', text:'Error Text' }}) %>
50
+ </div>
51
+ <div class="mdw-type" mdw-style="subtitle">Ink</div>
52
+ <div class="docs-option-list">
53
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'none', text:'Default' }}) %>
54
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'primary', checked:true, text:'Primary' }}) %>
55
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'secondary', text:'Secondary' }}) %>
56
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'green', text:'Green' }}) %>
57
+ </div>
58
+ <div class="mdw-type" mdw-style="subtitle">Attributes</div>
59
+ <div class="docs-option-list">
60
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'autosize', checked:true, text:'Autosize' }}) %>
61
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'disabled', text:'Disabled' }}) %>
62
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'4minlength', text:'4 Min Length' }}) %>
63
+ <%~ includeFile(T, { selection: { ink:'secondary', name:'required', text:'Required' }}) %>
64
+ </div>
65
+ </div>
66
+ <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
67
+ <div class="mdw-grid__item" mdw-colspan="6">
68
+ <h6 class="mdw-type">HTML Code</h6>
69
+ <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink></div>
70
+ </div>
71
+ <div class="mdw-grid__item" mdw-colspan="6">
72
+ <h6 class="mdw-type">Javascript Code</h6>
73
+ <div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div>
74
+ </div>
75
+ <div class="mdw-grid__item" mdw-colspan="100%">
76
+ <h6 class="mdw-type">Samples</h6>
77
+ </div>
78
+ <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
79
+ <div class="render-fill">
80
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
81
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start:['arrow_back'], end: ['more_vert'], body: 'Application' }) %>
82
+ <div class="content" style="padding:0px 16px;">
83
+ <label class="mdw-textfield mdw-type mdw-theme" mdw-ink="primary" mdw-style="h4">
84
+ <input class="mdw-textfield__input" value="Vintage 50" placeholder=" " />
85
+ <div class="mdw-textfield__border">
86
+ <div class="mdw-textfield__outline-gap">
87
+ <div class="mdw-textfield__label">Title</div>
88
+ </div>
89
+ </div>
90
+ </label>
91
+ <div class="horizontal-controls">
92
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" style="width:88px;">
93
+ <input class="mdw-textfield__input" type="text" placeholder=" " />
94
+ <div class="mdw-textfield__prefix">$</div>
95
+ <div class="mdw-textfield__border">
96
+ <div class="mdw-textfield__outline-gap">
97
+ <div class="mdw-textfield__label">Price</div>
98
+ </div>
99
+ </div>
100
+ </label>
101
+ <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary">
102
+ <input class="mdw-textfield__input" type="text" placeholder=" " />
103
+ <div class="mdw-textfield__border">
104
+ <div class="mdw-textfield__outline-gap">
105
+ <div class="mdw-textfield__label">Location (optional)</div>
106
+ </div>
107
+ </div>
108
+ </label>
109
+ </div>
110
+ <%~ includeFile(T, { textfield: { ink:'primary', placeholder:'text', text:'Description' }}) %>
111
+ <%~ includeFile(T, { textfield: { ink:'primary', placeholder:'••••••••', required:true, minlength:8,
112
+ signifier: {text: 'security', class:'material-icons'}, type:'password',
113
+ helper: 'At least 8 characters', error: 'Error: Password of at least 8 characters required.',
114
+ text: 'Password text field with signifier and overflowing label *',
115
+ }}) %>
116
+ <%~ includeFile(T, { textfield: { ink:'primary', disabled:true, value:'filled', suffix:'lbs', helper:'Disabled Helper Text', text:'Disabled Filled with Suffix' }}) %>
117
+ </div>
118
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
119
+ </div>
120
+ </div>
121
+ <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
122
+ <div class="render-fill">
123
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 300', light:true }) %>
124
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'secondary 100', light: true, start: ['arrow_back'], end: ['search'], body: 'Auto-fill styling' }) %>
125
+ <form class="content" style="padding:0px 16px;">
126
+ <%~ includeFile(T, { textfield: { ink:'secondary', required:true, name:"name", text:'Name *' }}) %>
127
+ <%~ includeFile(T, { textfield: { ink:'secondary', name:"address", text:'Address' }}) %>
128
+ <%~ includeFile(T, { textfield: { ink:'secondary', name:"city", text:'City' }}) %>
129
+ <div class="horizontal-controls">
130
+ <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:88px;">
131
+ <select class="mdw-textfield__input" name="state">
132
+ <option class="mdw-theme" mdw-surface="card" value="">--</option>
133
+ <option class="mdw-theme" mdw-surface="card" value="AL">AL</option>
134
+ <option class="mdw-theme" mdw-surface="card" value="AK">AK</option>
135
+ <option class="mdw-theme" mdw-surface="card" value="AZ">AZ</option>
136
+ <option class="mdw-theme" mdw-surface="card" value="AR">AR</option>
137
+ <option class="mdw-theme" mdw-surface="card" value="CA">CA</option>
138
+ <option class="mdw-theme" mdw-surface="card" value="CO">CO</option>
139
+ <option class="mdw-theme" mdw-surface="card" value="CT">CT</option>
140
+ <option class="mdw-theme" mdw-surface="card" value="DE">DE</option>
141
+ <option class="mdw-theme" mdw-surface="card" value="FL">FL</option>
142
+ <option class="mdw-theme" mdw-surface="card" value="GA">GA</option>
143
+ <option class="mdw-theme" mdw-surface="card" value="HI">HI</option>
144
+ <option class="mdw-theme" mdw-surface="card" value="ID">ID</option>
145
+ <option class="mdw-theme" mdw-surface="card" value="IL">IL</option>
146
+ <option class="mdw-theme" mdw-surface="card" value="IN">IN</option>
147
+ <option class="mdw-theme" mdw-surface="card" value="IA">IA</option>
148
+ <option class="mdw-theme" mdw-surface="card" value="KS">KS</option>
149
+ <option class="mdw-theme" mdw-surface="card" value="KY">KY</option>
150
+ <option class="mdw-theme" mdw-surface="card" value="LA">LA</option>
151
+ <option class="mdw-theme" mdw-surface="card" value="ME">ME</option>
152
+ <option class="mdw-theme" mdw-surface="card" value="MD">MD</option>
153
+ <option class="mdw-theme" mdw-surface="card" value="MA">MA</option>
154
+ <option class="mdw-theme" mdw-surface="card" value="MI">MI</option>
155
+ <option class="mdw-theme" mdw-surface="card" value="MN">MN</option>
156
+ <option class="mdw-theme" mdw-surface="card" value="MS">MS</option>
157
+ <option class="mdw-theme" mdw-surface="card" value="MO">MO</option>
158
+ <option class="mdw-theme" mdw-surface="card" value="MT">MT</option>
159
+ <option class="mdw-theme" mdw-surface="card" value="NE">NE</option>
160
+ <option class="mdw-theme" mdw-surface="card" value="NV">NV</option>
161
+ <option class="mdw-theme" mdw-surface="card" value="NH">NH</option>
162
+ <option class="mdw-theme" mdw-surface="card" value="NJ">NJ</option>
163
+ <option class="mdw-theme" mdw-surface="card" value="NM">NM</option>
164
+ <option class="mdw-theme" mdw-surface="card" value="NY">NY</option>
165
+ <option class="mdw-theme" mdw-surface="card" value="NC">NC</option>
166
+ <option class="mdw-theme" mdw-surface="card" value="ND">ND</option>
167
+ <option class="mdw-theme" mdw-surface="card" value="OH">OH</option>
168
+ <option class="mdw-theme" mdw-surface="card" value="OK">OK</option>
169
+ <option class="mdw-theme" mdw-surface="card" value="OR">OR</option>
170
+ <option class="mdw-theme" mdw-surface="card" value="PA">PA</option>
171
+ <option class="mdw-theme" mdw-surface="card" value="RI">RI</option>
172
+ <option class="mdw-theme" mdw-surface="card" value="SC">SC</option>
173
+ <option class="mdw-theme" mdw-surface="card" value="SD">SD</option>
174
+ <option class="mdw-theme" mdw-surface="card" value="TN">TN</option>
175
+ <option class="mdw-theme" mdw-surface="card" value="TX">TX</option>
176
+ <option class="mdw-theme" mdw-surface="card" value="UT">UT</option>
177
+ <option class="mdw-theme" mdw-surface="card" value="VT">VT</option>
178
+ <option class="mdw-theme" mdw-surface="card" value="VA">VA</option>
179
+ <option class="mdw-theme" mdw-surface="card" value="WA">WA</option>
180
+ <option class="mdw-theme" mdw-surface="card" value="WV">WV</option>
181
+ <option class="mdw-theme" mdw-surface="card" value="WI">WI</option>
182
+ <option class="mdw-theme" mdw-surface="card" value="WY">WY</option>
183
+ </select>
184
+ <div class="mdw-textfield__icon" mdw-dropdown></div>
185
+ <div class="mdw-textfield__border">
186
+ <div class="mdw-textfield__outline-gap">
187
+ <div class="mdw-textfield__label">State</div>
188
+ </div>
189
+ </div>
190
+ </label>
191
+ <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary">
192
+ <input class="mdw-textfield__input" type="text" placeholder=" " name="zip" required />
193
+ <div class="mdw-textfield__border">
194
+ <div class="mdw-textfield__outline-gap">
195
+ <div class="mdw-textfield__label">Zip code *</div>
196
+ </div>
197
+ </div>
198
+ </label>
199
+ </div>
200
+ <%~ includeFile(T, { textfield: { ink:'secondary', name:'phone', text:'Phone number' }}) %>
201
+ <p class="mdw-type">* Required fields</p>
202
+ </form>
203
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
204
+ </div>
205
+ </div>
206
+ <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
207
+ <div class="render-fill">
208
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 800', dark:true }) %>
209
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'secondary 700', dark: true, start: ['arrow_back'], end: ['search'] }) %>
210
+ <form class="content" style="padding:8px 16px;">
211
+ <div class="display-flex" style="margin-bottom:-32px;margin-top:-24px;" flex-justify-content="center">
212
+ <i class="material-icons" style="color:#ccc;font-size:256px;">person</i>
213
+ </div>
214
+ <div class="horizontal-controls">
215
+ <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="secondary">
216
+ <div class="mdw-textfield__signifier material-icons">person</div>
217
+ <input class="mdw-textfield__input" type="text" placeholder=" " value="Ali Connors" />
218
+ <div class="mdw-textfield__border">
219
+ <div class="mdw-textfield__outline-gap">
220
+ <div class="mdw-textfield__label">Name</div>
221
+ </div>
222
+ </div>
223
+ </label>
224
+ </div>
225
+ <div class="horizontal-controls">
226
+ <%~ includeFile(T, { textfield: { ink:'secondary', value:'65', type:'phone', text:'Phone number', signifier:{text:'phone', class:'material-icons'}}}) %>
227
+ <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
228
+ <select class="mdw-textfield__input" type="phone">
229
+ <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
230
+ <option class="mdw-theme" mdw-surface="card" value="Mobile">Mobile</option>
231
+ <option class="mdw-theme" mdw-surface="card" value="Home">Home</option>
232
+ <option class="mdw-theme" mdw-surface="card" value="Work">Work</option>
233
+ </select>
234
+ <div class="mdw-textfield__icon" mdw-dropdown></div>
235
+ <div class="mdw-textfield__border">
236
+ <div class="mdw-textfield__outline-gap">
237
+ <div class="mdw-textfield__label">Phone Type</div>
238
+ </div>
239
+ </div>
240
+ </label>
241
+ </div>
242
+ <div class="horizontal-controls">
243
+ <%~ includeFile(T, { textfield: { ink:'secondary', type:'email', signifier: { text:'email', class:'material-icons'}, text:'Email' }}) %>
244
+ <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
245
+ <select class="mdw-textfield__input" type="phone">
246
+ <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
247
+ <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
248
+ <option class="mdw-theme" mdw-surface="card" value="Personal">Personal</option>
249
+ <option class="mdw-theme" mdw-surface="card" value="Business">Business</option>
250
+ </select>
251
+ <div class="mdw-textfield__icon" mdw-dropdown></div>
252
+ <div class="mdw-textfield__border">
253
+ <div class="mdw-textfield__outline-gap">
254
+ <div class="mdw-textfield__label">Email type</div>
255
+ </div>
256
+ </div>
257
+ </label>
258
+ </div>
259
+ <div class="horizontal-controls">
260
+ <%~ includeFile(T, { textfield: { ink:'secondary', type:'address', signifier:{text:'place', class:'material-icons'}, text:'Address' }}) %>
261
+ <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
262
+ <select class="mdw-textfield__input" type="phone">
263
+ <option class="mdw-theme" mdw-surface="card" value="Home">Home</option>
264
+ <option class="mdw-theme" mdw-surface="card" value="Work">Work</option>
265
+ </select>
266
+ <div class="mdw-textfield__icon" mdw-dropdown></div>
267
+ <div class="mdw-textfield__border">
268
+ <div class="mdw-textfield__outline-gap">
269
+ <div class="mdw-textfield__label">Address type</div>
270
+ </div>
271
+ </div>
272
+ </label>
273
+ </div>
274
+ </form>
275
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
276
+ </div>
277
+ </div>
278
+ <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
279
+ <div class="render-fill">
280
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
281
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['arrow_back'], end: ['done'] }) %>
282
+ <div class="content" style="padding:8px 16px;">
283
+ <%~ includeFile(T, { textfield: { ink:'primary', value:"Vintage 50's Dress", outlined:true, helper:'Helper', text:'Title' }}) %>
284
+ <div class="horizontal-controls">
285
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined style="width:88px;">
286
+ <input class="mdw-textfield__input" value="10.00" placeholder=" " />
287
+ <div class="mdw-textfield__border">
288
+ <div class="mdw-textfield__outline-gap">
289
+ <div class="mdw-textfield__label">Price</div>
290
+ </div>
291
+ </div>
292
+ <div class="mdw-textfield__prefix">$</div>
293
+ <div class="mdw-textfield__helper-text">Helper</div>
294
+ </label>
295
+ <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary" mdw-outlined>
296
+ <input class="mdw-textfield__input" value="Hanover" placeholder=" " />
297
+ <div class="mdw-textfield__border">
298
+ <div class="mdw-textfield__outline-gap">
299
+ <div class="mdw-textfield__label">Location (optional)</div>
300
+ </div>
301
+ </div>
302
+ <div class="mdw-textfield__helper-text">Helper</div>
303
+ </label>
304
+ </div>
305
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined>
306
+ <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>
307
+ <div class="mdw-textfield__border">
308
+ <div class="mdw-textfield__outline-gap">
309
+ <div class="mdw-textfield__label">Description</div>
310
+ </div>
311
+ </div>
312
+ </label>
313
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined>
314
+ <div class="mdw-textfield__signifier material-icons">security</div>
315
+ <input class="mdw-textfield__input" type="password" placeholder="••••••••" required minlength="8" />
316
+ <div class="mdw-textfield__border">
317
+ <div class="mdw-textfield__outline-gap">
318
+ <div class="mdw-textfield__label">Password text field with signifier and overflowing label *</div>
319
+ </div>
320
+ </div>
321
+ <div class="mdw-textfield__helper-text">At least 8 characters</div>
322
+ <div class="mdw-textfield__error-text">Error: Password of at least 8 characters required.</div>
323
+ </label>
324
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined style="max-width:150px;">
325
+ <input class="mdw-textfield__input" type="text" placeholder=" " disabled value="filled" />
326
+ <div class="mdw-textfield__border">
327
+ <div class="mdw-textfield__outline-gap">
328
+ <div class="mdw-textfield__label">Disabled Filled with Suffix</div>
329
+ </div>
330
+ </div>
331
+ <div class="mdw-textfield__suffix">lbs</div>
332
+ <div class="mdw-textfield__helper-text">Disabled Helper Text</div>
333
+ </label>
334
+ </div>
335
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
336
+ </div>
337
+ </div>
338
+ <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
339
+ <div class="render-fill">
340
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'amber 600', dark:true }) %>
341
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'amber 400', dark: true, start: ['arrow_back'], end: ['done'] }) %>
342
+ <div class="content" style="padding:0 16px;">
343
+ <label class="mdw-textfield mdw-theme" mdw-ink="amber">
344
+ <input class="mdw-textfield__input" placeholder=" " />
345
+ <div class="mdw-textfield__border">
346
+ <div class="mdw-textfield__outline-gap">
347
+ <div class="mdw-textfield__label">Name</div>
348
+ </div>
349
+ </div>
350
+ <div class="mdw-textfield__error-text">spacer</div>
351
+ </label>
352
+ <label class="mdw-textfield mdw-theme" mdw-ink="amber">
353
+ <textarea class="mdw-textfield__input" placeholder=" " rows="5"></textarea>
354
+ <div class="mdw-textfield__border">
355
+ <div class="mdw-textfield__outline-gap">
356
+ <div class="mdw-textfield__label">Message</div>
357
+ </div>
358
+ </div>
359
+ </label>
360
+ <label class="mdw-textfield mdw-theme" mdw-ink="deeppurple" mdw-outlined>
361
+ <textarea class="mdw-textfield__input" placeholder=" " rows="5"></textarea>
362
+ <div class="mdw-textfield__border">
363
+ <div class="mdw-textfield__outline-gap">
364
+ <div class="mdw-textfield__label">Message</div>
365
+ </div>
366
+ </div>
367
+ </label>
368
+ </div>
369
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
370
+ </div>
371
+ </div>
372
+ <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
373
+ <div class="render-fill">
374
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'amber 700', dark:true }) %>
375
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'amber 400', dark: true, start: ['arrow_back'], end: ['done'] }) %>
376
+ <div class="content" style="padding:0 16px;">
377
+ <label class="mdw-textfield mdw-theme" mdw-ink="amber">
378
+ <input class="mdw-textfield__input" placeholder=" " />
379
+ <div class="mdw-textfield__border">
380
+ <div class="mdw-textfield__outline-gap">
381
+ <div class="mdw-textfield__label">Name</div>
382
+ </div>
383
+ </div>
384
+ <div class="mdw-textfield__error-text">spacer</div>
385
+ </label>
386
+ <label class="mdw-textfield mdw-theme" mdw-ink="amber">
387
+ <textarea class="mdw-textfield__input" placeholder=" " rows="5" required>Just wanted to let you kn</textarea>
388
+ <div class="mdw-textfield__border">
389
+ <div class="mdw-textfield__outline-gap">
390
+ <div class="mdw-textfield__label">Message *</div>
391
+ </div>
392
+ </div>
393
+ <div class="mdw-textfield__helper-text">Helper text.</div>
394
+ <div class="mdw-textfield__error-text">Error: Required.</div>
395
+ </label>
396
+ <label class="mdw-textfield mdw-theme" mdw-ink="amber">
397
+ <textarea class="mdw-textfield__input" placeholder=" " rows="5" disabled>This textarea is disabled.</textarea>
398
+ <div class="mdw-textfield__border">
399
+ <div class="mdw-textfield__outline-gap">
400
+ <div class="mdw-textfield__label">Message *</div>
401
+ </div>
402
+ </div>
403
+ <div class="mdw-textfield__helper-text">Helper text.</div>
404
+ <div class="mdw-textfield__error-text">Error: Required.</div>
405
+ </label>
406
+ </div>
407
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
408
+ </div>
409
+ </div>
410
+ <div class="mdw-grid__item js" mdw-colspan="4">
411
+ <div class="render-fill">
412
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
413
+ <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['arrow_back'], end: ['done'], text: 'With Javascript' }) %>
414
+ <div class="content" style="padding:8px 16px;">
415
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined>
416
+ <input class="mdw-textfield__input" placeholder=" " />
417
+ <div class="mdw-textfield__border">
418
+ <div class="mdw-textfield__outline-gap">
419
+ <div class="mdw-textfield__label">Title</div>
420
+ </div>
421
+ </div>
422
+ <div class="mdw-textfield__helper-text">Helper</div>
423
+ </label>
424
+ <div class="horizontal-controls">
425
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" style="width:88px;">
426
+ <input class="mdw-textfield__input" value="10.00" placeholder=" " />
427
+ <div class="mdw-textfield__prefix">$</div>
428
+ <div class="mdw-textfield__border">
429
+ <div class="mdw-textfield__outline-gap">
430
+ <div class="mdw-textfield__label">Price</div>
431
+ </div>
432
+ </div>
433
+ <div class="mdw-textfield__helper-text">Helper</div>
434
+ </label>
435
+ <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary">
436
+ <input class="mdw-textfield__input" placeholder=" " />
437
+ <div class="mdw-textfield__border">
438
+ <div class="mdw-textfield__outline-gap">
439
+ <div class="mdw-textfield__label">Location (optional)</div>
440
+ </div>
441
+ </div>
442
+ <div class="mdw-textfield__helper-text">Helper</div>
443
+ </label>
444
+ </div>
445
+ <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-autosize>
446
+ <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.
447
+ (Erase Me)</textarea>
448
+ <div class="mdw-textfield__border">
449
+ <div class="mdw-textfield__outline-gap">
450
+ <div class="mdw-textfield__label">Description</div>
451
+ </div>
452
+ </div>
453
+ </label>
454
+ <div class="horizontal-controls">
455
+ <label class="mdw-textfield mdw-theme" mdw-ink="secondary">
456
+ <input class="mdw-textfield__input" type="phone" placeholder=" " value="65" />
457
+ <div class="mdw-textfield__signifier material-icons">phone</div>
458
+ <div class="mdw-textfield__border">
459
+ <div class="mdw-textfield__outline-gap">
460
+ <div class="mdw-textfield__label">Name</div>
461
+ </div>
462
+ </div>
463
+ </label>
464
+ <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
465
+ <select class="mdw-textfield__input" type="phone">
466
+ <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
467
+ <option class="mdw-theme" mdw-surface="card" value="Mobile">Mobile</option>
468
+ <option class="mdw-theme" mdw-surface="card" value="Home">Home</option>
469
+ <option class="mdw-theme" mdw-surface="card" value="Work">Work</option>
470
+ </select>
471
+ <div class="mdw-textfield__icon" mdw-dropdown></div>
472
+ <div class="mdw-textfield__border">
473
+ <div class="mdw-textfield__outline-gap">
474
+ <div class="mdw-textfield__label">Phone Type</div>
475
+ </div>
476
+ </div>
477
+ </label>
478
+ </div>
479
+ </div>
480
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
481
+ </div>
482
+ </div>
483
+ <div class="mdw-grid__item" mdw-colspan="4"></div>
484
+ <div class="mdw-grid__item" mdw-colspan="4"></div>
485
+ </div>
486
+ <script src="textfield.min.js"></script>