kempo-ui 0.3.8 → 0.3.10

package/src/components/codeEditorControls/CodeEditorControl.js

@@ -0,0 +1,134 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { css } from '../../lit-all.min.js';
+
+export default class CodeEditorControl extends ShadowComponent {
+	static properties = {
+		btnClass: { type: String, attribute: 'btn-class' },
+		groupBtnClass: { type: String, attribute: 'group-btn-class' },
+		groupLastBtnClass: { type: String, attribute: 'group-last-btn-class' },
+		hidden: { type: Boolean, reflect: true }
+	};
+
+	/*
+		Constructor
+	*/
+	constructor() {
+		super();
+		this.btnClass = 'b r mq ph';
+		this.groupBtnClass = 'br ph';
+		this.groupLastBtnClass = 'ph';
+		this.hidden = false;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateModeVisibility();
+		const editor = this.editor;
+		if(editor?.tagName === 'K-HTML-EDITOR'){
+			this.modeHandler = () => this.updateModeVisibility();
+			editor.addEventListener('mode-changed', this.modeHandler);
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.modeHandler){
+			this.editor?.removeEventListener('mode-changed', this.modeHandler);
+			this.modeHandler = null;
+		}
+	}
+
+	updated(changed) {
+		super.updated(changed);
+		if(changed.has('hidden')){
+			this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
+		}
+	}
+
+	/*
+		Mode Visibility
+	*/
+	updateModeVisibility() {
+		const editor = this.editor;
+		if(editor?.tagName === 'K-HTML-EDITOR'){
+			const shouldHide = editor.mode !== 'code';
+			if(this.hidden !== shouldHide){
+				this.hidden = shouldHide;
+				this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
+			}
+		}
+	}
+
+	/*
+		Getters for Editor Integration
+	*/
+	get editor() {
+		const isEditor = el => el?.tagName === 'K-CODE-EDITOR' || el?.tagName === 'K-HTML-EDITOR';
+		let current = this.getRootNode();
+		while(current instanceof ShadowRoot){
+			const host = current.host;
+			if(isEditor(host)) return host;
+			current = host.getRootNode();
+		}
+		let el = this.parentElement;
+		while(el){
+			if(isEditor(el)) return el;
+			el = el.parentElement;
+		}
+		return null;
+	}
+
+	/*
+		Getters for Group Detection
+	*/
+	get isInGroup() {
+		const parent = this.parentElement;
+		return parent && parent.tagName === 'K-CEC-GROUP';
+	}
+
+	get isLastInGroup() {
+		if(!this.isInGroup) return false;
+		const siblings = Array.from(this.parentElement.children).filter(
+			child => child.tagName.startsWith('K-CEC-') && child.tagName !== 'K-CEC-SPACER'
+		);
+		return siblings[siblings.length - 1] === this;
+	}
+
+	/*
+		Getters for Button Classes
+	*/
+	get buttonClasses() {
+		const baseClass = 'no-btn icon-btn';
+		let styleClass;
+		if(this.isInGroup){
+			styleClass = this.isLastInGroup ? this.groupLastBtnClass : this.groupBtnClass;
+		} else {
+			styleClass = this.btnClass;
+		}
+		return `${baseClass} ${styleClass}`.trim();
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: inline-flex;
+			align-items: center;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+		button {
+			cursor: pointer;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			min-width: 2rem;
+			min-height: 2rem;
+		}
+	`;
+}

package/src/components/codeEditorControls/ControlGroup.js

@@ -0,0 +1,70 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class ControlGroup extends ShadowComponent {
+	static properties = {
+		hidden: { type: Boolean, reflect: true }
+	};
+
+	/*
+		Constructor
+	*/
+	constructor() {
+		super();
+		this.hidden = false;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		if(!this.hasAttribute('class')){
+			this.setAttribute('class', 'b r mq');
+		}
+		this.addEventListener('control_visibility_change', this.checkVisibility);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('control_visibility_change', this.checkVisibility);
+	}
+
+	/*
+		Event Handlers
+	*/
+	checkVisibility = (e) => {
+		if(e.target === this) return;
+		const wasHidden = this.hidden;
+		this.hidden = Array.from(this.children).every(child => child.hidden === true);
+		if(this.hidden !== wasHidden){
+			this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
+		}
+	};
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: inline-flex;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+		::slotted(*) {
+			margin-top: -1px;
+			margin-bottom: -1px;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+customElements.define('k-cec-group', ControlGroup);
+

package/src/components/codeEditorControls/ControlSpacer.js

@@ -0,0 +1,23 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class ControlSpacer extends ShadowComponent {
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: inline-flex;
+			flex: 1;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html``;
+	}
+}
+
+customElements.define('k-cec-spacer', ControlSpacer);

package/src/components/codeEditorControls/CopyCode.js

@@ -0,0 +1,37 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class CopyCode extends CodeEditorControl {
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host {
+				display: inline-flex;
+			}
+		`
+	];
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.editor?.copyToClipboard();
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Copy Code">
+				<k-icon name="content_copy"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-cec-copy-code', CopyCode);

package/src/components/codeEditorControls/EditorTheme.js

@@ -0,0 +1,81 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class EditorTheme extends CodeEditorControl {
+	static properties = {
+		value: { type: String, state: true }
+	};
+
+	/*
+		Lifecycle Callbacks
+	*/
+	constructor() {
+		super();
+		this.value = 'auto';
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		const editor = this.editor;
+		if(!editor) return;
+		this.value = editor.editorTheme || 'auto';
+		this.themeHandler = e => { this.value = e.detail.editorTheme; };
+		editor.addEventListener('editor-theme-changed', this.themeHandler);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.editor?.removeEventListener('editor-theme-changed', this.themeHandler);
+		this.themeHandler = null;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleChange = e => {
+		this.editor?.setEditorTheme(e.target.value);
+	};
+
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host {
+				background-color: var(--input_bg);
+				color: var(--input_tc);
+				border: var(--input_border_width) solid var(--c_input_border);
+				border-radius: var(--radius);
+				transition: box-shadow var(--animation_ms);
+				position: relative;
+			}
+			k-icon {
+				pointer-events: none;
+				position: absolute;
+				left: 0.5rem;
+			}
+			select {
+				padding-left: 2rem;
+				border: 0;
+			}
+		`
+	];
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<k-icon name="contrast" style="font-size: 1.125rem; opacity: 0.7;"></k-icon>
+			<select .value=${this.value} @change=${this.handleChange} title="Editor Theme">
+				<option value="auto">Auto</option>
+				<option value="light">Light</option>
+				<option value="dark">Dark</option>
+			</select>
+		`;
+	}
+}
+
+customElements.define('k-cec-editor-theme', EditorTheme);

package/src/components/codeEditorControls/FindReplace.js

@@ -0,0 +1,35 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FindReplace extends CodeEditorControl {
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host { display: inline-flex; }
+		`
+	];
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.editor?.openFind();
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Find & Replace">
+				<k-icon name="search"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-cec-find-replace', FindReplace);

package/src/components/codeEditorControls/FoldAll.js

@@ -0,0 +1,49 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FoldAll extends CodeEditorControl {
+	static properties = {
+		folded: { type: Boolean, state: true }
+	};
+
+	constructor() {
+		super();
+		this.folded = false;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.folded = !this.folded;
+		if(this.folded){
+			this.editor?.foldAll();
+		} else {
+			this.editor?.unfoldAll();
+		}
+	};
+
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host { display: inline-flex; }
+		`
+	];
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="${this.folded ? 'Unfold All' : 'Fold All'}">
+				<k-icon name="${this.folded ? 'unfold_more' : 'unfold_less'}"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-cec-fold-all', FoldAll);

package/src/components/codeEditorControls/FontSize.js

@@ -0,0 +1,45 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FontSize extends CodeEditorControl {
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host {
+				display: inline-flex;
+				gap: 0;
+			}
+		`
+	];
+
+	/*
+		Event Handlers
+	*/
+	handleIncrease = () => {
+		this.editor?.increaseFontSize();
+	};
+
+	handleDecrease = () => {
+		this.editor?.decreaseFontSize();
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="${this.buttonClasses}" @click="${this.handleDecrease}" title="Decrease Font Size">
+				<k-icon name="text_decrease"></k-icon>
+			</button>
+			<button class="${this.buttonClasses}" @click="${this.handleIncrease}" title="Increase Font Size">
+				<k-icon name="text_increase"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-cec-font-size', FontSize);

package/src/components/codeEditorControls/FormatCode.js

@@ -0,0 +1,37 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FormatCode extends CodeEditorControl {
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host {
+				display: inline-flex;
+			}
+		`
+	];
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.editor?.formatCode();
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Format Code">
+				<k-icon name="frame_source"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-cec-format-code', FormatCode);

package/src/components/codeEditorControls/Fullscreen.js

@@ -0,0 +1,72 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Fullscreen extends CodeEditorControl {
+	static properties = {
+		fullscreen: { type: Boolean, state: true }
+	};
+
+	constructor() {
+		super();
+		this.fullscreen = false;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		const editor = this.editor;
+		if(!editor) return;
+		this.fullscreen = editor.fullscreen;
+		this.fullscreenHandler = () => { this.fullscreen = editor.fullscreen; };
+		editor.addEventListener('fullscreen-changed', this.fullscreenHandler);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.editor?.removeEventListener('fullscreen-changed', this.fullscreenHandler);
+		this.fullscreenHandler = null;
+	}
+
+	/*
+		Mode Visibility — visible in both visual and code modes
+	*/
+	updateModeVisibility() {}
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.editor?.toggleFullscreen();
+	};
+
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host { display: inline-flex; }
+			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
+		`
+	];
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button
+				class="${this.buttonClasses} ${this.fullscreen ? 'active' : ''}"
+				@click="${this.handleClick}"
+				title="${this.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}"
+			>
+				<k-icon name="${this.fullscreen ? 'fullscreen_exit' : 'fullscreen'}"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-cec-fullscreen', Fullscreen);

package/src/components/codeEditorControls/LanguageSelect.js

@@ -0,0 +1,74 @@
+import CodeEditorControl from './CodeEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+const COMMON_LANGUAGES = [
+	'javascript', 'typescript', 'html', 'css', 'json',
+	'markdown', 'python', 'java', 'csharp', 'cpp',
+	'go', 'rust', 'php', 'ruby', 'sql',
+	'xml', 'yaml', 'shell', 'plaintext'
+];
+
+export default class LanguageSelect extends CodeEditorControl {
+	static properties = {
+		value: { type: String, state: true }
+	};
+
+	constructor() {
+		super();
+		this.value = 'javascript';
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		const editor = this.editor;
+		if(!editor) return;
+		this.value = editor.language || 'javascript';
+		this.languageHandler = e => { this.value = e.detail.language; };
+		editor.addEventListener('language-changed', this.languageHandler);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.editor?.removeEventListener('language-changed', this.languageHandler);
+		this.languageHandler = null;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleChange = e => {
+		this.editor?.setLanguage(e.target.value);
+	};
+
+	/*
+		Styles
+	*/
+	static styles = [
+		CodeEditorControl.styles,
+		css`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				padding: 0 0.25rem;
+				gap: 0.25rem;
+				background-color: 
+			}
+		`
+	];
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<select .value=${this.value} @change=${this.handleChange} title="Language">
+				${COMMON_LANGUAGES.map(lang => html`
+					<option value="${lang}" ?selected=${this.value === lang}>${lang}</option>
+				`)}
+			</select>
+		`;
+	}
+}
+
+customElements.define('k-cec-language', LanguageSelect);