kempo-ui 0.0.3 → 0.0.5

package/.github/workflows/publish-major.yml

@@ -0,0 +1,39 @@
+name: Publish Major Version to npmjs
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write  # enables npm provenance
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Setup Node and create an .npmrc that uses the token from NODE_AUTH_TOKEN
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm ci
+
+      # Auto-increment major version, commit, and push
+      - name: Bump major version
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+          npm version major --no-git-tag-version
+          git add package.json package-lock.json || true
+          git commit -m "ci: bump major version [skip ci]" || echo "No changes to commit"
+          git push origin HEAD:main || echo "No changes to push"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/publish-minor.yml

@@ -0,0 +1,39 @@
+name: Publish Minor Version to npmjs
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write  # enables npm provenance
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Setup Node and create an .npmrc that uses the token from NODE_AUTH_TOKEN
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm ci
+
+      # Auto-increment minor version, commit, and push
+      - name: Bump minor version
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+          npm version minor --no-git-tag-version
+          git add package.json package-lock.json || true
+          git commit -m "ci: bump minor version [skip ci]" || echo "No changes to commit"
+          git push origin HEAD:main || echo "No changes to push"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/{publish-npm.yml → publish-patch.yml}

@@ -1,5 +1,5 @@
 
-name: Publish Package to npmjs
+name: Publish Patch Version to npmjs
 
 on:
   push:

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/dist/kempo-hljs.css

@@ -0,0 +1 @@
+:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}

package/dist/src/components/Accordion.js

@@ -0,0 +1,36 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={};getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const o=this.getPanel(e);if(o){o.active=!0,o.transitioning=!0,setTimeout(()=>{o.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}}))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}}))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
+		:host {
+			display: block;
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+		}
+		::slotted(k-accordion-header) {
+			border-top: 1px solid var(--c_border);
+		}
+		::slotted(k-accordion-header[active="true"]) {
+			border-bottom: 1px solid var(--c_border);
+		}
+		::slotted(k-accordion-header:first-of-type) {
+			border-top: 0;
+		}
+		::slotted(k-accordion-header:last-of-type:not([active="true"])) {
+			border-bottom: 0;
+		}
+	`;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:boolTrueFalse}};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")}static styles=css`
+		:host {
+			display: block;
+			padding: 1rem;
+			cursor: pointer;
+		}
+	`;render(){return html`<slot></slot>`}}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolTrueFalse},transitioning:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
+		:host {
+			display: block;
+			interpolate-size: allow-keywords;
+			height: 0;
+			overflow: hidden;
+			transition: height var(--animation_ms, 256ms) ease-in-out;
+		}
+		:host([active="true"]) {
+			height: max-content;
+		}
+	`;render(){return html`<slot></slot>`}}customElements.define("k-accordion",Accordion),customElements.define("k-accordion-header",AccordionHeader),customElements.define("k-accordion-panel",AccordionPanel);

package/dist/src/components/Card.js

@@ -0,0 +1,37 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Card extends ShadowComponent{static properties={label:{type:String,reflect:!0}};constructor(){super(),this.label=""}static styles=css`
+		:host {
+			display: block;
+		}
+		#card {
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			margin-bottom: var(--spacer);
+			padding: var(--spacer);
+			position: relative;
+			background-color: var(--c_bg);
+		}
+		#label {
+			position: absolute;
+			top: -1.25em;
+			left: 1.25em;
+			background-color: var(--c_bg);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			padding: var(--spacer_h);
+		}
+		:host([label]) {
+			padding-top: calc(1.5 * var(--spacer));
+			margin-top: var(--spacer);
+		}
+		:host([label]) #card {
+			padding-top: calc(1.5 * var(--spacer));
+		}
+		:host(:not([label])) #label {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="card">
+				<div id="label">${this.label}</div>
+				<slot></slot>
+			</div>
+		`}}window.customElements.define("k-card",Card);

package/dist/src/components/Collapsible.js

