kempo-ui 0.4.19 → 0.4.21

package/src/components/htmlEditorControls/InsertTable.js

@@ -1,126 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-import Dialog from '../Dialog.js';
-
-export default class InsertTable extends HtmlEditorControl {
-	static properties = {
-		editorMode: {type: String, state: true}
-	};
-
-	/*
-		Lifecycle Callbacks
-	*/
-	constructor(){
-		super();
-	}
-
-	connectedCallback(){
-		super.connectedCallback();
-		
-		if(!this.editor) return;
-		this.editorMode = this.editor.mode;
-		
-		this.editor?.addEventListener('mode-changed', () => {
-			if(!this.editor) return;
-			this.editorMode = this.editor.mode;
-		});
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleClick = () => {
-		if(!this.editor) return;
-
-
-		const existing = this.editor.getTableAtSelection();
-		const isEditing = !!existing;
-		const defaultRows = existing?.rows ?? 3;
-		const defaultCols = existing?.cols ?? 3;
-		const defaultHeaders = existing?.hasHeaders ?? true;
-		const cellData = existing?.cellData ?? null;
-
-		// Create dialog inputs
-		const rowsInput = document.createElement('input');
-		rowsInput.type = 'number';
-		rowsInput.min = '1';
-		rowsInput.max = '20';
-		rowsInput.value = defaultRows.toString();
-		rowsInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;';
-
-		const colsInput = document.createElement('input');
-		colsInput.type = 'number';
-		colsInput.min = '1';
-		colsInput.max = '10';
-		colsInput.value = defaultCols.toString();
-		colsInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;';
-
-		const headersCheckbox = document.createElement('input');
-		headersCheckbox.type = 'checkbox';
-		headersCheckbox.checked = defaultHeaders;
-		headersCheckbox.id = 'table-headers-checkbox';
-
-		const content = document.createElement('div');
-		content.className = 'p';
-		content.style.cssText = 'display: flex; flex-direction: column; gap: 1rem;';
-		content.innerHTML = `
-			<div style="display: flex; flex-direction: column; gap: 0.5rem;">
-				<label style="font-weight: bold;">Rows</label>
-			</div>
-			<div style="display: flex; flex-direction: column; gap: 0.5rem;">
-				<label style="font-weight: bold;">Columns</label>
-			</div>
-			<div style="display: flex; align-items: center; gap: 0.5rem;">
-				<label for="table-headers-checkbox" style="font-weight: bold;">Include Headers</label>
-			</div>
-		`;
-		content.children[0].appendChild(rowsInput);
-		content.children[1].appendChild(colsInput);
-		content.children[2].insertBefore(headersCheckbox, content.children[2].firstChild);
-
-		Dialog.create(content, {
-			title: isEditing ? 'Edit Table' : 'Insert Table',
-			cancelText: 'Cancel',
-			confirmText: isEditing ? 'Update Table' : 'Insert Table',
-			confirmClasses: 'success',
-			confirmAction: () => {
-				const rows = parseInt(rowsInput.value) || 3;
-				const cols = parseInt(colsInput.value) || 3;
-				const includeHeaders = headersCheckbox.checked;
-				if(isEditing) this.editor.removeTableByKey(existing.key);
-				this.editor.insertTable(rows, cols, includeHeaders, cellData);
-			}
-		});
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		this.hidden = this.editorMode === 'code';
-		
-		return html`
-			<button
-				class="${this.buttonClasses}"
-				@click="${this.handleClick}"
-			>
-				<slot name="icon">
-					<k-icon name="table"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-			}
-		`
-	];
-}
-
-customElements.define('k-hec-insert-table', InsertTable);

package/src/components/htmlEditorControls/Italic.js

@@ -1,63 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class Italic 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.italic();
-	};
-
-	/*
-		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_italic"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-hec-italic', Italic);

package/src/components/htmlEditorControls/Mode.js

@@ -1,68 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import {html, css} from '../../lit-all.min.js';
-import '../Icon.js';
-
-/*
-  Mode Control
-*/
-export default class Mode extends HtmlEditorControl {
-
-  static properties = {
-    mode: {type: String, reflect: true}
-  };
-
-  hidesInCodeMode = false;
-
-  /*
-    Lifecycle Callbacks
-  */
-  connectedCallback(){
-    super.connectedCallback();
-    this.updateMode();
-    this.editor?.addEventListener('mode-changed', () => this.updateMode());
-  }
-
-  /*
-    Event Handlers
-  */
-  handleClick = () => {
-    if(!this.editor) return;
-    this.editor.toggleMode();
-  };
-
-  /*
-    Utility Functions
-  */
-  updateMode(){
-    if(!this.editor) return;
-    this.mode = this.editor.mode;
-  }
-
-  /*
-    Styles
-  */
-  static styles = [
-    HtmlEditorControl.styles,
-    css`
-      :host {
-        display: inline-flex;
-      }
-    `
-  ];
-
-  /*
-    Rendering
-  */
-  render(){
-    const isCodeMode = this.mode === 'code';
-    const buttonClass = isCodeMode ? `${this.buttonClasses} bg-primary` : this.buttonClasses;
-    
-    return html`
-      <button class="${buttonClass}" @click="${this.handleClick}">
-        <k-icon name="code"></k-icon>
-      </button>
-    `;
-  }
-}
-
-customElements.define('k-hec-mode', Mode);

