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
package/el/time/tests/test.html DELETED
@@ -1,160 +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
-
10
- <link rel=stylesheet href="../../../css/classless/full.css">
11
- <link rel=stylesheet href="../../../css/classless/aria.css">
12
- <link rel=stylesheet href="../../../css/classless/simple.css">
13
-
14
-
15
- <script src="../time.js" type=module async></script>
16
- <!--link rel=stylesheet href="./tabs.css"-->
17
-
18
- <body>
19
-
20
- <h3>Set datetime attribute</h3>
21
- <section lang=de>
22
- Zurückgestellt: <u2-time datetime="" id=testSet></u2-time><br>
23
- <button onclick="testSet.setAttribute('datetime', Date.now());">reset</button>
24
- <script>
25
- testSet.setAttribute('datetime', Date.now());
26
- </script>
27
-
28
- <form onchange="Array.from(this.elements).forEach(e=>testSet.setAttribute(e.name, e.value))">
29
- <label>
30
- datetime
31
- <select name=datetime>
32
- <option value="2031-10-10T14:48:50">2031-10-10T14:48:50
33
- <option value="1999-11-10T11:38:10">1999-11-10T11:38:10
34
- </select>
35
- </label>
36
- <label>
37
- lang
38
- <select name=lang>
39
- <option value="de">de
40
- <option value="en">en
41
- <option value="es">es
42
- <option value="it">it
43
- <option value="fr">fr
44
- </select>
45
- </label>
46
- <label>
47
- type
48
- <select name=type>
49
- <option value="relative">relative (default)
50
- <option value="date">date
51
- </select>
52
- </label>
53
- <label>
54
- weekday
55
- <select name=weekday>
56
- <option value="short">short (default)
57
- <option value="narrow">narrow
58
- <option value="long">long
59
- <option value="none">none
60
- </select>
61
- </label>
62
- <label>
63
- year
64
- <select name=year>
65
- <option value="numeric">numeric (default)
66
- <option value="2-digit">2-digit
67
- <option value="none">none
68
- </select>
69
- </label>
70
- <label>
71
- month
72
- <select name=month>
73
- <option value="numeric">numeric (default)
74
- <option value="2-digit">2-digit
75
- <option value="narrow">narrow
76
- <option value="short">short
77
- <option value="long">long
78
- <option value="none">none
79
- </select>
80
- </label>
81
- <label>
82
- day
83
- <select name=day>
84
- <option value="numeric">numeric (default)
85
- <option value="2-digit">2-digit
86
- <option value="none">none
87
- </select>
88
- </label>
89
- <label>
90
- hour
91
- <select name=hour>
92
- <option value="none">none (default)
93
- <option value="numeric">numeric
94
- <option value="2-digit">2-digit
95
- </select>
96
- </label>
97
- <label>
98
- minute
99
- <select name=minute>
100
- <option value="none">none (default)
101
- <option value="numeric">numeric
102
- <option value="2-digit">2-digit
103
- </select>
104
- </label>
105
- <label>
106
- second
107
- <select name=second>
108
- <option value="none">none (default)
109
- <option value="numeric">numeric
110
- <option value="2-digit">2-digit
111
- </select>
112
- </label>
113
- <label>
114
- mode
115
- <select name=mode>
116
- <option value="short">short (default)
117
- <option value="narrow">narrow
118
- <option value="long">long
119
- </select>
120
- </label>
121
- </form>
122
- <style>
123
- label {
124
- display:flex;
125
- gap:1rem;
126
- }
127
- </style>
128
- </section>
129
-
130
- <h3>English; type=relative</h3>
131
- <div lang=en>
132
- A cold winter month <u2-time datetime="2011-11" type=relative>many years ago</u2-time>
133
- </div>
134
-
135
- <h3>English from &lt;head&gt; type=relative</h3>
136
- <div>
137
- Google released Gmail Blue <u2-time datetime="2013-04-01" type=relative>on 2013-04-01</u2-time>.
138
- </div>
139
-
140
- <h3>Deutsch, type=relative</h3>
141
- <div lang=de>
142
- Weltuntergang <u2-time datetime="2050-01-01" type=relative>am 2050-01-01</u2-time>.
143
- </div>
144
-
145
-
146
-
147
- <h3>no type and no innerHTML => relative</h3>
148
- <div>
149
- Google released Gmail Blue <u2-time datetime="2013-04-01"></u2-time>.
150
- </div>
151
-
152
- <h3>type=date</h3>
153
- <div>
154
- <u2-time datetime="2013-04-01T18:00" type=date>on 2013-04-01</u2-time>.
155
- </div>
156
-
157
- <h3>type=date weekday=none hour minute month=long</h3>
158
- <div>
159
- <u2-time datetime="2013-04-01T18:00" type=date weekday="none" month=long hour minute></u2-time>.
160
- </div>
package/el/time/time copy.js DELETED
@@ -1,141 +0,0 @@
1
-
2
- class Time extends HTMLElement {
3
- constructor() {
4
- super();
5
- this.attachShadow({mode: 'open'});
6
- this.outEl = this.shadowRoot;
7
- }
8
- connectedCallback() {
9
- this.reset();
10
- }
11
- disconnectedCallback() {
12
- clearInterval(this.__timer);
13
- }
14
- static observedAttributes = ['datetime', 'lang', 'type', 'weekday', 'year', 'month', 'day', 'hour', 'minute', 'second', 'mode'];
15
- attributeChangedCallback(name, old, value) {
16
- if (old === value) return;
17
- this.reset();
18
- }
19
- reset() {
20
- this.__type = this.getAttribute('type') || 'relative';
21
- let show = this.getAttribute('type') || this.innerHTML === '';
22
- if (!show) return;
23
-
24
- let date = this.getAttribute('datetime');
25
- date = date.match(/^-?[0-9.]+$/) ? Number(date) : Date.parse(date);
26
- date = new Date(date);
27
- this.__date = date;
28
-
29
- this.__lang = langFromElement(this) || 'default';
30
- this.render();
31
- }
32
- render() {
33
- let content = '';
34
- let title = '';
35
-
36
- let date = this.__date;
37
-
38
- const valid = !isNaN(date);
39
- if (valid) {
40
- let fn = types[this.__type];
41
- if (!fn) { console.warn('type ' + this.__type + ' is not supported'); return; }
42
- let {show} = fn(this, date);
43
- content = show;
44
- if (this.__type === 'relative') {
45
- title = types['date'](this, date).show;// provide a title-attribute if it is relative
46
- clearInterval(this.__timer);
47
- this.__timer = setTimeout(() => this.render(), 1000); // todo: evaluate exact next tic, challange!
48
- }
49
- }
50
- this.outEl.innerHTML = `<time datetime="${this.getAttribute('datetime')}" title="${title}">${content}<slot hidden="${valid}"/></time>`;
51
- }
52
- }
53
-
54
-
55
- const types = {
56
- relative(el, date) {
57
- const mode = el.getAttribute('mode') || 'long';
58
- const rtf = new Intl.RelativeTimeFormat(el.__lang, {
59
- //localeMatcher: , // 'best fit', 'lookup'
60
- numeric: 'auto', // always, auto
61
- style: mode // long, narrow, short
62
- });
63
- const now = Date.now();
64
- const elapsed = date - now;
65
- const { unit, rounded } = elapsedToUnit(elapsed);
66
- return {
67
- show:rtf.format(rounded, unit),
68
- }
69
- },
70
- date(el, date) {
71
- const defaults = {
72
- weekday: { default: 'short', showAnyway: 1 }, // "narrow", "short", "long".
73
- //era: // "narrow", "short", "long".
74
- year: { default: 'numeric', showAnyway: 1 }, // "numeric", "2-digit".
75
- month: { default: 'short', showAnyway: 1 }, // "numeric", "2-digit", "narrow", "short", "long".
76
- day: { default: 'numeric', showAnyway: 1 }, // "numeric", "2-digit".
77
- hour: { default: 'numeric', showAnyway: 0 }, // "numeric", "2-digit".
78
- minute: { default: 'numeric', showAnyway: 0 }, // "numeric", "2-digit".
79
- second: { default: 'numeric', showAnyway: 0 }, // "numeric", "2-digit".
80
- timeZoneName: { default: 'short', showAnyway: 0 }, // "short", "long".
81
- };
82
- const options = {};
83
- for (let [key, opts] of Object.entries(defaults)) {
84
- const val = el.getAttribute(key);
85
- if (val === null) {
86
- if (opts.showAnyway) options[key] = opts.default;
87
- continue;
88
- }
89
- else if (val === '' || val === 'true') options[key] = opts.default;
90
- else if (val === 'none') options[key] = undefined;
91
- else options[key] = val;
92
- }
93
- if (options.second && !options.minute) options.minute = options.second;
94
- if (options.minute && !options.hour) options.hour = options.minute;
95
-
96
- const formatter = new Intl.DateTimeFormat(el.__lang, options);
97
- // let html = '';
98
- // for (const part of formatter.formatToParts(date)) {
99
- // html += `<span part="${part.type}">${part.value}</span>`;
100
- // }
101
-
102
- return {
103
- //html: formatter.formatToParts(date).map(part => `<span part="${part.type}">${part.value}</span>`).join(''),
104
- show: formatter.format(date),
105
- }
106
- },
107
- }
108
-
109
- function langFromElement(el) {
110
- let langEl = el.closest('[lang]')||document.documentElement;
111
- // todo: for tables i should check col and colgroup
112
- // https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
113
-
114
- // let list = navigator.languages;
115
- // try {
116
- // list = Intl.getCanonicalLocales(lang);
117
- // } catch (e) {}
118
- // Intl.NumberFormat(list).format();
119
- return langEl.lang || navigator.language;
120
- }
121
-
122
- function elapsedToUnit(elapsed, min = 'second') {
123
- for (let unit in units)
124
- if (Math.abs(elapsed) > units[unit] || unit === min) {
125
- return {
126
- unit,
127
- rounded: Math.round(elapsed / units[unit]),
128
- };
129
- }
130
- }
131
- const units = {
132
- year: 24 * 60 * 60 * 1000 * 365,
133
- month: 24 * 60 * 60 * 1000 * 365 / 12,
134
- day: 24 * 60 * 60 * 1000,
135
- hour: 60 * 60 * 1000,
136
- minute: 60 * 1000,
137
- second: 1000
138
- }
139
-
140
-
141
- customElements.define('u2-time', Time);
package/el/time/time.old.uhtml.js DELETED
@@ -1,129 +0,0 @@
1
- import 'https://unpkg.com/uce@1.16.5/new.js';
2
- const { define, html } = customElements.get('uce-lib');
3
-
4
- const types = {
5
- relative(el, date) {
6
- const mode = el.getAttribute('mode') || 'long';
7
- const rtf = new Intl.RelativeTimeFormat(el.__lang, {
8
- //localeMatcher: , // 'best fit', 'lookup'
9
- numeric: 'auto', // always, auto
10
- style: mode // long, narrow, short
11
- });
12
- const now = Date.now();
13
- const elapsed = date - now;
14
- const { unit, rounded } = elapsedToUnit(elapsed);
15
- return {
16
- show:rtf.format(rounded, unit),
17
- }
18
- },
19
- date(el, date) {
20
- const defaults = {
21
- weekday: { default: 'short', showAnyway: 1 }, // "narrow", "short", "long".
22
- //era: // "narrow", "short", "long".
23
- year: { default: 'numeric', showAnyway: 1 }, // "numeric", "2-digit".
24
- month: { default: 'short', showAnyway: 1 }, // "numeric", "2-digit", "narrow", "short", "long".
25
- day: { default: 'numeric', showAnyway: 1 }, // "numeric", "2-digit".
26
- hour: { default: 'numeric', showAnyway: 0 }, // "numeric", "2-digit".
27
- minute: { default: 'numeric', showAnyway: 0 }, // "numeric", "2-digit".
28
- second: { default: 'numeric', showAnyway: 0 }, // "numeric", "2-digit".
29
- timeZoneName: { default: 'short', showAnyway: 0 }, // "short", "long".
30
- };
31
- const options = {};
32
- for (let [key, opts] of Object.entries(defaults)) {
33
- const val = el.getAttribute(key);
34
- if (val === null) {
35
- if (opts.showAnyway) options[key] = opts.default;
36
- continue;
37
- }
38
- else if (val === '' || val === 'true') options[key] = opts.default;
39
- else if (val === 'none') options[key] = undefined;
40
- else options[key] = val;
41
- }
42
- return {
43
- show: new Intl.DateTimeFormat(el.__lang, options).format(date)
44
- }
45
- },
46
- }
47
-
48
- function langFromElement(el) {
49
- let langEl = el.closest('[lang]')||document.documentElement;
50
- // todo: for tables i should check col and colgroup
51
- // https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
52
-
53
- // let list = navigator.languages;
54
- // try {
55
- // list = Intl.getCanonicalLocales(lang);
56
- // } catch (e) {}
57
- // Intl.NumberFormat(list).format();
58
- return langEl.lang || navigator.language;
59
- }
60
-
61
- function elapsedToUnit(elapsed, min = 'second') {
62
- for (let unit in units)
63
- if (Math.abs(elapsed) > units[unit] || unit === min) {
64
- let rounded = Math.round(elapsed / units[unit]);
65
- return {
66
- unit,
67
- rounded,
68
- };
69
- }
70
- }
71
- const units = {
72
- year: 24 * 60 * 60 * 1000 * 365,
73
- month: 24 * 60 * 60 * 1000 * 365 / 12,
74
- day: 24 * 60 * 60 * 1000,
75
- hour: 60 * 60 * 1000,
76
- minute: 60 * 1000,
77
- second: 1000
78
- }
79
-
80
-
81
- define('u2-time', {
82
- attachShadow: { mode: 'open' },
83
-
84
- render() {
85
- let content = '';
86
- let title = undefined;
87
-
88
- let date = this.__date;
89
-
90
- const valid = !isNaN(date);
91
- if (valid) {
92
- let fn = types[this.__type];
93
- if (!fn) { console.warn('type ' + this.__type + ' is not supported'); return; }
94
- let {show} = fn(this, date);
95
- content = show;
96
- if (this.__type === 'relative') {
97
- title = types['date'](this, date).show;// provide a title-attribute if it is relative
98
- clearInterval(this.__timer);
99
- this.__timer = setTimeout(() => this.render(), 1000); // todo: evaluate exact next tic, challange!
100
- }
101
- }
102
- this.html`<time datetime="${this.props.datetime}" title="${title}">${content}<slot hidden="${valid}"/></time>`;
103
- },
104
- reset() {
105
- this.__type = this.props.type || 'relative';
106
- let show = this.props.type || this.innerHTML === '';
107
- if (!show) return;
108
-
109
- let date = this.props.datetime;
110
- date = date.match(/^-?[0-9.]+$/) ? Number(date) : Date.parse(date);
111
- date = new Date(date);
112
- this.__date = date;
113
-
114
- this.__lang = langFromElement(this) || 'default';
115
- this.render();
116
- },
117
- observedAttributes: ['datetime', 'lang', 'type', 'weekday', 'year', 'month', 'day', 'hour', 'minute', 'second', 'mode'],
118
-
119
- attributeChanged(name, old, value) {
120
- if (!this.realConnected) return;
121
- if (old === value) return;
122
- this.reset();
123
- },
124
- connected() {
125
- this.realConnected = true;
126
- this.reset();
127
- },
128
- disconnected() { clearInterval(this.__timer); },
129
- });
package/el/tooltip/tests/minimal.html DELETED
@@ -1,25 +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
- <script src="../tooltip.js" type=module async></script>
9
- <link rel=stylesheet href="../tooltip.css">
10
-
11
- <body>
12
-
13
- <section class="main">
14
- <button>
15
- Tooltip
16
- <u2-tooltip>now you see me</u2-tooltip>
17
- </button>
18
- </section>
19
-
20
- <style class="main">
21
- u2-tooltip {
22
- pointer-events:auto;
23
- background:#a09;
24
- }
25
- </style>
package/el/tooltip/tests/test.html DELETED
@@ -1,178 +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>tests</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/aria.css">
11
- <link rel=stylesheet href="../../../css/classless/simple.css">
12
-
13
- <script src="../../../el/code/code.js" type=module async></script>
14
- <link rel=stylesheet href="../../../el/code/code.css">
15
-
16
- <script src="../tooltip.js" type=module async></script>
17
- <link rel=stylesheet href="../tooltip.css">
18
-
19
- <style>
20
- button {
21
- margin:.2rem;
22
- }
23
- </style>
24
-
25
- <body>
26
-
27
- <section>
28
-
29
- <button>
30
- focusable
31
- <u2-tooltip tabindex=-1>Click on me and i will not disappear</u2-tooltip>
32
- </button>
33
-
34
- <button aria-labelledby=shared>shared1</button>
35
- <button aria-labelledby=shared>shared2</button>
36
- <u2-tooltip id=shared>Same tooltip for multiple elements</u2-tooltip>
37
-
38
- <button>
39
- <u2-tooltip>Saved the file</u2-tooltip>
40
- save
41
- <div aria-labelledby="nested1"" id="nested" style="background:black; display:inline">
42
- <u2-tooltip>Nested test</u2-tooltip>
43
- nested
44
- </div>
45
- </button>
46
-
47
- <button>
48
- ritch
49
- <u2-tooltip tabindex="-1">
50
- Super duper
51
- <a href="#">more</a>
52
- </u2-tooltip>
53
- </button>
54
-
55
- <button>
56
- <u2-tooltip>
57
- Longer text, Lorem Ispsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur consectetur, nisi nisl tincidunt nisi, eget porta nisl nisl euismod nisi.
58
- </u2-tooltip>
59
- long text
60
- </button>
61
-
62
- <hr>
63
-
64
-
65
- <button style="margin-inline:auto; display:block">
66
- position=top
67
- <u2-tooltip position="top">Tooltip</u2-tooltip>
68
- </button>
69
- <button style="margin-inline:auto; display:block">
70
- position=left
71
- <u2-tooltip position="left">Tooltip</u2-tooltip>
72
- </button>
73
- <button style="margin-inline:auto; display:block">
74
- position=right
75
- <u2-tooltip position="right">Tooltip</u2-tooltip>
76
- </button>
77
- <button style="margin-inline:auto; display:block">
78
- position=bottom
79
- <u2-tooltip position="bottom">Tooltip</u2-tooltip>
80
- </button>
81
-
82
-
83
- <button style="position:absolute; bottom:2rem; left:2rem">
84
- Tooltip should stay in viewport
85
- <u2-tooltip>
86
- Does it?
87
- </u2-tooltip>
88
- </button>
89
-
90
- <br><br>
91
-
92
- <label>
93
- label
94
- <input aria-labelledby="ttinp" value="input">
95
- <u2-tooltip id="ttinp">Tooltip using aria-labelledby</u2-tooltip>
96
- </label>
97
-
98
- <br><br>
99
-
100
- <ul>
101
- <li><span aria-labelledby="dyn">Apple</span>
102
- <li><span aria-labelledby="dyn">Banana</span>
103
- <li><span aria-labelledby="dyn">Orange</span>
104
- </ul>
105
- <u2-tooltip id=dyn></u2-tooltip>
106
- <script>
107
- dyn.addEventListener('u2-show', function(e) {
108
- dyn.innerHTML = `This is a great ${e.detail.target.innerText}`;
109
- });
110
- </script>
111
-
112
-
113
- <u2-code editable trim>
114
- <style>
115
- u2-tooltip {
116
- font-size:max(12px, .7rem);
117
- --line-height: 1.4em;
118
- padding:.5rem;
119
- background:var(--color-text);
120
- color:var(--color-bg);
121
- border-radius:.3rem;
122
- }
123
- u2-tooltip a {
124
- color:var(--color-light);
125
- }
126
-
127
-
128
- /* arrow */
129
- u2-tooltip::after {
130
- --size:1em;
131
- content: "";
132
- position:absolute;
133
- transform:rotate(45deg);
134
- width:var(--size);
135
- height:var(--size);
136
- background-color: inherit;
137
- margin:auto;
138
- z-index:-1;
139
- }
140
- u2-tooltip[\:position-x="after"]::after {
141
- left:calc( var(--size) * -.5);
142
- }
143
- u2-tooltip[\:position-x="before"]::after {
144
- right:calc( var(--size) * -.5);
145
- }
146
- u2-tooltip[\:position-x="center"]::after {
147
- right:0;
148
- left:0;
149
- }
150
- u2-tooltip[\:position-y="after"]::after {
151
- top:calc( var(--size) * -.5);
152
- }
153
- u2-tooltip[\:position-y="before"]::after {
154
- bottom:calc( var(--size) * -.5);
155
- }
156
- u2-tooltip[\:position-y="center"]::after {
157
- top:0;
158
- bottom:0;
159
- }
160
- </style>
161
- </u2-code>
162
-
163
-
164
- <button onclick="dialog1.showModal()">
165
- Show dialog
166
- </button>
167
- <dialog id="dialog1">
168
- <h1>Dialog</h1>
169
- <button>
170
- focus or hover me
171
- <u2-tooltip position=right>Test if tooltip works inside dialog</u2-tooltip>
172
- </button>
173
- <br>
174
- If tooltips are not using popover attribute,<br>
175
- they can not be over dialog. <br>
176
- </dialog>
177
-
178
- </section>