u2ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (440) hide show
  1. package/.htaccess +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +36 -0
  4. package/attr/behavior/README.md +25 -0
  5. package/attr/behavior/behavior.js +261 -0
  6. package/attr/behavior/manifest.json +43 -0
  7. package/attr/behavior/tests/minimal.html +19 -0
  8. package/attr/behavior/tests/test.html +98 -0
  9. package/attr/confirm/README.md +36 -0
  10. package/attr/confirm/confirm.js +90 -0
  11. package/attr/confirm/manifest.json +43 -0
  12. package/attr/confirm/tests/minimal.html +23 -0
  13. package/attr/confirm/tests/test.html +79 -0
  14. package/attr/draghandle/README.md +41 -0
  15. package/attr/draghandle/draghandle.js +42 -0
  16. package/attr/draghandle/tests/minimal.html +44 -0
  17. package/attr/focusgroup/README.md +49 -0
  18. package/attr/focusgroup/focusgroup.js +100 -0
  19. package/attr/focusgroup/manifest.json +38 -0
  20. package/attr/focusgroup/tests/minimal.html +27 -0
  21. package/attr/focusgroup/tests/test.html +154 -0
  22. package/attr/href/README.md +38 -0
  23. package/attr/href/href.js +42 -0
  24. package/attr/href/manifest.json +43 -0
  25. package/attr/href/tests/minimal.html +17 -0
  26. package/attr/href/tests/test.html +70 -0
  27. package/attr/intersect/README.md +42 -0
  28. package/attr/intersect/intersect.js +99 -0
  29. package/attr/intersect/manifest.json +57 -0
  30. package/attr/intersect/tests/minimal.html +30 -0
  31. package/attr/intersect/tests/test.html +64 -0
  32. package/attr/navigable/README.md +31 -0
  33. package/attr/navigable/TargetObserver.js +91 -0
  34. package/attr/navigable/U2TargetObserver.js +75 -0
  35. package/attr/navigable/manifest.json +42 -0
  36. package/attr/navigable/navigable.js +87 -0
  37. package/attr/navigable/tests/U1TargetObserver.html +56 -0
  38. package/attr/navigable/tests/minimal.html +17 -0
  39. package/attr/navigable/tests/targetObserver.html +106 -0
  40. package/attr/navigable/tests/test.html +84 -0
  41. package/attr/parallax/README.md +48 -0
  42. package/attr/parallax/parallax.js +119 -0
  43. package/attr/parallax/tests/minimal.html +25 -0
  44. package/attr/parallax/tests/performance.html +102 -0
  45. package/attr/parallax/tests/test.html +108 -0
  46. package/attr/skin/README.md +59 -0
  47. package/attr/skin/skin.css +51 -0
  48. package/attr/skin/tests/minimal.html +34 -0
  49. package/attr/skin/tests/test.html +96 -0
  50. package/class/badge/README.md +25 -0
  51. package/class/badge/badge.css +35 -0
  52. package/class/badge/tests/minimal.html +17 -0
  53. package/class/badge/tests/test.html +112 -0
  54. package/class/card1/README.md +45 -0
  55. package/class/card1/card1.css +30 -0
  56. package/class/card1/tests/minimal.html +33 -0
  57. package/class/card1/tests/test.html +78 -0
  58. package/class/flex/README.md +62 -0
  59. package/class/flex/flex.css +25 -0
  60. package/class/flex/tests/minimal.html +31 -0
  61. package/class/flex/tests/test.html +58 -0
  62. package/class/grid/README.md +52 -0
  63. package/class/grid/grid.css +40 -0
  64. package/class/grid/tests/minimal.html +34 -0
  65. package/class/grid/tests/test.html +78 -0
  66. package/class/input/README.md +49 -0
  67. package/class/input/input.css +33 -0
  68. package/class/input/tests/minimal.html +39 -0
  69. package/class/input/tests/test.html +29 -0
  70. package/class/reset/README.md +47 -0
  71. package/class/reset/reset.css +8 -0
  72. package/class/reset/tests/minimal.html +23 -0
  73. package/class/table/README.md +57 -0
  74. package/class/table/table.css +126 -0
  75. package/class/table/tests/minimal.html +40 -0
  76. package/class/table/tests/test.html +226 -0
  77. package/class/unstyle/README.md +32 -0
  78. package/class/unstyle/tests/minimal.html +22 -0
  79. package/class/unstyle/tests/test.html +32 -0
  80. package/class/unstyle/unstyle.css +12 -0
  81. package/class/width/README.md +48 -0
  82. package/class/width/tests/minimal.html +27 -0
  83. package/class/width/tests/test.html +101 -0
  84. package/class/width/width.css +22 -0
  85. package/css/base/README.md +25 -0
  86. package/css/base/base.css +127 -0
  87. package/css/base/beta.css +50 -0
  88. package/css/base/full.css +5 -0
  89. package/css/base/nomotion.css +9 -0
  90. package/css/base/print.css +36 -0
  91. package/css/base/tests/nomotion.html +89 -0
  92. package/css/base/tests/test.html +539 -0
  93. package/css/classes/README.md +17 -0
  94. package/css/classes/classes.css +78 -0
  95. package/css/classes/tests/test.html +63 -0
  96. package/css/classless/README.md +26 -0
  97. package/css/classless/aria.css +64 -0
  98. package/css/classless/classless.css +124 -0
  99. package/css/classless/full.css +11 -0
  100. package/css/classless/more.css +340 -0
  101. package/css/classless/simple.css +103 -0
  102. package/css/classless/snippeds/a/icons.css +12 -0
  103. package/css/classless/snippeds/experiments/conventions.css +41 -0
  104. package/css/classless/snippeds/hr/gradient.css +3 -0
  105. package/css/classless/snippeds/hr/section_sign.css +16 -0
  106. package/css/classless/snippeds/hr/tests.html +50 -0
  107. package/css/classless/tests/aria.html +101 -0
  108. package/css/classless/tests/foreign/classless-almond.css.html +445 -0
  109. package/css/classless/tests/foreign/classless-classless.css.html +831 -0
  110. package/css/classless/tests/foreign/classless-mvp.html +415 -0
  111. package/css/classless/tests/foreign/classless.sakura.html +224 -0
  112. package/css/classless/tests/foreign/stylestage.dev.html +304 -0
  113. package/css/classless/tests/foreign/test-homogenizer.html +433 -0
  114. package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
  115. package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
  116. package/css/classless/tests/list-bullet.html +110 -0
  117. package/css/classless/tests/more.html +246 -0
  118. package/css/classless/tests/oklch.experiments.html +280 -0
  119. package/css/classless/tests/test.html +106 -0
  120. package/css/classless/tests/variables.html +109 -0
  121. package/css/classless/variables.css +99 -0
  122. package/css/norm/README.md +37 -0
  123. package/css/norm/beta.css +40 -0
  124. package/css/norm/norm.css +98 -0
  125. package/css/norm/oldies.css +60 -0
  126. package/css/norm/tests/test.html +434 -0
  127. package/css/norm/tests/test.js +103 -0
  128. package/el/accordion/README.md +59 -0
  129. package/el/accordion/accordion.css +7 -0
  130. package/el/accordion/accordion.js +258 -0
  131. package/el/accordion/manifest.json +57 -0
  132. package/el/accordion/tests/minimal.html +44 -0
  133. package/el/accordion/tests/test.html +168 -0
  134. package/el/alert/README.md +67 -0
  135. package/el/alert/alert copy.js +224 -0
  136. package/el/alert/alert.css +73 -0
  137. package/el/alert/alert.js +187 -0
  138. package/el/alert/manifest.json +77 -0
  139. package/el/alert/tests/minimal.html +36 -0
  140. package/el/alert/tests/test.html +105 -0
  141. package/el/buttongroup/README.md +36 -0
  142. package/el/buttongroup/buttongroup.css +30 -0
  143. package/el/buttongroup/buttongroup.js +56 -0
  144. package/el/buttongroup/tests/minimal.html +31 -0
  145. package/el/buttongroup/tests/test.html +83 -0
  146. package/el/bytes/README.md +41 -0
  147. package/el/bytes/bytes.css +6 -0
  148. package/el/bytes/bytes.js +97 -0
  149. package/el/bytes/manifest.json +95 -0
  150. package/el/bytes/tests/minimal.html +19 -0
  151. package/el/bytes/tests/test.html +117 -0
  152. package/el/carousel/README.md +52 -0
  153. package/el/carousel/carousel.css +46 -0
  154. package/el/carousel/carousel.js +371 -0
  155. package/el/carousel/manifest.json +58 -0
  156. package/el/carousel/tests/experiments.html +77 -0
  157. package/el/carousel/tests/minimal.html +31 -0
  158. package/el/carousel/tests/nested.html +54 -0
  159. package/el/carousel/tests/test.html +136 -0
  160. package/el/carousel-nav/README.md +40 -0
  161. package/el/carousel-nav/carousel-nav.js +74 -0
  162. package/el/carousel-nav/tests/minimal.html +32 -0
  163. package/el/carousel-nav/tests/test.html +59 -0
  164. package/el/code/README.md +68 -0
  165. package/el/code/code.css +46 -0
  166. package/el/code/code.js +289 -0
  167. package/el/code/manifest.json +66 -0
  168. package/el/code/tests/minimal.html +35 -0
  169. package/el/code/tests/test.html +162 -0
  170. package/el/copy/README.md +35 -0
  171. package/el/copy/copy.css +3 -0
  172. package/el/copy/copy.js +118 -0
  173. package/el/copy/manifest.json +49 -0
  174. package/el/copy/tests/minimal.html +21 -0
  175. package/el/copy/tests/test.html +75 -0
  176. package/el/counter/README.md +47 -0
  177. package/el/counter/counter.css +8 -0
  178. package/el/counter/counter.js +95 -0
  179. package/el/counter/manifest.json +59 -0
  180. package/el/counter/tests/minimal.html +27 -0
  181. package/el/counter/tests/test.html +106 -0
  182. package/el/ico/README.md +162 -0
  183. package/el/ico/font/Font Awesome.css +22 -0
  184. package/el/ico/font/LigatureSymbols.css +7 -0
  185. package/el/ico/font/Material Icons.css +6 -0
  186. package/el/ico/font/RemixFilled.css +8 -0
  187. package/el/ico/font/RemixOutlined.css +8 -0
  188. package/el/ico/font/old/anicons.css +31 -0
  189. package/el/ico/font/old/devicons.css +210 -0
  190. package/el/ico/font/old/material.all.css +36 -0
  191. package/el/ico/font/old/remix.css +15 -0
  192. package/el/ico/font/old/utf8.css +54 -0
  193. package/el/ico/ico.css +111 -0
  194. package/el/ico/ico.js +189 -0
  195. package/el/ico/manifest.json +86 -0
  196. package/el/ico/tests/combinations.html +86 -0
  197. package/el/ico/tests/emojis.html +213 -0
  198. package/el/ico/tests/fonts.html +110 -0
  199. package/el/ico/tests/ico-directory.html +254 -0
  200. package/el/ico/tests/minimal.html +46 -0
  201. package/el/ico/tests/test.html +210 -0
  202. package/el/ico/tests/util-multi.svg +6 -0
  203. package/el/ico/tests/util.css +2 -0
  204. package/el/ico/tests/util.js +110 -0
  205. package/el/input/README.md +39 -0
  206. package/el/input/input.css +35 -0
  207. package/el/input/input.js +331 -0
  208. package/el/input/tests/formParticipation.html +113 -0
  209. package/el/input/tests/minimal.html +33 -0
  210. package/el/input/tests/test.html +258 -0
  211. package/el/masonry/README.md +51 -0
  212. package/el/masonry/manifest.json +60 -0
  213. package/el/masonry/masonry.css +27 -0
  214. package/el/masonry/masonry.js +92 -0
  215. package/el/masonry/tests/minimal.html +39 -0
  216. package/el/masonry/tests/test.html +42 -0
  217. package/el/number/README.md +47 -0
  218. package/el/number/manifest.json +121 -0
  219. package/el/number/number.css +6 -0
  220. package/el/number/number.js +67 -0
  221. package/el/number/tests/minimal.html +25 -0
  222. package/el/number/tests/test.html +138 -0
  223. package/el/out/README.md +32 -0
  224. package/el/out/manifest.json +38 -0
  225. package/el/out/out.css +2 -0
  226. package/el/out/out.js +59 -0
  227. package/el/out/tests/minimal.html +25 -0
  228. package/el/out/tests/test.html +37 -0
  229. package/el/parallax-bg/README.md +36 -0
  230. package/el/parallax-bg/parallax-bg.css +13 -0
  231. package/el/parallax-bg/parallax-bg.js +186 -0
  232. package/el/parallax-bg/tests/bg.jpg +0 -0
  233. package/el/parallax-bg/tests/bg1.jpg +0 -0
  234. package/el/parallax-bg/tests/bg2.jpg +0 -0
  235. package/el/parallax-bg/tests/demo.html +88 -0
  236. package/el/parallax-bg/tests/minimal.html +30 -0
  237. package/el/parallax-bg/tests/test.html +64 -0
  238. package/el/parallax-bg/tests/visible.html +90 -0
  239. package/el/qrcode/README.md +38 -0
  240. package/el/qrcode/manifest.json +43 -0
  241. package/el/qrcode/package.json +22 -0
  242. package/el/qrcode/qrcode.css +13 -0
  243. package/el/qrcode/qrcode.js +46 -0
  244. package/el/qrcode/tests/minimal.html +26 -0
  245. package/el/qrcode/tests/test.html +31 -0
  246. package/el/rating/README.md +45 -0
  247. package/el/rating/manifest.json +65 -0
  248. package/el/rating/rating.css +11 -0
  249. package/el/rating/rating.js +139 -0
  250. package/el/rating/tests/minimal.html +26 -0
  251. package/el/rating/tests/tests.html +77 -0
  252. package/el/rte/README.md +37 -0
  253. package/el/rte/rte.css +9 -0
  254. package/el/rte/rte.js +56 -0
  255. package/el/rte/tests/minimal.html +25 -0
  256. package/el/rte/tests/test.html +37 -0
  257. package/el/skeleton/README.md +30 -0
  258. package/el/skeleton/manifest.json +51 -0
  259. package/el/skeleton/skeleton.css +61 -0
  260. package/el/skeleton/skeleton.js +72 -0
  261. package/el/skeleton/tests/minimal.html +22 -0
  262. package/el/skeleton/tests/test.html +22 -0
  263. package/el/splitbutton/README.md +39 -0
  264. package/el/splitbutton/splitbutton.css +48 -0
  265. package/el/splitbutton/splitbutton.js +26 -0
  266. package/el/splitbutton/tests/minimal.html +30 -0
  267. package/el/splitbutton/tests/test.html +68 -0
  268. package/el/splitpanel/README.md +39 -0
  269. package/el/splitpanel/manifest.json +49 -0
  270. package/el/splitpanel/splitpanel.css +17 -0
  271. package/el/splitpanel/splitpanel.js +116 -0
  272. package/el/splitpanel/tests/minimal.html +31 -0
  273. package/el/splitpanel/tests/tests.html +121 -0
  274. package/el/table/README.md +68 -0
  275. package/el/table/manifest.json +43 -0
  276. package/el/table/table.css +59 -0
  277. package/el/table/table.js +194 -0
  278. package/el/table/tests/minimal.html +38 -0
  279. package/el/table/tests/test.html +108 -0
  280. package/el/tabs/README.md +50 -0
  281. package/el/tabs/manifest.json +59 -0
  282. package/el/tabs/tabs.css +23 -0
  283. package/el/tabs/tabs.js +210 -0
  284. package/el/tabs/tests/minimal.html +35 -0
  285. package/el/tabs/tests/test.html +180 -0
  286. package/el/textfit/README.md +34 -0
  287. package/el/textfit/manifest.json +45 -0
  288. package/el/textfit/tests/minimal.html +25 -0
  289. package/el/textfit/tests/test.html +26 -0
  290. package/el/textfit/textfit.css +6 -0
  291. package/el/textfit/textfit.js +80 -0
  292. package/el/time/README.md +72 -0
  293. package/el/time/manifest.json +118 -0
  294. package/el/time/tests/minimal.html +19 -0
  295. package/el/time/tests/test.html +160 -0
  296. package/el/time/time copy.js +141 -0
  297. package/el/time/time.js +168 -0
  298. package/el/time/time.old.uhtml.js +129 -0
  299. package/el/tooltip/README.md +48 -0
  300. package/el/tooltip/manifest.json +69 -0
  301. package/el/tooltip/tests/minimal.html +25 -0
  302. package/el/tooltip/tests/test.html +178 -0
  303. package/el/tooltip/tooltip.css +97 -0
  304. package/el/tooltip/tooltip.js +82 -0
  305. package/el/tree1/README.md +111 -0
  306. package/el/tree1/manifest.json +78 -0
  307. package/el/tree1/tests/animated.html +134 -0
  308. package/el/tree1/tests/custom.html +51 -0
  309. package/el/tree1/tests/minimal.html +44 -0
  310. package/el/tree1/tests/test.html +260 -0
  311. package/el/tree1/tree1.css +26 -0
  312. package/el/tree1/tree1.js +265 -0
  313. package/el/typewriter/README.md +62 -0
  314. package/el/typewriter/manifest.json +66 -0
  315. package/el/typewriter/tests/minimal.html +25 -0
  316. package/el/typewriter/tests/test.html +78 -0
  317. package/el/typewriter/typewriter.css +6 -0
  318. package/el/typewriter/typewriter.js +166 -0
  319. package/el/typewriter/typewriter.mp3 +0 -0
  320. package/js/Placer/Placer.js +156 -0
  321. package/js/Placer/README.md +62 -0
  322. package/js/Placer/tests/minimal.html +34 -0
  323. package/js/Placer/tests/test.html +49 -0
  324. package/js/PointerObserver/PointerObserver.js +130 -0
  325. package/js/PointerObserver/README.md +34 -0
  326. package/js/PointerObserver/tests/minimal.html +29 -0
  327. package/js/PointerObserver/tests/test.html +35 -0
  328. package/js/SelectorObserver/README.md +47 -0
  329. package/js/SelectorObserver/SelectorObserver.js +201 -0
  330. package/js/SelectorObserver/tests/minimal.html +21 -0
  331. package/js/SelectorObserver/tests/test.html +57 -0
  332. package/js/SelectorObserver/tests/tests.html +161 -0
  333. package/js/contextmenu/README.md +93 -0
  334. package/js/contextmenu/contextmenu.js +336 -0
  335. package/js/contextmenu/tests/minimal.html +44 -0
  336. package/js/contextmenu/tests/test.html +131 -0
  337. package/js/dialog/README.md +49 -0
  338. package/js/dialog/dialog.js +261 -0
  339. package/js/dialog/notification.mp3 +0 -0
  340. package/js/dialog/tests/minimal.html +29 -0
  341. package/js/dialog/tests/notification.mp3 +0 -0
  342. package/js/dialog/tests/test.html +135 -0
  343. package/js/rte/README.md +44 -0
  344. package/js/rte/old/NodeCleaner.js +315 -0
  345. package/js/rte/old/Rte/Rte.mjs +316 -0
  346. package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
  347. package/js/rte/old/Rte/Rte.ui.mjs +154 -0
  348. package/js/rte/old/Rte/crossbrowser.mjs +323 -0
  349. package/js/rte/old/Rte/font/tinymce.svg +98 -0
  350. package/js/rte/old/Rte/font/tinymce.woff +0 -0
  351. package/js/rte/old/Rte/helpers.mjs +159 -0
  352. package/js/rte/old/Rte/htmlparser.mjs +178 -0
  353. package/js/rte/old/Rte/index.mjs +5 -0
  354. package/js/rte/old/Rte/main.css +189 -0
  355. package/js/rte/old/old.rte.js +132 -0
  356. package/js/rte/old/range-selection.old.js +394 -0
  357. package/js/rte/rte.js +7 -0
  358. package/js/rte/src/behavior.js +228 -0
  359. package/js/rte/src/events.js +73 -0
  360. package/js/rte/src/fixes.js +251 -0
  361. package/js/rte/src/range.js +472 -0
  362. package/js/rte/src/rte.js +72 -0
  363. package/js/rte/src/ui/items/ai.js +167 -0
  364. package/js/rte/src/ui/items/code.js +93 -0
  365. package/js/rte/src/ui/items/undo.js +183 -0
  366. package/js/rte/src/ui.items.js +571 -0
  367. package/js/rte/src/ui.js +269 -0
  368. package/js/rte/src/util/htmlparser.js +178 -0
  369. package/js/rte/src/util/indentHtml.js +48 -0
  370. package/js/rte/tests/ai.html +81 -0
  371. package/js/rte/tests/behavior.html +88 -0
  372. package/js/rte/tests/events.html +69 -0
  373. package/js/rte/tests/fixes.html +95 -0
  374. package/js/rte/tests/minimal.html +34 -0
  375. package/js/rte/tests/notes.md +6 -0
  376. package/js/rte/tests/range.html +167 -0
  377. package/js/rte/tests/selection-explorer.html +222 -0
  378. package/js/rte/tests/test.html +92 -0
  379. package/js/shortcut/README.md +33 -0
  380. package/js/shortcut/shortcut.js +89 -0
  381. package/js/shortcut/tests/minimal.html +23 -0
  382. package/js/shortcut/tests/test.html +68 -0
  383. package/package.json +12 -0
  384. package/u2/README.md +4 -0
  385. package/u2/auto.js +161 -0
  386. package/u2/auto.ui.js +85 -0
  387. package/u2/experiments/Waiter/test.html +132 -0
  388. package/u2/experiments/getElementByIdPromise/test.html +76 -0
  389. package/u2/experiments/patchInputValue.html +124 -0
  390. package/u2/experiments/radiobutton/test.html +75 -0
  391. package/u2/experiments/tests/test.html +223 -0
  392. package/u2/experiments/u1-responsive/responsive.js +62 -0
  393. package/u2/experiments/u1-responsive/test.html +65 -0
  394. package/u2/experiments/u2Element.js +139 -0
  395. package/u2/experiments/u2Element.test.html +47 -0
  396. package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
  397. package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
  398. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
  399. package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
  400. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
  401. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
  402. package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
  403. package/u2/old-stuff/css/parser/mod.js +182 -0
  404. package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
  405. package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
  406. package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
  407. package/u2/old-stuff/css/parser/style.html +52 -0
  408. package/u2/old-stuff/css/parser/test.html +38 -0
  409. package/u2/old-stuff/el/ai-texter/README.md +23 -0
  410. package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
  411. package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
  412. package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
  413. package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
  414. package/u2/old-stuff/init.js +38 -0
  415. package/u2/old-stuff/markHashLinks.js +51 -0
  416. package/u2/old-stuff/onElement/mod.js +73 -0
  417. package/u2/old-stuff/test-helpers/mod.js +36 -0
  418. package/u2/old-stuff/test-helpers/test.html +4 -0
  419. package/u2/old-stuff/tests/init.js.html +51 -0
  420. package/u2/old-stuff/viewport.js +64 -0
  421. package/u2/projects.json +468 -0
  422. package/u2/tests/boilerplate.html +46 -0
  423. package/u2/tests/kacheln.html +245 -0
  424. package/u2/tests/showcase.html +270 -0
  425. package/u2/tests/showcase2.html +157 -0
  426. package/u2/tests/test-init.js +35 -0
  427. package/u2/tests/test.html +355 -0
  428. package/u2/tools/baseElement.js +95 -0
  429. package/u2/tools/baseElement.test.html +119 -0
  430. package/u2/tools/ce-inspector.js +308 -0
  431. package/u2/tools/ce-inspector.test.html +66 -0
  432. package/u2/tools/ce-manfest-from-element.js +207 -0
  433. package/u2/tools/dev-iframe.js +213 -0
  434. package/u2/tools/dev-iframe.test.html +75 -0
  435. package/u2/tools/eventsExplorer.js +101 -0
  436. package/u2/tools/logo/u1.svg +9 -0
  437. package/u2/tools/logo/u1ui.svg +6 -0
  438. package/u2/tools/update.repos.json.js +234 -0
  439. package/u2/u2.js +14 -0
  440. package/u2/utils.js +59 -0
