kempo-ui 0.0.2 → 0.0.4

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 (278) hide show
  1. package/.github/copilot-instructions.md +149 -149
  2. package/.github/workflows/publish-major.yml +39 -0
  3. package/.github/workflows/publish-minor.yml +39 -0
  4. package/.github/workflows/{publish-npm.yml → publish-patch.yml} +44 -44
  5. package/.vscode/settings.json +2 -0
  6. package/CONTRIBUTING.md +149 -149
  7. package/README.md +0 -0
  8. package/dist/kempo-hljs.css +1 -0
  9. package/dist/kempo-vars.css +0 -0
  10. package/dist/src/components/Accordion.js +36 -0
  11. package/dist/src/components/Card.js +37 -0
  12. package/dist/src/components/Collapsible.js +41 -0
  13. package/dist/src/components/ContentSlider.js +44 -0
  14. package/dist/src/components/Dialog.js +113 -0
  15. package/dist/src/components/FocusCapture.js +7 -0
  16. package/dist/src/components/Icon.js +10 -0
  17. package/dist/src/components/Import.js +1 -0
  18. package/dist/src/components/PersistantCollapsible.js +1 -0
  19. package/dist/src/components/PhotoViewer.js +135 -0
  20. package/dist/src/components/Resize.js +96 -0
  21. package/dist/src/components/ShadowComponent.js +1 -0
  22. package/dist/src/components/ShowMore.js +42 -0
  23. package/dist/src/components/SideMenu.js +97 -0
  24. package/dist/src/components/Split.js +84 -0
  25. package/dist/src/components/Tabs.js +155 -0
  26. package/dist/src/components/Tags.js +69 -0
  27. package/dist/src/components/ThemeSwitcher.js +23 -0
  28. package/dist/src/components/Timestamp.js +1 -0
  29. package/dist/src/lit-all.min.js +120 -0
  30. package/dist/src/utils/debounce.js +1 -0
  31. package/dist/src/utils/drag.js +1 -0
  32. package/dist/src/utils/formatTimestamp.js +1 -0
  33. package/dist/src/utils/propConverters.js +1 -0
  34. package/dist/src/utils/watchWindowSize.js +1 -0
  35. package/docs/components/accordion.html +166 -0
  36. package/docs/components/card.html +92 -0
  37. package/docs/components/collapsible.html +198 -0
  38. package/docs/components/content-slider.html +223 -0
  39. package/docs/components/dialog.html +251 -0
  40. package/docs/components/focus-capture.html +67 -0
  41. package/docs/components/icon.html +158 -0
  42. package/docs/components/import.html +73 -0
  43. package/docs/components/persistant-collapsible.html +123 -0
  44. package/docs/components/photo-viewer.html +226 -0
  45. package/docs/components/resize.html +178 -0
  46. package/docs/components/show-more.html +129 -0
  47. package/docs/components/side-menu.html +159 -0
  48. package/docs/components/split.html +147 -0
  49. package/docs/components/table.html +312 -0
  50. package/docs/components/tableControls.html +77 -0
  51. package/docs/components/tableCustomFields.html +113 -0
  52. package/docs/components/tableFetchRecords.html +114 -0
  53. package/docs/components/tableFieldSortHide.html +75 -0
  54. package/docs/components/tablePagination.html +100 -0
  55. package/docs/components/tableRecordEditing.html +144 -0
  56. package/docs/components/tableRecordFiltering.html +88 -0
  57. package/docs/components/tableRecordHiding.html +80 -0
  58. package/docs/components/tableRecordSearching.html +75 -0
  59. package/docs/components/tableRecordSelection.html +75 -0
  60. package/docs/components/tableRowControls.html +78 -0
  61. package/docs/components/tableSorting.html +73 -0
  62. package/docs/components/tabs.html +180 -0
  63. package/docs/components/tags.html +110 -0
  64. package/docs/components/theme-switcher.html +126 -0
  65. package/docs/components/timestamp.html +82 -0
  66. package/docs/components/toast.html +319 -0
  67. package/docs/components/toggle.html +156 -0
  68. package/docs/dev.config.json +20 -0
  69. package/docs/icons/add.svg +1 -0
  70. package/docs/icons/arrow-back.svg +1 -0
  71. package/docs/icons/arrow-down-double.svg +1 -0
  72. package/docs/icons/arrow-down.svg +1 -0
  73. package/docs/icons/arrow-forward.svg +1 -0
  74. package/docs/icons/arrow-up-double.svg +1 -0
  75. package/docs/icons/arrow-up.svg +1 -0
  76. package/docs/icons/cards.svg +1 -0
  77. package/docs/icons/check.svg +1 -0
  78. package/docs/icons/chevron-left.svg +1 -0
  79. package/docs/icons/chevron-right.svg +1 -0
  80. package/docs/icons/close.svg +2 -0
  81. package/docs/icons/compare.svg +1 -0
  82. package/docs/icons/delete.svg +1 -0
  83. package/docs/icons/drag-handle.svg +1 -0
  84. package/docs/icons/drawing2.svg +124 -0
  85. package/docs/icons/edit.svg +1 -0
  86. package/docs/icons/error.svg +1 -0
  87. package/docs/icons/export-file.svg +1 -0
  88. package/docs/icons/file-text.svg +1 -0
  89. package/docs/icons/file.svg +1 -0
  90. package/docs/icons/filter-off.svg +1 -0
  91. package/docs/icons/filter.svg +1 -0
  92. package/docs/icons/first.svg +1 -0
  93. package/docs/icons/folder-clear.svg +1 -0
  94. package/docs/icons/folder-create.svg +1 -0
  95. package/docs/icons/folder-open.svg +1 -0
  96. package/docs/icons/folder.svg +1 -0
  97. package/docs/icons/hide.svg +1 -0
  98. package/docs/icons/image.svg +1 -0
  99. package/docs/icons/label-add.svg +1 -0
  100. package/docs/icons/label.svg +1 -0
  101. package/docs/icons/last.svg +1 -0
  102. package/docs/icons/menu.svg +1 -0
  103. package/docs/icons/mode-auto.svg +1 -0
  104. package/docs/icons/mode-dark.svg +1 -0
  105. package/docs/icons/mode-light.svg +1 -0
  106. package/docs/icons/open-in-browser.svg +1 -0
  107. package/docs/icons/pause.svg +1 -0
  108. package/docs/icons/play.svg +1 -0
  109. package/docs/icons/refresh.svg +1 -0
  110. package/docs/icons/remove.svg +1 -0
  111. package/docs/icons/save.svg +1 -0
  112. package/docs/icons/search.svg +1 -0
  113. package/docs/icons/settings.svg +1 -0
  114. package/docs/icons/show.svg +1 -0
  115. package/docs/icons/storage.svg +1 -0
  116. package/docs/icons/table-visibility.svg +1 -0
  117. package/docs/icons/tag.svg +1 -0
  118. package/docs/icons/tools.svg +1 -0
  119. package/docs/icons/trash-x.svg +1 -0
  120. package/docs/icons/warning.svg +1 -0
  121. package/docs/index.html +28 -21
  122. package/docs/kempo-hljs.css +1 -0
  123. package/docs/media/civic.jpg +0 -0
  124. package/docs/media/corvette.jpg +0 -0
  125. package/docs/media/evo.jpg +0 -0
  126. package/docs/media/gtr.jpg +0 -0
  127. package/docs/media/nsx.jpg +0 -0
  128. package/docs/nav.inc.html +67 -0
  129. package/docs/nav.inc.js +4 -0
  130. package/{config/production.json → docs/prod.config.json} +20 -16
  131. package/docs/src/components/Accordion.js +36 -0
  132. package/docs/src/components/Card.js +37 -0
  133. package/docs/src/components/Collapsible.js +41 -0
  134. package/docs/src/components/ContentSlider.js +44 -0
  135. package/docs/src/components/Dialog.js +113 -0
  136. package/docs/src/components/FocusCapture.js +7 -0
  137. package/docs/src/components/HybridComponent.js +1 -0
  138. package/docs/src/components/Icon.js +10 -0
  139. package/docs/src/components/Import.js +1 -0
  140. package/docs/src/components/LightComponent.js +1 -0
  141. package/docs/src/components/PersistantCollapsible.js +1 -0
  142. package/docs/src/components/PhotoViewer.js +135 -0
  143. package/docs/src/components/Resize.js +96 -0
  144. package/docs/src/components/ShadowComponent.js +1 -0
  145. package/docs/src/components/ShowMore.js +42 -0
  146. package/docs/src/components/SideMenu.js +97 -0
  147. package/docs/src/components/Split.js +84 -0
  148. package/docs/src/components/Tabs.js +155 -0
  149. package/docs/src/components/Tags.js +69 -0
  150. package/docs/src/components/ThemeSwitcher.js +23 -0
  151. package/docs/src/components/Timestamp.js +1 -0
  152. package/docs/src/lit-all.min.js +120 -0
  153. package/docs/src/utils/debounce.js +1 -0
  154. package/docs/src/utils/drag.js +1 -0
  155. package/docs/src/utils/formatTimestamp.js +1 -0
  156. package/docs/src/utils/propConverters.js +1 -0
  157. package/docs/src/utils/watchWindowSize.js +1 -0
  158. package/docs/styles.css +6 -0
  159. package/docs/utils/debounce.html +78 -0
  160. package/docs/utils/drag.html +104 -0
  161. package/docs/utils/formatTimestamp.html +114 -0
  162. package/docs/utils/propConverters.html +132 -0
  163. package/docs/utils/watchWindowSize.html +166 -0
  164. package/icons/add.svg +1 -0
  165. package/icons/arrow-back.svg +1 -0
  166. package/icons/arrow-down-double.svg +1 -0
  167. package/icons/arrow-down.svg +1 -0
  168. package/icons/arrow-forward.svg +1 -0
  169. package/icons/arrow-up-double.svg +1 -0
  170. package/icons/arrow-up.svg +1 -0
  171. package/icons/cards.svg +1 -0
  172. package/icons/check.svg +1 -0
  173. package/icons/chevron-left.svg +1 -0
  174. package/icons/chevron-right.svg +1 -0
  175. package/icons/close.svg +2 -0
  176. package/icons/compare.svg +1 -0
  177. package/icons/delete.svg +1 -0
  178. package/icons/drag-handle.svg +1 -0
  179. package/icons/drawing2.svg +124 -0
  180. package/icons/edit.svg +1 -0
  181. package/icons/error.svg +1 -0
  182. package/icons/export-file.svg +1 -0
  183. package/icons/file-text.svg +1 -0
  184. package/icons/file.svg +1 -0
  185. package/icons/filter-off.svg +1 -0
  186. package/icons/filter.svg +1 -0
  187. package/icons/first.svg +1 -0
  188. package/icons/folder-clear.svg +1 -0
  189. package/icons/folder-create.svg +1 -0
  190. package/icons/folder-open.svg +1 -0
  191. package/icons/folder.svg +1 -0
  192. package/icons/hide.svg +1 -0
  193. package/icons/image.svg +1 -0
  194. package/icons/label-add.svg +1 -0
  195. package/icons/label.svg +1 -0
  196. package/icons/last.svg +1 -0
  197. package/icons/menu.svg +1 -0
  198. package/icons/mode-auto.svg +1 -0
  199. package/icons/mode-dark.svg +1 -0
  200. package/icons/mode-light.svg +1 -0
  201. package/icons/open-in-browser.svg +1 -0
  202. package/icons/pause.svg +1 -0
  203. package/icons/play.svg +1 -0
  204. package/icons/refresh.svg +1 -0
  205. package/icons/remove.svg +1 -0
  206. package/icons/save.svg +1 -0
  207. package/icons/search.svg +1 -0
  208. package/icons/settings.svg +1 -0
  209. package/icons/show.svg +1 -0
  210. package/icons/storage.svg +1 -0
  211. package/icons/table-visibility.svg +1 -0
  212. package/icons/tag.svg +1 -0
  213. package/icons/tools.svg +1 -0
  214. package/icons/trash-x.svg +1 -0
  215. package/icons/warning.svg +1 -0
  216. package/package.json +2 -2
  217. package/scripts/build.js +109 -138
  218. package/scripts/docs.js +62 -60
  219. package/src/components/Accordion.js +229 -0
  220. package/src/components/Card.js +66 -0
  221. package/src/components/Collapsible.js +109 -0
  222. package/src/components/ContentSlider.js +205 -0
  223. package/src/components/Dialog.js +368 -0
  224. package/src/components/FocusCapture.js +23 -0
  225. package/src/components/HybridComponent.js +40 -40
  226. package/src/components/Icon.js +155 -0
  227. package/src/components/Import.js +104 -0
  228. package/src/components/LightComponent.js +32 -32
  229. package/src/components/PersistantCollapsible.js +69 -0
  230. package/src/components/PhotoViewer.js +368 -0
  231. package/src/components/Resize.js +210 -0
  232. package/src/components/ShadowComponent.js +32 -17
  233. package/src/components/ShowMore.js +109 -0
  234. package/src/components/SideMenu.js +167 -0
  235. package/src/components/Sortable.js +193 -0
  236. package/src/components/Split.js +192 -0
  237. package/src/components/Table.js +1202 -0
  238. package/src/components/Tabs.js +428 -0
  239. package/src/components/Tags.js +253 -0
  240. package/src/components/ThemeSwitcher.js +108 -0
  241. package/src/components/Timestamp.js +31 -0
  242. package/src/components/Toast.js +454 -0
  243. package/src/components/Toggle.js +173 -0
  244. package/src/components/tableControls/DeleteRecord.js +29 -0
  245. package/src/components/tableControls/Edit.js +88 -0
  246. package/src/components/tableControls/ExportCSV.js +71 -0
  247. package/src/components/tableControls/ExportJson.js +55 -0
  248. package/src/components/tableControls/FieldSortHide.js +76 -0
  249. package/src/components/tableControls/Filters.js +114 -0
  250. package/src/components/tableControls/FirstPage.js +65 -0
  251. package/src/components/tableControls/HiddenCount.js +45 -0
  252. package/src/components/tableControls/Hide.js +34 -0
  253. package/src/components/tableControls/LastPage.js +65 -0
  254. package/src/components/tableControls/NextPage.js +65 -0
  255. package/src/components/tableControls/PageSelect.js +109 -0
  256. package/src/components/tableControls/PageSize.js +68 -0
  257. package/src/components/tableControls/PrevPage.js +65 -0
  258. package/src/components/tableControls/Search.js +58 -0
  259. package/src/components/tableControls/ShowAll.js +34 -0
  260. package/src/components/tableControls/TableControl.js +105 -0
  261. package/src/kempo-hljs.css +146 -0
  262. package/src/utils/debounce.js +9 -0
  263. package/src/utils/drag.js +80 -0
  264. package/src/utils/formatTimestamp.js +27 -0
  265. package/src/utils/propConverters.js +11 -0
  266. package/src/utils/toTitleCase.js +9 -0
  267. package/src/utils/watchWindowSize.js +16 -0
  268. package/tests/HybridComponent.browser-test.js +214 -214
  269. package/tests/LightComponent.browser-test.js +169 -169
  270. package/tests/ShadowComponent.browser-test.js +130 -130
  271. package/config/development.json +0 -14
  272. package/docs/components/ShadowComponent.js +0 -1
  273. package/src/utils/cli.js +0 -43
  274. package/src/utils/fs-utils.js +0 -41
  275. /package/{docs → dist/src}/components/HybridComponent.js +0 -0
  276. /package/{docs → dist/src}/components/LightComponent.js +0 -0
  277. /package/docs/{utils → src/utils}/cli.js +0 -0
  278. /package/docs/{utils → src/utils}/fs-utils.js +0 -0
