@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,183 +0,0 @@
1
- import { getStorageItem, removeStorageItem, setStorageItem } from './_storage.js';
2
-
3
- /**
4
- * @param {boolean} value
5
- * @param {Element} [button]
6
- * @return {void}
7
- */
8
- export function setRTLMode(value, button) {
9
- if (value) {
10
- document.documentElement.dir = 'rtl';
11
- setStorageItem('rtlmode', 'true');
12
- } else {
13
- // Explicit LTR is required for Safari to support repeated toggling
14
- document.documentElement.dir = 'ltr';
15
- removeStorageItem('rtlmode');
16
- }
17
- if (button) {
18
- button.setAttribute('aria-pressed', value ? 'true' : 'false');
19
- }
20
- }
21
-
22
- /** @return {boolean} */
23
- export function isDarkMode() {
24
- const userPreference = getStorageItem('darkmode');
25
- if (userPreference == null) {
26
- return window.matchMedia('(prefers-color-scheme: dark)').matches;
27
- }
28
- return userPreference === 'true';
29
- }
30
-
31
- /**
32
- * @param {boolean} value
33
- * @param {Element} [button]
34
- * @return {void}
35
- */
36
- export function setDarkMode(value, button) {
37
- if (value) {
38
- document.documentElement.setAttribute('mdw-dark', '');
39
- document.documentElement.removeAttribute('mdw-light');
40
- } else {
41
- document.documentElement.setAttribute('mdw-light', '');
42
- document.documentElement.removeAttribute('mdw-dark');
43
- }
44
- const stringValue = (value ? 'true' : 'false');
45
- if (button) {
46
- button.setAttribute('aria-pressed', stringValue);
47
- }
48
- setStorageItem('darkmode', stringValue);
49
- }
50
-
51
- /**
52
- * @param {boolean} value
53
- * @param {Element} [button]
54
- * @return {void}
55
- */
56
- export function setAltTheme(value, button) {
57
- const items = document.head.getElementsByTagName('link');
58
- for (let i = 0; i < items.length; i += 1) {
59
- const stylesheet = items.item(i);
60
- if (stylesheet.href.includes(value ? 'theme-colored' : 'theme-default')) {
61
- stylesheet.disabled = false;
62
- }
63
- if (stylesheet.href.includes(value ? 'theme-default' : 'theme-colored')) {
64
- stylesheet.disabled = true;
65
- }
66
- }
67
-
68
- const stringValue = (value ? 'true' : 'false');
69
- if (button) {
70
- button.setAttribute('aria-pressed', stringValue);
71
- }
72
- const statusBarAttribute = document.head.getElementsByTagName('meta').namedItem('theme-color');
73
- if (statusBarAttribute) {
74
- statusBarAttribute.setAttribute('content', value ? '#FF5722' : '#E91E63');
75
- }
76
-
77
- setStorageItem('alttheme', stringValue);
78
- }
79
-
80
- /**
81
- * @param {string} value
82
- * @param {Element} [button]
83
- * @return {void}
84
- */
85
- export function setFontSize(value, button) {
86
- if (value) {
87
- document.documentElement.style.setProperty('font-size', value);
88
- setStorageItem('fontsize', value);
89
- } else {
90
- document.documentElement.style.removeProperty('font-size');
91
- removeStorageItem('fontsize');
92
- }
93
- if (button) {
94
- button.setAttribute('aria-pressed', value ? 'true' : 'false');
95
- }
96
- }
97
-
98
- /**
99
- * @param {Element} [element]
100
- * @return {void}
101
- */
102
- function setupRTLMode(element) {
103
- if (getStorageItem('rtlmode') === 'true') {
104
- setRTLMode(true, element);
105
- }
106
- if (!element) {
107
- return;
108
- }
109
- element.addEventListener('click', () => {
110
- if (document.documentElement.dir === 'rtl') {
111
- setRTLMode(false, element);
112
- } else {
113
- setRTLMode(true, element);
114
- }
115
- });
116
- }
117
-
118
- /**
119
- * @param {Element} [element]
120
- * @return {void}
121
- */
122
- function setupAltTheme(element) {
123
- if (getStorageItem('alttheme') === 'true') {
124
- setAltTheme(true, element);
125
- }
126
- if (!element) {
127
- return;
128
- }
129
- element.addEventListener('click', () => {
130
- if (getStorageItem('alttheme') !== 'true') {
131
- setAltTheme(true, element);
132
- } else {
133
- setAltTheme(false, element);
134
- }
135
- });
136
- }
137
-
138
- /**
139
- * @param {Element} [element]
140
- * @return {void}
141
- */
142
- function setupDarkMode(element) {
143
- if (isDarkMode()) {
144
- setDarkMode(true, element);
145
- }
146
- if (!element) {
147
- return;
148
- }
149
- element.addEventListener('click', () => {
150
- if (document.documentElement.hasAttribute('mdw-dark')) {
151
- setDarkMode(false, element);
152
- } else {
153
- setDarkMode(true, element);
154
- }
155
- });
156
- }
157
-
158
- /**
159
- * @param {Element} element
160
- * @return {void}
161
- */
162
- function setupLargeFontMode(element) {
163
- const fontsize = getStorageItem('fontsize');
164
- setFontSize(fontsize, element);
165
- if (!element) {
166
- return;
167
- }
168
- element.addEventListener('click', () => {
169
- if (document.documentElement.style.getPropertyValue('font-size')) {
170
- setFontSize(null, element);
171
- } else {
172
- setFontSize('200%', element);
173
- }
174
- });
175
- }
176
-
177
- /** @return {void} */
178
- export function setupMenuOptions() {
179
- setupAltTheme(document.getElementById('altThemeButton'));
180
- setupRTLMode(document.getElementById('rtlButton'));
181
- setupDarkMode(document.getElementById('darkModeButton'));
182
- setupLargeFontMode(document.getElementById('largeFontButton'));
183
- }
@@ -1,5 +0,0 @@
1
- <div class="androidnavbar">
2
- <i class="material-icons back-button">&#xE3C8;</i>
3
- <i class="material-icons">&#xE836;</i>
4
- <i class="material-icons">&#xE835;</i>
5
- </div>
@@ -1,13 +0,0 @@
1
- <div <%~ Object.entries({
2
- 'class': 'androidstatusbar mdw-theme',
3
- 'mdw-surface': it?.surface,
4
- 'mdw-light': it?.light,
5
- 'mdw-dark': it?.dark
6
- }).map(([key, value]) => {
7
- if (value === true) return key;
8
- if (value === false || value == null) return false;
9
- return `${key}="${value}"`
10
- }).filter(v=>v).join(' ')-%>>
11
- <div>12:30</div>
12
- <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
13
- </div>
@@ -1,27 +0,0 @@
1
- <% var T = '../../templates/index.eta'; %>
2
- <div <%~ Object.entries({
3
- 'class': 'mdw-appbar mdw-elevation mdw-theme',
4
- 'style': 'z-index:4',
5
- 'mdw-elevation': 4,
6
- 'mdw-surface': it?.surface,
7
- 'mdw-light': it?.light,
8
- 'mdw-dark': it?.dark
9
- }).map(([key, value]) => {
10
- if (value === true) return key;
11
- if (value === false || value == null) return false;
12
- return `${key}="${value}"`
13
- }).filter(v=>v).join(' ')-%>>
14
- <div class="mdw-appbar__start">
15
- <%_~ it?.start?.map((icon) => includeFile(T, { button: {
16
- class:'material-icons', icon:true, text:icon }})).join(' ') ?? '' _%>
17
- </div>
18
- <div class="mdw-appbar__title">
19
- <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
20
- </div>
21
- <div class="mdw-appbar__end">
22
- <%_~ it?.end?.map((icon) => includeFile(T, { button:{
23
- class:'material-icons', icon:true, text:icon,
24
- attributes: { 'mdw-more-button': icon === 'more_vert' }
25
- }})).join(' ') ?? '' _%>
26
- </div>
27
- </div>
@@ -1,31 +0,0 @@
1
- <% var T = '../../templates/index.eta'; %>
2
- <div class="display-flex flex-wrap">
3
- <%~ includeFile(T, {button: { text: 'Text' }}) %>
4
- <%~ includeFile(T, {button: { raised:true, text: 'Contained' }}) %>
5
- <%~ includeFile(T, {button: { raised:true, disabled:true, text: 'Disabled' }}) %>
6
- <%~ includeFile(T, {button: { borderInk:'default', text: 'Outlined' }}) %>
7
- </div>
8
- <div style="height:24px;"></div>
9
- <div class="display-flex flex-wrap">
10
- <%~ includeFile(T, {button: { ink:'primary', text:'Text' }}) %>
11
- <%~ includeFile(T, {button: { ink:'primary', raised:true, text: 'Contained' }}) %>
12
- <%~ includeFile(T, {button: { ink:'primary', raised:true, disabled:true, text:'Disabled' }}) %>
13
- <%~ includeFile(T, {button: { ink:'secondary', text:'Secondary' }}) %>
14
- <%~ includeFile(T, {button: { ink:'secondary', borderInk:true, text:'Outlined' }}) %>
15
- </div>
16
- <div style="height:24px;"></div>
17
- <div class="display-flex flex-wrap">
18
- <%~ includeFile(T, { button: { surface:'primary 500', dark:true, text:'Text' }}) %>
19
- <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Contained' }}) %>
20
- <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, disabled:true, text:'Disabled' }}) %>
21
- <%~ includeFile(T, { button: { surface:'secondary 100', light:true, raised:true, text:'Outlined' }}) %>
22
- </div>
23
- <div style="height:24px;"></div>
24
- <div class="display-flex flex-wrap">
25
- <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', icon:true }}) %>
26
- <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', ink:"warn", dark:true, icon:true }}) %>
27
- <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true }}) %>
28
- <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true, raised:true }}) %>
29
- <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true, raised:true, disabled:true }}) %>
30
- <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', icon:true, disabled:true }}) %>
31
- </div>
@@ -1,146 +0,0 @@
1
- <% var T = '../../templates/index.eta' -%>
2
- <!DOCTYPE html>
3
- <html class="mdw-layout mdw-theme" lang="en" mdw-surface="binary" mdw-light>
4
-
5
- <head>
6
- <title>Material Design Web</title>
7
- <meta charset="utf-8">
8
- <meta content="IE=edge" http-equiv="X-UA-Compatible">
9
- <meta content="Material Design Web - CSS/JS Framework" name="description">
10
- <meta content="width=device-width,initial-scale=1,viewport-fit=cover" name="viewport">
11
- <meta name="theme-color" content="#C2185B">
12
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13
- <meta name="apple-mobile-web-app-capable" content="yes">
14
-
15
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
16
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
17
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,400,500">
18
- <link rel="stylesheet" href="docs.min.css">
19
- <link rel="stylesheet" href="framework.min.css">
20
- <link rel="stylesheet" href="theme-default.min.css" title="Default Theme">
21
- <link rel="stylesheet" disabled href="theme-colored.min.css" title="Colored Theme">
22
- <script src="prerender.min.js"></script>
23
- </head>
24
-
25
- <body class="mdw-layout__body mdw-theme" mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal">
26
- <div class="mdw-layout__menus"></div>
27
- <div class="mdw-layout__dialogs"></div>
28
- <nav class="mdw-layout__navdrawer" id="docs-navdrawer">
29
- <div class="mdw-layout__sheet-content mdw-theme" mdw-surface="background" mdw-border-ink>
30
- <ul class="mdw-list" style="padding-bottom:64px;">
31
- <li class="mdw-list__item">
32
- <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" <%~ it.page === 'Home' ? 'aria-current="page"' : '' %> aria-selected="<%~ it.page === 'Home'%>" href="index.html" mdw-ink="default">
33
- <div class="mdw-list__text">Home</div>
34
- </a>
35
- </li>
36
- <li class="mdw-list__item" aria-expanded="true">
37
- <div class="mdw-list__content mdw-list__subheader">
38
- <div class="mdw-list__text mdw-theme" mdw-ink="medium">Core</div>
39
- <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
40
- </div>
41
- <ul class="mdw-list">
42
- <%~ includeFile('../_partials/_navlistitem.eta', {key: 'color', icon: 'compare', name: 'Color', page: it.page, color: 'primary contrast'}) %>
43
- <%~ includeFile('../_partials/_navlistitem.eta', {key: 'overlay', icon: 'tonality', name: 'Overlay', page: it.page, color: 'primary contrast'}) %>
44
- <%~ includeFile('../_partials/_navlistitem.eta', {key: 'ripple', icon: 'center_focus_strong', name: 'Ripple', page: it.page, color: 'primary contrast'}) %>
45
- <%~ includeFile('../_partials/_navlistitem.eta', {key: 'transition', icon: 'dynamic_feed', name: 'Transition', page: it.page, color: 'primary contrast'}) %>
46
- </ul>
47
- </li>
48
- <li class="mdw-list__item mdw-theme" aria-expanded="true">
49
- <div class="mdw-list__content mdw-list__subheader">
50
- <div class="mdw-list__text mdw-theme" mdw-ink="medium">Components</div>
51
- <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
52
- </div>
53
- <ul class="mdw-list">
54
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'appbar', icon: 'web_asset', name: 'App Bar', page: it.page }) %>
55
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'bottomnav', icon: 'call_to_action', name: 'Bottom Navigation', page: it.page }) %>
56
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'button', icon: 'crop_landscape', name: 'Button', page: it.page }) %>
57
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'card', icon: 'crop_square', name: 'Card', page: it.page }) %>
58
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'chip', icon: 'check_circle', name: 'Chip', page: it.page }) %>
59
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'datatable', icon: 'format_align_justify', name: 'Data Table', page: it.page }) %>
60
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'dialog', icon: 'select_all', name: 'Dialog', page: it.page }) %>
61
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'elevation', icon: 'layers', name: 'Elevation', page: it.page }) %>
62
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'fab', icon: 'add_circle', name: 'Floating Action Button', page: it.page }) %>
63
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'grid', icon: 'view_compact', name: 'Grid', page: it.page }) %>
64
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'layout', icon: 'view_quilt', name: 'Layout', page: it.page }) %>
65
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'list', icon: 'view_list', name: 'List', page: it.page }) %>
66
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'menu', icon: 'picture_in_picture', name: 'Menu', page: it.page }) %>
67
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'progress', icon: 'timelapse', name: 'Progress', page: it.page }) %>
68
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'selection', icon: 'toggle_on', name: 'Selection', page: it.page }) %>
69
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'slider', icon: 'tune', name: 'Slider', page: it.page }) %>
70
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'snackbar', icon: 'video_label', name: 'Snackbar', page: it.page }) %>
71
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'tab', icon: 'tab', name: 'Tab', page: it.page }) %>
72
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'textfield', icon: 'text_fields', name: 'Text Field', page: it.page }) %>
73
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'tooltip', icon: 'info', name: 'Tooltip', page: it.page }) %>
74
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'type', icon: 'font_download', name: 'Typography', page: it.page }) %>
75
- </ul>
76
- </li>
77
- <li class="mdw-list__item" aria-expanded="true">
78
- <div class="mdw-list__content mdw-list__subheader">
79
- <div class="mdw-list__text mdw-theme" mdw-ink="medium">Adapters</div>
80
- <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
81
- </div>
82
- <ul class="mdw-list">
83
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'dom', icon:'calendar_view_day', name:'DOM', page: it.page }) %>
84
- <%~ includeFile('../_partials/_navlistitem.eta', {key:'search', icon:'search', name:'Search', page: it.page }) %>
85
- </ul>
86
- </li>
87
- </ul>
88
- </div>
89
- </nav>
90
- <a class="mdw-layout__scrim" href="#" tabindex="-1"></a>
91
- <div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark>
92
- <div class="mdw-layout__appbar-shape"></div>
93
- <div class="mdw-appbar__start">
94
- <div class="mdw-tooltip__wrapper">
95
- <%~ includeFile(T, { button: {
96
- class: 'mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle',
97
- text:'menu', icon:true, attributes: { href:"#docs-navdrawer" },
98
- }}) %>
99
- <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
100
- </div>
101
- </div>
102
- <div class="mdw-appbar__title"><%~ it.page %></div>
103
- <div class="mdw-appbar__end" id="docs-menu-buttons">
104
- <div class="mdw-tooltip__wrapper">
105
- <%~ includeFile(T, { button: {
106
- id: 'altThemeButton', class: 'mdw-tooltip__target material-icons',
107
- text:'palette', icon:true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
108
- }}) %>
109
- <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div>
110
- </div>
111
- <div class="mdw-tooltip__wrapper">
112
- <%~ includeFile(T, { button: {
113
- id: 'darkModeButton', class: 'mdw-tooltip__target material-icons',
114
- text: 'brightness_3', icon: true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
115
- }}) %>
116
- <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div>
117
- </div>
118
- <div class="mdw-tooltip__wrapper">
119
- <%~ includeFile(T, { button: {
120
- id: 'rtlButton', class: 'mdw-tooltip__target material-icons',
121
- text: 'format_align_right', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
122
- }}) %>
123
- <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div>
124
- </div>
125
- <div class="mdw-tooltip__wrapper">
126
- <%~ includeFile(T, { button: {
127
- id: 'largeFontButton', class: 'mdw-tooltip__target material-icons',
128
- text: 'format_size', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
129
- }}) %>
130
- <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div>
131
- </div>
132
- </div>
133
- </div>
134
- <div class="mdw-layout__fab"></div>
135
- <div class="mdw-layout__snackbar"></div>
136
- <div class="mdw-layout__content">
137
- <div class="mdw-layout__content-page">
138
- <%~ it?.body ?? '' %>
139
- </div>
140
- </div>
141
- </body>
142
- <script src="postrender.min.js"></script>
143
- <script src="entire-framework.min.js"></script>
144
- <script src="docs.common.min.js"></script>
145
-
146
- </html>
@@ -1,16 +0,0 @@
1
- <li class="mdw-list__item">
2
- <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" <%_~ [
3
- it.page === it.key ? 'aria-current="page"' : '',
4
- `aria-selected="${it.page === it.key}"`,
5
- `href="${it.key}.html"`,
6
- `mdw-ink="${it.color ?? 'secondary contrast'}"`,
7
- ].filter(v=>v).join(' ')
8
- %>>
9
- <% if (it.icon) { %>
10
- <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium"><%= it.icon ?? '' %></div>
11
- <% } %>
12
- <div class="mdw-list__text">
13
- <div class="mdw-list__text-block"><%= it.name ?? '' %></div>
14
- </div>
15
- </a>
16
- </li>
@@ -1 +0,0 @@
1
- <div class="target" style="background-image:url(<%~ it.url %>)"></div>
@@ -1,88 +0,0 @@
1
- /**
2
- * @param {Element|HTMLElement} element
3
- * @param {boolean} [pug=false]
4
- * @param {string} [linePrefix='']
5
- * @return {string}
6
- */
7
- function convertElementToCode(element, pug = false, linePrefix = '') {
8
- const htmlType = element.tagName.toLowerCase();
9
- /** @type {string[]} */
10
- const attributes = [];
11
- /** @type {string[]} */
12
- const classes = [];
13
- for (const c of element.classList) {
14
- classes.push(c);
15
- }
16
- for (const attr of element.attributes) {
17
- if (attr.name === 'class') {
18
- continue;
19
- }
20
- if (attr.value.length) {
21
- attributes.push(`${attr.name}="${attr.value}"`);
22
- } else {
23
- attributes.push(attr.name);
24
- }
25
- }
26
- attributes.sort();
27
- const syntaxItems = [
28
- htmlType,
29
- classes.length ? `class="${classes.join(' ')}"` : '',
30
- attributes.join(' '),
31
- ];
32
- const openingHTMLLine = pug
33
- ? `${htmlType === 'div' && classes.length ? '' : htmlType}${classes.length ? `.${classes.join('.')}` : ''}${attributes.length ? `(${attributes.join(' ')})` : ''}`
34
- : `<${syntaxItems.filter(Boolean).join(' ').trim()}>`;
35
- const closingHTMLLine = pug ? '' : `</${htmlType}>`;
36
- const lines = [openingHTMLLine];
37
- /** @type {string[]} */
38
- const innerLines = [];
39
- let onlyText = true;
40
- for (const child of element.childNodes) {
41
- let lineText;
42
- if (child instanceof HTMLElement) {
43
- lineText = convertElementToCode(child, pug, ` ${linePrefix}`);
44
- if (lineText.trim()) {
45
- onlyText = false;
46
- }
47
- } else if (child.nodeValue && pug) {
48
- lineText = ` ${child.nodeValue}`;
49
- }
50
- if (lineText && lineText.trim()) {
51
- innerLines.push(lineText);
52
- }
53
- }
54
- if (onlyText) {
55
- if (pug) {
56
- return `${linePrefix + lines.join('')} ${innerLines.join('').trim()}`;
57
- }
58
- return linePrefix + lines.join('') + innerLines.join('').trim() + closingHTMLLine;
59
- }
60
- lines.push(...innerLines, linePrefix + closingHTMLLine);
61
- return linePrefix + lines.filter((line) => line.trim()).join('\n');
62
- }
63
-
64
- /**
65
- * @param {Element} element
66
- * @param {string} tagname
67
- * @return {Element}
68
- */
69
- function changeElementTagName(element, tagname) {
70
- const newElement = document.createElement(tagname);
71
- let i = element.attributes.length;
72
- while (i--) {
73
- const attr = element.attributes.item(i);
74
- const clonedAttr = /** @type {Attr} */ (attr.cloneNode());
75
- newElement.attributes.setNamedItem(clonedAttr);
76
- }
77
- while (element.firstChild) {
78
- newElement.appendChild(element.firstChild);
79
- }
80
-
81
- element.replaceWith(newElement);
82
- return newElement;
83
- }
84
-
85
- export {
86
- convertElementToCode,
87
- changeElementTagName,
88
- };
package/docs/_storage.js DELETED
@@ -1,33 +0,0 @@
1
- /**
2
- * @param {string} key
3
- * @return {string}
4
- */
5
- export function getStorageItem(key) {
6
- if (!window.localStorage) {
7
- return null;
8
- }
9
- return localStorage.getItem(key);
10
- }
11
-
12
- /**
13
- * @param {string} key
14
- * @param {string} value
15
- * @return {void}
16
- */
17
- export function setStorageItem(key, value) {
18
- if (!window.localStorage) {
19
- return;
20
- }
21
- localStorage.setItem(key, value);
22
- }
23
-
24
- /**
25
- * @param {string} key
26
- * @return {void}
27
- */
28
- export function removeStorageItem(key) {
29
- if (!window.localStorage) {
30
- return;
31
- }
32
- localStorage.removeItem(key);
33
- }