qc-trousse-sdg 1.4.0-develop.1 → 1.4.1

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 (294) hide show
  1. package/README.md +26 -5
  2. package/dist/css/qc-sdg-design-tokens.min.css +1 -1
  3. package/dist/css/qc-sdg-no-grid.min.css +1 -1
  4. package/dist/css/qc-sdg.min.css +1 -1
  5. package/dist/fonts/open-sans-v43-latin-500.woff2 +0 -0
  6. package/dist/fonts/open-sans-v43-latin-500italic.woff2 +0 -0
  7. package/dist/fonts/open-sans-v43-latin-600.woff2 +0 -0
  8. package/dist/fonts/open-sans-v43-latin-600italic.woff2 +0 -0
  9. package/dist/fonts/open-sans-v43-latin-700.woff2 +0 -0
  10. package/dist/fonts/open-sans-v43-latin-700italic.woff2 +0 -0
  11. package/dist/fonts/open-sans-v43-latin-italic.woff2 +0 -0
  12. package/dist/fonts/open-sans-v43-latin-regular.woff2 +0 -0
  13. package/dist/fonts/roboto-mono-v30-latin-500.woff2 +0 -0
  14. package/dist/fonts/roboto-mono-v30-latin-500italic.woff2 +0 -0
  15. package/dist/fonts/roboto-mono-v30-latin-600.woff2 +0 -0
  16. package/dist/fonts/roboto-mono-v30-latin-600italic.woff2 +0 -0
  17. package/dist/fonts/roboto-mono-v30-latin-700.woff2 +0 -0
  18. package/dist/fonts/roboto-mono-v30-latin-700italic.woff2 +0 -0
  19. package/dist/fonts/roboto-mono-v30-latin-italic.woff2 +0 -0
  20. package/dist/fonts/roboto-mono-v30-latin-regular.woff2 +0 -0
  21. package/dist/fonts/roboto-v48-latin-500.woff2 +0 -0
  22. package/dist/fonts/roboto-v48-latin-500italic.woff2 +0 -0
  23. package/dist/fonts/roboto-v48-latin-600.woff2 +0 -0
  24. package/dist/fonts/roboto-v48-latin-600italic.woff2 +0 -0
  25. package/dist/fonts/roboto-v48-latin-700.woff2 +0 -0
  26. package/dist/fonts/roboto-v48-latin-700italic.woff2 +0 -0
  27. package/dist/fonts/roboto-v48-latin-italic.woff2 +0 -0
  28. package/dist/fonts/roboto-v48-latin-regular.woff2 +0 -0
  29. package/dist/img/icon/adresse.svg +4 -0
  30. package/dist/img/icon/arrow-up.svg +3 -0
  31. package/dist/img/icon/calendar.svg +1 -0
  32. package/dist/img/icon/checkmark.svg +3 -0
  33. package/dist/img/icon/chevron-up-thin.svg +5 -0
  34. package/dist/img/{chevron-white.svg → icon/chevron-up.svg} +1 -1
  35. package/{public/img → dist/img/icon}/clipboard.svg +3 -3
  36. package/dist/img/icon/clock.svg +1 -0
  37. package/dist/img/icon/email.svg +1 -0
  38. package/dist/img/icon/error.svg +1 -0
  39. package/{public/img/exclamation-white.svg → dist/img/icon/exclamation.svg} +2 -2
  40. package/{public/img → dist/img/icon}/external-link.svg +2 -2
  41. package/dist/img/icon/information.svg +1 -0
  42. package/dist/img/icon/ligth-bulb.svg +1 -0
  43. package/{public/img → dist/img/icon}/minus.svg +1 -1
  44. package/dist/img/icon/note.svg +1 -0
  45. package/dist/img/icon/phone.svg +1 -0
  46. package/dist/img/{plus.svg → icon/plus.svg} +1 -1
  47. package/{public/img → dist/img/icon}/question-mark.svg +2 -2
  48. package/dist/img/icon/search-thin.svg +10 -0
  49. package/dist/img/icon/search.svg +1 -0
  50. package/dist/img/icon/success.svg +1 -0
  51. package/dist/img/icon/user.svg +6 -0
  52. package/dist/img/icon/warning.svg +1 -0
  53. package/dist/img/icon/website.svg +1 -0
  54. package/dist/img/icon/xclose.svg +1 -0
  55. package/dist/js/qc-sdg.min.js +1 -1
  56. package/package.json +11 -3
  57. package/playwright.config.ts +79 -0
  58. package/plugins/buildDevDoc.js +36 -0
  59. package/plugins/buildHtmlDoc.js +43 -0
  60. package/plugins/buildTestFixtures.js +37 -0
  61. package/public/css/qc-doc-sdg.css +4 -67
  62. package/public/css/qc-sdg-design-tokens.css +17 -0
  63. package/public/css/qc-sdg-no-grid.css +1991 -1108
  64. package/public/css/qc-sdg.css +1992 -1109
  65. package/public/img/checkmark.svg +3 -0
  66. package/public/img/question.svg +10 -0
  67. package/public/index.html +3104 -1387
  68. package/public/js/qc-doc-sdg.js +40847 -33699
  69. package/public/js/qc-sdg.js +6037 -757
  70. package/rollup.config.js +67 -41
  71. package/scripts/buildImagesMap.js +85 -0
  72. package/scripts/check-release-note.sh +11 -0
  73. package/scripts/compile-doc.sh +4 -0
  74. package/src/doc/_index.html +100 -0
  75. package/src/doc/_nav.html +53 -0
  76. package/src/doc/_test.html +32 -0
  77. package/src/doc/components/Code.svelte +6 -2
  78. package/src/doc/components/TopNav.svelte +8 -9
  79. package/src/doc/components/color-doc.svelte +1 -1
  80. package/src/doc/ejs/layout/index.ejs +129 -0
  81. package/src/doc/qc-doc-sdg.js +1 -2
  82. package/src/doc/scss/components/_code.scss +1 -1
  83. package/src/doc/scss/jQueryUI/_jquery-ui.autocomplete.scss +1 -0
  84. package/src/doc/scss/qc-doc-sdg.scss +1 -1
  85. package/src/doc/scss/settings/_base.scss +4 -0
  86. package/src/sdg/_components.js +9 -2
  87. package/src/sdg/{components → bases}/Icon/Icon.svelte +13 -6
  88. package/src/sdg/bases/Icon/IconDoc.ejs +129 -0
  89. package/src/sdg/{components → bases}/Icon/IconWC.svelte +3 -1
  90. package/src/sdg/bases/Icon/Test/IconEmbeddedTest.html +1 -0
  91. package/src/sdg/bases/Icon/Test/IconEmbeddedTest.svelte +168 -0
  92. package/src/sdg/bases/Icon/Test/iconTest.html +156 -0
  93. package/src/sdg/bases/Icon/_icon.html +254 -0
  94. package/src/sdg/bases/Icon/_icons.scss +47 -0
  95. package/src/sdg/{scss/base → bases/accessibility}/_accessibility.scss +1 -1
  96. package/src/sdg/bases/colors/_colors.html +112 -0
  97. package/src/sdg/bases/figures/_figure.html +16 -0
  98. package/src/sdg/{scss/base → bases/form}/_form.scss +10 -3
  99. package/src/sdg/bases/grid/_grid.html +118 -0
  100. package/src/sdg/bases/headings/_headings.html +18 -0
  101. package/src/sdg/bases/headings/_headings.scss +25 -0
  102. package/src/sdg/{scss/base → bases/layout}/_layout.scss +1 -4
  103. package/src/sdg/bases/links/_links.html +104 -0
  104. package/src/sdg/bases/links/_links.scss +51 -0
  105. package/src/sdg/bases/lists/_lists.html +27 -0
  106. package/src/sdg/bases/separator/_separator.html +7 -0
  107. package/src/sdg/bases/separator/_separator.scss +5 -0
  108. package/src/sdg/bases/shadings/_shadings.html +14 -0
  109. package/src/sdg/{scss/base → bases/shadings}/_shadings.scss +1 -1
  110. package/src/sdg/bases/typography/_font.html +45 -0
  111. package/src/sdg/bases/typography/_fonts.scss +162 -0
  112. package/src/sdg/bases/typography/_paragraph.html +17 -0
  113. package/src/sdg/bases/typography/_paragraph.scss +33 -0
  114. package/src/sdg/components/Alert/Alert.svelte +2 -5
  115. package/src/sdg/components/Alert/AlertWC.svelte +3 -2
  116. package/src/sdg/components/Alert/_alert.html +110 -0
  117. package/src/sdg/{scss/components → components/Alert}/_alert.scss +1 -1
  118. package/src/sdg/components/Button/Button.svelte +50 -0
  119. package/src/sdg/components/Button/ButtonWC.svelte +36 -0
  120. package/src/sdg/components/Button/Test/buttonTest.html +349 -0
  121. package/src/sdg/components/Button/_button.html +186 -0
  122. package/src/sdg/components/Button/_button.scss +202 -0
  123. package/src/sdg/components/CharCount/_charCount.html +7 -0
  124. package/src/sdg/components/Checkbox/Checkbox.svelte +77 -0
  125. package/src/sdg/components/Checkbox/CheckboxWC.svelte +49 -0
  126. package/src/sdg/components/Checkbox/_checkbox.html +86 -0
  127. package/src/sdg/components/Checkbox/_checkbox.scss +70 -0
  128. package/src/sdg/components/Checkbox/updateInput.svelte.js +23 -0
  129. package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte +56 -0
  130. package/src/sdg/components/ChoiceGroup/ChoiceGroupWC.svelte +47 -0
  131. package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte +261 -0
  132. package/src/sdg/components/ChoiceGroup/Test/checkboxEmbeddedTest.html +1 -0
  133. package/src/sdg/components/ChoiceGroup/Test/checkboxTest.html +253 -0
  134. package/src/sdg/components/ChoiceGroup/Test/radiosEmbeddedTest.html +1 -0
  135. package/src/sdg/components/ChoiceGroup/Test/radiosTest.html +185 -0
  136. package/src/sdg/components/ChoiceGroup/ToggleSwitchGroupWC.svelte +56 -0
  137. package/src/sdg/components/ChoiceGroup/_choiceGroup.html +285 -0
  138. package/src/sdg/components/ChoiceGroup/_choiceGroup.scss +32 -0
  139. package/src/sdg/components/ChoiceGroup/_selectionButton.scss +53 -0
  140. package/src/sdg/components/ChoiceGroup/_selectionButtons.html +130 -0
  141. package/src/sdg/components/DropdownList/DropdownList.svelte +394 -0
  142. package/src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte +42 -0
  143. package/src/sdg/components/DropdownList/DropdownListButton/_dropdownListButton.scss +55 -0
  144. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte +110 -0
  145. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/DropdownListItemsMultiple.svelte +185 -0
  146. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss +19 -0
  147. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/DropdownListItemsSingle.svelte +136 -0
  148. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss +11 -0
  149. package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss +67 -0
  150. package/src/sdg/components/DropdownList/SelectWC.svelte +158 -0
  151. package/src/sdg/components/DropdownList/Test/DropdownListEmbeddedTest.svelte +89 -0
  152. package/src/sdg/components/DropdownList/Test/dropdownListEmbeddedTest.html +1 -0
  153. package/src/sdg/components/DropdownList/Test/dropdownListTest.html +194 -0
  154. package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js +113 -0
  155. package/src/sdg/components/DropdownList/_dropdownList.scss +73 -0
  156. package/src/sdg/components/DropdownList/_select.html +212 -0
  157. package/src/sdg/components/ExternalLink/ExternalLink.svelte +1 -1
  158. package/src/sdg/components/Fieldset/Fieldset.svelte +73 -0
  159. package/src/sdg/components/Fieldset/_fieldset.scss +95 -0
  160. package/src/sdg/components/FormError/FormError.svelte +51 -0
  161. package/src/sdg/components/FormError/_formError.scss +21 -0
  162. package/src/sdg/components/FormfieldRow/_formfieldRow.html +108 -0
  163. package/src/sdg/components/IconButton/IconButton.svelte +1 -1
  164. package/src/sdg/components/IconButton/_iconButton.scss +14 -0
  165. package/src/sdg/components/Label/Label.svelte +28 -0
  166. package/src/sdg/components/Label/LabelText.svelte +4 -0
  167. package/src/sdg/components/Label/_label.scss +19 -0
  168. package/src/sdg/components/Notice/Notice.svelte +1 -2
  169. package/src/sdg/components/Notice/NoticeWC.svelte +3 -0
  170. package/src/sdg/components/Notice/_notice.html +141 -0
  171. package/src/sdg/{scss/components → components/Notice}/_notice.scss +1 -1
  172. package/src/sdg/components/PivFooter/PivFooter.svelte +8 -9
  173. package/src/sdg/components/PivFooter/PivFooterWC.svelte +6 -14
  174. package/src/sdg/components/PivFooter/_pivFooter.html +153 -0
  175. package/src/sdg/{scss/components → components/PivFooter}/_pivFooter.scss +1 -1
  176. package/src/sdg/components/PivHeader/PivHeader.svelte +47 -53
  177. package/src/sdg/components/PivHeader/PivHeaderWC.svelte +9 -20
  178. package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.html +1 -0
  179. package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte +28 -0
  180. package/src/sdg/components/PivHeader/Test/pivHeaderTest.html +43 -0
  181. package/src/sdg/components/PivHeader/_pivHeader.html +221 -0
  182. package/src/sdg/{scss/components → components/PivHeader}/_pivHeader.scss +55 -77
  183. package/src/sdg/components/RadioButton/_radioButton.html +24 -0
  184. package/src/sdg/components/RadioButton/_radioButton.scss +29 -0
  185. package/src/sdg/components/SearchBar/SearchBar.svelte +12 -32
  186. package/src/sdg/components/SearchBar/_searchBar.html +125 -0
  187. package/src/sdg/{scss/components → components/SearchBar}/_searchBar.scss +3 -3
  188. package/src/sdg/components/SearchInput/SearchInput.svelte +26 -4
  189. package/src/sdg/components/SearchInput/SearchInputWC.svelte +3 -1
  190. package/src/sdg/components/SearchInput/_searchInput.html +85 -0
  191. package/src/sdg/{scss/components → components/SearchInput}/_searchInput.scss +27 -2
  192. package/src/sdg/components/TextField/Doc/TextFieldDemo.svelte +143 -0
  193. package/src/sdg/components/TextField/Test/TextFieldEmbededTest.svelte +129 -0
  194. package/src/sdg/components/TextField/Test/textFieldEmbeddedTest.html +1 -0
  195. package/src/sdg/components/TextField/Test/textFieldTest.html +121 -0
  196. package/src/sdg/components/TextField/TextField.svelte +173 -0
  197. package/src/sdg/components/TextField/TextFieldWC.svelte +90 -0
  198. package/src/sdg/components/TextField/_textField.html +218 -0
  199. package/src/sdg/components/TextField/_textField.scss +110 -0
  200. package/src/sdg/components/TextField/textFieldUtils.js +19 -0
  201. package/src/sdg/components/ToTop/ToTop.svelte +2 -4
  202. package/src/sdg/components/ToTop/_toTop.html +45 -0
  203. package/src/sdg/{scss/components → components/ToTop}/_toTop.scss +2 -2
  204. package/src/sdg/components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte +46 -0
  205. package/src/sdg/components/ToggleSwitch/Test/toggleSwitchEmbeddedTest.html +1 -0
  206. package/src/sdg/components/ToggleSwitch/Test/toggleSwitchTest.html +34 -0
  207. package/src/sdg/components/ToggleSwitch/ToggleSwitch.svelte +34 -0
  208. package/src/sdg/components/ToggleSwitch/ToggleSwitchWC.svelte +66 -0
  209. package/src/sdg/components/ToggleSwitch/_toggleSwitch.html +160 -0
  210. package/src/sdg/components/ToggleSwitch/_toggleSwitch.scss +97 -0
  211. package/src/sdg/components/utils.js +81 -1
  212. package/src/sdg/qc-sdg-test.js +6 -0
  213. package/src/sdg/scss/lib/_functions.scss +10 -2
  214. package/src/sdg/scss/lib/_mixins.scss +63 -26
  215. package/src/sdg/scss/qc-sdg.scss +1 -1
  216. package/src/sdg/scss/qc-sgd-no-grid.scss +30 -18
  217. package/src/sdg/scss/settings/_base.scss +5 -33
  218. package/src/sdg/scss/settings/_images.scss +30 -0
  219. package/src/sdg/scss/settings/_tokens.scss +23 -0
  220. package/src/sdg/scss/utilities/_display.scss +1 -1
  221. package/src/sdg/scss/utilities/_states.scss +13 -0
  222. package/tests/button.spec.ts +11 -0
  223. package/tests/choice-group.spec.ts +36 -0
  224. package/tests/dropdown-list.spec.ts +529 -0
  225. package/tests/icon.spec.ts +19 -0
  226. package/tests/pivHeader.spec.ts +22 -0
  227. package/tests/textfield-svelte.spec.ts +28 -0
  228. package/tests/textfield.spec.ts +37 -0
  229. package/tests/toggle-switch.spec.ts +20 -0
  230. package/dist/img/arrow-up-white.svg +0 -3
  231. package/dist/img/chevron-blue.svg +0 -3
  232. package/dist/img/clipboard.svg +0 -8
  233. package/dist/img/error-white.svg +0 -1
  234. package/dist/img/error.svg +0 -1
  235. package/dist/img/exclamation-white.svg +0 -37
  236. package/dist/img/external-link-white.svg +0 -18
  237. package/dist/img/external-link.svg +0 -10
  238. package/dist/img/facebook.svg +0 -6
  239. package/dist/img/information-white.svg +0 -1
  240. package/dist/img/information.svg +0 -1
  241. package/dist/img/linkedin.svg +0 -5
  242. package/dist/img/loupe-piv-fonce.svg +0 -1
  243. package/dist/img/minus.svg +0 -6
  244. package/dist/img/qc-sprite.svg +0 -1
  245. package/dist/img/question-mark.svg +0 -47
  246. package/dist/img/success-white.svg +0 -1
  247. package/dist/img/success.svg +0 -1
  248. package/dist/img/twitter.svg +0 -8
  249. package/dist/img/warning.svg +0 -1
  250. package/dist/img/xclose-blue.svg +0 -6
  251. package/dist/img/xclose-white.svg +0 -1
  252. package/dist/img/youtube.svg +0 -3
  253. package/public/img/ampoule.svg +0 -1
  254. package/public/img/arrow-up-white.svg +0 -3
  255. package/public/img/chevron-blue.svg +0 -3
  256. package/public/img/chevron-white.svg +0 -3
  257. package/public/img/error-white.svg +0 -1
  258. package/public/img/error.svg +0 -1
  259. package/public/img/external-link-white.svg +0 -18
  260. package/public/img/facebook.svg +0 -6
  261. package/public/img/information-white.svg +0 -1
  262. package/public/img/information.svg +0 -1
  263. package/public/img/linkedin.svg +0 -5
  264. package/public/img/logo-piv-footer-mess.png +0 -0
  265. package/public/img/loupe-piv-droite.svg +0 -1
  266. package/public/img/loupe-piv-fonce.svg +0 -1
  267. package/public/img/note.svg +0 -1
  268. package/public/img/piv-bas-MCE-theme-clair.png +0 -0
  269. package/public/img/piv-bas-MCE-theme-sombre.png +0 -0
  270. package/public/img/piv-logo-pied-de-page.svg +0 -37
  271. package/public/img/plus.svg +0 -6
  272. package/public/img/qc-sprite.svg +0 -1
  273. package/public/img/quebec-logo.svg +0 -13
  274. package/public/img/success-white.svg +0 -1
  275. package/public/img/success.svg +0 -1
  276. package/public/img/twitter.svg +0 -8
  277. package/public/img/warning.svg +0 -1
  278. package/public/img/xclose-blue.svg +0 -6
  279. package/public/img/xclose-white.svg +0 -1
  280. package/public/img/youtube.svg +0 -3
  281. package/src/doc/scss/components/_button.scss +0 -61
  282. package/src/sdg/components/PivFooter/_defaultCopyright.svelte +0 -11
  283. package/src/sdg/components/PivHeader/_defaultLinks.svelte +0 -24
  284. package/src/sdg/components/QcCustomElement.js +0 -10
  285. package/src/sdg/scss/base/_fonts.scss +0 -29
  286. package/src/sdg/scss/base/_typography.scss +0 -94
  287. package/src/sdg/scss/components/_icons.scss +0 -169
  288. package/src/sdg/scss/components/_separator.scss +0 -5
  289. /package/dist/img/{loupe-piv-droite.svg → piv-search.svg} +0 -0
  290. /package/src/sdg/{scss/base → bases/colors}/_colors.scss +0 -0
  291. /package/src/sdg/{scss/base → bases/figures}/_figure.scss +0 -0
  292. /package/src/sdg/{scss → bases}/grid/_grid-lib.scss +0 -0
  293. /package/src/sdg/{scss → bases}/grid/_grid.scss +0 -0
  294. /package/src/sdg/{scss/base → bases/lists}/_lists.scss +0 -0
