@shortfuse/materialdesignweb 0.5.0 → 0.7.1-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 (419) hide show
  1. package/README.md +155 -77
  2. package/bin/generate-css.js +12 -0
  3. package/components/Badge.css +38 -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 +147 -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 +89 -0
  17. package/components/Checkbox.js +59 -0
  18. package/components/CheckboxIcon.css +90 -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 +150 -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 +75 -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 +95 -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 +307 -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 +64 -0
  101. package/components/Switch.js +127 -0
  102. package/components/SwitchIcon.css +178 -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 -154
  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/index.js +77 -0
  132. package/mixins/AriaReflectorMixin.js +42 -0
  133. package/mixins/AriaToolbarMixin.js +13 -0
  134. package/mixins/ControlMixin.css +57 -0
  135. package/mixins/ControlMixin.js +212 -0
  136. package/mixins/DensityMixin.css +40 -0
  137. package/mixins/DensityMixin.js +11 -0
  138. package/mixins/FlexableMixin.css +79 -0
  139. package/mixins/FlexableMixin.js +32 -0
  140. package/mixins/FormAssociatedMixin.js +170 -0
  141. package/mixins/InputMixin.js +335 -0
  142. package/mixins/KeyboardNavMixin.js +244 -0
  143. package/mixins/RTLObserverMixin.js +35 -0
  144. package/mixins/ResizeObserverMixin.js +38 -0
  145. package/mixins/RippleMixin.css +12 -0
  146. package/mixins/RippleMixin.js +115 -0
  147. package/mixins/ScrollListenerMixin.js +100 -0
  148. package/mixins/ShapeMixin.css +135 -0
  149. package/mixins/ShapeMixin.js +31 -0
  150. package/mixins/StateMixin.css +82 -0
  151. package/mixins/StateMixin.js +114 -0
  152. package/mixins/SurfaceMixin.css +150 -0
  153. package/mixins/SurfaceMixin.js +32 -0
  154. package/mixins/TextFieldMixin.css +657 -0
  155. package/mixins/TextFieldMixin.js +121 -0
  156. package/mixins/ThemableMixin.css +204 -0
  157. package/mixins/ThemableMixin.js +16 -0
  158. package/mixins/TooltipTriggerMixin.css +27 -0
  159. package/mixins/TooltipTriggerMixin.js +366 -0
  160. package/mixins/TouchTargetMixin.css +26 -0
  161. package/mixins/TouchTargetMixin.js +9 -0
  162. package/package.json +55 -49
  163. package/theming/index.js +473 -0
  164. package/theming/loader.js +24 -0
  165. package/utils/cli.js +11 -0
  166. package/utils/color_keywords.js +151 -0
  167. package/utils/hct/Cam16.js +298 -0
  168. package/utils/hct/CorePalette.js +84 -0
  169. package/utils/hct/Hct.js +172 -0
  170. package/utils/hct/Scheme.js +587 -0
  171. package/utils/hct/TonalPalette.js +68 -0
  172. package/utils/hct/ViewingConditions.js +136 -0
  173. package/utils/hct/blend.js +93 -0
  174. package/utils/hct/colorUtils.js +302 -0
  175. package/utils/hct/hctSolver.js +559 -0
  176. package/utils/hct/helper.js +182 -0
  177. package/utils/hct/mathUtils.js +153 -0
  178. package/utils/jsonMergePatch.js +100 -0
  179. package/utils/jsx-runtime.js +101 -0
  180. package/utils/popup.js +117 -0
  181. package/utils/svg.js +12 -0
  182. package/.browserslistrc +0 -4
  183. package/.eslintrc.json +0 -204
  184. package/.stylelintrc.json +0 -645
  185. package/.vscode/launch.json +0 -31
  186. package/.vscode/settings.json +0 -3
  187. package/.vscode/tasks.json +0 -32
  188. package/CHANGELOG.md +0 -36
  189. package/CODE_OF_CONDUCT.md +0 -46
  190. package/adapters/datatable/column.js +0 -176
  191. package/adapters/datatable/index.js +0 -960
  192. package/adapters/dom/index.js +0 -586
  193. package/adapters/list/index.js +0 -69
  194. package/adapters/search/index.js +0 -495
  195. package/components/appbar/_spec.scss +0 -165
  196. package/components/appbar/_theme.scss +0 -0
  197. package/components/appbar/index.scss +0 -2
  198. package/components/banner/_spec.scss +0 -83
  199. package/components/banner/_theme.scss +0 -0
  200. package/components/banner/index.scss +0 -2
  201. package/components/bottomnav/README.md +0 -85
  202. package/components/bottomnav/_spec.scss +0 -149
  203. package/components/bottomnav/_theme.scss +0 -0
  204. package/components/bottomnav/index.js +0 -117
  205. package/components/bottomnav/index.scss +0 -2
  206. package/components/bottomnav/item.js +0 -88
  207. package/components/button/README.md +0 -61
  208. package/components/button/_spec.scss +0 -162
  209. package/components/button/_theme.scss +0 -42
  210. package/components/button/index.eta +0 -32
  211. package/components/button/index.js +0 -43
  212. package/components/button/index.pug +0 -18
  213. package/components/button/index.scss +0 -2
  214. package/components/card/_spec.scss +0 -241
  215. package/components/card/_theme.scss +0 -0
  216. package/components/card/index.scss +0 -2
  217. package/components/chip/_spec.scss +0 -111
  218. package/components/chip/_theme.scss +0 -105
  219. package/components/chip/index.js +0 -23
  220. package/components/chip/index.scss +0 -2
  221. package/components/chip/item.js +0 -20
  222. package/components/datatable/_spec.scss +0 -225
  223. package/components/datatable/_theme.scss +0 -128
  224. package/components/datatable/cell.js +0 -44
  225. package/components/datatable/columnheader.js +0 -46
  226. package/components/datatable/index.js +0 -374
  227. package/components/datatable/index.scss +0 -2
  228. package/components/datatable/row.js +0 -48
  229. package/components/datatable/rowheader.js +0 -18
  230. package/components/dialog/_spec.scss +0 -203
  231. package/components/dialog/_theme.scss +0 -7
  232. package/components/dialog/index.js +0 -601
  233. package/components/dialog/index.scss +0 -2
  234. package/components/divider/_spec.scss +0 -11
  235. package/components/divider/_theme.scss +0 -0
  236. package/components/divider/index.scss +0 -2
  237. package/components/elevation/_spec.scss +0 -9
  238. package/components/elevation/_theme.scss +0 -0
  239. package/components/elevation/index.scss +0 -2
  240. package/components/fab/_spec.scss +0 -210
  241. package/components/fab/_theme.scss +0 -0
  242. package/components/fab/index.js +0 -99
  243. package/components/fab/index.scss +0 -2
  244. package/components/grid/_spec.scss +0 -169
  245. package/components/grid/_theme.scss +0 -0
  246. package/components/grid/index.scss +0 -2
  247. package/components/layout/_mixins.scss +0 -11
  248. package/components/layout/_spec.scss +0 -916
  249. package/components/layout/_theme.scss +0 -19
  250. package/components/layout/index.js +0 -454
  251. package/components/layout/index.scss +0 -2
  252. package/components/list/_spec.scss +0 -363
  253. package/components/list/_theme.scss +0 -102
  254. package/components/list/content.js +0 -106
  255. package/components/list/index.js +0 -256
  256. package/components/list/index.scss +0 -2
  257. package/components/list/item.js +0 -167
  258. package/components/list/secondary.js +0 -45
  259. package/components/menu/_spec.scss +0 -329
  260. package/components/menu/_theme.scss +0 -0
  261. package/components/menu/index.js +0 -705
  262. package/components/menu/index.scss +0 -2
  263. package/components/menu/item.js +0 -231
  264. package/components/progress/_spec.scss +0 -156
  265. package/components/progress/_theme.scss +0 -0
  266. package/components/progress/index.js +0 -36
  267. package/components/progress/index.scss +0 -2
  268. package/components/selection/_spec.scss +0 -376
  269. package/components/selection/_theme.scss +0 -134
  270. package/components/selection/index.eta +0 -60
  271. package/components/selection/index.js +0 -70
  272. package/components/selection/index.pug +0 -30
  273. package/components/selection/index.scss +0 -2
  274. package/components/selection/input.js +0 -54
  275. package/components/selection/radiogroup.js +0 -40
  276. package/components/slider/_spec.scss +0 -59
  277. package/components/slider/_theme.scss +0 -0
  278. package/components/slider/index.scss +0 -2
  279. package/components/snackbar/_spec.scss +0 -150
  280. package/components/snackbar/_theme.scss +0 -0
  281. package/components/snackbar/index.js +0 -338
  282. package/components/snackbar/index.scss +0 -2
  283. package/components/tab/_spec.scss +0 -220
  284. package/components/tab/_theme.scss +0 -0
  285. package/components/tab/content.js +0 -210
  286. package/components/tab/index.js +0 -257
  287. package/components/tab/index.scss +0 -2
  288. package/components/tab/item.js +0 -88
  289. package/components/tab/list.js +0 -196
  290. package/components/tab/panel.js +0 -54
  291. package/components/textfield/README.md +0 -179
  292. package/components/textfield/_spec.scss +0 -763
  293. package/components/textfield/_theme.scss +0 -264
  294. package/components/textfield/index.eta +0 -74
  295. package/components/textfield/index.js +0 -160
  296. package/components/textfield/index.pug +0 -30
  297. package/components/textfield/index.scss +0 -2
  298. package/components/tooltip/_spec.scss +0 -185
  299. package/components/tooltip/_theme.scss +0 -0
  300. package/components/tooltip/index.scss +0 -2
  301. package/components/type/_spec.scss +0 -227
  302. package/components/type/_theme.scss +0 -0
  303. package/components/type/index.scss +0 -2
  304. package/core/_breakpoint.scss +0 -189
  305. package/core/_elevation.scss +0 -78
  306. package/core/_length.scss +0 -8
  307. package/core/_motion.scss +0 -31
  308. package/core/_platform.scss +0 -12
  309. package/core/_type.scss +0 -128
  310. package/core/aria/attributes.js +0 -141
  311. package/core/aria/button.js +0 -49
  312. package/core/aria/keyboard.js +0 -92
  313. package/core/aria/rovingtabindex.js +0 -175
  314. package/core/aria/tab.js +0 -59
  315. package/core/document/index.js +0 -39
  316. package/core/overlay/_spec.scss +0 -28
  317. package/core/overlay/_theme.scss +0 -147
  318. package/core/overlay/index.js +0 -95
  319. package/core/overlay/index.scss +0 -2
  320. package/core/ripple/_spec.scss +0 -196
  321. package/core/ripple/_theme.scss +0 -20
  322. package/core/ripple/index.js +0 -286
  323. package/core/ripple/index.scss +0 -2
  324. package/core/theme/_aliases.scss +0 -15
  325. package/core/theme/_config.scss +0 -8
  326. package/core/theme/_functions.scss +0 -22
  327. package/core/theme/_palettes.scss +0 -405
  328. package/core/theme/_spec.scss +0 -0
  329. package/core/theme/_theme.scss +0 -268
  330. package/core/theme/index.js +0 -50
  331. package/core/theme/index.scss +0 -4
  332. package/core/throttler.js +0 -42
  333. package/core/transition/index.js +0 -465
  334. package/docs/_flex.scss +0 -28
  335. package/docs/_menuoptions.js +0 -183
  336. package/docs/_partials/_androidnavbar.eta +0 -5
  337. package/docs/_partials/_androidstatusbar.eta +0 -13
  338. package/docs/_partials/_appbar.eta +0 -27
  339. package/docs/_partials/_buttontest.eta +0 -31
  340. package/docs/_partials/_header.eta +0 -146
  341. package/docs/_partials/_navlistitem.eta +0 -16
  342. package/docs/_partials/_target.eta +0 -1
  343. package/docs/_sample-utils.js +0 -88
  344. package/docs/_storage.js +0 -33
  345. package/docs/docs.scss +0 -331
  346. package/docs/framework.scss +0 -26
  347. package/docs/index.eta +0 -12
  348. package/docs/index.js +0 -7
  349. package/docs/pages/appbar.eta +0 -108
  350. package/docs/pages/appbar.js +0 -0
  351. package/docs/pages/bottomnav.eta +0 -188
  352. package/docs/pages/bottomnav.js +0 -118
  353. package/docs/pages/button.eta +0 -124
  354. package/docs/pages/button.js +0 -224
  355. package/docs/pages/card.eta +0 -90
  356. package/docs/pages/card.js +0 -175
  357. package/docs/pages/chip.eta +0 -122
  358. package/docs/pages/chip.js +0 -80
  359. package/docs/pages/color.eta +0 -143
  360. package/docs/pages/color.js +0 -261
  361. package/docs/pages/datatable.eta +0 -323
  362. package/docs/pages/datatable.js +0 -160
  363. package/docs/pages/dialog.eta +0 -184
  364. package/docs/pages/dialog.js +0 -174
  365. package/docs/pages/dom.eta +0 -26
  366. package/docs/pages/dom.js +0 -140
  367. package/docs/pages/elevation.eta +0 -35
  368. package/docs/pages/elevation.js +0 -0
  369. package/docs/pages/fab.eta +0 -99
  370. package/docs/pages/fab.js +0 -43
  371. package/docs/pages/grid.eta +0 -135
  372. package/docs/pages/grid.js +0 -128
  373. package/docs/pages/layout.eta +0 -8
  374. package/docs/pages/layout.js +0 -0
  375. package/docs/pages/list.eta +0 -465
  376. package/docs/pages/list.js +0 -8
  377. package/docs/pages/menu.eta +0 -274
  378. package/docs/pages/menu.js +0 -213
  379. package/docs/pages/overlay.eta +0 -69
  380. package/docs/pages/overlay.js +0 -3
  381. package/docs/pages/progress.eta +0 -23
  382. package/docs/pages/progress.js +0 -12
  383. package/docs/pages/ripple.eta +0 -27
  384. package/docs/pages/ripple.js +0 -3
  385. package/docs/pages/search.eta +0 -242
  386. package/docs/pages/search.js +0 -226
  387. package/docs/pages/selection.eta +0 -107
  388. package/docs/pages/selection.js +0 -12
  389. package/docs/pages/slider.eta +0 -23
  390. package/docs/pages/slider.js +0 -0
  391. package/docs/pages/snackbar.eta +0 -83
  392. package/docs/pages/snackbar.js +0 -157
  393. package/docs/pages/tab.eta +0 -407
  394. package/docs/pages/tab.js +0 -152
  395. package/docs/pages/textfield.eta +0 -487
  396. package/docs/pages/textfield.js +0 -257
  397. package/docs/pages/tooltip.eta +0 -92
  398. package/docs/pages/tooltip.js +0 -0
  399. package/docs/pages/transition.eta +0 -117
  400. package/docs/pages/transition.js +0 -52
  401. package/docs/pages/type.eta +0 -31
  402. package/docs/pages/type.js +0 -0
  403. package/docs/postrender.js +0 -41
  404. package/docs/prerender.js +0 -16
  405. package/docs/pwa/_dialogs.eta +0 -143
  406. package/docs/pwa/_menus.eta +0 -16
  407. package/docs/pwa/pwa-prerender.js +0 -3
  408. package/docs/pwa/pwa.eta +0 -478
  409. package/docs/pwa/pwa.js +0 -298
  410. package/docs/pwa/pwa.scss +0 -31
  411. package/docs/themes/theme-colored.scss +0 -15
  412. package/docs/themes/theme-default.scss +0 -3
  413. package/index.scss +0 -27
  414. package/jsconfig.json +0 -16
  415. package/scripts/deploy-docs.sh +0 -9
  416. package/templates/index.eta +0 -2
  417. package/templates/index.pug +0 -3
  418. package/tsconfig.json +0 -16
  419. package/webpack.config.js +0 -304
