kempo-ui 0.0.41 → 0.0.43

package/icons/arrow-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M800-240v-480h80v480h-80Zm-320 0-57-56 144-144H80v-80h487L424-664l56-56 240 240-240 240Z"/></svg>

package/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>

package/icons/chevron-double.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M383-480 200-664l56-56 240 240-240 240-56-56 183-184Zm264 0L464-664l56-56 240 240-240 240-56-56 183-184Z"/></svg>

package/icons/chevron-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z"/></svg>

package/icons/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

package/icons/key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/></svg>

package/icons/login.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/></svg>

package/icons/logout.svg

@@ -0,0 +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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/scripts/build.js

@@ -85,13 +85,6 @@ await Promise.all(allJSFiles.map(async jsFile => {
 }));
 process.stdout.write("\n");
 
-console.log('Loading kempo-vars.css');
-const kempoVarsCSS = await fs.readFile('./src/kempo-vars.css', 'utf-8');
-console.log('Minifying kempo-vars.css');
-const minifiedKempoVarsCSS = kempoVarsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
-console.log('Saving kempo-vars.css');
-await fs.writeFile('./dist/kempo-vars.css', minifiedKempoVarsCSS, 'utf-8');
-
 console.log('Cleaning docs/src/ directory');
 await emptyDir('./docs/src/');
 

package/src/components/Accordion.js

