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
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
<link rel="stylesheet" href="./kempo-hljs.css">
|
|
11
11
|
<link rel="stylesheet" href="./kempo-vars.css">
|
|
12
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
13
|
-
<script src="./init.js" type="module"></script>
|
|
14
13
|
</head>
|
|
15
14
|
<body>
|
|
16
15
|
<k-import src="nav.inc.html"></k-import>
|
|
@@ -126,6 +125,12 @@
|
|
|
126
125
|
<p class="tc-muted">Slide-out navigation drawer with focus management.</p>
|
|
127
126
|
</a>
|
|
128
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>
|
|
129
134
|
<div class="span-12 t-span-6 d-span-4 px">
|
|
130
135
|
<a href="./components/sortable.html" class="card mb no-link d-b">
|
|
131
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
|
@@ -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
|
|
38
|
+
<k-icon id="icon" name="chevron"></k-icon>
|
|
39
39
|
</slot>
|
|
40
40
|
<slot></slot>
|
|
41
41
|
<slot name="right-icon"></slot>
|
|
@@ -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
|
|
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
|
|
40
|
+
<k-icon name="chevron"></k-icon>
|
|
41
41
|
</slot>
|
|
42
42
|
</button>
|
|
43
43
|
</div>
|
|
@@ -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
|
|
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
|
-
|
|
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);
|
|
@@ -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);
|
|
@@ -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
|
|
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
|
|
124
|
+
<k-icon name="chevron"></k-icon>
|
|
125
125
|
</slot>
|
|
126
126
|
</button>
|
|
127
127
|
<div class="content">
|
|
@@ -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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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);
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0}};constructor(){super(),this.collapsed=!1,this.side="left"}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("collapsed")){const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
|
|
2
|
+
<div id="header">
|
|
3
|
+
<slot name="logo"></slot>
|
|
4
|
+
<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
|
|
5
|
+
<k-icon name="arrow-line" direction="${this.collapsed?"right":"left"}"></k-icon>
|
|
6
|
+
</button>
|
|
7
|
+
</div>
|
|
8
|
+
<div id="content">
|
|
9
|
+
<slot></slot>
|
|
10
|
+
</div>
|
|
11
|
+
`}static styles=css`
|
|
12
|
+
:host {
|
|
13
|
+
--bg: var(--c_bg);
|
|
14
|
+
--width-expanded: 16rem;
|
|
15
|
+
--width-collapsed: 3.5rem;
|
|
16
|
+
--transition-duration: var(--animation_ms, 256ms);
|
|
17
|
+
display: block;
|
|
18
|
+
position: fixed;
|
|
19
|
+
top: 0;
|
|
20
|
+
left: 0;
|
|
21
|
+
height: 100vh;
|
|
22
|
+
width: var(--width-expanded);
|
|
23
|
+
transition: width var(--transition-duration);
|
|
24
|
+
background: var(--bg);
|
|
25
|
+
border-right: 1px solid var(--c_border);
|
|
26
|
+
z-index: 1000;
|
|
27
|
+
}
|
|
28
|
+
:host([collapsed]) {
|
|
29
|
+
width: var(--width-collapsed);
|
|
30
|
+
}
|
|
31
|
+
:host([side="right"]) {
|
|
32
|
+
left: auto;
|
|
33
|
+
right: 0;
|
|
34
|
+
border-right: none;
|
|
35
|
+
border-left: 1px solid var(--c_border);
|
|
36
|
+
}
|
|
37
|
+
#header {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: flex-end;
|
|
41
|
+
gap: var(--spacer_h);
|
|
42
|
+
padding: var(--spacer_h);
|
|
43
|
+
border-bottom: 1px solid var(--c_border);
|
|
44
|
+
}
|
|
45
|
+
::slotted([slot="logo"]) {
|
|
46
|
+
margin-right: auto;
|
|
47
|
+
}
|
|
48
|
+
::slotted([slot="logo"]) {
|
|
49
|
+
flex: 1;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
opacity: 1;
|
|
52
|
+
transition: opacity var(--transition-duration);
|
|
53
|
+
}
|
|
54
|
+
:host([collapsed]) ::slotted([slot="logo"]) {
|
|
55
|
+
opacity: 0;
|
|
56
|
+
width: 0;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
}
|
|
59
|
+
#toggle {
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
width: 2rem;
|
|
62
|
+
height: 2rem;
|
|
63
|
+
border: none;
|
|
64
|
+
background: transparent;
|
|
65
|
+
color: var(--c_text);
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
border-radius: var(--radius);
|
|
71
|
+
}
|
|
72
|
+
#toggle:hover {
|
|
73
|
+
background: var(--c_bg_hover);
|
|
74
|
+
}
|
|
75
|
+
#content {
|
|
76
|
+
height: calc(100% - 3rem);
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
overflow-x: hidden;
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
}
|
|
82
|
+
`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return html`
|
|
83
|
+
<a href="${this.href}" class="item ${this.active?"active bg-primary":""}">
|
|
84
|
+
${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:""}
|
|
85
|
+
<span class="label ${this.collapsed?"hidden":""}">
|
|
86
|
+
<slot></slot>
|
|
87
|
+
</span>
|
|
88
|
+
</a>
|
|
89
|
+
`}static styles=css`
|
|
90
|
+
:host {
|
|
91
|
+
display: block;
|
|
92
|
+
}
|
|
93
|
+
.item {
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
gap: var(--spacer_h);
|
|
97
|
+
padding: var(--spacer_h);
|
|
98
|
+
color: var(--c_text);
|
|
99
|
+
text-decoration: none;
|
|
100
|
+
border-radius: var(--radius);
|
|
101
|
+
margin: 0 var(--spacer_h);
|
|
102
|
+
transition: background var(--animation_ms), color var(--animation_ms);
|
|
103
|
+
white-space: nowrap;
|
|
104
|
+
}
|
|
105
|
+
.item:hover {
|
|
106
|
+
background: var(--c_bg_hover);
|
|
107
|
+
}
|
|
108
|
+
.item.active {
|
|
109
|
+
color: var(--tc_on_primary);
|
|
110
|
+
}
|
|
111
|
+
.item.active:hover {
|
|
112
|
+
background: var(--c_primary);
|
|
113
|
+
filter: brightness(1.1);
|
|
114
|
+
}
|
|
115
|
+
k-icon {
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
}
|
|
118
|
+
.label {
|
|
119
|
+
min-width: 0;
|
|
120
|
+
overflow: hidden;
|
|
121
|
+
text-overflow: ellipsis;
|
|
122
|
+
opacity: 1;
|
|
123
|
+
transition: opacity var(--animation_ms);
|
|
124
|
+
}
|
|
125
|
+
.label.hidden {
|
|
126
|
+
opacity: 0;
|
|
127
|
+
width: 0;
|
|
128
|
+
}
|
|
129
|
+
`}class SidePanelLabel extends ShadowComponent{constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
|
|
130
|
+
:host {
|
|
131
|
+
display: block;
|
|
132
|
+
margin: var(--spacer_h) 0;
|
|
133
|
+
}
|
|
134
|
+
.label {
|
|
135
|
+
padding: 0 var(--spacer);
|
|
136
|
+
font-size: 0.75rem;
|
|
137
|
+
font-weight: 600;
|
|
138
|
+
text-transform: uppercase;
|
|
139
|
+
color: var(--c_text_muted);
|
|
140
|
+
letter-spacing: 0.05em;
|
|
141
|
+
}
|
|
142
|
+
hr {
|
|
143
|
+
border: none;
|
|
144
|
+
border-top: 1px solid var(--c_border);
|
|
145
|
+
margin: var(--spacer_h) var(--spacer);
|
|
146
|
+
}
|
|
147
|
+
`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed||(this.open=!this.open)};render(){return html`
|
|
148
|
+
<div class="menu-container">
|
|
149
|
+
<button class="menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
|
|
150
|
+
${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:""}
|
|
151
|
+
<span class="label ${this.collapsed?"hidden":""}">${this.label}</span>
|
|
152
|
+
${this.collapsed?"":html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
|
|
153
|
+
</button>
|
|
154
|
+
<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
|
|
155
|
+
<slot></slot>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
`}static styles=css`
|
|
159
|
+
:host {
|
|
160
|
+
display: block;
|
|
161
|
+
}
|
|
162
|
+
.menu-container {
|
|
163
|
+
margin: 0;
|
|
164
|
+
}
|
|
165
|
+
.menu-header {
|
|
166
|
+
display: flex !important;
|
|
167
|
+
align-items: center;
|
|
168
|
+
gap: var(--spacer_h);
|
|
169
|
+
padding-top: var(--spacer_h) !important;
|
|
170
|
+
padding-bottom: var(--spacer_h) !important;
|
|
171
|
+
padding-left: var(--spacer_h) !important;
|
|
172
|
+
padding-right: var(--spacer_h) !important;
|
|
173
|
+
color: var(--c_text);
|
|
174
|
+
background: transparent;
|
|
175
|
+
border: none;
|
|
176
|
+
border-radius: var(--radius);
|
|
177
|
+
margin: 0 var(--spacer_h);
|
|
178
|
+
width: calc(100% - var(--spacer));
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
text-align: left;
|
|
181
|
+
white-space: nowrap;
|
|
182
|
+
transition: background var(--animation_ms);
|
|
183
|
+
}
|
|
184
|
+
.menu-header:hover {
|
|
185
|
+
background: var(--c_bg_hover);
|
|
186
|
+
}
|
|
187
|
+
k-icon {
|
|
188
|
+
flex-shrink: 0;
|
|
189
|
+
}
|
|
190
|
+
.label {
|
|
191
|
+
flex: 1;
|
|
192
|
+
min-width: 0;
|
|
193
|
+
overflow: hidden;
|
|
194
|
+
text-overflow: ellipsis;
|
|
195
|
+
opacity: 1;
|
|
196
|
+
transition: opacity var(--animation_ms);
|
|
197
|
+
}
|
|
198
|
+
.label.hidden {
|
|
199
|
+
opacity: 0;
|
|
200
|
+
width: 0;
|
|
201
|
+
}
|
|
202
|
+
.chevron {
|
|
203
|
+
transition: transform var(--animation_ms);
|
|
204
|
+
}
|
|
205
|
+
.menu-content {
|
|
206
|
+
max-height: 0;
|
|
207
|
+
overflow: hidden;
|
|
208
|
+
transition: max-height var(--animation_ms);
|
|
209
|
+
padding-left: calc(var(--spacer_h) * 2);
|
|
210
|
+
}
|
|
211
|
+
.menu-content.open {
|
|
212
|
+
max-height: 500px;
|
|
213
|
+
}
|
|
214
|
+
::slotted(*) {
|
|
215
|
+
margin: 0.25rem 0;
|
|
216
|
+
}
|
|
217
|
+
`}class SidePanelSpacer extends ShadowComponent{render(){return html`<div class="spacer"></div>`}static styles=css`
|
|
218
|
+
:host {
|
|
219
|
+
display: block;
|
|
220
|
+
flex: 1;
|
|
221
|
+
}
|
|
222
|
+
.spacer {
|
|
223
|
+
height: 100%;
|
|
224
|
+
}
|
|
225
|
+
`}customElements.define("k-side-panel",SidePanel),customElements.define("k-side-panel-item",SidePanelItem),customElements.define("k-side-panel-label",SidePanelLabel),customElements.define("k-side-panel-menu",SidePanelMenu),customElements.define("k-side-panel-spacer",SidePanelSpacer);export default SidePanel;
|
|
@@ -15,7 +15,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
|
|
|
15
15
|
@click=${this.enableSorting?()=>this.handleFieldClick(t):null}
|
|
16
16
|
>
|
|
17
17
|
${s}
|
|
18
|
-
${o?html`<k-icon name="${r.asc?"
|
|
18
|
+
${o?html`<k-icon name="arrow" direction="${r.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
|
|
19
19
|
</div>
|
|
20
20
|
`)}),this.hasAfterControls()&&e.push(html`
|
|
21
21
|
<div class="field cell field-after-controls" style="width: ${this.columnSizes.afterControls}px"></div>
|
|
@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
|
|
|
4
4
|
?disabled="${this.isDisabled}"
|
|
5
5
|
@click="${this.handleClick}"
|
|
6
6
|
>
|
|
7
|
-
<k-icon name="
|
|
7
|
+
<k-icon name="chevron-line" direction="left"></k-icon>
|
|
8
8
|
</button>
|
|
9
9
|
`}}customElements.define("k-tc-first-page",FirstPage);
|
|
@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
|
|
|
4
4
|
?disabled="${this.isDisabled}"
|
|
5
5
|
@click="${this.handleClick}"
|
|
6
6
|
>
|
|
7
|
-
<k-icon name="
|
|
7
|
+
<k-icon name="chevron-line"></k-icon>
|
|
8
8
|
</button>
|
|
9
9
|
`}}customElements.define("k-tc-last-page",LastPage);
|
|
@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
|
|
|
4
4
|
?disabled="${this.isDisabled}"
|
|
5
5
|
@click="${this.handleClick}"
|
|
6
6
|
>
|
|
7
|
-
<k-icon name="chevron
|
|
7
|
+
<k-icon name="chevron"></k-icon>
|
|
8
8
|
</button>
|
|
9
9
|
`}}customElements.define("k-tc-next-page",NextPage);
|
|
@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
|
|
|
4
4
|
?disabled="${this.isDisabled}"
|
|
5
5
|
@click="${this.handleClick}"
|
|
6
6
|
>
|
|
7
|
-
<k-icon name="chevron
|
|
7
|
+
<k-icon name="chevron" direction="left"></k-icon>
|
|
8
8
|
</button>
|
|
9
9
|
`}}customElements.define("k-tc-prev-page",PrevPage);
|
package/docs/src/utils/theme.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme())
|
|
1
|
+
import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme()),applyTheme=e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)};themeContext.subscribe(applyTheme),window.addEventListener("storage",e=>{"theme"===e.key&&e.newValue&&themeContext.set(e.newValue)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const initTheme=()=>{const e=getInitialTheme();applyTheme(e),themeContext.set(e)};export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme,init:initTheme};
|
package/docs/utils/context.html
CHANGED
|
@@ -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/utils/debounce.html
CHANGED
|
@@ -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/utils/drag.html
CHANGED
|
@@ -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/utils/object.html
CHANGED
|
@@ -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/utils/string.html
CHANGED
|
@@ -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/utils/theme.html
CHANGED
|
@@ -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/utils/type.html
CHANGED
|
@@ -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/utils/wait.html
CHANGED
|
@@ -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 @@
|
|
|
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>
|
|
@@ -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>
|