package/docs/components/dialog.html ADDED
@@ -0,0 +1,251 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dialog - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1 class="ta-center">Dialog</h1>
22
+
23
+ <details class="b r mb">
24
+ <summary class="p">Table of Contents</summary>
25
+ <div class="m mt0 pl">
26
+ <h6>Examples</h6>
27
+ <a href="#basicUsage">Basic Usage</a><br />
28
+ <a href="#titles">Titles</a><br />
29
+ <a href="#actionButtons">Action Buttons</a><br />
30
+ <a href="#jsUsage">JavaScript Usage</a><br />
31
+
32
+ <h6 class="mt">JavaScript Reference</h6>
33
+ <a href="#constructor">Constructor</a><br />
34
+ <a href="#requirements">Requirements</a><br />
35
+ <a href="#properties">Properties</a><br />
36
+ <a href="#methods">Methods</a><br />
37
+ <a href="#staticMethods">Static Methods</a><br />
38
+ </div>
39
+ </details>
40
+
41
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
42
+ <p>Create dialogs using the <code>k-dialog</code> component. Open the dialog by calling the <code>open()</code> method, and close it by calling the <code>close()</code> method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
43
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"doument.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
44
+ <button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
45
+ <k-dialog id="d1">
46
+ <p class="p">Hello World</p>
47
+ </k-dialog>
48
+
49
+ <h3 id="titles"><a href="#titles" class="no-link">Titles</a></h3>
50
+ <p>Assign an element to the <code>title</code> slot to have it appear as the dialog title.</p>
51
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d2"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span><br /> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span><br /> &gt;</span>This is a fact<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>A hotdog is a sandwhich<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
52
+ <button class="openDialog mb" data-dialog="d2" slot="right">Open Dialog</button>
53
+ <k-dialog
54
+ id="d2"
55
+ >
56
+ <h6
57
+ class="m0 px"
58
+ slot="title"
59
+ >This is a fact</h6>
60
+ <p class="p">A hotdog is a sandwhich</p>
61
+ </k-dialog>
62
+
63
+ <h3 id="actionButtons"><a href="#actionButtons" class="no-link">Action Buttons</a></h3>
64
+ <p>Add a cancel button using the <code>cancel-text</code> attribute.</p>
65
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"d4"</span><br /> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Absolutly Not"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Mint and Chocolate belong together<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
66
+ <button class="openDialog mb" data-dialog="d4" slot="right">Open Dialog</button>
67
+ <k-dialog
68
+ id="d4"
69
+ cancel-text="Absolutly Not"
70
+ >
71
+ <p class="p">Mint and Chocolate belong together</p>
72
+ </k-dialog>
73
+
74
+ <p>Add a confirm button using the <code>confirm-text</code> attribute.</p>
75
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"d5"</span><br /> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Confirm"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Spaghetti is the greatest food<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
76
+ <button class="openDialog mb" data-dialog="d5" slot="right">Open Dialog</button>
77
+ <k-dialog
78
+ id="d5"
79
+ confirm-text="Confirm"
80
+ >
81
+ <p class="p">Spaghetti is the greatest food</p>
82
+ </k-dialog>
83
+
84
+ <p>Try it with both a cancel and confirm button.</p>
85
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"d6"</span><br /> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"It should be outlawed"</span><br /> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Of course it is"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Ranch is gross<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span></code></pre>
86
+ <button class="openDialog mb" data-dialog="d6" slot="right">Open Dialog</button>
87
+ <k-dialog
88
+ id="d6"
89
+ cancel-text="It should be outlawed"
90
+ confirm-text="Of course it is"
91
+ >
92
+ <p class="p">Ranch is gross</p>
93
+ </k-dialog>
94
+
95
+ <h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
96
+ <h5>Create Dialog</h5>
97
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
98
+ <button id="d7" class="mb">Open Dialog</button>
99
+ <script type="module">
100
+ import Dialog from '/src/components/Dialog.js';
101
+ document.getElementById('d7').addEventListener('click', () => {
102
+ Dialog.create('<p>Hello World</p>');
103
+ });
104
+ </script>
105
+
106
+ <h5>Error Dialog</h5>
107
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d8"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.error(<span class="hljs-string">"&lt;p&gt;Oh no, don't do that!&lt;/p&gt;"</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
108
+ <button id="d8" class="mb">Open Dialog</button>
109
+ <script type="module">
110
+ import Dialog from '/src/components/Dialog.js';
111
+ document.getElementById('d8').addEventListener('click', () => {
112
+ Dialog.error("Oh no, don't do that!");
113
+ });
114
+ </script>
115
+
116
+ <h3 id="confirmDialog"><a href="#confirmDialog" class="no-link">Confirm Dialog</a></h3>
117
+ <p>Use the <code>Dialog.confirm</code> static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.</p>
118
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d9"</span>&gt;</span>Open Confirm Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
119
+ <button id="d9" class="mb">Open Confirm Dialog</button>
120
+ <script type="module">
121
+ import Dialog from '/src/components/Dialog.js';
122
+ document.getElementById('d9').addEventListener('click', () => {
123
+ Dialog.confirm("Are you sure you want to proceed?", response => {
124
+ console.log("User response:", response);
125
+ });
126
+ });
127
+ </script>
128
+
129
+ <h2 id="jsRef">JavaScript Reference</h2>
130
+
131
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
132
+ <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
133
+ <h5>
134
+ <code>new Dialog()</code>
135
+ </h5>
136
+
137
+ <h4>Parameters</h4>
138
+ <p>The Dialog constructor takes no parameters. Configuration is done through attributes or properties after instantiation.</p>
139
+
140
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
141
+ <ul>
142
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
143
+ <li><a href="./icon.html">Icon</a></li>
144
+ </ul>
145
+
146
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
147
+ <h5><code>opened<i>: boolean</i></code></h5>
148
+ <p>Whether the dialog is opened. Syncs with the <code>opened</code> attribute.</p>
149
+ <h5><code>closeBtn<i>: boolean</i></code></h5>
150
+ <p>Whether to show the close button. Syncs with the <code>close-btn</code> attribute.</p>
151
+ <h5><code>overlayClose<i>: boolean</i></code></h5>
152
+ <p>Whether clicking the overlay closes the dialog. Syncs with the <code>overlay-close</code> attribute.</p>
153
+ <h5><code>confirmText<i>: string</i></code></h5>
154
+ <p>Text for the confirm button. Syncs with the <code>confirm-text</code> attribute.</p>
155
+ <h5><code>confirmClasses<i>: string</i></code></h5>
156
+ <p>Classes for the confirm button. Syncs with the <code>confirm-classes</code> attribute.</p>
157
+ <h5><code>cancelText<i>: string</i></code></h5>
158
+ <p>Text for the cancel button. Syncs with the <code>cancel-text</code> attribute.</p>
159
+ <h5><code>cancelClasses<i>: string</i></code></h5>
160
+ <p>Classes for the cancel button. Syncs with the <code>cancel-classes</code> attribute.</p>
161
+ <h5><code>confirmAction<i>: function</i></code></h5>
162
+ <p>Action to perform when the confirm button is clicked. Not reflected as an attribute.</p>
163
+ <h5><code>cancelAction<i>: function</i></code></h5>
164
+ <p>Action to perform when the cancel button is clicked. Not reflected as an attribute.</p>
165
+ <h5><code>closeCallback<i>: function</i></code></h5>
166
+ <p>Callback to execute when the dialog is closed. Not reflected as an attribute.</p>
167
+ <h5><code>previousFocus<i>: Element</i></code></h5>
168
+ <p>Reference to the element that had focus before the dialog was opened. Not reflected as an attribute.</p>
169
+
170
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
171
+ <h5><code>open()<i>: void</i></code></h5>
172
+ <p>Opens the dialog.</p>
173
+ <h5><code>close()<i>: void</i></code></h5>
174
+ <p>Closes the dialog.</p>
175
+ <h5><code>toggle()<i>: void</i></code></h5>
176
+ <p>Toggles the dialog open or closed.</p>
177
+ <h5><code>focus()<i>: void</i></code></h5>
178
+ <p>Focuses the first focusable element in the dialog.</p>
179
+ <h5><code>blur()<i>: void</i></code></h5>
180
+ <p>Returns focus to the element that had focus before the dialog was opened.</p>
181
+
182
+ <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
183
+ <h5><code>create(contents, options)<i>: Dialog</i></code></h5>
184
+ <p>Creates and opens a new dialog with the specified contents and options.</p>
185
+ <h6>Options</h6>
186
+ <ul>
187
+ <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened.</li>
188
+ <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
189
+ <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
190
+ <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
191
+ <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
192
+ <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
193
+ <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
194
+ <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
195
+ <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
196
+ <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
197
+ </ul>
198
+ <h5><code>confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
199
+ <p>Creates and opens a confirmation dialog with the specified text and options. The responseCallback receives a boolean indicating the user's choice.</p>
200
+ <h6>Options</h6>
201
+ <ul>
202
+ <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Confirm").</li>
203
+ <li><code>confirmText</code>: <i>string</i> - Text for the confirm button (default: "Yes").</li>
204
+ <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button (default: "success ml").</li>
205
+ <li><code>cancelText</code>: <i>string</i> - Text for the cancel button (default: "No").</li>
206
+ <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button (default: "danger").</li>
207
+ <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button (default: false).</li>
208
+ <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog (default: false).</li>
209
+ </ul>
210
+ <h5><code>alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
211
+ <p>Creates and opens an alert dialog with the specified text and options.</p>
212
+ <h6>Options</h6>
213
+ <ul>
214
+ <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Alert").</li>
215
+ <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</li>
216
+ <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
217
+ <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
218
+ </ul>
219
+ <h5><code>error(text, responseCallback, options)<i>: Dialog</i></code></h5>
220
+ <p>Creates and opens an error dialog with the specified text and options.</p>
221
+ <h6>Options</h6>
222
+ <ul>
223
+ <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Error").</li>
224
+ <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</li>
225
+ <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
226
+ <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
227
+ </ul>
228
+ <h5><code>success(text, responseCallback, options)<i>: Dialog</i></code></h5>
229
+ <p>Creates and opens a success dialog with the specified text and options.</p>
230
+ <h6>Options</h6>
231
+ <ul>
232
+ <li><code>title</code>: <i>string</i> - The title of the dialog (default: "Success").</li>
233
+ <li><code>cancelText</code>: <i>string</i> - Text for the ok button (default: "Ok").</li>
234
+ <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
235
+ <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
236
+ </ul>
237
+
238
+ </main>
239
+ <div style="height:33vh"></div>
240
+ <script type="module" src="../src/components/Import.js"></script>
241
+ <script type="module" src="../src/components/Dialog.js"></script>
242
+ <script>
243
+ document.querySelectorAll('.openDialog').forEach( $btn => {
244
+ $btn.addEventListener('click', () => {
245
+ const $dialog = document.getElementById($btn.dataset.dialog);
246
+ if($dialog) $dialog.open();
247
+ });
248
+ });
249
+ </script>
250
+ </body>
251
+ </html>
package/docs/components/focus-capture.html ADDED
@@ -0,0 +1,67 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FocusCapture - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import Import from '../src/components/Import.js';
11
+ import Icon from '../src/components/Icon.js';
12
+ Import.replacements.root = '../';
13
+ Icon.pathToIcons = ['../icons'];
14
+ </script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav.inc.html"></k-import>
18
+ <h1 class="ta-center">FocusCapture</h1>
19
+ <main>
20
+ <details class="b r mb">
21
+ <summary class="p">Table of Contents</summary>
22
+ <div class="m mt0 pl">
23
+ <h6>Examples</h6>
24
+ <a href="#basicUsage">Basic Usage</a><br />
25
+
26
+ <h6 class="mt">JavaScript Reference</h6>
27
+ <a href="#constructor">Constructor</a><br />
28
+ <a href="#requirements">Requirements</a><br />
29
+ <a href="#properties">Properties</a><br />
30
+ <a href="#methods">Methods</a><br />
31
+ </div>
32
+ </details>
33
+
34
+ <h3>Description</h3>
35
+ <p>The <code>FocusCapture</code> class extends the <a href="./lazy-component.html">LazyComponent</a> class and provides functionality to capture focus within the component.</p>
36
+
37
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
+ <p>Use the <code>FocusCapture</code> component to capture focus within the component. When the focus moves out of the component, it will automatically move back to the first focusable element inside the component.</p>
39
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-focus-capture</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Button 1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Button 2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-focus-capture</span>&gt;</span></code></pre>
40
+ <k-focus-capture>
41
+ <button>Button 1</button>
42
+ <button>Button 2</button>
43
+ </k-focus-capture>
44
+
45
+ <h2 id="jsRef">JavaScript Reference</h2>
46
+
47
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
48
+ <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
49
+ <h5>
50
+ <code>new FocusCapture()</code>
51
+ </h5>
52
+
53
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
54
+ <ul>
55
+ <li><a href="./lazy-component.html">LazyComponent</a></li>
56
+ </ul>
57
+
58
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
59
+ <p>The <code>FocusCapture</code> class does not introduce any new properties beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
60
+
61
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
62
+ <p>The <code>FocusCapture</code> class does not introduce any new methods beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
63
+
64
+ </main>
65
+ <script type="module" src="../src/components/Import.js"></script>
66
+ </body>
67
+ </html>
package/docs/components/icon.html ADDED
@@ -0,0 +1,158 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Icon - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
+ <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module">
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ // import Search from '../src/components/Search.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ // Search.searchDataUrl = '../search.json';
17
+ </script>
18
+ </head>
19
+ <body>
20
+ <k-import src="../nav.inc.html"></k-import>
21
+ <h1 class="ta-center">Icon</h1>
22
+ <main>
23
+ <details class="b r mb">
24
+ <summary class="p">Table of Contents</summary>
25
+ <div class="m mt0 pl">
26
+ <h6>Examples</h6>
27
+ <a href="#basicUsage">Basic Usage</a><br />
28
+ <a href="#explicitSource">Explicitly Set the Source</a><br />
29
+ <a href="#fallbackIcon">Fallback Icon</a><br />
30
+ <a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
31
+ <a href="#addingIcons">Adding Icons</a><br />
32
+ <a href="#updatingIconDirectoryPath">Updating the Icon Directory Path</a><br />
33
+
34
+ <h6 class="mt">JavaScript Reference</h6>
35
+ <a href="#constructor">Constructor</a><br />
36
+ <a href="#requirements">Requirements</a><br />
37
+ <a href="#properties">Properties</a><br />
38
+ <a href="#methods">Methods</a><br />
39
+ </div>
40
+ </details>
41
+
42
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
43
+ <p>Create an icon using the <code>k-icon</code> component. You can specify the icon by setting the <code>name</code> or <code>src</code> attribute.</p>
44
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
45
+ <div class="row -mx mb">
46
+ <div class="col d-span-6 m-span-12 px">
47
+ <k-icon name="folder"></k-icon>
48
+ </div>
49
+ <div class="col d-span-6 m-span-12 px">
50
+ <k-icon src="/path/to/icon.svg"></k-icon>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="row -mx mb">
55
+ <div class="col d-span-6 m-span-12 px">
56
+ <k-card label="HTML">
57
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"play"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pause"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
58
+ </k-card>
59
+ </div>
60
+ <div class="col d-span-6 m-span-12 px">
61
+ <k-card label="Output*">
62
+ <k-icon name="menu"></k-icon>
63
+ <k-icon name="close"></k-icon>
64
+ <k-icon name="play"></k-icon>
65
+ <k-icon name="pause"></k-icon>
66
+ </k-card>
67
+ </div>
68
+ </div>
69
+
70
+ <h3 id="explicitSource"><a href="#explicitSource" class="no-link">Explicitly Set the Source</a></h3>
71
+ <p>You can use any svg file that is publically available (on your site or any other public domain) buy using the <code>src</code> attribute instead of <code>name</code>. The code will attempt to ensure compatability.</p>
72
+ <div class="row -mx mb">
73
+ <div class="col d-span-6 m-span-12 px">
74
+ <k-card label="HTML">
75
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
76
+ </k-card>
77
+ </div>
78
+ <div class="col d-span-6 m-span-12 px">
79
+ <k-card label="Output*">
80
+ <k-icon src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"></k-icon>
81
+ </k-card>
82
+ </div>
83
+ </div>
84
+
85
+ <h3 id="fallbackIcon"><a href="#fallbackIcon" class="no-link">Fallback Icon</a></h3>
86
+ <p>Put an SVG inside of the <code>k-icon</code> to be the fallback if one is not found that matches the provided name or source. Otherwise a <k-icon></k-icon> will be the fallback icon.</p>
87
+ <div class="row -mx mb">
88
+ <div class="col d-span-6 m-span-12 px">
89
+ <k-card label="HTML">
90
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
91
+ </k-card>
92
+ </div>
93
+ <div class="col d-span-6 m-span-12 px">
94
+ <k-card label="Output*">
95
+ <k-icon name="invalid"></k-icon>
96
+ <k-icon name="invalid">
97
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
98
+ </k-icon>
99
+ </k-card>
100
+ </div>
101
+ </div>
102
+
103
+ <h3 id="changingIconDirectory"><a href="#changingIconDirectory" class="no-link">Changing the Icon Directory Location</a></h3>
104
+ <p>To change the location of the directory holding the icons import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location, do this before icons are loaded (for example in the head of the document).</p>
105
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br /> Icon.pathToIcons = <span class="hljs-string">'./pathTo/icons'</span>;<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
106
+
107
+ <h3 id="addingIcons"><a href="#addingIcons" class="no-link">Adding Icons</a></h3>
108
+ <p>Add your SVGs to the directory, remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of <code>currentColor</code>, this will allow the icon to adapt to the font color where it is rendered.</p>
109
+ <div class="row -mx mb">
110
+ <div class="col d-span-6 m-span-12 px">
111
+ <k-card label="Before">
112
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"24"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"24"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></code></pre>
113
+ </k-card>
114
+ </div>
115
+ <div class="col d-span-6 m-span-12 px">
116
+ <k-card label="After">
117
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></code></pre>
118
+ </k-card>
119
+ </div>
120
+ </div>
121
+
122
+ <h3 id="updatingIconDirectoryPath"><a href="#updatingIconDirectoryPath" class="no-link">Updating the Icon Directory Path</a></h3>
123
+ <p>To change the location of the directory holding the icons, import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location. Do this before icons are loaded (for example, in the head of the document).</p>
124
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br /> Icon.pathToIcons = [<span class="hljs-string">'./pathTo/icons'</span>];<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
125
+
126
+ <h2 id="jsRef">JavaScript Reference</h2>
127
+
128
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
129
+ <h6>Extends <a href="./component.html">Component</a></h6>
130
+ <h5>
131
+ <code>new Icon()</code><br />
132
+ <code>new Icon(<i>string</i> name)</code>
133
+ </h5>
134
+
135
+ <h4>Parameters</h4>
136
+ <h5><code>name<i>: string</i></code></h5>
137
+ <p>The name of the icon.</p>
138
+
139
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
140
+ <ul>
141
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
142
+ </ul>
143
+
144
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
145
+ <h5><code>name<i>: string</i></code></h5>
146
+ <p>The name of the icon. Syncs with the <code>name</code> attribute.</p>
147
+ <h5><code>src<i>: string</i></code></h5>
148
+ <p>The source URL of the icon. Syncs with the <code>src</code> attribute.</p>
149
+ <h5><code>pathToIcons<i>: Array</i></code></h5>
150
+ <p>An array of paths to directories containing icons. This is a static property that affects all icon instances.</p>
151
+
152
+ </main>
153
+ <div style="height:33vh"></div>
154
+ <script type="module" src="../src/components/Import.js"></script>
155
+ <script type="module" src="../src/components/Card.js"></script>
156
+ <script type="module" src="../src/components/Icon.js"></script>
157
+ </body>
158
+ </html>
package/docs/components/import.html ADDED
@@ -0,0 +1,73 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Import - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
+ <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module">
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ Import.replacements.root = '../';
14
+ Icon.pathToIcons = ['../icons'];
15
+ </script>
16
+ </head>
17
+ <body>
18
+ <k-import src="../nav.inc.html"></k-import>
19
+ <h1 class="ta-center">Import</h1>
20
+ <main>
21
+ <details class="b r mb">
22
+ <summary class="p">Table of Contents</summary>
23
+ <div class="m mt0 pl">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#constructor">Constructor</a><br />
29
+ <a href="#requirements">Requirements</a><br />
30
+ <a href="#properties">Properties</a><br />
31
+ <a href="#methods">Methods</a><br />
32
+ </div>
33
+ </details>
34
+
35
+ <h3>What is an import</h3>
36
+ <p>Import commonly used HTML snippets.</p>
37
+ <k-card label="import-me.html">
38
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
39
+ </k-card>
40
+ <k-card label="HTML">
41
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
42
+ </k-card>
43
+ <k-card label="Results">
44
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span> <span class="hljs-attr">rendered</span>=<span class="hljs-string">"true"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
45
+ </k-card>
46
+
47
+ <h2 id="jsRef">JavaScript Reference</h2>
48
+
49
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
50
+ <h6>Extends <a href="./component.html">Component</a></h6>
51
+ <h5>
52
+ <code>new Import()</code>
53
+ </h5>
54
+
55
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
56
+ <ul>
57
+ <li><a href="./component.html">Component</a></li>
58
+ </ul>
59
+
60
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
61
+ <h5><code>src<i>: string</i></code></h5>
62
+ <p>The source URL of the HTML snippet to import. Syncs to <code>src</code> attribute.</p>
63
+
64
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
65
+ <h5><code>load()<i>: Promise</i></code></h5>
66
+ <p>Loads the HTML snippet from the specified source URL.</p>
67
+
68
+ </main>
69
+ <div style="height:33vh"></div>
70
+ <script type="module" src="../src/components/Import.js"></script>
71
+ <script type="module" src="../src/components/Card.js"></script>
72
+ </body>
73
+ </html>