@@ -0,0 +1,41 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./Icon.js";export default class Collapsible extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.opened=!1}handleLabelClick=()=>{this.toggle()};updated(e){super.updated(e),e.has("opened")&&(this.dispatchEvent(new CustomEvent("openedchanged",{detail:this.opened?"open":"close"})),this.dispatchEvent(new CustomEvent(this.opened?"open":"close")))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,this.dispatchEvent(new CustomEvent("openedtoggled"))}static styles=css`
+		:host {
+			display: block;
+		}
+		#labelContainer {
+			display: flex;
+			cursor: pointer;
+		}
+		#label {
+			flex: 1 1 auto;
+		}
+		#labelIcon {
+			flex: 0 0 none;
+			opacity: 0.5;
+			transform: rotate(90deg);
+			transition: transform var(--animation_ms, 256ms);
+		}
+		#labelContainer:hover #labelIcon {
+			opacity: 1;
+		}
+		:host([opened="true"]) #labelIcon {
+			transform: rotate(-90deg);
+		}
+		:host(:not([opened="true"])) #content {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="labelContainer" @click=${this.handleLabelClick}>
+				<div id="label">
+					<slot name="label"></slot>
+				</div>
+				<div id="labelIcon">
+					<slot name="labelIcon">
+						<k-icon name="chevron-right"></k-icon>
+					</slot>
+				</div>
+			</div>
+			<div id="content">
+				<slot></slot>
+			</div>
+		`}}customElements.define("k-collapsible",Collapsible);

package/dist/src/components/ContentSlider.js

@@ -0,0 +1,44 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./Icon.js";export default class ContentSlider extends ShadowComponent{static properties={index:{type:Number,reflect:!0},controls:{type:Boolean,reflect:!0,converter:boolTrueFalse},globalControls:{type:Boolean,reflect:!0,attribute:"global-controls",converter:boolTrueFalse},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:boolTrueFalse},loop:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.index=0,this.controls=!0,this.globalControls=!1,this.keyboardControls=!0,this.loop=!1,this.content=[],this.tabIndex=0}handlePrevClick=()=>{this.previous()};handleNextClick=()=>{this.next()};handleKeydown=t=>{"ArrowLeft"===t.code?(t.preventDefault(),this.dispatchEvent(new CustomEvent("keyleft")),this.previous()):"ArrowRight"===t.code&&(t.preventDefault(),this.dispatchEvent(new CustomEvent("keyright")),this.next())};connectedCallback(){super.connectedCallback(),this.updateContent(),this.setupKeyboardControls()}disconnectedCallback(){super.disconnectedCallback(),this.removeKeyboardControls()}updated(t){super.updated(t),t.has("index")&&(this.validateAndSetIndex(),this.renderContent(),this.dispatchEvent(new CustomEvent("change",{detail:{index:this.index}}))),(t.has("keyboardControls")||t.has("globalControls"))&&(this.removeKeyboardControls(),this.setupKeyboardControls())}updateContent(){this.content=[...this.querySelectorAll(":scope > *")],this.validateAndSetIndex(),this.renderContent()}validateAndSetIndex(){if(0===this.content.length)return;const t=Math.max(Math.min(this.content.length-1,this.index),0);this.index!==t&&(this.index=t)}renderContent(){0!==this.content.length&&(this.innerHTML="",this.content[this.index]&&this.appendChild(this.content[this.index]))}setupKeyboardControls(){this.keyboardControls&&(this.globalControls?window.addEventListener("keydown",this.handleKeydown):this.addEventListener("keydown",this.handleKeydown))}removeKeyboardControls(){window.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("keydown",this.handleKeydown)}previous(){let t=this.index-1;this.loop&&t<0&&(t=this.content.length-1),this.dispatchEvent(new CustomEvent("previous",{detail:{index:t}})),this.index=t}next(){let t=this.index+1;this.loop&&t>=this.content.length&&(t=0),this.dispatchEvent(new CustomEvent("next",{detail:{index:t}})),this.index=t}goto(t){this.dispatchEvent(new CustomEvent("goto",{detail:{index:t}})),this.index=t}static styles=css`
+		:host {
+			display: block;
+			position: relative;
+			outline: none;
+		}
+		#prev,
+		#next {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			font-size: 2rem;
+		}
+		#next {
+			right: 0;
+		}
+		:host(:not([controls="true"])) #controls {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="content">
+				<slot></slot>
+			</div>
+			<div id="controls">
+				<button
+					id="prev"
+					class="no-btn"
+					@click=${this.handlePrevClick}
+				>
+					<slot name="prev">
+						<k-icon name="chevron-left"></k-icon>
+					</slot>
+				</button>
+				<button
+					id="next"
+					class="no-btn"
+					@click=${this.handleNextClick}
+				>
+					<slot name="next">
+						<k-icon name="chevron-right"></k-icon>
+					</slot>
+				</button>
+			</div>
+		`}}customElements.define("k-content-slider",ContentSlider);

package/dist/src/components/Dialog.js

@@ -0,0 +1,120 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=t=>t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=t=>{const{target:e}=t,o=e.id||e.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(t),t.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(t),t.defaultPrevented||this.close())};handleKeydown=t=>{27===t.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),t.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const t=this.updateComplete||this.requestUpdate();t&&t.then?t.then(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()}):setTimeout(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const t=firstFocusable(this.shadowRoot);t&&(this.previousFocus=document.activeElement,t.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
+		:host {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			height: 100vh;
+			z-index: 100;
+			display: none;
+			justify-content: center;
+			align-items: center;
+		}
+		:host([opened]) {
+			display: flex;
+		}
+		#overlay {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			background-color: var(--c_overlay);
+			border: 0px solid transparent;
+			box-shadow: 0 0 0 transparent;
+		}
+		#wrapper {
+			position: relative;
+			z-index: 1;
+			pointer-events: none;
+		}
+		#dialog {
+			display: flex;
+			flex-direction: column;
+			min-width: var(--min_width, 20rem);
+			width: var(--width, fit-content);
+			max-width: var(--max_width, calc(100vw - 4rem));
+			min-height: var(--min_height, 12rem);
+			height: var(--height, fit-content);
+			max-height: var(--max_height, calc(100vh - 4rem));
+			background-color: var(--c_bg);
+			box-shadow: var(--drop_shadow);
+			border-radius: var(--radius);
+			pointer-events: all;
+		}
+		#header {
+			display: flex;
+			align-items: center;
+		}
+		#header.has-title {
+			border-bottom: 1px solid var(--c_border);
+		}
+		#title {
+			flex: 1 1 auto;
+		}
+		#close {
+			border: 0px;
+			background: transparent;
+			box-shadow: 0 0 0 transparent;
+			color: var(--tc);
+			transition: box-shadow var(--animation_ms);
+			border-radius: var(--radius);
+		}
+		#close:focus {
+			box-shadow: var(--focus_shadow);
+		}
+		#close k-icon {
+			pointer-events: none;
+		}
+		#body {
+			flex: 1 1 auto;
+		}
+		#footer {
+			display: flex;
+			justify-content: flex-end;
+			padding: var(--spacer_h);
+		}
+	`;render(){return html`
+			<button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
+			<div id="wrapper">
+				<div
+					id="dialog"
+					role="dialog"
+					aria-modal="true"
+					aria-labelledby="title"
+				>
+					<k-focus-capture>
+						<div
+							id="header"
+							class="${this.hasTitle()?"has-title":""}"
+						>
+							<div id="title">
+								<slot name="title"></slot>
+							</div>
+							${this.closeBtn?html`
+								<button id="close" @click=${this.handleClick}>
+									<k-icon name="close"></k-icon>
+								</button>
+							`:""}
+						</div>
+						<div id="body">
+							<slot></slot>
+						</div>
+						${this.cancelText||this.confirmText?html`
+							<div id="footer">
+								${this.cancelText?html`
+									<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
+										${this.cancelText}
+									</button>
+								`:""}
+								${this.confirmText?html`
+									<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
+										${this.confirmText}
+									</button>
+								`:""}
+							</div>
+						`:""}
+					</k-focus-capture>
+				</div>
+			</div>
+		`}static create(t="",e={}){!1!==e.closeExisting&&document.querySelectorAll("k-dialog").forEach(t=>t.close());const{removeOnClose:o=!0,closeCallback:s=()=>{}}=e,i=new Dialog;return Object.assign(i,{opened:!0,...e,closeCallback:(...t)=>{o&&i.remove(),s(...t)}}),t instanceof HTMLElement||t instanceof DocumentFragment?i.appendChild(t):t&&(i.innerHTML=t),e.width&&i.style.setProperty("--width",e.width),e.minWidth&&i.style.setProperty("--min_width",e.minWidth),e.maxWidth&&i.style.setProperty("--max_width",e.maxWidth),e.height&&i.style.setProperty("--height",e.height),e.minHeight&&i.style.setProperty("--min_height",e.minHeight),e.maxHeight&&i.style.setProperty("--max_height",e.maxHeight),document.body.appendChild(i),i.open(),i}static confirm(t,e,o={}){const s=o.title||"Confirm";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1),...o})}static alert(t,e,o={}){const s=o.title||"Alert";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static error(t,e,o={}){const s=o.title||"Error";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-danger">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static success(t,e,o={}){const s=o.title||"Success";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-success">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);

package/dist/src/components/Icon.js

@@ -1,4 +1,4 @@
-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 o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});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=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;for(let t=0;t<Icon.pathToIcons.length&&!o;t++)try{o=await e(Icon.pathToIcons[t])}catch(t){}t(o||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(){super(),this.src="",this.name="",this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon(),t.has("iconContent")&&this.fixSVG()}async loadIcon(){let t;this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),this.iconContent=t||Icon.fallback}fixSVG(){setTimeout(()=>{const t=this.querySelector("svg");t&&(t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}))},0)}static styles=css`
+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 o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});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=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;for(let t=0;t<Icon.pathToIcons.length&&!o;t++)try{o=await e(Icon.pathToIcons[t])}catch(t){}t(o||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(),t.has("iconContent")&&this.fixSVG()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=t;else{const t=this.innerHTML.trim();this.iconContent=t||Icon.fallback}}fixSVG(){setTimeout(()=>{const t=this.querySelector("svg");t&&(t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}))},0)}static styles=css`
 		:host {
 			display: inline-block;
 			vertical-align: bottom;
@@ -7,4 +7,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
 			height: 1.35em;
 			vertical-align: middle;
 		}