package/src/doc/ejs/layout/index.ejs ADDED
@@ -0,0 +1,129 @@
1
+ <!DOCTYPE html>
2
+ <!--suppress ALL -->
3
+ <html lang="fr">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport"
7
+ content="width=device-width, initial-scale=1.0">
8
+ <link rel="stylesheet"
9
+ href="css/qc-sdg.css">
10
+ <link rel="stylesheet"
11
+ href="css/qc-doc-sdg.css">
12
+ <title>Documentation technique du Système de design gouvernemental</title>
13
+ <script defer
14
+ src='js/qc-sdg.js'
15
+ sdg-css-filename="qc-sdg.css">
16
+ </script>
17
+ <script defer
18
+ src='js/qc-doc-sdg.js'
19
+ sdg-css-filename="qc-doc-sdg.css">
20
+ </script>
21
+ </head>
22
+ <body>
23
+ <header>
24
+ <qc-piv-header id="pivEntete"
25
+ title-text="Trousse de développement du Système de design gouvernemental"
26
+ alt-logo="Signature du gouvernement du Québec. Accédez au Système de design gouvernemental.">
27
+ </qc-piv-header>
28
+ </header>
29
+ <qc-doc-top-nav></qc-doc-top-nav>
30
+ <div class="qc-container">
31
+ <%- include('../_nav') %>
32
+ </div>
33
+ <main id="main">
34
+ <div class="qc-container">
35
+ <hr/>
36
+ <%- include('../_colors') %>
37
+
38
+ <hr/>
39
+ <%- include('../_iconList') %>
40
+
41
+ <hr/>
42
+
43
+ <!-- grille horizontale -->
44
+ <%- include('../_grid') %>
45
+
46
+ <hr/>
47
+
48
+ <!-- images -->
49
+ <%- include('../_figure') %>
50
+
51
+ <hr/>
52
+
53
+ <!-- liens -->
54
+ <%- include('../_links') %>
55
+
56
+ <hr/>
57
+
58
+ <!-- liste -->
59
+ <%- include('../_lists') %>
60
+
61
+ <hr/>
62
+
63
+ <!-- niveaux de titres -->
64
+ <%- include('../_headings') %>
65
+
66
+ <hr/>
67
+
68
+ <!-- ombrages -->
69
+ <%- include('../_shadings') %>
70
+
71
+ <hr/>
72
+
73
+ <!-- paragraphes -->
74
+ <%- include('../_paragraph') %>
75
+
76
+ <hr/>
77
+
78
+ <!-- polices de caractères -->
79
+ <%- include('../_font') %>
80
+
81
+ <hr/>
82
+ <!-- Séparateur -->
83
+ <%- include('../_separator') %>
84
+
85
+
86
+ <hr/>
87
+
88
+ <!-- alerte générale -->
89
+ <%- include('../_alert') %>
90
+
91
+ <hr/>
92
+
93
+ <!-- avis -->
94
+ <%- include('../_notice') %>
95
+
96
+ <hr/>
97
+
98
+ <%- include('../_searchBar') %>
99
+
100
+ <%- include('../_button') %>
101
+
102
+ <!-- bandeau d'entête PIV -->
103
+ <%- include('../_pivHeader') %>
104
+ <hr/>
105
+ <%- include('../_pivFooter') %>
106
+ <hr/>
107
+
108
+ <%- include('../_toTop') %>
109
+
110
+ <hr/>
111
+ <h2 id="radios-checkboxes">Boutons radios et cases à cocher</h2>
112
+ <%- include('../_checkbox') %>
113
+ <%- include('../_choiceGroup') %>
114
+ <%- include('../_selectionButtons') %>
115
+ <%- include('../_choiceGroupDoc') %>
116
+ <%- include('../_toggleSwitch') %>
117
+ <%- include('../_searchInput') %>
118
+ <%- include('../_textField') %>
119
+ <%- include('../_select') %>
120
+ <%- include('../_icon') %>
121
+
122
+ </div>
123
+ </main>
124
+ <footer>
125
+ <qc-piv-footer></qc-piv-footer>
126
+ </footer>
127
+ <script src='js/qc-doc-exemple.js'></script>
128
+ </body>
129
+ </html>
package/src/doc/qc-doc-sdg.js CHANGED
@@ -3,6 +3,7 @@ export * from './components/color-doc.svelte'
3
3
  export * from './components/TopNav.svelte'
