kempo-ui 0.0.42 → 0.0.62

package/dist/components/SidePanel.js

@@ -0,0 +1,235 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0}};constructor(){super(),this.collapsed=!1,this.side="left"}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("collapsed")){const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
+			<div id="header">
+				<slot name="logo"></slot>
+				<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
+					<k-icon name="arrow-line" direction="${this.collapsed?"right":"left"}"></k-icon>
+				</button>
+			</div>
+			<div id="content">
+				<slot></slot>
+			</div>
+		`}static styles=css`
+		:host {
+			--bg: var(--c_bg);
+			--width-expanded: 16rem;
+			--transition-duration: var(--animation_ms, 256ms);
+			display: block;
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100vh;
+			width: var(--width-expanded);
+			transition: width var(--transition-duration);
+			background: var(--bg);
+			border-right: 1px solid var(--c_border);
+			z-index: 1000;
+		}
+		:host([collapsed]) {
+			width: auto;
+		}
+		:host([side="right"]) {
+			left: auto;
+			right: 0;
+			border-right: none;
+			border-left: 1px solid var(--c_border);
+		}
+		#header {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h);
+			border-bottom: 1px solid var(--c_border);
+		}
+		::slotted([slot="logo"]) {
+			margin-right: auto;
+		}
+		::slotted([slot="logo"]) {
+			flex: 1;
+			min-width: 0;
+			opacity: 1;
+			transition: opacity var(--transition-duration);
+		}
+		:host([collapsed]) ::slotted([slot="logo"]) {
+			display: none;
+		}
+		#toggle {
+			flex-shrink: 0;
+			width: 2rem;
+			height: 2rem;
+			border: none;
+			background: transparent;
+			color: var(--c_text);
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: var(--radius);
+		}
+		#toggle:hover {
+			background: var(--c_bg_hover);
+		}
+		#content {
+			height: calc(100% - 3rem);
+			overflow-y: auto;
+			overflow-x: hidden;
+			display: flex;
+			flex-direction: column;
+		}
+		:host([collapsed]) #content {
+			align-items: flex-start;
+		}
+		:host(:not([collapsed])) #content {
+			/* scrollbar-gutter: stable; */
+		}
+	`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};handleClick=e=>{this.collapsed&&!this["no-expand"]&&this.panel&&(e.preventDefault(),this.panel.expand())};render(){return html`
+			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
+				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
+				${this.collapsed?nothing:html`<span class="label"><slot></slot></span>`}
+			</a>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		:host([collapsed][hide-when-collapsed]) {
+			display: none;
+		}
+		.item {
+			display: flex;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h);
+			color: var(--c_text);
+			text-decoration: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			transition: background var(--animation_ms), color var(--animation_ms);
+			white-space: nowrap;
+		}
+		:host([collapsed]) .item {
+		}
+		.item:hover {
+			background: var(--c_bg_hover);
+		}
+		.item.active {
+			color: var(--tc_on_primary);
+		}
+		.item.active:hover {
+			background: var(--c_primary);
+			filter: brightness(1.1);
+		}
+		k-icon {
+			flex-shrink: 0;
+		}
+		.label {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	`}class SidePanelLabel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0}};constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
+		:host {
+			display: block;
+			margin: var(--spacer_h) 0;
+		}
+		:host([collapsed]) {
+			margin: 0 var(--spacer_h);
+			align-self: stretch;
+		}
+		.label {
+			padding: 0 var(--spacer);
+			font-size: 0.75rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			color: var(--c_text_muted);
+			letter-spacing: 0.05em;
+		}
+		hr {
+			border: none;
+			border-top: 1px solid var(--c_border);
+			margin: var(--spacer_h) var(--spacer);
+		}
+		:host([collapsed]) hr {
+			margin: var(--spacer_h) 0;
+		}
+	`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed&&!this["no-expand"]&&this.panel?this.panel.expand():this.collapsed||(this.open=!this.open)};render(){return html`
+			<div class="menu-container">
+				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
+					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
+					${this.collapsed?nothing:html`<span class="label">${this.label}</span>`}
+					${this.collapsed?nothing:html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
+				</button>
+				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
+					<slot></slot>
+				</div>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		:host([collapsed][hide-when-collapsed]) {
+			display: none;
+		}
+		.menu-container {
+			margin: 0;
+		}
+		.menu-header {
+			display: flex !important;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding-top: var(--spacer_h) !important;
+			padding-bottom: var(--spacer_h) !important;
+			padding-left: var(--spacer_h) !important;
+			padding-right: var(--spacer_h) !important;
+			color: var(--c_text);
+			background: transparent;
+			border: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			width: calc(100% - var(--spacer));
+			cursor: pointer;
+			text-align: left;
+			white-space: nowrap;
+			transition: background var(--animation_ms);
+		}
+		:host([collapsed]) .menu-header {
+			width: auto;
+		}
+		.menu-header:hover {
+			background: var(--c_bg_hover);
+		}
+		k-icon {
+			flex-shrink: 0;
+		}
+		.label {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.chevron {
+			transition: transform var(--animation_ms);
+		}
+		.menu-content {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height var(--animation_ms);
+			padding-left: calc(var(--spacer_h) * 2);
+		}
+		:host([collapsed]) .menu-content {
+			padding-left: 0;
+		}
+		.menu-content.open {
+			max-height: 500px;
+		}
+		::slotted(*) {
+			margin: 0.25rem 0;
+		}
+	`}class SidePanelSpacer extends ShadowComponent{render(){return html`<div class="spacer"></div>`}static styles=css`
+		:host {
+			display: block;
+			flex: 1;
+		}
+		.spacer {
+			height: 100%;
+		}
+	`}customElements.define("k-side-panel",SidePanel),customElements.define("k-side-panel-item",SidePanelItem),customElements.define("k-side-panel-label",SidePanelLabel),customElements.define("k-side-panel-menu",SidePanelMenu),customElements.define("k-side-panel-spacer",SidePanelSpacer);export default SidePanel;

