kempo-ui 0.0.2 → 0.0.4

package/src/components/Dialog.js

@@ -0,0 +1,368 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+import { boolExists } from '../utils/propConverters.js';
+import './Icon.js';
+
+const firstFocusable = element => {
+	const focusableElements = element.querySelectorAll(
+		'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+	);
+	return focusableElements[0];
+};
+
+export default class Dialog extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		opened: { type: Boolean, reflect: true, converter: boolExists },
+		closeBtn: { type: Boolean, reflect: true, attribute: 'close-btn', converter: boolExists },
+		overlayClose: { type: Boolean, reflect: true, attribute: 'overlay-close', converter: boolExists },
+		confirmText: { type: String, reflect: true, attribute: 'confirm-text' },
+		confirmClasses: { type: String, reflect: true, attribute: 'confirm-classes' },
+		cancelText: { type: String, reflect: true, attribute: 'cancel-text' },
+		cancelClasses: { type: String, reflect: true, attribute: 'cancel-classes' }
+	};
+
+	constructor() {
+		super();
+		this.opened = false;
+		this.closeBtn = true;
+		this.overlayClose = true;
+		this.confirmText = '';
+		this.confirmClasses = 'success ml';
+		this.cancelText = '';
+		this.cancelClasses = '';
+		this.confirmAction = () => {};
+		this.cancelAction = () => {};
+		this.closeCallback = () => {};
+		this.previousFocus = null;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleClick = event => {
+		const { target } = event;
+		const id = target.id || target.closest('[id]')?.id;
+		
+		if((id === 'overlay' && this.overlayClose) || id === 'close') {
+			this.close();
+		} else if(id === 'cancel') {
+			this.cancelAction(event);
+			if(!event.defaultPrevented) this.close();
+		} else if(id === 'confirm') {
+			this.confirmAction(event);
+			if(!event.defaultPrevented) this.close();
+		}
+	}
+
+	handleKeydown = event => {
+		if(event.keyCode === 27) {
+			this.close();
+		}
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener('keydown', this.handleKeydown);
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('opened')) {
+			this.dispatchEvent(new CustomEvent(this.opened ? 'opened' : 'close'));
+		}
+	}
+
+	/*
+		Public Methods
+	*/
+	open() {
+		this.opened = true;
+		window.addEventListener('keydown', this.handleKeydown);
+		
+		// Use updateComplete or setTimeout as fallback
+		const updatePromise = this.updateComplete || this.requestUpdate();
+		if(updatePromise && updatePromise.then) {
+			updatePromise.then(() => {
+				const toFocus = this.shadowRoot.querySelector('[autofocus]') || firstFocusable(this.shadowRoot);
+				if(toFocus) toFocus.focus();
+			});
+		} else {
+			// Fallback for when updateComplete/requestUpdate don't return a promise
+			setTimeout(() => {
+				const toFocus = this.shadowRoot.querySelector('[autofocus]') || firstFocusable(this.shadowRoot);
+				if(toFocus) toFocus.focus();
+			}, 0);
+		}
+	}
+
+	close() {
+		this.opened = false;
+		this.blur();
+		this.closeCallback();
+		window.removeEventListener('keydown', this.handleKeydown);
+	}
+
+	toggle() {
+		this.opened ? this.close() : this.open();
+	}
+
+	focus() {
+		const firstFocus = firstFocusable(this.shadowRoot);
+		if(firstFocus) {
+			this.previousFocus = document.activeElement;
+			firstFocus.focus();
+		}
+	}
+
+	blur() {
+		if(this.previousFocus) {
+			this.previousFocus.focus();
+		}
+	}
+
+	/*
+		Private Methods
+	*/
+	hasTitle() {
+		return !!this.querySelector('[slot="title"]');
+	}
+
+	/*
+		Styles
+	*/
+	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);
+		}
+		#close k-icon {
+			pointer-events: none;
+		}
+		#body {
+			flex: 1 1 auto;
+		}
+		#footer {
+			display: flex;
+			justify-content: flex-end;
+			padding: var(--spacer_h);
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	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"
+				>
+					<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>
+					` : ''}
+				</div>
+			</div>
+		`;
+	}
+
+	/*
+		Static Methods
+	*/
+	static create(contents = '', options = {}) {
+		if(options.closeExisting !== false) {
+			document.querySelectorAll('k-dialog').forEach(d => d.close());
+		}
+
+		const {
+			removeOnClose = true,
+			closeCallback = () => {}
+		} = options;
+
+		const dialog = new Dialog();
+		
+		// Set properties
+		Object.assign(dialog, {
+			opened: true,
+			...options,
+			closeCallback: (...args) => {
+				if(removeOnClose) {
+					dialog.remove();
+				}
+				closeCallback(...args);
+			}
+		});
+
+		// Set content
+		if(contents instanceof HTMLElement || contents instanceof DocumentFragment) {
+			dialog.appendChild(contents);
+		} else if(contents) {
+			dialog.innerHTML = contents;
+		}
+
+		// Set CSS custom properties for dimensions
+		if(options.width) dialog.style.setProperty('--width', options.width);
+		if(options.minWidth) dialog.style.setProperty('--min_width', options.minWidth);
+		if(options.maxWidth) dialog.style.setProperty('--max_width', options.maxWidth);
+		if(options.height) dialog.style.setProperty('--height', options.height);
+		if(options.minHeight) dialog.style.setProperty('--min_height', options.minHeight);
+		if(options.maxHeight) dialog.style.setProperty('--max_height', options.maxHeight);
+
+		document.body.appendChild(dialog);
+		dialog.open();
+		
+		return dialog;
+	}
+
+	static confirm(text, responseCallback, options = {}) {
+		const title = options.title || 'Confirm';
+		return Dialog.create(`
+			<h5 slot="title" class="pyh px m0">${title}</h5>
+			<p class="p">${text}</p>
+		`, {
+			closeBtn: false,
+			overlayClose: false,
+			confirmText: 'Yes',
+			confirmClasses: 'success ml',
+			confirmAction: () => responseCallback(true),
+			cancelText: 'No',
+			cancelClasses: 'danger',
+			cancelAction: () => responseCallback(false),
+			...options
+		});
+	}
+
+	static alert(text, responseCallback, options = {}) {
+		const title = options.title || 'Alert';
+		return Dialog.create(`
+			<h5 slot="title" class="pyh px m0">${title}</h5>
+			<p class="p">${text}</p>
+		`, {
+			closeCallback: responseCallback,
+			cancelText: 'Ok',
+			...options
+		});
+	}
+
+	static error(text, responseCallback, options = {}) {
+		const title = options.title || 'Error';
+		return Dialog.create(`
+			<h5 slot="title" class="pyh px m0 tc-danger">${title}</h5>
+			<p class="p">${text}</p>
+		`, {
+			closeCallback: responseCallback,
+			cancelText: 'Ok',
+			...options
+		});
+	}
+
+	static success(text, responseCallback, options = {}) {
+		const title = options.title || 'Success';
+		return Dialog.create(`
+			<h5 slot="title" class="pyh px m0 tc-success">${title}</h5>
+			<p class="p">${text}</p>
+		`, {
+			closeCallback: responseCallback,
+			cancelText: 'Ok',
+			...options
+		});
+	}
+}
+
+customElements.define('k-dialog', Dialog);

