u2ui 1.0.1 → 1.4.5

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 (591) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +36 -36
  3. package/attr/behavior/README.md +6 -4
  4. package/attr/behavior/behavior.js +265 -261
  5. package/attr/behavior/manifest.json +42 -42
  6. package/attr/confirm/README.md +8 -8
  7. package/attr/confirm/confirm.js +86 -90
  8. package/attr/confirm/manifest.json +42 -42
  9. package/attr/disableif/README.md +37 -0
  10. package/attr/disableif/disableif.js +59 -0
  11. package/attr/disableif/manifest.json +38 -0
  12. package/attr/draghandle/README.md +15 -15
  13. package/attr/draghandle/draghandle.js +24 -42
  14. package/attr/draghandle/manifest.json +30 -0
  15. package/attr/dropzone/README.md +32 -0
  16. package/attr/dropzone/dropzone.js +485 -0
  17. package/attr/dropzone/manifest.json +36 -0
  18. package/attr/focusgroup/README.md +9 -9
  19. package/attr/focusgroup/focusgroup.js +97 -100
  20. package/attr/focusgroup/manifest.json +30 -38
  21. package/attr/href/README.md +5 -5
  22. package/attr/href/href.js +50 -42
  23. package/attr/href/manifest.json +42 -42
  24. package/attr/intersect/README.md +15 -15
  25. package/attr/intersect/intersect.js +98 -98
  26. package/attr/intersect/manifest.json +44 -57
  27. package/attr/lightbox/README.md +27 -0
  28. package/attr/lightbox/lightbox.js +120 -0
  29. package/attr/lightbox/manifest.json +29 -0
  30. package/attr/movable/README.md +27 -0
  31. package/attr/movable/manifest.json +47 -0
  32. package/attr/movable/movable.js +111 -0
  33. package/attr/navigable/README.md +9 -9
  34. package/attr/navigable/TargetObserver.js +90 -91
  35. package/attr/navigable/U2TargetObserver.js +75 -75
  36. package/attr/navigable/manifest.json +34 -42
  37. package/attr/navigable/navigable.js +85 -87
  38. package/attr/parallax/README.md +10 -10
  39. package/attr/parallax/manifest.json +36 -0
  40. package/attr/parallax/parallax.js +119 -119
  41. package/attr/scrollspy/README.md +43 -0
  42. package/attr/scrollspy/manifest.json +28 -0
  43. package/attr/scrollspy/scrollspy.js +85 -0
  44. package/attr/selectable/README.md +42 -0
  45. package/attr/selectable/SelectionManager.js +171 -0
  46. package/attr/selectable/manifest.json +33 -0
  47. package/attr/selectable/selectable.js +28 -0
  48. package/attr/skin/README.md +15 -16
  49. package/attr/skin/manifest.json +40 -0
  50. package/attr/skin/skin.css +49 -50
  51. package/attr/store/README.md +41 -0
  52. package/attr/store/manifest.json +28 -0
  53. package/attr/store/store.js +62 -0
  54. package/class/badge/README.md +2 -2
  55. package/class/badge/badge.css +34 -34
  56. package/class/card/README.md +51 -0
  57. package/class/card/card.css +31 -0
  58. package/class/flex/README.md +16 -16
  59. package/class/flex/flex.css +15 -25
  60. package/class/grid/README.md +18 -18
  61. package/class/grid/grid.css +38 -40
  62. package/class/reset/README.md +6 -6
  63. package/class/reset/reset.css +8 -8
  64. package/class/table/README.md +22 -21
  65. package/class/table/table.css +125 -125
  66. package/class/unstyle/README.md +7 -5
  67. package/class/unstyle/unstyle.css +14 -12
  68. package/class/width/README.md +18 -18
  69. package/class/width/width.css +21 -22
  70. package/css/README.md +11 -0
  71. package/css/base/README.md +8 -2
  72. package/css/base/base.css +153 -127
  73. package/css/base/beta.css +34 -50
  74. package/css/base/full.css +5 -5
  75. package/css/base/nomotion.css +8 -8
  76. package/css/base/print.css +36 -36
  77. package/css/classless/README.md +10 -4
  78. package/css/classless/aria.css +51 -64
  79. package/css/classless/classless.css +118 -124
  80. package/css/classless/full.css +11 -11
  81. package/css/classless/more.css +314 -340
  82. package/css/classless/simple.css +314 -103
  83. package/css/classless/snippeds/a/icons.css +66 -12
  84. package/css/classless/snippeds/a/tests.html +118 -0
  85. package/css/classless/snippeds/blockquote/big-quotes.css +36 -0
  86. package/css/classless/snippeds/blockquote/tests.html +62 -0
  87. package/css/classless/snippeds/button/square.css +22 -0
  88. package/css/classless/snippeds/button/tests.html +53 -0
  89. package/css/classless/snippeds/experiments/aria-header-nav-dropdown.css +46 -0
  90. package/css/classless/snippeds/hr/gradient.css +2 -2
  91. package/css/classless/snippeds/hr/section_sign.css +16 -16
  92. package/css/classless/snippeds/hr/tests.html +49 -49
  93. package/css/classless/snippeds/p/indent.css +9 -0
  94. package/css/classless/snippeds/p/initial.css +9 -0
  95. package/css/classless/snippeds/p/tests.html +60 -0
  96. package/css/classless/variables.css +132 -99
  97. package/css/norm/README.md +7 -1
  98. package/css/norm/beta.css +41 -39
  99. package/css/norm/norm.css +89 -98
  100. package/css/norm/oldies.css +71 -60
  101. package/css/{classes → utils}/README.md +10 -4
  102. package/css/{classes/classes.css → utils/utils.css} +78 -78
  103. package/el/accordion/README.md +60 -59
  104. package/el/accordion/accordion.css +11 -7
  105. package/el/accordion/accordion.js +211 -258
  106. package/el/accordion/manifest.json +44 -57
  107. package/el/alert/README.md +86 -67
  108. package/el/alert/alert.css +72 -73
  109. package/el/alert/alert.js +206 -187
  110. package/el/alert/manifest.json +59 -77
  111. package/el/breadcrumb/README.md +41 -0
  112. package/el/breadcrumb/breadcrumb.css +22 -0
  113. package/el/breadcrumb/breadcrumb.js +119 -0
  114. package/el/breadcrumb/manifest.json +42 -0
  115. package/el/buttongroup/README.md +36 -36
  116. package/el/buttongroup/buttongroup.css +38 -30
  117. package/el/buttongroup/buttongroup.js +68 -56
  118. package/el/buttongroup/manifest.json +28 -0
  119. package/el/bytes/README.md +4 -4
  120. package/el/bytes/bytes.css +6 -6
  121. package/el/bytes/bytes.js +98 -97
  122. package/el/bytes/manifest.json +90 -95
  123. package/el/calendar/README.md +64 -0
  124. package/el/calendar/calendar.css +36 -0
  125. package/el/calendar/calendar.js +391 -0
  126. package/el/calendar/ext/drag.js +69 -0
  127. package/el/calendar/ext/keyNavigation.js +101 -0
  128. package/el/calendar/manifest.json +69 -0
  129. package/el/carousel/README.md +14 -14
  130. package/el/carousel/carousel.css +45 -46
  131. package/el/carousel/carousel.js +398 -371
  132. package/el/carousel/manifest.json +44 -58
  133. package/el/carousel-nav/README.md +13 -14
  134. package/el/carousel-nav/carousel-nav.js +74 -74
  135. package/el/carousel-nav/manifest.json +31 -0
  136. package/el/chart/README.md +46 -0
  137. package/el/chart/chart.css +7 -0
  138. package/el/chart/chart.js +188 -0
  139. package/el/chart/engines/apexcharts.js +103 -0
  140. package/el/chart/engines/billboard.js +79 -0
  141. package/el/chart/engines/chart.js.js +32 -0
  142. package/el/chart/engines/chartist.js +74 -0
  143. package/el/chart/engines/echarts.js +65 -0
  144. package/el/chart/engines/frappe.js +49 -0
  145. package/el/chart/engines/nvd3.js +139 -0
  146. package/el/chart/engines/plotly.js +73 -0
  147. package/el/chart/manifest.json +54 -0
  148. package/el/code/README.md +21 -21
  149. package/el/code/code.css +46 -46
  150. package/el/code/code.js +291 -289
  151. package/el/code/manifest.json +59 -66
  152. package/el/cookiebanner/README.md +70 -0
  153. package/el/cookiebanner/cookiebanner.css +42 -0
  154. package/el/cookiebanner/cookiebanner.js +161 -0
  155. package/el/cookiebanner/extensions/googleConsentMode.js +36 -0
  156. package/el/cookiebanner/knownItems.js +291 -0
  157. package/el/cookiebanner/manifest.json +85 -0
  158. package/el/cookiebanner/ui.js +426 -0
  159. package/el/copy/README.md +9 -7
  160. package/el/copy/copy.css +3 -3
  161. package/el/copy/copy.js +89 -117
  162. package/el/copy/manifest.json +37 -49
  163. package/el/counter/README.md +12 -9
  164. package/el/counter/counter.css +8 -8
  165. package/el/counter/counter.js +96 -95
  166. package/el/counter/manifest.json +50 -59
  167. package/el/drawer/README.md +35 -0
  168. package/el/drawer/drawer.css +77 -0
  169. package/el/drawer/drawer.js +166 -0
  170. package/el/drawer/manifest.json +27 -0
  171. package/el/fields/README.md +34 -0
  172. package/el/fields/fields.css +5 -0
  173. package/el/fields/fields.js +133 -0
  174. package/el/fields/manifest.json +32 -0
  175. package/el/ico/README.md +119 -118
  176. package/el/ico/debug.js +86 -0
  177. package/el/ico/font/Font Awesome.css +22 -22
  178. package/el/ico/font/LigatureSymbols.css +7 -7
  179. package/el/ico/font/Material Icons.css +6 -6
  180. package/el/ico/font/RemixFilled.css +8 -8
  181. package/el/ico/font/RemixOutlined.css +8 -8
  182. package/el/ico/font/old/anicons.css +31 -31
  183. package/el/ico/font/old/devicons.css +210 -210
  184. package/el/ico/font/old/material.all.css +36 -36
  185. package/el/ico/font/old/remix.css +15 -15
  186. package/el/ico/font/old/utf8.css +54 -54
  187. package/el/ico/ico.css +122 -110
  188. package/el/ico/ico.js +163 -189
  189. package/el/ico/manifest.json +68 -86
  190. package/el/input/README.md +41 -39
  191. package/el/input/input.css +95 -35
  192. package/el/input/input.js +682 -331
  193. package/el/input/manifest.json +54 -0
  194. package/el/maintitlebar/README.md +39 -0
  195. package/el/maintitlebar/maintitlebar.css +40 -0
  196. package/el/maintitlebar/maintitlebar.js +17 -0
  197. package/el/maintitlebar/manifest.json +32 -0
  198. package/el/masonry/README.md +19 -19
  199. package/el/masonry/manifest.json +49 -60
  200. package/el/masonry/masonry.css +27 -27
  201. package/el/masonry/masonry.js +93 -92
  202. package/el/menubutton/README.md +39 -0
  203. package/el/menubutton/manifest.json +44 -0
  204. package/el/{splitbutton/splitbutton.css → menubutton/menubutton.css} +51 -47
  205. package/el/menubutton/menubutton.js +90 -0
  206. package/el/number/README.md +9 -6
  207. package/el/number/manifest.json +162 -121
  208. package/el/number/number.css +6 -6
  209. package/el/number/number.js +67 -67
  210. package/el/out/README.md +5 -5
  211. package/el/out/manifest.json +26 -38
  212. package/el/out/out.css +2 -2
  213. package/el/out/out.js +42 -59
  214. package/el/pagination/README.md +32 -0
  215. package/el/pagination/manifest.json +47 -0
  216. package/el/pagination/pagination.css +27 -0
  217. package/el/pagination/pagination.js +147 -0
  218. package/el/parallax-bg/README.md +26 -6
  219. package/el/parallax-bg/manifest.json +32 -0
  220. package/el/parallax-bg/parallax-bg.css +13 -13
  221. package/el/parallax-bg/parallax-bg.js +197 -186
  222. package/el/qrcode/README.md +7 -7
  223. package/el/qrcode/manifest.json +32 -43
  224. package/el/qrcode/package.json +22 -22
  225. package/el/qrcode/qrcode.css +13 -13
  226. package/el/qrcode/qrcode.js +53 -45
  227. package/el/rating/README.md +9 -20
  228. package/el/rating/manifest.json +52 -65
  229. package/el/rating/rating.css +10 -10
  230. package/el/rating/rating.js +148 -139
  231. package/el/responsive/README.md +43 -0
  232. package/el/responsive/manifest.json +41 -0
  233. package/el/responsive/responsive.css +4 -0
  234. package/el/responsive/responsive.js +143 -0
  235. package/el/rte/README.md +10 -10
  236. package/el/rte/manifest.json +33 -0
  237. package/el/rte/rte.css +9 -9
  238. package/el/rte/rte.js +56 -56
  239. package/el/skeleton/README.md +3 -3
  240. package/el/skeleton/manifest.json +37 -51
  241. package/el/skeleton/skeleton.css +67 -60
  242. package/el/skeleton/skeleton.js +71 -72
  243. package/el/splitpanel/README.md +33 -13
  244. package/el/splitpanel/manifest.json +36 -49
  245. package/el/splitpanel/splitpanel.css +20 -17
  246. package/el/splitpanel/splitpanel.js +117 -116
  247. package/el/spot/README.md +36 -0
  248. package/el/spot/manifest.json +55 -0
  249. package/el/spot/spot.css +23 -0
  250. package/el/spot/spot.js +106 -0
  251. package/el/system/README.md +29 -0
  252. package/el/system/demoHtml.html +660 -0
  253. package/el/system/manifest.json +32 -0
  254. package/el/system/styler.js +661 -0
  255. package/el/system/system.js +84 -0
  256. package/el/table/README.md +80 -68
  257. package/el/table/ext/autoFormatTable.js +228 -0
  258. package/el/table/manifest.json +32 -43
  259. package/el/table/table.css +4 -59
  260. package/el/table/table.js +468 -194
  261. package/el/tabs/README.md +17 -17
  262. package/el/tabs/manifest.json +44 -59
  263. package/el/tabs/tabs.css +22 -22
  264. package/el/tabs/tabs.js +192 -210
  265. package/el/textfit/README.md +7 -7
  266. package/el/textfit/manifest.json +33 -45
  267. package/el/textfit/textfit.css +5 -5
  268. package/el/textfit/textfit.js +80 -80
  269. package/el/time/README.md +6 -5
  270. package/el/time/manifest.json +79 -118
  271. package/el/time/time.js +179 -168
  272. package/el/toc/README.md +27 -0
  273. package/el/toc/manifest.json +36 -0
  274. package/el/toc/toc.css +3 -0
  275. package/el/toc/toc.js +85 -0
  276. package/el/tooltip/README.md +13 -10
  277. package/el/tooltip/manifest.json +56 -69
  278. package/el/tooltip/tooltip.css +100 -97
  279. package/el/tooltip/tooltip.js +146 -82
  280. package/el/tree/README.md +133 -0
  281. package/el/tree/ext/dnd.js +53 -0
  282. package/el/tree/ext/item.js +35 -0
  283. package/el/tree/manifest.json +61 -0
  284. package/el/tree/tree.css +18 -0
  285. package/el/tree/tree.js +236 -0
  286. package/el/typewriter/README.md +11 -11
  287. package/el/typewriter/manifest.json +45 -66
  288. package/el/typewriter/typewriter.css +6 -6
  289. package/el/typewriter/typewriter.js +161 -166
  290. package/el/video/README.md +37 -0
  291. package/el/video/manifest.json +96 -0
  292. package/el/video/video.js +550 -0
  293. package/js/Placer/Placer.js +156 -156
  294. package/js/Placer/README.md +14 -16
  295. package/js/PointerObserver/PointerObserver-no-scroll.js +146 -0
  296. package/js/PointerObserver/PointerObserver.js +161 -130
  297. package/js/PointerObserver/README.md +6 -7
  298. package/js/SelectorObserver/README.md +9 -9
  299. package/js/SelectorObserver/SelectorObserver.js +199 -200
  300. package/js/Tour/README.md +56 -0
  301. package/js/Tour/Tour.js +156 -0
  302. package/js/contextmenu/README.md +6 -31
  303. package/js/contextmenu/contextmenu.js +338 -336
  304. package/js/dialog/README.md +8 -7
  305. package/js/dialog/dialog.js +228 -261
  306. package/js/drag/README.md +28 -0
  307. package/js/drag/drag.js +38 -0
  308. package/js/drag/indicateDrop.js +80 -0
  309. package/js/loading/README.md +24 -0
  310. package/js/loading/loading.js +139 -0
  311. package/js/navigator/README.md +26 -0
  312. package/js/navigator/navigator.js +430 -0
  313. package/js/navigator/url-change-event.js +29 -0
  314. package/js/rte/README.md +13 -14
  315. package/js/rte/old/NodeCleaner.js +315 -315
  316. package/js/rte/old/Rte/Rte.ui.mjs +154 -154
  317. package/js/rte/old/Rte/index.mjs +5 -5
  318. package/js/rte/old/Rte/main.css +189 -189
  319. package/js/rte/old/old.rte.js +131 -131
  320. package/js/rte/old/range-selection.old.js +394 -394
  321. package/js/rte/rte.js +7 -7
  322. package/js/rte/src/behavior.js +228 -228
  323. package/js/rte/src/events.js +73 -73
  324. package/js/rte/src/fixes.js +250 -250
  325. package/js/rte/src/range.js +469 -472
  326. package/js/rte/src/rte.js +71 -71
  327. package/js/rte/src/ui/items/ai.js +166 -167
  328. package/js/rte/src/ui/items/code.js +93 -93
  329. package/js/rte/src/ui/items/undo.js +183 -183
  330. package/js/rte/src/ui.items.js +6 -7
  331. package/js/rte/src/ui.js +268 -268
  332. package/js/rte/src/util/indentHtml.js +21 -15
  333. package/js/serviceWorker/README.md +17 -0
  334. package/js/serviceWorker/serviceWorker.js +84 -0
  335. package/js/serviceWorker/sw.js +221 -0
  336. package/js/shortcut/README.md +6 -6
  337. package/js/shortcut/shortcut.js +53 -89
  338. package/package.json +2 -4
  339. package/theme/brutalist/README.md +10 -0
  340. package/theme/brutalist/theme.css +98 -0
  341. package/theme/elegance/README.md +10 -0
  342. package/theme/elegance/theme.css +120 -0
  343. package/theme/luxury/README.md +10 -0
  344. package/theme/luxury/theme.css +107 -0
  345. package/theme/minimalism/README.md +10 -0
  346. package/theme/minimalism/theme.css +103 -0
  347. package/theme/natur/README.md +10 -0
  348. package/theme/natur/theme.css +101 -0
  349. package/theme/pastell/README.md +10 -0
  350. package/theme/pastell/theme.css +99 -0
  351. package/theme/pop/README.md +10 -0
  352. package/theme/pop/theme.css +101 -0
  353. package/theme/prompt.css +175 -0
  354. package/theme/retro/README.md +10 -0
  355. package/theme/retro/theme.css +99 -0
  356. package/theme/soft/README.md +10 -0
  357. package/theme/soft/theme.css +84 -0
  358. package/theme/tech/README.md +10 -0
  359. package/theme/tech/theme.css +98 -0
  360. package/theme/test/README.md +10 -0
  361. package/theme/test/theme.css +109 -0
  362. package/theme/test.html +284 -0
  363. package/theme/tmp/README.md +10 -0
  364. package/theme/tmp/theme.css +323 -0
  365. package/u2/auto.js +156 -161
  366. package/u2/auto.ui.js +82 -85
  367. package/u2/plan-scoped-refactoring.md +236 -0
  368. package/u2/projects.json +757 -467
  369. package/u2/tools/baseElement.js +217 -95
  370. package/u2/tools/baseElement.test.html +139 -119
  371. package/u2/tools/ce-inspector.js +307 -307
  372. package/u2/tools/ce-inspector.test.html +67 -65
  373. package/u2/tools/ce-manfest-from-element.js +207 -207
  374. package/u2/tools/dev-iframe.js +212 -213
  375. package/u2/tools/dev-iframe.test.html +72 -74
  376. package/u2/tools/eventsExplorer.js +102 -101
  377. package/u2/tools/logo/u1.svg +9 -9
  378. package/u2/tools/promiseElementById.js +14 -0
  379. package/u2/tools/update.repos.json.js +259 -234
  380. package/u2/tools/update.skill.js +176 -0
  381. package/u2/tools/variable-styler.js +317 -0
  382. package/u2/u2.js +30 -14
  383. package/u2/utils.js +61 -59
  384. package/.htaccess +0 -7
  385. package/attr/behavior/tests/minimal.html +0 -19
  386. package/attr/behavior/tests/test.html +0 -98
  387. package/attr/confirm/tests/minimal.html +0 -23
  388. package/attr/confirm/tests/test.html +0 -79
  389. package/attr/draghandle/tests/minimal.html +0 -44
  390. package/attr/focusgroup/tests/minimal.html +0 -27
  391. package/attr/focusgroup/tests/test.html +0 -154
  392. package/attr/href/tests/minimal.html +0 -17
  393. package/attr/href/tests/test.html +0 -70
  394. package/attr/intersect/tests/minimal.html +0 -30
  395. package/attr/intersect/tests/test.html +0 -64
  396. package/attr/navigable/tests/U1TargetObserver.html +0 -56
  397. package/attr/navigable/tests/minimal.html +0 -17
  398. package/attr/navigable/tests/targetObserver.html +0 -106
  399. package/attr/navigable/tests/test.html +0 -84
  400. package/attr/parallax/tests/minimal.html +0 -25
  401. package/attr/parallax/tests/performance.html +0 -102
  402. package/attr/parallax/tests/test.html +0 -108
  403. package/attr/skin/tests/minimal.html +0 -34
  404. package/attr/skin/tests/test.html +0 -96
  405. package/class/badge/tests/minimal.html +0 -17
  406. package/class/badge/tests/test.html +0 -112
  407. package/class/card1/README.md +0 -45
  408. package/class/card1/card1.css +0 -30
  409. package/class/card1/tests/minimal.html +0 -33
  410. package/class/card1/tests/test.html +0 -78
  411. package/class/flex/tests/minimal.html +0 -31
  412. package/class/flex/tests/test.html +0 -58
  413. package/class/grid/tests/minimal.html +0 -34
  414. package/class/grid/tests/test.html +0 -78
  415. package/class/input/README.md +0 -49
  416. package/class/input/input.css +0 -33
  417. package/class/input/tests/minimal.html +0 -39
  418. package/class/input/tests/test.html +0 -29
  419. package/class/reset/tests/minimal.html +0 -23
  420. package/class/table/tests/minimal.html +0 -40
  421. package/class/table/tests/test.html +0 -226
  422. package/class/unstyle/tests/minimal.html +0 -22
  423. package/class/unstyle/tests/test.html +0 -32
  424. package/class/width/tests/minimal.html +0 -27
  425. package/class/width/tests/test.html +0 -101
  426. package/css/base/tests/nomotion.html +0 -89
  427. package/css/base/tests/test.html +0 -539
  428. package/css/classes/tests/test.html +0 -63
  429. package/css/classless/snippeds/experiments/conventions.css +0 -41
  430. package/css/classless/tests/aria.html +0 -101
  431. package/css/classless/tests/foreign/classless-almond.css.html +0 -445
  432. package/css/classless/tests/foreign/classless-classless.css.html +0 -831
  433. package/css/classless/tests/foreign/classless-mvp.html +0 -415
  434. package/css/classless/tests/foreign/classless.sakura.html +0 -224
  435. package/css/classless/tests/foreign/stylestage.dev.html +0 -304
  436. package/css/classless/tests/foreign/test-homogenizer.html +0 -433
  437. package/css/classless/tests/foreign/test-html5-elements-tester.html +0 -956
  438. package/css/classless/tests/foreign/test-opinionated_css.html +0 -148
  439. package/css/classless/tests/list-bullet.html +0 -110
  440. package/css/classless/tests/more.html +0 -246
  441. package/css/classless/tests/oklch.experiments.html +0 -280
  442. package/css/classless/tests/test.html +0 -106
  443. package/css/classless/tests/variables.html +0 -109
  444. package/css/norm/tests/test.html +0 -434
  445. package/css/norm/tests/test.js +0 -103
  446. package/el/accordion/tests/minimal.html +0 -44
  447. package/el/accordion/tests/test.html +0 -168
  448. package/el/alert/alert copy.js +0 -224
  449. package/el/alert/tests/minimal.html +0 -36
  450. package/el/alert/tests/test.html +0 -105
  451. package/el/buttongroup/tests/minimal.html +0 -31
  452. package/el/buttongroup/tests/test.html +0 -83
  453. package/el/bytes/tests/minimal.html +0 -19
  454. package/el/bytes/tests/test.html +0 -117
  455. package/el/carousel/tests/experiments.html +0 -77
  456. package/el/carousel/tests/minimal.html +0 -31
  457. package/el/carousel/tests/nested.html +0 -54
  458. package/el/carousel/tests/test.html +0 -136
  459. package/el/carousel-nav/tests/minimal.html +0 -32
  460. package/el/carousel-nav/tests/test.html +0 -59
  461. package/el/code/tests/minimal.html +0 -35
  462. package/el/code/tests/test.html +0 -162
  463. package/el/copy/tests/minimal.html +0 -21
  464. package/el/copy/tests/test.html +0 -75
  465. package/el/counter/tests/minimal.html +0 -27
  466. package/el/counter/tests/test.html +0 -106
  467. package/el/ico/tests/combinations.html +0 -86
  468. package/el/ico/tests/emojis.html +0 -213
  469. package/el/ico/tests/fonts.html +0 -110
  470. package/el/ico/tests/ico-directory.html +0 -254
  471. package/el/ico/tests/minimal.html +0 -46
  472. package/el/ico/tests/test.html +0 -210
  473. package/el/ico/tests/util-multi.svg +0 -6
  474. package/el/ico/tests/util.css +0 -2
  475. package/el/ico/tests/util.js +0 -110
  476. package/el/input/tests/formParticipation.html +0 -113
  477. package/el/input/tests/minimal.html +0 -33
  478. package/el/input/tests/test.html +0 -258
  479. package/el/masonry/tests/minimal.html +0 -39
  480. package/el/masonry/tests/test.html +0 -42
  481. package/el/number/tests/minimal.html +0 -25
  482. package/el/number/tests/test.html +0 -138
  483. package/el/out/tests/minimal.html +0 -25
  484. package/el/out/tests/test.html +0 -37
  485. package/el/parallax-bg/tests/bg.jpg +0 -0
  486. package/el/parallax-bg/tests/bg1.jpg +0 -0
  487. package/el/parallax-bg/tests/bg2.jpg +0 -0
  488. package/el/parallax-bg/tests/demo.html +0 -88
  489. package/el/parallax-bg/tests/minimal.html +0 -30
  490. package/el/parallax-bg/tests/test.html +0 -64
  491. package/el/parallax-bg/tests/visible.html +0 -90
  492. package/el/qrcode/tests/minimal.html +0 -26
  493. package/el/qrcode/tests/test.html +0 -31
  494. package/el/rating/tests/minimal.html +0 -26
  495. package/el/rating/tests/tests.html +0 -77
  496. package/el/rte/tests/minimal.html +0 -25
  497. package/el/rte/tests/test.html +0 -37
  498. package/el/skeleton/tests/minimal.html +0 -22
  499. package/el/skeleton/tests/test.html +0 -22
  500. package/el/splitbutton/README.md +0 -39
  501. package/el/splitbutton/splitbutton.js +0 -26
  502. package/el/splitbutton/tests/minimal.html +0 -30
  503. package/el/splitbutton/tests/test.html +0 -68
  504. package/el/splitpanel/tests/minimal.html +0 -31
  505. package/el/splitpanel/tests/tests.html +0 -121
  506. package/el/table/tests/minimal.html +0 -38
  507. package/el/table/tests/test.html +0 -108
  508. package/el/tabs/tests/minimal.html +0 -35
  509. package/el/tabs/tests/test.html +0 -180
  510. package/el/textfit/tests/minimal.html +0 -25
  511. package/el/textfit/tests/test.html +0 -26
  512. package/el/time/tests/minimal.html +0 -19
  513. package/el/time/tests/test.html +0 -160
  514. package/el/time/time copy.js +0 -141
  515. package/el/time/time.old.uhtml.js +0 -129
  516. package/el/tooltip/tests/minimal.html +0 -25
  517. package/el/tooltip/tests/test.html +0 -178
  518. package/el/tree1/README.md +0 -111
  519. package/el/tree1/manifest.json +0 -78
  520. package/el/tree1/tests/animated.html +0 -134
  521. package/el/tree1/tests/custom.html +0 -51
  522. package/el/tree1/tests/minimal.html +0 -44
  523. package/el/tree1/tests/test.html +0 -260
  524. package/el/tree1/tree1.css +0 -26
  525. package/el/tree1/tree1.js +0 -265
  526. package/el/typewriter/tests/minimal.html +0 -25
  527. package/el/typewriter/tests/test.html +0 -78
  528. package/js/Placer/tests/minimal.html +0 -34
  529. package/js/Placer/tests/test.html +0 -49
  530. package/js/PointerObserver/tests/minimal.html +0 -29
  531. package/js/PointerObserver/tests/test.html +0 -35
  532. package/js/SelectorObserver/tests/minimal.html +0 -21
  533. package/js/SelectorObserver/tests/test.html +0 -57
  534. package/js/SelectorObserver/tests/tests.html +0 -161
  535. package/js/contextmenu/tests/minimal.html +0 -44
  536. package/js/contextmenu/tests/test.html +0 -131
  537. package/js/dialog/tests/minimal.html +0 -29
  538. package/js/dialog/tests/notification.mp3 +0 -0
  539. package/js/dialog/tests/test.html +0 -135
  540. package/js/rte/tests/ai.html +0 -81
  541. package/js/rte/tests/behavior.html +0 -88
  542. package/js/rte/tests/events.html +0 -69
  543. package/js/rte/tests/fixes.html +0 -95
  544. package/js/rte/tests/minimal.html +0 -34
  545. package/js/rte/tests/notes.md +0 -6
  546. package/js/rte/tests/range.html +0 -167
  547. package/js/rte/tests/selection-explorer.html +0 -222
  548. package/js/rte/tests/test.html +0 -92
  549. package/js/shortcut/tests/minimal.html +0 -23
  550. package/js/shortcut/tests/test.html +0 -68
  551. package/u2/experiments/Waiter/test.html +0 -132
  552. package/u2/experiments/getElementByIdPromise/test.html +0 -76
  553. package/u2/experiments/patchInputValue.html +0 -124
  554. package/u2/experiments/radiobutton/test.html +0 -75
  555. package/u2/experiments/tests/test.html +0 -223
  556. package/u2/experiments/u1-responsive/responsive.js +0 -62
  557. package/u2/experiments/u1-responsive/test.html +0 -65
  558. package/u2/experiments/u2Element.js +0 -139
  559. package/u2/experiments/u2Element.test.html +0 -47
  560. package/u2/old-stuff/IterableWeakMap/mod.js +0 -70
  561. package/u2/old-stuff/css/onStyleSheet/mod.js +0 -114
  562. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +0 -28
  563. package/u2/old-stuff/css/onStyleSheet/test/include.css +0 -19
  564. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +0 -6
  565. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +0 -3
  566. package/u2/old-stuff/css/onStyleSheet/test/test.html +0 -48
  567. package/u2/old-stuff/css/parser/mod.js +0 -182
  568. package/u2/old-stuff/css/parser/parser_old/mod.js +0 -128
  569. package/u2/old-stuff/css/parser/parser_old/test.html +0 -43
  570. package/u2/old-stuff/css/parser/parser_old/util.js +0 -22
  571. package/u2/old-stuff/css/parser/style.html +0 -52
  572. package/u2/old-stuff/css/parser/test.html +0 -38
  573. package/u2/old-stuff/el/ai-texter/README.md +0 -23
  574. package/u2/old-stuff/el/ai-texter/ai-texter.css +0 -12
  575. package/u2/old-stuff/el/ai-texter/ai-texter.js +0 -153
  576. package/u2/old-stuff/el/ai-texter/tests/minimal.html +0 -47
  577. package/u2/old-stuff/el/ai-texter/tests/test.html +0 -71
  578. package/u2/old-stuff/init.js +0 -38
  579. package/u2/old-stuff/markHashLinks.js +0 -51
  580. package/u2/old-stuff/onElement/mod.js +0 -73
  581. package/u2/old-stuff/test-helpers/mod.js +0 -36
  582. package/u2/old-stuff/test-helpers/test.html +0 -4
  583. package/u2/old-stuff/tests/init.js.html +0 -51
  584. package/u2/old-stuff/viewport.js +0 -64
  585. package/u2/tests/boilerplate.html +0 -46
  586. package/u2/tests/kacheln.html +0 -245
  587. package/u2/tests/showcase.html +0 -270
  588. package/u2/tests/showcase2.html +0 -157
  589. package/u2/tests/test-init.js +0 -35
  590. package/u2/tests/test.html +0 -355
  591. package/u2/tools/logo/u1ui.svg +0 -6
