kempo-ui 0.0.2 → 0.0.3

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 (193) hide show
  1. package/.github/copilot-instructions.md +149 -149
  2. package/.github/workflows/publish-npm.yml +44 -44
  3. package/CONTRIBUTING.md +149 -149
  4. package/README.md +0 -0
  5. package/dist/kempo-vars.css +0 -0
  6. package/dist/src/components/FocusCapture.js +7 -0
  7. package/dist/src/components/Icon.js +10 -0
  8. package/dist/src/components/Import.js +1 -0
  9. package/dist/src/components/ShadowComponent.js +1 -0
  10. package/dist/src/components/SideMenu.js +97 -0
  11. package/dist/src/lit-all.min.js +120 -0
  12. package/docs/components/accordion.html +122 -0
  13. package/docs/components/card.html +91 -0
  14. package/docs/components/component.html +90 -0
  15. package/docs/components/content-slider.html +193 -0
  16. package/docs/components/dialog.html +245 -0
  17. package/docs/components/directory-viewer.html +90 -0
  18. package/docs/components/focus-capture.html +68 -0
  19. package/docs/components/icon.html +161 -0
  20. package/docs/components/import.html +78 -0
  21. package/docs/components/lazy-component.html +84 -0
  22. package/docs/components/reactive-component.html +69 -0
  23. package/docs/components/reactive-lazy-component.html +69 -0
  24. package/docs/components/resize.html +152 -0
  25. package/docs/components/search.html +102 -0
  26. package/docs/components/show-more.html +123 -0
  27. package/docs/components/side-menu.html +168 -0
  28. package/docs/components/sortable.html +96 -0
  29. package/docs/components/split.html +126 -0
  30. package/docs/components/table.html +312 -0
  31. package/docs/components/tableControls.html +77 -0
  32. package/docs/components/tableCustomFields.html +113 -0
  33. package/docs/components/tableFetchRecords.html +114 -0
  34. package/docs/components/tableFieldSortHide.html +75 -0
  35. package/docs/components/tablePagination.html +100 -0
  36. package/docs/components/tableRecordEditing.html +144 -0
  37. package/docs/components/tableRecordFiltering.html +75 -0
  38. package/docs/components/tableRecordHiding.html +80 -0
  39. package/docs/components/tableRecordSearching.html +75 -0
  40. package/docs/components/tableRecordSelection.html +75 -0
  41. package/docs/components/tableRowControls.html +78 -0
  42. package/docs/components/tableSorting.html +73 -0
  43. package/docs/components/tabs.html +163 -0
  44. package/docs/components/tags.html +94 -0
  45. package/docs/components/theme-switcher.html +129 -0
  46. package/docs/components/timestamp.html +86 -0
  47. package/docs/components/toast.html +328 -0
  48. package/docs/components/toggle.html +155 -0
  49. package/docs/dev.config.json +20 -0
  50. package/docs/icons/add.svg +1 -0
  51. package/docs/icons/arrow-back.svg +1 -0
  52. package/docs/icons/arrow-down-double.svg +1 -0
  53. package/docs/icons/arrow-down.svg +1 -0
  54. package/docs/icons/arrow-forward.svg +1 -0
  55. package/docs/icons/arrow-up-double.svg +1 -0
  56. package/docs/icons/arrow-up.svg +1 -0
  57. package/docs/icons/cards.svg +1 -0
  58. package/docs/icons/check.svg +1 -0
  59. package/docs/icons/chevron-left.svg +1 -0
  60. package/docs/icons/chevron-right.svg +1 -0
  61. package/docs/icons/close.svg +2 -0
  62. package/docs/icons/compare.svg +1 -0
  63. package/docs/icons/delete.svg +1 -0
  64. package/docs/icons/drag-handle.svg +1 -0
  65. package/docs/icons/drawing2.svg +124 -0
  66. package/docs/icons/edit.svg +1 -0
  67. package/docs/icons/error.svg +1 -0
  68. package/docs/icons/export-file.svg +1 -0
  69. package/docs/icons/file-text.svg +1 -0
  70. package/docs/icons/file.svg +1 -0
  71. package/docs/icons/filter-off.svg +1 -0
  72. package/docs/icons/filter.svg +1 -0
  73. package/docs/icons/first.svg +1 -0
  74. package/docs/icons/folder-clear.svg +1 -0
  75. package/docs/icons/folder-create.svg +1 -0
  76. package/docs/icons/folder-open.svg +1 -0
  77. package/docs/icons/folder.svg +1 -0
  78. package/docs/icons/hide.svg +1 -0
  79. package/docs/icons/image.svg +1 -0
  80. package/docs/icons/label-add.svg +1 -0
  81. package/docs/icons/label.svg +1 -0
  82. package/docs/icons/last.svg +1 -0
  83. package/docs/icons/menu.svg +1 -0
  84. package/docs/icons/mode-auto.svg +1 -0
  85. package/docs/icons/mode-dark.svg +1 -0
  86. package/docs/icons/mode-light.svg +1 -0
  87. package/docs/icons/open-in-browser.svg +1 -0
  88. package/docs/icons/pause.svg +1 -0
  89. package/docs/icons/play.svg +1 -0
  90. package/docs/icons/refresh.svg +1 -0
  91. package/docs/icons/remove.svg +1 -0
  92. package/docs/icons/save.svg +1 -0
  93. package/docs/icons/search.svg +1 -0
  94. package/docs/icons/settings.svg +1 -0
  95. package/docs/icons/show.svg +1 -0
  96. package/docs/icons/storage.svg +1 -0
  97. package/docs/icons/table-visibility.svg +1 -0
  98. package/docs/icons/tag.svg +1 -0
  99. package/docs/icons/tools.svg +1 -0
  100. package/docs/icons/trash-x.svg +1 -0
  101. package/docs/icons/warning.svg +1 -0
  102. package/docs/index.html +28 -21
  103. package/docs/nav.inc.html +73 -0
  104. package/docs/nav.inc.js +4 -0
  105. package/{config/production.json → docs/prod.config.json} +20 -16
  106. package/docs/src/components/FocusCapture.js +7 -0
  107. package/docs/src/components/HybridComponent.js +1 -0
  108. package/docs/src/components/Icon.js +10 -0
  109. package/docs/src/components/Import.js +1 -0
  110. package/docs/src/components/LightComponent.js +1 -0
  111. package/docs/src/components/ShadowComponent.js +1 -0
  112. package/docs/src/components/SideMenu.js +97 -0
  113. package/docs/src/lit-all.min.js +120 -0
  114. package/docs/src/utils/cli.js +1 -0
  115. package/docs/src/utils/fs-utils.js +1 -0
  116. package/docs/styles.css +6 -0
  117. package/icons/add.svg +1 -0
  118. package/icons/arrow-back.svg +1 -0
  119. package/icons/arrow-down-double.svg +1 -0
  120. package/icons/arrow-down.svg +1 -0
  121. package/icons/arrow-forward.svg +1 -0
  122. package/icons/arrow-up-double.svg +1 -0
  123. package/icons/arrow-up.svg +1 -0
  124. package/icons/cards.svg +1 -0
  125. package/icons/check.svg +1 -0
  126. package/icons/chevron-left.svg +1 -0
  127. package/icons/chevron-right.svg +1 -0
  128. package/icons/close.svg +2 -0
  129. package/icons/compare.svg +1 -0
  130. package/icons/delete.svg +1 -0
  131. package/icons/drag-handle.svg +1 -0
  132. package/icons/drawing2.svg +124 -0
  133. package/icons/edit.svg +1 -0
  134. package/icons/error.svg +1 -0
  135. package/icons/export-file.svg +1 -0
  136. package/icons/file-text.svg +1 -0
  137. package/icons/file.svg +1 -0
  138. package/icons/filter-off.svg +1 -0
  139. package/icons/filter.svg +1 -0
  140. package/icons/first.svg +1 -0
  141. package/icons/folder-clear.svg +1 -0
  142. package/icons/folder-create.svg +1 -0
  143. package/icons/folder-open.svg +1 -0
  144. package/icons/folder.svg +1 -0
  145. package/icons/hide.svg +1 -0
  146. package/icons/image.svg +1 -0
  147. package/icons/label-add.svg +1 -0
  148. package/icons/label.svg +1 -0
  149. package/icons/last.svg +1 -0
  150. package/icons/menu.svg +1 -0
  151. package/icons/mode-auto.svg +1 -0
  152. package/icons/mode-dark.svg +1 -0
  153. package/icons/mode-light.svg +1 -0
  154. package/icons/open-in-browser.svg +1 -0
  155. package/icons/pause.svg +1 -0
  156. package/icons/play.svg +1 -0
  157. package/icons/refresh.svg +1 -0
  158. package/icons/remove.svg +1 -0
  159. package/icons/save.svg +1 -0
  160. package/icons/search.svg +1 -0
  161. package/icons/settings.svg +1 -0
  162. package/icons/show.svg +1 -0
  163. package/icons/storage.svg +1 -0
  164. package/icons/table-visibility.svg +1 -0
  165. package/icons/tag.svg +1 -0
  166. package/icons/tools.svg +1 -0
  167. package/icons/trash-x.svg +1 -0
  168. package/icons/warning.svg +1 -0
  169. package/package.json +2 -2
  170. package/scripts/build.js +109 -138
  171. package/scripts/docs.js +60 -60
  172. package/src/components/Card.js +66 -0
  173. package/src/components/FocusCapture.js +23 -0
  174. package/src/components/HybridComponent.js +40 -40
  175. package/src/components/Icon.js +155 -0
  176. package/src/components/Import.js +104 -0
  177. package/src/components/LightComponent.js +32 -32
  178. package/src/components/ShadowComponent.js +30 -17
  179. package/src/components/SideMenu.js +167 -0
  180. package/src/components/ThemeSwitcher.js +108 -0
  181. package/src/kempo-hljs.css +146 -0
  182. package/src/utils/cli.js +43 -43
  183. package/src/utils/fs-utils.js +41 -41
  184. package/src/utils/propConverters.js +11 -0
  185. package/tests/HybridComponent.browser-test.js +214 -214
  186. package/tests/LightComponent.browser-test.js +169 -169
  187. package/tests/ShadowComponent.browser-test.js +130 -130
  188. package/config/development.json +0 -14
  189. package/docs/components/ShadowComponent.js +0 -1
  190. /package/{docs → dist/src}/components/HybridComponent.js +0 -0
  191. /package/{docs → dist/src}/components/LightComponent.js +0 -0
  192. /package/{docs → dist/src}/utils/cli.js +0 -0
  193. /package/{docs → dist/src}/utils/fs-utils.js +0 -0
