@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/grid.eta DELETED
@@ -1,135 +0,0 @@
1
- <% var T = '../../templates/index.eta' %>
2
- <% layout('../_partials/_header.eta', {page: 'grid'}) %>
3
- <div class="mdw-grid" mdw-margin-top>
4
- <div class="mdw-grid__item" mdw-colspan="8">
5
- <h5 class="mdw-type" mdw-baseline-next="36">The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.</h5>
6
- <p class="mdw-type">The Material Design layout grid is made up of three elements: columns, gutters, and margins.</p>
7
- </div>
8
- <div class="mdw-grid__item" mdw-colspan="8">
9
- <div class="mdw-type" mdw-style="subtitle">Margins and Gutters</div>
10
- <div class="docs-option-list">
11
- <%~ includeFile(T, { selection: { ink:'secondary', name:'default-margins', checked:true, text:'Default Margins and Gutters' }}) %>
12
- <%~ includeFile(T, { selection: { ink:'secondary', name:'top-margin', checked:true, text:'Top Margin' }}) %>
13
- <%~ includeFile(T, { selection: { ink:'secondary', name:'bottom-margin', checked:true, text:'Bottom Margin' }}) %>
14
- </div>
15
- <div class="mdw-type" mdw-style="subtitle">Maximum Columns</div>
16
- <div class="docs-option-list">
17
- <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'12', checked:true, text:'12' }}) %>
18
- <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'8', text:'8' }}) %>
19
- <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'4', text:'4' }}) %>
20
- <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'1', text:'1' }}) %>
21
- </div>
22
- <div class="mdw-type" mdw-style="subtitle">Display Model</div>
23
- <div class="docs-option-list">
24
- <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'flex', checked:true, text:'Flexbox' }}) %>
25
- <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'grid', text:'Grid' }}) %>
26
- </div>
27
- <div class="mdw-type" mdw-style="subtitle">Options</div>
28
- <div class="docs-option-list">
29
- <%~ includeFile(T, { selection: { ink:'secondary', name:'stretch', text:'Stretch' }}) %>
30
- <%~ includeFile(T, { selection: { ink:'secondary', name:'center', text:'Center' }}) %>
31
- <%~ includeFile(T, { selection: { ink:'secondary', name:'dense', text:'Dense' }}) %>
32
- </div>
33
- </div>
34
- <div class="mdw-grid__item" mdw-colspan="100%">
35
- <p class="mdw-type" style="text-align:center;" mdw-texttop-top="16dp" mdw-baseline-bottom="16dp">Click on an element to change colspan</p>
36
- </div>
37
- </div>
38
- <div class="docs-grid" id="sample-component">
39
- <div class="mdw-grid" mdw-margin-top mdw-margin-bottom>
40
- <div class="mdw-grid__item" mdw-rowspan="2">
41
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 100" mdw-light mdw-border-ink>1</div>
42
- </div>
43
- <div class="mdw-grid__item">
44
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
45
- </div>
46
- <div class="mdw-grid__item">
47
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 200" mdw-light mdw-border-ink>1</div>
48
- </div>
49
- <div class="mdw-grid__item">
50
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
51
- </div>
52
- <div class="mdw-grid__item">
53
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 400" mdw-dark mdw-border-ink>1</div>
54
- </div>
55
- <div class="mdw-grid__item">
56
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
57
- </div>
58
- <div class="mdw-grid__item">
59
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 700" mdw-dark mdw-border-ink>1</div>
60
- </div>
61
- <div class="mdw-grid__item" mdw-rowspan="3">
62
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
63
- </div>
64
- <div class="mdw-grid__item">
65
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 100" mdw-light mdw-border-ink>1</div>
66
- </div>
67
- <div class="mdw-grid__item">
68
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
69
- </div>
70
- <div class="mdw-grid__item">
71
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 200" mdw-light mdw-border-ink>1</div>
72
- </div>
73
- <div class="mdw-grid__item">
74
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
75
- </div>
76
- <div class="mdw-grid__item" mdw-colspan="2">
77
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 400" mdw-dark mdw-border-ink>2</div>
78
- </div>
79
- <div class="mdw-grid__item">
80
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
81
- </div>
82
- <div class="mdw-grid__item" mdw-rowspan="5" mdw-colspan="25%">
83
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 700" mdw-dark mdw-border-ink>25%</div>
84
- </div>
85
- <div class="mdw-grid__item" mdw-colspan="3">
86
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>3</div>
87
- </div>
88
- <div class="mdw-grid__item">
89
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 100" mdw-light mdw-border-ink>1</div>
90
- </div>
91
- <div class="mdw-grid__item">
92
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
93
- </div>
94
- <div class="mdw-grid__item">
95
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 200" mdw-light mdw-border-ink>1</div>
96
- </div>
97
- <div class="mdw-grid__item" mdw-colspan="75%">
98
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>75%</div>
99
- </div>
100
- <div class="mdw-grid__item">
101
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 400" mdw-dark mdw-border-ink>1</div>
102
- </div>
103
- <div class="mdw-grid__item">
104
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
105
- </div>
106
- <div class="mdw-grid__item">
107
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 700" mdw-dark mdw-border-ink>1</div>
108
- </div>
109
- <div class="mdw-grid__item">
110
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
111
- </div>
112
- <div class="mdw-grid__item">
113
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 100" mdw-light mdw-border-ink>1</div>
114
- </div>
115
- <div class="mdw-grid__item" mdw-colspan="8">
116
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>8</div>
117
- </div>
118
- <div class="mdw-grid__item">
119
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 200" mdw-light mdw-border-ink>1</div>
120
- </div>
121
- <div class="mdw-grid__item">
122
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
123
- </div>
124
- <div class="mdw-grid__item">
125
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 400" mdw-dark mdw-border-ink>1</div>
126
- </div>
127
- <div class="mdw-grid__item" mdw-colspan="2">
128
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>2</div>
129
- </div>
130
- <div class="mdw-grid__item">
131
- <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 700" mdw-dark mdw-border-ink>1</div>
132
- </div>
133
- </div>
134
- </div>
135
- <script src="grid.min.js"></script>
package/docs/pages/grid.js DELETED
@@ -1,128 +0,0 @@
1
- import { iterateArrayLike, setTextNode } from '../../core/dom.js';
2
-
3
- const sampleComponent = document.getElementById('sample-component');
4
-
5
- const colspans = [
6
- '1',
7
- '25%', '50%', '75%', '100%',
8
- '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
9
- ];
10
-
11
- /**
12
- * @param {Element} target
13
- * @return {void}
14
- */
15
- function onGridItemClick(target) {
16
- let colspan = target.getAttribute('mdw-colspan') || '1';
17
- const index = colspans.indexOf(colspan);
18
- colspan = colspans[index + 1] || '1';
19
- target.setAttribute('mdw-colspan', colspan.toString());
20
- setTextNode(target.firstElementChild, colspan.toString());
21
- }
22
-
23
- /**
24
- * @param {Event} event
25
- * @return {void}
26
- */
27
- function onOptionChange(event) {
28
- const { name, value, checked } = event.target;
29
- const grid = sampleComponent.getElementsByClassName('mdw-grid')[0];
30
-
31
- switch (name) {
32
- case 'default-margins':
33
- if (checked) {
34
- grid.removeAttribute('mdw-margin');
35
- grid.removeAttribute('mdw-gutter');
36
- grid.removeAttribute('mdw-margin-8col');
37
- grid.removeAttribute('mdw-gutter-8col');
38
- grid.removeAttribute('mdw-margin-4col');
39
- grid.removeAttribute('mdw-gutter-4col');
40
- } else {
41
- grid.setAttribute('mdw-margin', '40');
42
- grid.setAttribute('mdw-gutter', '40');
43
- grid.setAttribute('mdw-margin-8col', '8');
44
- grid.setAttribute('mdw-gutter-8col', '8');
45
- grid.setAttribute('mdw-margin-4col', '0');
46
- grid.setAttribute('mdw-gutter-4col', '0');
47
- }
48
- break;
49
- case 'top-margin':
50
- if (checked) {
51
- grid.setAttribute('mdw-margin-top', '');
52
- } else {
53
- grid.removeAttribute('mdw-margin-top');
54
- }
55
- break;
56
- case 'bottom-margin':
57
- if (checked) {
58
- grid.setAttribute('mdw-margin-bottom', '');
59
- } else {
60
- grid.removeAttribute('mdw-margin-bottom');
61
- }
62
- break;
63
- case 'stretch':
64
- if (checked) {
65
- grid.setAttribute('mdw-stretch', '');
66
- } else {
67
- grid.removeAttribute('mdw-stretch');
68
- }
69
- break;
70
- case 'center':
71
- if (checked) {
72
- grid.setAttribute('mdw-center', '');
73
- } else {
74
- grid.removeAttribute('mdw-center');
75
- }
76
- break;
77
- case 'style':
78
- switch (value) {
79
- case 'grid':
80
- grid.setAttribute('mdw-grid', '');
81
- break;
82
- case 'flex':
83
- grid.removeAttribute('mdw-grid');
84
- break;
85
- default:
86
- }
87
- break;
88
- case 'dense':
89
- if (checked) {
90
- grid.setAttribute('mdw-dense', '');
91
- } else {
92
- grid.removeAttribute('mdw-dense');
93
- }
94
- break;
95
- case 'columns':
96
- switch (value) {
97
- default:
98
- case '12':
99
- grid.removeAttribute('mdw-columns');
100
- break;
101
- case '8':
102
- grid.setAttribute('mdw-columns', '8');
103
- break;
104
- case '4':
105
- grid.setAttribute('mdw-columns', '4');
106
- break;
107
- case '1':
108
- grid.setAttribute('mdw-columns', '1');
109
- break;
110
- }
111
- break;
112
- default:
113
- }
114
- }
115
-
116
- /** @return {void} */
117
- function setupInteractions() {
118
- iterateArrayLike(sampleComponent.getElementsByClassName('mdw-grid__item'), (item) => {
119
- item.addEventListener('click', () => {
120
- onGridItemClick(item);
121
- });
122
- });
123
- iterateArrayLike(document.querySelectorAll('[name]'), (el) => {
124
- el.addEventListener('change', onOptionChange);
125
- });
126
- }
127
-
128
- setupInteractions();
package/docs/pages/grid.pug DELETED
@@ -1,95 +0,0 @@
1
- include ../_mixins.pug
2
-
3
- +header("grid")
4
- .mdw-grid(mdw-margin-top)
5
- .mdw-grid__item(mdw-colspan="8")
6
- h5.mdw-type(mdw-baseline-next="36") The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
7
- p.mdw-type The Material Design layout grid is made up of three elements: columns, gutters, and margins.
8
- .mdw-grid__item(mdw-colspan="8")
9
- .mdw-type(mdw-style="subtitle") Margins and Gutters
10
- .docs-option-list
11
- +mdwSelection({ink:'secondary', name:'default-margins', checked:true}) Default Margins and Gutters
12
- +mdwSelection({ink:'secondary', name:'top-margin', checked:true}) Top Margin
13
- +mdwSelection({ink:'secondary', name:'bottom-margin', checked:true}) Bottom Margin
14
- .mdw-type(mdw-style="subtitle") Maximum Columns
15
- .docs-option-list
16
- +mdwSelection({ink:'secondary', name:'columns', type:'radio', value:'12', checked:true}) 12
17
- +mdwSelection({ink:'secondary', name:'columns', type:'radio', value:'8'}) 8
18
- +mdwSelection({ink:'secondary', name:'columns', type:'radio', value:'4'}) 4
19
- +mdwSelection({ink:'secondary', name:'columns', type:'radio', value:'1'}) 1
20
- .mdw-type(mdw-style="subtitle") Display Model
21
- .docs-option-list
22
- +mdwSelection({ink:'secondary', name:'style', type:'radio', value:'flex', checked:true}) Flexbox
23
- +mdwSelection({ink:'secondary', name:'style', type:'radio', value:'grid'}) Grid
24
- .mdw-type(mdw-style="subtitle") Options
25
- .docs-option-list
26
- +mdwSelection({ink:'secondary', name:'stretch'}) Stretch
27
- +mdwSelection({ink:'secondary', name:'center'}) Center
28
- +mdwSelection({ink:'secondary', name:'dense'}) Dense
29
- .mdw-grid__item(mdw-colspan="100%")
30
- p.mdw-type(style="text-align:center" mdw-textop-top="16dp" mdw-baseline-bottom="16dp") Click on an element to change colspan
31
- .docs-grid#sample-component
32
- .mdw-grid(mdw-margin-top mdw-margin-bottom)
33
- .mdw-grid__item(mdw-rowspan="2")
34
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="cyan 100" mdw-light mdw-border-ink) 1
35
- .mdw-grid__item
36
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
37
- .mdw-grid__item
38
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="cyan 200" mdw-light mdw-border-ink) 1
39
- .mdw-grid__item
40
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
41
- .mdw-grid__item
42
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="cyan 400" mdw-dark mdw-border-ink) 1
43
- .mdw-grid__item
44
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
45
- .mdw-grid__item
46
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="cyan 700" mdw-dark mdw-border-ink) 1
47
- .mdw-grid__item(mdw-rowspan="3")
48
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
49
- .mdw-grid__item
50
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="red 100" mdw-light mdw-border-ink) 1
51
- .mdw-grid__item
52
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
53
- .mdw-grid__item
54
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="red 200" mdw-light mdw-border-ink) 1
55
- .mdw-grid__item
56
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
57
- .mdw-grid__item(mdw-colspan="2")
58
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="red 400" mdw-dark mdw-border-ink) 2
59
- .mdw-grid__item
60
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
61
- .mdw-grid__item(mdw-rowspan="5" mdw-colspan="25%")
62
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="red 700" mdw-dark mdw-border-ink) 25%
63
- .mdw-grid__item(mdw-colspan="3")
64
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 3
65
- .mdw-grid__item
66
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="green 100" mdw-light mdw-border-ink) 1
67
- .mdw-grid__item
68
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
69
- .mdw-grid__item
70
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="green 200" mdw-light mdw-border-ink) 1
71
- .mdw-grid__item(mdw-colspan="75%")
72
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 75%
73
- .mdw-grid__item
74
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="green 400" mdw-dark mdw-border-ink) 1
75
- .mdw-grid__item
76
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
77
- .mdw-grid__item
78
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="green 700" mdw-dark mdw-border-ink) 1
79
- .mdw-grid__item
80
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
81
- .mdw-grid__item
82
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="purple 100" mdw-light mdw-border-ink) 1
83
- .mdw-grid__item(mdw-colspan="8")
84
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 8
85
- .mdw-grid__item
86
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="purple 200" mdw-light mdw-border-ink) 1
87
- .mdw-grid__item
88
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 1
89
- .mdw-grid__item
90
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="purple 400" mdw-dark mdw-border-ink) 1
91
- .mdw-grid__item(mdw-colspan="2")
92
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink) 2
93
- .mdw-grid__item
94
- .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="purple 700" mdw-dark mdw-border-ink) 1
95
- script(src='grid.min.js')
package/docs/pages/layout.eta DELETED
@@ -1,8 +0,0 @@
1
- <% var T = '../../templates/index.eta' %>
2
- <% layout('../_partials/_header.eta', {page: 'layout'}) %>
3
- <div style="margin:16px;">
4
- <%~ includeFile(T, {button: { attributes: {href:"pwa.html", target:"_blank"}, text: 'Open in new window'}}) %>
5
- </div>
6
- <div style="margin:16px;">
7
- <iframe width="1440" height="300" src="pwa.html" style="width:100%;height:80vh;"></iframe>
8
- </div>
package/docs/pages/layout.js DELETED
File without changes
package/docs/pages/layout.pug DELETED
@@ -1,7 +0,0 @@
1
- include ../_mixins.pug
2
-
3
- +header("layout")
4
- div(style="margin:16px")
5
- +mdwButton()(href="pwa.html" target="_blank") Open in new window
6
- div(style="margin:16px")
7
- iframe(width=1440 height=300 src="pwa.html" style="width:100%;height:80vh")