kempo-ui 0.0.42 → 0.0.43

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 (88) hide show
  1. package/dist/components/Accordion.js +1 -1
  2. package/dist/components/ContentSlider.js +2 -2
  3. package/dist/components/Icon.js +34 -2
  4. package/dist/components/Main.js +24 -0
  5. package/dist/components/PhotoViewer.js +2 -2
  6. package/dist/components/ShowMore.js +8 -8
  7. package/dist/components/SidePanel.js +225 -0
  8. package/dist/components/Table.js +1 -1
  9. package/dist/components/tableControls/FirstPage.js +1 -1
  10. package/dist/components/tableControls/LastPage.js +1 -1
  11. package/dist/components/tableControls/NextPage.js +1 -1
  12. package/dist/components/tableControls/PrevPage.js +1 -1
  13. package/dist/utils/theme.js +1 -1
  14. package/docs/components/icon.html +50 -5
  15. package/docs/components/side-panel-basic.html +44 -0
  16. package/docs/components/side-panel-menu.html +50 -0
  17. package/docs/components/side-panel.html +186 -0
  18. package/docs/components/table.html +24 -24
  19. package/docs/dev.config.json +8 -0
  20. package/docs/icons/account-circle.svg +1 -0
  21. package/docs/icons/arrow-circle.svg +1 -0
  22. package/docs/icons/arrow-line.svg +1 -0
  23. package/docs/icons/arrow-menu-close.svg +1 -0
  24. package/docs/icons/arrow-menu-open.svg +1 -0
  25. package/docs/icons/arrow.svg +1 -0
  26. package/docs/icons/chevron-double.svg +1 -0
  27. package/docs/icons/chevron-line.svg +1 -0
  28. package/docs/icons/chevron-up.svg +1 -0
  29. package/docs/icons/key.svg +1 -0
  30. package/docs/icons/login.svg +1 -0
  31. package/docs/icons/logout.svg +1 -0
  32. package/docs/index.html +6 -0
  33. package/docs/nav-1.inc.html +1 -0
  34. package/docs/nav.inc.html +1 -0
  35. package/docs/prod.config.json +4 -0
  36. package/docs/src/components/Accordion.js +1 -1
  37. package/docs/src/components/ContentSlider.js +2 -2
  38. package/docs/src/components/Icon.js +34 -2
  39. package/docs/src/components/Main.js +24 -0
  40. package/docs/src/components/PhotoViewer.js +2 -2
  41. package/docs/src/components/ShowMore.js +8 -8
  42. package/docs/src/components/SidePanel.js +225 -0
  43. package/docs/src/components/Table.js +1 -1
  44. package/docs/src/components/tableControls/FirstPage.js +1 -1
  45. package/docs/src/components/tableControls/LastPage.js +1 -1
  46. package/docs/src/components/tableControls/NextPage.js +1 -1
  47. package/docs/src/components/tableControls/PrevPage.js +1 -1
  48. package/docs/src/utils/theme.js +1 -1
  49. package/icons/account-circle.svg +1 -0
  50. package/icons/arrow-circle.svg +1 -0
  51. package/icons/arrow-line.svg +1 -0
  52. package/icons/arrow.svg +1 -0
  53. package/icons/chevron-double.svg +1 -0
  54. package/icons/chevron-line.svg +1 -0
  55. package/icons/chevron.svg +1 -0
  56. package/icons/key.svg +1 -0
  57. package/icons/login.svg +1 -0
  58. package/icons/logout.svg +1 -0
  59. package/package.json +1 -1
  60. package/scripts/build.js +0 -7
  61. package/src/components/Accordion.js +1 -1
  62. package/src/components/ContentSlider.js +2 -2
  63. package/src/components/Icon.js +58 -2
  64. package/src/components/Main.js +87 -0
  65. package/src/components/PhotoViewer.js +2 -2
  66. package/src/components/ShowMore.js +8 -8
  67. package/src/components/SidePanel.js +454 -0
  68. package/src/components/Table.js +1 -1
  69. package/src/components/tableControls/FirstPage.js +1 -1
  70. package/src/components/tableControls/LastPage.js +1 -1
  71. package/src/components/tableControls/NextPage.js +1 -1
  72. package/src/components/tableControls/PrevPage.js +1 -1
  73. package/src/utils/theme.js +22 -9
  74. package/tests/components/Icon.browser-test.js +205 -0
  75. package/tests/components/Main.browser-test.js +345 -0
  76. package/tests/components/SidePanel.browser-test.js +466 -0
  77. package/tests/components/tableControls/PaginationControls.browser-test.js +10 -10
  78. package/dist/kempo-vars.css +0 -1
  79. package/docs/src/kempo-vars.css +0 -1
  80. package/icons/arrow-back.svg +0 -1
  81. package/icons/arrow-down-double.svg +0 -1
  82. package/icons/arrow-down.svg +0 -1
  83. package/icons/arrow-up-double.svg +0 -1
  84. package/icons/arrow-up.svg +0 -1
  85. package/icons/chevron-left.svg +0 -1
  86. package/src/kempo-vars.css +0 -1
  87. /package/{icons/arrow-forward.svg → docs/icons/arrow-right.svg} +0 -0
  88. /package/{icons/chevron-right.svg → docs/icons/chevron.svg} +0 -0