package/src/components/FocusCapture.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from '../lit-all.min.js';
+
+export default class FocusCapture extends LitElement {
+	static shadowRootOptions = {
+		mode: 'open',
+		delegatesFocus: true
+	}
+
+	afterFocus = () => {
+		this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
+	}
+
+	render(){
+		return html`
+			<slot></slot>
+			<div
+				tabindex="0"
+				@focus=${this.afterFocus}
+			></div>
+		`
+	}
+}
+window.customElements.define('k-focus-capture', FocusCapture);

package/src/components/HybridComponent.js

@@ -1,40 +1,40 @@
-import { html, render } from '../lit-all.min.js';
-import ShadowComponent from './ShadowComponent.js';
-
-export default class HybridComponent extends ShadowComponent {
-
-	/*
-	  Shadow DOM Setup
-	*/
-
-	createRenderRoot() {
-		const renderContainer = super.createRenderRoot();
-		
-		this.lightRoot = document.createElement('div');
-		this.lightRoot.style.display = 'contents';
-		this.lightRoot.slot = 'lightRoot';
-		this.appendChild(this.lightRoot);
-		
-		return renderContainer;
-	}
-
-	/*
-	  Lifecycle Callbacks
-	*/
-
-	updated() {
-		render(this.renderLightDom(), this.lightRoot);
-	}
-
-	/*
-	  Rendering
-	*/
-
-	renderLightDom() {
-		return html``;
-	}
-
-	render() {
-		return html`<slot name="lightRoot"></slot>`;
-	}
-}
+import { html, render } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+export default class HybridComponent extends ShadowComponent {
+
+	/*
+	  Shadow DOM Setup
+	*/
+
+	createRenderRoot() {
+		const renderContainer = super.createRenderRoot();
+		
+		this.lightRoot = document.createElement('div');
+		this.lightRoot.style.display = 'contents';
+		this.lightRoot.slot = 'lightRoot';
+		this.appendChild(this.lightRoot);
+		
+		return renderContainer;
+	}
+
+	/*
+	  Lifecycle Callbacks
+	*/
+
+	updated() {
+		render(this.renderLightDom(), this.lightRoot);
+	}
+
+	/*
+	  Rendering
+	*/
+
+	renderLightDom() {
+		return html``;
+	}
+
+	render() {
+		return html`<slot name="lightRoot"></slot>`;
+	}
+}

