@shortfuse/materialdesignweb 0.4.0 → 0.7.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 (452) hide show
  1. package/README.md +155 -79
  2. package/bin/generate-css.js +12 -0
  3. package/components/Badge.css +30 -0
  4. package/components/Badge.js +15 -0
  5. package/components/Body.css +14 -0
  6. package/components/Body.js +7 -0
  7. package/components/BottomAppBar.css +23 -0
  8. package/components/BottomAppBar.js +25 -0
  9. package/components/Box.css +31 -0
  10. package/components/Box.js +24 -0
  11. package/components/Button.css +146 -0
  12. package/components/Button.js +95 -0
  13. package/components/Button.md +61 -0
  14. package/components/Card.css +109 -0
  15. package/components/Card.js +82 -0
  16. package/components/Checkbox.css +77 -0
  17. package/components/Checkbox.js +59 -0
  18. package/components/CheckboxIcon.css +89 -0
  19. package/components/CheckboxIcon.js +41 -0
  20. package/components/Chip.css +35 -0
  21. package/components/Chip.js +22 -0
  22. package/components/Dialog.css +235 -0
  23. package/components/Dialog.js +327 -0
  24. package/components/DialogActions.js +13 -0
  25. package/components/Divider.css +41 -0
  26. package/components/Divider.js +13 -0
  27. package/components/ExtendedFab.css +24 -0
  28. package/components/ExtendedFab.js +11 -0
  29. package/components/Fab.css +23 -0
  30. package/components/Fab.js +26 -0
  31. package/components/FilterChip.css +80 -0
  32. package/components/FilterChip.js +51 -0
  33. package/components/Headline.css +14 -0
  34. package/components/Headline.js +33 -0
  35. package/components/Icon.css +76 -0
  36. package/components/Icon.js +174 -0
  37. package/components/IconButton.css +151 -0
  38. package/components/IconButton.js +65 -0
  39. package/components/Input.js +16 -0
  40. package/components/Label.css +14 -0
  41. package/components/Label.js +7 -0
  42. package/components/Layout.css +19 -0
  43. package/components/Layout.js +12 -0
  44. package/components/List.css +12 -0
  45. package/components/List.js +17 -0
  46. package/components/ListItem.css +224 -0
  47. package/components/ListItem.js +112 -0
  48. package/components/ListOption.css +34 -0
  49. package/components/ListOption.js +122 -0
  50. package/components/ListSelect.css +9 -0
  51. package/components/ListSelect.js +206 -0
  52. package/components/Menu.css +171 -0
  53. package/components/Menu.js +470 -0
  54. package/components/MenuItem.css +53 -0
  55. package/components/MenuItem.js +215 -0
  56. package/components/Nav.css +17 -0
  57. package/components/Nav.js +23 -0
  58. package/components/NavBar.css +34 -0
  59. package/components/NavBar.js +88 -0
  60. package/components/NavBarItem.css +41 -0
  61. package/components/NavBarItem.js +7 -0
  62. package/components/NavDrawer.css +31 -0
  63. package/components/NavDrawer.js +13 -0
  64. package/components/NavDrawerItem.css +42 -0
  65. package/components/NavDrawerItem.js +12 -0
  66. package/components/NavItem.css +181 -0
  67. package/components/NavItem.js +83 -0
  68. package/components/NavRail.css +47 -0
  69. package/components/NavRail.js +17 -0
  70. package/components/NavRailItem.css +25 -0
  71. package/components/NavRailItem.js +7 -0
  72. package/components/Option.js +91 -0
  73. package/components/Outline.css +138 -0
  74. package/components/Pane.css +261 -0
  75. package/components/Pane.js +21 -0
  76. package/components/Progress.css +74 -0
  77. package/components/Progress.js +67 -0
  78. package/components/ProgressCircle.css +226 -0
  79. package/components/ProgressLine.css +155 -0
  80. package/components/Radio.css +83 -0
  81. package/components/Radio.js +42 -0
  82. package/components/RadioIcon.css +73 -0
  83. package/components/RadioIcon.js +37 -0
  84. package/components/Ripple.css +74 -0
  85. package/components/Ripple.js +114 -0
  86. package/components/SegmentedButton.css +94 -0
  87. package/components/SegmentedButton.js +49 -0
  88. package/components/SegmentedButtonGroup.css +12 -0
  89. package/components/SegmentedButtonGroup.js +44 -0
  90. package/components/Select.css +52 -0
  91. package/components/Select.js +71 -0
  92. package/components/Shape.css +132 -0
  93. package/components/Shape.js +25 -0
  94. package/components/Slider.css +306 -0
  95. package/components/Slider.js +206 -0
  96. package/components/Snackbar.css +80 -0
  97. package/components/Snackbar.js +75 -0
  98. package/components/Surface.css +10 -0
  99. package/components/Surface.js +23 -0
  100. package/components/Switch.css +63 -0
  101. package/components/Switch.js +127 -0
  102. package/components/SwitchIcon.css +177 -0
  103. package/components/SwitchIcon.js +89 -0
  104. package/components/SwitchIconAnimations.css +89 -0
  105. package/components/Tab.css +85 -0
  106. package/components/Tab.js +103 -0
  107. package/components/TabContent.js +151 -0
  108. package/components/TabList.css +129 -0
  109. package/components/TabList.js +309 -0
  110. package/components/TabPanel.js +37 -0
  111. package/components/TextArea.css +93 -0
  112. package/components/TextArea.js +229 -0
  113. package/components/Title.css +14 -0
  114. package/components/Title.js +15 -0
  115. package/components/Tooltip.css +40 -0
  116. package/components/Tooltip.js +22 -0
  117. package/components/TopAppBar.css +209 -0
  118. package/components/TopAppBar.js +201 -0
  119. package/core/Composition.js +988 -0
  120. package/core/CustomElement.js +844 -0
  121. package/core/ICustomElement.d.ts +288 -0
  122. package/core/ICustomElement.js +1 -0
  123. package/core/css.js +51 -0
  124. package/core/customTypes.js +125 -0
  125. package/core/dom.js +56 -245
  126. package/core/identify.js +40 -0
  127. package/core/observe.js +410 -0
  128. package/core/template.js +121 -0
  129. package/core/typings.d.ts +135 -0
  130. package/core/typings.js +1 -0
  131. package/mixins/AriaReflectorMixin.js +42 -0
  132. package/mixins/AriaToolbarMixin.js +13 -0
  133. package/mixins/ControlMixin.css +57 -0
  134. package/mixins/ControlMixin.js +212 -0
  135. package/mixins/DensityMixin.css +40 -0
  136. package/mixins/DensityMixin.js +11 -0
  137. package/mixins/FlexableMixin.css +79 -0
  138. package/mixins/FlexableMixin.js +32 -0
  139. package/mixins/FormAssociatedMixin.js +170 -0
  140. package/mixins/InputMixin.js +335 -0
  141. package/mixins/KeyboardNavMixin.js +244 -0
  142. package/mixins/RTLObserverMixin.js +35 -0
  143. package/mixins/ResizeObserverMixin.js +38 -0
  144. package/mixins/RippleMixin.css +12 -0
  145. package/mixins/RippleMixin.js +115 -0
  146. package/mixins/ScrollListenerMixin.js +100 -0
  147. package/mixins/ShapeMixin.css +135 -0
  148. package/mixins/ShapeMixin.js +31 -0
  149. package/mixins/StateMixin.css +82 -0
  150. package/mixins/StateMixin.js +114 -0
  151. package/mixins/SurfaceMixin.css +150 -0
  152. package/mixins/SurfaceMixin.js +32 -0
  153. package/mixins/TextFieldMixin.css +657 -0
  154. package/mixins/TextFieldMixin.js +121 -0
  155. package/mixins/ThemableMixin.css +204 -0
  156. package/mixins/ThemableMixin.js +16 -0
  157. package/mixins/TooltipTriggerMixin.css +27 -0
  158. package/mixins/TooltipTriggerMixin.js +366 -0
  159. package/mixins/TouchTargetMixin.css +26 -0
  160. package/mixins/TouchTargetMixin.js +9 -0
  161. package/package.json +57 -41
  162. package/theming/index.js +594 -0
  163. package/theming/loader.js +24 -0
  164. package/utils/cli.js +11 -0
  165. package/utils/color_keywords.js +151 -0
  166. package/utils/hct/Cam16.js +298 -0
  167. package/utils/hct/CorePalette.js +84 -0
  168. package/utils/hct/Hct.js +172 -0
  169. package/utils/hct/Scheme.js +587 -0
  170. package/utils/hct/TonalPalette.js +68 -0
  171. package/utils/hct/ViewingConditions.js +136 -0
  172. package/utils/hct/blend.js +93 -0
  173. package/utils/hct/colorUtils.js +302 -0
  174. package/utils/hct/hctSolver.js +559 -0
  175. package/utils/hct/helper.js +182 -0
  176. package/utils/hct/mathUtils.js +153 -0
  177. package/utils/jsonMergePatch.js +100 -0
  178. package/utils/jsx-runtime.js +101 -0
  179. package/utils/popup.js +117 -0
  180. package/utils/svg.js +129 -0
  181. package/.browserslistrc +0 -3
  182. package/.eslintrc.json +0 -153
  183. package/.stylelintrc.json +0 -600
  184. package/.vscode/launch.json +0 -31
  185. package/.vscode/settings.json +0 -3
  186. package/.vscode/tasks.json +0 -32
  187. package/CHANGELOG.md +0 -24
  188. package/CODE_OF_CONDUCT.md +0 -46
  189. package/adapters/datatable/column.js +0 -203
  190. package/adapters/datatable/index.js +0 -972
  191. package/adapters/dom/index.js +0 -601
  192. package/adapters/list/index.js +0 -69
  193. package/adapters/search/index.js +0 -521
  194. package/components/appbar/_spec.scss +0 -225
  195. package/components/appbar/_theme.scss +0 -0
  196. package/components/appbar/index.scss +0 -2
  197. package/components/banner/_spec.scss +0 -118
  198. package/components/banner/_theme.scss +0 -0
  199. package/components/banner/index.scss +0 -2
  200. package/components/bottomnav/README.md +0 -85
  201. package/components/bottomnav/_spec.scss +0 -157
  202. package/components/bottomnav/_theme.scss +0 -0
  203. package/components/bottomnav/index.js +0 -122
  204. package/components/bottomnav/index.scss +0 -2
  205. package/components/bottomnav/item.js +0 -89
  206. package/components/button/README.md +0 -61
  207. package/components/button/_spec.scss +0 -161
  208. package/components/button/_theme.scss +0 -65
  209. package/components/button/index.eta +0 -32
  210. package/components/button/index.js +0 -43
  211. package/components/button/index.pug +0 -18
  212. package/components/button/index.scss +0 -2
  213. package/components/card/_spec.scss +0 -249
  214. package/components/card/_theme.scss +0 -0
  215. package/components/card/index.scss +0 -2
  216. package/components/chip/_spec.scss +0 -134
  217. package/components/chip/_theme.scss +0 -177
  218. package/components/chip/index.js +0 -21
  219. package/components/chip/index.scss +0 -2
  220. package/components/chip/item.js +0 -20
  221. package/components/datatable/_spec.scss +0 -288
  222. package/components/datatable/_theme.scss +0 -154
  223. package/components/datatable/cell.js +0 -45
  224. package/components/datatable/columnheader.js +0 -47
  225. package/components/datatable/index.js +0 -388
  226. package/components/datatable/index.scss +0 -2
  227. package/components/datatable/row.js +0 -49
  228. package/components/datatable/rowheader.js +0 -18
  229. package/components/dialog/_spec.scss +0 -213
  230. package/components/dialog/_theme.scss +0 -0
  231. package/components/dialog/index.js +0 -627
  232. package/components/dialog/index.scss +0 -2
  233. package/components/divider/_spec.scss +0 -13
  234. package/components/divider/_theme.scss +0 -0
  235. package/components/divider/index.scss +0 -2
  236. package/components/elevation/_spec.scss +0 -9
  237. package/components/elevation/_theme.scss +0 -0
  238. package/components/elevation/index.scss +0 -2
  239. package/components/fab/_spec.scss +0 -222
  240. package/components/fab/_theme.scss +0 -0
  241. package/components/fab/index.js +0 -103
  242. package/components/fab/index.scss +0 -2
  243. package/components/grid/_spec.scss +0 -312
  244. package/components/grid/_theme.scss +0 -0
  245. package/components/grid/index.scss +0 -2
  246. package/components/layout/_mixins.scss +0 -33
  247. package/components/layout/_spec.scss +0 -1012
  248. package/components/layout/_theme.scss +0 -44
  249. package/components/layout/index.js +0 -464
  250. package/components/layout/index.scss +0 -2
  251. package/components/list/_spec.scss +0 -397
  252. package/components/list/_theme.scss +0 -111
  253. package/components/list/content.js +0 -110
  254. package/components/list/index.js +0 -260
  255. package/components/list/index.scss +0 -2
  256. package/components/list/item.js +0 -170
  257. package/components/list/secondary.js +0 -46
  258. package/components/menu/_spec.scss +0 -362
  259. package/components/menu/_theme.scss +0 -0
  260. package/components/menu/index.js +0 -721
  261. package/components/menu/index.scss +0 -2
  262. package/components/menu/item.js +0 -239
  263. package/components/progress/_spec.scss +0 -147
  264. package/components/progress/_theme.scss +0 -0
  265. package/components/progress/index.js +0 -36
  266. package/components/progress/index.scss +0 -2
  267. package/components/selection/_spec.scss +0 -386
  268. package/components/selection/_theme.scss +0 -166
  269. package/components/selection/index.eta +0 -60
  270. package/components/selection/index.js +0 -76
  271. package/components/selection/index.pug +0 -30
  272. package/components/selection/index.scss +0 -2
  273. package/components/selection/input.js +0 -56
  274. package/components/selection/radiogroup.js +0 -47
  275. package/components/slider/_spec.scss +0 -64
  276. package/components/slider/_theme.scss +0 -0
  277. package/components/slider/index.scss +0 -2
  278. package/components/snackbar/_spec.scss +0 -195
  279. package/components/snackbar/_theme.scss +0 -0
  280. package/components/snackbar/index.js +0 -344
  281. package/components/snackbar/index.scss +0 -2
  282. package/components/tab/_spec.scss +0 -235
  283. package/components/tab/_theme.scss +0 -0
  284. package/components/tab/content.js +0 -205
  285. package/components/tab/index.js +0 -260
  286. package/components/tab/index.scss +0 -2
  287. package/components/tab/item.js +0 -89
  288. package/components/tab/list.js +0 -210
  289. package/components/tab/panel.js +0 -54
  290. package/components/template/_theme.scss +0 -27
  291. package/components/textfield/README.md +0 -179
  292. package/components/textfield/_mixins.scss +0 -52
  293. package/components/textfield/_spec.scss +0 -809
  294. package/components/textfield/_theme.scss +0 -299
  295. package/components/textfield/index.eta +0 -74
  296. package/components/textfield/index.js +0 -168
  297. package/components/textfield/index.pug +0 -30
  298. package/components/textfield/index.scss +0 -2
  299. package/components/tooltip/_spec.scss +0 -188
  300. package/components/tooltip/_theme.scss +0 -0
  301. package/components/tooltip/index.scss +0 -2
  302. package/components/type/_spec.scss +0 -224
  303. package/components/type/_theme.scss +0 -0
  304. package/components/type/index.scss +0 -2
  305. package/core/_breakpoint.scss +0 -189
  306. package/core/_elevation.scss +0 -38
  307. package/core/_length.scss +0 -9
  308. package/core/_motion.scss +0 -31
  309. package/core/_platform.scss +0 -34
  310. package/core/_type.scss +0 -127
  311. package/core/aria/attributes.js +0 -141
  312. package/core/aria/button.js +0 -50
  313. package/core/aria/keyboard.js +0 -93
  314. package/core/aria/rovingtabindex.js +0 -178
  315. package/core/aria/tab.js +0 -60
  316. package/core/color/_spec.scss +0 -0
  317. package/core/color/_theme.scss +0 -390
  318. package/core/color/index.scss +0 -2
  319. package/core/document/index.js +0 -39
  320. package/core/overlay/_spec.scss +0 -31
  321. package/core/overlay/_theme.scss +0 -171
  322. package/core/overlay/index.js +0 -108
  323. package/core/overlay/index.scss +0 -2
  324. package/core/ripple/_spec.scss +0 -197
  325. package/core/ripple/_theme.scss +0 -40
  326. package/core/ripple/index.js +0 -294
  327. package/core/ripple/index.scss +0 -2
  328. package/core/theme/_config.scss +0 -2
  329. package/core/theme/_mixins.scss +0 -172
  330. package/core/theme/_palettes.scss +0 -406
  331. package/core/theme/_variables.scss +0 -24
  332. package/core/theme/index.js +0 -50
  333. package/core/throttler.js +0 -42
  334. package/core/transition/index.js +0 -468
  335. package/docs/_flex.scss +0 -22
  336. package/docs/_menuoptions.js +0 -183
  337. package/docs/_mixins.pug +0 -155
  338. package/docs/_partials/_androidnavbar.eta +0 -5
  339. package/docs/_partials/_androidstatusbar.eta +0 -13
  340. package/docs/_partials/_appbar.eta +0 -29
  341. package/docs/_partials/_buttontest.eta +0 -31
  342. package/docs/_partials/_header.eta +0 -149
  343. package/docs/_partials/_navlistitem.eta +0 -16
  344. package/docs/_partials/_target.eta +0 -1
  345. package/docs/_sample-utils.js +0 -93
  346. package/docs/_storage.js +0 -33
  347. package/docs/docs.scss +0 -295
  348. package/docs/index.eta +0 -16
  349. package/docs/index.js +0 -0
  350. package/docs/pages/appbar.eta +0 -114
  351. package/docs/pages/appbar.js +0 -0
  352. package/docs/pages/appbar.pug +0 -78
  353. package/docs/pages/bottomnav.eta +0 -188
  354. package/docs/pages/bottomnav.js +0 -115
  355. package/docs/pages/bottomnav.pug +0 -137
  356. package/docs/pages/button.eta +0 -124
  357. package/docs/pages/button.js +0 -224
  358. package/docs/pages/button.pug +0 -121
  359. package/docs/pages/card.eta +0 -90
  360. package/docs/pages/card.js +0 -177
  361. package/docs/pages/card.pug +0 -74
  362. package/docs/pages/chip.eta +0 -122
  363. package/docs/pages/chip.js +0 -82
  364. package/docs/pages/chip.pug +0 -91
  365. package/docs/pages/color.eta +0 -143
  366. package/docs/pages/color.js +0 -262
  367. package/docs/pages/color.pug +0 -121
  368. package/docs/pages/datatable.eta +0 -323
  369. package/docs/pages/datatable.js +0 -164
  370. package/docs/pages/datatable.pug +0 -283
  371. package/docs/pages/dialog.eta +0 -186
  372. package/docs/pages/dialog.js +0 -177
  373. package/docs/pages/dialog.pug +0 -132
  374. package/docs/pages/dom.eta +0 -26
  375. package/docs/pages/dom.js +0 -143
  376. package/docs/pages/dom.pug +0 -22
  377. package/docs/pages/elevation.eta +0 -35
  378. package/docs/pages/elevation.js +0 -0
  379. package/docs/pages/elevation.pug +0 -25
  380. package/docs/pages/fab.eta +0 -99
  381. package/docs/pages/fab.js +0 -44
  382. package/docs/pages/fab.pug +0 -66
  383. package/docs/pages/grid.eta +0 -135
  384. package/docs/pages/grid.js +0 -128
  385. package/docs/pages/grid.pug +0 -95
  386. package/docs/pages/layout.eta +0 -8
  387. package/docs/pages/layout.js +0 -0
  388. package/docs/pages/layout.pug +0 -7
  389. package/docs/pages/list.eta +0 -465
  390. package/docs/pages/list.js +0 -9
  391. package/docs/pages/list.pug +0 -326
  392. package/docs/pages/menu.eta +0 -276
  393. package/docs/pages/menu.js +0 -217
  394. package/docs/pages/menu.pug +0 -205
  395. package/docs/pages/overlay.eta +0 -69
  396. package/docs/pages/overlay.js +0 -4
  397. package/docs/pages/overlay.pug +0 -55
  398. package/docs/pages/progress.eta +0 -23
  399. package/docs/pages/progress.js +0 -12
  400. package/docs/pages/progress.pug +0 -16
  401. package/docs/pages/ripple.eta +0 -27
  402. package/docs/pages/ripple.js +0 -4
  403. package/docs/pages/ripple.pug +0 -21
  404. package/docs/pages/search.eta +0 -246
  405. package/docs/pages/search.js +0 -243
  406. package/docs/pages/search.pug +0 -165
  407. package/docs/pages/selection.eta +0 -111
  408. package/docs/pages/selection.js +0 -13
  409. package/docs/pages/selection.pug +0 -74
  410. package/docs/pages/slider.eta +0 -23
  411. package/docs/pages/slider.js +0 -0
  412. package/docs/pages/slider.pug +0 -17
  413. package/docs/pages/snackbar.eta +0 -83
  414. package/docs/pages/snackbar.js +0 -158
  415. package/docs/pages/snackbar.pug +0 -60
  416. package/docs/pages/tab.eta +0 -421
  417. package/docs/pages/tab.js +0 -151
  418. package/docs/pages/tab.pug +0 -304
  419. package/docs/pages/textfield.eta +0 -486
  420. package/docs/pages/textfield.js +0 -254
  421. package/docs/pages/textfield.pug +0 -360
  422. package/docs/pages/tooltip.eta +0 -94
  423. package/docs/pages/tooltip.js +0 -0
  424. package/docs/pages/tooltip.pug +0 -78
  425. package/docs/pages/transition.eta +0 -117
  426. package/docs/pages/transition.js +0 -54
  427. package/docs/pages/transition.pug +0 -76
  428. package/docs/pages/type.eta +0 -31
  429. package/docs/pages/type.js +0 -0
  430. package/docs/pages/type.pug +0 -29
  431. package/docs/postrender.js +0 -39
  432. package/docs/prerender.js +0 -16
  433. package/docs/pwa/_dialogs.eta +0 -143
  434. package/docs/pwa/_dialogs.pug +0 -96
  435. package/docs/pwa/_menus.eta +0 -16
  436. package/docs/pwa/_menus.pug +0 -11
  437. package/docs/pwa/pwa-prerender.js +0 -3
  438. package/docs/pwa/pwa.eta +0 -480
  439. package/docs/pwa/pwa.js +0 -306
  440. package/docs/pwa/pwa.pug +0 -325
  441. package/docs/pwa/pwa.scss +0 -26
  442. package/docs/spec.scss +0 -26
  443. package/docs/themes/_component-themes.scss +0 -26
  444. package/docs/themes/theme-colored-fallbacks.scss +0 -17
  445. package/docs/themes/theme-colored.scss +0 -17
  446. package/docs/themes/theme-default-fallbacks.scss +0 -17
  447. package/docs/themes/theme-default.scss +0 -17
  448. package/jsconfig.json +0 -12
  449. package/scripts/deploy-docs.sh +0 -9
  450. package/templates/index.eta +0 -2
  451. package/templates/index.pug +0 -3
  452. package/webpack.config.cjs +0 -257
package/docs/pages/textfield.eta DELETED
@@ -1,486 +0,0 @@
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>