package/docs/components/side-panel.html ADDED
@@ -0,0 +1,186 @@
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>SidePanel - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
9
+ <link rel="stylesheet" href="../kempo-vars.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
11
+ <link rel="stylesheet" href="../kempo-hljs.css" />
12
+ <link rel="stylesheet" href="../styles.css" />
13
+ <script>window.litDisableBundleWarning = true;</script>
14
+ </head>
15
+ <body>
16
+ <k-import src="../nav-1.inc.html"></k-import>
17
+ <h1 class="ta-center">SidePanel</h1>
18
+ <main>
19
+ <k-accordion persistent-id="toc" class="b r mb">
20
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
+ <k-accordion-panel name="toc-panel">
22
+ <div class="m ">
23
+ <h6>Examples</h6>
24
+ <a href="#basicUsage">Basic Usage</a><br />
25
+ <a href="#withMenu">With Menu</a><br />
26
+ <a href="#collapsedDefault">Collapsed by Default</a><br />
27
+ <a href="#rightSidePanel">Right Side Panel</a><br />
28
+ <a href="#customStyling">Custom Styling</a><br />
29
+
30
+ <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
31
+ <a href="#constructor">Constructor</a><br />
32
+ <a href="#mainComponent">Main Component</a><br />
33
+ <a href="#requirements">Requirements</a><br />
34
+ <a href="#properties">Properties</a><br />
35
+ <a href="#events">Events</a><br />
36
+ <a href="#methods">Methods</a><br />
37
+ <a href="#cssVariables">CSS Variables</a><br />
38
+ </div>
39
+ </k-accordion-panel>
40
+ </k-accordion>
41
+
42
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
43
+ <p>The Side Panel is a persistent navigation panel with sub-components for items, labels, menus, and spacing.</p>
44
+ <p>Use the <code>&lt;k-main&gt;</code> component alongside the side panel to automatically adjust content margins when the panel expands or collapses. The Main component wraps a standard <code>&lt;main&gt;</code> element with auto-centering and listens for panel state changes via window events.</p>
45
+ <div class="row -mx">
46
+ <div class="col m-span-12 px">
47
+ <k-card label="HTML">
48
+ <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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/SidePanel.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/Main.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"logo"</span>&gt;</span>Kempo<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cards"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">active</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"check"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Tasks<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-label</span>&gt;</span>Projects<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"folder"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Figma Design<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"folder"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Static Mania<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-spacer</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"settings"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"account-circle"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Profile<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Main Content<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Content automatically adjusts when panel opens/closes.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
49
+ </k-card>
50
+ </div>
51
+ <div class="col m-span-12 px">
52
+ <k-card label="Output">
53
+ <iframe src="./side-panel-basic.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
54
+ </k-card>
55
+ </div>
56
+ </div>
57
+
58
+ <h3 id="withMenu"><a href="#withMenu" class="no-link">With Menu</a></h3>
59
+ <p>Use <code>k-side-panel-menu</code> for expandable menu items.</p>
60
+ <div class="row -mx">
61
+ <div class="col m-span-12 px">
62
+ <k-card label="HTML">
63
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cards"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-menu</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"folder"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Projects"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Website Redesign<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Mobile App<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-menu</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span></code></pre>
64
+ </k-card>
65
+ </div>
66
+ <div class="col m-span-12 px">
67
+ <k-card label="Output">
68
+ <iframe src="./side-panel-menu.html" style="width: 100%; height: 400px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
69
+ </k-card>
70
+ </div>
71
+ </div>
72
+
73
+ <h2 id="jsRef">JavaScript Reference</h2>
74
+
75
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
76
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
77
+ <h5>
78
+ <code>new SidePanel()</code>
79
+ </h5>
80
+
81
+ <h3 id="mainComponent"><a href="#mainComponent" class="no-link">Main Component</a></h3>
82
+ <p>The <code>&lt;k-main&gt;</code> component is designed to work with <code>&lt;k-side-panel&gt;</code>. It automatically adjusts its left or right margin based on the panel's state (expanded/collapsed) and side (left/right).</p>
83
+
84
+ <h4>How It Works</h4>
85
+ <ul>
86
+ <li>Listens for <code>side-panel-change</code> events on <code>window</code></li>
87
+ <li>Automatically detects existing panel on mount</li>
88
+ <li>Adjusts margin with smooth transitions</li>
89
+ <li>Provides standard <code>&lt;main&gt;</code> centering and max-width behavior</li>
90
+ <li>Works with both left and right side panels</li>
91
+ </ul>
92
+
93
+ <h4>Usage</h4>
94
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- Your content here --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
95
+
96
+ <p>No additional JavaScript or event listeners are required. The components communicate automatically via window events.</p>
97
+
98
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
99
+ <ul>
100
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
101
+ <li><a href="./icon.html">Icon</a></li>
102
+ </ul>
103
+
104
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
105
+ <h5><code>collapsed<i>: boolean</i></code></h5>
106
+ <p>Whether the side panel is collapsed to icon-only view. Defaults to <code>false</code>. Syncs to <code>collapsed</code> attribute.</p>
107
+ <h5><code>side<i>: string</i></code></h5>
108
+ <p>The side where the panel is positioned. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
109
+
110
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
111
+ <h5><code>expand</code></h5>
112
+ <p>Dispatched when the side panel is expanded.</p>
113
+ <h5><code>collapse</code></h5>
114
+ <p>Dispatched when the side panel is collapsed.</p>
115
+ <h5><code>change</code></h5>
116
+ <p>Dispatched when the side panel state changes. Event detail contains "expand" or "collapse".</p>
117
+ <h5><code>toggle</code></h5>
118
+ <p>Dispatched when the toggle method is called.</p>
119
+
120
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
121
+ <h5><code>expand()<i>: void</i></code></h5>
122
+ <p>Expands the side panel to show labels.</p>
123
+ <h5><code>collapse()<i>: void</i></code></h5>
124
+ <p>Collapses the side panel to icon-only view.</p>
125
+ <h5><code>toggle()<i>: void</i></code></h5>
126
+ <p>Toggles the side panel between expanded and collapsed states and dispatches a toggle event.</p>
127
+
128
+ <h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
129
+ <table>
130
+ <thead>
131
+ <tr>
132
+ <th>Variable</th>
133
+ <th>Default</th>
134
+ <th>Description</th>
135
+ </tr>
136
+ </thead>
137
+ <tbody>
138
+ <tr>
139
+ <td><code>--bg</code></td>
140
+ <td><code>var(--c_bg)</code></td>
141
+ <td>Background color of the panel</td>
142
+ </tr>
143
+ <tr>
144
+ <td><code>--width-expanded</code></td>
145
+ <td><code>16rem</code></td>
146
+ <td>Width when expanded</td>
147
+ </tr>
148
+ <tr>
149
+ <td><code>--width-collapsed</code></td>
150
+ <td><code>3.5rem</code></td>
151
+ <td>Width when collapsed</td>
152
+ </tr>
153
+ <tr>
154
+ <td><code>--transition-duration</code></td>
155
+ <td><code>var(--animation_ms, 256ms)</code></td>
156
+ <td>Animation duration for collapse/expand</td>
157
+ </tr>
158
+ <tr>
159
+ <td><code>--panel-padding</code></td>
160
+ <td><code>var(--spacer)</code></td>
161
+ <td>Padding inside the panel</td>
162
+ </tr>
163
+ <tr>
164
+ <td><code>--toggle-top</code></td>
165
+ <td><code>var(--spacer_h)</code></td>
166
+ <td>Top position of toggle button</td>
167
+ </tr>
168
+ <tr>
169
+ <td><code>--toggle-right</code></td>
170
+ <td><code>calc(var(--spacer_h) * -1 - 1.5rem)</code></td>
171
+ <td>Right position of toggle button (left side panel)</td>
172
+ </tr>
173
+ <tr>
174
+ <td><code>--toggle-left</code></td>
175
+ <td><code>calc(var(--spacer_h) * -1 - 1.5rem)</code></td>
176
+ <td>Left position of toggle button (right side panel)</td>
177
+ </tr>
178
+ </tbody>
179
+ </table>
180
+ </main>
181
+ <div style="height:33vh"></div>
182
+ <script type="module" src="../src/components/Import.js"></script>
183
+ <script type="module" src="../src/components/Accordion.js"></script>
184
+ <script type="module" src="../src/components/Card.js"></script>
185
+ </body>
186
+ </html>
package/docs/components/table.html CHANGED
@@ -22,18 +22,18 @@
22
22
  <div class="m ">