-	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html``}static pathToIcons=["/icons"];static fallback='\n\t\t<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>\n\t'}window.customElements.define("k-icon",Icon);
+	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["/icons"];static fallback='\n\t\t<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>\n\t'}window.customElements.define("k-icon",Icon);

package/dist/src/components/PersistantCollapsible.js

@@ -0,0 +1 @@
+import Collapsible from"./Collapsible.js";export default class PersistantCollapsible extends Collapsible{constructor(){super(),this.storageKey=""}connectedCallback(){super.connectedCallback(),this.updateStorageKey(),this.loadFromStorage(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}updated(e){super.updated(e),e.has("opened")&&this.saveToStorage(),e.has("id")&&(this.updateStorageKey(),this.loadFromStorage())}handleStorageChange=e=>{e.key===this.storageKey&&this.loadFromStorage()};updateStorageKey(){this.storageKey=this.id?`PersistantCollapsible-${this.id}`:""}loadFromStorage(){if(this.storageKey){const e=localStorage.getItem(this.storageKey);null!==e&&(this.opened="true"===e)}}saveToStorage(){this.storageKey&&localStorage.setItem(this.storageKey,this.opened.toString())}}customElements.define("k-p-collapsible",PersistantCollapsible);

package/dist/src/components/PhotoViewer.js

@@ -0,0 +1,135 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";export default class PhotoViewer extends ShadowComponent{static properties={src:{type:String,reflect:!0},alt:{type:String,reflect:!0},fullscreen:{type:Boolean,reflect:!0,converter:boolExists},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:boolExists},global:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.src="",this.alt="",this.fullscreen=!1,this.keyboardControls=!0,this.global=!1}handleImageClick=()=>{this.open()};handleImageKeydown=e=>{"Enter"!==e.key||this.fullscreen||this.open()};handleCloseClick=()=>{this.close()};handleOverlayClick=e=>{e.target===e.currentTarget&&this.close()};handlePrevClick=e=>{e.stopPropagation();const t=this.getPrevSibling();t&&(this.close(),t.open())};handleNextClick=e=>{e.stopPropagation();const t=this.getNextSibling();t&&(this.close(),t.open())};handleKeydown=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.keyboardControls&&document.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("fullscreen")&&(this.dispatchEvent(new CustomEvent("fullscreenchange",{detail:{fullscreen:this.fullscreen}})),this.dispatchEvent(new CustomEvent(this.fullscreen?"fullscreen":"fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(this.fullscreen?document.addEventListener("keydown",this.handleKeydown):document.removeEventListener("keydown",this.handleKeydown))),(e.has("src")||e.has("alt"))&&this.handleFullscreenCaption()}firstUpdated(){this.handleFullscreenCaption()}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[0===t?e.length-1:t-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),t=e.indexOf(this);return-1===t?null:e[t===e.length-1?0:t+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter(e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach(t=>{t.style.display=e?"":"none"})}async handleFullscreenCaption(){await this.updateComplete;const e=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(e&&!e.assignedNodes().length){const e=this.shadowRoot.querySelector("slot:not([name])");(e?e.assignedNodes():[]).forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const t=e.cloneNode(!0);t.slot="fullscreen-caption",this.appendChild(t)}})}}static styles=css`
+		:host {
+			display: block;
+		}
+		#wrapper {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+		#img {
+			max-width: 100%;
+			height: auto;
+			cursor: pointer;
+			outline: none;
+			border-radius: var(--img_radius, 0);
+		}
+		#img:focus {
+			box-shadow: var(--focus_shadow);
+		}
+		#fullscreen-overlay {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 9999;
+			background: rgba(0,0,0,0.9);
+			padding: 2rem;
+			display: none;
+		}
+		:host([fullscreen]) #fullscreen-overlay {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.content {
+			position: relative;
+			max-width: 100%;
+			max-height: 90vh;
+		}
+		#fullscreen-img {
+			max-height: 75vh;
+			max-width: 100%;
+			object-fit: contain;
+			cursor: default;
+		}
+		#close {
+			position: absolute;
+			top: 1rem;
+			right: 1rem;
+			z-index: 1;
+			background: none;
+			border: none;
+			color: white;
+			cursor: pointer;
+		}
+		.nav-btn {
+			position: fixed;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: 1;
+			background: none;
+			border: none;
+			color: white;
+			cursor: pointer;
+			padding: 1rem;
+			opacity: 0.7;
+			font-size: 3rem;
+			-webkit-text-stroke: 1px black;
+			text-stroke: 1px black;
+			text-shadow: 0 0 3px rgba(0,0,0,0.8);
+		}
+		.nav-btn::slotted(*),
+		.nav-btn k-icon {
+			filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));
+		}
+		.nav-btn:hover {
+			opacity: 1;
+		}
+		#prev {
+			left: 1rem;
+		}
+		#next {
+			right: 1rem;
+		}
+		.caption {
+			text-align: center;
+			max-width: 600px;
+			width: fit-content;
+			margin: 1rem auto 0;
+		}
+		#fullscreen-overlay .caption {
+			color: white;
+		}
+		:host([fullscreen]) .caption {
+			color: white;
+		}
+	`;render(){return html`
+			<div id="wrapper">
+				<img 
+					id="img" 
+					src="${this.src}" 
+					alt="${this.alt}" 
+					tabindex="0"
+					@click=${this.handleImageClick}
+					@keydown=${this.handleImageKeydown}
+				/>
+				<div class="caption">
+					<slot></slot>
+				</div>
+				<div id="fullscreen-overlay" @click=${this.handleOverlayClick}>
+					<button id="close" class="no-btn" @click=${this.handleCloseClick}>
+						<slot name="close">
+							<k-icon name="close"></k-icon>
+						</slot>
+					</button>
+					<button id="prev" class="nav-btn no-btn" @click=${this.handlePrevClick}>
+						<slot name="prev">
+							<k-icon name="chevron-left"></k-icon>
+						</slot>
+					</button>
+					<button id="next" class="nav-btn no-btn" @click=${this.handleNextClick}>
+						<slot name="next">
+							<k-icon name="chevron-right"></k-icon>
+						</slot>
+					</button>
+					<div class="content">
+						<img id="fullscreen-img" src="${this.src}" alt="${this.alt}" />
+						<div class="caption">
+							<slot name="fullscreen-caption"></slot>
+						</div>
+					</div>
+				</div>
+			</div>
+		`}}customElements.define("k-photo-viewer",PhotoViewer);