package/docs/components/accordion.html ADDED
@@ -0,0 +1,122 @@
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>Accordion - 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">Accordion</h1>
19
+ <main>
20
+ <details
21
+ class="b r mb"
22
+ >
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#defaultOpen">Default Open Panel</a><br />
28
+ <h6 class="mt">JavaScript Reference</h6>
29
+ <a href="#constructor">Constructor</a><br />
30
+ <a href="#requirements">Requirements</a><br />
31
+ <a href="#attributes">Attributes</a><br />
32
+ <a href="#properties">Properties</a><br />
33
+ <a href="#methods">Methods</a><br />
34
+ </div>
35
+ </details>
36
+
37
+ <h3>Description</h3>
38
+ <p>A widget that allows a single panel of content to be opened and closed.</p>
39
+
40
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</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">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</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">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</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">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
42
+ <k-accordion
43
+ class="mb"
44
+ >
45
+ <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
46
+ <k-accordion-panel name="panel1">
47
+ <p class="m">Panel 1 content</p>
48
+ </k-accordion-panel>
49
+ <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
50
+ <k-accordion-panel name="panel2">
51
+ <p class="m">Panel 2 content</p>
52
+ </k-accordion-panel>
53
+ <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
54
+ <k-accordion-panel name="panel3">
55
+ <p class="m">Panel 3 content</p>
56
+ </k-accordion-panel>
57
+ </k-accordion>
58
+
59
+ <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link">Default Open Panel</a></h3>
60
+ <p>You can have a panel open by default by setting the <code>active</code> attribute to <code>true</code> on both the header and the panel.</p>
61
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</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">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</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">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</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">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
62
+ <k-accordion
63
+ class="mb"
64
+ >
65
+ <k-accordion-header for-panel="panel1" active="true">Panel 1</k-accordion-header>
66
+ <k-accordion-panel name="panel1" active="true">
67
+ <p class="m">Panel 1 content</p>
68
+ </k-accordion-panel>
69
+ <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
70
+ <k-accordion-panel name="panel2">
71
+ <p class="m">Panel 2 content</p>
72
+ </k-accordion-panel>
73
+ <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
74
+ <k-accordion-panel name="panel3">
75
+ <p class="m">Panel 3 content</p>
76
+ </k-accordion-panel>
77
+ </k-accordion>
78
+
79
+ <h2 id="jsRef">JavaScript Reference</h2>
80
+
81
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
82
+ <h6>Extends <a href="./component.html">Component</a></h6>
83
+ <h5>
84
+ <code>new Accordion()</code><br />
85
+ </h5>
86
+
87
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
88
+ <ul>
89
+ <li><a href="../utils/element.html">utils/element.js</a></li>
90
+ </ul>
91
+
92
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
93
+ <h5><code>forPanel: string</code></h5>
94
+ <p>Specifies the panel associated with the header.</p>
95
+ <h5><code>active: boolean</code></h5>
96
+ <p>Indicates whether the panel or header is active.</p>
97
+ <h5><code>transitioning: boolean</code></h5>
98
+ <p>Indicates whether the panel is in the process of transitioning.</p>
99
+
100
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
101
+ <h5><code>activeHeader: HTMLElement</code></h5>
102
+ <p>Returns the currently active header element.</p>
103
+ <h5><code>activePanel: HTMLElement</code></h5>
104
+ <p>Returns the currently active panel element.</p>
105
+
106
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
107
+ <h5><code>getHeader(panelName: string): HTMLElement</code></h5>
108
+ <p>Returns the header element associated with the specified panel name.</p>
109
+ <h5><code>getPanel(panelName: string): HTMLElement</code></h5>
110
+ <p>Returns the panel element associated with the specified panel name.</p>
111
+ <h5><code>openPanel(panelName: string): void</code></h5>
112
+ <p>Opens the panel associated with the specified panel name.</p>
113
+ <h5><code>closePanel(panelName: string): void</code></h5>
114
+ <p>Closes the panel associated with the specified panel name.</p>
115
+ <h5><code>togglePanel(panelName: string): void</code></h5>
116
+ <p>Toggles the panel associated with the specified panel name.</p>
117
+
118
+ </main>
119
+ <script type="module" src="../src/components/Import.js"></script>
120
+ <script type="module" src="../src/components/Accordion.js"></script>
121
+ </body>
122
+ </html>
package/docs/components/card.html ADDED
@@ -0,0 +1,91 @@
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>Card - 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">Card</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="#attributes">Attributes</a><br />
30
+ <a href="#properties">Properties</a><br />
31
+ <a href="#methods">Methods</a><br />
32
+ </div>
33
+ </details>
34
+
35
+ <p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
36
+ <div class="row -mx mb">
37
+ <div class="col d-span-6 m-span-12 px">
38
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br /> This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
39
+ </div>
40
+ <div class="col d-span-6 m-span-12 px">
41
+ <k-card>
42
+ This is a card
43
+ </k-card>
44
+ </div>
45
+ </div>
46
+
47
+ <h3 id="labels"><a href="#labels" class="no-link">Labels</a></h3>
48
+ <p>A label gives some text in a box on the top border of the card, helping identify the purpose of the contents.</p>
49
+ <div class="row -mx mb">
50
+ <div class="col d-span-6 m-span-12 px">
51
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"I'm a Label"</span>&gt;</span><br /> This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
52
+ </div>
53
+ <div class="col d-span-6 m-span-12 px">
54
+ <k-card label="I'm a Label">
55
+ This is a card
56
+ </k-card>
57
+ </div>
58
+ </div>
59
+
60
+ <h2 id="jsRef">JavaScript Reference</h2>
61
+
62
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
63
+ <h6>Extends <a href="./component.html">Component</a></h6>
64
+ <h5>
65
+ <code>new Card()</code><br />
66
+ <code>new Card(<i>string</i> label)</code>
67
+ </h5>
68
+
69
+ <h4>Parameters</h4>
70
+ <h5><code>label<i>: string</i></code></h5>
71
+ <p>The label for the card.</p>
72
+
73
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
74
+ <ul>
75
+ <li><a href="./component.html">Component</a></li>
76
+ </ul>
77
+
78
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
79
+ <h5><code>label<i>: string</i></code></h5>
80
+ <p>The label for the card.</p>
81
+
82
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
83
+ <h5><code>setLabel(<i>string</i> label)<i>: void</i></code></h5>
84
+ <p>Sets the label for the card.</p>
85
+
86
+ </main>
87
+ <div style="height:33vh"></div>
88
+ <script type="module" src="../src/components/Import.js"></script>
89
+ <script type="module" src="../src/components/Card.js"></script>
90
+ </body>
91
+ </html>
package/docs/components/component.html ADDED
@@ -0,0 +1,90 @@
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>Component - 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">Component</h1>
19
+ <main>
20
+ <details
21
+ class="b r mb"
22
+ >
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <a href="#constructor">Constructor</a><br />
26
+ <a href="#requirements">Requirements</a><br />
27
+ <a href="#attributes">Attributes</a><br />
28
+ <a href="#properties">Properties</a><br />
29
+ <a href="#methods">Methods</a><br />
30
+ </div>
31
+ </details>
32
+
33
+ <h3>Description</h3>
34
+ <p><code>Component</code> is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components" target="_blank">Web Component</a> (JS Class) from which all <b>Kempo</b> components are created, it handles the creation of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" target="_blank">Shadow DOM</a> from the <a href="#shadowTemplate">shadowTemplate</a> and <a href="#shadowStyles">shadowStyles</a>, along with creating utility methods for creating attributes and methods.</p>
35
+
36
+ <h3 id="requirements">Requirements</h3>
37
+ <ul>
38
+ <li><a href="">getCase Utility Function</a></li>
39
+ </ul>
40
+
41
+ <h3 id="constructor">Constructor</h3>
42
+ <h6>Extends <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a></h6>
43
+ <h5>
44
+ <code>super()</code><br />
45
+ <code>super(<i>Object</i> shadowOptions)</code>
46
+ </h5>
47
+ <p>This class <b class="tc-danger">can not</b> be instatiated directly, but rather <b class="tc-success">should be</b> extended, optionally passing in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options" target="_blank">shadowOptions</a>.</p>
48
+
49
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-comment">// Your Constructor</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
50
+
51
+ <h3 id="attributes">Attributes</h3>
52
+ <h5><code>rendered</code> <i>Boolean</i></h5>
53
+ <p>A <b class="tc-damger">READ ONLY</b> boolean that indicates if this element has been rendered.</p>
54
+
55
+ <h3>Properties</h3>
56
+ <h5 id="shadowTemplate"><code>shadowTemplate</code> <i>String</i></h5>
57
+ <p>A string of <b class="tc-primary">HTML</b> that is used to render the markup of the component. This <b class="tc-success">should be</b> overwritten in your component with your own markup, but make sure to use the <code>super.shadowTemplate</code> to get the default slot.</p>
58
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-comment">/* Other things */</span><br /> <span class="hljs-keyword">get</span> shadowTemplate(){<br /> <span class="hljs-keyword">return</span> <span class="hljs-comment">/*html*/</span><span class="hljs-string">`<br /> <span class="hljs-subst">${<span class="hljs-keyword">super</span>.shadowTemplate}</span><br /> &lt;p&gt;This is my component&lt;/p&gt;<br /> `</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
59
+
60
+ <h5 id="shadowStyles"><code>shadowStyles</code> <i>String</i></h5>
61
+ <p>A string of <b class="tc-primary">CSS</b> that styles the Shadow DOM (from the <code>shadowTemplate</code>).</p>
62
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-comment">/* Other things */</span><br /> <span class="hljs-keyword">get</span> shadowStyles(){<br /> <span class="hljs-keyword">return</span> <span class="hljs-comment">/*css*/</span><span class="hljs-string">`<br /> :host {<br /> /* Style this element */<br /> }<br /> p {<br /> /* Style Shadow DOM Elements */<br /> }<br /> `</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
63
+
64
+ <h3 id="methods">Methods</h3>
65
+ <h5><code>async render(<i>Boolean</i> force = false)</code></h5>
66
+ <p>This method renders the Shadow DOM if it has not already been rendered, and sets the <code>rendered</code> attribute to <code>true</code>.</p>
67
+ <p>This <b class="tc-success">should be</b> overwritten in your component with your own function, but make sure to use the <code>super.render(force)</code> to render the Shadow DOM.</p>
68
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">async</span> render(force){<br /> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br /> <span class="hljs-comment">/* The Shadow DOM is ready, do your stuff here<br /> This is often attaching event handlers to Shadow DOM elements<br /> */</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br /> }<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
69
+
70
+ <h5><code>registerAttribute(<i>String</i> name, <i>Any</i> defaultValue = '')</code></h5>
71
+ <p>This method creates an attribute (dash case), that can also be accessed as a member with camel case. This is typically done in the constructor.</p>
72
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerAttribute(<span class="hljs-string">'my-att'</span>, <span class="hljs-string">'hello'</span>);<br /> <span class="hljs-comment">// this can now be accessed by using this.myAtt</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
73
+
74
+ <h5><code>registerAttributes(<i>Object</i> attributes)</code></h5>
75
+ <p>This is the same as <code>registerAttribute</code>, except it takes the attributes as key-value-pairs allowing you to register multiple attributes at once.</p>
76
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerAttributes({<br /> <span class="hljs-string">'myAttr1'</span>: <span class="hljs-string">'value1'</span>,<br /> <span class="hljs-string">'myAttr2'</span>: <span class="hljs-string">'value2'</span> <br /> });<br /> <span class="hljs-comment">// this can now be accessed by using this.myAttr1 and this.myAttr2</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
77
+
78
+ <h5><code>registerProp(<i>String</i> name, <i>Any</i> defaultValue)</code></h5>
79
+ <p>This method creates a property. This is typically done in the constructor.</p>
80
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerProp(<span class="hljs-string">'myProp'</span>, [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>]);<br /> <span class="hljs-comment">// this can now be accessed by using this.myProp</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
81
+
82
+ <h5><code>registerProps(<i>Object</i> properties)</code></h5>
83
+ <p>This is the same as <code>registerProp</code>, except it takes the props as key-value-pairs allowing you to register multiple props at once.</p>
84
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerProps({<br /> <span class="hljs-attr">myProp1</span>: [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>],<br /> <span class="hljs-attr">myProp2</span>: <span class="hljs-number">5</span><br /> });<br /> <span class="hljs-comment">// these props can now be accessed by using this.myProp1 and this.myProp2</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
85
+
86
+ </main>
87
+ <div style="height:33vh"></div>
88
+ <script type="module" src="../src/components/Import.js"></script>
89
+ </body>
90
+ </html>
package/docs/components/content-slider.html ADDED
@@ -0,0 +1,193 @@
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>Content Slider - 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">Content Slider</h1>
19
+ <main>
20
+ <details
21
+ class="b r mb"
22
+ >
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#keyboardControls">Keyboard Controls</a><br />
28
+ <a href="#globalControls">Global Controls</a><br />
29
+ <a href="#controls">Controls</a><br />
30
+ <a href="#loop">Loop</a><br />
31
+ <h6 class="mt">JavaScript Reference</h6>
32
+ <a href="#constructor">Constructor</a><br />
33
+ <a href="#requirements">Requirements</a><br />
34
+ <a href="#attributes">Attributes</a><br />
35
+ <a href="#properties">Properties</a><br />
36
+ <a href="#methods">Methods</a><br />
37
+ </div>
38
+ </details>
39
+
40
+ <h3>Description</h3>
41
+ <p>description</p>
42
+
43
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
44
+ <div class="row -mx">
45
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
46
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
47
+ </div>
48
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
49
+ <k-content-slider
50
+ class="bg-alt"
51
+ style="height: 10rem"
52
+ >
53
+ <div><p>Slide 1</p></div>
54
+ <div><p>Slide 2</p></div>
55
+ <div><p>Slide 3</p></div>
56
+ <div><p>Slide 4</p></div>
57
+ </k-content-slider>
58
+ </div>
59
+ </div>
60
+
61
+ <h3 id="keyboardControls"><a href="#keyboardControls" class="no-link">Keyboard Controls</a></h3>
62
+ <p>By default the <code>keyboard-controls</code> attribute is set to <code>"true"</code>, which allows the left and right keyboard buttons to change the slides when the component is focused. Set it to <code>"false"</code> to disable this functionality.</p>
63
+ <div class="row -mx">
64
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
65
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
66
+ </div>
67
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
68
+ <k-content-slider
69
+ class="bg-alt"
70
+ style="height: 10rem"
71
+ keyboard-controls="false"
72
+ >
73
+ <div><p>Slide 1</p></div>
74
+ <div><p>Slide 2</p></div>
75
+ <div><p>Slide 3</p></div>
76
+ <div><p>Slide 4</p></div>
77
+ </k-content-slider>
78
+ </div>
79
+ </div>
80
+
81
+ <h3 id="globalControls"><a href="#globalControls" class="no-link">Global Controls</a></h3>
82
+ <p>Use the <code>global-controls="true"</code> attribute to enable global controls (next and back arrows) anywhere in the window, even when this component is not focused. This is suggested when there is only one content slider on a page and it is of prominance (large slider on top of the page).</p>
83
+ <div class="row -mx">
84
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
85
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">global-controls</span>=<span class="hljs-string">"true"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
86
+ </div>
87
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
88
+ <k-content-slider
89
+ class="bg-alt"
90
+ style="height: 10rem"
91
+ global-controls="true"
92
+ >
93
+ <div><p>Slide 1</p></div>
94
+ <div><p>Slide 2</p></div>
95
+ <div><p>Slide 3</p></div>
96
+ <div><p>Slide 4</p></div>
97
+ </k-content-slider>
98
+ </div>
99
+ </div>
100
+
101
+ <h3 id="controls"><a href="#controls" class="no-link">Controls</a></h3>
102
+ <p>By default the <code>controls</code> attribute is set to <code>"true"</code>, this shows the previous and next buttons. To hide them set <code>controls="false"</code>.</p>
103
+ <div class="row -mx">
104
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
105
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
106
+ </div>
107
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
108
+ <k-content-slider
109
+ class="bg-alt"
110
+ style="height: 10rem"
111
+ controls="false"
112
+ >
113
+ <div><p>Slide 1</p></div>
114
+ <div><p>Slide 2</p></div>
115
+ <div><p>Slide 3</p></div>
116
+ <div><p>Slide 4</p></div>
117
+ </k-content-slider>
118
+ </div>
119
+ </div>
120
+
121
+ <h3 id="loop"><a href="#loop" class="no-link">Loop</a></h3>
122
+ <p>To make the slider loop (go back to the beginning after it hits the last slide) use the <code>loop="true"</code> attribute.</p>
123
+ <div class="row -mx">
124
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
125
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">loop</span>=<span class="hljs-string">"true"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-content-slider</span>&gt;</span></code></pre>
126
+ </div>
127
+ <div class="col d-span-6 t-span-6 m-spane-12 p">
128
+ <k-content-slider
129
+ class="bg-alt"
130
+ style="height: 10rem"
131
+ loop="true"
132
+ >
133
+ <div><p>Slide 1</p></div>
134
+ <div><p>Slide 2</p></div>
135
+ <div><p>Slide 3</p></div>
136
+ <div><p>Slide 4</p></div>
137
+ </k-content-slider>
138
+ </div>
139
+ </div>
140
+
141
+ <h2 id="jsRef">JavaScript Refrerence</h2>
142
+
143
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
144
+ <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
145
+ <h5>
146
+ <code>new ContentSlider()</code><br />
147
+ <code>new ContentSlider(<i>&lt;Array>HTMLElement</i> content)</code><br/>
148
+ <code>new ContentSlider(<i>&lt;Array>HTMLElement</i> content, <i>Object</i> init_attrs)</code>
149
+ </h5>
150
+
151
+ <h4>Paramters</h4>
152
+ <h5><code>content<i>: &lt;Array>HTMLElement></i></code></h5>
153
+ <p>An array of <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a>s that will be the contents of this slider.</p>
154
+ <h5><code>init_attrs<i>: Object</i></code></h5>
155
+ <p>An options object that may contain the initial values of the attributes (see attributes below).</p>
156
+
157
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
158
+ <ul>
159
+ <li><a href="">LazyComponent Class</a></li>
160
+ <li><a href="">elements.js Util</a></li>
161
+ </ul>
162
+
163
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
164
+ <h5><code>index<i>: number</i></code></h5>
165
+ <p>The index of the currently active slide (base <code>0</code>). The default value is <code>0</code>.</p>
166
+
167
+ <h5><code>controls<i>: boolean</i></code></h5>
168
+ <p>A boolean that indicates if the control buttons should be shown. The default value is <code>true</code>.</p>
169
+
170
+ <h5><code>keyboardControls<i>: boolean</i></code></h5>
171
+ <p>A boolean that indicates if the left and right arrows should be used to control the slider. The default value is <code>true</code>.</p>
172
+
173
+ <h5><code>globalControls<i>: boolean</i></code></h5>
174
+ <p>A boolean that indicates if the left and right arrows should be used to control the slider even when it is not focused (the listener is on the window). The default value is <code>false</code>.</p>
175
+
176
+ <h5><code>loop<i>: boolean</i></code></h5>
177
+ <p>A boolean that indicates index should loop. When true, after the last side it will go back to the first, and when on the first slide the previous slide will be the last. The default value is <code>false</code>.</p>
178
+
179
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
180
+ <h5><code>previous()<i>: undefined</i></code></h5>
181
+ <p>Goes to the previous slide.</p>
182
+
183
+ <h5><code>next()<i>: undefined</i></code></h5>
184
+ <p>Goes to the next slide.</p>
185
+
186
+ <h5><code>goto(<i>number<i> index)<i>: undefined</i></code></h5>
187
+ <p>Goes to the specified slide. If the index is more than the number of slides the last side will be shown. If the index is below 0, the first slide will be shown.</p>
188
+
189
+ </main>
190
+ <script type="module" src="../src/components/Import.js"></script>
191
+ <script type="module" src="../src/components/ContentSlider.js"></script>
192
+ </body>
193
+ </html>