package/dist/components/Table.js

@@ -15,7 +15,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
           @click=${this.enableSorting?()=>this.handleFieldClick(t):null}
         >
           ${s}
-          ${o?html`<k-icon name="${r.asc?"arrow-down":"arrow-up"}" class="icon-sort"></k-icon>`:""}
+          ${o?html`<k-icon name="arrow" direction="${r.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
         </div>
       `)}),this.hasAfterControls()&&e.push(html`
         <div class="field cell field-after-controls" style="width: ${this.columnSizes.afterControls}px"></div>

package/dist/components/htmlEditorControls/AlignCenter.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignCenter()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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);

package/dist/components/htmlEditorControls/AlignJustify.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignJustify()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/AlignLeft.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignLeft()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/AlignRight.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignRight()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/Bold.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.bold()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/BulletList.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.unorderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/CharacterCount.js

@@ -0,0 +1,18 @@
+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:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),this.editor&&(this.editor.addEventListener("ready",()=>{this.updateCount()}),this.editor.addEventListener("change",()=>{this.updateCount()}),setTimeout(()=>this.updateCount(),0))}updateCount=()=>{if(!this.editor)return;const t=(new DOMParser).parseFromString(this.editor.getValue(),"text/html").body.innerText||"";this.count=t.length};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/dist/components/htmlEditorControls/ClearFormatting.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.removeFormat()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/CodeBlock.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{const o=window.getSelection()?.toString();t.preventDefault(),t.stopPropagation(),this.editor&&(o?this.editor.wrapSelection("<pre>","</pre>",o):this.editor.formatBlock("pre"))};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+				<slot name="icon">
+					<k-icon name="code_blocks"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-code-block",CodeBlock);

package/dist/components/htmlEditorControls/ControlGroup.js

@@ -0,0 +1,14 @@
+import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class ControlGroup extends ShadowComponent{static properties={editorMode:{type:String,state:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.hasAttribute("class")||this.setAttribute("class","b r mq"),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}get editor(){return this.closest("k-html-editor")}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode,this.requestUpdate())}hasVisibleChildren(){return Array.from(this.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}static styles=css`
+		:host {
+			display: inline-flex;
+		}
+		
+		:host([hidden]) {
+			display: none !important;
+		}
+		
+		::slotted(*) {
+			margin-top: -1px;
+			margin-bottom: -1px;
+		}
+	`;render(){return html`<slot></slot>`}updated(){super.updated(),requestAnimationFrame(()=>{this.hidden=!this.hasVisibleChildren()})}}customElements.define("k-hec-group",ControlGroup);

package/dist/components/htmlEditorControls/ControlSpacer.js

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

package/dist/components/htmlEditorControls/CreateLink.js

@@ -0,0 +1,15 @@
+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:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=t=>{if(!this.editor)return;t.preventDefault(),t.stopPropagation();const e=this.editor.selection?.text||"",o=document.createElement("input");o.type="text",o.placeholder="https://example.com",o.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const i=document.createElement("input");i.type="text",i.placeholder="Enter link text",i.value=e,i.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const n=document.createElement("div");n.className="p",n.style.cssText="display: flex; flex-direction: column; gap: 1rem;",n.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">URL</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Link Text</label>\n\t\t\t</div>\n\t\t',n.children[0].appendChild(o),n.children[1].appendChild(i),Dialog.create(n,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:t=>{const e=o.value.trim(),n=i.value.trim();if(!e)return void(t.keepDialogOpen=!0);const l=document.createElement("a");l.href=e,l.textContent=n||e,this.editor.selection?this.editor.replaceSelectionWithElement(l,!0):this.editor.insertElementAtCursor(l,!0)}})};render(){return this.hidden="code"===this.editorMode,html`
+			<button
+				class="${this.buttonClasses}"
+				@mousedown="${this.handleMouseDown}"
+			>
+				<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/dist/components/htmlEditorControls/DropdownControl.js

@@ -0,0 +1,57 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class DropdownControl extends HtmlEditorControl{static properties={opened:{type:Boolean,reflect:!0},editorMode:{type:String,state:!0}};constructor(){super(),this.opened=!1}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}updated(t){super.updated(t),t.has("editorMode")&&requestAnimationFrame(()=>{this.hidden="code"===this.editorMode&&!this.hasVisibleChildren()})}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}hasVisibleChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("slot")).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}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;
+      }
+    `];handleToggle=()=>{this.opened=!this.opened};handleOpened=()=>{this.opened=!0};handleClosed=()=>{this.opened=!1};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/dist/components/htmlEditorControls/FormatBlock.js

@@ -0,0 +1,12 @@
+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:!0},tag:{type:String},label:{type:String}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];constructor(){super(),this.tag="p",this.label=""}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.formatBlock(this.tag)};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){this.hidden="code"===this.editorMode;this.label||this.getDefaultLabel();const t=this.getDefaultIcon();return html`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+				<slot name="icon">
+					<k-icon name="${t}"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}getDefaultLabel(){return{h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Paragraph"}[this.tag]||this.tag.toUpperCase()}getDefaultIcon(){return{h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6",p:"format_paragraph"}[this.tag]||"format_paragraph"}}customElements.define("k-hec-format-block",FormatBlock);