@@ -232,7 +232,7 @@ export class AccordionHeader extends ShadowComponent {
 	render() {
 		return html`
 			<slot name="left-icon">
-				<k-icon id="icon" name="chevron-right"></k-icon>
+				<k-icon id="icon" name="chevron"></k-icon>
 			</slot>
 			<slot></slot>
 			<slot name="right-icon"></slot>

package/src/components/ContentSlider.js

@@ -183,7 +183,7 @@ export default class ContentSlider extends ShadowComponent {
 					@click=${this.handlePrevClick}
 				>
 					<slot name="prev">
-						<k-icon name="chevron-left"></k-icon>
+						<k-icon name="chevron" direction="left"></k-icon>
 					</slot>
 				</button>
 				<button
@@ -192,7 +192,7 @@ export default class ContentSlider extends ShadowComponent {
 					@click=${this.handleNextClick}
 				>
 					<slot name="next">
-						<k-icon name="chevron-right"></k-icon>
+						<k-icon name="chevron"></k-icon>
 					</slot>
 				</button>
 			</div>

package/src/components/Icon.js

@@ -26,11 +26,15 @@ const getIconByPath = async (path) => {
 };
 
 const getIconByName = (name) => {
-	const tryDir = async (dir) => getIconByPath(`${dir}/${name}.svg`);
+	const tryDir = async (dir) => {
+		// Ensure single slash between dir and filename
+		const normalizedDir = dir.endsWith('/') ? dir.slice(0, -1) : dir;
+		return getIconByPath(`${normalizedDir}/${name}.svg`);
+	};
 
 	return new Promise(async (resolve, reject) => {
 		let svg;
-		const pathsToCheck = window.kempo?.pathsToIcons || ['/icons'];
+		const pathsToCheck = window.kempo?.pathsToIcons || ['/icons', '../../icons', 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.32/icons/'];
 		for(let i = 0; i < pathsToCheck.length && !svg; i++){
 			try {
 				svg = await tryDir(pathsToCheck[i]);
@@ -49,6 +53,9 @@ export default class Icon extends ShadowComponent {
 	static properties = {
 		src: { type: String, reflect: true },
 		name: { type: String, reflect: true },
+		rotation: { type: String, reflect: true },
+		direction: { type: String, reflect: true },
+		animation: { type: String, reflect: true },
 		iconContent: { type: String }
 	};
 
@@ -56,6 +63,9 @@ export default class Icon extends ShadowComponent {
 		super();
 		this.src = '';
 		this.name = name;
+		this.rotation = '';
+		this.direction = '';
+		this.animation = '';
 		this.iconContent = '';
 	}
 
@@ -119,6 +129,21 @@ export default class Icon extends ShadowComponent {
 		return svgString;
 	}
 
+	/*
+		Utility Methods
+	*/
+	getRotationDegrees() {
+		if(this.rotation) return this.rotation;
+		
+		const directionMap = {
+			'down': '90',
+			'left': '180',
+			'up': '270'
+		};
+		
+		return directionMap[this.direction] || '0';
+	}
+
 	/*
 		Styles
 	*/
@@ -131,18 +156,53 @@ export default class Icon extends ShadowComponent {
 			height: 1.35em;
 			vertical-align: middle;
 		}
+		
+		/* Rotation */
+		:host([rotation]) svg,
+		:host([direction]) svg {
+			transform: rotate(var(--icon-rotation, 0deg));
+		}
+		
+		/* Animations */
+		:host([animation="spin"]) svg {
+			animation: icon-spin 2s linear infinite;
+		}
+		:host([animation="blink"]) svg {
+			animation: icon-blink 1s ease-in-out infinite;
+		}
+		:host([animation="pulse"]) svg {
+			animation: icon-pulse 1.5s ease-in-out infinite;
+		}
+		
+		@keyframes icon-spin {
+			from { transform: rotate(0deg); }
+			to { transform: rotate(360deg); }
+		}
+		
+		@keyframes icon-blink {
+			0%, 100% { opacity: 1; }
+			50% { opacity: 0.2; }
+		}
+		
+		@keyframes icon-pulse {
+			0%, 100% { transform: scale(1); }
+			50% { transform: scale(1.2); }
+		}
 	`;
 
 	/*
 		Rendering
 	*/
 	render() {
+		const rotationDegrees = this.getRotationDegrees();
+		const style = rotationDegrees !== '0' ? `--icon-rotation: ${rotationDegrees}deg;` : '';
+		
 		if (!this.iconContent) {
 			// Show slotted content while loading
-			return html`<slot></slot>`;
+			return html`<div style="${style}"><slot></slot></div>`;
 		}
 		
-		return html`${unsafeHTML(this.iconContent)}`;
+		return html`<div style="${style}">${unsafeHTML(this.iconContent)}</div>`;
 	}
 }
 

package/src/components/Main.js

@@ -0,0 +1,87 @@
+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: true },
+		panelSide: { type: String, state: true }
+	};
+
+	constructor() {
+		super();
+		this.panelWidth = '0px';
+		this.panelSide = 'left';
+		this.handlePanelChange = this.handlePanelChange.bind(this);
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener('side-panel-change', this.handlePanelChange);
+		
+		const panel = document.querySelector('k-side-panel');
+		if(panel) {
+			this.panelWidth = panel.collapsed ? '3.5rem' : '16rem';
+			this.panelSide = panel.side || 'left';
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener('side-panel-change', this.handlePanelChange);
+	}
+
+	/*
+		Event Handlers
+	*/
+	handlePanelChange(event) {
+		this.panelWidth = event.detail.width;
+		this.panelSide = event.detail.side;
+	}
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<main>
+				<slot></slot>
+			</main>
+		`;
+	}
+
+	static styles = css`
+		:host {
+			display: block;
+			margin-left: var(--panel-width, 0px);
+			transition: margin-left var(--animation_ms, 256ms);
+		}
+		:host([panel-side="right"]) {
+			margin-left: 0;
+			margin-right: var(--panel-width, 0px);
+			transition: margin-right var(--animation_ms, 256ms);
+		}
+		main {
+			max-width: var(--container_width, 90rem);
+			margin-left: auto;
+			margin-right: auto;
+			padding-top: var(--spacer);
+			padding-left: var(--spacer);
+			padding-right: var(--spacer);
+		}
+	`;
+
+	updated() {
+		super.updated();
+		this.style.setProperty('--panel-width', this.panelWidth);
+		if(this.panelSide === 'right') {
+			this.setAttribute('panel-side', 'right');
+		} else {
+			this.removeAttribute('panel-side');
+		}
+	}
+}
+
+window.customElements.define('k-main', Main);

package/src/components/PhotoViewer.js

@@ -343,12 +343,12 @@ export default class PhotoViewer extends ShadowComponent {
 					</button>
 					<button id="prev" class="nav-btn no-btn" @click=${this.handlePrevClick}>
 						<slot name="prev">
-							<k-icon name="chevron-left"></k-icon>
+							<k-icon name="chevron" direction="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>
+							<k-icon name="chevron"></k-icon>
 						</slot>
 					</button>
 					<div class="content">

package/src/components/ShowMore.js

@@ -91,14 +91,14 @@ export default class ShowMore extends ShadowComponent {
 				<div id="content">
 					<slot></slot>
 				</div>
-				<button id="toggle" @click=${this.handleToggleClick} class="no-btn">
-					<span id="more">
-						<slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>
-					</span>
-					<span id="less">
-						<slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>
-					</span>
-				</button>
+			<button id="toggle" @click=${this.handleToggleClick} class="no-btn">
+				<span id="more">
+					<slot name="more">Show More <k-icon name="chevron-double" direction="down"></k-icon></slot>
+				</span>
+				<span id="less">
+					<slot name="less">Show Less <k-icon name="chevron-double" direction="up"></k-icon></slot>
+				</span>
+			</button>
 			</div>
 		`;
 	}