23
23
  <a href="#basicUsage">Basic Usage</a><br />
24
24
  <h6 class="mt">Examples</h6>
25
- <a href="./components/tableCustomFields.html">Custom Fields</a><br />
26
- <a href="./components/tableControls.html">Top and Bottom Controls</a><br />
27
- <a href="./components/tableRowControls.html">Row Controls</a><br />
28
- <a href="./components/tablePagination.html">Pagination</a><br />
29
- <a href="./components/tableRecordSelection.html">Record Selection</a><br />
30
- <a href="./components/tableRecordEditing.html">Record Editing</a><br />
31
- <a href="./components/tableRecordHiding.html">Record Hiding</a><br />
32
- <a href="./components/tableRecordFiltering.html">Record Filtering</a><br />
33
- <a href="./components/tableRecordSearching.html">Record Searching</a><br />
34
- <a href="./components/tableSorting.html">Sorting</a><br />
35
- <a href="./components/tableFieldSortHide.html">Field Sorting and Hiding</a><br />
36
- <a href="./components/tableFetchRecords.html">Fetching Records</a><br />
25
+ <a href="./tableCustomFields.html">Custom Fields</a><br />
26
+ <a href="./tableControls.html">Top and Bottom Controls</a><br />
27
+ <a href="./tableRowControls.html">Row Controls</a><br />
28
+ <a href="./tablePagination.html">Pagination</a><br />
29
+ <a href="./tableRecordSelection.html">Record Selection</a><br />
30
+ <a href="./tableRecordEditing.html">Record Editing</a><br />
31
+ <a href="./tableRecordHiding.html">Record Hiding</a><br />
32
+ <a href="./tableRecordFiltering.html">Record Filtering</a><br />
33
+ <a href="./tableRecordSearching.html">Record Searching</a><br />
34
+ <a href="./tableSorting.html">Sorting</a><br />
35
+ <a href="./tableFieldSortHide.html">Field Sorting and Hiding</a><br />
36
+ <a href="./tableFetchRecords.html">Fetching Records</a><br />
37
37
  <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