@@ -1,168 +0,0 @@
1
- <!DOCTYPE HTML>
2
- <html lang=en>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name=viewport content="width=device-width">
6
-
7
- <link rel=stylesheet href="../../../css/classless/full.css">
8
- <!--link rel=stylesheet href="../../../css/classless/aria.css"-->
9
- <link rel=stylesheet href="../../../css/classless/simple.css">
10
-
11
-
12
- <link rel=stylesheet href="../accordion.css">
13
- <script src="../accordion.js" type=module async></script>
14
-
15
- <script type=module async src=../../../attr/navigable/navigable.js crossorigin></script>
16
-
17
- </head>
18
-
19
- <body>
20
-
21
- <header>
22
- <h1>u2-accordion tests</h1>
23
- As you use the browsers search funktion, you find the contents of the tab-panels. (chrome for now)
24
- </header>
25
-
26
- <section>
27
- <h2>Simple</h2>
28
- <u2-accordion>
29
- Content bevore first heading
30
- <h2>H2 as Tab</h2>
31
- Heading Elements (h1-h6) are automatically used as accordion
32
- <h3>H3 creates no new Panel, its always the highest heading level</h3>
33
- <p>A Paragraph</p>
34
- <h2>H2 as Tab</h2>
35
- Heading Elements (h1-h6) are automatically used as accordion
36
- <h2>Title 3, its a very long title to test the wrapping of the title text</h2>
37
- content panel 3 <span>test</span>
38
- <p>A Paragraph</p>
39
- </u2-accordion>
40
- </section>
41
-
42
- <section>
43
- <h2>Tablist browser-navigable accordion (beta)</h2>
44
- <u2-accordion>
45
- <h2 u2-navigable id="nav1">H2 as Tab</h2>
46
- Heading Elements (h1-h6) are automatically used as accordion
47
- If you like to use other Elements as accordion, you have to add the attribute <code>slot="title"</code
48
- <h2 u2-navigable id="nav3">Title 3</h2>
49
- content panel 3
50
- </u2-accordion>
51
- </section>
52
-
53
- <section>
54
- <h2>Nested</h2>
55
- <u2-accordion>
56
- <h2>Title 1</h2>
57
-
58
- <u2-accordion>
59
- <h3>Item 1.1</h3>
60
- Item 1 content
61
- <h3>Item 1.2</h3>
62
- Item 2 content
63
- <h3>Item 1.3</h3>
64
- Item 3 content
65
- <h3>Item 1.4</h3>
66
- Item 1 content
67
- </u2-accordion>
68
-
69
- <h2>Title 2</h2>
70
- content panel 2
71
- </u2-accordion>
72
- </section>
73
-
74
- <section>
75
- <h2>Single</h2>
76
- <u2-accordion single>
77
- <h2>Title 1</h2>
78
- content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>
79
- content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>
80
- <h2>Title 2</h2>
81
- content panel 2
82
- <h2>Title 3</h2>
83
- content panel 3
84
- <h2>Title</h2>
85
- content panel 1
86
- </u2-accordion>
87
- </section>
88
-
89
-
90
- <section>
91
- <h2>Compare with details</h2>
92
- <details name="details1">
93
- <summary>Details 1</summary>
94
- <div>
95
- <details name="details2">
96
- <summary>Details 1.1</summary>
97
- <p>Details 1.1 content</p>
98
- </details>
99
- <details name="details2">
100
- <summary>Details 1.1</summary>
101
- <p>Details 1.1 content</p>
102
- </details>
103
- </div>
104
- </details>
105
- <details name="details1">
106
- <summary>Details 2</summary>
107
- Details 2 content
108
- </details>
109
- </section>
110
-
111
- <style>
112
- #styled u2-accordion {
113
- border-radius: .5rem;
114
- padding:.5rem;
115
- border:1px solid;
116
- box-shadow:var(--shadow);
117
- background:#fff;
118
- }
119
- #styled u2-accordion::part(title) {
120
- background:var(--color);
121
- border-radius: .3rem;
122
- color: white;
123
- }
124
- #styled u2-accordion::part(panels) {
125
- background:#eee8;
126
- }
127
- #styled u2-accordion [role="tab"] {
128
- padding:.5rem 1rem;
129
- }
130
- #styled u2-accordion [role="tab"][aria-selected="true"] {
131
- border-bottom-color: transparent;
132
- background:#0003;
133
- }
134
- #styled u2-accordion [role="tab"]:focus {
135
- border-bottom-color: transparent;
136
- background:#0005;
137
- }
138
- #styled [role=tabpanel] {
139
- transition:.6s;
140
- }
141
- </style>
142
-
143
- <section id=styled>
144
- <h2>Nested, styled</h2>
145
- <u2-accordion>
146
- <h2>Title 1</h2>
147
-
148
- <div>
149
- <u2-accordion>
150
- <h3>Item 1.1</h3>
151
- <section>Item 1 content</section>
152
- <h3>Item 1.2</h3>
153
- <section>Item 2 content</section>
154
- <h3>Item 1.3</h3>
155
- <section>Item 3 content</section>
156
- <h3>Item 1.4</h3>
157
- <section>Item 1 content</section>
158
- </u2-accordion>
159
- </div>
160
-
161
- <h2>Title 2</h2>
162
- <section>content panel 2</section>
163
- <h2>Title 3</h2>
164
- <section>content panel 3</section>
165
- <h2>Title</h2>
166
- <section>content panel 1</section>
167
- </u2-accordion>
168
- </section>
@@ -1,224 +0,0 @@
1
-
2
- const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
3
-
4
- const style = `
5
- @import url('${icoCssUrl}');
6
- :host:not([dismissable])::part(close) { display:none; } /* TODO: does not work in chrome */
7
- :host(:not([dismissable]))::part(close) { display:none; } /* TODO: does not work in chrome */
8
- :host {
9
- --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
10
- }
11
- #container {
12
- display:flex;
13
- flex-direction: row-reverse;
14
- flex-wrap:wrap;
15
- gap: 0 1em;
16
- }
17
- #body {
18
- display:flex;
19
- align-items: center;
20
- flex: 1 1 20rem;
21
- flex-wrap: wrap;
22
- gap: 1em;
23
- }
24
- #close {
25
- flex: 0 0 auto;
26
- padding: 0;
27
- border: 0;
28
- background: none;
29
- font-size: 1.5em;
30
- cursor: pointer;
31
- line-height: 1;
32
- }
33
- #content {
34
- flex:1 1 15em;
35
- }
36
- slot {
37
- display:block;
38
- }
39
- slot[name=icon] {
40
- font-size:1.7em;
41
- color:var(--color);
42
- &::slotted(*), & > u2-ico {
43
- display:block;
44
- font-size:inherit;
45
- }
46
- }
47
- slot[name=action] {
48
- display: flex;
49
- justify-content: end;
50
- flex-wrap: wrap;
51
- gap: .5em;
52
- flex: 0 1 auto;
53
- margin-inline-start: auto;
54
- }
55
- /* slot[name=action]:empty-slot { display:none; } not possible */`;
56
-
57
-
58
- class alert extends HTMLElement {
59
- constructor() {
60
- super();
61
-
62
- import('../../attr/focusgroup/focusgroup.js');
63
- import('../ico/ico.js');
64
-
65
- this.attachShadow({mode: 'open'});
66
- this.shadowRoot.innerHTML = `
67
- <style>${style}</style>
68
- <div id=container>
69
- <button id=close part=close aria-label=close>
70
- <svg viewBox="0 0 15 15" style="display:block;width:.7em" aria-hidden="true"><path d="M1.5 1.5l12 12m-12 0l12-12" stroke="currentColor"></path></svg>
71
- </button>
72
- <div id=body>
73
- <slot name=icon part=icon></slot>
74
- <slot id=content></slot>
75
- <slot name=action u2-focusgroup></slot>
76
- </div>
77
- </div>
78
- `;
79
- }
80
- connectedCallback() {
81
- // const variant = this.getAttribute('variant');
82
- // const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
83
- // this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
84
- // this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
85
- this.shadowRoot.querySelector('#close').onclick = () => this.hide();
86
- }
87
- static observedAttributes = ['icon', 'variant'];
88
- attributeChangedCallback(name, oldValue, newValue) {
89
- if (oldValue === newValue) return;
90
- if (name==='variant') {
91
- const variant = this.getAttribute('variant');
92
- this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
93
- }
94
- if (name==='variant' || name==='icon') {
95
- const variant = this.getAttribute('variant');
96
- const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
97
- this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
98
- }
99
- }
100
-
101
- // show() { // todo
102
- // this.setAttribute('open', '');
103
- // this.setAttribute('aria-live', 'assertive');
104
- // getToolsContainer().appendChild(this);
105
-
106
- // // autohide and role=alertdialog if no actions
107
- // const hasActions = this.querySelector('[slot=action]')?.assignedElements().length > 0;
108
- // if (hasActions) {
109
- // this.setAttribute('role', 'alertdialog');
110
- // } else {
111
- // clearTimeout(this.hideTimeout);
112
- // this.hideTimeout = setTimeout(() => this.hide(), 5000);
113
- // }
114
- // return new Promise((resolve) => {
115
- // this.resolve = resolve;
116
- // });
117
- // }
118
- hide() {
119
- this.removeAttribute('open');
120
- this.resolve?.();
121
- }
122
- }
123
-
124
- const variant2Icon = {info:'info',success:'check',warn:'warning',error:'error'};
125
- const variantData = {
126
- info: {
127
- icon: 'info',
128
- role: 'status',
129
- },
130
- success: {
131
- icon: 'check',
132
- role: 'status',
133
- },
134
- warn: {
135
- icon: 'warning',
136
- role: 'alert',
137
- },
138
- error: {
139
- icon: 'error',
140
- role: 'alert',
141
- }
142
- };
143
-
144
- customElements.define('u2-alert', alert);
145
-
146
- /*
147
- alert = function(message, type, options) {
148
- const el = document.createElement('u2-alert');
149
- el.textContent = message;
150
- options.icon && el.setAttribute('icon', options.icon);
151
- el.setAttribute('type', type??'info');
152
- return el.show();
153
- }
154
- export info = (message, options) => alert(message, 'info', options);
155
- export success = (message, options) => alert(message, 'success', options);
156
- export warn = (message, options) => alert(message, 'warn', options);
157
- export error = (message, options) => alert(message, 'error', options);
158
- */
159
-
160
-
161
-
162
- /*
163
- function getToolsContainer() {
164
- const el = document.getElementById('u2-notification-stack');
165
- if (el) return el;
166
- const div = document.createElement('div');
167
- div.id = 'u2-notification-stack';
168
- document.body.appendChild(div);
169
- return div;
170
- }
171
- */
172
-
173
-
174
- // class Waiter {
175
- // constructor(callback, duration) {
176
- // this.callback = callback;
177
- // this.duration = duration;
178
- // this.startTime = null;
179
- // this.timerId = null;
180
- // this.onProgress = null;
181
- // this.pauseTime = false; // Zeitpunkt, zu dem die Pause gestartet wurde
182
- // this.remaining = duration; // Verbleibende Zeit bis zum Ablauf des Timers
183
- // }
184
- // start() {
185
- // this.pauseTime = null;
186
- // this.startTime = Date.now();
187
- // this._startTimer();
188
- // return new Promise((resolve) => {
189
- // this.resolve = resolve;
190
- // });
191
- // }
192
- // pause() {
193
- // if (this.pauseTime) return;
194
- // clearTimeout(this.timerId);
195
- // this.pauseTime = Date.now();
196
- // this.remaining -= this.pauseTime - this.startTime; // Aktualisiere die verbleibende Zeit
197
- // }
198
- // _startTimer() {
199
- // this.timerId = setTimeout(() => {
200
- // this.callback?.();
201
- // this._clear();
202
- // }, this.remaining);
203
- // if (this.onProgress) this._emitProgress();
204
- // }
205
- // _emitProgress() {
206
- // const interval = 100; // Wie oft der Fortschritt aktualisiert wird (in ms)
207
- // const intervalId = setInterval(() => {
208
- // const now = Date.now();
209
- // const passed = now - this.startTime;
210
- // const left = this.duration - passed;
211
- // const progress = Math.min((passed / this.duration), 1);
212
- // this.onProgress({ left, passed, progress });
213
- // if (passed >= this.duration) clearInterval(intervalId);
214
- // }, interval);
215
- // }
216
- // _clear() {
217
- // clearTimeout(this.timerId);
218
- // this.resolve();
219
- // this.startTime = null;
220
- // this.timerId = null;
221
- // this.pauseTime = false;
222
- // this.remaining = this.duration; // Zurücksetzen der verbleibenden Zeit
223
- // }
224
- // }
@@ -1,36 +0,0 @@
1
- <!DOCTYPE HTML>
2
- <html lang=en>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name=viewport content="width=device-width">
6
- <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
7
-
8
- <link rel=stylesheet href="../../../css/classless/full.css">
9
- <link rel=stylesheet href="../../../css/classless/simple.css">
10
-
11
- <script src="../alert.js" type=module async></script>
12
- <link rel=stylesheet href="../alert.css">
13
-
14
- <body>
15
-
16
- <section class=main>
17
-
18
- <u2-alert open variant="" dismissable icon="bug_report">
19
- This is a dismissable alert with an custom icon.
20
- <button slot=action>OK</button>
21
- </u2-alert>
22
-
23
- </section>
24
-
25
-
26
- <style class=main>
27
- u2-alert {
28
- border-width: 0 0 0 3px;
29
- }
30
- u2-alert::part(close) {
31
- opacity:0.3;
32
- }
33
- u2-alert::part(icon) {
34
- font-size:2em;
35
- }
36
- </style>
@@ -1,105 +0,0 @@
1
- <!DOCTYPE HTML>
2
- <html lang=en>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name=viewport content="width=device-width">
6
- <script src="../../../u2/tests/test-init.js" type=module async></script>
7
- <!-- <script src="../../u2/auto.js" type=module async></script> -->
8
- <title>Test</title>
9
-
10
- <link rel=stylesheet href="../../../css/classless/full.css">
11
- <link rel=stylesheet href="../../../css/classless/simple.css">
12
-
13
- <link href="../../../el/code/code.css" rel=stylesheet>
14
- <script src="../../../el/code/code.js" type=module async></script>
15
-
16
-
17
-
18
- <!--script src="../../../el/tooltip/tooltip.js" type=module async></script>
19
- <link href="../../../el/tooltip/tooltip.css" rel=stylesheet>
20
- <script src="../../../el/ico/ico.js" type=module async></script>
21
- <link href="../../../el/ico/ico.css" rel=stylesheet> -->
22
-
23
- <style>
24
- body {
25
- place-content: initial;
26
- }
27
- </style>
28
-
29
- <link href="../alert.css" rel=stylesheet>
30
- <script src="../alert.js" type=module async></script>
31
-
32
- <body>
33
-
34
- <section>
35
-
36
- <h2>[variant]</h2>
37
- <u2-alert open>This is an alert without a variant</u2-alert>
38
- <u2-alert open variant="success">This is a "success" alert</u2-alert>
39
- <u2-alert open variant="warn">This is a "warn" alert</u2-alert>
40
- <u2-alert open variant="error">This is an "error" alert</u2-alert>
41
- <u2-alert open variant="info">This is an "info" alert</u2-alert>
42
-
43
- <h2>[dismissable]</h2>
44
- <u2-alert open dismissable variant=success>This is a dismissable success alert</u2-alert>
45
-
46
- <h2>[icon]</h2>
47
- <u2-alert open icon="home">This is a success alert with an icon (home)</u2-alert>
48
-
49
- <h2>buttons</h2>
50
- <u2-alert open dismissable>
51
- This is a dismissable alert with no icon
52
- <button slot=action>OK</button>
53
- <button slot=action>Cancel</button>
54
- </u2-alert>
55
-
56
- <h2>Toast</h2>
57
- Show an existing alert as a toast:
58
- <button onclick="toastDemo.toast()">Show as Toast</button>
59
- <u2-alert dismissable variant=error id="toastDemo">
60
- This is a Toast error alert
61
- <button slot=action>OK</button>
62
- </u2-alert>
63
-
64
- <button onclick="u2Toast.info('This is an info toast')">Show info toast</button>
65
- <button onclick="u2Toast.success('This is a success toast')">Show success toast</button>
66
- <script type=module>
67
- import * as toast from '../alert.js';
68
- window.u2Toast = toast;
69
- </script>
70
-
71
-
72
- <u2-code trim editable>
73
- <style>
74
- u2-alert {
75
- border-width: 0 0 0 3px;
76
- background: color-mix(in srgb, var(--color), #fff 90%);
77
- box-shadow: none;
78
- }
79
- u2-alert::part(close) {
80
- opacity:0.3;
81
- border-left: 1px solid #0002;
82
- &:hover {
83
- opacity:1;
84
- }
85
- }
86
- u2-alert::part(icon) {
87
- font-size:2em;
88
- opacity:.7;
89
- }
90
- </style>
91
- </u2-code>
92
-
93
- <h2>Playground (everything)</h2>
94
-
95
- <div id=play>
96
- <u2-alert open variant="info" dismissable icon="home">
97
- This is a dismissable success alert with an icon, and a lot of text to make it wrap. More text to make it wrap and just more and more
98
- <button slot=action>OK</button>
99
- <button slot=action>Cancel</button>
100
- </u2-alert>
101
- </div>
102
-
103
- <u2-code trim editable element="play"> </u2-code>
104
-
105
- </section>
@@ -1,31 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang=en>
3
- <head>
4
- <meta charset=utf-8>
5
- <meta name=viewport content="width=device-width">
6
- <title>test</title>
7
- <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
8
-
9
- <link rel=stylesheet href="../../../css/classless/full.css">
10
- <link rel=stylesheet href="../../../css/classless/simple.css">
11
-
12
- <link rel=stylesheet href="../buttongroup.css">
13
- <xscript src="../buttongroup.js" type=module async></script>
14
-
15
- <body>
16
-
17
- <section class="main">
18
-
19
- <u2-buttongroup>
20
- <button type=button>Button</button>
21
- <button type=button>Group</button>
22
- <button type=button>Demo</button>
23
- </u2-buttongroup>
24
-
25
- </section>
26
-
27
- <style>
28
- u2-buttongroup:focus-within {
29
- border-color: green;
30
- }
31
- </style>
@@ -1,83 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang=en>
3
- <head>
4
- <meta charset=utf-8>
5
- <meta name=viewport content="width=device-width">
6
- <title>test</title>
7
- <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
8
- <script src="../../../u2/auto.js" type=module async></script>
9
- <link href="../../../css/classless/full.css" rel=stylesheet>
10
- <link href="../../../css/classless/simple.css" rel=stylesheet>
11
-
12
- <style>
13
- body {
14
- --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
15
- }
16
- label {
17
- display:block;
18
- margin-block:1rem;
19
- }
20
- </style>
21
-
22
- <link href="../buttongroup.css" rel=stylesheet>
23
- <script src="../buttongroup.js" type=module async></script>
24
-
25
- <body>
26
-
27
- <section style="background:var(--color-light, #eee)">
28
-
29
- <u2-buttongroup>
30
- <button type=button>Button</button>
31
- <button type=button>Group</button>
32
- <button type=button>Component</button>
33
- </u2-buttongroup>
34
-
35
- <h3>Too mutch</h3>
36
- <u2-buttongroup style="justify-content: center; display:flex;">
37
- <button type=button>Button 1</button>
38
- <button type=button>Button 2</button>
39
- <button type=button>Button 3</button>
40
- <button type=button>Button 4</button>
41
- <button type=button>Button 5</button>
42
- <button type=button>Button 6</button>
43
- <button type=button>Button 7</button>
44
- <button type=button>Button 8</button>
45
- <button type=button>Button 9</button>
46
- <button type=button>Button 10</button>
47
- <button type=button>Button 11</button>
48
- <button type=button>Button 12</button>
49
- </u2-buttongroup>
50
-
51
- <h3>Expamles</h3>
52
- <label>Stepper
53
- <u2-buttongroup>
54
- <button type=button style="padding-inline:.2em">
55
- <u2-ico inline>add</u2-ico>
56
- </button>
57
- <input type=number value=0 style="width:3em; text-align:center; border-left:0; appearance: textfield; border:0;">
58
- <button type=button style="padding-inline:.2em">
59
- <u2-ico inline>remove</u2-ico>
60
- </button>
61
- </u2-buttongroup>
62
- </label>
63
-
64
- <u2-buttongroup>
65
- <button type=button>update</button>
66
- <u2-splitbutton>
67
- <button type=button style="padding-inline:.2em">
68
- <u2-ico inline>more_vert</u2-ico>
69
- </button>
70
- <menu>
71
- <li><button>update all</button>
72
- <li><button>update selected</button>
73
- </menu>
74
- </u2-splitbutton>
75
- </u2-buttongroup>
76
-
77
-
78
-
79
- </section>
80
-
81
- <style>
82
-
83
- </style>
@@ -1,19 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang=en>
3
- <head>
4
- <meta charset=utf-8>
5
- <meta name=viewport content="width=device-width">
6
- <script src="../../../u2/tests/test-init.js" type=module async></script>
7
-
8
- <link rel=stylesheet href="../../../css/classless/full.css">
9
- <link rel=stylesheet href="../../../css/classless/aria.css">
10
- <link rel=stylesheet href="../../../css/classless/simple.css">
11
-
12
- <script src="../bytes.js" type=module async></script>
13
- <link href="../bytes.css" rel=stylesheet>
14
-
15
- <body>
16
-
17
- <section class="main">
18
- <u2-bytes>89887987</u2-bytes>
19
- </section>