package/src/components/Icon.js

@@ -0,0 +1,155 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css, unsafeHTML } from '../lit-all.min.js';
+
+const cache = {};
+
+const getIconByPath = async (path) => {
+	if (!cache[path]) {
+		cache[path] = new Promise(async (resolve, reject) => {
+			const controller = new AbortController();
+			const signal = controller.signal;
+			try {
+				const response = await fetch(path, { signal });
+				if (response.status === 200) {
+					resolve(await response.text());
+				} else if (response.status === 404) {
+					resolve(null);
+				}
+			} catch (e) {
+				if (e.name !== 'AbortError') {
+					reject(e);
+				}
+			}
+		}).catch(() => null);
+	}
+	return await cache[path];
+};
+
+const getIconByName = (name) => {
+	const tryDir = async (dir) => getIconByPath(`${dir}/${name}.svg`);
+
+	return new Promise(async (resolve, reject) => {
+		let svg;
+		for(let i = 0; i < Icon.pathToIcons.length && !svg; i++){
+			try {
+				svg = await tryDir(Icon.pathToIcons[i]);
+			} catch(e){}
+		}
+		if(svg){
+			resolve(svg);
+		} else {
+			resolve(null);
+		}
+	});
+};
+
+export default class Icon extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		src: { type: String, reflect: true },
+		name: { type: String, reflect: true },
+		iconContent: { type: String }
+	};
+
+	constructor(name = '') {
+		super();
+		this.src = '';
+		this.name = name;
+		this.iconContent = '';
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties) {
+		super.updated();
+		
+		if (changedProperties.has('src') || changedProperties.has('name')) {
+			this.loadIcon();
+		}
+
+		if (changedProperties.has('iconContent')) {
+			this.fixSVG();
+		}
+	}
+
+	/*
+		Methods
+	*/
+	async loadIcon() {
+		let svg;
+		
+		if (this.src) {
+			svg = await getIconByPath(this.src);
+		} else if (this.name) {
+			svg = await getIconByName(this.name);
+		}
+		
+		if (svg) {
+			this.iconContent = svg;
+		} else {
+			// Check for slotted fallback content first
+			const slottedContent = this.innerHTML.trim();
+			if (slottedContent) {
+				this.iconContent = slottedContent;
+			} else {
+				this.iconContent = Icon.fallback;
+			}
+		}
+	}
+
+	fixSVG() {
+		// Use setTimeout to ensure DOM is updated
+		setTimeout(() => {
+			const $svg = this.querySelector('svg');
+			if ($svg) {
+				$svg.removeAttribute('width');
+				$svg.removeAttribute('height');
+				$svg.querySelectorAll('path, rect, circle').forEach($path => {
+					$path.setAttribute('fill', 'currentColor');
+				});
+			}
+		}, 0);
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: inline-block;
+			vertical-align: bottom;
+		}
+		::slotted(svg), svg {
+			height: 1.35em;
+			vertical-align: middle;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		if (!this.iconContent) {
+			// Show slotted content while loading
+			return html`<slot></slot>`;
+		}
+		
+		return html`${unsafeHTML(this.iconContent)}`;
+	}
+
+	/*
+		Static Properties
+	*/
+	static pathToIcons = [
+		'/icons'
+	];
+
+	static fallback = `
+		<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>
+	`;
+}
+
+window.customElements.define('k-icon', Icon);