kempo-ui 0.4.19 → 0.4.21

package/src/components/codeEditorControls/CopyCode.js

@@ -1,37 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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);

package/src/components/codeEditorControls/Minimap.js

@@ -1,60 +0,0 @@
-import CodeEditorControl from './CodeEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class Minimap extends CodeEditorControl {
-	static properties = {
-		active: { type: Boolean, state: true }
-	};
-
-	constructor() {
-		super();
-		this.active = false;
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		const editor = this.editor;
-		if(!editor) return;
-		this.active = editor.minimapEnabled;
-		this.minimapHandler = e => { this.active = e.detail.minimapEnabled; };
-		editor.addEventListener('minimap-changed', this.minimapHandler);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.editor?.removeEventListener('minimap-changed', this.minimapHandler);
-		this.minimapHandler = null;
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleClick = () => {
-		this.editor?.toggleMinimap();
-	};
-
-	/*
-		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.active ? 'active' : ''}" @click="${this.handleClick}" title="Toggle Minimap">
-				<k-icon name="map"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-cec-minimap', Minimap);

package/src/components/codeEditorControls/Redo.js

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

package/src/components/codeEditorControls/Undo.js

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

package/src/components/codeEditorControls/WordWrap.js

@@ -1,60 +0,0 @@
-import CodeEditorControl from './CodeEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class WordWrap extends CodeEditorControl {
-	static properties = {
-		active: { type: Boolean, state: true }
-	};
-
-	constructor() {
-		super();
-		this.active = true;
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		const editor = this.editor;
-		if(!editor) return;
-		this.active = editor.wordWrap;
-		this.wordWrapHandler = e => { this.active = e.detail.wordWrap; };
-		editor.addEventListener('word-wrap-changed', this.wordWrapHandler);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.editor?.removeEventListener('word-wrap-changed', this.wordWrapHandler);
-		this.wordWrapHandler = null;
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleClick = () => {
-		this.editor?.toggleWordWrap();
-	};
-
-	/*
-		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.active ? 'active' : ''}" @click="${this.handleClick}" title="Word Wrap">
-				<k-icon name="wrap_text"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-cec-word-wrap', WordWrap);

package/src/components/htmlEditorControls/AlignCenter.js

@@ -1,63 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class AlignCenter extends HtmlEditorControl {
-	static properties = {
-		editorMode: {type: String, state: true}
-	};
-
-	/*
-		Styles
-	*/
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-			}
-		`
-	];
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback(){
-		super.connectedCallback();
-		this.updateEditorMode();
-		this.editor?.addEventListener('mode-changed', () => this.updateEditorMode());
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleClick = () => {
-		if(this.editor) this.editor.alignCenter();
-	};
-
-	/*
-		Utility Functions
-	*/
-	updateEditorMode(){
-		if(!this.editor) return;
-		this.editorMode = this.editor.mode;
-	}
-
-	/*
-		Rendering
-	*/
-	render() {
-		this.hidden = this.editorMode === 'code';
-		
-		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
-				<slot name="icon">
-					<k-icon name="format_align_center"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-hec-align-center', AlignCenter);