kempo-ui 0.0.41 → 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.
- package/dist/components/Accordion.js +1 -1
- package/dist/components/ContentSlider.js +2 -2
- package/dist/components/Icon.js +34 -2
- package/dist/components/Main.js +24 -0
- package/dist/components/PhotoViewer.js +2 -2
- package/dist/components/ShowMore.js +8 -8
- package/dist/components/SidePanel.js +225 -0
- package/dist/components/Table.js +1 -1
- package/dist/components/tableControls/FirstPage.js +1 -1
- package/dist/components/tableControls/LastPage.js +1 -1
- package/dist/components/tableControls/NextPage.js +1 -1
- package/dist/components/tableControls/PrevPage.js +1 -1
- package/dist/utils/theme.js +1 -1
- package/docs/components/accordion.html +0 -1
- package/docs/components/card.html +0 -1
- package/docs/components/content-slider.html +0 -1
- package/docs/components/dialog.html +0 -1
- package/docs/components/dropdown.html +0 -1
- package/docs/components/focus-capture.html +0 -1
- package/docs/components/hybrid-component.html +0 -1
- package/docs/components/icon.html +50 -5
- package/docs/components/import.html +0 -1
- package/docs/components/light-component.html +0 -1
- package/docs/components/photo-viewer.html +0 -1
- package/docs/components/resize.html +0 -1
- package/docs/components/shadow-component.html +0 -1
- package/docs/components/show-more.html +0 -1
- package/docs/components/side-menu.html +0 -1
- package/docs/components/side-panel-basic.html +44 -0
- package/docs/components/side-panel-menu.html +50 -0
- package/docs/components/side-panel.html +186 -0
- package/docs/components/sortable.html +0 -1
- package/docs/components/spinner.html +0 -1
- package/docs/components/split.html +0 -1
- package/docs/components/table.html +24 -25
- package/docs/components/tableControls.html +0 -1
- package/docs/components/tableCustomFields.html +0 -1
- package/docs/components/tableFetchRecords.html +0 -1
- package/docs/components/tableFieldSortHide.html +0 -1
- package/docs/components/tablePagination.html +0 -1
- package/docs/components/tableRecordEditing.html +0 -1
- package/docs/components/tableRecordFiltering.html +0 -1
- package/docs/components/tableRecordHiding.html +0 -1
- package/docs/components/tableRecordSearching.html +0 -1
- package/docs/components/tableRecordSelection.html +0 -1
- package/docs/components/tableRowControls.html +0 -1
- package/docs/components/tableSorting.html +0 -1
- package/docs/components/tabs.html +0 -1
- package/docs/components/tags.html +0 -1
- package/docs/components/theme-switcher.html +0 -1
- package/docs/components/timestamp.html +0 -1
- package/docs/components/toast.html +0 -1
- package/docs/components/toggle.html +0 -1
- package/docs/components/tree.html +0 -1
- package/docs/dev.config.json +8 -1
- package/docs/icons/account-circle.svg +1 -0
- package/docs/icons/arrow-circle.svg +1 -0
- package/docs/icons/arrow-line.svg +1 -0
- package/docs/icons/arrow-menu-close.svg +1 -0
- package/docs/icons/arrow-menu-open.svg +1 -0
- package/docs/icons/arrow.svg +1 -0
- package/docs/icons/chevron-double.svg +1 -0
- package/docs/icons/chevron-line.svg +1 -0
- package/docs/icons/chevron-up.svg +1 -0
- package/docs/icons/key.svg +1 -0
- package/docs/icons/login.svg +1 -0
- package/docs/icons/logout.svg +1 -0
- package/docs/index.html +6 -1
- package/docs/nav-1.inc.html +1 -0
- package/docs/nav.inc.html +1 -0
- package/docs/prod.config.json +4 -0
- package/docs/src/components/Accordion.js +1 -1
- package/docs/src/components/ContentSlider.js +2 -2
- package/docs/src/components/Icon.js +34 -2
- package/docs/src/components/Main.js +24 -0
- package/docs/src/components/PhotoViewer.js +2 -2
- package/docs/src/components/ShowMore.js +8 -8
- package/docs/src/components/SidePanel.js +225 -0
- package/docs/src/components/Table.js +1 -1
- package/docs/src/components/tableControls/FirstPage.js +1 -1
- package/docs/src/components/tableControls/LastPage.js +1 -1
- package/docs/src/components/tableControls/NextPage.js +1 -1
- package/docs/src/components/tableControls/PrevPage.js +1 -1
- package/docs/src/utils/theme.js +1 -1
- package/docs/utils/context.html +0 -1
- package/docs/utils/debounce.html +0 -1
- package/docs/utils/drag.html +0 -1
- package/docs/utils/formatTimestamp.html +0 -1
- package/docs/utils/object.html +0 -1
- package/docs/utils/propConverters.html +0 -1
- package/docs/utils/string.html +0 -1
- package/docs/utils/theme.html +0 -1
- package/docs/utils/toTitleCase.html +0 -1
- package/docs/utils/type.html +0 -1
- package/docs/utils/wait.html +0 -1
- package/icons/account-circle.svg +1 -0
- package/icons/arrow-circle.svg +1 -0
- package/icons/arrow-line.svg +1 -0
- package/icons/arrow.svg +1 -0
- package/icons/chevron-double.svg +1 -0
- package/icons/chevron-line.svg +1 -0
- package/icons/chevron.svg +1 -0
- package/icons/key.svg +1 -0
- package/icons/login.svg +1 -0
- package/icons/logout.svg +1 -0
- package/package.json +1 -1
- package/scripts/build.js +0 -7
- package/src/components/Accordion.js +1 -1
- package/src/components/ContentSlider.js +2 -2
- package/src/components/Icon.js +64 -4
- package/src/components/Main.js +87 -0
- package/src/components/PhotoViewer.js +2 -2
- package/src/components/ShowMore.js +8 -8
- package/src/components/SidePanel.js +454 -0
- package/src/components/Table.js +1 -1
- package/src/components/tableControls/FirstPage.js +1 -1
- package/src/components/tableControls/LastPage.js +1 -1
- package/src/components/tableControls/NextPage.js +1 -1
- package/src/components/tableControls/PrevPage.js +1 -1
- package/src/utils/theme.js +22 -9
- package/tests/components/Icon.browser-test.js +205 -0
- package/tests/components/Main.browser-test.js +345 -0
- package/tests/components/SidePanel.browser-test.js +466 -0
- package/tests/components/tableControls/PaginationControls.browser-test.js +10 -10
- package/dist/kempo-vars.css +0 -1
- package/docs/init-1.js +0 -4
- package/docs/init.js +0 -4
- package/docs/src/kempo-vars.css +0 -1
- package/icons/arrow-back.svg +0 -1
- package/icons/arrow-down-double.svg +0 -1
- package/icons/arrow-down.svg +0 -1
- package/icons/arrow-up-double.svg +0 -1
- package/icons/arrow-up.svg +0 -1
- package/icons/chevron-left.svg +0 -1
- package/src/kempo-vars.css +0 -1
- /package/{icons/arrow-forward.svg → docs/icons/arrow-right.svg} +0 -0
- /package/{icons/chevron-right.svg → docs/icons/chevron.svg} +0 -0
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -0,0 +1,44 @@
|
|
|
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 Basic Example</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
9
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
|
+
<script type="module">
|
|
11
|
+
import theme from '../src/utils/theme.js';
|
|
12
|
+
theme.init();
|
|
13
|
+
</script>
|
|
14
|
+
<script type="module" src="../src/components/SidePanel.js"></script>
|
|
15
|
+
<script type="module" src="../src/components/Main.js"></script>
|
|
16
|
+
<style>
|
|
17
|
+
body {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
height: 100vh;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<k-side-panel>
|
|
27
|
+
<h5 slot="logo" class="m0">Kempo</h5>
|
|
28
|
+
<k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
|
|
29
|
+
<k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
|
|
30
|
+
<k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
|
|
31
|
+
<k-side-panel-label>Projects</k-side-panel-label>
|
|
32
|
+
<k-side-panel-item icon="folder" href="#">Figma Design</k-side-panel-item>
|
|
33
|
+
<k-side-panel-item icon="folder" href="#">Static Mania</k-side-panel-item>
|
|
34
|
+
<k-side-panel-spacer></k-side-panel-spacer>
|
|
35
|
+
<k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
|
|
36
|
+
<k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
|
|
37
|
+
</k-side-panel>
|
|
38
|
+
<k-main>
|
|
39
|
+
<h2>Main Content</h2>
|
|
40
|
+
<p>This is an example of the side panel. Click the toggle button to collapse it.</p>
|
|
41
|
+
<p>The Main component automatically adjusts its margin based on the panel state.</p>
|
|
42
|
+
</k-main>
|
|
43
|
+
</body>
|
|
44
|
+
</html>
|
|
@@ -0,0 +1,50 @@
|
|
|
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 Menu Example</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
9
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
|
+
<script type="module">
|
|
11
|
+
import theme from '../src/utils/theme.js';
|
|
12
|
+
theme.init();
|
|
13
|
+
</script>
|
|
14
|
+
<script type="module" src="../src/components/SidePanel.js"></script>
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
height: 100vh;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<k-side-panel>
|
|
26
|
+
<h3 slot="logo" style="margin: 0; font-size: 1.25rem;">App</h3>
|
|
27
|
+
<k-side-panel-item icon="cards" href="#">Dashboard</k-side-panel-item>
|
|
28
|
+
<k-side-panel-menu icon="folder" label="Projects">
|
|
29
|
+
<k-side-panel-item href="#">Website Redesign</k-side-panel-item>
|
|
30
|
+
<k-side-panel-item href="#">Mobile App</k-side-panel-item>
|
|
31
|
+
</k-side-panel-menu>
|
|
32
|
+
<k-side-panel-spacer></k-side-panel-spacer>
|
|
33
|
+
<k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
|
|
34
|
+
</k-side-panel>
|
|
35
|
+
<div style="margin-left: 16rem; padding: 2rem; transition: margin-left 256ms;">
|
|
36
|
+
<h2>Main Content</h2>
|
|
37
|
+
<p>Click on the "Projects" menu to expand it and see sub-items.</p>
|
|
38
|
+
</div>
|
|
39
|
+
<script>
|
|
40
|
+
const panel = document.querySelector('k-side-panel');
|
|
41
|
+
const content = document.querySelector('div');
|
|
42
|
+
panel.addEventListener('collapse', () => {
|
|
43
|
+
content.style.marginLeft = '3.5rem';
|
|
44
|
+
});
|
|
45
|
+
panel.addEventListener('expand', () => {
|
|
46
|
+
content.style.marginLeft = '16rem';
|
|
47
|
+
});
|
|
48
|
+
</script>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
@@ -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><k-main></code> component alongside the side panel to automatically adjust content margins when the panel expands or collapses. The Main component wraps a standard <code><main></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"><<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>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br /><span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br /><br /><span class="hljs-tag"><<span class="hljs-name">k-side-panel</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"logo"</span>></span>Kempo<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br /> <span class="hljs-tag"><<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>></span>Dashboard<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<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>></span>Tasks<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<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>></span>Email<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-side-panel-label</span>></span>Projects<span class="hljs-tag"></<span class="hljs-name">k-side-panel-label</span>></span><br /> <span class="hljs-tag"><<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>></span>Figma Design<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<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>></span>Static Mania<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-side-panel-spacer</span>></span><span class="hljs-tag"></<span class="hljs-name">k-side-panel-spacer</span>></span><br /> <span class="hljs-tag"><<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>></span>Settings<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<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>></span>Profile<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-side-panel</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-main</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Main Content<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content automatically adjusts when panel opens/closes.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-main</span>></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"><<span class="hljs-name">k-side-panel</span>></span><br /> <span class="hljs-tag"><<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>Dashboard<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<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>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Website Redesign<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Mobile App<span class="hljs-tag"></<span class="hljs-name">k-side-panel-item</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-side-panel-menu</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-side-panel</span>></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><k-main></code> component is designed to work with <code><k-side-panel></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><main></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"><<span class="hljs-name">k-side-panel</span>></span>...<span class="hljs-tag"></<span class="hljs-name">k-side-panel</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-main</span>></span><br /> <span class="hljs-comment"><!-- Your content here --></span><br /><span class="hljs-tag"></<span class="hljs-name">k-main</span>></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>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -23,18 +22,18 @@
|
|
|
23
22
|
<div class="m ">
|
|
24
23
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
24
|
<h6 class="mt">Examples</h6>
|
|
26
|
-
<a href="./
|
|
27
|
-
<a href="./
|
|
28
|
-
<a href="./
|
|
29
|
-
<a href="./
|
|
30
|
-
<a href="./
|
|
31
|
-
<a href="./
|
|
32
|
-
<a href="./
|
|
33
|
-
<a href="./
|
|
34
|
-
<a href="./
|
|
35
|
-
<a href="./
|
|
36
|
-
<a href="./
|
|
37
|
-
<a href="./
|
|
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 />
|
|
38
37
|
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
39
38
|
<a href="#constructor">Constructor</a><br />
|
|
40
39
|
<a href="#requirements">Requirements</a><br />
|
|
@@ -90,18 +89,18 @@
|
|
|
90
89
|
|
|
91
90
|
<h3>Examples</h3>
|
|
92
91
|
<ul>
|
|
93
|
-
<li><a href="./
|
|
94
|
-
<li><a href="./
|
|
95
|
-
<li><a href="./
|
|
96
|
-
<li><a href="./
|
|
97
|
-
<li><a href="./
|
|
98
|
-
<li><a href="./
|
|
99
|
-
<li><a href="./
|
|
100
|
-
<li><a href="./
|
|
101
|
-
<li><a href="./
|
|
102
|
-
<li><a href="./
|
|
103
|
-
<li><a href="./
|
|
104
|
-
<li><a href="./
|
|
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>
|
|
105
104
|
</ul>
|
|
106
105
|
|
|
107
106
|
<br />
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
|
15
|
-
<script src="../init-1.js" type="module"></script>
|
|
16
15
|
<script>
|
|
17
16
|
window.contacts = [];
|
|
18
17
|
function generateContact(){
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
|
15
|
-
<script src="../init-1.js" type="module"></script>
|
|
16
15
|
<script>
|
|
17
16
|
window.contacts = [];
|
|
18
17
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
|
15
|
-
<script src="../init-1.js" type="module"></script>
|
|
16
15
|
<script>
|
|
17
16
|
window.contacts = [];
|
|
18
17
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
|
15
|
-
<script src="../init-1.js" type="module"></script>
|
|
16
15
|
<script>
|
|
17
16
|
window.contacts = [];
|
|
18
17
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
<script>
|
|
16
15
|
window.contacts = [];
|
|
17
16
|
function generateContact(){
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
|
15
|
-
<script src="../init-1.js" type="module"></script>
|
|
16
15
|
<script>
|
|
17
16
|
window.contacts = [];
|
|
18
17
|
function generateContact(){
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
<script src="../init-1.js" type="module"></script>
|
|
15
14
|
</head>
|
|
16
15
|
<body>
|
|
17
16
|
<k-import src="../nav-1.inc.html"></k-import>
|
package/docs/dev.config.json
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"customRoutes": {
|
|
3
|
-
"/kempo-vars.css": "../src/kempo-vars.css",
|
|
4
3
|
"/icons/**": "../icons/**",
|
|
5
4
|
"/src/**": "../src/**"
|
|
6
5
|
},
|
|
7
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
|
+
},
|
|
8
15
|
"logging": {
|
|
9
16
|
"enabled": true,
|
|
10
17
|
"includeResponseTime": true
|
|
@@ -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>
|