kempo-ui 0.0.2 → 0.0.4

package/src/components/Accordion.js

@@ -0,0 +1,229 @@
+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 {
+	/*
+		Properties
+	*/
+	static properties = {};
+
+	/*
+		Public Methods
+	*/
+	getHeader(panelName) {
+		return this.querySelector(`k-accordion-header[for-panel="${panelName}"]`);
+	}
+
+	getPanel(panelName) {
+		return this.querySelector(`k-accordion-panel[name="${panelName}"]`);
+	}
+
+	openPanel(panelName) {
+		const currentlyActivePanel = this.querySelector(`k-accordion-panel[active="true"]`);
+		if(currentlyActivePanel && currentlyActivePanel.name !== panelName) {
+			currentlyActivePanel.active = false;
+			const currentlyActiveHeader = this.getHeader(currentlyActivePanel.name);
+			if(currentlyActiveHeader) currentlyActiveHeader.active = false;
+		}
+
+		const panel = this.getPanel(panelName);
+		if(panel) {
+			panel.active = true;
+			panel.transitioning = true;
+			setTimeout(() => {
+				panel.transitioning = false;
+			}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
+
+			const header = this.getHeader(panelName);
+			if(header) header.active = true;
+
+			this.dispatchEvent(new CustomEvent('openpanel', { detail: { panelName } }));
+		}
+	}
+
+	closePanel(panelName) {
+		const panel = this.getPanel(panelName);
+		if(panel) {
+			panel.active = false;
+			panel.transitioning = true;
+			setTimeout(() => {
+				panel.transitioning = false;
+			}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
+
+			const header = this.getHeader(panelName);
+			if(header) header.active = false;
+
+			this.dispatchEvent(new CustomEvent('closepanel', { detail: { panelName } }));
+		}
+	}
+
+	togglePanel(panelName) {
+		const panel = this.getPanel(panelName);
+		if(panel) {
+			if(panel.active) {
+				this.closePanel(panelName);
+			} else {
+				this.openPanel(panelName);
+			}
+			this.dispatchEvent(new CustomEvent('togglepanel', { detail: { panelName } }));
+		}
+	}
+
+	/*
+		Getters
+	*/
+	get activeHeader() {
+		return this.querySelector('k-accordion-header[active="true"]');
+	}
+
+	get activePanel() {
+		return this.querySelector('k-accordion-panel[active="true"]');
+	}
+
+	/*
+		Styles
+	*/
+	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;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+export class AccordionHeader extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		forPanel: { type: String, reflect: true, attribute: 'for-panel' },
+		active: { type: Boolean, reflect: true, converter: boolTrueFalse }
+	};
+
+	constructor() {
+		super();
+		this.forPanel = '';
+		this.active = false;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.accordion?.togglePanel(this.forPanel);
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('click', this.handleClick);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('click', this.handleClick);
+	}
+
+	/*
+		Getters
+	*/
+	get accordion() {
+		return this.closest('k-accordion');
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: block;
+			padding: 1rem;
+			cursor: pointer;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+export class AccordionPanel extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		name: { type: String, reflect: true },
+		active: { type: Boolean, reflect: true, converter: boolTrueFalse },
+		transitioning: { type: Boolean, reflect: true, converter: boolTrueFalse }
+	};
+
+	constructor() {
+		super();
+		this.name = '';
+		this.active = false;
+		this.transitioning = false;
+	}
+
+	/*
+		Getters
+	*/
+	get accordion() {
+		return this.closest('k-accordion');
+	}
+
+	/*
+		Styles
+	*/
+	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;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+/*
+	Custom Element Registration
+*/
+customElements.define('k-accordion', Accordion);
+customElements.define('k-accordion-header', AccordionHeader);
+customElements.define('k-accordion-panel', AccordionPanel);

package/src/components/Card.js

@@ -0,0 +1,66 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+
+export default class Card extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		label: { type: String, reflect: true }
+	};
+
+	constructor() {
+		super();
+		this.label = '';
+	}
+
+	/*
+		Styles
+	*/
+	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;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<div id="card">
+				<div id="label">${this.label}</div>
+				<slot></slot>
+			</div>
+		`;
+	}
+}
+
+window.customElements.define('k-card', Card);

package/src/components/Collapsible.js

@@ -0,0 +1,109 @@
+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 {
+	/*
+		Properties
+	*/
+	static properties = {
+		opened: { type: Boolean, reflect: true, converter: boolTrueFalse }
+	};
+
+	constructor() {
+		super();
+		this.opened = false;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleLabelClick = () => {
+		this.toggle();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('opened')) {
+			this.dispatchEvent(new CustomEvent('openedchanged', { 
+				detail: this.opened ? 'open' : 'close' 
+			}));
+			this.dispatchEvent(new CustomEvent(this.opened ? 'open' : 'close'));
+		}
+	}
+
+	/*
+		Public Methods
+	*/
+	open() {
+		this.opened = true;
+	}
+
+	close() {
+		this.opened = false;
+	}
+
+	toggle() {
+		this.opened = !this.opened;
+		this.dispatchEvent(new CustomEvent('openedtoggled'));
+	}
+
+	/*
+		Styles
+	*/
+	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;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	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/src/components/ContentSlider.js

@@ -0,0 +1,205 @@
+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 {
+	/*
+		Properties
+	*/
+	static properties = {
+		index: { type: Number, reflect: true },
+		controls: { type: Boolean, reflect: true, converter: boolTrueFalse },
+		globalControls: { type: Boolean, reflect: true, attribute: 'global-controls', converter: boolTrueFalse },
+		keyboardControls: { type: Boolean, reflect: true, attribute: 'keyboard-controls', converter: boolTrueFalse },
+		loop: { type: Boolean, reflect: true, converter: boolTrueFalse }
+	};
+
+	constructor() {
+		super();
+		this.index = 0;
+		this.controls = true;
+		this.globalControls = false;
+		this.keyboardControls = true;
+		this.loop = false;
+		this.content = [];
+		this.tabIndex = 0;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handlePrevClick = () => {
+		this.previous();
+	}
+
+	handleNextClick = () => {
+		this.next();
+	}
+
+	handleKeydown = event => {
+		if(event.code === 'ArrowLeft') {
+			event.preventDefault();
+			this.dispatchEvent(new CustomEvent('keyleft'));
+			this.previous();
+		} else if(event.code === 'ArrowRight') {
+			event.preventDefault();
+			this.dispatchEvent(new CustomEvent('keyright'));
+			this.next();
+		}
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateContent();
+		this.setupKeyboardControls();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeKeyboardControls();
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('index')) {
+			this.validateAndSetIndex();
+			this.renderContent();
+			this.dispatchEvent(new CustomEvent('change', { detail: { index: this.index } }));
+		}
+
+		if(changedProperties.has('keyboardControls') || changedProperties.has('globalControls')) {
+			this.removeKeyboardControls();
+			this.setupKeyboardControls();
+		}
+	}
+
+	/*
+		Private Methods
+	*/
+	updateContent() {
+		this.content = [...this.querySelectorAll(':scope > *')];
+		this.validateAndSetIndex();
+		this.renderContent();
+	}
+
+	validateAndSetIndex() {
+		if(this.content.length === 0) return;
+		
+		const validIndex = Math.max(Math.min(this.content.length - 1, this.index), 0);
+		if(this.index !== validIndex) {
+			this.index = validIndex;
+		}
+	}
+
+	renderContent() {
+		if(this.content.length === 0) return;
+		
+		this.innerHTML = '';
+		if(this.content[this.index]) {
+			this.appendChild(this.content[this.index]);
+		}
+	}
+
+	setupKeyboardControls() {
+		if(this.keyboardControls) {
+			if(this.globalControls) {
+				window.addEventListener('keydown', this.handleKeydown);
+			} else {
+				this.addEventListener('keydown', this.handleKeydown);
+			}
+		}
+	}
+
+	removeKeyboardControls() {
+		window.removeEventListener('keydown', this.handleKeydown);
+		this.removeEventListener('keydown', this.handleKeydown);
+	}
+
+	/*
+		Public Methods
+	*/
+	previous() {
+		let newIndex = this.index - 1;
+		if(this.loop && newIndex < 0) {
+			newIndex = this.content.length - 1;
+		}
+		this.dispatchEvent(new CustomEvent('previous', { detail: { index: newIndex } }));
+		this.index = newIndex;
+	}
+
+	next() {
+		let newIndex = this.index + 1;
+		if(this.loop && newIndex >= this.content.length) {
+			newIndex = 0;
+		}
+		this.dispatchEvent(new CustomEvent('next', { detail: { index: newIndex } }));
+		this.index = newIndex;
+	}
+
+	goto(newIndex) {
+		this.dispatchEvent(new CustomEvent('goto', { detail: { index: newIndex } }));
+		this.index = newIndex;
+	}
+
+	/*
+		Styles
+	*/
+	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;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	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);