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/el/ico/tests/fonts.html ADDED
@@ -0,0 +1,110 @@
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></script-->
7
+ <title>u2-ico Test</title>
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="./util.css">
13
+ <script type=module async src="./util.js"></script>
14
+
15
+ <link rel="stylesheet" href="../font/Material Icons.css">
16
+ <link rel="stylesheet" href="../font/LigatureSymbols.css">
17
+ <link rel="stylesheet" href="../font/RemixFilled.css">
18
+ <link rel="stylesheet" href="../font/RemixOutlined.css">
19
+ <link rel="stylesheet" href="../font/Font Awesome.css">
20
+
21
+
22
+ <link rel="stylesheet" href="../ico.css">
23
+ <script type=module async src="../ico.js"></script>
24
+
25
+ <body>
26
+
27
+ <h2>Font Awesome</h2>
28
+ <div style="display:flex; flex-wrap:wrap; gap:.2rem;" id=lsView>
29
+ <script>
30
+ for (let icon of '🧭︁,📞︁,+︁,👤︁,︁,'.split(',')) {
31
+ document.write('<div style="text-align:center"><u2-ico style="--u2-ico-font:\'Font Awesome\';">'+icon+'</u2-ico><div style="--size:12px">'+icon+'</div></div>');
32
+ }
33
+ </script>
34
+ <script>
35
+ for (let icon of '︁,︁,︁,︁'.split(',')) {
36
+ document.write('<div style="text-align:center"><u2-ico style="--u2-ico-font:\'Font Awesome\';">'+icon+'</u2-ico><div style="--size:12px">'+icon+'</div></div>');
37
+ }
38
+ </script>
39
+
40
+ </div>
41
+
42
+
43
+ <h2>LigatureSymbols</h2>
44
+ <div style="--u2-ico-font:'LigatureSymbols'">
45
+ <div style="display:flex; flex-wrap:wrap; gap:.2rem" id=lsView>
46
+ <script type=module>
47
+ ligaturesFromFamily('LigatureSymbols').then(function(ligas){
48
+ let str = '';
49
+ for (let icon of Object.keys(ligas)) {
50
+ str += '<div style="text-align:center"><u2-ico>'+icon+'</u2-ico><div style="font-size:18px">'+icon+'</div></div>';
51
+ }
52
+ lsView.innerHTML = str;
53
+ });
54
+ </script>
55
+ <script>
56
+ for (let icon of 'twitter,youtube,copy,not_found'.split(',')) {
57
+ document.write('<div style="text-align:center"><u2-ico>'+icon+'</u2-ico><div style="font-size:12px">'+icon+'</div></div>');
58
+ }
59
+ </script>
60
+ </div>
61
+ </div>
62
+
63
+ <h2>Material Icons</h2>
64
+ <div style="--u2-ico-font:'Material Icons'">
65
+ <!--select onchange="this.parentNode.style.setProperty('--u2-ico-font',this.value)">
66
+ <option value="Material Icons">--u2-ico-font:'Material Icons'</option>
67
+ <option value="Material Icons Outlined">--u2-ico-font:'Material Icons Outlined'</option>
68
+ <option value="Material Icons Round">--u2-ico-font:'Material Icons Round'</option>
69
+ <option value="Material Icons Sharp">--u2-ico-font:'Material Icons Sharp'</option>
70
+ <option value="Material Icons Two Tone">--u2-ico-font:'Material Icons Two Tone'</option>
71
+ </select><br-->
72
+ <div style="display:flex; flex-wrap:wrap; gap:.2rem" id=materialView>
73
+ <script type=module>
74
+ /*
75
+ ligaturesFromFamily('Material Icons').then(function(ligas){
76
+ let str = '';
77
+ for (let icon of Object.keys(ligas)) {
78
+ str += '<u2-ico title="'+icon+'">'+icon+'</u2-ico>';
79
+ }
80
+ materialView.innerHTML = str;
81
+ });
82
+ */
83
+ </script>
84
+ <script>
85
+ for (let icon of 'star,add,clear,call,snowboarding,not_found'.split(',')) {
86
+ document.write('<div style="text-align:center"><u2-ico>'+icon+'</u2-ico><div style="font-size:12px">'+icon+'</div></div>');
87
+ }
88
+ </script>
89
+ </div>
90
+ </div>
91
+
92
+ <h2>Remixicon Font</h2>
93
+ <div style="--u2-ico-font:'RemixOutlined'">
94
+ <div style="display:flex; flex-wrap:wrap; gap:.2rem" id=remixView>
95
+ <script type=module>
96
+ ligaturesFromFamily('RemixOutlined').then(function(ligas){
97
+ let str = '';
98
+ for (let icon of Object.keys(ligas)) {
99
+ str += '<u2-ico title="'+icon+'">'+icon+'</u2-ico>';
100
+ }
101
+ remixView.innerHTML = str;
102
+ });
103
+ </script>
104
+ <script>
105
+ for (let icon of 'star,heart,home,file,key,sun,not_found'.split(',')) {
106
+ document.write('<div style="text-align:center"><u2-ico>'+icon+'</u2-ico><div style="font-size:12px">'+icon+'</div></div>');
107
+ }
108
+ </script>
109
+ </div>
110
+ </div>
package/el/ico/tests/ico-directory.html ADDED
@@ -0,0 +1,254 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width">
6
+ <title>u2-ico Test</title>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+
12
+ <script type=module async src="../../../u2/auto.min.js"></script>
13
+
14
+
15
+ <link rel="stylesheet" href="../font/Material Icons.css">
16
+ <link rel="stylesheet" href="../ico.css">
17
+ <script type=module async src="../ico.js"></script>
18
+
19
+ <!--script type=module src="./util.js"></script>
20
+ <link rel="stylesheet" href="./util.css"-->
21
+ <body>
22
+
23
+ <style>
24
+ u2-ico[state=fail] {
25
+ color:red;
26
+ --size:10px;
27
+ }
28
+ </style>
29
+
30
+ <section>
31
+ <h2>Comparison tool</h2>
32
+ <input style="width:100%" id=namesInp value="star search menu home facebook chevron-right link">
33
+ <div style="overflow:auto; white-space:nowrap; max-height:60vh">
34
+ <table id=table class="u2-table -Sticky">
35
+ <thead>
36
+ <tbody>
37
+ <tr style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/bytesize-icons@1.4.0/dist/icons/'">
38
+ <td>
39
+ </table>
40
+ </div>
41
+
42
+ <style style="display:block" contenteditable style="font-size:12px">
43
+ u2-ico {
44
+ color:#05a;
45
+ /* Use with caution: */
46
+ xfill: currentColor;
47
+ xstroke: currentColor;
48
+ xstroke-width: 5%; /* % is dependent relative to the displayed size and not the defined size = better */
49
+ xstroke-linecap: round;
50
+ xstroke-linejoin: round;
51
+ }
52
+ </style>
53
+
54
+ <!--
55
+ todo: https://icones.js.org/
56
+ -->
57
+ <script type=module>
58
+ let directories = {
59
+ 'Material': 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg',
60
+ 'Teenyicons': 'https://cdn.jsdelivr.net/npm/teenyicons@0.4.1/outline/',
61
+ 'Feather': 'https://cdn.jsdelivr.net/npm/feather-icons@4.29.0/dist/icons/',
62
+ 'Lucide': 'https://cdn.jsdelivr.net/npm/lucide-static@0.309.0/icons/',
63
+ 'Bootstrap': 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/icons/',
64
+ 'Octicons': 'https://cdn.jsdelivr.net/npm/octicons@8.5.0/build/svg/',
65
+ 'Bytesize': 'https://cdn.jsdelivr.net/npm/bytesize-icons@1.4.0/dist/icons/',
66
+ 'Ionicons': 'https://cdn.jsdelivr.net/npm/ionicons@7.1.0/dist/svg/',
67
+ 'Tabler Icons': 'https://cdn.jsdelivr.net/npm/@tabler/icons@2.11.0/icons/',
68
+
69
+ 'Phosphor Icons thin': 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/thin/{icon}-thin.svg',
70
+ 'Phosphor Icons regular':'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/regular/',
71
+ 'Phosphor Icons light': 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/light/{icon}-light.svg',
72
+ 'Phosphor Icons fill': 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/fill/{icon}-fill.svg',
73
+ 'Phosphor Icons duotone':'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/duotone/{icon}-duotone.svg',
74
+ 'Phosphor Icons bold': 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/bold/{icon}-bold.svg',
75
+
76
+ 'Unicons thinline': 'https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.6/svg/thinline/',
77
+ 'Unicons solid': 'https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.6/svg/solid/',
78
+ //'Unicons monochrome': 'https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.6/svg/monochrome/', // using classes does not work
79
+ 'Unicons line': 'https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.6/svg/line/',
80
+
81
+ 'Fontawesome regular': 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/regular/',
82
+ 'Fontawesome solid': 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/solid/',
83
+ 'Fontawesome brands': 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/brands/',
84
+
85
+ 'Heroicons outline': 'https://cdn.jsdelivr.net/npm/heroicons@2.0.16/outline/',
86
+ 'Heroicons solid': 'https://cdn.jsdelivr.net/npm/heroicons@2.0.16/solid/',
87
+
88
+ 'Dripicons': 'https://cdn.jsdelivr.net/npm/dripicons@2.0.0/SVG/',
89
+ 'CoreUI Icons': 'https://cdn.jsdelivr.net/npm/@coreui/icons@2.0.1/svg/free/cil-',
90
+ 'open-iconic': 'https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/',
91
+ 'Radix': 'https://cdn.jsdelivr.net/gh/radix-ui/icons@3.1.0/packages/radix-icons/icons/15/',
92
+ 'Typicons': 'https://cdn.jsdelivr.net/npm/typicons.font@2.1.2/src/svg/',
93
+ 'Boxicons regular': 'https://cdn.jsdelivr.net/npm/boxicons@2.1.4/svg/regular/bx-',
94
+ 'Boxicons solid': 'https://cdn.jsdelivr.net/npm/boxicons@2.1.4/svg/solid/bxs-',
95
+ 'linearicons': 'https://cdn.jsdelivr.net/npm/linearicons@1.0.2/dist/svg/',
96
+ 'FluentUI regular': 'https://cdn.jsdelivr.net/npm/@svg-icons/fluentui-system-regular@1.56.0/',
97
+ 'FluentUI filled': 'https://cdn.jsdelivr.net/npm/@svg-icons/fluentui-system-filled@1.56.0/',
98
+ 'Evil Icons': 'https://cdn.jsdelivr.net/npm/evil-icons@1.10.1/assets/icons/ei-',
99
+ 'Eva Icons fill': 'https://cdn.jsdelivr.net/npm/eva-icons@1.1.3/fill/svg/',
100
+ 'Eva Icons outline': 'https://cdn.jsdelivr.net/npm/eva-icons@1.1.3/outline/svg/{icon}-outline.svg',
101
+ 'Zondicons': 'https://cdn.jsdelivr.net/npm/zondicons@1.2.0/',
102
+ 'holasvg-icons': 'https://cdn.jsdelivr.net/gh/marianabeldi/holasvg-icons/icons/',
103
+ 'Jam icons': 'https://cdn.jsdelivr.net/gh/michaelampr/jam@3.1.0/icons/',
104
+ 'entypo': 'https://cdn.jsdelivr.net/npm/entypo@2.2.1/src/Entypo/',
105
+ 'Adobe Spectrum': 'https://cdn.jsdelivr.net/npm/@adobe/spectrum-css-workflow-icons@1.4.2/24/{IconName}.svg',
106
+ 'Momentum': 'https://cdn.jsdelivr.net/npm/@momentum-ui/icons@8.32.0/svg/{icon}_16.svg',
107
+ 'mono icons': 'https://cdn.jsdelivr.net/npm/mono-icons@1.3.1/svg/',
108
+ 'line awesome': 'https://cdn.jsdelivr.net/npm/line-awesome@1.3.0/svg/',
109
+ 'flat color icons': 'https://cdn.jsdelivr.net/npm/flat-color-icons@1.1.0/svg/',
110
+ 'icons8 windows-10-icons': 'https://cdn.jsdelivr.net/npm/windows-10-icons@1.0.1/svg/production/{icon_name}.svg',
111
+ 'fticons': 'https://cdn.jsdelivr.net/npm/@financial-times/fticons@1.23.1/svg/',
112
+ 'photon icons': 'https://cdn.jsdelivr.net/npm/photon-icons@5.4.0/icons/desktop/',
113
+ 'devicons': 'https://cdn.jsdelivr.net/npm/devicons@1.8.0/!SVG/{icon_name}',
114
+ 'Figma UI Icons': 'https://cdn.jsdelivr.net/npm/css.gg@2.0.0/icons/svg/',
115
+ 'ifolio licons': 'https://cdn.jsdelivr.net/gh/ifolio/licons@master/svg/',
116
+ 'Majesticons line': 'https://cdn.jsdelivr.net/npm/majesticons@2.1.2/line/{icon}-line.svg',
117
+ 'Majesticons solid': 'https://cdn.jsdelivr.net/npm/majesticons@2.1.2/solid/{icon}.svg',
118
+ //'SF Symbols': 'https://cdn.jsdelivr.net/gh/brendanballon/sfsymbols-svg@1.0/symbols/{icon.name}.svg',
119
+ //'SF Symbols fill': 'https://cdn.jsdelivr.net/gh/brendanballon/sfsymbols-svg@1.0/symbols/{icon.name}.fill.svg',
120
+ }
121
+ let names = [];
122
+ function parseTable(){
123
+ names = namesInp.value.split(' ');
124
+ let str = '<thead><tr><th>Icon-Set';
125
+ for (let name of names) {
126
+
127
+ ///package/gh/:user/:repo@:version/:structure?
128
+ str += '<th style="text-align:center">'+name;
129
+ }
130
+ str += '<tbody>';
131
+
132
+ for (let [set,url] of Object.entries(directories)) {
133
+ let link = url.split(/{icon.*}/i)[0];
134
+ str +=
135
+ `<tr style="--u2-ico-dir:'${url}';">
136
+ <th>
137
+ <a href="${link}" target="${set}">${set}</a>`;
138
+ for (let name of names) {
139
+ str += '<td style="text-align:center"><u2-ico icon="'+name+'">-</u2-ico>';
140
+ }
141
+ }
142
+ document.getElementById('table').innerHTML = str;
143
+ }
144
+ parseTable();
145
+ namesInp.addEventListener('change',parseTable)
146
+
147
+
148
+
149
+ // list all icons
150
+ document.getElementById('table').addEventListener('click', async function(e){
151
+
152
+ const href = e.target.closest('tr').querySelector('a').href;
153
+
154
+ const dialog = document.createElement('dialog');
155
+ dialog.innerHTML = 'loading...';
156
+ dialog.style.setProperty('--u2-ico-dir', "'"+href+"'");
157
+ dialog.style.width = '100vw';
158
+ dialog.style.maxHeight = '100vh';
159
+ dialog.style.overflow = 'auto';
160
+ document.body.append(dialog);
161
+ dialog.showModal();
162
+
163
+ const [, api, , path] = href.replace('cdn.jsdelivr.net', 'data.jsdelivr.com/v1/package').match(/(.*@[^/]+)(\/)(.*)/);
164
+ const parts = path.split('/');
165
+ const data = await fetch(api).then(res=>res.json());
166
+ let curr = data;
167
+ for (let part of parts) {
168
+ if (part === '') break;
169
+ curr = curr.files.find(item=>item.name===part);
170
+ }
171
+
172
+ dialog.innerHTML = '<div id=icoList class=u2-grid></div>';
173
+
174
+ curr.files.forEach(function(file){
175
+ let name = file.name;
176
+ if (!name.endsWith('.svg')) return;
177
+ let icon = name.replace('.svg','');
178
+ const item = document.createElement('div');
179
+ item.innerHTML = '<u2-ico xicon="'+icon+'">'+icon+'</u2-ico><br>'+icon;
180
+ dialog.querySelector('#icoList').append(item);
181
+ })
182
+
183
+ });
184
+
185
+ document.addEventListener('click',e=>{
186
+ const ico = e.target.closest('u2-ico');
187
+ if (!ico) return;
188
+ e.stopImmediatePropagation();
189
+ navigator.clipboard.writeText(ico.innerHTML.trim());
190
+ ico.style.backgroundColor = '#fe09';
191
+ ico.style.outline = '.1em solid #fe09';
192
+ ico.style.transition = '.1s';
193
+ setTimeout(() => {
194
+ ico.style.backgroundColor = '';
195
+ ico.style.outline = '';
196
+ }, 500);
197
+ },true)
198
+
199
+
200
+ </script>
201
+ <style>
202
+ #table {
203
+ font-size:12px;
204
+ }
205
+ #table tr {
206
+ vertical-align:middle;
207
+ }
208
+ #table u2-ico {
209
+ --size:30px;
210
+ display:block;
211
+ xvertical-align: middle;
212
+ }
213
+ #table u2-ico[state=fail] {
214
+ --size:12px;
215
+ }
216
+
217
+ #icoList {
218
+ --u2-Gap:1rem;
219
+ --u2-Items-width:9em;
220
+ text-align:center;
221
+ font-size:11px;
222
+ }
223
+ #icoList > * {
224
+ padding:.3rem .1rem;
225
+ --line-height:1.1em;
226
+ }
227
+ #icoList u2-ico {
228
+ background:#fff;
229
+ transition: .15s;
230
+ transform:scale(1.001);
231
+ margin-bottom:.5em;
232
+ }
233
+ #icoList :hover u2-ico {
234
+ transform:scale(2.1);
235
+ }
236
+ </style>
237
+ </section>
238
+
239
+
240
+ <section>
241
+ using: --u2-ico-dir:"https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg"
242
+ <div style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg'">
243
+ <u2-ico icon=search></u2-ico>
244
+ <u2-ico icon=facebook></u2-ico>
245
+ <u2-ico icon=alarm></u2-ico>
246
+ </div>
247
+
248
+ using: --u2-ico-font:'Material Icons' (as reference)
249
+ <div style="--u2-ico-font:'Material Icons'">
250
+ <u2-ico>search</u2-ico>
251
+ <u2-ico icon=facebook></u2-ico>
252
+ <u2-ico icon=alarm></u2-ico>
253
+ </div>
254
+ </section>
package/el/ico/tests/minimal.html ADDED
@@ -0,0 +1,46 @@
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/simple.css">
9
+
10
+ <link rel=stylesheet href="../ico.css">
11
+ <script src="../ico.js" type=module async></script>
12
+
13
+ <body>
14
+
15
+ <section class="main">
16
+
17
+ <u2-ico aria-label="alien">
18
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"></path></svg>
19
+ </u2-ico>
20
+
21
+ </section>
22
+
23
+
24
+ <style class="main">
25
+ @font-face {
26
+ font-family: 'RemixFilled';
27
+ font-style: normal;
28
+ font-weight: 400;
29
+ src: url(https://cdn.jsdelivr.net/npm/remixicon-ligatures@2.5.0/fonts/RemixFilled.woff2) format('woff2');
30
+ }
31
+
32
+ [icon="book"] {
33
+ --u2-ico-dir: 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/regular/';
34
+ color:blue;
35
+ }
36
+ [icon="star"] {
37
+ --u2-ico-font: 'RemixFilled';
38
+ color:green;
39
+ }
40
+ u2-ico:has(>svg) {
41
+ color:red;
42
+ }
43
+ u2-ico {
44
+ --size:3rem;
45
+ }
46
+ </style>
package/el/ico/tests/test.html ADDED
@@ -0,0 +1,210 @@
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
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+ <link rel="stylesheet" href="./util.css">
12
+ <!--script type=module src="./util.js"></script-->
13
+
14
+ <link rel="stylesheet" href="../font/Material Icons.css">
15
+ <link rel="stylesheet" href="../font/LigatureSymbols.css">
16
+ <link rel="stylesheet" href="../font/RemixFilled.css">
17
+ <link rel="stylesheet" href="../font/RemixOutlined.css">
18
+ <link rel="stylesheet" href="../font/Font Awesome.css">
19
+
20
+
21
+ <link rel="stylesheet" href="../ico.css">
22
+ <script type=module async src="../ico.js"></script>
23
+
24
+ <body>
25
+
26
+ <label>
27
+ Change Color <input id=colorChooser name=y type=color oninput="document.documentElement.style.setProperty('--icon-color', this.value);">
28
+ </label>
29
+ <style>
30
+ u2-ico {
31
+ color:var(--icon-color);
32
+ }
33
+ </style>
34
+
35
+ <h2>Variants</h2>
36
+ <div>
37
+ <table>
38
+ <tr>
39
+ <td>
40
+ Variant
41
+ <br>&nbsp;
42
+ <td>
43
+ Result
44
+ <br>&nbsp;
45
+ <td>
46
+ Fails
47
+ <br>&nbsp;
48
+ <td>
49
+ No JS needed
50
+ <br>&nbsp;
51
+ <td>
52
+ Fast
53
+ <br>&nbsp;
54
+ <td>
55
+ DX
56
+ <br><small>Easy to implement</small>
57
+ <td>
58
+ Beautifully
59
+ <br><small> aligned, and flat</small>
60
+ <td>
61
+ Priority <small>
62
+ <br>if all variants are declared.</small>
63
+ <tr style="--u2-ico-dir: 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';">
64
+ <td>direct SVG:
65
+ <td>
66
+ <u2-ico>
67
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
68
+ <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z"></path>
69
+ </svg>
70
+ </u2-ico>
71
+ <td> <u2-ico></u2-ico>
72
+ <td>✓
73
+ <td>✓
74
+ <td>
75
+ <td>✓
76
+ <td>1
77
+ <tr style="--u2-ico-dir: 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';" >
78
+ <td>--u2-ico-dir
79
+ <td>
80
+ <u2-ico icon=search aria-label=search></u2-ico>
81
+ <u2-ico>search</u2-ico>
82
+ <td>
83
+ <u2-ico>blahblah</u2-ico>
84
+ <td>
85
+ <td>
86
+ <td>✓
87
+ <td>✓
88
+ <td>2
89
+ <tr>
90
+ <td>--u2-ico-font
91
+ <td>
92
+ <u2-ico style="--u2-ico-font:Material Icons" icon=search aria-label=search></u2-ico>
93
+ <u2-ico style="--u2-ico-font:Material Icons">search</u2-ico>
94
+
95
+ <td>
96
+ <u2-ico style="--u2-ico-font:Material Icons" icon="blah"></u2-ico>
97
+ <u2-ico style="--u2-ico-font:Material Icons">blah</u2-ico>
98
+ <td>✓
99
+ <td>
100
+ <td>✓
101
+ <td>✓
102
+ <td>3
103
+ <tr>
104
+ <td>UTF-8 (🔍) beta:
105
+ <td>
106
+ <u2-ico icon="🔍" aria-label=search></u2-ico>
107
+ <u2-ico>🔍</u2-ico>
108
+ <td>
109
+ <u2-ico>&#x110000;</u2-ico>
110
+ <u2-ico icon="&#x110000;"></u2-ico>
111
+ <td>✓
112
+ <td>✓
113
+ <td>✓
114
+ <td>
115
+ <td>?
116
+ </table>
117
+ </div>
118
+
119
+
120
+ <h2>Tests</h2>
121
+ <div id="variants">
122
+
123
+ <div>
124
+ --u2-ico-dir, innerHTML
125
+ <u2-ico style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg'" >
126
+ search
127
+ </u2-ico>
128
+ </div>
129
+ <div>
130
+ --u2-ico-dir, icon-attribute, {icon}
131
+ <u2-ico icon=search style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg'"></u2-ico>
132
+ </div>
133
+ <div>
134
+ --u2-ico-dir, icon-attribute, {icon_name}
135
+ <u2-ico icon=chevron-right style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg'"></u2-ico>
136
+ </div>
137
+ <div>
138
+ --u2-ico-dir, icon-attribute, {icon} without ".svg" suffix
139
+ <u2-ico icon="search/baseline" style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}'"></u2-ico>
140
+ </div>
141
+ <div>
142
+ --u2-ico-dir, local (#icon)
143
+ <u2-ico style="--u2-ico-dir:'#icon-'" >
144
+ search
145
+ </u2-ico>
146
+
147
+ <div hidden>
148
+ <svg id=icon-search width="24" height="24" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
149
+ </div>
150
+ </div>
151
+ <div>
152
+ --u2-ico-dir, external part (#icon)
153
+ <u2-ico style="--u2-ico-dir:'./util-multi.svg#'">
154
+ search
155
+ </u2-ico>
156
+ <u2-ico style="--u2-ico-dir:'./util-multi.svg#'">
157
+ star
158
+ </u2-ico>
159
+ </div>
160
+ <div>
161
+ direct svg
162
+ <u2-ico>
163
+ <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
164
+ </u2-ico>
165
+ </div>
166
+ <div>
167
+ --u2-ico-font
168
+ <u2-ico style="--u2-ico-font:Material Icons">
169
+ search
170
+ </u2-ico>
171
+ </div>
172
+
173
+
174
+ </div>
175
+
176
+
177
+
178
+
179
+ <h2>Vertical alignement</h2>
180
+ <div style="--u2-ico-font:'Material Icons'">
181
+ <h3>Using [inline]</h3>
182
+ Vertical-align initial: <u2-ico inline>star</u2-ico><br>
183
+ Vertical-align baseline: <u2-ico style="vertical-align:baseline" inline>star</u2-ico><br>
184
+ Vertical-align middle: <u2-ico style="vertical-align:middle" inline>star</u2-ico><br>
185
+ Vertical-align text-bottom: <u2-ico style="vertical-align:text-bottom" inline>star</u2-ico><br>
186
+ Vertical-align bottom: <u2-ico style="vertical-align:bottom" inline>star</u2-ico><br>
187
+ <button>
188
+ <u2-ico inline>star</u2-ico>
189
+ Button
190
+ <u2-ico inline>star</u2-ico>
191
+ </button>
192
+ <button>
193
+ Button no icon
194
+ </button>
195
+
196
+ <h3>Not using [inline]</h3>
197
+ Vertical-align initial: <u2-ico>star</u2-ico><br>
198
+ Vertical-align baseline: <u2-ico style="vertical-align:baseline">star</u2-ico><br>
199
+ Vertical-align middle: <u2-ico style="vertical-align:middle">star</u2-ico><br>
200
+ Vertical-align text-bottom: <u2-ico style="vertical-align:text-bottom">star</u2-ico><br>
201
+ Vertical-align bottom: <u2-ico style="vertical-align:bottom">star</u2-ico><br>
202
+
203
+ <button>
204
+ <u2-ico>star</u2-ico>
205
+ Button
206
+ <u2-ico>star</u2-ico>
207
+ </button>
208
+ </div>
209
+
210
+
package/el/ico/tests/util-multi.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg>
2
+ <defs>
3
+ <svg id="star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star" aria-label="-"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
4
+ <svg id="search" xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" aria-label="-"><path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"></path></svg>
5
+ </defs>
6
+ </svg>
package/el/ico/tests/util.css ADDED
@@ -0,0 +1,2 @@
1
+ html { font-size:calc(10px + 1vw); }
2
+ body:hover u2-ico { outline:1px solid #ccc; }