@@ -1,242 +0,0 @@
1
- <% var T = '../../templates/index.eta' %>
2
- <% layout('../_partials/_header.eta', {page: 'search'}) %>
3
- <div class="comparison js">
4
- <div class="render">
5
- <div class="display-flex" style="padding:8px;">
6
- <div class="flex-1 display-flex" flex-column>
7
- <p>Text field dropdown with:</p>
8
- <ul>
9
- <li>one-time search on first input</li>
10
- <li>startsWith text filter</li>
11
- <li>append input on selection</li>
12
- </ul>
13
- <div>
14
- <label class="mdw-textfield mdw-theme" id="search-textfield-custom1" mdw-ink="secondary">
15
- <input class="mdw-textfield__input" placeholder=" " />
16
- <div class="mdw-textfield__border">
17
- <div class="mdw-textfield__outline-gap">
18
- <div class="mdw-textfield__label">Property</div>
19
- </div>
20
- </div>
21
- <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
22
- <div class="custom-busy-indicator display-flex" flex-align-items="center">
23
- <div class="mdw-progress__circle">
24
- <svg viewBox="0 0 24 24">
25
- <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
26
- <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
27
- </svg>
28
- </div>
29
- <div>Searching...</div>
30
- </div>
31
- <div class="mdw-list" id="search-list-custom1"></div>
32
- </div>
33
- </label>
34
- </div>
35
- <p>Current Selection: <span id="search-result-custom1"></span></p>
36
- <p>Text field dropdown with:</p>
37
- <ul>
38
- <li>input-based search</li>
39
- <li>300ms debounce</li>
40
- <li>replace input on selection</li>
41
- <li>disabled item filter</li>
42
- </ul>
43
- <div>
44
- <label class="mdw-textfield mdw-theme" id="search-textfield-custom2" mdw-ink="primary" mdw-outlined>
45
- <input class="mdw-textfield__input" placeholder=" " />
46
- <div class="mdw-textfield__border">
47
- <div class="mdw-textfield__outline-gap">
48
- <div class="mdw-textfield__label">Property</div>
49
- </div>
50
- </div>
51
- <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
52
- <div class="custom-busy-indicator display-flex" flex-align-items="center">
53
- <div class="mdw-progress__circle">
54
- <svg viewBox="0 0 24 24">
55
- <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
56
- <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
57
- </svg>
58
- </div>
59
- <div>Searching...</div>
60
- </div>
61
- <div class="custom-no-results-indicator display-flex" flex-align-items="center" style="display:none">No results found</div>
62
- <div class="mdw-list" id="search-list-custom2"></div>
63
- </div>
64
- </label>
65
- </div>
66
- <p>Current Selection: <span id="search-result-custom2"></span></p>
67
- </div>
68
- </div>
69
- </div>
70
- </div>
71
- <div class="comparison js">
72
- <div class="render">
73
- <div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark>
74
- <div>12:30</div>
75
- <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
76
- </div>
77
- <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
78
- <div class="mdw-appbar__start">
79
- <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
80
- </div>
81
- <div class="mdw-appbar__title" mdw-custom>
82
- <div class="mdw-textfield mdw-theme" id="search-textfield-simple" mdw-solo mdw-ink="secondary">
83
- <input class="mdw-textfield__input" placeholder="Search" />
84
- </div>
85
- </div>
86
- <div class="mdw-appbar__end">
87
- <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
88
- </div>
89
- </div>
90
- <div class="content">
91
- <ul class="mdw-list" id="search-list-simple">
92
- <li class="mdw-list__item">
93
- <a class="mdw-list__content">Attractions</a>
94
- </li>
95
- <li class="mdw-list__item">
96
- <a class="mdw-list__content">Dining</a>
97
- </li>
98
- <li class="mdw-list__item">
99
- <a class="mdw-list__content">Education</a>
100
- </li>
101
- <li class="mdw-list__item">
102
- <a class="mdw-list__content">Family</a>
103
- </li>
104
- <li class="mdw-list__item">
105
- <a class="mdw-list__content">Health</a>
106
- </li>
107
- <li class="mdw-list__item">
108
- <a class="mdw-list__content">Office</a>
109
- </li>
110
- <li class="mdw-list__item">
111
- <a class="mdw-list__content">Promotions</a>
112
- </li>
113
- <li class="mdw-list__item">
114
- <a class="mdw-list__content">Radio</a>
115
- </li>
116
- <li class="mdw-list__item">
117
- <a class="mdw-list__content">Recipes</a>
118
- </li>
119
- <li class="mdw-list__item">
120
- <a class="mdw-list__content">Sports</a>
121
- </li>
122
- <li class="mdw-list__item">
123
- <a class="mdw-list__content">Travel</a>
124
- </li>
125
- </ul>
126
- </div>
127
- <div class="androidnavbar">
128
- <i class="material-icons back-button">&#xE3C8;</i>
129
- <i class="material-icons">&#xE836;</i>
130
- <i class="material-icons">&#xE835;</i>
131
- </div>
132
- </div>
133
- </div>
134
- <div class="comparison js">
135
- <div class="render">
136
- <div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark>
137
- <div>12:30</div>
138
- <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
139
- </div>
140
- <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
141
- <div class="mdw-appbar__start">
142
- <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
143
- </div>
144
- <div class="mdw-appbar__title" mdw-custom>
145
- <div class="mdw-textfield mdw-theme" id="search-textfield-multiline" mdw-solo mdw-ink="secondary">
146
- <input class="mdw-textfield__input" placeholder="Search" />
147
- </div>
148
- </div>
149
- <div class="mdw-appbar__end">
150
- <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
151
- </div>
152
- </div>
153
- <div class="content">
154
- <ul class="mdw-list" id="search-list-multiline">
155
- <li class="mdw-list__subheader mdw-theme" mdw-ink="medium">Today</li>
156
- <li class="mdw-list__item">
157
- <div class="mdw-list__content mdw-overlay mdw-ripple">
158
- <div class="mdw-list__avatar">
159
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
160
- </div>
161
- <div class="mdw-list__text">
162
- <div class="mdw-list__text-line">Brunch this weekend?</div>
163
- <div class="mdw-list__text-block">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
164
- </div>
165
- </div>
166
- </li>
167
- <li class="mdw-list__item">
168
- <div class="mdw-list__content">
169
- <div class="mdw-list__avatar">
170
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
171
- </div>
172
- <div class="mdw-list__text">
173
- <div class="mdw-list__text-line">Summer BBQ<span class="mdw-theme" mdw-ink="medium"> 4</span></div>
174
- <div class="mdw-list__text-block">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
175
- </div>
176
- </div>
177
- </li>
178
- <li class="mdw-list__item">
179
- <div class="mdw-list__content">
180
- <div class="mdw-list__avatar">
181
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
182
- </div>
183
- <div class="mdw-list__text">
184
- <div class="mdw-list__text-line">Oui oui</div>
185
- <div class="mdw-list__text-block">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
186
- </div>
187
- </div>
188
- </li>
189
- <li class="mdw-list__item">
190
- <div class="mdw-list__content">
191
- <div class="mdw-list__avatar">
192
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
193
- </div>
194
- <div class="mdw-list__text">
195
- <div class="mdw-list__text-line">Birthday gift</div>
196
- <div class="mdw-list__text-block">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
197
- </div>
198
- </div>
199
- </li>
200
- <li class="mdw-list__item">
201
- <div class="mdw-list__content">
202
- <div class="mdw-list__avatar">
203
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
204
- </div>
205
- <div class="mdw-list__text">
206
- <div class="mdw-list__text-line">Recipe to try</div>
207
- <div class="mdw-list__text-block">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
208
- </div>
209
- </div>
210
- </li>
211
- <li class="mdw-list__item">
212
- <div class="mdw-list__content">
213
- <div class="mdw-list__avatar">
214
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
215
- </div>
216
- <div class="mdw-list__text">
217
- <div class="mdw-list__text-line">Giants game</div>
218
- <div class="mdw-list__text-block">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
219
- </div>
220
- </div>
221
- </li>
222
- <li class="mdw-list__item">
223
- <div class="mdw-list__content">
224
- <div class="mdw-list__avatar">
225
- <i class="material-icons" style="font-size:40px;">&#xE853;</i>
226
- </div>
227
- <div class="mdw-list__text">
228
- <div class="mdw-list__text-line">Montauk weekend</div>
229
- <div class="mdw-list__text-block">-----</div>
230
- </div>
231
- </div>
232
- </li>
233
- </ul>
234
- </div>
235
- <div class="androidnavbar">
236
- <i class="material-icons back-button">&#xE3C8;</i>
237
- <i class="material-icons">&#xE836;</i>
238
- <i class="material-icons">&#xE835;</i>
239
- </div>
240
- </div>
241
- </div>
242
- <script src="search.min.js"></script>
@@ -1,226 +0,0 @@
1
- import ListAdapter from '../../adapters/list/index.js';
2
- import SearchAdapter from '../../adapters/search/index.js';
3
- import * as ListContent from '../../components/list/content.js';
4
- import * as ListItem from '../../components/list/item.js';
5
- import * as TextField from '../../components/textfield/index.js';
6
- import { setTextNode } from '../../core/dom.js';
7
-
8
- /** @typedef {{line1:string, line2:string}} CustomSearchResult */
9
-
10
- /** @type {SearchAdapter<any>} */
11
- let searchDocsSimple;
12
- /** @type {SearchAdapter<any>} */
13
- let searchDocsMultiline;
14
-
15
- /**
16
- * @param {string} [filter]
17
- * @return {CustomSearchResult[]}
18
- */
19
- function performFakeSearch(filter) {
20
- const results = [];
21
- // eslint-disable-next-line guard-for-in
22
- for (const key in navigator) {
23
- const navKey = /** @type {keyof Navigator} */ (key);
24
- const value = navigator[navKey] && navigator[navKey].toString();
25
- if (!filter || key.includes(filter) || (value && value.includes(filter))) {
26
- results.push({ line1: key, line2: value });
27
- }
28
- }
29
- return results;
30
- }
31
-
32
- /**
33
- * @param {HTMLElement} element
34
- * @return {void}
35
- */
36
- function hideElement(element) {
37
- element.style.setProperty('display', 'none');
38
- }
39
- /**
40
- * @param {HTMLElement} element
41
- * @return {void}
42
- */
43
- function showElement(element) {
44
- element.style.setProperty('display', '');
45
- }
46
-
47
- /**
48
- * @param {HTMLLIElement} listItemElement
49
- * @param {CustomSearchResult} result
50
- * @return {void}
51
- */
52
- function searchResultRenderer(listItemElement, result) {
53
- if (!listItemElement.hasChildNodes()) {
54
- const markup = `
55
- <div class="mdw-list__content mdw-theme" mdw-ink="secondary" aria-selected="false">
56
- <div class="mdw-list__text">
57
- <div class="mdw-list__text-line"></div>
58
- <div class="mdw-list__text-line"></div>
59
- </div>
60
- </div>`;
61
- listItemElement.innerHTML = markup;
62
- ListItem.attach(listItemElement);
63
- }
64
- const lines = listItemElement.getElementsByClassName('mdw-list__text-line');
65
- setTextNode(lines[0], result.line1);
66
- setTextNode(lines[1], result.line2);
67
- }
68
-
69
- /** @return {void} */
70
- function buildCustomSearch1() {
71
- const textfield = document.getElementById('search-textfield-custom1');
72
- const list = document.getElementById('search-list-custom1');
73
- const busyIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-busy-indicator')[0]);
74
-
75
- // For purpose of this demo results are cached.
76
- // Actual filter is performed by SearchAdapter
77
-
78
- /** @type {ListAdapter<CustomSearchResult>} */
79
- const customListAdapter = new ListAdapter({
80
- element: list,
81
- datasource: [],
82
- render: searchResultRenderer,
83
- });
84
-
85
- /** @type {CustomSearchResult[]} */
86
- let myCachedResults = null;
87
-
88
- /** @type {SearchAdapter<CustomSearchResult>} */
89
- const searchDocsCustom = new SearchAdapter({
90
- textfield,
91
- list,
92
- searchOnFocus: false,
93
- dropdown: true,
94
- textFilter: 'startsWith',
95
- suggestionMethod: 'append',
96
- performSearch: async (input) => {
97
- // Use precached results
98
- if (myCachedResults != null) {
99
- return myCachedResults;
100
- }
101
-
102
- // Display a busy indicator
103
- showElement(busyIndicator);
104
-
105
- // Add results to a cached search adapter
106
- myCachedResults = performFakeSearch();
107
-
108
- // Let busy indicator spin to illustrate loading
109
- await setTimeout(() => { /* noop */ }, 2000);
110
- return myCachedResults;
111
- },
112
- updateList: (searchResults) => {
113
- // SearchAdapter signaling the UI is ready to update with search results
114
-
115
- if (customListAdapter.datasource === searchResults) {
116
- // Search results have already been mapped. Nothing to do.
117
- // SearchAdapter handles item filtering.
118
- return;
119
- }
120
-
121
- // Directly assign search results as ListAdapter's data source
122
- customListAdapter.datasource = searchResults;
123
-
124
- // Remove busy indicator
125
- hideElement(busyIndicator);
126
-
127
- // Tell ListAdapter to perform a full refresh
128
- customListAdapter.refresh();
129
- },
130
- });
131
-
132
- searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
133
- const listContentElement = /** @type {HTMLElement} */ (event.target);
134
- const listItemElement = /** @type {HTMLLIElement} */ (listContentElement.parentElement);
135
- const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
136
- if (!selectedItem) throw new Error('Missing item!');
137
- const text = `${selectedItem.line1}:${selectedItem.line2}`;
138
- document.getElementById('search-result-custom1').textContent = text;
139
- });
140
- }
141
-
142
- /** @return {void} */
143
- function buildCustomSearch2() {
144
- const textfield = document.getElementById('search-textfield-custom2');
145
- const list = document.getElementById('search-list-custom2');
146
- const busyIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-busy-indicator')[0]);
147
- const noResultsIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
148
-
149
- /** @type {ListAdapter<CustomSearchResult>} */
150
- const customListAdapter = new ListAdapter({
151
- element: list,
152
- datasource: [],
153
- render: searchResultRenderer,
154
- });
155
-
156
- // For purpose of this query is "searched" every time with no cache.
157
- // SearchAdapter performs no filter
158
-
159
- /** @type {SearchAdapter<CustomSearchResult>} */
160
- const searchDocsCustom = new SearchAdapter({
161
- textfield,
162
- list,
163
- debounce: 300,
164
- dropdown: true,
165
- filterItems: false,
166
- performSearch: async (searchTerm) => {
167
- // Clear ListAdapter
168
- customListAdapter.clear();
169
-
170
- showElement(busyIndicator);
171
- hideElement(noResultsIndicator);
172
-
173
- const myData = performFakeSearch(searchTerm);
174
- // Spin for 1000ms
175
- await setTimeout(() => { /* noop */ }, 1000);
176
- return myData;
177
- },
178
- updateList: (items) => {
179
- hideElement(busyIndicator);
180
-
181
- if (!items.length) {
182
- showElement(noResultsIndicator);
183
- return;
184
- }
185
-
186
- // Assign results to ListAdapter
187
- customListAdapter.datasource = items;
188
- customListAdapter.refresh();
189
- },
190
- });
191
- searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
192
- const listContentElement = /** @type {HTMLElement} */ (event.target);
193
- const listItemElement = /** @type {HTMLLIElement} */ (listContentElement.parentElement);
194
- const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
195
- const text = `${selectedItem.line1}:${selectedItem.line2}`;
196
- document.getElementById('search-result-custom2').textContent = text;
197
- });
198
- }
199
-
200
- /** @return {void} */
201
- function setupSearches() {
202
- if (!searchDocsSimple) {
203
- searchDocsSimple = new SearchAdapter({
204
- textfield: document.getElementById('search-textfield-simple'),
205
- list: document.getElementById('search-list-simple'),
206
- });
207
- }
208
- if (!searchDocsMultiline) {
209
- searchDocsMultiline = new SearchAdapter({
210
- textfield: document.getElementById('search-textfield-multiline'),
211
- list: document.getElementById('search-list-multiline'),
212
- suggestionMethod: 'none',
213
- });
214
- }
215
-
216
- buildCustomSearch1();
217
- buildCustomSearch2();
218
- }
219
-
220
- /** @return {void} */
221
- function initializeMdwComponents() {
222
- for (const element of document.querySelectorAll('.js .mdw-textfield')) { TextField.attach(element); }
223
- }
224
-
225
- initializeMdwComponents();
226
- setupSearches();
@@ -1,107 +0,0 @@
1
- <% var T = '../../templates/index.eta' %>
2
- <% layout('../_partials/_header.eta', {page: 'selection'}) %>
3
- <div class="mdw-grid" mdw-stretch>
4
- <div class="mdw-grid__item" mdw-colspan="4">
5
- <div class="mdw-grid__content">
6
- <div class="render-fill">
7
- <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
8
- <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
9
- <div class="mdw-appbar__title">Styled HTMLInputElement</div>
10
- </div>
11
- <div class="content">
12
- <div class="display-flex" style="padding:16px;">
13
- <%~ includeFile(T, { selection: { ink:'blue', checked:true, prefix:true, type:'switch' , text:'Switch' }}) %>
14
- </div>
15
- <div class="display-flex" style="padding:16px;">
16
- <%~ includeFile(T, { selection: { ink:'blue', checked:true, prefix:true , text:'Prefixed' }}) %>
17
- </div>
18
- <div class="display-flex" style="padding:16px;">
19
- <%~ includeFile(T, { selection: { ink:'teal', checked:true , text:'Suffixed' }}) %>
20
- </div>
21
- <div class="display-flex" style="padding:16px;">
22
- <%~ includeFile(T, { selection: { ink:'teal', checked:true, disabled:true, text:'Disabled' }}) %>
23
- </div>
24
- <div class="display-flex" style="padding:16px;">
25
- <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test', checked:true , text:'Option A' }}) %>
26
- </div>
27
- <div class="display-flex" style="padding:16px;">
28
- <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test' , text:'Option B' }}) %>
29
- </div>
30
- <div class="display-flex" style="padding:16px;">
31
- <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test', disabled:true , text:'Option C' }}) %>
32
- </div>
33
- </div>
34
- </div>
35
- </div>
36
- </div>
37
- <div class="mdw-grid__item" mdw-colspan="4">
38
- <div class="mdw-grid__content">
39
- <div class="render-fill">
40
- <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
41
- <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
42
- <div class="mdw-appbar__title">aria-checked (JS)</div>
43
- </div>
44
- <div class="content">
45
- <div class="mdw-list__subheader mdw-theme" id="docs-selection-subheader1" mdw-ink="medium">Switch</div>
46
- <ul class="mdw-list" role="listbox" aria-labelledby="docs-selection-subheader1">
47
- <li class="mdw-list__item">
48
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
49
- <div class="mdw-list__text mdw-selection__label">Android Switch</div>
50
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-switch></div>
51
- </a>
52
- </li>
53
- <li class="mdw-list__item">
54
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false" aria-disabled="true">
55
- <div class="mdw-list__text mdw-selection__label">Android Switch Disabled</div>
56
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal contrast" mdw-switch></div>
57
- </a>
58
- </li>
59
- </ul>
60
- <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">.mdw-list[role="radiogroup"]</div>
61
- <ul class="mdw-list mdw-selection__radio-group" role="radiogroup">
62
- <li class="mdw-list__item">
63
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
64
- <div class="mdw-list__text mdw-selection__label">
65
- <div class="mdw-list__text-line">Option 1</div>
66
- <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Description</div>
67
- </div>
68
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-radio></div>
69
- </a>
70
- </li>
71
- <li class="mdw-list__item">
72
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false">
73
- <div class="mdw-list__text mdw-selection__label">
74
- <div class="mdw-list__text-line">Option 2</div>
75
- <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Description</div>
76
- </div>
77
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="blue" mdw-radio></div>
78
- </a>
79
- </li>
80
- </ul>
81
- <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">Multiple check</div>
82
- <ul class="mdw-list" role="listbox" aria-multiselectable="true">
83
- <li class="mdw-list__item">
84
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
85
- <div class="mdw-list__text mdw-selection__label">Option 1</div>
86
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-checkbox></div>
87
- </a>
88
- </li>
89
- <li class="mdw-list__item">
90
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
91
- <div class="mdw-list__text mdw-selection__label">Option 2</div>
92
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="blue" mdw-checkbox></div>
93
- </a>
94
- </li>
95
- <li class="mdw-list__item">
96
- <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false">
97
- <div class="mdw-list__text mdw-selection__label">Option 3</div>
98
- <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="warn" mdw-checkbox></div>
99
- </a>
100
- </li>
101
- </ul>
102
- </div>
103
- </div>
104
- </div>
105
- </div>
106
- </div>
107
- <script src="selection.min.js"></script>
@@ -1,12 +0,0 @@
1
- import * as List from '../../components/list/index.js';
2
- import * as Selection from '../../components/selection/index.js';
3
- import * as SelectionRadioGroup from '../../components/selection/radiogroup.js';
4
-
5
- /** @return {void} */
6
- function initializeMdwComponents() {
7
- for (const element of document.getElementsByClassName('mdw-selection')) Selection.attach(element);
8
- for (const element of document.getElementsByClassName('mdw-selection__radio-group')) SelectionRadioGroup.attach(element);
9
- for (const element of document.getElementsByClassName('mdw-list')) List.attach(element);
10
- }
11
-
12
- initializeMdwComponents();
@@ -1,23 +0,0 @@
1
- <% var T = '../../templates/index.eta' %>
2
- <% layout('../_partials/_header.eta', {page: 'slider'}) %>
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">Sliders allow users to make selections from a range of values.</h5>
6
- <p class="mdw-type">Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.</p>
7
- </div>
8
- <div class="mdw-grid__item" mdw-colspan="4">
9
- <div class="component-sample">
10
- <div class="component-sample__container">
11
- <label class="mdw-slider mdw-theme" mdw-ink="secondary">
12
- <input class="mdw-slider__input" type="range" list="sample-list" />
13
- <datalist id="sample-list">
14
- <option value="0" label="None"></option>
15
- <option value="50" label="Half"></option>
16
- <option value="100" label="All"></option>
17
- </datalist>
18
- </label>
19
- </div>
20
- </div>
21
- </div>
22
- </div>
23
- <script src="slider.min.js"></script>
File without changes