package/dist/components/htmlEditorControls/HtmlEditorControl.js

@@ -0,0 +1,44 @@
+import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class HtmlEditorControl 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:!0}};constructor(){super(),this.btnClass="b r mq ph",this.groupBtnClass="br ph",this.groupLastBtnClass="ph"}get editor(){let t=this.getRootNode();for(;t instanceof ShadowRoot;){const o=t.host,n=o.closest("k-html-editor");if(n)return n;t=o.getRootNode()}return this.closest("k-html-editor")}get isInGroup(){const t=this.parentElement;return t&&"K-HEC-GROUP"===t.tagName}get isInDropdown(){const t=this.parentElement;return t&&"K-HEC-DROPDOWN"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=this.parentElement,o=Array.from(t.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName);return o[o.length-1]===this}get buttonClasses(){let t;return t=this.isInDropdown?"dropdown-item":this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}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/dist/components/htmlEditorControls/InlineCode.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{if(!this.editor)return;t.preventDefault(),t.stopPropagation();const e=document.createElement("code"),o=this.editor.getValueWithSelectionMarkers();o.hasSelection?(e.textContent=o.selectedText,this.editor.replaceSelectionWithElement(e,!0)):(e.textContent="​",this.editor.insertElementAtCursor(e,!0))};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+				<slot name="icon">
+					<k-icon name="code_blocks"></k-icon>
+				</slot>
+				<slot></slot>
+			</button>
+		`}}customElements.define("k-hec-inline-code",InlineCode);

package/dist/components/htmlEditorControls/InsertTable.js

@@ -0,0 +1,15 @@
+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:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=e=>{if(!this.editor)return;e.preventDefault(),e.stopPropagation();const t=this.editor.shadowRoot.getSelection()||window.getSelection();let o=null,l=null;if(t.rangeCount){let e=t.getRangeAt(0).startContainer;e.nodeType===Node.TEXT_NODE&&(e=e.parentElement),o=e.closest("table")}const n=!!o;let r=3,s=3,i=!0;if(n){const e=o.querySelector("thead"),t=o.querySelector("tbody"),n=!!e;if(l=[],n){const t=e.querySelector("tr"),o=Array.from(t.cells).map(e=>e.innerHTML);l.push(o),s=o.length}const d=t.querySelectorAll("tr");d.forEach(e=>{const t=Array.from(e.cells).map(e=>e.innerHTML);l.push(t),t.length>s&&(s=t.length)}),r=d.length,i=n,o.remove()}const d=document.createElement("input");d.type="number",d.min="1",d.max="20",d.value=r.toString(),d.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const c=document.createElement("input");c.type="number",c.min="1",c.max="10",c.value=s.toString(),c.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const a=document.createElement("input");a.type="checkbox",a.checked=i,a.id="table-headers-checkbox";const m=document.createElement("div");m.className="p",m.style.cssText="display: flex; flex-direction: column; gap: 1rem;",m.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Rows</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Columns</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; align-items: center; gap: 0.5rem;">\n\t\t\t\t<label for="table-headers-checkbox" style="font-weight: bold;">Include Headers</label>\n\t\t\t</div>\n\t\t',m.children[0].appendChild(d),m.children[1].appendChild(c),m.children[2].insertBefore(a,m.children[2].firstChild),Dialog.create(m,{title:n?"Edit Table":"Insert Table",cancelText:"Cancel",confirmText:n?"Update Table":"Insert Table",confirmClasses:"success",confirmAction:()=>{const e=parseInt(d.value)||3,t=parseInt(c.value)||3,o=a.checked;this.editor.insertTable(e,t,o,l)}})};render(){return this.hidden="code"===this.editorMode,html`
+			<button
+				class="${this.buttonClasses}"
+				@mousedown="${this.handleMouseDown}"
+			>
+				<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/dist/components/htmlEditorControls/Italic.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.italic()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/Mode.js

@@ -0,0 +1,9 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Mode extends HtmlEditorControl{static properties={mode:{type:String,reflect:!0}};connectedCallback(){super.connectedCallback(),this.updateMode(),this.editor?.addEventListener("mode-changed",()=>this.updateMode())}handleClick=()=>{this.editor&&(this.editor.mode="visual"===this.editor.mode?"code":"visual")};updateMode(){this.editor&&(this.mode=this.editor.mode)}static styles=[HtmlEditorControl.styles,css`
+      :host {
+        display: inline-flex;
+      }
+    `];render(){const t="code"===this.mode?`${this.buttonClasses} bg-primary`:this.buttonClasses;return html`
+      <button class="${t}" @click="${this.handleClick}">
+        <k-icon name="code"></k-icon>
+      </button>
+    `}}customElements.define("k-hec-mode",Mode);

package/dist/components/htmlEditorControls/NumberList.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.orderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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/dist/components/htmlEditorControls/Strikethrough.js

@@ -0,0 +1,12 @@
+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:!0}};static styles=[HtmlEditorControl.styles,css`
+			:host {
+				display: inline-flex;
+			}
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.strikethrough()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,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);