kempo-ui 0.4.20 → 0.4.21

package/src/components/htmlEditorControls/AlignJustify.js

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

package/src/components/htmlEditorControls/AlignLeft.js

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

package/src/components/htmlEditorControls/AlignRight.js

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

package/src/components/htmlEditorControls/Bold.js

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

package/src/components/htmlEditorControls/BulletList.js

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

package/src/components/htmlEditorControls/CharacterCount.js

@@ -1,75 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class CharacterCount extends HtmlEditorControl {
-	static properties = {
-		count: {type: Number, state: true}
-	};
-
-	/*
-		Lifecycle Callbacks
-	*/
-	constructor(){
-		super();
-		this.count = 0;
-	}
-
-	connectedCallback(){
-		super.connectedCallback();
-		
-		if(!this.editor) return;
-		
-		this.editor.addEventListener('ready', () => {
-			this.updateCount();
-		});
-		
-		this.editor.addEventListener('change', () => {
-			this.updateCount();
-		});
-		
-		setTimeout(() => this.updateCount(), 0);
-	}
-
-	/*
-		Utility Functions
-	*/
-	updateCount = () => {
-		if(!this.editor) return;
-		
-		const parser = new DOMParser();
-		const doc = parser.parseFromString(this.editor.getValue(), 'text/html');
-		const text = doc.body.innerText || '';
-		this.count = text.length;
-	};
-
-	/*
-		Rendering
-	*/
-	render(){
-		return html`
-			<span class="character-count">
-				<slot name="label">Characters:</slot> ${this.count}
-			</span>
-		`;
-	}
-
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-				align-items: center;
-				padding: 0 0.5rem;
-				font-size: 0.875rem;
-				color: var(--text-color-secondary, #666);
-			}
-			.character-count {
-				display: flex;
-				align-items: center;
-				gap: 0.25rem;
-			}
-		`
-	];
-}
-
-customElements.define('k-hec-character-count', CharacterCount);

package/src/components/htmlEditorControls/ClearFormatting.js

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

package/src/components/htmlEditorControls/CodeBlock.js

@@ -1,64 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class CodeBlock 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) return;
-		this.editor.formatBlock(this.editor.isSelectionInCodeBlock() ? 'p' : 'pre');
-	};
-
-	/*
-		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="code_blocks"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-hec-code-block', CodeBlock);

package/src/components/htmlEditorControls/ControlGroup.js

@@ -1,70 +0,0 @@
-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-hec-group', ControlGroup);
-

package/src/components/htmlEditorControls/ControlSpacer.js

@@ -1,23 +0,0 @@
-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-hec-spacer', ControlSpacer);