kempo-ui 0.4.20 → 0.4.21

package/src/components/htmlEditorControls/CreateLink.js

@@ -1,115 +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 CreateLink 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 selectedText = this.editor.getSelectedText();
-
-		const urlInput = document.createElement('input');
-		urlInput.type = 'text';
-		urlInput.placeholder = 'https://example.com';
-		urlInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;';
-
-		const textInput = document.createElement('input');
-		textInput.type = 'text';
-		textInput.placeholder = 'Enter link text';
-		textInput.value = selectedText;
-		textInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;';
-
-		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;">URL</label>
-			</div>
-			<div style="display: flex; flex-direction: column; gap: 0.5rem;">
-				<label style="font-weight: bold;">Link Text</label>
-			</div>
-		`;
-		content.children[0].appendChild(urlInput);
-		content.children[1].appendChild(textInput);
-
-		Dialog.create(content, {
-			title: 'Create Link',
-			cancelText: 'Cancel',
-			confirmText: 'Insert Link',
-			confirmClasses: 'success ml',
-			confirmAction: (event) => {
-				const url = urlInput.value.trim();
-				const text = textInput.value.trim();
-
-				if(!url){
-					event.keepDialogOpen = true;
-					return;
-				}
-
-				if(this.editor.selection && (!text || text === selectedText)){
-					this.editor.createLink(url);
-				} else {
-					this.editor.createLinkWithText(url, text || url);
-				}
-			}
-		});
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		this.hidden = this.editorMode === 'code';
-		
-		return html`
-			<button
-				class="${this.buttonClasses}"
-				@click="${this.handleClick}"
-			>
-				<slot name="icon">
-					<k-icon name="link"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-			}
-		`
-	];
-}
-
-customElements.define('k-hec-create-link', CreateLink);

package/src/components/htmlEditorControls/DropdownControl.js

@@ -1,149 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import {html, css} from '../../lit-all.min.js';
-import '../Dropdown.js';
-import '../Icon.js';
-
-/*
-  Dropdown Control - Base control for dropdown menus
-*/
-export default class DropdownControl extends HtmlEditorControl {
-
-  static properties = {
-    opened: {type: Boolean, reflect: true},
-    editorMode: {type: String, state: true}
-  };
-
-  constructor(){
-    super();
-    this.opened = false;
-  }
-  
-  /*
-    Lifecycle Callbacks
-  */
-  connectedCallback(){
-    super.connectedCallback();
-    this.updateEditorMode();
-    this.editor?.addEventListener('mode-changed', () => this.updateEditorMode());
-  }
-
-  updated(changedProperties){
-    super.updated(changedProperties);
-    
-    if(changedProperties.has('editorMode')){
-      requestAnimationFrame(() => {
-        this.hidden = this.editorMode === 'code' && !this.hasVisibleChildren();
-      });
-    }
-  }
-  
-  /*
-    Utility Functions
-  */
-  updateEditorMode(){
-    if(!this.editor) return;
-    this.editorMode = this.editor.mode;
-  }
-  
-  hasVisibleChildren(){
-    const children = Array.from(this.children).filter(
-      child => !child.hasAttribute('slot')
-    );
-    
-    return children.some(child => {
-      if(child.hidden === false || child.hidden === undefined){
-        const style = window.getComputedStyle(child);
-        return style.display !== 'none';
-      }
-      return false;
-    });
-  }
-
-  /*
-    Styles
-  */
-  static styles = [
-    HtmlEditorControl.styles,
-    css`
-      :host {
-        display: inline-flex;
-      }
-      
-      k-dropdown {
-        display: inline-flex;
-      }
-      
-      /* Override fixed sizing for dropdown trigger */
-      button[slot="trigger"] {
-        width: auto !important;
-        height: auto !important;
-        min-width: 40px;
-        min-height: 40px;
-      }
-      
-      /* Style slotted items (not icon or label) */
-      ::slotted(:not([slot="icon"]):not([slot="label"])) {
-        display: block !important;
-      }
-      
-      ::slotted(:not([slot="icon"]):not([slot="label"])) .icon-btn,
-      ::slotted(:not([slot="icon"]):not([slot="label"])) button {
-        display: flex !important;
-        width: 100% !important;
-        height: auto !important;
-        justify-content: flex-start !important;
-        padding: 0.5rem 0.75rem !important;
-        margin: 0 !important;
-        border: none !important;
-        border-radius: 0 !important;
-        border-bottom: 1px solid var(--c_border) !important;
-      }
-      
-      ::slotted(:not([slot="icon"]):not([slot="label"]):last-of-type) .icon-btn,
-      ::slotted(:not([slot="icon"]):not([slot="label"]):last-of-type) button {
-        border-bottom: none !important;
-      }
-    `
-  ];
-
-  /*
-    Event Handlers
-  */
-  handleToggle = () => {
-    this.opened = !this.opened;
-  };
-
-  handleOpened = () => {
-    this.opened = true;
-  };
-
-  handleClosed = () => {
-    this.opened = false;
-  };
-
-  /*
-    Rendering
-  */
-  render(){
-    return html`
-      <k-dropdown 
-        ?opened=${this.opened}
-        @opened=${this.handleOpened}
-        @closed=${this.handleClosed}
-      >
-        <button 
-          slot="trigger" 
-          class="${this.buttonClasses}"
-        >
-          <slot name="icon">
-            <k-icon name="arrow_drop_down"></k-icon>
-          </slot>
-          <slot name="label"></slot>
-        </button>
-        <slot></slot>
-      </k-dropdown>
-    `;
-  }
-}
-
-customElements.define('k-hec-dropdown', DropdownControl);

package/src/components/htmlEditorControls/FormatBlock.js

@@ -1,106 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class FormatBlock extends HtmlEditorControl {
-	static properties = {
-		editorMode: {type: String, state: true},
-		tag: {type: String},
-		label: {type: String}
-	};
-
-	/*
-		Styles
-	*/
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-			}
-		`
-	];
-
-	/*
-		Constructor
-	*/
-	constructor() {
-		super();
-		this.tag = 'p';
-		this.label = '';
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback(){
-		super.connectedCallback();
-		this.updateEditorMode();
-		this.editor?.addEventListener('mode-changed', () => this.updateEditorMode());
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleClick = () => {
-		if(this.editor) this.editor.formatBlock(this.tag);
-	};
-
-	/*
-		Utility Functions
-	*/
-	updateEditorMode(){
-		if(!this.editor) return;
-		this.editorMode = this.editor.mode;
-	}
-
-	/*
-		Rendering
-	*/
-	render() {
-		this.hidden = this.editorMode === 'code';
-		
-		const displayLabel = this.label || this.getDefaultLabel();
-		const iconName = this.getDefaultIcon();
-		
-		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
-				<slot name="icon">
-					<k-icon name="${iconName}"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-
-	/*
-		Helper Methods
-	*/
-	getDefaultLabel() {
-		const labels = {
-			'h1': 'Heading 1',
-			'h2': 'Heading 2',
-			'h3': 'Heading 3',
-			'h4': 'Heading 4',
-			'h5': 'Heading 5',
-			'h6': 'Heading 6',
-			'p': 'Paragraph'
-		};
-		return labels[this.tag] || this.tag.toUpperCase();
-	}
-
-	getDefaultIcon() {
-		const icons = {
-			'h1': 'format_h1',
-			'h2': 'format_h2',
-			'h3': 'format_h3',
-			'h4': 'format_h4',
-			'h5': 'format_h5',
-			'h6': 'format_h6',
-			'p': 'format_paragraph'
-		};
-		return icons[this.tag] || 'format_paragraph';
-	}
-}
-
-customElements.define('k-hec-format-block', FormatBlock);

package/src/components/htmlEditorControls/FormatCode.js

@@ -1,7 +0,0 @@
-/*
-	Deprecated: use k-cec-format-code from codeEditorControls/FormatCode.js instead.
-	This file re-exports for backward compatibility.
-*/
-import FormatCode from '../codeEditorControls/FormatCode.js';
-export default FormatCode;
-

package/src/components/htmlEditorControls/HtmlEditorControl.js

@@ -1,164 +0,0 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class HtmlEditorControl extends ShadowComponent {
-	/* Properties */
-	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.hidesInCodeMode = true;
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		const editor = this.editor;
-		if(!editor) return;
-		this.modeEditor = editor;
-		this.modeHandler = () => {
-			const shouldHide = this.hidesInCodeMode && this.modeEditor.mode === 'code';
-			if(this.hidden !== shouldHide){
-				this.hidden = shouldHide;
-				this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
-			}
-		};
-		editor.addEventListener('mode-changed', this.modeHandler);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.modeEditor?.removeEventListener('mode-changed', this.modeHandler);
-		this.modeEditor = null;
-		this.modeHandler = null;
-	}
-
-	updated(changed) {
-		super.updated(changed);
-		if(changed.has('hidden')){
-			this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
-		}
-	}
-
-	/*
-		Getters for Editor Integration
-	*/
-	get editor() {
-		const isEditor = el => el?.tagName?.startsWith('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-HEC-GROUP';
-	}
-
-	get isInDropdown() {
-		const parent = this.parentElement;
-		return parent && parent.tagName === 'K-HEC-DROPDOWN';
-	}
-
-	get isLastInGroup() {
-		if(!this.isInGroup) return false;
-		const parent = this.parentElement;
-		const siblings = Array.from(parent.children).filter(
-			child => child.tagName.startsWith('K-HEC-') && child.tagName !== 'K-HEC-SPACER'
-		);
-		return siblings[siblings.length - 1] === this;
-	}
-
-	/*
-		Getters for Button Classes
-	*/
-	get buttonClasses() {
-		const baseClass = 'no-btn icon-btn';
-		let styleClass;
-		if(this.isInDropdown){
-			styleClass = 'dropdown-item';
-		} else 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;
-		}
-		
-		:host([hidden]) {
-			display: none !important;
-		}
-		
-		.icon-btn {
-			display: inline-flex !important;
-			align-items: center;
-			justify-content: center;
-			width: 40px;
-			height: 40px;
-			gap: 0.5rem;
-		}
-		.icon-btn:disabled {
-			opacity: 0.6;
-		}
-		
-		.icon-btn:has(slot:not([name])) {
-			width: auto;
-			padding-left: 0.75rem;
-			padding-right: 0.75rem;
-		}
-		
-		/* Styles for controls in dropdown */
-		.icon-btn.dropdown-item {
-			display: flex !important;
-			width: 100% !important;
-			height: auto !important;
-			justify-content: flex-start !important;
-			padding: 0.5rem 0.75rem !important;
-			margin: 0 !important;
-			border: none !important;
-			border-radius: 0 !important;
-			border-bottom: 1px solid var(--c_border) !important;
-		}
-		
-		:host(:last-child) .icon-btn.dropdown-item {
-			border-bottom: none !important;
-		}
-	`;
-}
-
-customElements.define('k-html-editor-control', HtmlEditorControl);

package/src/components/htmlEditorControls/InlineCode.js

@@ -1,63 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class InlineCode 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 = () => {
-		this.editor?.inlineCode();
-	};
-
-	/*
-		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-inline-code', InlineCode);