38
38
  <a href="#constructor">Constructor</a><br />
39
39
  <a href="#requirements">Requirements</a><br />
@@ -89,18 +89,18 @@
89
89
 
90
90
  <h3>Examples</h3>
91
91
  <ul>
92
- <li><a href="./components/tableCustomFields.html">Custom Fields Example</a></li>
93
- <li><a href="./components/tableControls.html">Top and Bottom Controls</a></li>
94
- <li><a href="./components/tableRowControls.html">Row Controls</a></li>
95
- <li><a href="./components/tablePagination.html">Pagination</a></li>
96
- <li><a href="./components/tableRecordSelection.html">Record Selection</a></li>
97
- <li><a href="./components/tableRecordEditing.html">Record Editing</a></li>
98
- <li><a href="./components/tableRecordHiding.html">Record Hiding</a></li>
99
- <li><a href="./components/tableRecordFiltering.html">Record Filtering</a></li>
100
- <li><a href="./components/tableRecordSearching.html">Record Searching</a></li>
101
- <li><a href="./components/tableSorting.html">Sorting</a></li>
102
- <li><a href="./components/tableFieldSortHide.html">Field Sorting and Hiding</a></li>
103
- <li><a href="./components/tableFetchRecords.html">Fetching Records</a></li>
92
+ <li><a href="./tableCustomFields.html">Custom Fields Example</a></li>
93
+ <li><a href="./tableControls.html">Top and Bottom Controls</a></li>
94
+ <li><a href="./tableRowControls.html">Row Controls</a></li>
95
+ <li><a href="./tablePagination.html">Pagination</a></li>
96
+ <li><a href="./tableRecordSelection.html">Record Selection</a></li>
97
+ <li><a href="./tableRecordEditing.html">Record Editing</a></li>
98
+ <li><a href="./tableRecordHiding.html">Record Hiding</a></li>
99
+ <li><a href="./tableRecordFiltering.html">Record Filtering</a></li>
100
+ <li><a href="./tableRecordSearching.html">Record Searching</a></li>
101
+ <li><a href="./tableSorting.html">Sorting</a></li>
102
+ <li><a href="./tableFieldSortHide.html">Field Sorting and Hiding</a></li>
103
+ <li><a href="./tableFetchRecords.html">Fetching Records</a></li>
104
104
  </ul>