package/u2/experiments/patchInputValue.html ADDED
@@ -0,0 +1,124 @@
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
+
8
+ <script src="../tests/test-init.js" type=module async></script>
9
+ <script src="../auto.js" type=module async></script>
10
+ <link rel=stylesheet href="../../css/classless/simple.css">
11
+
12
+ <body>
13
+
14
+
15
+ <h2>set Input value and keep selection</h2>
16
+
17
+ <input id=demo type=text value=home>
18
+
19
+ <button id="btn">
20
+ set "093 893 34" and keep selection
21
+ </button>
22
+
23
+
24
+ <script>
25
+
26
+ /* demo */
27
+
28
+ btn.addEventListener('mousedown', function(e) {
29
+ setInputValueKeepSelection(demo, '093 893 34');
30
+ e.preventDefault();
31
+ });
32
+
33
+ demo.addEventListener('input', function(e) {
34
+ let value = e.target.value;
35
+
36
+ // value = value.replace(/[^0-9]/g, ""); // enfertne alle nicht zahlen
37
+ // if (value.length > 0 && value[0] !== "0") { // stelle sicher, dass am anfang eine 0 steht
38
+ // value = "0" + value;
39
+ // }
40
+ // if (value.length > 10) { // stelle sicher, dass die zahl nicht länger als 10 zeichen ist
41
+ // value = value.substring(0, 10);
42
+ // }
43
+ value = value.replace(/(\d{3})(?=\d)/g, '$1 '); // gruppiere in 3er gruppen von vorne
44
+
45
+ setInputValueKeepSelection(demo, value);
46
+ });
47
+
48
+
49
+ /* functions */
50
+ function setInputValueKeepSelection(input, newValue) {
51
+ if (document.activeElement !== input) {
52
+ input.value = newValue;
53
+ return;
54
+ }
55
+ if (input.value === newValue) return;
56
+ const selectionStart = input.selectionStart;
57
+ const selectionEnd = input.selectionEnd;
58
+ const oldString = input.value;
59
+ const newPositionStart = positionAfterUpdate(oldString, selectionStart, newValue);
60
+ const newPositionEnd = positionAfterUpdate(oldString, selectionEnd, newValue);
61
+ input.value = newValue;
62
+ input.setSelectionRange(newPositionStart, newPositionEnd);
63
+ }
64
+
65
+ function positionAfterUpdate(initialString, initialPosition, newString) {
66
+ let minDistance = Infinity;
67
+ let newPosition = -1;
68
+ for (let i = 0; i <= newString.length; i++) {
69
+ const a = initialString.substring(0, initialPosition) + newString.substring(i);
70
+ const b = newString.substring(0, i) + initialString.substring(initialPosition);
71
+ const distance = levenshteinDistance(a, b);
72
+ if (distance < minDistance) {
73
+ minDistance = distance;
74
+ newPosition = i;
75
+ }
76
+ }
77
+ return newPosition;
78
+ }
79
+
80
+ function levenshteinDistance(a, b) {
81
+ // Vertausche a und b, wenn b länger als a ist, um Speicher zu sparen
82
+ if (a.length > b.length) [a, b] = [b, a];
83
+ let previousRow = Array(a.length + 1).fill().map((_, i) => i);
84
+ let currentRow = [];
85
+ for (let i = 1; i <= b.length; i++) {
86
+ currentRow = [i];
87
+ for (let j = 1; j <= a.length; j++) {
88
+ const cost = (a.charAt(j - 1) === b.charAt(i - 1)) ? 0 : 1;
89
+ currentRow[j] = Math.min(
90
+ currentRow[j - 1] + 1, // insertion
91
+ previousRow[j] + 1, // deletion
92
+ previousRow[j - 1] + cost // substitution
93
+ );
94
+ }
95
+ [previousRow, currentRow] = [currentRow, previousRow];
96
+ }
97
+ return previousRow[a.length];
98
+ }
99
+
100
+ // function xxxlevenshteinDistance(a, b) {
101
+ // const matrix = [];
102
+ // // Initialize matrix of zeros
103
+ // for (let i = 0; i <= b.length; i++) matrix[i] = [i];
104
+ // for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
105
+ // for (let i = 1; i <= b.length; i++) {
106
+ // for (let j = 1; j <= a.length; j++) {
107
+ // if (b.charAt(i - 1) === a.charAt(j - 1)) {
108
+ // matrix[i][j] = matrix[i - 1][j - 1];
109
+ // } else {
110
+ // matrix[i][j] = Math.min(
111
+ // matrix[i - 1][j - 1] + 1, // substitution
112
+ // Math.min(
113
+ // matrix[i][j - 1] + 1, // insertion
114
+ // matrix[i - 1][j] + 1 // deletion
115
+ // )
116
+ // );
117
+ // }
118
+ // }
119
+ // }
120
+ // return matrix[b.length][a.length];
121
+ // }
122
+
123
+
124
+ </script>
package/u2/experiments/radiobutton/test.html ADDED
@@ -0,0 +1,75 @@
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="./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
+
23
+ <body>
24
+
25
+ <section style="background:var(--color-light, #eee)">
26
+
27
+ <style>
28
+ u2-radiobutton {
29
+ position:relative;
30
+ &:has(input:checked) {
31
+ background-color : var(--color-dark, #007bff);
32
+ }
33
+ &:focus-within {
34
+ outline: .1em solid var(--color, #007bff);
35
+ }
36
+
37
+ & input[type=radio] {
38
+ all: unset;
39
+ background:yellow;
40
+ position:absolute;
41
+ inset:0;
42
+ xopacity:0;
43
+ color:transparent !important;
44
+ background:transparent !important;
45
+ border: 0 !important;
46
+ border-radius: inherit;
47
+ &::after, &::before {
48
+ all:unset;
49
+ display:none !important;
50
+ }
51
+ }
52
+ }
53
+ </style>
54
+
55
+ <u2-radiobutton class="btn">
56
+ 1
57
+ <input type=radio name=radio>
58
+ </u2-radiobutton>
59
+
60
+ <u2-radiobutton class="btn">
61
+ 2
62
+ <input type=radio name=radio checked>
63
+ </u2-radiobutton>
64
+
65
+ <u2-radiobutton class="btn">
66
+ 3
67
+ <input type=radio name=radio>
68
+ </u2-radiobutton>
69
+
70
+ <button>Normal button</button>
71
+
72
+
73
+
74
+ </section>
75
+
package/u2/experiments/tests/test.html ADDED
@@ -0,0 +1,223 @@
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></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="../../../el/ico/ico.js" type=module async></script>
17
+ <link rel=stylesheet href="../../../el/ico/ico.css">
18
+
19
+ <body>
20
+
21
+ <section>
22
+
23
+
24
+
25
+ <style>
26
+
27
+ body {
28
+ --color-red: oklch(70% 0.138 25);
29
+ --color-green: oklch(70% 0.138 165);
30
+ --color-yellow: oklch(70% 0.138 84);
31
+ --color-blue: oklch(70% 0.138 223);
32
+ }
33
+
34
+ #u2-notification-stack {
35
+ display:flex;
36
+ flex-direction: column;
37
+ justify-content: start;
38
+ align-items: stretch;
39
+ gap:.8rem;
40
+
41
+ position: fixed;
42
+ bottom: 0;
43
+ right: 0;
44
+ max-width: 20rem;
45
+ width: 100%;
46
+
47
+ overflow:auto;
48
+
49
+ padding: 2vmin;
50
+ z-index: 1000;
51
+ pointer-events:none;
52
+ & > * {
53
+ pointer-events: initial;
54
+ }
55
+ }
56
+
57
+ u2-alert {
58
+ /* border-radius:.5em; */
59
+ font-size: max(13px, .8rem);
60
+ padding: 1em;
61
+ background: white;
62
+ box-shadow: 0 0 .3em #0004;
63
+ border-top:.2em solid var(--color);
64
+ --u2-ico-dir: 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg';
65
+ }
66
+ u2-alert:not([open], :focus-within, :hover) {
67
+ display:none;
68
+ }
69
+
70
+ /* animation */
71
+ @keyframes alert-animation {
72
+ from {
73
+ transform: scale(0.8);
74
+ opacity: 0.2;
75
+ margin-bottom:-4rem;
76
+ }
77
+ to {
78
+ transform: scale(1);
79
+ opacity: 1;
80
+ }
81
+ }
82
+
83
+ u2-alert[open] {
84
+ will-change: transform, opacity, margin;
85
+ animation: alert-animation 0.2s ease-in;
86
+ }
87
+ u2-alert[type=success] { --color: var(--color-green); }
88
+ u2-alert[type=warn] { --color: var(--color-yellow); }
89
+ u2-alert[type=error] { --color: var(--color-red); }
90
+ u2-alert[type=info] { --color: var(--color-blue); }
91
+ </style>
92
+
93
+ <script type="module">
94
+ // IMPLEMENTATION:
95
+
96
+ import '../../focusgroup.attr/focusgroup.js';
97
+ import '../../../el/ico/ico.js';
98
+ // import style-sheet:
99
+ const style = document.createElement('link');
100
+ style.rel = 'stylesheet';
101
+ style.href = '../../../el/ico/ico.css';
102
+ document.head.appendChild(style);
103
+
104
+ const toolsContainer = null;
105
+ function getToolsContainer() {
106
+ const el = document.getElementById('u2-notification-stack');
107
+ if (el) return el;
108
+ const div = document.createElement('div');
109
+ div.id = 'u2-notification-stack';
110
+ document.body.appendChild(div);
111
+ return div;
112
+ }
113
+
114
+
115
+ class alert extends HTMLElement {
116
+ constructor() {
117
+ super();
118
+ this.attachShadow({mode: 'open'});
119
+ this.shadowRoot.innerHTML = `
120
+ <style>
121
+ @import url('../../../../el/ico/ico.css');
122
+ :host {
123
+ display:flex;
124
+ flex-wrap:wrap;
125
+ align-items:center;
126
+ justify-content:stretch;
127
+ gap:1.5em;
128
+ }
129
+ slot {
130
+ display:block;
131
+ }
132
+ [name=action] {
133
+ display: flex;
134
+ justify-content: end;
135
+ flex-wrap: wrap;
136
+ gap: .5em;
137
+ flex: 1 1 auto;
138
+ }
139
+ </style>
140
+ <slot name=icon>
141
+ <u2-ico icon=info></u2-ico>
142
+ </slot>
143
+ <slot style="flex:1 1 auto;"></slot>
144
+ <slot name=action u2-focusgroup="remember"></slot>
145
+ `;
146
+ }
147
+ connectedCallback() {
148
+ this.setAttribute('role', 'alert');
149
+ }
150
+
151
+ show() {
152
+ this.setAttribute('open', '');
153
+ this.setAttribute('aria-live', 'assertive');
154
+ getToolsContainer().appendChild(this);
155
+ clearTimeout(this.timeout);
156
+ this.timeout = setTimeout(() => this.hide(), 5000);
157
+ }
158
+ hide() {
159
+ this.removeAttribute('open');
160
+ }
161
+ }
162
+
163
+
164
+ customElements.define('u2-alert', alert);
165
+
166
+ alert.info = function(message, options) {
167
+ const el = document.createElement('u2-alert');
168
+ el.textContent = message;
169
+ el.setAttribute('type', 'info');
170
+ const icon = document.createElement('u2-ico');
171
+ icon.setAttribute('icon', 'info');
172
+ icon.setAttribute('slot', 'icon');
173
+ icon.style.color = 'var(--color)';
174
+ el.append(icon);
175
+ el.show();
176
+ return el;
177
+ }
178
+ alert.success = function(message, options) {
179
+ const el = alert.info(message, options);
180
+ el.setAttribute('type', 'success');
181
+ return el;
182
+ }
183
+ alert.warn = function(message, options) {
184
+ const el = alert.info(message, options);
185
+ el.setAttribute('type', 'warn');
186
+ return el;
187
+ }
188
+ alert.error = function(message, options) {
189
+ const el = alert.info(message, options);
190
+ el.setAttribute('type', 'error');
191
+ return el;
192
+ }
193
+
194
+
195
+
196
+ alert.error('Something went wrong');
197
+ setTimeout(()=>alert.info('Hi was geht?'),2000)
198
+ setTimeout(()=>alert.warn('Achtung!'),2300)
199
+
200
+
201
+ window.alert = alert;
202
+
203
+ </script>
204
+
205
+
206
+ <section>
207
+ <h2>Alert</h2>
208
+
209
+ <u2-alert open>
210
+ Something went wrong<br>
211
+ <small>Details here, if any ...</small>
212
+ <button slot=action onclick="alert.warn('Achtung!')">OK</button>
213
+ <button slot=action>Cancel</button>
214
+ </u2-alert>
215
+
216
+ </section>
217
+
218
+
219
+
220
+ </div>
221
+
222
+
223
+
package/u2/experiments/u1-responsive/responsive.js ADDED
@@ -0,0 +1,62 @@
1
+
2
+ class U2Responsive extends HTMLElement {
3
+ constructor() {
4
+ super();
5
+ this.attachShadow({mode: 'open'});
6
+ this.shadowRoot.innerHTML = `
7
+ <style>
8
+ :host {
9
+ overflow: auto !important;
10
+ display: block;
11
+ }
12
+ </style>
13
+ <slot></slot>
14
+ `;
15
+ this.activeStrategy = null;
16
+ this.checkOverflow = this.checkOverflow.bind(this);
17
+ this.mutationObserver = new MutationObserver(this.checkOverflow);
18
+ this.resizeObserver = new ResizeObserver(this.checkOverflow);
19
+ }
20
+
21
+ connectedCallback() {
22
+ this.checkOverflow();
23
+ this.resizeObserver.observe(this);
24
+ this.mutationObserver.observe(this, { childList: true, subtree: true });
25
+ }
26
+
27
+ disconnectedCallback() {
28
+ this.resizeObserver.unobserve(this);
29
+ this.mutationObserver.disconnect();
30
+ }
31
+
32
+ checkOverflow() {
33
+
34
+ let allStrategies = getComputedStyle(this).getPropertyValue('--u2-responsive-strategies').split(/\s+/); // z.B. "stragetie1 strategie2 strategie3 strategie4"
35
+ allStrategies = allStrategies.filter(s => s.trim().length > 0);
36
+
37
+ let index = allStrategies.indexOf(this.activeStrategy);
38
+
39
+
40
+ if (this.scrollWidth > this.clientWidth) {
41
+ index = index + 1;
42
+ } else {
43
+ index = index - 1;
44
+ }
45
+ if (index < 0) {
46
+ this.removeAttribute(':strategy');
47
+ } else {
48
+ const strategy = allStrategies[index];
49
+ if (strategy === undefined) return;
50
+ this.activeStrategy = strategy;
51
+
52
+ const strategies = allStrategies.filter((item, i) => i <= index).join(' ');
53
+ this.setAttribute(':strategy', strategies); // sollte so aussehen "stragetie1 strategie2"
54
+ }
55
+
56
+ setTimeout(()=>{
57
+ // requestAnimationFrame(() => this.checkOverflow());
58
+ },2000)
59
+ }
60
+ }
61
+
62
+ customElements.define('u2-responsive', U2Responsive);
package/u2/experiments/u1-responsive/test.html ADDED
@@ -0,0 +1,65 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Test</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <style>
7
+
8
+ </style>
9
+ <script type="module" src="./responsive.js"></script>
10
+ </head>
11
+
12
+ <style>
13
+ u2-responsive {
14
+ --u2-responsive-strategies: hide-optional1 hide-optional2 breake;
15
+
16
+ &[\:strategy~=hide-optional1] .optional1 {
17
+ display: none;
18
+ }
19
+ &[\:strategy~=hide-optional2] .optional2 {
20
+ display: none;
21
+ }
22
+ &[\:strategy~=breake] td {
23
+ display: block;
24
+ }
25
+ }
26
+ table {
27
+ width: 100%;
28
+ border-collapse: collapse;
29
+ }
30
+ td {
31
+ border: 1px solid #000;
32
+ padding:2rem;
33
+ }
34
+
35
+ </style>
36
+
37
+ <u2-responsive>
38
+ <table>
39
+ <tr>
40
+ <td>Test</td>
41
+ <td>Test</td>
42
+ <td class=optional1>Optional 1</td>
43
+ <td class=optional2>Optional 2</td>
44
+ <td>Test</td>
45
+ <td>Test</td>
46
+ </tr>
47
+ <tr>
48
+ <td>Test</td>
49
+ <td>Test</td>
50
+ <td class=optional1>Optional 1</td>
51
+ <td class=optional2>Optional 2</td>
52
+ <td>Test</td>
53
+ <td>Test</td>
54
+
55
+ </tr>
56
+ <tr>
57
+ <td>Test</td>
58
+ <td>Test</td>
59
+ <td class=optional1>Optional 1</td>
60
+ <td class=optional2>Optional 2</td>
61
+ <td>Test</td>
62
+ <td>Test</td>
63
+ </tr>
64
+ </table>
65
+ </u2-responsive>
package/u2/experiments/u2Element.js ADDED
@@ -0,0 +1,139 @@
1
+
2
+
3
+
4
+
5
+ // import sheet from './styles.css' assert { type: 'css' };
6
+ // document.adoptedStyleSheets = [sheet];
7
+ // shadowRoot.adoptedStyleSheets = [sheet];
8
+ // polyfill:
9
+ // usage:
10
+ // sheet = await importStyleSheet('./styles.css');
11
+
12
+ // todo:
13
+ // async function importSheet(url) {
14
+ // const path = new Error().stack.split('\n')[1].match(/\((.*):/)[1];
15
+ // url = new URL(url, path).href;
16
+ // const css = await fetch(url).then(res => res.text());
17
+ // const sheet = new CSSStyleSheet();
18
+ // sheet.replaceSync(css);
19
+ // return sheet;
20
+ // }
21
+
22
+ export class U2Element extends HTMLElement {
23
+
24
+ static properties = {};
25
+
26
+ constructor() {
27
+ super();
28
+ this._attributes = new Map();
29
+
30
+ // events
31
+ for (const key of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
32
+ if (key.startsWith('on')) {
33
+ const eventName = camelToKebab(key).slice(3);
34
+ this.addEventListener(eventName, this);
35
+ }
36
+ }
37
+
38
+
39
+ // only first
40
+ const first = !this.constructor._firstDone;
41
+ if (first) {
42
+
43
+
44
+ // css
45
+ if (this.constructor.css) {
46
+ // create a styleSheet
47
+ const styleSheet = new CSSStyleSheet();
48
+ styleSheet.replaceSync(this.constructor.css);
49
+ this.constructor._generatedStyleSheet = styleSheet;
50
+ }
51
+
52
+
53
+ // outerCss
54
+ if (this.constructor.outerCss) {
55
+ const el = document.createElement('style');
56
+ el.textContent = this.tagName+' { '+this.constructor.outerCss+' } ';
57
+ document.head.append(el);
58
+ }
59
+
60
+ this.constructor._firstDone = true;
61
+ }
62
+
63
+ if (this.constructor.shadow) {
64
+ this.attachShadow({mode: 'open'});
65
+ this.shadowRoot.innerHTML = this.constructor.shadow;
66
+ this.shadowRoot.adoptedStyleSheets = [this.constructor._generatedStyleSheet];
67
+ }
68
+
69
+ //console.log(this.shadowRoot.adoptedStyleSheets);
70
+ }
71
+ static outerStyle = null;
72
+
73
+ // events
74
+ handleEvent(e) {
75
+ const method = kebabToCamel('on-'+e.type);
76
+ this[method]?.(e);
77
+ }
78
+
79
+ // attributes
80
+ attr(name) {
81
+ if (!this._attributes.has(name)) {
82
+ const signal = new Signal.State(this.getAttribute(name));
83
+ this._attributes.set(name, signal);
84
+ }
85
+ return this._attributes.get(name);
86
+ }
87
+ attributeChangedCallback(name, oldValue, newValue) {
88
+ this.attr(name).set(newValue);
89
+ }
90
+ }
91
+
92
+ const camelToKebab = (str) => str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
93
+ const kebabToCamel = (str) => str.replace(/-[a-z]/g, m => m[1].toUpperCase());
94
+
95
+
96
+ /* usage:
97
+
98
+ class myEl extends u2Element {
99
+ static properties = {
100
+ name: {
101
+ type: String,
102
+ reflect: true,
103
+ attribute: 'name'
104
+ },
105
+ age: {
106
+ type: Number,
107
+ reflect: true
108
+ }
109
+ }
110
+ onU2Open(e) {
111
+ console.log('opened');
112
+ }
113
+ static outerCss = `
114
+ display:block;
115
+ & button {
116
+ background-color: red;
117
+ }
118
+ `
119
+ }
120
+
121
+
122
+ const el = document.createElement('my-el');
123
+
124
+ el.attr('name').set('John');
125
+
126
+ el.setAttribute('name', 'John'); // same
127
+ el.name = 'John'; // same
128
+
129
+ effect(()=>{
130
+ console.log(el.attr('name').get());
131
+ })
132
+
133
+ el.name = 'Jane'; // triggers effect
134
+
135
+
136
+
137
+
138
+
139
+ */