package/dist/src/components/Resize.js

@@ -0,0 +1,96 @@
+import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import Icon from"./Icon.js";import drag from"../utils/drag.js";export default class Resize extends ShadowComponent{static properties={resizing:{type:String,reflect:!0},dimention:{type:String,reflect:!0}};constructor(){super(),this.resizing="",this.dimension="",this.startSize={width:0,height:0},this.cleanupFuncs=[]}firstUpdated(){super.firstUpdated(),this.setupDragHandlers()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFuncs.forEach(e=>e())}dragStartHandler=({element:e})=>{const{width:t,height:i}=this.getBoundingClientRect();this.startSize.width=t,this.startSize.height=i,this.resizing=e.id};dragEndHandler=()=>{this.resizing=""};dragSideHandler=({x:e})=>{this.style.width=this.startSize.width+e+"px"};dragBottomHandler=({y:e})=>{this.style.height=this.startSize.height+e+"px"};dragCornerHandler=({x:e,y:t})=>{this.style.width=this.startSize.width+e+"px",this.style.height=this.startSize.height+t+"px"};setupDragHandlers(){const e=this.shadowRoot.getElementById("side"),t=this.shadowRoot.getElementById("bottom"),i=this.shadowRoot.getElementById("corner");e&&this.cleanupFuncs.push(drag({element:e,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragSideHandler,preventScroll:!0})),t&&this.cleanupFuncs.push(drag({element:t,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragBottomHandler,preventScroll:!0})),i&&this.cleanupFuncs.push(drag({element:i,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragCornerHandler,preventScroll:!0}))}static styles=css`
+		:host {
+			--handle_size: 1rem;
+
+			display: grid;
+			grid-template-columns: 1fr var(--handle_size);
+			grid-template-rows: 1fr var(--handle_size);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			min-width: 10rem;
+			max-width: 100%;
+			min-height: 10rem;
+			max-height: 100%;
+		}
+		:host([dimension="height"]) {
+			grid-template-columns: 1fr;
+		}
+		:host([dimension="width"]) {
+			grid-template-rows: 1fr;
+		}
+		#main {
+			grid-row: 1;
+			grid-column: 1;
+			overflow: auto;
+		}
+		#side {
+			grid-row: 1;
+			grid-column: 2;
+			cursor: ew-resize;
+		}
+		#bottom {
+			grid-row: 2;
+			grid-column: 1;
+			text-align: center;
+			cursor: ns-resize;
+		}
+		#corner {
+			grid-row: 2;
+			grid-column: 2;
+			overflow: hidden;
+			cursor: nwse-resize;
+		}
+		.handle {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.handle svg {
+			transform: scale(0.5);
+		}
+		#bottom svg {
+			height: var(--handle_size);
+		}
+		#side svg {
+			width: var(--handle_size);
+		}
+		#corner svg {
+			width: var(--handle_size);
+			height: var(--handle_size);
+		}
+		:host(:not([resizing=""])) #main {
+			pointer-events: none;
+		}
+		:host([resizing="side"]) #side,
+		:host([resizing="corner"]) #side,
+		:host([resizing="corner"]) #corner,
+		:host([resizing="corner"]) #bottom,
+		:host([resizing="bottom"]) #bottom {
+			background-color: var(--c_highlight);
+		}
+		:host([dimension="height"]) #side,
+		:host([dimension="height"]) #corner,
+		:host([dimension="width"]) #bottom,
+		:host([dimension="width"]) #corner {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="main">
+				<slot></slot>
+			</div>
+			<div id="side" class="handle">
+				<svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg">
+					<path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" />
+				</svg>
+			</div>
+			<div id="bottom" class="handle">
+				<svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg">
+					<path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" />
+				</svg>
+			</div>
+			<div id="corner" class="handle">
+				<svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+					<path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" />
+				</svg>
+			</div>
+		`}}customElements.define("k-resize",Resize);

package/dist/src/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href="/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="/kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}