105
105
 
106
106
  <br />
package/docs/dev.config.json CHANGED
@@ -4,6 +4,14 @@
4
4
  "/src/**": "../src/**"
5
5
  },
6
6
  "middleware": {
7
+ "security": {
8
+ "enabled": true,
9
+ "headers": {
10
+ "X-Content-Type-Options": "nosniff",
11
+ "X-Frame-Options": "SAMEORIGIN",
12
+ "X-XSS-Protection": "1; mode=block"
13
+ }
14
+ },
7
15
  "logging": {
8
16
  "enabled": true,
9
17
  "includeResponseTime": true
package/docs/icons/account-circle.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
package/docs/icons/arrow-circle.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m480-320 160-160-160-160-56 56 64 64H320v80h168l-64 64 56 56Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
package/docs/icons/arrow-line.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M800-240v-480h80v480h-80Zm-320 0-57-56 144-144H80v-80h487L424-664l56-56 240 240-240 240Z"/></svg>
package/docs/icons/arrow-menu-close.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-240H80v-480h80v480Zm320 0L240-480l240-240 56 56-143 144h487v80H393l144 144-57 56Z"/></svg>
package/docs/icons/arrow-menu-open.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M800-240v-480h80v480h-80Zm-320 0-57-56 144-144H80v-80h487L424-664l56-56 240 240-240 240Z"/></svg>
package/docs/icons/arrow.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
package/docs/icons/chevron-double.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M383-480 200-664l56-56 240 240-240 240-56-56 183-184Zm264 0L464-664l56-56 240 240-240 240-56-56 183-184Z"/></svg>
package/docs/icons/chevron-line.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z"/></svg>
package/docs/icons/chevron-up.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>
package/docs/icons/key.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/></svg>
package/docs/icons/login.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/></svg>
package/docs/icons/logout.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>
package/docs/index.html CHANGED
@@ -125,6 +125,12 @@
125
125
  <p class="tc-muted">Slide-out navigation drawer with focus management.</p>
126
126
  </a>
127
127
  </div>
128
+ <div class="span-12 t-span-6 d-span-4 px">
129
+ <a href="./components/side-panel.html" class="card mb no-link d-b">
130
+ <h3 class="tc-primary">Side Panel</h3>
131
+ <p class="tc-muted">Collapsible persistent sidebar that pushes page content.</p>
132
+ </a>
133
+ </div>
128
134
  <div class="span-12 t-span-6 d-span-4 px">
129
135
  <a href="./components/sortable.html" class="card mb no-link d-b">
130
136
  <h3 class="tc-primary">Sortable</h3>
package/docs/nav-1.inc.html CHANGED
@@ -44,6 +44,7 @@
44
44
  <a href="../components/resize.html">Resize</a>
45
45
  <a href="../components/show-more.html">Show More</a>
46
46
  <a href="../components/side-menu.html">Side Menu</a>
47
+ <a href="../components/side-panel.html">Side Panel</a>
47
48
  <a href="../components/sortable.html">Sortable</a>
48
49
  <a href="../components/spinner.html">Spinner</a>
49
50
  <a href="../components/split.html">Split</a>
package/docs/nav.inc.html CHANGED
@@ -44,6 +44,7 @@
44
44
  <a href="./components/resize.html">Resize</a>
45
45
  <a href="./components/show-more.html">Show More</a>
46
46
  <a href="./components/side-menu.html">Side Menu</a>
47
+ <a href="./components/side-panel.html">Side Panel</a>
47
48
  <a href="./components/sortable.html">Sortable</a>
48
49
  <a href="./components/split.html">Split</a>
49
50
  <a href="./components/table.html">Table</a>
package/docs/prod.config.json CHANGED
@@ -1,4 +1,8 @@
1
1
  {
2
+ "customRoutes": {
3
+ "/icons/**": "../icons/**",
4
+ "/src/**": "../src/**"
5
+ },
2
6
  "middleware": {
3
7
  "security": {
4
8
  "enabled": true,
package/docs/src/components/Accordion.js CHANGED
@@ -35,7 +35,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
35
35
  }
36
36
  `;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}render(){return html`
37
37
  <slot name="left-icon">
38
- <k-icon id="icon" name="chevron-right"></k-icon>
38
+ <k-icon id="icon" name="chevron"></k-icon>
39
39
  </slot>
40
40
  <slot></slot>
41
41
  <slot name="right-icon"></slot>
package/docs/src/components/ContentSlider.js CHANGED
@@ -28,7 +28,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
28
28
  @click=${this.handlePrevClick}
29
29
  >
30
30
  <slot name="prev">
31
- <k-icon name="chevron-left"></k-icon>
31
+ <k-icon name="chevron" direction="left"></k-icon>
32
32
  </slot>
33
33
  </button>
34
34
  <button
@@ -37,7 +37,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
37
37
  @click=${this.handleNextClick}
38
38
  >
39
39
  <slot name="next">
40
- <k-icon name="chevron-right"></k-icon>
40
+ <k-icon name="chevron"></k-icon>
41
41
  </slot>
42
42
  </button>
43
43
  </div>
package/docs/src/components/Icon.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const s=(new AbortController).signal;try{const n=await fetch(t,{signal:s});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>{const n=e.endsWith("/")?e.slice(0,-1):e;return getIconByPath(`${n}/${t}.svg`)};return new Promise(async(t,n)=>{let s;const o=window.kempo?.pathsToIcons||["/icons","../../icons","https://cdn.jsdelivr.net/npm/kempo-ui@0.0.32/icons/"];for(let t=0;t<o.length&&!s;t++)try{s=await e(o[t])}catch(t){}t(s||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):window.kempo?.fallbackIcon||'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>'}}fixSVG(t){if(!t)return t;const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return e?(e.removeAttribute("width"),e.removeAttribute("height"),e.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(e)):t}static styles=css`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(n,e)=>{const i=(new AbortController).signal;try{const e=await fetch(t,{signal:i});200===e.status?n(await e.text()):404===e.status&&n(null)}catch(t){"AbortError"!==t.name&&e(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const n=async n=>{const e=n.endsWith("/")?n.slice(0,-1):n;return getIconByPath(`${e}/${t}.svg`)};return new Promise(async(t,e)=>{let i;const o=window.kempo?.pathsToIcons||["/icons","../../icons","https://cdn.jsdelivr.net/npm/kempo-ui@0.0.32/icons/"];for(let t=0;t<o.length&&!i;t++)try{i=await n(o[t])}catch(t){}t(i||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},rotation:{type:String,reflect:!0},direction:{type:String,reflect:!0},animation:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.rotation="",this.direction="",this.animation="",this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):window.kempo?.fallbackIcon||'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>'}}fixSVG(t){if(!t)return t;const n=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return n?(n.removeAttribute("width"),n.removeAttribute("height"),n.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(n)):t}getRotationDegrees(){if(this.rotation)return this.rotation;return{down:"90",left:"180",up:"270"}[this.direction]||"0"}static styles=css`
2
2
  :host {
3
3
  display: inline-block;
4
4
  vertical-align: bottom;
@@ -7,4 +7,36 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
7
7
  height: 1.35em;
8
8
  vertical-align: middle;
9
9
  }
10
- `;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}}window.customElements.define("k-icon",Icon);
10
+
11
+ /* Rotation */
12
+ :host([rotation]) svg,
13
+ :host([direction]) svg {
14
+ transform: rotate(var(--icon-rotation, 0deg));
15
+ }
16
+
17
+ /* Animations */
18
+ :host([animation="spin"]) svg {
19
+ animation: icon-spin 2s linear infinite;
20
+ }
21
+ :host([animation="blink"]) svg {
22
+ animation: icon-blink 1s ease-in-out infinite;
23
+ }
24
+ :host([animation="pulse"]) svg {
25
+ animation: icon-pulse 1.5s ease-in-out infinite;
26
+ }
27
+
28
+ @keyframes icon-spin {
29
+ from { transform: rotate(0deg); }
30
+ to { transform: rotate(360deg); }
31
+ }
32
+
33
+ @keyframes icon-blink {
34
+ 0%, 100% { opacity: 1; }
35
+ 50% { opacity: 0.2; }
36
+ }
37
+
38
+ @keyframes icon-pulse {
39
+ 0%, 100% { transform: scale(1); }
40
+ 50% { transform: scale(1.2); }
41
+ }
42
+ `;render(){const t=this.getRotationDegrees(),n="0"!==t?`--icon-rotation: ${t}deg;`:"";return this.iconContent?html`<div style="${n}">${unsafeHTML(this.iconContent)}</div>`:html`<div style="${n}"><slot></slot></div>`}}window.customElements.define("k-icon",Icon);
package/docs/src/components/Main.js ADDED
@@ -0,0 +1,24 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={panelWidth:{type:String,state:!0},panelSide:{type:String,state:!0}};constructor(){super(),this.panelWidth="0px",this.panelSide="left",this.handlePanelChange=this.handlePanelChange.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("side-panel-change",this.handlePanelChange);const e=document.querySelector("k-side-panel");e&&(this.panelWidth=e.collapsed?"3.5rem":"16rem",this.panelSide=e.side||"left")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("side-panel-change",this.handlePanelChange)}handlePanelChange(e){this.panelWidth=e.detail.width,this.panelSide=e.detail.side}render(){return html`
2
+ <main>
3
+ <slot></slot>
4
+ </main>
5
+ `}static styles=css`
6
+ :host {
7
+ display: block;
8
+ margin-left: var(--panel-width, 0px);
9
+ transition: margin-left var(--animation_ms, 256ms);
10
+ }
11
+ :host([panel-side="right"]) {
12
+ margin-left: 0;
13
+ margin-right: var(--panel-width, 0px);
14
+ transition: margin-right var(--animation_ms, 256ms);
15
+ }
16
+ main {
17
+ max-width: var(--container_width, 90rem);
18
+ margin-left: auto;
19
+ margin-right: auto;
20
+ padding-top: var(--spacer);
21
+ padding-left: var(--spacer);
22
+ padding-right: var(--spacer);
23
+ }
24
+ `;updated(){super.updated(),this.style.setProperty("--panel-width",this.panelWidth),"right"===this.panelSide?this.setAttribute("panel-side","right"):this.removeAttribute("panel-side")}}window.customElements.define("k-main",Main);
package/docs/src/components/PhotoViewer.js CHANGED
@@ -116,12 +116,12 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
116
116
  </button>
117
117
  <button id="prev" class="nav-btn no-btn" @click=${this.handlePrevClick}>
118
118
  <slot name="prev">
119
- <k-icon name="chevron-left"></k-icon>
119
+ <k-icon name="chevron" direction="left"></k-icon>
120
120
  </slot>
121
121
  </button>
122
122
  <button id="next" class="nav-btn no-btn" @click=${this.handleNextClick}>
123
123
  <slot name="next">
124
- <k-icon name="chevron-right"></k-icon>
124
+ <k-icon name="chevron"></k-icon>
125
125
  </slot>
126
126
  </button>
127
127
  <div class="content">
package/docs/src/components/ShowMore.js CHANGED
@@ -30,13 +30,13 @@ import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from".
30
30
  <div id="content">
31
31
  <slot></slot>
32
32
  </div>
33
- <button id="toggle" @click=${this.handleToggleClick} class="no-btn">
34
- <span id="more">
35
- <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>
36
- </span>
37
- <span id="less">
38
- <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>
39
- </span>
40
- </button>
33
+ <button id="toggle" @click=${this.handleToggleClick} class="no-btn">
34
+ <span id="more">
35
+ <slot name="more">Show More <k-icon name="chevron-double" direction="down"></k-icon></slot>
36
+ </span>
37
+ <span id="less">
38
+ <slot name="less">Show Less <k-icon name="chevron-double" direction="up"></k-icon></slot>
39
+ </span>
40
+ </button>
41
41
  </div>
42
42
  `}}customElements.define("k-show-more",ShowMore);