package/src/components/htmlEditorControls/NumberList.js

@@ -1,63 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class NumberList 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.orderedList();
-	};
-
-	/*
-		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_list_numbered"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-hec-number-list', NumberList);

package/src/components/htmlEditorControls/Strikethrough.js

@@ -1,63 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class Strikethrough 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.strikethrough();
-	};
-
-	/*
-		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="strikethrough_s"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-hec-strikethrough', Strikethrough);

package/src/components/htmlEditorControls/TextBackgroundColor.js

@@ -1,189 +0,0 @@
-import DropdownControl from './DropdownControl.js';
-import {html, css} from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class TextBackgroundColor extends DropdownControl {
-	static properties = {
-		editorMode: {type: String, state: true},
-		colors: {type: String},
-		disableRemove: {type: Boolean, attribute: 'disable-remove'},
-		disablePicker: {type: Boolean, attribute: 'disable-picker'}
-	};
-
-	/*
-		Styles
-	*/
-	static styles = [
-		DropdownControl.styles,
-		css`
-			.dropdown-content {
-				padding: 8px;
-				min-width: 200px;
-			}
-
-			.remove-btn {
-				width: 100%;
-				padding: 8px;
-				margin-bottom: 8px;
-				border: 1px solid var(--border-color, #ccc);
-				background: var(--background-color, white);
-				cursor: pointer;
-				border-radius: 4px;
-			}
-
-			.remove-btn:hover {
-				background: var(--hover-background-color, #f5f5f5);
-			}
-
-			.color-swatches {
-				display: grid;
-			grid-template-columns: repeat(6, 1fr);
-			}
-
-			.color-swatch {
-				width: 32px;
-				height: 32px;
-				border: 1px solid var(--border-color, #ccc);
-				cursor: pointer;
-				border-radius: 4px;
-			}
-
-			.color-swatch:hover {
-				border-color: var(--primary-color, #007acc);
-				box-shadow: 0 0 4px rgba(0, 122, 204, 0.3);
-			}
-
-			.picker-row {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-
-			.picker-row label {
-				flex-shrink: 0;
-			}
-
-			.picker-row input[type="color"] {
-				flex: 1;
-				height: 32px;
-				border: 1px solid var(--border-color, #ccc);
-				border-radius: 4px;
-				cursor: pointer;
-			}
-		`
-	];
-
-	/*
-		Constructor
-	*/
-	constructor(){
-		super();
-		this.colors = '#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc';
-		this.disableRemove = false;
-		this.disablePicker = false;
-		this.icon = 'format_color_fill';
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback(){
-		super.connectedCallback();
-		this.updateEditorMode();
-		this.editor?.addEventListener('mode-changed', () => this.updateEditorMode());
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleRemove = (e) => {
-		if(this.editor){
-			this.editor.removeTextBackgroundColor();
-		}
-		this.opened = false;
-	};
-
-	handleSwatchClick = (e) => {
-		const color = e.target.style.backgroundColor;
-		if(this.editor && color){
-			const rgb = color.match(/\d+/g);
-			const hex = rgb ? '#' + rgb.map(x => parseInt(x).toString(16).padStart(2, '0')).join('') : color;
-			this.editor.setTextBackgroundColor(hex);
-		}
-		this.opened = false;
-	};
-
-	handlePickerChange = (e) => {
-		const color = e.target.value;
-		if(this.editor && color){
-			this.editor.setTextBackgroundColor(color);
-		}
-		this.opened = false;
-	};
-
-	/*
-		Utility Functions
-	*/
-	updateEditorMode(){
-		if(!this.editor) return;
-		this.editorMode = this.editor.mode;
-	}
-
-	getColorArray(){
-		return this.colors.split(',').map(c => c.trim()).filter(c => c);
-	}
-
-	/*
-		Rendering
-	*/
-	render(){
-		this.hidden = this.editorMode === 'code';
-
-		const colorArray = this.getColorArray();
-
-		return html`
-			<k-dropdown 
-				?opened=${this.opened}
-				@opened=${this.handleOpened}
-				@closed=${this.handleClosed}
-			>
-				<button 
-					slot="trigger" 
-					class="${this.buttonClasses}"
-				>
-					<k-icon name="format_color_fill"></k-icon>
-				</button>
-				
-				<div class="dropdown-content">
-					${!this.disableRemove ? html`
-						<button class="remove-btn" @click=${this.handleRemove}>
-							Remove Color
-						</button>
-					` : ''}
-					
-					<div class="color-swatches">
-						${colorArray.map(color => html`
-							<button 
-								class="color-swatch" 
-								style="background-color: ${color}"
-								@click=${this.handleSwatchClick}
-							></button>
-						`)}
-					</div>
-
-					${!this.disablePicker ? html`
-						<div class="picker-row">
-							<label>Custom:</label>
-							<input 
-								type="color" 
-								@input=${this.handlePickerChange}
-							/>
-						</div>
-					` : ''}
-				</div>
-			</k-dropdown>
-		`;
-	}
-}
-
-customElements.define('k-hec-text-background-color', TextBackgroundColor);