4
4
  export * from './components/Switch.svelte'
5
5
  export * from './components/Exemple.svelte'
6
+ export * from '../sdg/components/TextField/Doc/TextFieldDemo.svelte'
6
7
  import './scss/qc-doc-sdg.scss';
7
8
 
8
9
  if (document.getElementById("version")) {
@@ -28,8 +29,6 @@ if (displayAlertLink) {
28
29
  }
29
30
  )
30
31
  }
31
-
32
-
33
32
  // add version
34
33
 
35
34
 
package/src/doc/scss/components/_code.scss CHANGED
@@ -9,7 +9,7 @@ pre {
9
9
  margin: 0;
10
10
  padding: 0;
11
11
  white-space: pre-wrap;
12
- overflow: scroll;
12
+ overflow: auto;
13
13
 
14
14
  code, .qc-code {
15
15
  font-family: token-value(font, family, code);
package/src/doc/scss/jQueryUI/_jquery-ui.autocomplete.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "qc-sdg-lib" as *;
2
2
  .ui-autocomplete {
3
3
  max-height: calc(rem(32 * 5) + 2px) !important;
4
+ max-width: calc( token-value(size search-bar max-width) + 2px);
4
5
  overflow-y: auto !important;
5
6
  list-style-type: none !important;
6
7
  padding-left: 0 !important;
package/src/doc/scss/qc-doc-sdg.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @use "qc-sdg-lib" as *;
2
2
  @use "components/code" as *;
3
- @use "components/button" as *;
4
3
  @use "tables";
5
4
  @use "jQueryUI/jquery-ui.autocomplete";
6
5
 
@@ -170,6 +169,7 @@ dl {
170
169
  .table-overflow {
171
170
  width: 100%;
172
171
  overflow-x: auto;
172
+ margin-bottom: token-value(spacer content-block mb);
173
173
  }
174
174
 
175
175
  hr {
package/src/doc/scss/settings/_base.scss ADDED
@@ -0,0 +1,4 @@
1
+ @forward "sdg/scss/settings/base";
2
+ @use "sdg/scss/settings/base" as *;
3
+ $google-font-path : "../../dist/fonts";
4
+ $env: "dev";
package/src/sdg/_components.js CHANGED
@@ -6,5 +6,12 @@ export * from './components/ToTop/toTopWC.svelte'
6
6
  export * from './components/ExternalLink/ExternalLinkWC.svelte'
7
7
  export * from './components/SearchBar/SearchBarWC.svelte'
8
8
  export * from './components/SearchInput/SearchInputWC.svelte'
9
- export * from './components/Icon/IconWC.svelte'
10
- export * from './components/IconButton/IconButtonWC.svelte'
9
+ export * from './bases/Icon/IconWC.svelte'
10
+ export * from './components/IconButton/IconButtonWC.svelte'
11
+ export * from './components/ChoiceGroup/ChoiceGroupWC.svelte'
12
+ export * from './components/Checkbox/CheckboxWC.svelte'
13
+ export * from './components/TextField/TextFieldWC.svelte'
14
+ export * from './components/Button/ButtonWC.svelte'
15
+ export * from './components/ToggleSwitch/ToggleSwitchWC.svelte'
16
+ export * from './components/ChoiceGroup/ToggleSwitchGroupWC.svelte'
17
+ export * from './components/DropdownList/SelectWC.svelte'
package/src/sdg/{components → bases}/Icon/Icon.svelte RENAMED
@@ -6,19 +6,26 @@
6
6
  color = 'text-primary',
7
7
  width='auto',
8
8
  height='auto',
9
+ src='',
10
+ rotate = 0,
9
11
  ...rest
10
12
  } = $props();
11
-
12
13
  let attributes = $derived(width === 'auto' ? { 'data-img-size': size } : {});
13
14
  </script>
14
15
 
15
16
  <div role="img"
16
- class="qc-icon"
17
+ class={[
18
+ "qc-icon",
19
+ src && "qc-icon-custom"
20
+ ]}
17
21
  aria-label={label}
18
- style="--img-color:var(--qc-color-{color});
19
- --img-width:{width};
20
- --img-height:{height};
21
- "
22
+ style={`--img-color: var(--qc-color-${color});
23
+ --img-width: ${width};
24
+ --img-height: ${height};
25
+ --img-src: url('${src}');
26
+ `}
27
+ style:--img-rotate={rotate && rotate + "deg"}
28
+
22
29
  data-img-type={type}
23
30
  {...attributes}
24
31
  {...rest}
package/src/sdg/bases/Icon/IconDoc.ejs ADDED
@@ -0,0 +1,129 @@
1
+
2
+ <h2 id="icons">Iconographie (qc-icon)</h2>
3
+
4
+ <p> Le composant <code>qc-icon</code> permet d’afficher une icône avec la bonne couleur quel que soit le thème.</p>
5
+
6
+ <h3>Exemples</h3>
7
+ <qc-doc-exemple caption="Exemples d'utilisation d'icônes avec différentes propriétés."
8
+ id="icons-exemple">
9
+ <div>
10
+ <qc-icon type="success" color="pink-regular" size="xs"></qc-icon>
11
+ <qc-icon type="success" color="blue-piv" size="sm"></qc-icon>
12
+ <qc-icon type="success" color="grey-dark" size="md"></qc-icon>
13
+ <qc-icon type="success" color="blue-regular" size="lg"></qc-icon>
14
+ <qc-icon type="success" color="success" size="xl"></qc-icon>
15
+ </div>
16
+ <div>
17
+ <qc-icon type="arrow-up" size="lg" rotate="-90"></qc-icon>
18
+ <qc-icon type="arrow-up" size="lg" rotate="90"></qc-icon>
19
+ <qc-icon type="arrow-up" size="lg" rotate="180"></qc-icon>
20
+ <qc-icon type="arrow-up" size="lg"></qc-icon>
21
+ </div>
22
+
23
+
24
+ </qc-doc-exemple>
25
+ <style>
26
+ #icons-exemple {
27
+ div:has(> qc-icon) {
28
+ margin-bottom: var(--qc-spacer-content-block-mb);
29
+ }
30
+ qc-icon {
31
+ margin-right: var(--qc-spacer-sm);
32
+ }
33
+ }
34
+ </style>
35
+
36
+ <qc-doc-exemple caption="Exemple d'icône personnalisée en base64.">
37
+ <qc-icon
38
+ src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOTczLjFweCIgaGVpZ2h0PSI5NzMuMXB4IiB2aWV3Qm94PSIwIDAgOTczLjEgOTczLjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDk3My4xIDk3My4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKCT4KPGc+Cgk8cGF0aCBkPSJNNTAyLjI5LDc4OC4xOTloLTQ3Yy0zMy4xLDAtNjAsMjYuOS02MCw2MHY2NC45YzAsMzMuMSwyNi45LDYwLDYwLDYwaDQ3YzMzLjEwMSwwLDYwLTI2LjksNjAtNjB2LTY0LjkKCQlDNTYyLjI5LDgxNSw1MzUuMzkxLDc4OC4xOTksNTAyLjI5LDc4OC4xOTl6IiBmaWxsPSIjZmZmIi8+Cgk8cGF0aCBkPSJNMTcwLjg5LDI4NS44bDg2LjcsMTAuOGMyNy41LDMuNCw1My42LTEyLjQsNjMuNS0zOC4zYzEyLjUtMzIuNywyOS45LTU4LjUsNTIuMi03Ny4zYzMxLjYwMS0yNi42LDcwLjktNDAsMTE3LjktNDAKCQljNDguNywwLDg3LjUsMTIuOCwxMTYuMywzOC4zYzI4LjgsMjUuNiw0My4xLDU2LjIsNDMuMSw5Mi4xYzAsMjUuOC04LjEsNDkuNC0yNC4zLDcwLjhjLTEwLjUsMTMuNi00Mi44LDQyLjItOTYuNyw4NS45CgkJYy01NCw0My43LTg5Ljg5OSw4My4wOTktMTA3Ljg5OSwxMTguMDk5Yy0xOC40LDM1LjgwMS0yNC44LDc1LjUtMjYuNCwxMTUuMzAxYy0xLjM5OSwzNC4xLDI1LjgsNjIuNSw2MCw2Mi41aDQ5CgkJYzMxLjIsMCw1Ny0yMy45LDU5LjgtNTQuOWMyLTIyLjI5OSw1LjctMzkuMTk5LDExLjMwMS01MC42OTljOS4zOTktMTkuNzAxLDMzLjY5OS00NS43MDEsNzIuNjk5LTc4LjEKCQlDNzIzLjU5LDQ3Ny44LDc3Mi43OSw0MjguNCw3OTUuODkxLDM5MmMyMy0zNi4zLDM0LjYtNzQuOCwzNC42LTExNS41YzAtNzMuNS0zMS4zLTEzOC05NC0xOTMuNGMtNjIuNi01NS40LTE0Ny04My4xLTI1My04My4xCgkJYy0xMDAuOCwwLTE4Mi4xLDI3LjMtMjQ0LjEsODJjLTUyLjgsNDYuNi04NC45LDEwMS44LTk2LjIsMTY1LjVDMTM5LjY5LDI2Ni4xLDE1Mi4zOSwyODMuNSwxNzAuODksMjg1Ljh6IiBmaWxsPSIjZmZmIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg=="
39
+ />
40
+ </qc-doc-exemple>
41
+
42
+ <h3>Documentation technique</h3>
43
+
44
+ <h4>Attributs</h4>
45
+ <div class="table-overflow">
46
+ <table class="qc-table qc-striped component-attributes-description">
47
+ <thead>
48
+ <tr>
49
+ <th>Nom</th>
50
+ <th>Valeur attendue</th>
51
+ <th>Valeur par défaut</th>
52
+ <th>Description</th>
53
+ </tr>
54
+ </thead>
55
+ <tbody>
56
+ <tr>
57
+ <td>type</td>
58
+ <td>Texte</td>
59
+ <td>""</td>
60
+ <td>Nom de l’icône à afficher, à prendre dans la liste ci-dessous.</td>
61
+ </tr>
62
+ <tr>
63
+ <td>label</td>
64
+ <td>Texte</td>
65
+ <td>""</td>
66
+ <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran.</td>
67
+ </tr>
68
+ <tr>
69
+ <td>rotate</td>
70
+ <td>Nombre</td>
71
+ <td>na</td>
72
+ <td>Rotation de l'image en degrés dans le sens horaire.</td>
73
+ </tr>
74
+ <tr>
75
+ <td>size</td>
76
+ <td>xs, sm, md, lg ou xl</td>
77
+ <td>md</td>
78
+ <td>Taille de l’icône.</td>
79
+ </tr>
80
+ <tr>
81
+ <td>color</td>
82
+ <td>Toute valeur correspondant à un jeton de couleur une fois précédée de <code>‑‑qc‑color‑</code>. Par exemple, "text-primary" donne la couleur de <code>--qc-color-text-primary</code></td>
83
+ <td>text-primary</td>
84
+ <td>Couleur de l'icône.</td>
85
+ </tr>
86
+ <tr>
87
+ <td>width</td>
88
+ <td>Toute valeur acceptée par la directive css <code>width</code></td>
89
+ <td>auto</td>
90
+ <td>Largeur personnalisée de l’icône.</td>
91
+ </tr>
92
+ <tr>
93
+ <td>height</td>
94
+ <td>Toute valeur acceptée par la directive css <code>height</code></td>
95
+ <td>auto</td>
96
+ <td>Hauteur personnalisée de l’icône.</td>
97
+ </tr>
98
+ <tr>
99
+ <td>src</td>
100
+ <td>Toute valeur acceptée par la fonction css <code>url()</code></td>
101
+ <td>na</td>
102
+ <td>Chemin pour afficher une icône personnalisée.</td>
103
+ </tr>
104
+ </tbody>
105
+ </table>
106
+ </div>
107
+
108
+ <h4>Liste des icônes</h4>
109
+
110
+ <div class="table-overflow">
111
+ <table class="qc-table qc-striped component-attributes-description">
112
+ <thead>
113
+ <tr>
114
+ <th>Nom</th>
115
+ <th>Aperçu</th>
116
+ </tr>
117
+ </thead>
118
+ <tbody>
119
+ <% icons.forEach(function(icon){ %>
120
+ <tr>
121
+ <td><%= icon %></td>
122
+ <td><qc-icon type="<%= icon %>" size="lg" /></td>
123
+ </tr>
124
+ <% }); %>
125
+ </tbody>
126
+ </table>
127
+ </div>
128
+
129
+
package/src/sdg/{components → bases}/Icon/IconWC.svelte RENAMED
@@ -7,7 +7,9 @@
7
7
  color: {attribute: 'color'},
8
8
  size: {attribute: 'size'},
9
9
  width: {attribute: 'width'},
10
- height: {attribute: 'height'}
10
+ height: {attribute: 'height'},
11
+ src: {attribute: 'src'},
12
+ rotate: {attribute: 'rotate'},
11
13
  }
12
14
  }}" />
13
15
 
package/src/sdg/bases/Icon/Test/IconEmbeddedTest.html ADDED
@@ -0,0 +1 @@
1
+ <qc-icon-embedded-test></qc-icon-embedded-test>
package/src/sdg/bases/Icon/Test/IconEmbeddedTest.svelte ADDED
@@ -0,0 +1,168 @@
1
+ <svelte:options customElement={{
2
+ tag: 'qc-icon-embedded-test'
3
+ }}/>
4
+
5
+ <script>
6
+ import Icon from "../Icon.svelte";
7
+ import { Utils } from '../../../components/utils.js';
8
+ </script>
9
+
10
+ <div>
11
+ <Icon type="arrow-up" size="xs" label="arrow-up xs" />
12
+ <Icon type="arrow-up" size="sm" label="arrow-up sm" />
13
+ <Icon type="arrow-up" size="md" label="arrow-up md" />
14
+ <Icon type="arrow-up" size="lg" label="arrow-up lg" />
15
+ <Icon type="arrow-up" size="xl" label="arrow-up xl" />
16
+ </div>
17
+
18
+ <div>
19
+ <Icon type="checkmark" size="xs" label="checkmark xs" />
20
+ <Icon type="checkmark" size="sm" label="checkmark sm" />
21
+ <Icon type="checkmark" size="md" label="checkmark md" />
22
+ <Icon type="checkmark" size="lg" label="checkmark lg" />
23
+ <Icon type="checkmark" size="xl" label="checkmark xl" />
24
+ </div>
25
+
26
+ <div>
27
+ <Icon type="chevron-up-thin" size="xs" label="chevron-up-thin xs" />
28
+ <Icon type="chevron-up-thin" size="sm" label="chevron-up-thin sm" />
29
+ <Icon type="chevron-up-thin" size="md" label="chevron-up-thin md" />
30
+ <Icon type="chevron-up-thin" size="lg" label="chevron-up-thin lg" />
31
+ <Icon type="chevron-up-thin" size="xl" label="chevron-up-thin xl" />
32
+ </div>
33
+
34
+ <div>
35
+ <Icon type="chevron-up" size="xs" label="chevron-up xs" />
36
+ <Icon type="chevron-up" size="sm" label="chevron-up sm" />
37
+ <Icon type="chevron-up" size="md" label="chevron-up md" />
38
+ <Icon type="chevron-up" size="lg" label="chevron-up lg" />
39
+ <Icon type="chevron-up" size="xl" label="chevron-up xl" />
40
+ </div>
41
+
42
+ <div>
43
+ <Icon type="clipboard" size="xs" label="clipboard xs" />
44
+ <Icon type="clipboard" size="sm" label="clipboard sm" />
45
+ <Icon type="clipboard" size="md" label="clipboard md" />
46
+ <Icon type="clipboard" size="lg" label="clipboard lg" />
47
+ <Icon type="clipboard" size="xl" label="clipboard xl" />
48
+ </div>
49
+
50
+ <div>
51
+ <Icon type="error" size="xs" label="error xs" />
52
+ <Icon type="error" size="sm" label="error sm" />
53
+ <Icon type="error" size="md" label="error md" />
54
+ <Icon type="error" size="lg" label="error lg" />
55
+ <Icon type="error" size="xl" label="error xl" />
56
+ </div>
57
+
58
+ <div>
59
+ <Icon type="exclamation" size="xs" label="exclamation xs" />
60
+ <Icon type="exclamation" size="sm" label="exclamation sm" />
61
+ <Icon type="exclamation" size="md" label="exclamation md" />
62
+ <Icon type="exclamation" size="lg" label="exclamation lg" />
63
+ <Icon type="exclamation" size="xl" label="exclamation xl" />
64
+ </div>
65
+
66
+ <div>
67
+ <Icon type="external-link" size="xs" label="external-link xs" />
68
+ <Icon type="external-link" size="sm" label="external-link sm" />
69
+ <Icon type="external-link" size="md" label="external-link md" />
70
+ <Icon type="external-link" size="lg" label="external-link lg" />
71
+ <Icon type="external-link" size="xl" label="external-link xl" />
72
+ </div>
73
+
74
+ <div>
75
+ <Icon type="information" size="xs" label="information xs" />
76
+ <Icon type="information" size="sm" label="information sm" />
77
+ <Icon type="information" size="md" label="information md" />
78
+ <Icon type="information" size="lg" label="information lg" />
79
+ <Icon type="information" size="xl" label="information xl" />
80
+ </div>
81
+
82
+ <div>
83
+ <Icon type="ligth-bulb" size="xs" label="ligth-bulb xs" />
84
+ <Icon type="ligth-bulb" size="sm" label="ligth-bulb sm" />
85
+ <Icon type="ligth-bulb" size="md" label="ligth-bulb md" />
86
+ <Icon type="ligth-bulb" size="lg" label="ligth-bulb lg" />
87
+ <Icon type="ligth-bulb" size="xl" label="ligth-bulb xl" />
88
+ </div>
89
+
90
+ <div>
91
+ <Icon type="minus" size="xs" label="minus xs" />
92
+ <Icon type="minus" size="sm" label="minus sm" />
93
+ <Icon type="minus" size="md" label="minus md" />
94
+ <Icon type="minus" size="lg" label="minus lg" />
95
+ <Icon type="minus" size="xl" label="minus xl" />
96
+ </div>
97
+
98
+ <div>
99
+ <Icon type="note" size="xs" label="note xs" />
100
+ <Icon type="note" size="sm" label="note sm" />
101
+ <Icon type="note" size="md" label="note md" />
102
+ <Icon type="note" size="lg" label="note lg" />
103
+ <Icon type="note" size="xl" label="note xl" />
104
+ </div>
105
+
106
+ <div>
107
+ <Icon type="plus" size="xs" label="plus xs" />
108
+ <Icon type="plus" size="sm" label="plus sm" />
109
+ <Icon type="plus" size="md" label="plus md" />
110
+ <Icon type="plus" size="lg" label="plus lg" />
111
+ <Icon type="plus" size="xl" label="plus xl" />
112
+ </div>
113
+
114
+ <div>
115
+ <Icon type="question-mark" size="xs" label="question-mark xs" />
116
+ <Icon type="question-mark" size="sm" label="question-mark sm" />
117
+ <Icon type="question-mark" size="md" label="question-mark md" />
118
+ <Icon type="question-mark" size="lg" label="question-mark lg" />
119
+ <Icon type="question-mark" size="xl" label="question-mark xl" />
120
+ </div>
121
+
122
+ <div>
123
+ <Icon type="search-thin" size="xs" label="search-thin xs" />
124
+ <Icon type="search-thin" size="sm" label="search-thin sm" />
125
+ <Icon type="search-thin" size="md" label="search-thin md" />
126
+ <Icon type="search-thin" size="lg" label="search-thin lg" />
127
+ <Icon type="search-thin" size="xl" label="search-thin xl" />
128
+ </div>
129
+
130
+ <div>
131
+ <Icon type="search" size="xs" label="search xs" />
132
+ <Icon type="search" size="sm" label="search sm" />
133
+ <Icon type="search" size="md" label="search md" />
134
+ <Icon type="search" size="lg" label="search lg" />
135
+ <Icon type="search" size="xl" label="search xl" />
136
+ </div>
137
+
138
+ <div>
139
+ <Icon type="success" size="xs" label="success xs" />
140
+ <Icon type="success" size="sm" label="success sm" />
141
+ <Icon type="success" size="md" label="success md" />
142
+ <Icon type="success" size="lg" label="success lg" />
143
+ <Icon type="success" size="xl" label="success xl" />
144
+ </div>
145
+
146
+ <div>
147
+ <Icon type="warning" size="xs" label="warning xs" />
148
+ <Icon type="warning" size="sm" label="warning sm" />
149
+ <Icon type="warning" size="md" label="warning md" />
150
+ <Icon type="warning" size="lg" label="warning lg" />
151
+ <Icon type="warning" size="xl" label="warning xl" />
152
+ </div>
153
+
154
+ <div>
155
+ <Icon type="xclose" size="xs" label="xclose xs" />
156
+ <Icon type="xclose" size="sm" label="xclose sm" />
157
+ <Icon type="xclose" size="md" label="xclose md" />
158
+ <Icon type="xclose" size="lg" label="xclose lg" />
159
+ <Icon type="xclose" size="xl" label="xclose xl" />
160
+ </div>
161
+
162
+ <br>
163
+
164
+ <div>
165
+ <Icon type="question-mark" />
166
+ </div>
167
+
168
+ <link rel='stylesheet' href='{Utils.cssPath}'>